/* Shared visual language. Stimulus fields, colors and dimensions retain the experiment protocol. */
:root{--ink:#252a36;--muted:#475569;--accent:#4052ad;--line:#e6e8ee;--paper:#f8f9fc;color:var(--ink);background:var(--paper);font-family:Inter,-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;-webkit-font-smoothing:antialiased}
body{background:var(--paper);color:var(--ink)}button,input,select,textarea,a{-webkit-tap-highlight-color:transparent}button,.button{transition:background .16s,box-shadow .16s,transform .16s}button:focus-visible,a:focus-visible{outline:3px solid #b3bbf0;outline-offset:4px}button:not(:disabled):active,.button:active{transform:translateY(1px)}
body>header{max-width:1160px;padding:26px 32px;margin:0 auto;border-bottom:1px solid var(--line);min-height:92px}.brand{display:flex;align-items:center;gap:13px;color:var(--ink);font-size:16px;letter-spacing:.02em;font-weight:650}.brand small{display:block;font-size:16px;letter-spacing:.14em;font-weight:500;color:#475569;margin-top:5px}.brand-symbol{display:block;width:32px;height:35px;position:relative}.brand-symbol i{position:absolute;width:23px;height:23px;border:1.5px solid #6878d5;border-radius:5px;left:0;top:2px}.brand-symbol i+i{left:9px;top:11px;background:#dfe4fbcc;border-color:#a1afe5}header .tag{font-size:16px;color:#475569}main{max-width:1130px;margin:0 auto 35px;padding:0 32px}.muted{color:var(--muted)}.eyebrow{font-size:16px;color:#475569;letter-spacing:.14em}button{background:var(--accent);border-radius:10px;font-size:16px;font-weight:550}button:hover{background:#4858c0}button.secondary{background:#edf0f8;color:#475569}.card{box-shadow:0 8px 30px #28304d04;border-color:var(--line)}input:not([type=range]):not([type=checkbox]),select,textarea{border:1px solid #e0e4ed;border-radius:10px;color:var(--ink);background:#fbfcfe;font-size:16px;padding:13px 14px;transition:border-color .16s,box-shadow .16s}input:not([type=range]):focus,select:focus,textarea:focus{outline:none;border-color:#9ca8e7;box-shadow:0 0 0 3px #5969d510}input::placeholder{color:#475569}input[type=checkbox]{accent-color:var(--accent);width:16px;height:16px;flex-shrink:0;cursor:pointer}.error{font-size:16px;line-height:1.65}.error:not(:empty){padding:12px 14px;border:1px solid #f1d6d0;background:#fff6f3;border-radius:8px;margin:14px 0}#pageNotice:not(:empty){padding:14px 24px!important;font-size:16px}
.home-layout{display:grid;grid-template-columns:1fr 430px;align-items:center;gap:76px;min-height:650px;padding:54px 0 46px}.section-kicker{display:flex;align-items:center;gap:8px;font-size:16px;letter-spacing:.15em;font-weight:600;color:#475569}.section-kicker>span{width:6px;height:6px;background:#7f91d9;border-radius:50%}.home-story h1{font-size:52px;line-height:1.32;letter-spacing:-.045em;font-weight:620;margin:22px 0;color:var(--ink)}.home-story h1>span{color:var(--accent)}.home-description{font-size:16px;line-height:1.95;color:#475569;margin:0 0 28px}.task-preview{max-width:370px}.task-preview>div{display:flex;align-items:center;gap:15px;padding:13px 0;border-bottom:1px solid var(--line)}.task-preview>div:last-child{border-bottom:0}.task-preview b{font-size:16px;font-weight:550;display:block;color:#4b5363}.task-preview small{display:block;font-size:16px;color:#475569;margin-top:3px}.task-preview em{margin-left:auto;color:#475569;font-size:16px;font-style:normal;font-variant-numeric:tabular-nums;letter-spacing:.1em}.task-icon{width:37px;height:37px;background:#eef1fb;border:1px solid #e3e8f6;border-radius:10px;display:block;position:relative}.task-icon:after{content:"";width:15px;height:15px;position:absolute;left:10px;top:10px;border-radius:2px}.area-icon:after{background:#a7b5e5;border:1px solid #8d9fd8}.length-icon:after{border:1px solid #b9c5e1;border-bottom:3px solid #778bc7;background:#e3e9f7}.color-icon:after{background:#cc8b98;border:1px solid #bf7c8a}.study-meta{display:flex;gap:22px;align-items:center;margin-top:26px;color:#475569;font-size:16px}.study-meta strong{font-size:19px;font-weight:550;color:#515d78;margin-right:4px;font-variant-numeric:tabular-nums}.rest-meta{border-left:1px solid #dfe4ee;padding-left:22px}
.registration-card{padding:31px 32px 22px;background:#fff;border:1px solid #e4e7ef;border-radius:20px;box-shadow:0 16px 55px -22px #39466e26,0 2px 8px #27325403}.form-topline{display:flex;align-items:center;justify-content:space-between;margin-bottom:23px;font-size:16px;color:#475569}.part-pill{font-size:16px;letter-spacing:.08em;color:#475569;background:#f0f3fc;border:1px solid #e7ecf9;border-radius:5px;padding:5px 8px}.registration-card h2{font-size:22px;letter-spacing:-.025em;margin:0 0 9px;font-weight:600;color:#333a4a}.form-description{font-size:16px;color:#475569;line-height:1.8;margin:0 0 25px}#register{margin:0;text-align:left}#register>label:not(.check){font-size:16px;font-weight:550;color:#475569;margin:19px 0 9px;display:flex;justify-content:space-between}#register>label>span{font-weight:400;font-size:16px;color:#475569}#register>input,#register>select{width:100%;min-height:47px}#register>select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23828ca4' stroke-width='1.6'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:32px}.display-check{margin:22px 0!important;padding:14px 12px;background:#f7f8fc;border:1px solid #eef0f6;border-radius:10px;gap:10px;cursor:pointer;align-items:flex-start!important}.display-check input{margin-top:2px!important}.display-check b{display:block;font-size:16px;font-weight:500;color:#475569}.display-check small{display:block;font-size:16px;line-height:1.8;color:#475569;margin-top:5px}.start-button{display:flex;align-items:center;justify-content:space-between;width:100%;padding:14px 17px!important;margin-top:8px;background:#5969d5;box-shadow:0 4px 10px #5969d51c}.start-button>span:last-child{font-size:19px;line-height:20px}.save-note{display:flex;align-items:center;justify-content:center;gap:6px;font-size:16px!important;color:#475569;line-height:1.6;margin:17px 0 0}.home-footer{display:flex;justify-content:space-between;padding:23px 0;border-top:1px solid var(--line);font-size:16px;color:#475569}.home-footer i{font-style:normal;color:#475569;margin:0 9px}.home-footer a{color:#475569;text-decoration:none;font-size:16px}.home-footer a:hover{color:var(--accent)}.home-footer a span{margin-left:9px}
/* Controls and surrounding chrome only; the two stimulus fields stay identical. */
.toprow{margin-top:30px}.toprow .muted{font-size:16px}.toprow+h1{font-size:25px;letter-spacing:-.025em;margin:26px 0}.paneltitle b{font-size:17px}.paneltitle small{font-size:16px}.response-card{border-color:#e5e8f0;border-radius:16px;box-shadow:0 10px 30px #293f6104}.response-footer #nextAnswer{background:var(--accent)}.response-footer #nextAnswer:not(:disabled):hover{background:#4858c0}.response-heading{font-size:16px}.response-heading .readout{font-size:16px}.response-footer .help-disclosure{font-size:16px}.welcome{max-width:660px;padding:44px 38px;margin:70px auto;background:#fff;border:1px solid var(--line);border-radius:22px;box-shadow:0 14px 50px #29345105}.welcome h1{font-size:32px;color:var(--ink);letter-spacing:-.03em}.welcome p{font-size:16px;line-height:1.9;color:#475569}.welcome .actions{margin-top:28px;justify-content:center}.welcome .eyebrow{margin-bottom:20px}
/* Researcher workspace */
.admin-page header,.admin-page main{max-width:1260px}.admin-page main{margin-top:32px}.admin-page h1{font-size:30px;color:var(--ink);letter-spacing:-.035em;font-weight:600}.admin-page .brand{font-size:16px}.admin-page .brand span{font-size:16px;color:#475569}.admin-page .muted{font-size:16px}.admin-page .eyebrow{font-size:16px}.admin-page .card{border-radius:14px}.admin-page button,.admin-page .button{background:var(--accent);font-size:16px;border-radius:8px}.admin-page button:hover,.admin-page .button:hover{background:#4858c0}.admin-page .secondary,.admin-page .quiet{background:#eceff8;color:#475569}.admin-page .secondary:hover,.admin-page .quiet:hover{background:#e3e8f5}.admin-page .danger{background:#fcf0ee;color:#ab655d}.admin-page .danger:hover{background:#f8e4e0}.admin-page .link{background:transparent;color:var(--accent)}.admin-page .tabs{gap:24px}.admin-page .tabs button{background:transparent;border-radius:0;padding:13px 4px;color:#475569}.admin-page .tabs button.active{color:var(--accent);border-color:var(--accent)}.admin-page .metric{border-color:var(--line);padding:23px;border-radius:13px;font-size:16px;box-shadow:0 4px 20px #27345102}.admin-page .metric b{font-size:32px;font-weight:550;color:#4b5876}.admin-page th{background:#f9fafe;font-size:16px;letter-spacing:.03em}.admin-page td{font-size:16px;padding:18px 12px}.admin-page td b{font-weight:550}.admin-page .badge{font-size:16px}.admin-page .info{font-size:16px;color:#475569}.admin-page .login{padding:36px;max-width:430px;margin-top:90px;box-shadow:0 18px 55px -25px #384b7433}.admin-page .login h1{margin-top:20px}.admin-page .login p{font-size:16px}.admin-page .formula{background:#f3f5fc;color:#475569;border:1px solid #e9edf8}.admin-page .chart-grid h2{font-weight:550;font-size:17px}.admin-page .columns h2{font-size:17px;font-weight:550}
@media(min-width:1300px){.home-layout{min-height:700px}}
@media(max-width:1000px){.home-layout{gap:35px;grid-template-columns:1fr 380px}.home-story h1{font-size:43px}.registration-card{padding:28px}.study-meta{gap:14px}.rest-meta{padding-left:14px}}
@media(max-width:820px){body>header{padding:20px 24px;min-height:80px}main{padding:0 24px}.home-layout{grid-template-columns:1fr;gap:28px;padding:38px 0 28px;min-height:0;max-width:520px;margin:0 auto}.home-story h1{font-size:37px;line-height:1.35;margin:16px 0}.home-story h1 br{display:none}.home-description{font-size:16px;margin-bottom:20px}.home-description br{display:none}.task-preview{display:flex;gap:9px;max-width:none}.task-preview>div{flex:1;min-width:0;display:block;background:#f0f3fa;border:1px solid #e8ecf5!important;border-radius:10px;padding:12px}.task-preview em{display:none}.task-preview .task-icon{display:none}.task-preview b{font-size:16px}.task-preview small{font-size:16px;margin-top:5px}.study-meta{margin-top:18px}.registration-card{padding:25px 28px}.form-topline{margin-bottom:17px}.form-description{margin-bottom:18px}.registration-card h2{font-size:21px}.home-footer{max-width:520px;margin:0 auto}.welcome{padding:32px 24px;margin:40px auto}.welcome h1{font-size:27px}header .tag{font-size:16px}}
@media(max-width:480px){header .tag{display:none}.home-story h1{font-size:33px}.home-description br{display:block}.task-preview>div{padding:10px 8px}.task-preview small{font-size:16px}.registration-card{padding:24px}.save-note{font-size:16px!important}.home-footer{font-size:16px}.admin-page .tabs{gap:16px}}
@media(prefers-reduced-motion:reduce){button,.button,input,select,textarea{transition:none!important}}

[hidden]{display:none!important}
/* Flexible containers prevent tables, long labels and grid children widening the page. */
main,.home-layout>* ,.columns>*,.chart-grid>*{min-width:0}
.home-footer,.header-right,.study-meta{flex-wrap:wrap;gap:12px}
.admin-page .chart-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,310px),1fr))}
.admin-page .table-wrap{max-width:100%;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
.admin-page .formula,.admin-page .caption,.admin-page #message{overflow-wrap:anywhere}
.admin-page .top>div{min-width:0}
@media(max-width:620px){
  body>header{padding:16px;min-height:72px;gap:12px}
  main{padding-left:16px;padding-right:16px}
  input:not([type=range]):not([type=checkbox]),select,textarea{font-size:16px}
  .home-layout{padding-top:28px;gap:24px}
  .registration-card{padding:24px 20px}
  .home-story h1{font-size:clamp(27px,7.6vw,37px)}
  .task-preview{gap:6px}.task-preview>div{padding:10px 7px}
  .task-preview small{line-height:1.5}
  .study-meta{gap:12px}.rest-meta{padding-left:12px}
  .toprow{margin-top:18px;gap:10px}.toprow .secondary{min-height:44px;white-space:nowrap}
  .toprow+h1{font-size:21px;line-height:1.5;margin:16px 0 20px}
  .stimuli{grid-template-columns:minmax(0,1fr);gap:18px}
  .paneltitle{height:auto;min-height:52px;padding:0 4px 10px;gap:10px}
  .paneltitle b{font-size:16px}.paneltitle small{font-size:16px}
  .role-icon{width:34px;height:34px;border-radius:10px}
  .field{height:245px;border-radius:14px}
  /* Do not scale the squares: the recorded CSS pixel dimensions must stay accurate. */
  .square{flex-shrink:0}
  .response-card{padding:20px 16px 16px}
  .response-heading{gap:12px;margin-bottom:22px}
  .response-card .sliderbox{margin:0 10px}
  .response-card input[type=range]{touch-action:pan-y;height:12px}
  .response-card input[type=range]::-webkit-slider-thumb{width:32px;height:32px}
  .response-card input[type=range]::-moz-range-thumb{width:18px;height:18px}
  .scale-stop .mark-button{min-width:40px;height:44px;font-size:16px}
  .scale-stop small{font-size:16px;margin-top:3px}
  #sliderMarks{height:76px;margin-left:8px;margin-right:8px}
  .response-footer{flex-direction:column;gap:16px}
  .response-footer .help-disclosure{max-width:100%;margin:0;font-size:16px}
  .response-footer #nextAnswer{width:100%;min-height:48px}
  .range-actions button{min-height:44px}
  .welcome{padding:28px 18px;margin:30px auto}.welcome h1{font-size:26px}
  .welcome .actions{flex-direction:column}.welcome .actions button{width:100%;min-height:46px}
  .admin-page main{margin-top:24px}.admin-page h1{font-size:26px}
  .admin-page .header-right{gap:6px}.admin-page #environment{display:none}
  .admin-page .top{align-items:stretch;gap:16px}
  .admin-page .top>.actions{width:100%;gap:8px}
  .admin-page .actions button,.admin-page .actions .button{flex:1;text-align:center;min-height:44px}
  .admin-page .top>input,.admin-page .top>select{width:100%}
  .admin-page .columns{grid-template-columns:minmax(0,1fr)}
  .admin-page .metrics{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .admin-page .metric{padding:16px}.admin-page .metric b{font-size:28px}
  .admin-page .login{margin-top:40px;padding:26px 22px}
  .admin-page .tabs{gap:18px;white-space:nowrap;overflow-x:auto}
  .admin-page .tabs button{min-height:46px}
  .admin-page .compact,.admin-page .link{min-height:40px}
  .admin-page .chart-grid .card{padding:16px}
}
.home-description,.form-description{color:#475569}.display-check small{color:#475569}.task-preview small{color:#475569}.save-note{color:#475569}.home-footer{color:#475569}

/* Passive scale hints keep the response to one selection and one confirmation. */
.response-heading .readout{font-size:28px;line-height:1.25;min-height:42px;min-width:130px}
.response-heading .readout.pending{font-size:16px}
#sliderMarks{height:54px;pointer-events:none}
.scale-stop .scale-value{display:block;color:#475569;font-size:16px;line-height:20px;font-variant-numeric:tabular-nums}
.scale-stop small{margin-top:4px;font-size:16px}
.range-actions #expandRangeButton{border:0;background:transparent;color:#475569;font-size:16px;padding:8px 4px;min-height:40px;text-decoration:underline;text-underline-offset:3px}
.range-actions #expandRangeButton:hover{background:transparent;color:#4858c0}

/* Readable text at desktop and mobile sizes; preserve all stimulus dimensions/colors. */
body{font-size:16px;line-height:1.6}
small,.muted,.caption,.info,.eyebrow{font-size:16px;color:#475569;line-height:1.65}
input::placeholder{color:#596579;opacity:1}
button,.button,input:not([type=range]):not([type=checkbox]),select,textarea{font-size:16px}
.brand small,.section-kicker,.part-pill,.form-topline,.home-footer,.home-footer a{font-size:14px;color:#475569;letter-spacing:.03em}
.home-description,.form-description,.welcome p{font-size:17px;color:#374151}
.task-preview b,.task-preview small,.study-meta,.display-check b,.display-check small,#register>label:not(.check),#register>label>span{font-size:16px;color:#374151}
.save-note{font-size:16px!important;color:#475569;flex-wrap:wrap;text-align:center}
.paneltitle{height:auto;min-height:76px}.paneltitle small{font-size:16px;color:#475569}
.response-heading{font-size:17px;color:#374151;flex-wrap:wrap}
.response-heading .readout{font-size:28px;color:#294a83}
.response-heading .readout.pending{font-size:17px;color:#475569}
.scale-stop .scale-value,.scale-stop small{font-size:16px;color:#374151}
#sliderMarks{height:65px}
.response-footer .help-disclosure,.response-footer .help-disclosure summary,.range-actions #expandRangeButton,.range-actions #rangeStatus{font-size:16px;color:#475569;line-height:1.6}
.response-footer #nextAnswer{font-size:17px}
.admin-page .muted,.admin-page .info,.admin-page .caption,.admin-page .eyebrow,.admin-page .login p,.admin-page label,.admin-page small{font-size:16px;color:#475569}
.admin-page th,.admin-page td,.admin-page .badge,.admin-page .metric,.admin-page .formula,.admin-page button,.admin-page .button{font-size:16px}
.admin-page th{font-weight:650;color:#334155;letter-spacing:0}
.admin-page td{color:#1f2937;line-height:1.7}
.admin-page .badge{color:#334155}.admin-page .badge.good{color:#166534}.admin-page .badge.warn{color:#854d0e}
.admin-page .danger{color:#943c32}.admin-page .warning{font-size:16px;color:#854d0e}
.admin-page .formula{color:#334155}.admin-page .metric{color:#475569}
.admin-page .chart-grid h2,.admin-page .columns h2{font-size:20px}
.admin-page .chart{min-width:440px}.admin-page [id^="chart-"]{overflow-x:auto}
@media(max-width:620px){
 .task-preview{flex-direction:column}.task-preview>div{display:flex;align-items:baseline;gap:12px;padding:12px}
 .task-preview small{margin-top:0}.home-footer{align-items:center}
 .paneltitle{min-height:64px}.paneltitle b{font-size:18px}
 .response-card .sliderbox{margin:0 5px}.scale-stop small{font-size:15px}
 .admin-page .list-filters input{min-width:0;width:100%;flex-basis:100%}
 .admin-page .list-filters select{width:100%}
 .admin-page .metric{padding:14px;line-height:1.6}
}

.admin-page .report-figures{display:grid;grid-template-columns:minmax(0,1fr);gap:24px}.admin-page .report-figures .chart{min-width:850px;max-width:100%;height:auto}.report-table caption{text-align:left;font-size:17px;font-weight:650;color:#1f2937;padding:12px}.report-table table{margin-top:0}.report-table th,.report-table td{padding:12px}

.admin-page .equation{font-family:"Cambria Math","Times New Roman",serif;font-size:21px;line-height:1.7;padding:16px;background:#f1f5f9;color:#172033;margin:12px 0;overflow-wrap:anywhere}.admin-page details li{margin-bottom:16px}

/* Fixed linear response range: manual values never change its geometry. */
.number-response{display:grid;grid-template-columns:1fr 160px;align-items:center;gap:10px 16px;margin:0 0 20px}
.number-response label{font-size:17px;font-weight:600;color:#334155}
.number-response input{width:100%;min-width:0;min-height:48px;font-size:20px;padding:10px 12px;border:1px solid #94a3b8;border-radius:9px;box-sizing:border-box}
.number-response p{grid-column:1/-1;margin:0;font-size:16px;color:#475569;line-height:1.6}
.number-response #rangeStatus:empty{display:none}
.response-card input[type=range].outside-range::-webkit-slider-thumb{opacity:0}
.response-card input[type=range].outside-range::-moz-range-thumb{opacity:0}
@media(max-width:620px){.response-card{padding-left:16px;padding-right:16px}.response-card .sliderbox{margin:0 4px}.number-response{grid-template-columns:1fr}.number-response input{font-size:20px}.number-response p{grid-column:1}}

/* Adjustable endpoints remain visible and reachable on narrow screens. */
.adjustable-range{display:flex;justify-content:space-between;gap:16px;text-align:left;margin:0 0 16px}
.adjustable-range>div{display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.adjustable-range>div:last-child{align-items:flex-end}
.adjustable-range button{font-size:16px;min-height:44px;padding:8px 12px}
.adjustable-range button:disabled{opacity:.55;cursor:default}

/* Full-width confirmation below the score is reachable from either side. */
.response-footer.direct-response{display:grid;grid-template-columns:minmax(0,1fr);align-items:stretch;gap:12px;padding-top:18px}
.direct-response .number-response{display:flex;flex-direction:column;align-items:stretch;gap:8px;margin:0}
.direct-response .number-response label{margin:0;color:#273951;font-size:18px}
.direct-response #ratingNumber{width:100%;max-width:none;min-height:52px;padding:12px 14px;font-size:22px;background:#fff;border:2px solid #8191bd;border-radius:10px;scroll-margin-top:24px}
.direct-response #ratingNumber[aria-invalid=true]{border-color:#9b392d}
.response-footer.direct-response #nextAnswer{width:100%;min-height:56px;min-width:0;margin:0;justify-content:center;gap:16px;font-size:18px}
.response-note{margin:10px 0 0;font-size:16px;line-height:1.6;color:#475569}
.response-note:empty{display:none}
.response-help{margin-top:14px;font-size:16px;line-height:1.6}
.response-help p{margin-bottom:0}
@media(max-width:620px){
 .response-footer.direct-response{grid-template-columns:minmax(0,1fr);gap:12px}
 .response-footer.direct-response #nextAnswer{width:100%;min-height:52px}
 .direct-response #ratingNumber{font-size:22px}
}

.response-footer{justify-content:center}
.response-footer #nextAnswer{width:100%;justify-content:center;min-height:56px}
.range-minimum{font-size:16px;color:#475569;padding-top:10px}

.range-actions.range-picker{display:flex;align-items:center;justify-content:flex-start;flex-wrap:wrap;gap:12px;text-align:left;margin:0 0 18px}
.range-picker label{margin:0;font-size:17px;font-weight:600;color:#273951}
.range-picker select{width:auto;min-width:150px;min-height:48px;font-size:17px}
.range-picker .range-buttons{display:flex;gap:8px;flex-wrap:wrap}
.range-picker .range-buttons button{min-height:48px;padding:10px 16px;font-size:16px;text-decoration:none;background:#edf0f8;color:#334155;border:1px solid #bac4da}
.range-picker .range-buttons button:disabled{opacity:.5}
@media(max-width:620px){.range-picker .range-buttons{width:100%}.range-picker .range-buttons button{flex:1;padding:10px 8px}}

/* A brief celebration only after the server confirms completion. */
.welcome.completion-card{max-width:740px;margin:40px auto;text-align:center;padding:42px 32px;background:linear-gradient(155deg,#fff 45%,#f0f2ff);border-color:#dce2f5}
.completion-medal{display:grid;place-items:center;margin:0 auto 22px;width:82px;height:82px;border-radius:26px;background:#eef0ff;color:#5969d5;font-size:52px;box-shadow:0 0 0 9px #f7f8ff;animation:completion-arrive .6s ease-out both}
.completion-card h1{font-size:clamp(28px,5vw,40px);margin:16px 0;color:#34438a}
.completion-card .completion-lead{font-size:19px;line-height:1.85;color:#3f4c68}
.completion-stats{display:flex;justify-content:center;flex-wrap:wrap;gap:14px;margin:24px 0 18px}
.completion-stats span{padding:13px 20px;border:1px solid #e0e5f5;border-radius:14px;background:#fff;color:#475569;font-size:16px}
.completion-stats strong{font-size:27px;color:#4556a9;margin-right:5px}
.completion-badges{display:flex;justify-content:center;flex-wrap:wrap;gap:8px}
.completion-badges span{padding:6px 12px;background:#eaf5f0;color:#25664d;border-radius:20px;font-size:16px}
.completion-card .completion-thanks{font-size:18px;margin:24px 0 12px;color:#334155}
.completion-card .completion-save{font-size:16px;color:#475569}
.completion-confetti{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:1000}
.completion-confetti i{position:absolute;top:-24px;left:var(--x);width:10px;height:15px;opacity:0;animation:completion-fall var(--duration) var(--delay) ease-in both}
@keyframes completion-fall{0%{opacity:0;transform:translate3d(0,-20px,0) rotate(0)}10%{opacity:1}80%{opacity:1}100%{opacity:0;transform:translate3d(var(--drift),110vh,0) rotate(var(--spin))}}
@keyframes completion-arrive{from{opacity:0;transform:scale(.8) translateY(12px)}to{opacity:1;transform:scale(1) translateY(0)}}
@media(max-width:620px){.welcome.completion-card{margin:24px auto;padding:32px 18px}.completion-stats{gap:10px}.completion-stats span{padding:12px}.completion-card .actions{gap:12px}}
@media(prefers-reduced-motion:reduce){.completion-medal{animation:none}.completion-confetti{display:none}}

/* Regular numeric ticks and highlighted ratio references. */
#sliderMarks{height:42px}
#sliderMarks.inline-ratios{height:78px}
.scale-stop::before{content:"";display:block;width:1px;height:6px;background:#a8b5ce;margin:0 auto 7px}
.scale-stop.scale-reference .scale-value{color:#354db4;font-weight:700}
.scale-stop .ratio-badge{display:inline-block;margin-top:7px;padding:2px 6px;border-radius:6px;color:#354db4;background:#e9edff;font-weight:700;font-size:15px;line-height:1.5;white-space:nowrap}
.ratio-legend{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin:0 0 18px;font-size:16px;color:#475569}
.ratio-legend[hidden]{display:none}
.ratio-legend span{display:flex;align-items:center;gap:6px}
.ratio-legend b{padding:2px 6px;border-radius:6px;background:#e9edff;color:#354db4;font-weight:700}
@media(max-width:480px){
 .scale-stop .scale-value{font-size:14px}
 .scale-stop .ratio-badge{font-size:14px;padding:2px 4px}
 #sliderMarks.inline-ratios{height:102px}
 .scale-stop.scale-reference-one .ratio-badge{margin-top:33px}
 .ratio-legend{gap:8px;font-size:14px}
}