:root{color-scheme:light;--ink:#182f2d;--muted:#49625f;--line:#c6d6d0;--paper:#f4f7f0;--accent:#185d50;--focus:#a75219;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--ink);background:var(--paper);line-height:1.55;font-synthesis:none}
*{box-sizing:border-box}body{margin:0}header,main,footer{width:min(100% - 40px,760px);margin-inline:auto}header{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:24px;border-bottom:1px solid var(--line)}a{color:var(--accent);text-underline-offset:3px}.brand{font-weight:750;text-decoration:none;font-size:1.25rem;white-space:nowrap}.brand span{font-size:1.6rem;vertical-align:middle;margin-right:7px}.tag,.hint,.status{font-size:.9rem}.tag{color:var(--muted);text-align:right}.intro{padding-block:24px 16px}.intro p{max-width:610px;margin:12px 0}.eyebrow{font-size:.72rem;font-weight:750;letter-spacing:.12em;color:var(--accent)}h1{font-size:clamp(2rem,6vw,3rem);line-height:1.12;letter-spacing:-.04em;margin:8px 0 20px}h2{font-size:1.25rem;line-height:1.3;margin:0 0 20px}p{margin:12px 0}.panel{background:#fff;border:1px solid var(--line);border-radius:18px;padding:28px;box-shadow:0 4px 0 #e0e9df;margin-bottom:30px}fieldset{border:0;padding:0;margin:18px 0}legend,label{font-weight:650}legend{margin-bottom:8px}.field-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}.field{display:grid;gap:6px;min-width:0}.hint{font-weight:400;color:var(--muted);margin-top:8px}input,select,button{font:inherit}input:not([type=checkbox]),select{display:block;width:100%;min-width:0;border:1px solid #7c9690;border-radius:8px;background:white;color:var(--ink);padding:10px 12px;min-height:46px}select{padding-right:28px}button{min-height:46px;border:1px solid var(--accent);border-radius:9px;background:var(--accent);color:white;padding:10px 18px;font-weight:650;cursor:pointer}button:hover{background:#12473d}button.secondary{background:transparent;color:var(--accent)}button.secondary:hover{background:#e8f0e9}button:disabled,input:disabled{opacity:.55;cursor:default}button span{margin-left:18px}:focus-visible{outline:3px solid var(--focus);outline-offset:4px}.skip-link{position:absolute;top:8px;left:8px;transform:translateY(-180%);background:white;padding:8px 12px;z-index:1}.skip-link:focus{transform:none}.section-heading{display:flex;justify-content:space-between;gap:12px;align-items:baseline}.section-heading h2{margin-bottom:8px}.section-heading p{margin:0;font-size:.9rem}.timer{font-variant-numeric:tabular-nums;color:var(--muted);margin:0}.question{font-size:clamp(2.2rem,10vw,4rem);font-weight:650;line-height:1.2;letter-spacing:-.03em;text-align:center;font-variant-numeric:tabular-nums;margin:32px 0;overflow-wrap:anywhere}.answer-row{display:flex;gap:12px;margin-top:8px}.answer-row input{flex:1;min-width:0;font-size:1.2rem}.practice-controls{margin-top:20px}.status{color:var(--muted);overflow-wrap:anywhere}.notice{padding:14px;background:#edf2e8;border-left:3px solid var(--accent)}.error{color:#922f22;padding:10px 0}.result-summary{font-size:1.3rem;font-weight:650}.device-section,.analytics-section{margin:32px 0;padding-top:24px;border-top:1px solid var(--line)}.device-section h2,.analytics-section h2{margin-bottom:12px}.consent-label{display:flex;align-items:flex-start;gap:12px;font-size:.95rem;cursor:pointer}.consent-label input{width:20px;height:20px;flex-shrink:0;accent-color:var(--accent);margin-top:3px}footer{display:flex;justify-content:space-between;gap:16px;padding-block:24px 32px;color:var(--muted);font-size:.8rem;border-top:1px solid var(--line)}[hidden]{display:none!important}.prose{padding-block:36px}.prose h1{font-size:2.2rem}.prose h2{margin-top:30px;margin-bottom:10px}.prose li{margin-block:8px}
.quick-start{margin-bottom:24px}.quick-start p{margin-top:0}.result-actions{display:flex;flex-wrap:wrap;gap:12px}
@media(max-width:420px){header,main,footer{width:calc(100% - 28px)}header{align-items:flex-start;gap:8px}.tag{font-size:.75rem;max-width:120px}.panel{padding:20px 16px}.field-row{gap:12px}.answer-row{gap:8px}.answer-row button{padding-inline:12px}.intro{padding-top:16px}.section-heading{display:block}.section-heading p{margin-bottom:8px}footer{flex-wrap:wrap}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important;transition:none!important}}

/* A quiet, distinctive space for choosing a practice session. */
.practice-page{--paper:#f7f4ec;background:var(--paper)}
.practice-page header,.practice-page main,.practice-page footer{width:min(100% - 40px,1040px)}
.practice-page header{padding-block:24px;border-bottom-color:#d6dbd1}
.experience-layout{max-width:760px;margin:32px auto 0}
.experience-layout:has(#setup:not([hidden])){display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.3fr);gap:40px;max-width:none;align-items:start}
.experience-layout .intro{padding:16px 0 24px}
.experience-layout h1{font-size:clamp(2rem,4vw,2.75rem);line-height:1.13;letter-spacing:-.045em;margin-bottom:20px}
.experience-layout .intro p:not(.eyebrow){color:var(--muted);max-width:36ch}
.intro-art{position:relative;width:200px;height:155px;margin-top:34px;overflow:hidden}
.intro-art::before{content:"";position:absolute;left:8px;top:8px;width:140px;height:140px;background:#e5aa55;border-radius:50%}
.intro-art::after{content:"";position:absolute;left:78px;top:50px;width:120px;height:100px;background:#185d50;border-radius:0 0 100px 100px;transform:rotate(-25deg);border:8px solid var(--paper)}
.experience-layout:not(:has(#setup:not([hidden]))) .intro-art{display:none}
.practice-page .panel{border-color:#d5ddd2;border-radius:24px;box-shadow:0 12px 32px #263d3010;padding:28px;margin-bottom:0}
.quick-start{background:var(--accent);color:#fff;border-radius:16px;padding:20px;margin:0 0 24px}
.quick-start .start-invitation{font-size:1rem;font-weight:650;margin:0 0 8px}
.quick-start .hint{color:#edf4ed;margin:0 0 16px}
.quick-start button{background:#f7f4ec;border-color:#f7f4ec;color:var(--accent)}
.quick-start button:hover{background:#e7eee2}
.quick-start button:focus-visible{outline-color:#fff}
.settings-group{padding-top:16px;border-top:1px solid #d6dfd5;margin-top:16px}
.settings-group h3{font-size:.8rem;text-transform:uppercase;letter-spacing:.08em;color:var(--accent);margin:0 0 12px}
.settings-group fieldset{margin-bottom:0}
.settings-actions{padding-top:8px;margin-top:4px}
.settings-actions button{width:100%}
#settings-error{position:sticky;top:12px;z-index:2;margin:0 0 12px;padding:12px 16px;background:#fff0e6;border:1px solid #cf8b65;border-left-width:4px;border-radius:10px;box-shadow:0 3px 12px #263d3010}
.support-grid{display:grid;grid-template-columns:1fr 1.35fr;gap:24px;margin:32px 0}
.support-grid .device-section,.support-grid .analytics-section{margin:0;border:1px solid #d5ddd2;border-radius:20px;background:#ffffffa6;padding:24px;min-width:0}
.support-grid h2{font-size:1rem}
.support-grid .status{font-weight:600}
.support-grid details{margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.support-grid summary{cursor:pointer;font-size:.9rem;font-weight:650;color:var(--accent);padding-block:4px;min-height:32px}
.support-grid summary::marker{color:var(--accent)}
.support-grid details .hint{margin-top:14px}
.practice-page footer{border-top-color:#d6dbd1}
@media(max-width:900px){
  .experience-layout:has(#setup:not([hidden])){display:block;max-width:760px}
  .experience-layout{margin-top:16px}
  .experience-layout .intro{padding:8px 0 20px}
  .intro-art{display:none}
  .experience-layout .intro p:not(.eyebrow){max-width:610px}
}
@media(max-width:620px){
  .support-grid{grid-template-columns:1fr;gap:16px;margin-block:24px}
  .support-grid .device-section,.support-grid .analytics-section{padding:20px}
  .practice-page .panel{padding:22px 20px}
  .quick-start{padding:18px;margin-bottom:20px}
}
@media(max-width:420px){
  .practice-page header,.practice-page main,.practice-page footer{width:calc(100% - 28px)}
  .practice-page header{padding-block:18px}
  .experience-layout{margin-top:10px}
  .experience-layout .intro{padding:4px 0 16px}
  .experience-layout h1{font-size:2rem;margin-block:8px 14px}
  .experience-layout .intro p{margin-block:10px}
  .practice-page .panel{padding:20px 16px;border-radius:20px}
  .quick-start{padding:16px}
  .settings-group{padding-top:18px;margin-top:18px}
}

/* One completed question, placed after the current practice controls. */
.previous-question{margin-top:8px;padding-top:6px;border-top:1px solid var(--line);font-size:.9rem;line-height:1.4}
.previous-question h3{font-size:.85rem;color:var(--muted);margin:0;font-weight:650}
.previous-question p{margin:0;overflow-wrap:anywhere}
.previous-expression{font-variant-numeric:tabular-nums;font-weight:650}

.missed-review{margin:20px 0;border-top:1px solid var(--line);padding-top:12px}
.missed-review summary{cursor:pointer;color:var(--accent);font-weight:650;min-height:46px;padding-block:10px}
.missed-review ol{padding-left:24px;margin:16px 0}
.missed-review li{padding:10px 0;border-top:1px solid var(--line);overflow-wrap:anywhere}
.missed-title,.missed-expression{display:block;line-height:1.5}
.missed-title{font-size:.85rem;color:var(--muted)}
.missed-expression{font-variant-numeric:tabular-nums;font-weight:650}

/* Optional practice guidance, after setup and before device support. */
.practice-guide{max-width:760px;margin:24px auto 0;border:1px solid #d5ddd2;border-radius:20px;background:#ffffffa6;min-width:0}
.practice-guide summary{cursor:pointer;color:var(--accent);font-weight:650;padding:16px 20px;min-height:46px}
.practice-guide summary::marker{color:var(--accent)}
.guide-copy{padding:0 20px;font-size:.95rem;color:var(--muted)}
.guide-actions{display:flex;flex-wrap:wrap;gap:12px 24px;padding:8px 20px 20px;font-size:.9rem}
.practice-page main:has(#setup[hidden]) > .practice-guide{display:none}

/* Optional settings link stays secondary to starting and repeating practice. */
.settings-link-actions{margin-top:20px;padding-top:16px;border-top:1px solid var(--line)}
.settings-link-actions button{max-width:100%;white-space:normal;text-align:left}
.settings-link-actions .hint{margin-bottom:0}
.settings-link-feedback{max-width:760px;margin:16px auto 0;min-width:0;overflow-wrap:anywhere}
.settings-link-feedback:has(#settings-link-notice:empty):has(#settings-link-output[hidden]){display:none}
#settings-link-output{margin-top:14px}
#settings-link-url{margin-top:6px;font-size:.9rem}