/* Flique website system. /styleguide renders these same components.
   One stylesheet: tokens → primitives → components → specialist demos.
   No page-local overrides. Pink is action; outcome colours carry meaning. */
::selection{background:var(--primary);color:#fff}

:root{
  color-scheme:only light;
  --paper:#FAF9F7;
  --panel:#F0EDE8;
  --ink:#1C1917;
  --muted:#625C57;
  --faint:var(--muted);
  --primary:#FF2D8B;
  --correct:#4E7A27;
  --almost:#9A6410;
  --incorrect:#B84E33;
  --correct-dark:#8FBE5A;
  --almost-dark:#E0A93A;
  --incorrect-dark:#E87461;
  --surface-dark:#221F1D;
  --disp:"Bricolage Grotesque",system-ui,sans-serif;
  --body:"Space Grotesk",system-ui,sans-serif;
  --mono:ui-monospace,"SF Mono","SFMono-Regular",Menlo,Consolas,monospace;
  --edge:3px;
  --wrap:1120px;
  --wrap-pad:clamp(18px,5vw,44px);
  --section-y:clamp(48px,8vw,92px);
  --head-gap:clamp(26px,4vw,44px);
  --gap:clamp(18px,3vw,30px);
  --card-pad:clamp(20px,2.6vw,30px);
  --shadow-card:6px 6px 0 var(--primary);
  --text-muted:var(--muted);
  --focus:var(--ink);
  --success:var(--correct);
  --error:var(--incorrect);
  --title-size:clamp(2.25rem,5vw,4.1rem);
  --heading-size:clamp(1.9rem,4vw,3.3rem);
  --card-title-size:clamp(1.25rem,2.2vw,1.5rem);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-padding-top:90px}
body{margin:0; background:var(--paper); color:var(--ink); font:17px/1.55 var(--body)}
body::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:radial-gradient(var(--ink) .6px,transparent .9px);
  background-size:4px 4px; opacity:.11; mix-blend-mode:multiply;
}
main,header,footer{position:relative; z-index:1}
a{color:inherit; text-underline-offset:3px}
img,svg{max-width:100%}
button,input,select,textarea{font:inherit}
button{color:inherit}
[hidden]{display:none !important}
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 var(--wrap-pad)}
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}
:focus-visible{outline:3px solid var(--focus); outline-offset:4px}
.skip-link{position:absolute; top:8px; left:8px; z-index:200; padding:10px 16px; background:var(--paper); transform:translateY(-160%)}
.skip-link:focus{transform:none}
section{padding:var(--section-y) 0; border-top:var(--edge) solid var(--ink)}
.page-hero{padding:clamp(34px,6vw,72px) 0; border-top:0}
.page-title,.sec-title{font-family:var(--disp); font-weight:800; letter-spacing:-.025em; line-height:1.04; margin:0; text-wrap:balance}
.page-title{font-size:var(--title-size); max-width:20ch}
.sec-title{font-size:var(--heading-size); max-width:20ch}
.sec-head{margin:0 0 var(--head-gap)}
.lead,.sec-sub{max-width:56ch; margin:1em 0 0; color:var(--text-muted); font-size:clamp(1rem,2vw,1.14rem)}
.lead{font-size:clamp(1.05rem,2vw,1.25rem); color:inherit}
.actions{display:flex; flex-wrap:wrap; gap:20px; align-items:center; margin-top:28px}
.grid-2,.stamps{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--gap)}
.stamps{grid-template-columns:repeat(3,minmax(0,1fr))}
.card{
  border:var(--edge) solid var(--ink); background:var(--paper); color:var(--ink);
  padding:var(--card-pad); box-shadow:var(--shadow-card); min-width:0;
  --text-muted:var(--muted); --focus:var(--ink); --success:var(--correct); --error:var(--incorrect);
}
.card h3,.cell h3{font:700 var(--card-title-size)/1.15 var(--disp); letter-spacing:-.01em; margin:0 0 .5em}
.card p,.cell p{margin:0; color:var(--text-muted)}
.card p + p{margin-top:1em}
.card .num{font-family:var(--disp); font-weight:800; font-size:2.4rem; line-height:1; -webkit-text-stroke:2px var(--primary); color:transparent; display:block; margin-bottom:.15em}
.tag{display:inline-block; font:700 .78rem/1.3 var(--body); padding:.3em .6em; background:var(--panel); color:var(--ink); border:1px solid var(--ink)}
.tag-strip{display:flex; flex-wrap:wrap; gap:10px; margin-top:24px}
.section-dark,.waitlist,.foot{
  background:var(--ink); color:var(--paper); --text-muted:#D2CCC6; --focus:var(--paper);
  --success:var(--correct-dark); --error:var(--incorrect-dark);
}
.section-dark,.waitlist{position:relative}
.section-dark::after,.waitlist::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:radial-gradient(var(--paper) .7px,transparent 1px);
  background-size:5px 5px; opacity:.14;
}
.section-pink{
  background:var(--primary); color:var(--ink); position:relative;
  --text-muted:rgba(28,25,23,.72); --focus:var(--ink);
}
.section-pink::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:radial-gradient(var(--ink) .7px,transparent 1px);
  background-size:5px 5px; opacity:.16;
}
/* Ledger: the one place the site names the alternative. Left column is struck
   through in pink (decoration, never prose colour); right column is the answer. */
.ledger{list-style:none; margin:0; padding:0; border-top:var(--edge) solid var(--ink)}
.ledger li{
  display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:var(--gap);
  padding:clamp(16px,2.4vw,26px) 0; border-bottom:var(--edge) solid var(--ink); align-items:baseline;
}
.ledger .them{
  margin:0; color:var(--text-muted); font-family:var(--disp); font-weight:700; font-size:var(--card-title-size); line-height:1.15;
  text-decoration:line-through; text-decoration-color:var(--primary); text-decoration-thickness:.14em;
}
.ledger .us{margin:0; font-size:1.05rem}
.ledger .us b{font-weight:700}
.text-link,.see-more a,.wl-secondary{
  color:inherit; font-weight:700; text-decoration:underline;
  text-decoration-color:var(--primary); text-decoration-thickness:2px; text-underline-offset:4px;
}
.text-link:hover,.see-more a:hover,.wl-secondary:hover{text-decoration-thickness:3px}
.see-more{margin:28px 0 0}

/* One button geometry. Variants change colour, not size. */
.btn{
  --button-shadow:var(--primary); --button-offset:7px;
  display:inline-flex; justify-content:center; align-items:center; gap:.5em;
  min-height:48px; padding:.75em 1.2em; border:var(--edge) solid var(--primary);
  font:700 1rem/1.25 var(--body); text-align:center; text-decoration:none;
  background:var(--ink); color:var(--paper); cursor:pointer;
  box-shadow:var(--button-offset) var(--button-offset) 0 var(--button-shadow);
  transition:transform .08s ease,box-shadow .08s ease;
}
.btn--primary{--button-shadow:var(--ink); background:var(--primary); color:var(--ink); border-color:var(--ink)}
.btn--sm{--button-offset:5px; min-height:44px; font-size:.85rem; padding:.55em .85em}
.btn:hover:not(:disabled){transform:translate(-3px,-3px); box-shadow:10px 10px 0 var(--button-shadow)}
.btn:active:not(:disabled){transform:translate(3px,3px); box-shadow:2px 2px 0 var(--button-shadow)}
.btn--secondary{background:transparent; color:inherit; border-color:currentColor; box-shadow:none}
.btn--secondary:hover:not(:disabled),.btn--secondary:active:not(:disabled){transform:none; box-shadow:none; text-decoration:underline; text-underline-offset:4px}
.btn:disabled{opacity:.55; cursor:not-allowed; transform:none; box-shadow:none}

/* Shared header. Navigation is usable without JS; JS enables the mobile drawer. */
header{position:sticky; top:0; z-index:100; border-bottom:var(--edge) solid var(--ink); background:var(--paper)}
.nav{display:flex; align-items:center; justify-content:space-between; min-height:76px; gap:20px}
/* The wordmark is the word. No icon: a dotless ı carries a pink square tittle, set
   with the same hard offset shadow as every other riso object on the page. */
.brand{font:800 1.85rem/1 var(--disp); letter-spacing:-.035em; text-decoration:none; display:inline-flex; align-items:center; flex-shrink:0}
.brand b{position:relative; font-weight:inherit}
.brand b::after{
  content:""; position:absolute; left:50%; top:-.02em; width:.2em; height:.2em;
  background:var(--primary); box-shadow:.05em .05em 0 currentColor;
  transform:translateX(-50%) rotate(-8deg);
}
.nav-links{display:flex; gap:18px; align-items:center; list-style:none; margin:0; padding:0}
.nav-links a:not(.btn){display:inline-block; text-decoration:none; font-size:.9rem; padding:10px 0; border-bottom:2px solid transparent}
.nav-links a:not(.btn):hover,.nav-links a[aria-current="page"]{border-bottom-color:var(--primary)}
.nav-links a[aria-current="page"]{font-weight:700}
.nav-right{display:flex; align-items:center; gap:18px; flex-shrink:0}
.nav-cta-mobile{display:none}
.menu-btn{display:none; background:var(--paper); border:var(--edge) solid var(--ink); font-weight:700; min-height:44px; padding:.4em .7em; cursor:pointer}

/* One field, label and status treatment for every form, on either ground. */
.field-label{display:block; font-weight:700; font-size:.85rem; margin-bottom:.4em}
.field-input{
  width:100%; min-width:0; min-height:48px; padding:.75em .9em;
  border:var(--edge) solid var(--ink); border-radius:0; background:var(--paper); color:var(--ink);
  font:1rem/1.5 var(--body); appearance:none;
}
.field-input::placeholder{color:var(--muted)}
select.field-input{
  padding-right:2.5em; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%231C1917' stroke-width='1.8'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right .9em center;
}
textarea.field-input{min-height:130px; resize:vertical}
.wl-form,.sup-form{max-width:640px; display:grid; gap:20px}
.wl-form{margin-top:28px}
.row2{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px}
.wl-actions,.sup-actions{display:flex; flex-wrap:wrap; gap:20px; align-items:center}
.wl-status,.sup-status{flex-basis:100%; margin:0; min-height:1.2em; font-weight:700; font-size:.95rem}
.wl-status.is-success,.sup-status.is-success{color:var(--success)}
.wl-status.is-error,.sup-status.is-error{color:var(--error)}
.wl-turnstile{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.wl-turnstile.is-interactive{position:static; width:auto; height:auto; overflow:visible; flex-basis:100%}
.wl-submit{flex:0 0 auto}
.wl-email{flex:1 1 220px}
.wl-language-other{margin-top:14px}
.note{padding:var(--card-pad); border-left:var(--edge) solid var(--primary); background:var(--panel); color:var(--ink)}
.note p{margin:0}
.note p + p{margin-top:1em}

/* Language links and jump buttons share the same chip, including text codes. */
.langs{display:flex; flex-wrap:wrap; gap:14px}
.page-hero .langs{margin-top:28px}
.lang{
  appearance:none; cursor:pointer; border:var(--edge) solid var(--ink);
  padding:.7em 1em; font:700 1rem/1.4 var(--disp); text-align:left;
  display:inline-flex; align-items:center; gap:.6em; background:var(--paper); color:var(--ink);
  text-decoration:none; box-shadow:4px 4px 0 var(--ink); transition:transform .08s ease,box-shadow .08s ease;
}
.lang:hover{transform:translate(-2px,-2px); box-shadow:6px 6px 0 var(--primary)}
.lang .fl,.lang-card .lc-flag{
  font:700 .75rem/1 var(--mono); letter-spacing:.06em; padding:.3em .4em;
  flex:0 0 auto; border:2px solid var(--primary); color:var(--ink); background:var(--paper);
}
.foot{border-top:var(--edge) solid var(--paper); padding:36px 0}
.foot-row{display:flex; flex-wrap:wrap; justify-content:space-between; gap:24px; align-items:center}
.foot small{color:var(--text-muted); font-size:.85rem}
.foot-links{display:flex; flex-wrap:wrap; gap:20px}

/* Specialist components below own their internals, never global page chrome. */
/* Conversation demo, shared by home and conversation */
.convo-grid{min-width:0; display:grid; grid-template-columns:1.02fr .98fr; gap:clamp(28px,5vw,56px); align-items:center}
.chat{border:var(--edge) solid var(--paper); background:var(--surface-dark); padding:clamp(16px,2.4vw,24px); box-shadow:6px 6px 0 var(--primary);}
.bubble{border:2px solid var(--paper); padding:.7em .9em; margin-bottom:.8em; max-width:86%; font-size:1rem; line-height:1.4;}
.bubble .who{display:block; font-size:.68rem; text-transform:uppercase; letter-spacing:.14em; font-weight:700; margin-bottom:.35em; opacity:.7;}
.bubble.them{background:transparent; border-color:var(--paper)}
.bubble.you{background:var(--primary); color:var(--ink); border-color:var(--primary); margin-left:auto}
.bubble .ipa-mini{font-family:var(--disp); font-weight:600; opacity:.85; font-size:.86rem; display:block; margin-top:.25em}
.bubble .nw{color:var(--paper); font-weight:700}
.keep{display:inline-flex; align-items:center; gap:.4em; margin-top:.55em; font-weight:700; font-size:.78rem; letter-spacing:.03em; color:var(--ink); background:var(--paper); border:2px solid var(--primary); padding:.3em .6em;}
.keep .plus{color:var(--primary); font-weight:800}
.mic-row{display:flex; align-items:center; gap:.8em; margin-top:.4em}
.mic{width:46px; height:46px; flex:0 0 auto; border-radius:50%; border:2px solid var(--paper); background:var(--primary); color:var(--ink); display:flex; align-items:center; justify-content:center;}
.mic svg{width:20px; height:20px}
.mic-row span{font-size:.9rem; opacity:.82}
/* Reserved so the reveal does not grow the page as bubbles land. Sized for the
   tallest script (German, whose lines wrap soonest) — see the chat demo table. */
.chat-stream{min-height:400px}
.typing{display:none; gap:.34em; align-items:center; width:max-content; border:2px solid var(--paper); padding:.72em .95em; margin-bottom:.8em;}
.typing span{width:7px; height:7px; border-radius:50%; background:var(--paper); opacity:.4}
.nw{display:inline-block}
.chat.is-animated .step{display:none}
.chat.is-animated .bubble.step.is-shown{display:block; animation:msgRise .5s cubic-bezier(.2,.7,.2,1) both}
.chat.is-animated .typing.step.is-shown{display:flex; animation:msgRise .32s ease both}
.chat.is-animated .typing.is-shown span{animation:blink 1.2s infinite}
.chat.is-animated .typing.is-shown span:nth-child(2){animation-delay:.18s}
.chat.is-animated .typing.is-shown span:nth-child(3){animation-delay:.36s}
.chat.is-animated .bubble.them.step.is-shown .nw{animation:nwPop .55s .3s both}
.chat.is-animated .bubble.them.step.is-shown .keep{animation:msgRise .5s .5s both}
@keyframes msgRise{from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none}}
@keyframes blink{0%,60%,100%{opacity:.28; transform:translateY(0)} 30%{opacity:1; transform:translateY(-3px)}}
@keyframes nwPop{0%{transform:scale(1)} 45%{transform:scale(1.16)} 100%{transform:scale(1)}}
@media (prefers-reduced-motion: reduce){
.typing{display:none !important}
.chat.is-animated .step{display:revert; animation:none !important; opacity:1; transform:none}
}
.convo-points{list-style:none; margin:clamp(18px,3vw,26px) 0 0; padding:0}
.convo-points li{padding:.85em 0; border-bottom:2px solid rgba(250,249,247,.2); display:flex; gap:.9em; align-items:baseline;}
.convo-points li:last-child{border-bottom:0}
.convo-points b{font-family:var(--disp); font-weight:800; color:var(--paper); font-size:1.2rem; flex:0 0 auto}
.convo-points span{font-size:1.02rem}

/* Phrase and recall demos */
.switcher{display:flex; flex-wrap:wrap; gap:8px; margin:0 0 clamp(18px,3vw,26px);}
.switcher .stamp-btn{font-family:var(--body); font-weight:700; font-size:.82rem; letter-spacing:.02em; line-height:1; padding:.55em .7em; background:var(--paper); color:var(--ink); border:2px solid var(--ink); cursor:pointer; position:relative; transition:transform .08s ease, box-shadow .08s ease, background .08s ease, color .08s ease; box-shadow:2px 2px 0 var(--ink);}
.switcher .stamp-btn:hover{transform:translate(-1px,-1px); box-shadow:3px 3px 0 var(--primary)}
.switcher .stamp-btn[aria-checked="true"]{background:var(--primary); color:var(--ink); border-color:var(--ink); box-shadow:3px 3px 0 var(--ink); transform:rotate(-1.4deg);}
.spoken{margin:0}
.phrase{position:relative; font-family:var(--disp); font-weight:800; font-size:clamp(2rem,8.2vw,6.6rem); line-height:.98; letter-spacing:-.03em; margin:0; color:var(--ink); min-width:0; white-space:normal; overflow-wrap:anywhere; word-break:normal; hyphens:auto; -webkit-hyphens:auto;}
.phrase > span{display:block; min-width:0}
.ipa{font-family:var(--disp); font-weight:600; font-size:clamp(1rem,4vw,1.95rem); letter-spacing:.01em; color:var(--muted); margin:.5em 0 .1em; overflow-wrap:break-word;}
.gloss{font-family:var(--body); font-weight:500; font-size:clamp(.95rem,2.4vw,1.15rem); color:var(--muted); margin:0 0 .2em;}
.wave-btn{display:block; width:100%; margin-top:.4em; padding:6px 0 2px; background:none; border:0; text-align:left; cursor:pointer; color:inherit; -webkit-tap-highlight-color:transparent;}
.wave-btn:disabled{cursor:default}
.wave-btn:focus{outline:none}
.wave-btn:focus-visible{outline:2px solid var(--ink); outline-offset:3px; border-radius:2px;}
.wave{width:100%; height:46px; display:block; overflow:visible; transition:transform .12s ease;}
.wave-btn:hover:not(:disabled) .wave{transform:translateY(-1px)}
.wave rect{fill:var(--primary); opacity:.92; transform-box:fill-box; transform-origin:center}
.wave rect.played{fill:var(--splash-core,#D6116C); opacity:1}
.wave-ghost rect{fill:var(--primary); opacity:.18}
.wave-ghost{transform:translate(2.5px,2.5px); transition:transform .12s ease}
.wave-btn:hover:not(:disabled) .wave-ghost{transform:translate(3.5px,3.5px)}
.wave-btn.is-playing .wave-ghost{transform:translate(0,0); transition:transform .09s ease-out}
.wave-hint{display:inline-flex; align-items:center; gap:.4em; font-family:var(--body); font-weight:600; font-size:.82rem; letter-spacing:.02em; color:var(--muted); margin-top:.15em; transition:color .12s ease;}
.wave-btn:hover:not(:disabled) .wave-hint{color:var(--ink)}
.wave-hint svg{width:.95em; height:.95em; display:block}
.wave-btn[hidden]{display:none}
@keyframes waveStrike{0%{transform:scaleY(1)}45%{transform:scaleY(1.15)}100%{transform:scaleY(1)}}
.wave rect.striking{animation:waveStrike .13s ease-out}
@keyframes waveRise{from{transform:scaleY(.3)}to{transform:scaleY(1)}}
.wave.is-entering rect{animation:waveRise .26s ease-out both;animation-delay:calc(var(--i,0) * 5ms)}
@keyframes waveIdle{0%,100%{transform:scaleY(.82)}50%{transform:scaleY(1)}}
.wave.is-idle rect{animation:waveIdle 2.1s ease-in-out infinite;animation-delay:calc(var(--i,0) * -52ms)}
.sticks-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0; border:var(--edge) solid var(--ink)}
.sticks-grid .cell{min-width:0; padding:clamp(20px,3vw,32px); border-right:var(--edge) solid var(--ink); border-bottom:var(--edge) solid var(--ink);}
.sticks-grid .cell--lead{grid-column:1 / -1; border-right:0; display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:clamp(20px,3.5vw,44px); align-items:center;}
.sticks-grid .cell:nth-child(odd):not(.cell--lead){border-right:0}
.sticks-grid .cell:nth-last-child(-n+2){border-bottom:0}
.gauge{margin:0; min-width:0; border:2px solid var(--ink); background:var(--panel); padding:.85em .9em .7em;}
.gauge .g-head{display:flex; align-items:baseline; justify-content:space-between; gap:.6em; font-family:var(--mono); font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; color:var(--faint); margin-bottom:.5em;}
.gauge .g-head .cap{color:inherit; font-weight:600}
.gauge svg{width:100%; height:auto; display:block}
.gauge .g-foot{font-family:var(--mono); font-size:.6rem; letter-spacing:.1em; text-transform:uppercase; color:var(--faint); margin-top:.5em; display:flex; justify-content:space-between;}
@media (max-width:700px){
.sticks-grid .cell--lead{grid-template-columns:minmax(0,1fr)}
.cell--lead .gauge{max-width:420px}
}
@media (max-width:560px){
.sticks-grid{grid-template-columns:1fr}
.sticks-grid .cell{border-right:0}
.sticks-grid .cell:nth-last-child(-n+2){border-bottom:var(--edge) solid var(--ink)}
.sticks-grid .cell:last-child{border-bottom:0}
}
@media (prefers-reduced-motion: reduce){
.wave.is-entering rect{animation:none}
.wave rect.striking{animation:none}
.wave, .wave-ghost{transition:none}
.wave-btn:hover:not(:disabled) .wave{transform:none}
.wave-btn:hover:not(:disabled) .wave-ghost{transform:translate(2.5px,2.5px)}
}

/* Device demos */
.flist{list-style:none; margin:0; padding:0; display:grid; gap:.85em}
.flist li{position:relative; padding-left:1.5em; font-size:1rem; color:var(--muted); line-height:1.5}
.flist li::before{content:"→"; position:absolute; left:0; top:0; color:inherit; font-weight:700}
.flist b{color:var(--ink); font-weight:700}
.loop{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(22px,3.4vw,36px)}
.loop-item{display:flex; flex-direction:column; align-items:center; gap:.9em}
.device{width:100%; max-width:240px; border:var(--edge) solid var(--paper); background:var(--surface-dark); padding:12px; box-shadow:6px 6px 0 var(--primary);}
.screen{background:var(--paper); color:var(--ink); padding:15px; min-height:300px; display:flex; flex-direction:column; gap:.75em;}
.device-cap{font-family:var(--disp); font-weight:800; letter-spacing:.06em; text-transform:uppercase; font-size:.82rem; color:var(--paper);}
.scr-kick{font-family:var(--mono); font-size:.58rem; letter-spacing:.16em; text-transform:uppercase; color:var(--faint)}
.scr-ready{display:flex; align-items:baseline; gap:.45em}
.scr-num{font-family:var(--disp); font-weight:800; font-size:2.6rem; line-height:1; color:var(--ink)}
.scr-ready .u{font-size:.92rem; color:var(--muted)}
.scr-btn{text-align:center; background:var(--primary); color:var(--ink); font-family:var(--disp); font-weight:800; letter-spacing:.02em; padding:.55em; border:2px solid var(--ink);}
.scr-line{display:flex; align-items:center; gap:.5em; border:2px solid var(--ink); padding:.5em .6em; font-size:.85rem; font-weight:700}
.scr-dot{width:.6em; height:.6em; border-radius:50%; background:var(--primary); flex:0 0 auto}
.scr-prompt{font-family:var(--disp); font-weight:700; font-size:1.1rem; margin:0; line-height:1.15}
.scr-mut{color:var(--muted); font-weight:500}
.scr-input{border:2px solid var(--ink); padding:.5em .6em; font-family:var(--mono); font-size:.92rem}
.scr-fb{border:2px solid var(--ink); background:var(--panel); padding:.5em .6em; font-size:.85rem; line-height:1.45}
.scr-fb b{color:var(--almost)}
.scr-diff{color:var(--incorrect); font-weight:800; text-decoration:underline; text-decoration-thickness:2px}
.scr-spacer{flex:1 1 auto}
@media (max-width:760px){
.loop{grid-template-columns:1fr; justify-items:center}
.device{max-width:280px}
}

/* Scheduler and review demos */
.sched{margin:0}
.sched-panel{border:var(--edge) solid var(--ink); background:var(--paper); box-shadow:var(--shadow-card); padding:clamp(16px,2.6vw,26px); position:relative;}
svg.sched-gauge{display:block; width:100%; height:auto; touch-action:pan-y; -webkit-user-select:none; user-select:none}
#schedHandle{cursor:grab; touch-action:none}
#schedHandle .hit{fill:transparent}
#schedHandle:active{cursor:grabbing}
#schedHandle .knob{fill:var(--primary); stroke:var(--ink); stroke-width:2}
#schedHandle .grip{stroke:var(--paper); stroke-width:1.5; stroke-linecap:round}
#schedHandle .ring{fill:none; stroke:var(--ink); stroke-width:2.4; opacity:0}
#schedHandle:focus{outline:none}
#schedHandle:focus .ring, #schedHandle:focus-visible .ring{opacity:1}
.sched-hint{font-family:var(--mono); font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--faint); text-align:center; margin:.85em 0 0; white-space:normal; overflow-wrap:break-word; line-height:1.7;}
.sched-hint b{color:inherit; font-weight:700}
.sched-readout{display:flex; justify-content:space-between; align-items:flex-end; gap:1.4rem; flex-wrap:wrap; margin:14px 2px 2px; padding-top:16px; border-top:var(--edge) solid var(--ink);}
.sched-readout .big{font-family:var(--disp); font-weight:800; font-size:clamp(1.7rem,4.4vw,2.3rem); line-height:1; color:var(--ink)}
.sched-readout .big small{display:block; font-family:var(--mono); font-size:.82rem; font-weight:500; color:var(--muted); letter-spacing:.04em; margin-top:.55em; text-transform:uppercase;}
.sched-readout .human{font-family:var(--body); font-size:clamp(.98rem,2vw,1.1rem); line-height:1.42; color:var(--ink); max-width:44ch; text-align:right; margin:0}
.sched-readout .human b{color:var(--correct); font-weight:700}
@media (max-width:560px){
.sched-readout{flex-direction:column; align-items:flex-start}
.sched-readout .human{text-align:left; max-width:none}
}
.coin-stamp{transform-box:fill-box; transform-origin:center; pointer-events:none; transition:transform .2s cubic-bezier(.2,1.5,.5,1)}
.coin-stamp text{fill:var(--ink); fill-opacity:.5; paint-order:stroke; stroke:var(--paper); stroke-width:2.6; stroke-linejoin:round; transition:fill-opacity .16s ease}
.coin-stamp .cs-box{fill:var(--paper); stroke:var(--ink); stroke-width:2; opacity:0; transition:opacity .18s ease}
.coin-stamp.pressed{transform:scale(1.12)}
.coin-stamp.pressed text{fill-opacity:1; font-weight:800}
.coin-stamp.pressed .cs-box{opacity:1}
@media (prefers-reduced-motion: reduce){
.coin-stamp, .coin-stamp text, .coin-stamp .cs-box{transition:none}
.coin-stamp.pressed{transform:none}
}
.review-split{display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(28px,5vw,56px); align-items:center}
.review-demo{border:var(--edge) solid var(--paper); background:var(--surface-dark); padding:clamp(20px,2.8vw,30px); box-shadow:6px 6px 0 var(--primary);}
.rd-step{font-family:var(--mono); font-size:.62rem; letter-spacing:.16em; text-transform:uppercase; color:inherit; margin:0 0 .5em;}
.rd-prompt{font-family:var(--disp); font-weight:700; font-size:1.3rem; margin:0 0 1em; color:var(--paper)}
.rd-typed{margin:0 0 .8em; font-size:1rem; color:var(--paper); opacity:.82}
.rd-typed .rd-you{font-family:var(--disp); font-weight:700; color:var(--paper); border-bottom:2px solid var(--almost-dark); padding-bottom:1px;}
.rd-fb{display:inline-block; border:2px solid var(--paper); background:var(--almost-dark); color:var(--ink); font-weight:700; font-size:.92rem; padding:.4em .7em; margin:0 0 .9em;}
.rd-answer{font-family:var(--disp); font-weight:800; font-size:2rem; letter-spacing:-.01em; margin:0 0 .8em; color:var(--paper)}
.rd-answer .diff{color:var(--incorrect-dark); text-decoration:underline; text-decoration-thickness:3px; text-underline-offset:3px}
.rd-note{margin:0; font-size:.96rem; color:var(--paper); opacity:.7}
.evidence-grid .card{display:flex; flex-direction:column}
.ev-top{display:flex; flex-wrap:wrap; justify-content:space-between; gap:.6rem; align-items:baseline; margin-bottom:.6em}
.ev-cite{font-size:.78rem; color:var(--faint); font-family:var(--body)}
.ev-cite a{color:var(--muted); text-decoration:none; border-bottom:1px solid transparent}
.ev-cite a:hover, .ev-cite a:focus-visible{color:var(--ink); border-bottom-color:inherit}
.ev-cite .arrow{font-size:.85em; opacity:.7}
.refs{margin-top:var(--gap)}
.refs .ref-note{max-width:56ch; margin:0 0 clamp(18px,2.4vw,26px); font:700 var(--card-title-size)/1.15 var(--disp); letter-spacing:-.01em}
.ref-list{list-style:none; margin:0; padding:0; display:grid; gap:1rem; max-width:64ch}
.ref-list li{font-size:.96rem; line-height:1.5; color:var(--muted); padding-left:1.1em; position:relative}
.ref-list li::before{content:"→"; position:absolute; left:0; color:inherit; font-weight:700}
.ref-list a{color:inherit; text-decoration:none; border-bottom:1px solid transparent}
.ref-list a:hover, .ref-list a:focus-visible{color:var(--ink); border-bottom-color:inherit}
.ref-list .arrow{font-size:.85em; opacity:.7}
.ref-list em{font-style:italic}
@media (max-width:820px){
.review-split{grid-template-columns:1fr}
}

/* Language disclosures and audio */
.lang-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(min(250px,100%),1fr)); gap:clamp(14px,2vw,20px); align-items:start;}
.lang-cell{display:flex; flex-direction:column}
.lang-card{position:relative; display:flex; flex-direction:column; gap:.35em; transition:transform .08s ease,box-shadow .08s ease;}
.lang-card:hover{transform:translate(-2px,-2px); box-shadow:8px 8px 0 var(--primary)}
.lang-card:focus-within{outline:3px solid var(--primary); outline-offset:3px}
.lang-card.is-jumped{outline:3px solid var(--primary); outline-offset:4px; animation:jumpSettle .3s ease}
@keyframes jumpSettle{from{outline-offset:8px} to{outline-offset:4px}}
.lang-card .lc-top{display:flex; align-items:center; gap:.6em}
.lang-card .lc-native{font-family:var(--disp); font-weight:600; font-size:1rem; color:var(--muted); margin:0;}
.lang-card .lc-range{margin-top:auto; padding-top:.9em; font-family:var(--mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--faint);}
.lang-card .lc-range b{color:var(--ink); font-weight:700}
.lang-card .lc-word{margin:.5em 0 .1em; line-height:1.3}
.lcw-term{display:block; font-family:var(--disp); font-weight:700; font-size:1.06rem; letter-spacing:-.01em; color:inherit}
.lcw-gloss{display:block; font-size:.82rem; color:var(--muted); margin-top:.05em}
@media (hover:hover){
.lcw-gloss{opacity:0; transform:translateY(-2px); transition:opacity .18s ease, transform .18s ease}
.lang-card:hover .lcw-gloss, .lang-card:focus-within .lcw-gloss{opacity:1; transform:none}
}
@media (prefers-reduced-motion: reduce){
.lcw-gloss{transition:none; transform:none}
.coming .soon{transition:none}
.coming .soon:hover, .coming .soon:focus-visible{transform:none}
.coming .soon .eq i{animation:none}
.coming .soon .eq i:nth-child(1){height:42%}
.coming .soon .eq i:nth-child(2){height:72%}
.coming .soon .eq i:nth-child(3){height:52%}
}
.lc-trigger{margin-top:.7em; align-self:flex-start; font:inherit; background:transparent; border:0; padding:0; cursor:pointer; color:inherit;}
.lc-trigger::after{content:""; position:absolute; inset:0; z-index:1}
.lc-toggle{position:relative; z-index:2; display:inline-flex; align-items:center; gap:.45em; font-family:var(--mono); font-weight:700; font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; color:inherit;}
.lc-chev{display:inline-block; transition:transform .18s ease}
.lc-trigger[aria-expanded="true"] .lc-chev{transform:rotate(90deg)}
.lang-panel{overflow:hidden; max-height:0; transition:max-height .28s ease}
.lang-panel[hidden]{display:none}
.lp-body{margin-top:10px; border:var(--edge) solid var(--ink); border-left:4px solid var(--primary); background:var(--panel); padding:clamp(14px,2vw,18px); display:flex; flex-direction:column; gap:.55em;}
.lp-kick{font-family:var(--mono); font-size:.6rem; letter-spacing:.16em; text-transform:uppercase; color:inherit; margin:0;}
.lp-cov-label{font-family:var(--mono); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink); font-weight:700; margin:0;}
.lp-ladder{display:flex; flex-wrap:wrap; gap:6px; margin:0}
.lp-lv{font-family:var(--disp); font-weight:800; font-size:.72rem; letter-spacing:.04em; line-height:1; color:inherit; border:2px solid var(--primary); background:var(--paper); padding:.28em .45em;}
.lp-count{margin:0; font-size:.92rem; color:var(--muted)}
.lp-count b{color:var(--ink); font-weight:700}
.lp-surf{list-style:none; margin:.1em 0 0; padding:0; display:flex; flex-wrap:wrap; gap:.4em}
.lp-surf li{font-family:var(--disp); font-weight:700; font-size:.72rem; letter-spacing:.02em; padding:.32em .55em; border:2px solid var(--ink); background:var(--paper); color:var(--ink); display:flex; align-items:center; gap:.35em;}
.lp-surf li::before{content:"✓"; color:inherit; font-weight:800}
.lp-surf li.lp-off{color:var(--faint); border-color:var(--faint)}
.lp-surf li.lp-off::before{content:"–"; color:var(--faint)}
@media (prefers-reduced-motion: reduce){
.lang-panel, .lc-chev, .lang-card{transition:none}
}
.levels{display:flex; flex-wrap:wrap; gap:12px}
.level-chip{border:var(--edge) solid var(--ink); background:var(--paper); box-shadow:3px 3px 0 var(--primary); padding:.7em .95em; min-width:120px; display:flex; flex-direction:column; gap:.2em;}
.level-chip .lv-code{font-family:var(--disp); font-weight:800; font-size:1.5rem; line-height:1; color:inherit;}
.level-chip .lv-name{font-size:.82rem; color:var(--muted); font-weight:500}
.soon-hint{font-family:var(--mono); font-size:.72rem; letter-spacing:.04em; color:var(--muted); margin:0 0 14px;}
.coming{display:flex; flex-wrap:wrap; gap:12px}
.coming .soon{appearance:none; font:inherit; text-align:left; cursor:pointer; border:var(--edge) solid var(--ink); background:var(--panel); padding:.7em 1.05em; display:flex; align-items:center; gap:.6em; font-family:var(--disp); font-weight:700; font-size:1rem; color:var(--muted); position:relative; overflow:hidden; transition:color .12s, transform .12s, box-shadow .12s;}
.coming .soon:hover, .coming .soon:focus-visible{color:var(--ink); transform:translate(-1px,-1px); box-shadow:3px 3px 0 var(--primary);}
.coming .soon:focus-visible{outline:3px solid var(--primary); outline-offset:3px}
.coming .soon .fl{font-family:var(--mono); font-weight:700; font-size:.68em; letter-spacing:.06em; line-height:1; padding:.28em .38em; flex:0 0 auto; border:2px solid var(--muted); color:var(--muted); background:transparent; position:relative; display:inline-grid; place-items:center; transition:border-color .12s, color .12s;}
.coming .soon:hover .fl, .coming .soon:focus-visible .fl{border-color:var(--ink); color:var(--ink)}
.coming .soon.playing{color:var(--ink)}
.coming .soon.playing .fl{border-color:var(--primary); color:var(--ink)}
.coming .soon .mono-txt{transition:opacity .1s}
.coming .soon.playing .mono-txt{opacity:0}
.coming .soon .eq{position:absolute; inset:0; display:none; align-items:center; justify-content:center; gap:2px}
.coming .soon.playing .eq{display:flex}
.coming .soon .eq i{width:2px; height:40%; background:var(--primary); border-radius:1px; transform-origin:center; animation:eqbar .85s ease-in-out infinite;}
.coming .soon .eq i:nth-child(1){animation-delay:-.30s}
.coming .soon .eq i:nth-child(2){animation-delay:-.55s}
.coming .soon .eq i:nth-child(3){animation-delay:-.05s}
@keyframes eqbar{0%,100%{transform:scaleY(.5)}50%{transform:scaleY(1.7)}}
.coming .soon .uline{position:absolute; left:0; bottom:0; height:2px; width:0; background:var(--primary); pointer-events:none}
.soon-caption{margin:16px 0 0; min-height:1.7em; font-family:var(--disp); font-size:1rem; color:var(--muted)}
.soon-caption .cap-native{color:var(--ink); font-weight:700}
.soon-caption .cap-gloss{font-style:italic}

/* Placement task */
.p-wrap{min-height:calc(100vh - 200px); max-width:var(--wrap); margin:0 auto; padding:clamp(38px,7vw,84px) var(--wrap-pad); display:flex; justify-content:center; position:relative;}
.p-card{width:min(100%,600px); touch-action:pan-y; transition:transform .34s cubic-bezier(.18,.89,.32,1.08),opacity .2s ease;}
.p-card.is-dragging{transition:none}
.p-lang-row{margin:0 0 1.7em}
.p-lang-fixed{display:flex; align-items:baseline; gap:.6em; font-family:var(--disp); font-weight:700; font-size:1.15rem}
.p-lang-change{background:none; border:none; color:inherit; cursor:pointer; font-family:var(--body); font-weight:700; font-size:.92rem; text-decoration:underline; text-underline-offset:3px; padding:.2em;}
.p-skip{display:block; margin:1.1em auto 0; background:none; border:none; cursor:pointer; color:var(--muted); font-family:var(--body); font-size:.95rem; text-decoration:underline; text-underline-offset:3px; padding:.45em .2em; text-align:center;}
.p-skip:hover{color:var(--ink)}
.p-skip[hidden]{display:none}
#p-test{position:relative}
.p-progress{height:12px; border:2px solid var(--ink); background:var(--panel); overflow:hidden; margin:0 0 .55em;}
.p-progress-fill{display:block; height:100%; width:0%; background:var(--primary); transition:width 300ms ease-out}
.p-phase{text-align:center; font-family:var(--body); font-size:.9rem; color:var(--muted); margin:0 0 clamp(20px,4vw,34px); min-height:1.15em;}
.p-unit{position:relative; touch-action:pan-y; user-select:none; -webkit-user-select:none; transition:transform .18s ease, opacity .18s ease;}
.p-unit.is-dragging{transition:none}
.p-unit-ghost{position:absolute; pointer-events:none; z-index:2; will-change:transform; transition:transform .38s cubic-bezier(.16,.7,.3,1);}
.p-word-wrap{min-height:clamp(4.6rem,15vw,7rem); display:flex; align-items:center; justify-content:center; text-align:center; margin:0 0 clamp(22px,4vw,36px); position:relative;}
.p-stamp{position:absolute; top:0; pointer-events:none; opacity:0; font-family:var(--disp); font-weight:800; text-transform:uppercase; letter-spacing:.02em; font-size:clamp(1.1rem,4vw,1.6rem); padding:.15em .5em; line-height:1; transition:transform .13s ease;}
.p-stamp--yes{left:6%; transform:rotate(-9deg); background:var(--primary); color:var(--ink); border:3px solid var(--ink);}
.p-stamp--no{right:6%; transform:rotate(9deg); background:var(--paper); color:var(--ink); border:3px solid var(--ink);}
.p-card.is-armed .p-stamp--yes{transform:rotate(-5deg) scale(1.2)}
.p-card.is-armed .p-stamp--no{transform:rotate(5deg) scale(1.2)}
.p-word{font-family:var(--disp); font-weight:800; letter-spacing:-.02em; font-size:clamp(2.4rem,10vw,4rem); line-height:1.02; color:var(--ink); transition:opacity .09s ease;}
.p-word.is-fading{opacity:0}
.p-answers{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:0 0 1em}
.p-answers .btn{width:100%}
.p-hint{display:none; text-align:center; font-family:var(--mono); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--faint); margin:.5em 0 0;}
@media (hover:hover) and (pointer:fine){
.p-hint:not(.p-hint--touch){display:block}
}
.p-hint--touch{display:none}
@media (hover:none) and (pointer:coarse) and (max-width:640px){
.p-hint--touch{display:block}
.p-hint:not(.p-hint--touch){display:none}
}
.p-level{margin:.4em 0 .5em}
.p-level span{color:inherit; font-weight:700; font-size:.5em; letter-spacing:0}
#p-level-headline:focus{outline:none}
.p-form-heading{font-family:var(--disp); font-weight:700; font-size:1.12rem; margin:1.7em 0 .85em}
.p-waitlist{display:flex; flex-wrap:wrap; gap:12px; align-items:center}
.wl-level-chip{flex-basis:100%; display:inline-flex; align-items:center; gap:.55em; align-self:flex-start; padding:.4em .4em .4em .85em; border:2px solid var(--ink); background:var(--primary); color:var(--ink); font-weight:700; font-size:.9rem;}
.wl-level-chip[hidden]{display:none}
.wl-level-remove{border:none; background:var(--ink); color:var(--paper); cursor:pointer; padding:.28em .6em; font-size:.78rem; font-weight:700;}
.wl-level-remove:hover{background:#000}
.p-form-note{font-family:var(--mono); font-size:.7rem; letter-spacing:.06em; color:var(--faint); margin:.9em 0 0}
.p-restart{display:inline-block; margin-top:1.6em; background:none; border:none; color:var(--muted); cursor:pointer; font-family:var(--body); font-size:.95rem; text-decoration:underline; text-underline-offset:3px; padding:.4em 0;}
.p-restart:hover{color:var(--ink)}
@media (prefers-reduced-motion: reduce){
.p-word, .p-progress-fill, .p-card, .p-unit, .p-unit-ghost, .p-stamp{transition:none}
}

/* Long-form policy */
.legal{max-width:65ch}
.legal-effective{font-family:var(--body); font-weight:700; font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin:1.4em 0 0;}
.legal-sec{padding-top:clamp(28px,4vw,42px); margin-top:clamp(28px,4vw,42px); border-top:2px solid rgba(28,25,23,.14);}
.legal-sec:first-of-type{border-top:0; margin-top:clamp(20px,3vw,30px); padding-top:0}
.legal-sec h2{font-family:var(--disp); font-weight:800; letter-spacing:-.02em; font-size:clamp(1.35rem,3.4vw,1.85rem); line-height:1.08; margin:0 0 .55em;}
.legal-sec h3{font-family:var(--disp); font-weight:700; letter-spacing:-.01em; font-size:clamp(1.05rem,2.4vw,1.22rem); line-height:1.15; margin:1.6em 0 .35em;}
.legal-sec p{margin:0 0 1em; color:var(--muted); font-size:1.02rem; line-height:1.62;}
.legal-sec p:last-child{margin-bottom:0}
.legal-sec strong{color:var(--ink); font-weight:700}
.legal-sec a{color:var(--ink); font-weight:700; text-decoration:underline; text-decoration-color:var(--primary); text-decoration-thickness:2px; text-underline-offset:2px;}
.legal-sec a:hover{background:var(--primary)}
.legal-list{list-style:none; margin:1.1em 0 0; padding:0; display:grid; gap:1em}
.legal-list li{display:flex; gap:.75em; align-items:flex-start; color:var(--muted); font-size:1.02rem; line-height:1.6;}
.legal-list li .dash{flex:0 0 auto; font-family:var(--disp); font-weight:800; color:inherit; line-height:1.4;}
.legal-list li strong{color:var(--ink); font-weight:700}
.legal-contact{margin-top:clamp(34px,5vw,52px)}
.legal-contact h2{font-family:var(--disp); font-weight:800; letter-spacing:-.02em; font-size:clamp(1.35rem,3.4vw,1.85rem); line-height:1.08; margin:0 0 .5em;}
.legal-contact p{margin:0; color:var(--muted); font-size:1.02rem; line-height:1.62}
.legal-contact a{color:var(--ink); font-weight:700; text-decoration:underline; text-decoration-color:var(--primary); text-decoration-thickness:2px; text-underline-offset:2px;}
.legal-contact a:hover{background:var(--primary)}

/* Support task */
.support-wrap{padding-top:0; border-top:0}
.sup-field{display:grid; gap:.4em}
.sup-cond{display:grid; gap:20px}
.sup-cond[hidden]{display:none}
.chips{display:flex; flex-wrap:wrap; gap:.5em}
.chip{position:relative}
.chip input{position:absolute; opacity:0; width:1px; height:1px}
.chip span{display:inline-block; padding:.42em .8em; border:2px solid var(--ink); background:var(--paper); font-family:var(--body); font-weight:600; font-size:.92rem; cursor:pointer; user-select:none;}
.chip input:checked + span{background:var(--ink); color:var(--paper)}
.chip input:focus-visible + span{outline:3px solid var(--primary); outline-offset:1px}
.sup-note{font-size:.92rem; color:var(--muted); margin:.2em 0 0}
.sup-fallback{margin-top:1.6em; font-size:.98rem; color:var(--muted)}
.sup-fallback a{color:var(--ink); font-weight:700; border-bottom:2px solid var(--primary)}
.sup-done[hidden]{display:none}
.sup-done{max-width:640px; background:var(--panel)}
.sup-done p{color:var(--ink); margin:.4em 0 0}

/* Empty state */
.nf{min-height:56vh; display:flex; align-items:center; padding:clamp(48px,10vw,110px) 0}

/* App reference mocks (not website primitives) */
.cards-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(min(320px,100%),1fr)); gap:22px}
.cardspec{border:var(--edge) solid var(--ink); background:var(--paper); box-shadow:5px 5px 0 var(--ink); display:flex; flex-direction:column; min-width:0}
.cardspec > .head{padding:14px 16px 12px; border-bottom:var(--edge) solid var(--ink); background:var(--panel)}
.cardspec .mode{font-family:var(--disp); font-weight:700; font-size:1.05rem; line-height:1.15}
.cardspec .enumcase{font-family:var(--mono); font-size:.7rem; color:var(--faint); margin-top:3px; word-break:break-word}
.cardspec > .stage{padding:20px 16px; display:flex; justify-content:center; background: repeating-linear-gradient(45deg,transparent,transparent 7px,rgba(28,25,23,.035) 7px,rgba(28,25,23,.035) 8px)}
.cardspec > .notes{padding:13px 16px 16px; border-top:1px solid rgba(28,25,23,.14); font-size:.84rem; color:var(--muted); line-height:1.45}
.cardspec > .notes p{margin:0 0 .5em}
.cardspec > .notes p:last-child{margin:0}
.cardspec > .notes b{color:var(--ink); font-weight:600}
.cardspec .when{font-family:var(--mono); font-size:.72rem; color:var(--ink); background:var(--panel); border:1px solid rgba(28,25,23,.18); padding:6px 8px; display:block; margin:0 0 .7em; line-height:1.5; word-break:break-word}
.cf{width:100%; max-width:270px; background:#fff; border:2px solid var(--ink); box-shadow:4px 4px 0 var(--ink); padding:16px 14px; display:flex; flex-direction:column; align-items:center; gap:9px; text-align:center}
.cf .cap{font-family:var(--mono); font-size:.6rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted)}
.cf .cf-target{font-family:Georgia,"Times New Roman",serif; font-weight:600; font-size:1.5rem; line-height:1.22; color:var(--ink)}
.cf .cf-target--sm{font-size:1.22rem}
.cf .sub{font-size:.82rem; color:var(--muted); line-height:1.35}
.cf .gloss{font-size:.95rem; color:var(--muted)}
.cf .prompt{font-size:.7rem; color:var(--muted); margin-top:2px}
.cf .chipline{display:flex; align-items:center; justify-content:center; gap:8px; flex-wrap:wrap}
.cf .lemma{font-family:Georgia,"Times New Roman",serif; font-size:1rem; color:var(--ink); background:#F0EDE8; border:1px solid rgba(28,25,23,.2); border-radius:6px; padding:3px 9px}
.cf .cue{font-size:.82rem; color:var(--muted)}
.cf .opts{display:grid; grid-template-columns:1fr 1fr; gap:7px; width:100%; margin-top:2px}
.cf .opt{border:1px solid rgba(28,25,23,.22); border-radius:9px; padding:8px 4px; font-size:.85rem}
.cf .tiles{display:flex; flex-wrap:wrap; gap:6px; justify-content:center}
.cf .tile{border:1px solid rgba(28,25,23,.22); border-radius:8px; padding:5px 9px; font-size:.82rem; background:#fff}
.cf .slot{border:1px dashed rgba(28,25,23,.3); border-radius:8px; padding:9px; width:100%; min-height:34px}
.cf .field{border:1px solid rgba(28,25,23,.18); border-radius:10px; padding:8px 10px; width:100%; font-size:.85rem; color:var(--muted); text-align:left}
.cf .go{background:var(--primary); color:var(--ink); border-radius:11px; padding:8px; width:100%; font-weight:600; font-size:.85rem}
.cf .lc{font-family:var(--mono); font-size:1rem; letter-spacing:.28em; color:var(--ink)}
.cf .spk{font-size:1.5rem}
.cf .moss{color:var(--correct)}
.cf .drillcap{background:var(--primary); color:var(--ink); font-family:var(--mono); font-size:.6rem; letter-spacing:.1em; text-transform:uppercase; padding:4px 9px; border-radius:6px; font-weight:700}
.axis-tbl{width:100%; min-width:520px; border-collapse:collapse; background:var(--paper)}
.axis-tbl th, .axis-tbl td{text-align:left; padding:11px 13px; border-bottom:1px solid rgba(28,25,23,.12); vertical-align:top}
.axis-tbl thead th{font-family:var(--mono); font-size:.68rem; text-transform:uppercase; letter-spacing:.08em; color:var(--faint); border-bottom:2px solid var(--ink); white-space:nowrap}
.axis-tbl tr:last-child td{border-bottom:0}
.axis-tbl td.k{font-family:var(--mono); font-size:.78rem; white-space:nowrap}
.axis-tbl .no{color:var(--incorrect); font-weight:700}
.riso-mis{color:var(--ink); text-shadow: 0.045em 0.045em 0 rgba(255,45,139,.55), -0.03em -0.03em 0 rgba(28,25,23,.16);}

/* Phrase demo layout; the pitch uses .page-title and .lead. */
.switcher{margin:24px 0 0}
.chat-caption{margin:0 0 12px; font-size:.85rem; color:var(--paper)}
.convo-grid > *{min-width:0}
.disclosure{margin-top:28px}
.p-lead{margin-bottom:24px}
.p-card .page-title{font-size:var(--heading-size)}
.p-note{margin-bottom:24px}
.p-lang-change{color:var(--ink); text-decoration:underline; text-decoration-color:var(--primary)}
.sup-done h2{font:700 var(--card-title-size)/1.15 var(--disp)}
.lc-region{font:600 .9rem var(--body); color:var(--muted)}
.lang-card--roadmap{background:var(--panel); text-decoration:none; color:var(--ink)}
.feedback-correct{color:var(--success)}
.feedback-almost{color:var(--almost)}
.feedback-incorrect{color:var(--error)}
.section-dark .feedback-almost{color:var(--almost-dark)}

/* Guide scaffolding only. Specimens above use production component classes. */
code{font: .85em var(--mono); overflow-wrap:anywhere}
.sg-index{display:flex; flex-wrap:wrap; gap:12px 24px; margin-top:28px}
.sg-index a{font-weight:700; text-decoration-color:var(--primary)}
.sg-swatches{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:16px}
.sg-swatch{display:flex; flex-direction:column; gap:6px; font-size:.85rem}
.sg-ink{height:88px; border:var(--edge) solid var(--ink)}
.sg-ink--paper{background:var(--paper)}
.sg-ink--panel{background:var(--panel)}
.sg-ink--ink{background:var(--ink)}
.sg-ink--muted{background:var(--muted)}
.sg-ink--primary{background:var(--primary)}
.sg-caption{font-size:.9rem; color:var(--text-muted); max-width:70ch; margin:20px 0}
.sg-outcomes{display:flex; flex-wrap:wrap; gap:16px 28px; margin-top:24px; font-weight:700}
.sg-type{display:grid; gap:30px; margin:40px 0}
.sg-type code{display:block; color:var(--muted); margin-bottom:12px}
.sg-rules{max-width:72ch; padding-left:1.2em; margin:0; display:grid; gap:16px}
.sg-demo{display:flex; flex-wrap:wrap; align-items:center; gap:24px}
.sg-buttons{display:grid; gap:36px}
.sg-form{display:grid; gap:20px}
.sg-space{margin-top:32px}
.sg-reference{margin-top:28px}
.sg-reference summary{cursor:pointer; font-weight:700; text-decoration:underline; text-decoration-color:var(--primary); padding:12px 0}
.sg-reference[open] summary{margin-bottom:24px}
.sg-subhead{font:700 var(--card-title-size)/1.15 var(--disp); margin:32px 0 20px}
.sg-rows,.cards-grid,.pal-wrap{margin-bottom:28px}
.pal-wrap{overflow-x:auto; border:var(--edge) solid var(--ink)}
.sg-label{margin:0}
.sg-reference .note h3{margin-top:0}
.sg-reference .note p{color:var(--muted)}

/* Responsive rules are component-wide, never copies inside individual pages. */
@media(max-width:1100px){
  .nav{flex-wrap:wrap; gap:12px; padding:14px 0; min-height:72px}
  .nav-right{margin-left:auto}
  .nav-links{order:3; width:100%; flex-wrap:wrap; padding:12px 0 0}
  .has-js .nav-links{
    display:none; position:absolute; left:0; right:0; top:100%;
    flex-direction:column; align-items:stretch; gap:0; padding:8px var(--wrap-pad) 20px;
    background:var(--paper); border-bottom:var(--edge) solid var(--ink);
    max-height:calc(100dvh - 72px); overflow-y:auto;
  }
  .has-js .nav-links.open{display:flex}
  .has-js .menu-btn{display:inline-block}
  .nav-links a:not(.btn){padding:10px 0; width:100%}
  .nav-cta-desktop{display:none}
  .nav-cta-mobile{display:block; padding-top:14px}
}
@media(max-width:860px){.convo-grid{grid-template-columns:minmax(0,1fr)}}
@media(max-width:760px){
  .grid-2,.stamps{grid-template-columns:minmax(0,1fr)}
  .sg-swatches{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:560px){
  .row2,.ledger li{grid-template-columns:minmax(0,1fr)}
  .ledger li{gap:8px}
  .sg-swatches{grid-template-columns:repeat(2,minmax(0,1fr))}
  .p-answers .btn{font-size:.95rem; padding:.8em .5em}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important; transition:none !important; scroll-behavior:auto !important}
  .btn:hover:not(:disabled),.btn:active:not(:disabled),.lang:hover{transform:none}
}