/* Components — styled only through tokens.css variables (B6.swap). */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--color-bg);color:var(--color-fg);font:400 var(--text-base)/var(--leading-normal) var(--font-sans)}
img,svg{display:block;max-width:100%}
a{color:var(--color-primary);text-underline-offset:3px}
:focus-visible{outline:3px solid var(--color-focus);outline-offset:2px;border-radius:var(--radius-sm)}
h1,h2,h3{font-family:var(--font-display);line-height:var(--leading-tight);margin:0 0 var(--space-3);letter-spacing:-.01em}
h1{font-size:clamp(var(--text-3xl),5vw,var(--text-5xl));font-weight:700}
h2{font-size:var(--text-3xl);font-weight:700}
h3{font-size:var(--text-xl);font-weight:600}
p{margin:0 0 var(--space-4)}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--space-6)}
.muted{color:var(--color-muted)}
.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.voice{font-family:var(--font-voice);font-style:var(--voice-style)}
.eyebrow{font:500 var(--text-sm)/1 var(--font-mono);text-transform:uppercase;letter-spacing:.08em;color:var(--color-primary);margin-bottom:var(--space-3);display:flex;align-items:center;gap:var(--space-2)}
h3 .icon{display:inline-block;vertical-align:-3px;margin-right:var(--space-2)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:var(--space-4);top:-100px;background:var(--color-primary);color:var(--color-onPrimary);padding:var(--space-2) var(--space-4);border-radius:var(--radius-md);z-index:99}
.skip:focus{top:var(--space-4)}
.icon{width:1.25em;height:1.25em;flex:none;stroke:currentColor;fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}

/* layout */
.nav{border-bottom:1px solid var(--color-border);background:var(--color-bg);position:sticky;top:0;z-index:20}
.nav .wrap{display:flex;align-items:center;gap:var(--space-6);min-height:68px}
.nav .logo img{height:32px;width:auto}
.nav .logo{display:flex;align-items:center;gap:var(--space-2);font:700 var(--text-lg) var(--font-display);color:var(--color-fg);text-decoration:none}
.nav ul{display:flex;gap:var(--space-1);list-style:none;margin:0 0 0 auto;padding:0}
.nav ul a{display:flex;align-items:center;min-height:var(--touch);padding:0 var(--space-3);color:var(--color-fg);text-decoration:none;border-radius:var(--radius-md);font-weight:500;font-size:var(--text-sm)}
.nav ul a:hover{background:var(--color-surface)}
.nav ul a[aria-current="page"]{color:var(--color-primary);box-shadow:inset 0 -2px 0 var(--color-primary);border-radius:0}
.app{display:grid;grid-template-columns:240px 1fr;min-height:100vh}
.side{background:var(--color-surface);border-right:1px solid var(--color-border);padding:var(--space-6) var(--space-4);display:flex;flex-direction:column;gap:var(--space-1)}
.side .logo{margin:0 var(--space-2) var(--space-6)}
.side .logo img{height:28px;width:auto}
.side a{display:flex;align-items:center;gap:var(--space-3);min-height:var(--touch);padding:0 var(--space-3);border-radius:var(--radius-md);color:var(--color-fg);text-decoration:none;font-size:var(--text-sm);font-weight:500}
.side a:hover{background:var(--color-bg)}
.side a[aria-current="page"]{background:var(--color-bg);color:var(--color-primary);box-shadow:var(--shadow-sm)}
.main{padding:var(--space-8);min-width:0}
.top{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);margin-bottom:var(--space-8);flex-wrap:wrap}
.top h1{font-size:var(--text-3xl);margin:0}
.grid{display:grid;gap:var(--space-6)}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.g-main{grid-template-columns:minmax(0,2fr) minmax(0,1fr)}
section.band{padding:var(--space-16) 0}
section.band.alt{background:var(--color-surface)}
.wave{color:var(--color-surface);height:40px;width:100%}
footer.foot{border-top:1px solid var(--color-border);padding:var(--space-8) 0;font-size:var(--text-sm);color:var(--color-muted)}
footer.foot .wrap{display:flex;justify-content:space-between;gap:var(--space-4);flex-wrap:wrap}
@media (max-width:900px){.g2,.g3,.g4,.g-main{grid-template-columns:1fr}.app{grid-template-columns:1fr}.side{display:none}.nav ul{display:none}.main{padding:var(--space-6)}}

/* card */
.card{background:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-6)}
.card.flat{background:var(--color-surface);border-color:transparent}
.card.link{transition:border-color var(--dur-base) var(--ease),transform var(--dur-base) var(--ease);text-decoration:none;color:inherit;display:block}
.card.link:hover{border-color:var(--color-primary);transform:translateY(-2px)}
.stat{font:600 var(--text-4xl)/1 var(--font-mono);color:var(--color-fg);margin:var(--space-2) 0}
.stat small{font-size:var(--text-base);color:var(--color-muted);font-weight:400}

/* button: 4 levels × 3 sizes × states */
.btn{--h:var(--touch);display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);min-height:var(--h);padding:0 var(--space-6);border:2px solid transparent;border-radius:var(--radius-md);font:600 var(--text-base)/1 var(--font-sans);cursor:pointer;text-decoration:none;position:relative;transition:background-color var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease),transform var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease)}
.btn:active{transform:translateY(1px)}
.btn-sm{--h:var(--touch);padding:0 var(--space-4);font-size:var(--text-sm)}
.btn-lg{--h:56px;padding:0 var(--space-8);font-size:var(--text-lg)}
.btn-primary{background:var(--color-primary);color:var(--color-onPrimary);box-shadow:0 3px 0 color-mix(in srgb,var(--color-primary) 60%,var(--color-fg))}
.btn-primary:hover{background:color-mix(in srgb,var(--color-primary) 88%,var(--color-fg))}
.btn-primary:active{box-shadow:0 1px 0 color-mix(in srgb,var(--color-primary) 60%,var(--color-fg));transform:translateY(2px)}
.btn-secondary{background:var(--color-bg);color:var(--color-primary);border-color:var(--color-primary)}
.btn-secondary:hover{background:color-mix(in srgb,var(--color-primary) 8%,var(--color-bg))}
.btn-ghost{background:transparent;color:var(--color-fg)}
.btn-ghost:hover{background:var(--color-surface)}
.btn-danger{background:var(--color-danger);color:var(--color-onPrimary)}
.btn-danger:hover{background:color-mix(in srgb,var(--color-danger) 85%,var(--color-fg))}
.btn:disabled,.btn[aria-disabled="true"]{background:var(--color-surface);color:var(--color-muted);border-color:var(--color-border);box-shadow:none;cursor:not-allowed;transform:none}
.btn[aria-busy="true"]{color:transparent;pointer-events:none}
.btn[aria-busy="true"]::after{content:"";position:absolute;width:1.1em;height:1.1em;border:2px solid var(--color-onPrimary);border-right-color:transparent;border-radius:var(--radius-full);animation:spin .8s linear infinite}
.btn-secondary[aria-busy="true"]::after,.btn-ghost[aria-busy="true"]::after{border-color:var(--color-primary);border-right-color:transparent}
.btn.is-done{background:var(--color-success);color:var(--color-onPrimary);box-shadow:none}
@keyframes spin{to{transform:rotate(360deg)}}

/* chip */
.chips{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.chip{display:inline-flex;align-items:center;gap:var(--space-2);min-height:var(--touch);padding:0 var(--space-4);border:1.5px solid var(--color-border);border-radius:var(--radius-full);background:var(--color-bg);color:var(--color-fg);font:500 var(--text-sm) var(--font-sans);cursor:pointer;transition:border-color var(--dur-fast) var(--ease),background-color var(--dur-fast) var(--ease)}
.chip:hover{border-color:var(--color-primary)}
.chip[aria-pressed="true"]{background:var(--color-primary);border-color:var(--color-primary);color:var(--color-onPrimary)}
.chip:disabled{color:var(--color-muted);background:var(--color-surface);cursor:not-allowed}
.badge{display:inline-flex;align-items:center;gap:var(--space-1);padding:2px var(--space-2);border-radius:var(--radius-full);font:500 var(--text-xs)/1.6 var(--font-mono);background:var(--color-surface);color:var(--color-fg);border:1px solid var(--color-border)}
.badge.hi{background:var(--color-secondary);color:var(--color-onSecondary);border-color:transparent}
.badge.ok{color:var(--color-success);border-color:currentColor;background:var(--color-bg)}
.badge.warn{color:var(--color-warning);border-color:currentColor;background:var(--color-bg)}
.badge.bad{color:var(--color-danger);border-color:currentColor;background:var(--color-bg)}

/* callout: clue, caution, recorded, note, system + character speech */
.callout{--c:var(--color-info);display:flex;gap:var(--space-3);padding:var(--space-4) var(--space-5,20px);border-radius:var(--radius-md);background:color-mix(in srgb,var(--c) 7%,var(--color-bg));border-left:4px solid var(--c);color:var(--color-fg)}
.callout .icon{color:var(--c);margin-top:2px}
.callout strong{display:block;margin-bottom:2px}
.callout p{margin:0}
.callout.clue{--c:var(--color-primary)}
.callout.caution{--c:var(--color-warning)}
.callout.recorded{--c:var(--color-success)}
.callout.note{--c:var(--color-secondary)}
.callout.system{--c:var(--color-muted)}
.speech{display:flex;gap:var(--space-4);align-items:flex-end}
.speech .who{flex:none;width:72px;text-align:center;font:500 var(--text-xs) var(--font-mono);color:var(--color-muted)}
.speech .who img,.speech .who .avatar{width:72px;height:72px;margin-bottom:var(--space-1)}
.speech .bubble{position:relative;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-xl);padding:var(--space-4) var(--space-6);font:400 var(--text-lg)/var(--leading-relaxed) var(--font-voice);font-style:var(--voice-style)}
.speech .bubble::before{content:"";position:absolute;left:-9px;bottom:18px;width:16px;height:16px;background:inherit;border-left:1px solid var(--color-border);border-bottom:1px solid var(--color-border);transform:rotate(45deg)}
.avatar{display:grid;place-items:center;border-radius:var(--radius-full);background:var(--color-primary);color:var(--color-onPrimary);font:700 var(--text-lg) var(--font-display);width:40px;height:40px;flex:none}
.avatar.sm{width:32px;height:32px;font-size:var(--text-sm)}
.avatar.alt{background:var(--color-secondary);color:var(--color-onSecondary)}

/* toast with timer */
.toasts{position:fixed;right:var(--space-6);bottom:var(--space-6);display:grid;gap:var(--space-3);z-index:60}
.toast{--c:var(--color-success);width:min(360px,calc(100vw - 32px));background:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);padding:var(--space-4);display:flex;gap:var(--space-3);overflow:hidden;position:relative;animation:rise var(--dur-slow) var(--ease)}
.toast .icon{color:var(--c)}
.toast p{margin:0;font-size:var(--text-sm)}
.toast.warn{--c:var(--color-warning)}
.toast .timer{position:absolute;left:0;bottom:0;height:3px;width:100%;background:var(--c);transform-origin:left;animation:timer 5s linear forwards}
.toast:hover .timer{animation-play-state:paused}
@keyframes timer{to{transform:scaleX(0)}}
@keyframes rise{from{transform:translateY(12px);opacity:0}}

/* dialog */
dialog{border:none;border-radius:var(--radius-xl);padding:var(--space-8);max-width:480px;width:calc(100vw - 32px);background:var(--color-bg);color:var(--color-fg);box-shadow:var(--shadow-lg)}
dialog::backdrop{background:color-mix(in srgb,var(--color-fg) 45%,transparent);backdrop-filter:blur(3px)}
dialog[open]{animation:rise var(--dur-slow) var(--ease)}
.actions{display:flex;gap:var(--space-3);justify-content:flex-end;margin-top:var(--space-6);flex-wrap:wrap}

/* input with error-with-example */
.field{display:grid;gap:var(--space-2);margin-bottom:var(--space-4)}
.field label{font-weight:600;font-size:var(--text-sm)}
.field .help{font-size:var(--text-sm);color:var(--color-muted)}
.input,textarea.input,select.input{width:100%;min-height:var(--touch);padding:var(--space-2) var(--space-4);border:1.5px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-bg);color:var(--color-fg);font:400 var(--text-base) var(--font-sans);transition:border-color var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease)}
textarea.input{min-height:120px;resize:vertical;line-height:var(--leading-normal)}
.input:hover{border-color:var(--color-muted)}
.input:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--color-primary) 22%,transparent)}
.input[aria-invalid="true"]{border-color:var(--color-danger)}
.field .error{display:flex;gap:var(--space-2);font-size:var(--text-sm);color:var(--color-danger);font-weight:500}
.field .error em{font-style:normal;font-family:var(--font-mono);color:var(--color-fg);background:var(--color-surface);padding:0 var(--space-1);border-radius:var(--radius-sm)}
.check{display:flex;align-items:center;gap:var(--space-3);min-height:var(--touch)}
.check input{width:20px;height:20px;accent-color:var(--color-primary)}

/* choice options */
.options{display:grid;gap:var(--space-3)}
.option{display:flex;align-items:center;gap:var(--space-4);min-height:56px;padding:var(--space-3) var(--space-4);border:2px solid var(--color-border);border-radius:var(--radius-lg);background:var(--color-bg);color:var(--color-fg);font:500 var(--text-base) var(--font-sans);text-align:left;cursor:pointer;width:100%;transition:border-color var(--dur-fast) var(--ease),background-color var(--dur-fast) var(--ease)}
.option:hover{border-color:var(--color-primary)}
.option kbd{display:grid;place-items:center;width:32px;height:32px;border-radius:var(--radius-md);border:1.5px solid var(--color-border);font:600 var(--text-sm) var(--font-mono);flex:none}
.option[aria-checked="true"]{border-color:var(--color-primary);background:color-mix(in srgb,var(--color-primary) 6%,var(--color-bg))}
.option[aria-checked="true"] kbd{background:var(--color-primary);color:var(--color-onPrimary);border-color:var(--color-primary)}
.option.is-correct{border-color:var(--color-success);background:color-mix(in srgb,var(--color-success) 7%,var(--color-bg))}
.option.is-correct kbd{background:var(--color-success);border-color:var(--color-success);color:var(--color-onPrimary)}

/* progress: bar, steps, ring */
.bar{height:10px;border-radius:var(--radius-full);background:var(--color-surface);border:1px solid var(--color-border);overflow:hidden}
.bar>span{display:block;height:100%;background:var(--color-primary);border-radius:inherit;transition:width var(--dur-slow) var(--ease)}
.steps{display:flex;gap:var(--space-1)}
.steps span{flex:1;height:6px;border-radius:var(--radius-full);background:var(--color-border)}
.steps span.done{background:var(--color-primary)}
.steps span.now{background:var(--color-secondary)}
.ring{--p:70;width:120px;height:120px;border-radius:var(--radius-full);display:grid;place-items:center;background:conic-gradient(var(--color-primary) calc(var(--p)*1%),var(--color-surface) 0)}
.ring>span{width:92px;height:92px;border-radius:inherit;background:var(--color-bg);display:grid;place-items:center;font:600 var(--text-2xl) var(--font-mono)}
.roadmap{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-2)}
.roadmap li{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3);border-radius:var(--radius-md);font-size:var(--text-sm)}
.roadmap .dot{width:28px;height:28px;border-radius:var(--radius-full);display:grid;place-items:center;border:2px solid var(--color-border);font:600 var(--text-xs) var(--font-mono);flex:none;background:var(--color-bg)}
.roadmap .done .dot{background:var(--color-primary);border-color:var(--color-primary);color:var(--color-onPrimary)}
.roadmap .now{background:var(--color-surface);font-weight:600}
.roadmap .now .dot{border-color:var(--color-secondary);background:var(--color-secondary);color:var(--color-onSecondary)}
.roadmap .locked{color:var(--color-muted)}

/* verdict bar */
.verdict{--c:var(--color-success);position:sticky;bottom:0;border-top:4px solid var(--c);background:color-mix(in srgb,var(--c) 8%,var(--color-bg));padding:var(--space-4) 0;animation:rise var(--dur-slow) var(--ease)}
.verdict.wrong{--c:var(--color-danger)}
.verdict .wrap{display:flex;align-items:center;gap:var(--space-4);flex-wrap:wrap}
.verdict .stamp{display:grid;place-items:center;width:56px;height:56px;border-radius:var(--radius-full);border:3px solid var(--c);color:var(--c);transform:rotate(-8deg);font:700 var(--text-xs) var(--font-mono);text-transform:uppercase;flex:none;animation:stamp var(--dur-slow) var(--ease)}
.verdict .msg{flex:1;min-width:200px}
.verdict .msg strong{color:var(--c);font:700 var(--text-xl) var(--font-display);display:block}
@keyframes stamp{from{transform:scale(1.6) rotate(-8deg);opacity:0}}

/* streak */
.streak{display:flex;gap:var(--space-2)}
.streak li{list-style:none;display:grid;justify-items:center;gap:var(--space-1);font:500 var(--text-xs) var(--font-mono);color:var(--color-muted)}
.streak li span{width:36px;height:36px;border-radius:var(--radius-full);display:grid;place-items:center;border:2px dashed var(--color-border)}
.streak li.on span{background:var(--color-secondary);border:2px solid var(--color-secondary);color:var(--color-onSecondary)}
.streak li.today span{border:2px solid var(--color-primary);border-style:solid}
.streak ol{display:flex;gap:var(--space-2);padding:0;margin:0}

/* table */
.table{width:100%;border-collapse:collapse;font-size:var(--text-sm)}
.table th{text-align:left;font:500 var(--text-xs) var(--font-mono);text-transform:uppercase;letter-spacing:.06em;color:var(--color-muted);padding:var(--space-3);border-bottom:1px solid var(--color-border)}
.table td{padding:var(--space-3);border-bottom:1px solid var(--color-border);vertical-align:middle}
.table tr:hover td{background:var(--color-surface)}
.person{display:flex;align-items:center;gap:var(--space-3)}
.hl{background:var(--color-secondary);color:var(--color-onSecondary);padding:0 4px;border-radius:var(--radius-sm)}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:0ms!important;animation-iteration-count:1!important;transition-duration:0ms!important}.btn[aria-busy="true"]::after{animation:none;border-right-color:var(--color-onPrimary);opacity:.6}}