:root{--sp-paper: #F9F7F1;--sp-surface: #FFFDF9;--sp-ink: #201C3D;--sp-muted: #56516B;--sp-primary: #3B36D6;--sp-primary-deep: #2C268D;--sp-on-primary: #FFFFFF;--sp-line: #D9D5E0;--sp-border-control: #76718C;--sp-subtle: #F1EDFA;--sp-recall: #E5F393;--sp-chunking: #E9E3FF;--sp-anomaly: #FFD6C7;--sp-draw: #D0F2E8;--sp-correct: #245B4A;--sp-incorrect: #842E3D;--sp-unverified: #554572;--sp-correct-bg: #D0F2E8;--sp-incorrect-bg: #FBE6EB;--sp-unverified-bg: #F1EDFA;--sp-focus: #2C268D;--sp-scrim: #201C3D66;--sp-space-1: 4px;--sp-space-2: 8px;--sp-space-3: 12px;--sp-space-4: 16px;--sp-space-5: 20px;--sp-space-6: 24px;--sp-space-8: 32px;--sp-space-10: 40px;--sp-space-12: 48px;--sp-gutter: 24px;--sp-gutter-compact: 16px;--sp-stack-gap: 12px;--sp-section-gap: 24px;--sp-target-min: 44px;--sp-button-min: 48px;--sp-field-min: 52px;--sp-picker-row-min: 52px;--sp-header-min: 56px;--sp-icon: 20px;--sp-icon-slot: 24px;--sp-stage-min: 112px;--sp-stage-max: 144px;--sp-stage-caption-min: 56px;--sp-content-max: 30rem;--sp-radius-button: 14px;--sp-radius-card: 20px;--sp-radius-panel: 16px;--sp-radius-sheet: 24px;--sp-stroke: 1px;--sp-focus-ring: 3px;--sp-focus-offset: 2px;--sp-break-compact: 359px;--sp-type-title-size: 2.25rem;--sp-type-title-line: 2.5rem;--sp-type-title-weight: 400;--sp-type-title-compact-size: 2rem;--sp-type-title-compact-line: 2.25rem;--sp-type-title-compact-weight: 400;--sp-type-section-title-size: 1.5rem;--sp-type-section-title-line: 1.75rem;--sp-type-section-title-weight: 400;--sp-type-body-size: 1.0625rem;--sp-type-body-line: 1.5rem;--sp-type-body-weight: 400;--sp-type-control-size: 1rem;--sp-type-control-line: 1.375rem;--sp-type-control-weight: 700;--sp-type-meta-size: .875rem;--sp-type-meta-line: 1.25rem;--sp-type-meta-weight: 400;--sp-type-label-size: .75rem;--sp-type-label-line: 1rem;--sp-type-label-weight: 700;--sp-type-timer-size: 2.5rem;--sp-type-timer-line: 2.75rem;--sp-type-timer-weight: 700}@font-face{font-family:"Noto Serif Display";src:url(/fonts/NotoSerifDisplay-Regular.ttf) format("truetype");font-style:normal;font-weight:400;font-display:swap}@font-face{font-family:"Noto Serif Display";src:url(/fonts/NotoSerifDisplay-Bold.ttf) format("truetype");font-style:normal;font-weight:700;font-display:swap}*,*:before,*:after{box-sizing:border-box}html{color-scheme:light}body{margin:0;background:var(--sp-paper);color:var(--sp-ink);font:var(--sp-type-body-size) / var(--sp-type-body-line) system-ui,-apple-system,sans-serif}h1,h2,p,ol,ul{margin:0}h1,h2{font-family:"Noto Serif Display",Georgia,serif;font-weight:400}h1{font-size:var(--sp-type-title-size);line-height:var(--sp-type-title-line)}h2{font-size:var(--sp-type-section-title-size);line-height:var(--sp-type-section-title-line)}a,button,input{-webkit-tap-highlight-color:transparent}:where(a,button,input,main):focus-visible{outline:var(--sp-focus-ring) solid var(--sp-focus);outline-offset:var(--sp-focus-offset)}.skip-link{position:absolute;inset:8px auto auto 8px;z-index:3;background:var(--sp-surface);padding:8px}.skip-link:not(:focus){clip-path:inset(50%);width:1px;height:1px;overflow:hidden}.shell{--gutter: var(--sp-gutter);--stage: clamp(var(--sp-stage-min), 36vw, var(--sp-stage-max));position:relative;inline-size:min(100%,calc(var(--sp-content-max) + 2 * var(--gutter)));margin-inline:auto;min-block-size:100vh;min-block-size:100dvh;padding-inline:max(var(--gutter),env(safe-area-inset-left)) max(var(--gutter),env(safe-area-inset-right));padding-block:env(safe-area-inset-top) max(var(--sp-space-4),env(safe-area-inset-bottom));display:flex;flex-direction:column;overflow-wrap:anywhere}.header{min-block-size:var(--sp-header-min);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,auto) minmax(0,1fr);align-items:center;column-gap:var(--sp-space-2);border-bottom:1px solid var(--sp-line)}.route{grid-column:2;min-width:0;overflow:hidden;font-weight:700;text-align:center;text-overflow:ellipsis;white-space:nowrap}.nav.leading{grid-column:1;justify-self:start}.nav.trailing{grid-column:3;justify-self:end}main{flex:1;display:grid;align-content:start;gap:var(--sp-section-gap);padding-block:var(--sp-section-gap);min-width:0}main:focus{outline:none}.stack{display:grid;align-content:start;gap:var(--sp-stack-gap);min-width:0}.eyebrow{color:var(--sp-primary-deep);font:700 var(--sp-type-label-size) / var(--sp-type-label-line) system-ui;letter-spacing:.09em}.meta{color:var(--sp-muted);font-size:var(--sp-type-meta-size);line-height:var(--sp-type-meta-line);font-weight:400}.button,.nav,.choice,.picker-row,.exercise{font:700 var(--sp-type-control-size) / var(--sp-type-control-line) system-ui;min-inline-size:var(--sp-target-min);min-block-size:var(--sp-target-min);color:inherit;cursor:pointer;text-align:center}.button,.choice{border:1px solid var(--sp-border-control);background:var(--sp-surface);border-radius:var(--sp-radius-button)}.button{padding:10px 12px;min-block-size:var(--sp-button-min)}.button.primary{color:var(--sp-on-primary);background:var(--sp-primary);border-color:var(--sp-primary)}.button.sign-out{inline-size:100%;margin-block-start:var(--sp-space-3)}.button:disabled{color:var(--sp-muted);background:var(--sp-subtle);cursor:default}.nav{flex:none;border:0;background:none;color:var(--sp-primary-deep);padding:6px;white-space:nowrap}.actions{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--sp-stack-gap);padding-block:var(--sp-space-3) var(--sp-space-1);border-top:1px solid var(--sp-line)}.actions .button{inline-size:100%}.field-label{display:grid;gap:var(--sp-stack-gap);font-weight:700}.field{inline-size:100%;min-block-size:var(--sp-field-min);padding:10px 12px;border-radius:var(--sp-radius-button);border:1px solid var(--sp-border-control);background:var(--sp-surface);color:var(--sp-ink);font:inherit}.field[aria-invalid=true]{border-color:var(--sp-incorrect)}.mark{inline-size:64px;block-size:64px;border-radius:16px;justify-self:center}.otp{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--sp-space-2)}.otp-digit{inline-size:100%;min-block-size:var(--sp-field-min);padding:0;border-radius:var(--sp-radius-button);border:1px solid var(--sp-border-control);background:var(--sp-surface);color:var(--sp-ink);font:700 1.5rem/1 system-ui,sans-serif;font-variant-numeric:tabular-nums;text-align:center;caret-color:var(--sp-primary)}.otp-digit[aria-invalid=true]{border-color:var(--sp-incorrect)}.otp-digit:disabled{color:var(--sp-ink);background:var(--sp-subtle)}.otp.is-checking{opacity:.55}.check-slot{display:grid;place-items:center;block-size:var(--sp-icon)}fieldset{margin:0;padding:0;border:0;min-inline-size:0}legend{padding:0 0 8px;font-weight:700}.choices{display:grid;gap:var(--sp-space-2);grid-template-columns:repeat(4,minmax(0,1fr))}.choices.delay{grid-template-columns:repeat(4,minmax(0,1fr))}.choices.speed{grid-template-columns:repeat(3,minmax(0,1fr))}.choice{padding:8px 2px;white-space:nowrap}.choice[aria-pressed=true]{background:var(--sp-primary);color:#fff;border-color:var(--sp-primary)}.exercise{display:flex;flex-wrap:nowrap;justify-content:space-between;align-items:center;gap:var(--sp-stack-gap);padding:var(--sp-space-4);min-block-size:88px;text-align:start;border:0;border-radius:var(--sp-radius-card);background:var(--sp-subtle)}.exercise-copy{flex:1 1 auto;min-width:0;display:grid;gap:var(--sp-space-2);text-align:start}.exercise strong{font:700 var(--sp-type-section-title-size) / var(--sp-type-section-title-line) "Noto Serif Display",Georgia,serif}.exercise .hint{color:var(--sp-muted);font:400 var(--sp-type-meta-size) / var(--sp-type-meta-line) system-ui}.exercise img{flex:0 0 auto;width:64px;height:50px;object-fit:contain}.exercise.recall{background:var(--sp-recall)}.exercise.chunking{background:var(--sp-chunking)}.exercise.anomaly{background:var(--sp-anomaly)}.exercise.draw{background:var(--sp-draw)}.exercise.recall strong{color:#353b11}.exercise.chunking strong{color:#3d2d76}.exercise.anomaly strong{color:#682912}.exercise.draw strong{color:#0b4132}.picker{padding:0;list-style:none;border-block-start:1px solid var(--sp-line)}.picker>li{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;border-bottom:1px solid var(--sp-line)}.picker-copy{display:grid;justify-items:start;gap:2px}.picker-restart{margin-inline-end:2px}.picker-row{display:grid;grid-template-columns:minmax(0,1fr) var(--sp-icon-slot);align-items:center;gap:var(--sp-stack-gap);inline-size:100%;min-block-size:var(--sp-picker-row-min);padding:8px 2px;border:0;background:transparent;text-align:start}.icon{display:block;width:var(--sp-icon);height:var(--sp-icon);flex:0 0 auto}.picker-row .icon{justify-self:center}.stage{display:grid;justify-items:center;gap:var(--sp-stack-gap);text-align:center}.orb{--remain: 1;position:relative;inline-size:var(--stage);block-size:var(--stage);border-radius:50%;display:grid;place-items:center;border:2px solid var(--sp-primary);background:var(--sp-subtle);color:var(--sp-primary-deep);font:700 var(--sp-type-timer-size) / var(--sp-type-timer-line) system-ui;font-variant-numeric:tabular-nums;padding:0}.orb:before{content:"";position:absolute;inset:0;border-radius:inherit;opacity:0;pointer-events:none;background:conic-gradient(from 0deg,transparent calc((1 - var(--remain)) * 1turn),var(--sp-primary) 0);-webkit-mask:radial-gradient(closest-side,transparent calc(100% - 4px),#000 calc(100% - 3px));mask:radial-gradient(closest-side,transparent calc(100% - 4px),#000 calc(100% - 3px))}.orb>*{position:relative;z-index:1}.orb.is-counting{border-color:transparent}.orb.is-counting:before{opacity:1}.orb .icon{width:38px;height:38px}button.orb:disabled{opacity:1}button.orb.is-counting{cursor:default;background:var(--sp-subtle);color:var(--sp-primary-deep)}button.orb.is-ready{cursor:pointer;background:var(--sp-primary);color:#fff;border-color:var(--sp-primary)}button.orb.is-ready img{filter:brightness(0) invert(1)}.stage-caption{min-block-size:var(--sp-stage-caption-min);display:grid;justify-items:center;align-content:start;gap:var(--sp-space-2);text-align:center}.panel{padding:var(--sp-space-4);background:var(--sp-surface);border:1px solid var(--sp-line);border-radius:var(--sp-radius-panel)}.badge{display:flex;flex-wrap:wrap;gap:var(--sp-space-3);align-items:center;justify-content:space-between;padding:var(--sp-space-2) var(--sp-space-3);font-weight:700;border-radius:8px}.verdict-label{display:inline-flex;flex:none;align-items:center;gap:var(--sp-space-2)}.correct{color:var(--sp-correct);background:var(--sp-correct-bg)}.incorrect{color:var(--sp-incorrect);background:var(--sp-incorrect-bg)}.unverified{color:var(--sp-unverified);background:var(--sp-unverified-bg)}.panel.incorrect{color:var(--sp-incorrect);background:var(--sp-incorrect-bg)}.result-table{display:grid;gap:var(--sp-space-2)}.result-row{display:grid;grid-template-columns:3ch minmax(0,1fr) minmax(0,1fr);align-items:baseline;gap:var(--sp-space-3);padding:var(--sp-space-2)}.result-row>:first-child{font-variant-numeric:tabular-nums;text-align:center}.result-row.break{background:var(--sp-incorrect-bg);border-radius:4px}.word-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch;gap:var(--sp-stack-gap)}.word-grid>:last-child:nth-child(odd){grid-column:1 / -1}.log-row{display:grid;justify-items:start;align-content:center;gap:var(--sp-space-2);inline-size:100%;text-align:start}.picture{display:block;inline-size:100%;background:var(--sp-surface);border:1px solid var(--sp-line);border-radius:var(--sp-radius-panel)}.wave{width:64px;height:48px}.live{position:absolute;inline-size:1px;block-size:1px;overflow:hidden;clip-path:inset(50%)}dialog.sheet{display:grid;align-content:start;gap:var(--sp-space-4);border:0;inline-size:min(var(--sp-content-max),calc(100% - 32px));padding:var(--sp-space-6);background:var(--sp-surface);color:var(--sp-ink);border-radius:var(--sp-radius-sheet);max-inline-size:min(var(--sp-content-max),calc(100% - 32px));max-block-size:calc(100dvh - 32px);overflow:auto}dialog.sheet .stack{gap:var(--sp-space-4)}dialog.sheet .instruction{margin-top:var(--sp-space-2)}dialog.sheet::backdrop{background:var(--sp-scrim)}@media(max-width:359px){.shell{--gutter: var(--sp-gutter-compact)}h1{font-size:var(--sp-type-title-compact-size);line-height:var(--sp-type-title-compact-line)}dialog.sheet{padding:var(--sp-space-5)}}@media(orientation:landscape)and (max-height:500px){.shell{--stage: var(--sp-stage-min)}}@media(prefers-reduced-motion:no-preference){.orb{transition:background-color .28s ease,color .28s ease,border-color .28s ease,transform .28s ease}.orb:before{transition:opacity .28s ease}.orb.is-counting{transform:scale(.98)}.orb.is-ready{transform:scale(1)}.orb.is-ready img{animation:orb-in .28s ease}.orb.is-recording{animation:record-pulse 1.6s ease-in-out infinite}.spinner,.orb.is-waiting .icon{animation:spin .9s linear infinite}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes orb-in{0%{opacity:0}to{opacity:1}}@keyframes record-pulse{0%,to{box-shadow:0 0 0 0 transparent}50%{box-shadow:0 0 0 6px color-mix(in srgb,var(--sp-primary) 28%,transparent)}}
