/* ColorHub — "Museum editorial" art direction (chosen by David, 2026-10-07).
   References: Aesop, Tate, Kinfolk (warm black, huge serif, hairline rules instead of boxes, tiny mono captions).
   Rules: no card boxes; group with whitespace and hairlines. Color appears as near-square plates.
   One radius scale (0 / 2-3px / 6px), one spacing scale (4·8·12·16·22·32·48), one gutter (22px).
   The ground stays a neutral-warm dark so swatches read true. Decisions and sources: DESIGN.md. */
:root{
  /* ---------- DESIGN-SYSTEM.md §3: color tokens (reading surfaces, warm black) ---------- */
  --ground:#0E0D0B; --surface-1:#17160F; --surface-2:#1F1D18; --surface-3:#2A2822;
  --lift:var(--surface-1); --lift-2:var(--surface-2);   /* pre-existing names, aliased so nothing else has to change */
  /* --faint lifted 2026-10-09 (legibility pass): #837E73 cleared 4.5:1 on --ground but dropped to 4.17 on
     --surface-2 and 3.65 on --surface-3 -- real card/sheet backgrounds this token is used on constantly (190
     call sites) for 13-15px captions and meta text. #928E83 clears 4.5:1 even on --surface-3, the lightest. */
  --ink:#ECE8DF; --soft:#A39E92; --faint:#928E83;   /* 15.9 · 7.3 · 4.5(on surface-3, worst case) : 1 */
  --rule:rgba(236,232,223,.12); --rule-strong:rgba(236,232,223,.8); --rule-2:var(--rule-strong);
  --paper:#EFEBE3; --paper-ink:#141311; --paper-soft:#5E5A51; --paper-line:#DCD7CC;   /* paper-soft 5.8:1 */
  --good:#9AD4AE; --bad:#F09A86; --scrim:rgba(0,0,0,.55);
  /* the viewing booth (set by css/booth.css on judged screens): kept here too so any screen can read the plain tokens */
  --booth:#5F5F5F; --booth-2:#555555; --b-ink:#FFFFFF; --b-soft:#E4E4E1; --b-faint:#C9C9C5;
  --b-rule:rgba(255,255,255,.22); --b-track:rgba(0,0,0,.22);
  --serif:"Instrument Serif",ui-serif,Georgia,serif;
  --sans:"Geist",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"Geist Mono",ui-monospace,Menlo,Consolas,monospace;
  --ease:cubic-bezier(.2,.8,.2,1); --spring:cubic-bezier(.3,1.35,.5,1);
  /* ---------- §8: motion durations (the signature grow/shrink, js/core.js growFrom/shrinkTo) ---------- */
  --dur-0:120ms; --dur-1:200ms; --dur-2:300ms; --grow:420ms; --shrink:340ms; --dur-4:700ms;
  --ease-grow:cubic-bezier(.32,.72,0,1); --ease-shrink:cubic-bezier(.4,0,.2,1);
  /* ---------- §5: spacing scale, gutter (20px, 16 below 375, 24 at 430+), safe areas ---------- */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:22px; --s6:32px; --s7:48px;
  --g:20px; --top:env(safe-area-inset-top,0px); --bottom:env(safe-area-inset-bottom,0px);
  /* landscape lane (2026-10-09): the notch sits on the long edge in landscape, left or right depending on which
     way the phone is rotated. Nothing read these before -- every side-pinned surface (corners, sheets, the map's
     bars) now has a real value to add in, instead of the 0px every portrait screen quietly assumed. */
  --left:env(safe-area-inset-left,0px); --right:env(safe-area-inset-right,0px);
  /* space a scrolling room reserves at the foot so content clears the floating Rooms corner (56px + 24px gap) */
  --tabh:calc(var(--bottom) + 56px + 24px);
  /* ---------- §6: radii — 0 / 4 / 14 / 24 / pill. Old values (1,2,3,6,8,10,12,18,20,22,30) are retired below. ---------- */
  --r-0:0; --r-1:4px; --r-2:14px; --r-3:24px; --r-pill:999px;
  color-scheme:dark;
}
@media (max-width:374px){ :root{ --g:16px } }
@media (min-width:430px){ :root{ --g:24px } }
*{box-sizing:border-box}
/* David, 2026-10-09: the black bar "still comes back sometimes" -- intermittent, so re-measuring a gap live is
   fragile by nature. Size to the LARGE viewport (100lvh, which iOS never shrinks for its own chrome, unlike
   100dvh) instead, layered as a second declaration after the safe 100% (an engine that doesn't know lvh drops
   the whole second line and keeps 100%). Real HUD numbers off David's iPhone showed the layout viewport running
   62px short of the true screen on a build before this fix, with whether 100lvh itself resolves correctly there
   still unverified -- so --app-full (js/core.js vbFix, screen.height itself, standalone+iOS only, no live
   shortfall measurement any more) stays as a belt-and-suspenders floor: max() picks whichever is larger. */
html,body{margin:0;height:100%;background:var(--ground)}
html,body{height:max(100lvh,var(--app-full,0px))}
/* Touch rules (David): pages scroll only up and down, never sideways; no pinch-zoom on pages (a touch-action without
   pinch-zoom disables it; the honeycomb, wheels and sorting tiles handle their own gestures with touch-action:none);
   horizontal rails scroll only sideways; and no text selection or long-press callouts, except where you type. */
html{touch-action:pan-x pan-y;overflow-x:hidden}
/* clip, not hidden: overflow-x:hidden on <body> made body its own scroll container (html is hidden too), so window.scrollY
   stayed 0, window scroll listeners never fired and scroll restore/lock did nothing. clip clips without scrolling. */
body{overflow-x:hidden;overflow-x:clip;max-width:100vw;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
input,textarea,select,[contenteditable="true"]{-webkit-user-select:text;user-select:text;-webkit-touch-callout:default}
img{-webkit-user-drag:none;-webkit-touch-callout:none}
body{color:var(--ink);font:16px/1.5 var(--sans);-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%;overscroll-behavior:none}
/* film grain over everything */
/* viewing booth: no grain over test swatches (the drills measure differences near 1 ΔE) */
html.booth body::after{display:none}
body::after{content:"";position:fixed;inset:0;z-index:40;pointer-events:none;opacity:.075;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation;text-align:inherit}
button:focus-visible,a:focus-visible{outline:1px solid var(--ink);outline-offset:4px}
h1,h2,h3,p{margin:0}
a{color:inherit}
.serif{font-family:var(--serif);font-weight:400;letter-spacing:-.01em}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
/* ---------- DESIGN-SYSTEM.md §4: the type scale. The serif carries the hierarchy; mono is only for numbers
   and codes, never uppercase. These replace every old caps-mono "eyebrow" label app-wide. ---------- */
.hero{font:400 96px/.86 var(--serif);letter-spacing:-.04em}
.display{font:400 clamp(56px,16vw,76px)/.86 var(--serif);letter-spacing:-.04em}
.title-1{font:400 44px/.95 var(--serif);letter-spacing:-.03em}
.title-2{font:400 30px/1.02 var(--serif);letter-spacing:-.02em}
.title-3{font:400 22px/1.12 var(--serif);letter-spacing:-.01em}
.title-1 em,.title-2 em,.display em,.hero em{font-style:italic}
.note{font:italic 400 17px/1.3 var(--serif);letter-spacing:0;color:var(--soft)}
.small{font:400 14px/1.5 var(--sans);color:var(--soft)}
.code{font:400 13px/1 var(--mono);letter-spacing:.02em;font-variant-numeric:tabular-nums;text-transform:none}
/* .eyebrow/.cap used to be a tracked uppercase mono label everywhere; now every screen that sets one picks up
   a plain italic note instead (DESIGN-SYSTEM §1.6: "the serif speaks; mono only counts") without any JS edits. */
.eyebrow,.cap{font:italic 400 17px/1.3 var(--serif);letter-spacing:0;text-transform:none;color:var(--soft)}
.fine{color:var(--soft);font:400 13px/1.5 var(--sans);letter-spacing:0;text-transform:none;margin-top:18px;text-wrap:pretty}
.muted{color:var(--soft)}
#app{min-height:100dvh;position:relative;z-index:1}
#app{min-height:max(100lvh,var(--app-full,0px))}

/* ---------- screens ---------- */
.screen{min-height:100dvh;max-width:540px;margin:0 auto;display:flex;flex-direction:column;padding:calc(var(--top) + 12px) var(--g) calc(var(--bottom) + 22px);animation:enter .5s var(--ease) both}
@keyframes enter{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes fade{from{opacity:0}}
.fixed{height:100dvh;min-height:0;overflow:hidden}
.home,.meet,.has-tabs,.hm{animation-name:fade}
/* .hm (the honeycomb/Map, ROADMAP §12 -- "home" in intent, "hm" in markup): the default .screen entrance
   ("enter") animates via transform, which per spec gives the animating element a new containing block for the
   whole 500ms it runs -- long enough to outlast a 300ms settle, and the exact family of bug this file's own
   history already fought (a position:fixed corner pinned to the WRONG box). The plain opacity-only "fade" (like
   .home/.meet/.has-tabs already get) never creates one, so the map's own corners (position:fixed, inside
   .screen) stay fixed to the real viewport through the whole entrance, not just after it settles. David,
   2026-10-10 (via the coordinator): a short landscape height (956x440) could catch ".corner.l" a couple of px
   past the bottom edge mid-animation -- this is the root-cause fix; js/core.js clampCorners() is the backstop. */
.has-tabs{padding-bottom:calc(var(--tabh) + 12px)}

/* ---------- buttons (DESIGN-SYSTEM.md §10). One paper-filled primary per screen: .btn is now that pill, so
   every screen that already had a single ruled "Begin"/"Continue" CTA picks it up with no JS edits.
   .btn.ghost and .link become the italic serif "Text" tertiary; .qrow is the new quiet settings-row look. ---------- */
.btn{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:58px;padding:0 22px 0 26px;border:0;border-radius:var(--r-pill);
  background:var(--paper);color:var(--paper-ink);font:400 27px/1 var(--serif);letter-spacing:-.015em;transition:transform .2s var(--spring),opacity .2s}
.btn svg{width:20px;height:20px}
.btn:active{opacity:.85;transform:scale(.98)}
.btn small{font:italic 400 17px/1 var(--serif);letter-spacing:0;text-transform:none;color:var(--paper-soft);margin-left:10px;margin-right:auto}
.btn.ghost{min-height:44px;background:none;border:0;padding:10px 2px;font:italic 400 17px/1 var(--serif);letter-spacing:0;text-transform:none;color:var(--soft);justify-content:flex-start;gap:8px;text-decoration:underline;text-decoration-color:rgba(236,232,223,.3);text-underline-offset:4px;border-radius:0}
.btn.ghost svg{width:16px;height:16px}
.icon-btn{width:44px;height:44px;display:grid;place-items:center;color:var(--soft);transition:color .2s,transform .3s var(--spring)}
.icon-btn:active{color:var(--ink);transform:scale(.9)}
/* the "Floating icon" / solid header-icon component (DESIGN-SYSTEM §10): a level-2 circle, 44px, over a sheet or hero */
.iconq{width:44px;height:44px;flex:none;display:grid;place-items:center;color:var(--ink);border-radius:50%;background:var(--surface-2)}
.iconq svg{width:20px;height:20px}
/* Controls are solid (DESIGN-SYSTEM §1.2): no glass or blur over color, ever. */
.glass,.glass-pill{background:var(--surface-2);color:var(--ink);border:1px solid rgba(236,232,223,.14)}
.glass{border-radius:50%}
.glass-pill{display:flex;align-items:center;gap:8px;height:38px;border-radius:var(--r-pill);padding:0 14px 0 11px;font:italic 400 17px/1 var(--serif);letter-spacing:0;text-transform:none}
.glass-pill svg{width:16px;height:16px}
.stack{display:flex;flex-direction:column;gap:10px}
.stack .btn+.btn{border-top:0}
.row2{display:flex;gap:16px}.row2>*{flex:1}
.link{font:italic 400 17px/1 var(--serif);letter-spacing:0;text-transform:none;color:var(--soft);text-decoration:underline;text-decoration-color:rgba(236,232,223,.3);text-underline-offset:4px;padding:10px 0}
/* the quiet settings/list row: no fill, serif label, current value as a trailing note, a hairline above */
.qrow{display:flex;align-items:center;gap:12px;width:100%;min-height:60px;border-top:1px solid var(--rule);font:400 22px/1 var(--serif);color:var(--ink);text-align:left}
.qrow .note{margin-left:auto}
.qrow svg{width:16px;height:16px;color:var(--faint)}

/* ---------- header: the room name, no mono caps ---------- */
.bar{display:flex;align-items:center;justify-content:space-between;min-height:40px;padding-bottom:12px;border-bottom:1px solid var(--rule);margin-bottom:4px}
.brand{display:flex;align-items:center;gap:10px;font:400 18px/1 var(--serif);letter-spacing:0;text-transform:none;color:var(--ink)}
.brand svg{display:block;width:20px;height:20px}
.bar .icon-btn{margin-right:-12px}
.tab-title{font:400 68px/.88 var(--serif);letter-spacing:-.035em;transform-origin:0 70%;transition:transform .45s var(--ease)}
.tab-title em{font-style:italic;color:#CFC9BC}
.tab-sub{color:var(--soft);font-size:15px;margin:12px 0 0;max-width:36ch;text-wrap:pretty}
/* the Room header (DESIGN-SYSTEM §11 "Room"): the name in title-1 on the left, a note or one icon on the right */
.room-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;min-height:44px}
.room-head .title-1{margin:0}
.sec-head{display:flex;justify-content:space-between;align-items:baseline;margin:40px 0 0;padding-bottom:10px;border-bottom:1px solid var(--rule)}
.sec-head b{font:400 22px/1.12 var(--serif);letter-spacing:-.01em;color:var(--ink)}
.sec-head span{font:italic 400 17px/1.3 var(--serif);letter-spacing:0;color:var(--soft)}

/* ---------- the bottom tab bar is retired (DESIGN-SYSTEM §2: no tab bar anywhere). Rule kept only so an old
   cached screenshot or a stray reference doesn't render as transparent nothing; nothing calls tabbar() anymore. ---------- */
.badge{display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--bad);margin-left:2px;vertical-align:2px}

/* ---------- welcome ---------- */
.welcome .wall{flex:1;min-height:280px;display:flex;gap:2px;margin:18px calc(-1 * var(--g)) 0}
.wall .strip{flex:1;display:flex;flex-direction:column;gap:2px;animation:strip 1s var(--ease) both;animation-delay:calc(var(--k) * 60ms)}
.wall .strip i{flex:1;background:var(--c);min-height:6px}
@keyframes strip{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:none}}
.welcome .copy{padding:28px 0 26px}
.welcome h1{font:400 58px/.9 var(--serif);letter-spacing:-.035em;text-wrap:balance}
.welcome h1 em{font-style:italic;color:#CFC9BC}
.welcome p{color:var(--soft);font-size:15px;margin-top:16px;max-width:34ch;text-wrap:pretty}

/* ---------- how it works ---------- */
.how h1{font:400 52px/.92 var(--serif);letter-spacing:-.03em;margin:26px 0 10px;text-wrap:balance}
.how .sub{color:var(--soft)}
.how .steps{display:flex;flex-direction:column;margin:28px 0 auto;counter-reset:st}
.step{display:grid;grid-template-columns:28px 76px 1fr;gap:14px;align-items:center;padding:14px 0;border-top:1px solid var(--rule);counter-increment:st}
.step::before{content:"0" counter(st);font:500 13px/1 var(--mono);letter-spacing:.1em;color:var(--faint)}
.step .demo{height:96px;position:relative;overflow:hidden;background:var(--c);border-radius:var(--r-1)}
.step b{display:block;font:400 22px/1.05 var(--serif)}
.step span{color:var(--soft);font-size:13.5px}
.demo .mini-label{position:absolute;left:0;right:0;bottom:0;height:36%;background:var(--paper);display:flex;align-items:center;padding:0 8px;font:400 16px/1 var(--serif);color:var(--paper-ink)}
.demo.swipe{animation:demo-swipe 2.4s var(--ease) infinite;transform-origin:50% 120%}
@keyframes demo-swipe{0%,30%{transform:none}55%,70%{transform:translateX(60px) rotate(14deg);opacity:0}71%{transform:none;opacity:0}100%{opacity:1}}
.demo .tap{position:absolute;left:50%;top:38%;width:24px;height:24px;margin:-12px;border-radius:50%;background:rgba(255,255,255,.8);animation:tap 2.4s ease-out infinite}
@keyframes tap{0%,20%{transform:scale(.4);opacity:0}30%{transform:scale(1);opacity:.9}60%,100%{transform:scale(1.8);opacity:0}}

/* ---------- the deck (swipe cards) ---------- */
.deck-top{display:flex;align-items:center;gap:14px;min-height:48px}
.deck-top .icon-btn{margin-left:-12px}
.segs{flex:1;display:flex;gap:2px;height:2px}
.segs i{flex:1;background:var(--rule);position:relative;overflow:hidden}
.segs i::after{content:"";position:absolute;inset:0;background:var(--c);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.segs i.on::after{transform:none}
.timer{flex:1;height:2px;background:var(--rule);overflow:hidden}
.timer i{display:block;height:100%;width:100%;background:var(--ink);transform-origin:left;animation:drain var(--dur,60s) linear both}
@keyframes drain{to{transform:scaleX(0)}}
.left{min-width:28px;text-align:right;font:500 13px/1 var(--mono);letter-spacing:.08em;color:var(--soft)}
.stage{flex:1;position:relative;margin:12px 0 0}
.card{position:absolute;inset:0;border-radius:var(--r-2);overflow:hidden;background:var(--paper);touch-action:none;user-select:none;-webkit-user-select:none;
  box-shadow:0 40px 70px -34px rgba(0,0,0,.95);transition:transform .45s var(--spring),opacity .3s;will-change:transform;--yes:0;--no:0}
.card.next{transform:translateY(22px) scale(.95);opacity:.5;pointer-events:none;transition:transform .45s var(--ease),opacity .45s}
.card .fill{position:absolute;inset:0;background:var(--c)}
.card.rev .fill{clip-path:circle(0px at var(--x,50%) var(--y,50%));transition:clip-path .65s cubic-bezier(.25,.7,.2,1)}
.card.rev.revealed .fill{clip-path:circle(160% at var(--x,50%) var(--y,50%))}
.card .prompt{position:absolute;inset:0;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;gap:12px;padding:26px;color:var(--paper-ink);transition:opacity .25s}
.card .prompt .eyebrow{color:var(--paper-soft)}
.card .prompt b{font:400 clamp(50px,15vw,72px)/.92 var(--serif);letter-spacing:-.03em;text-wrap:balance}
.card.revealed .prompt{opacity:0}
.label{position:absolute;left:0;right:0;bottom:0;background:var(--paper);color:var(--paper-ink);padding:16px 20px 20px;transform:translateY(101%);transition:transform .45s var(--ease)}
.card.revealed .label{transform:none}
.card.rev .label{transition-delay:.18s}
.label .meta{display:flex;justify-content:space-between;align-items:baseline;font:italic 400 17px/1.2 var(--serif);letter-spacing:0;text-transform:none;color:var(--paper-soft)}
.label h2{font:400 clamp(46px,13vw,60px)/.95 var(--serif);letter-spacing:-.03em;margin:10px 0 0;text-wrap:balance}
.label .vs{display:flex;gap:12px;align-items:flex-start;margin-top:12px;padding-top:12px;border-top:1px solid var(--paper-line)}
.pair{display:flex;flex:none;margin-top:3px}
.pair i{width:16px;height:26px;background:var(--c)}
.label .vs p{font-size:14px;line-height:1.4;color:#3A3832;text-wrap:pretty}
.stamp{position:absolute;top:24px;padding:7px 11px 6px;background:var(--paper);color:var(--paper-ink);font:italic 400 17px/1.2 var(--serif);letter-spacing:0;text-transform:none;display:flex;gap:7px;align-items:center;pointer-events:none;box-shadow:0 6px 20px -8px rgba(0,0,0,.5)}
.stamp.yes{left:20px;transform:rotate(-8deg);opacity:var(--yes)}
.stamp.no{right:20px;transform:rotate(8deg);opacity:var(--no)}
.stamp svg{width:11px;height:11px}
.deck-foot{height:104px;display:flex;align-items:center;justify-content:center;gap:40px;padding-top:6px}
.act-wrap{display:flex;flex-direction:column;align-items:center;gap:8px;font:italic 400 17px/1.2 var(--serif);letter-spacing:0;text-transform:none;color:var(--soft)}
.act{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--rule-2);transition:transform .3s var(--spring),background .2s;animation:pop .35s var(--spring) both}
.act svg{width:24px;height:24px}
.act:active{transform:scale(.88);background:rgba(236,232,223,.08)}
.act.no{color:var(--bad)}.act.yes{color:var(--good)}
@keyframes pop{from{transform:scale(.6);opacity:0}to{transform:none;opacity:1}}
.check-btn{display:flex;align-items:center;gap:12px;height:52px;padding:0 4px;border-bottom:1px solid var(--rule-2);font:400 24px/1 var(--serif);animation:pop .3s var(--ease) both}
.check-btn .k{font:500 13px/1 var(--mono);letter-spacing:.1em;color:var(--faint);border:1px solid var(--rule);padding:4px 6px}
.toast{position:fixed;left:50%;bottom:calc(var(--bottom) + 120px);transform:translateX(-50%);background:var(--paper);color:var(--paper-ink);padding:10px 14px;font:italic 400 17px/1.2 var(--serif);letter-spacing:0;text-transform:none;z-index:30;animation:toast 2.2s var(--ease) both;white-space:nowrap}
@keyframes toast{0%{opacity:0;transform:translate(-50%,10px)}12%,80%{opacity:1;transform:translate(-50%,0)}100%{opacity:0}}

/* ---------- meet the unit (vertical pager) ---------- */
.meet{padding:0;max-width:none}
.meet-top{position:fixed;top:0;left:0;right:0;z-index:5;display:flex;align-items:center;justify-content:space-between;padding:calc(var(--top) + 10px) var(--g) 0;pointer-events:none;max-width:540px;margin:0 auto}
.meet-top>*{pointer-events:auto}
.meet-top .mono{font:italic 400 17px/1.2 var(--serif);letter-spacing:0;text-transform:none;color:var(--soft)}
.meet-top .icon-btn{margin-left:-12px;color:var(--ink)}
.pager{height:100dvh;overflow-y:auto;scroll-snap-type:y mandatory;overscroll-behavior:contain;scrollbar-width:none}
.pager::-webkit-scrollbar{display:none}
.page{height:100dvh;scroll-snap-align:start;scroll-snap-stop:always;display:flex;flex-direction:column;max-width:540px;margin:0 auto;padding:calc(var(--top) + 58px) var(--g) calc(var(--bottom) + 26px);position:relative}
.cover{justify-content:flex-end}
.cover h1{font:400 clamp(72px,22vw,104px)/.86 var(--serif);letter-spacing:-.04em;margin:14px 0 14px}
.cover p{color:var(--soft);font-size:15px;max-width:34ch}
.fan{position:relative;flex:1;min-height:200px;margin-bottom:30px}
.fan i{position:absolute;left:50%;bottom:0;width:62px;height:92%;margin-left:-31px;border-radius:var(--r-1);transform-origin:50% 95%;
  background:linear-gradient(var(--c) 0 82%,var(--paper) 82%);box-shadow:0 14px 30px -12px rgba(0,0,0,.9);
  transform:rotate(calc((var(--k) - var(--mid)) * var(--spread,10deg)));animation:fanIn 1.1s var(--ease) both;animation-delay:calc(var(--k) * 60ms + 120ms)}
@keyframes fanIn{from{transform:rotate(0deg) translateY(30px);opacity:0}}
.hint-up{display:flex;align-items:center;gap:8px;font:italic 400 17px/1.2 var(--serif);letter-spacing:0;text-transform:none;color:var(--soft);margin-top:28px}
.hint-up svg{width:14px;height:14px;animation:bob 1.6s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-5px)}}
.col .swatch{flex:1;min-height:0;background:var(--c);position:relative;padding:20px;display:flex;flex-direction:column;justify-content:flex-end;border-radius:var(--r-1)}
.col .swatch[data-ink="dark"]{color:#141311}.col .swatch[data-ink="light"]{color:#fff}
.col .swatch h2{font:400 clamp(58px,17vw,84px)/.9 var(--serif);letter-spacing:-.035em;text-wrap:balance}
.col .swatch .hex{font:500 13px/1 var(--mono);letter-spacing:.12em;opacity:.7;margin-top:12px}
.compare{display:flex;margin-top:14px;height:56px;gap:2px}
.compare div{flex:1;background:var(--c);display:flex;align-items:flex-end;padding:7px 9px;font:italic 400 17px/1.2 var(--serif);letter-spacing:0;text-transform:none;border-radius:var(--r-1)}
.compare div[data-ink="dark"]{color:rgba(20,19,17,.82)}.compare div[data-ink="light"]{color:rgba(255,255,255,.9)}
.compare div:first-child{flex:1.4}
.diff{font:400 24px/1.15 var(--serif);margin-top:16px;letter-spacing:-.01em;text-wrap:pretty}
.origin{font-size:14.5px;line-height:1.5;color:var(--soft);margin-top:10px;text-wrap:pretty}
.ready{justify-content:flex-end}
.ready h2{font:400 64px/.9 var(--serif);letter-spacing:-.035em;margin-bottom:12px}
.ready p{color:var(--soft);margin-bottom:26px;max-width:34ch}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:2px;margin:auto 0 30px}
.tiles i{aspect-ratio:3/4;background:var(--c)}

/* ---------- Learn home ---------- */
.home{justify-content:flex-start}
.home .kick{margin-top:28px}
.home h1{font:400 clamp(60px,18vw,80px)/.86 var(--serif);letter-spacing:-.04em;margin:12px 0 0;text-wrap:balance}
.home h1 em{font-style:italic;color:#CFC9BC}
.plates{display:flex;gap:2px;height:clamp(96px,15dvh,136px);margin-top:22px}
.plates i{flex:1;background:var(--c);transform-origin:50% 100%;animation:plate .9s var(--ease) both;animation-delay:calc(var(--k) * 45ms)}
@keyframes plate{from{transform:scaleY(.2);opacity:0}}
.meta-line{display:flex;justify-content:space-between;gap:10px;margin-top:10px;font:400 13px/1.4 var(--sans);letter-spacing:0;text-transform:none;color:var(--soft)}
.home .btn{margin-top:22px}
.collection{margin-top:auto;padding-top:30px}
.coll-head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:12px}
.coll-n{font:400 64px/.8 var(--serif);letter-spacing:-.035em}
.coll-n small{font-size:22px;color:var(--soft);letter-spacing:0}
.quilt{display:grid;grid-template-columns:repeat(15,1fr);gap:2px}
.quilt i{aspect-ratio:1;background:rgba(236,232,223,.07)}
.quilt i.o{background:var(--c);animation:qIn .6s var(--ease) both;animation-delay:calc(var(--k) * 18ms + 200ms)}
.quilt i.l{background:var(--c);opacity:.32}
@keyframes qIn{from{transform:scale(.4);opacity:0}}
.coll-foot{display:flex;justify-content:space-between;gap:16px;margin-top:10px;font:400 13px/1.4 var(--sans);letter-spacing:0;text-transform:none;color:var(--faint)}

/* ---------- results ---------- */
.result{justify-content:flex-end}
.result h1{font:400 clamp(56px,16vw,76px)/.88 var(--serif);letter-spacing:-.035em;margin:12px 0 14px;text-wrap:balance}
.result h1 em{font-style:italic;color:#CFC9BC}
.result .lede{color:var(--soft);font-size:15.5px;margin-bottom:26px;text-wrap:pretty;max-width:38ch}
.chips{display:grid;grid-template-columns:repeat(auto-fill,minmax(94px,1fr));gap:2px;margin:auto 0 28px;padding-top:10px}
.chip{background:var(--paper);color:var(--paper-ink)}
.chip i{display:block;height:76px;background:var(--c);position:relative}
.chip>span{display:block;padding:7px 8px 9px;font:400 17px/1.05 var(--serif)}
.chip.miss{opacity:.45}
.chip .mark{position:absolute;top:6px;right:6px;width:18px;height:18px;border-radius:50%;background:var(--paper);display:grid;place-items:center}
.chip .mark svg{width:10px;height:10px}
.chip .mark.y{color:#2E8A55}.chip .mark.n{color:#B5452E}
.chips.compact{grid-template-columns:repeat(5,1fr)}
.chips.compact .chip i{height:40px}
.chips.compact .chip>span{font-size:13px;padding:5px 5px 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chips.compact .mark{width:15px;height:15px;top:3px;right:3px}
.stat-row{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--rule);margin-bottom:22px}
.stat{padding:16px 0 4px}
.stat+.stat{border-left:1px solid var(--rule);padding-left:16px}
.stat b{display:block;font:400 52px/.9 var(--serif);letter-spacing:-.03em}
.stat span{font:italic 400 17px/1.4 var(--serif);letter-spacing:0;text-transform:none;color:var(--soft)}
.res-list{border-top:1px solid var(--rule);margin:6px 0 22px}
.res{display:grid;grid-template-columns:1fr auto auto;align-items:baseline;gap:12px;padding:14px 0;border-bottom:1px solid var(--rule)}
.res span{font:400 22px/1 var(--serif)}
.res b{font:500 13px/1 var(--mono);letter-spacing:.04em}.res small{color:var(--faint);font-size:13px}
.res em{font:italic 400 17px/1.2 var(--serif);letter-spacing:0;text-transform:none;color:#E8C66B;font-style:normal}

/* ---------- sheets ---------- */
.scrim{position:fixed;inset:0;background:var(--scrim);z-index:20;animation:fade .25s both}
.scrim{touch-action:none}
.sheet{touch-action:pan-y;overscroll-behavior:contain}
.sheet .grab{position:relative;touch-action:none;cursor:grab}
.sheet .grab::before{content:"";position:absolute;inset:-16px -80px}   /* a big invisible handle */
html.sheet-open body{position:fixed;left:0;right:0;overflow:hidden}
/* DESIGN-SYSTEM §10 "Bottom sheet": surface-1, r-3 top corners, a 36×4 grabber 8px from the top */
.sheet{position:fixed;left:0;right:0;bottom:0;z-index:21;max-width:540px;margin:0 auto;background:var(--surface-1);padding:12px var(--g) calc(var(--bottom) + 20px);animation:sheetIn .4s var(--ease) both;max-height:88dvh;overflow:auto;border-top:1px solid var(--rule);border-radius:var(--r-3) var(--r-3) 0 0;box-shadow:0 -16px 48px rgba(0,0,0,.45)}
@keyframes sheetIn{from{transform:translateY(100%)}}
.sheet .grab{width:36px;height:4px;border-radius:var(--r-1);background:rgba(236,232,223,.28);margin:0 auto 18px}
.sheet h3{font:400 40px/.95 var(--serif);letter-spacing:-.025em;margin:4px 0 14px}
.sheet p{color:var(--soft);font-size:15px;margin:0 0 12px;text-wrap:pretty}
/* the list row (DESIGN-SYSTEM §10): a trailing code/chevron, hairline separators, no boxes */
.sheet .item{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:58px;border-bottom:1px solid var(--rule);font:400 22px/1 var(--serif)}
.sheet .item.danger{color:var(--bad)}
.sheet .item svg{color:var(--faint);width:16px}

/* ---------- Gym ---------- */
.gym .kick{margin-top:28px}
.eye-table{border-top:1px solid var(--rule)}
.skill{display:grid;grid-template-columns:1fr auto 74px;align-items:center;gap:14px;width:100%;padding:14px 0;border-bottom:1px solid var(--rule);text-align:left}
.skill .nm{display:flex;flex-direction:column;gap:5px}
.skill .nm b{font:400 24px/1 var(--serif)}
.skill .nm span{font:italic 400 17px/1.2 var(--serif);letter-spacing:0;text-transform:none;color:var(--faint)}
.skill .val{font:400 40px/.9 var(--serif);letter-spacing:-.03em;text-align:right}
.skill .val small{display:block;font:italic 400 17px/1.2 var(--serif);letter-spacing:0;color:var(--faint);text-transform:none;margin-top:4px}
.skill .spark{color:var(--soft);justify-self:end}
.play-row{display:grid;grid-template-columns:1fr auto;align-items:center;width:100%;padding:16px 0;border-bottom:1px solid var(--rule);text-align:left}
.play-row svg{display:none}
.play-row b{display:block;font:400 26px/1 var(--serif)}
.play-row span{display:block;color:var(--soft);font-size:13.5px;margin-top:6px}
.play-row em{font:italic 400 17px/1.2 var(--serif);letter-spacing:0;text-transform:none;color:var(--faint);font-style:normal}
.drill-head{padding:14px 0 0}
.drill-head h2{font:400 44px/.95 var(--serif);letter-spacing:-.03em;margin-top:10px;min-height:46px}
.drill-stage{flex:1;display:flex;align-items:center;justify-content:center;min-height:0;padding:16px 0}
.drill-foot{min-height:80px;display:flex;align-items:center;justify-content:center;text-align:center}
.drill-foot .btn{width:100%}
.note{color:var(--soft);font-size:14px}.note b{color:var(--ink);font-family:var(--mono);font-weight:500}
.grid{display:grid;grid-template-columns:repeat(var(--n),1fr);gap:4px;width:min(100%,58dvh)}
.tile{aspect-ratio:1;background:var(--c);border-radius:var(--r-1);transition:transform .3s var(--spring)}
.tile:active{transform:scale(.93)}
.tile.ring,.half.ring{outline:2px solid var(--good);outline-offset:3px;animation:pulse .6s var(--ease)}
.tile.miss,.half.miss{outline:2px solid var(--bad);outline-offset:3px}
@keyframes pulse{40%{transform:scale(1.05)}}
.pairq{display:flex;flex-direction:column;gap:4px;width:100%;height:100%;max-height:560px}
.half{flex:1;background:var(--c);border-radius:var(--r-1);transition:transform .3s var(--spring)}
.half:active{transform:scale(.98)}
.sorter{position:relative;width:100%;height:100%;max-height:540px}
.srt{position:absolute;left:0;right:0;top:0;background:var(--c);border-radius:var(--r-1);touch-action:none;transition:transform .25s var(--ease),box-shadow .2s;cursor:grab}
.srt.lift{transition:none;z-index:3;box-shadow:0 22px 40px -12px rgba(0,0,0,.9);cursor:grabbing}
.srt.fixed{cursor:default}
.srt.fixed i{position:absolute;left:12px;top:50%;width:5px;height:5px;margin-top:-2.5px;border-radius:50%;background:rgba(255,255,255,.8)}
.srt.bad{box-shadow:inset 0 0 0 2px var(--bad)}.srt.good{box-shadow:inset 0 0 0 2px var(--good)}
.lt-stage{flex:1;display:flex;flex-direction:column;gap:12px;padding:14px 0 6px;min-height:0}
.lt-swatch{flex:1;background:var(--c);min-height:0;border-radius:var(--r-1)}
.lt-opts{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--rule)}
.lt-opts button{min-height:64px;padding:0 6px;border-bottom:1px solid var(--rule);font:400 22px/1 var(--serif);text-align:left}
.lt-opts button:nth-child(odd){border-right:1px solid var(--rule)}
.lt-opts button:nth-child(even){padding-left:14px}
.lt-name{font:400 clamp(52px,16vw,78px)/.95 var(--serif);text-align:left;padding:24px 0 10px;letter-spacing:-.03em}
.lt-swatches{flex:1;display:grid;grid-template-columns:1fr 1fr;gap:4px;min-height:0}
.lt-swatches button{background:var(--c);border-radius:var(--r-1)}
.right{outline:2px solid var(--good);outline-offset:-2px;color:var(--good)}
.wrong{outline:2px solid var(--bad);outline-offset:-2px;color:var(--bad);animation:shake .35s}
@keyframes shake{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.spark polyline{stroke-dasharray:300;stroke-dashoffset:300;animation:draw 1.2s var(--ease) .3s forwards}
@keyframes draw{to{stroke-dashoffset:0}}

/* ---------- Explore: editorial feed ---------- */
.explore{padding-bottom:calc(var(--tabh) + 20px)}
.x-head{position:sticky;top:0;z-index:6;margin:0 calc(-1 * var(--g));padding:calc(var(--top) + 12px) var(--g) 0;background:linear-gradient(var(--ground) 86%,rgba(14,13,11,0))}
.x-row{display:flex;justify-content:space-between;align-items:flex-end;max-height:90px;padding:var(--s5) 0 var(--s1);overflow:hidden;transition:max-height .4s var(--ease),opacity .3s,padding .4s var(--ease)}
.x-row .tab-title{font-size:56px}
.x-acts{display:flex;gap:2px}
.x-acts .icon-btn{position:relative}
.x-acts .icon-btn.on{color:var(--yes,#E8B4B8)}
.x-acts .icon-btn em{position:absolute;top:3px;right:0;font:600 13px/1 var(--mono);font-style:normal;color:var(--soft)}
.labs.st-labs{margin-top:var(--s5);padding-top:0;border-top:0}
.lens-key{display:flex;gap:22px;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;margin:16px calc(-1 * var(--g)) 0;padding:0 var(--g);border-bottom:1px solid var(--rule);scrollbar-width:none}
.lens-key::-webkit-scrollbar{display:none}
.lens-key button{flex:none;position:relative;padding:12px 0 13px;font:italic 400 17px/1.2 var(--serif);letter-spacing:0;text-transform:none;color:var(--faint);transition:color .25s}
.lens-key button.on{color:var(--ink)}
.lens-key button.on::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--ink)}
.lens-key em{font-style:normal;color:var(--soft)}
.lens-key.in-page{margin:0 calc(-1 * var(--g)) 16px}
.x-search{padding-top:14px}
.search{display:flex;align-items:center;gap:10px;border-bottom:1px solid var(--rule-2);height:52px;color:var(--soft)}
.search input{flex:1;background:none;border:0;color:var(--ink);font:400 24px/1 var(--serif);outline:none;min-width:0}
.search input::placeholder{color:var(--faint)}
.x-search #results{margin-top:18px}
.x-sec{margin-top:38px}
.x-sub{color:var(--soft);font-size:14px;margin:10px 0 14px;max-width:44ch}
.labs{display:grid;grid-template-columns:repeat(2,1fr);gap:22px 16px;margin-top:22px;padding-top:16px;border-top:1px solid var(--rule)}
.lab{display:flex;flex-direction:column;text-align:left}
.lab b{font:400 22px/1.05 var(--serif);margin-top:10px}
.lab small{color:var(--soft);font-size:13px;line-height:1.35;margin-top:3px}
.lv{position:relative;display:block;width:100%;aspect-ratio:1/.8;overflow:hidden;background:var(--lift);border-radius:var(--r-1)}
.lv-wheel{display:grid;place-items:center}
.lv-ring{position:absolute;width:76%;aspect-ratio:1;border-radius:50%;-webkit-mask:radial-gradient(circle,transparent 58%,#000 59%,#000 70%,transparent 71%);mask:radial-gradient(circle,transparent 58%,#000 59%,#000 70%,transparent 71%)}
.lv-wheel svg{position:relative;width:76%;height:auto;overflow:visible}
.lv-albers{display:flex}
.lv-albers i{flex:1;background:var(--g);display:grid;place-items:center}
.lv-albers i::after{content:"";width:36%;aspect-ratio:1;background:#8E7F71}
.lv-studio{display:flex}.lv-studio i{flex:1;background:var(--c)}
.lv-namer{background:linear-gradient(120deg,#FF7F50 0%,#FA8072 38%,#40E0D0 100%)}
.lv-loupe{position:absolute;left:20%;top:18%;width:42%;aspect-ratio:1;border-radius:50%;background:#FF7F50;box-shadow:0 0 0 2px #F3F3F1,0 6px 16px rgba(0,0,0,.45)}
.lv-tag{position:absolute;right:9%;bottom:12%;background:var(--paper);color:var(--paper-ink);font:400 15px/1 var(--serif);padding:4px 7px 3px}
.masonry{display:flex;gap:14px;align-items:flex-start}
.masonry>div{flex:1;display:flex;flex-direction:column;gap:22px;min-width:0}
.pin{display:block;width:100%;text-align:left;position:relative}
.pin-color .pc{display:flex;flex-direction:column;justify-content:flex-end;background:var(--c);padding:10px;position:relative;border-radius:var(--r-1)}
.pc[data-ink="dark"]{color:#141311}.pc[data-ink="light"]{color:#fff}
.pc b{font:400 24px/.95 var(--serif);letter-spacing:-.015em}
.pc small{font:italic 400 17px/1.35 var(--serif);letter-spacing:0;text-transform:none;opacity:.72;margin-top:6px}
.own-dot{position:absolute;top:10px;right:10px;width:6px;height:6px;border-radius:50%;background:currentColor}
.pin-badge{display:block;font:italic 400 17px/1.2 var(--serif);letter-spacing:0;text-transform:none;color:var(--soft);margin-bottom:7px}
.pin-why{font-size:13px;line-height:1.4;color:var(--soft);margin-top:7px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.pin-art img,.pin-art .noimg{width:100%;display:block;object-fit:cover;background:var(--c,var(--lift));border-radius:var(--r-1)}
.pin-art .noimg{aspect-ratio:4/3}
.pin-art .mini-pal{margin:6px 0 8px}
.pin-art b{display:block;font:400 20px/1.02 var(--serif)}
.pin-art small{display:block;font:italic 400 17px/1.4 var(--serif);letter-spacing:0;text-transform:none;color:var(--soft);margin-top:5px}
.mini-pal{display:flex;height:5px;gap:1px}.mini-pal i{background:var(--c)}
.pin-story{background:var(--g);border-radius:var(--r-1);overflow:hidden}
.pin-story .ps{display:flex;flex-direction:column;justify-content:flex-end;gap:8px;min-height:240px;padding:14px;background:linear-gradient(transparent 25%,rgba(0,0,0,.72))}
.pin-story .eyebrow{color:rgba(255,255,255,.75)}
.pin-story b{font:400 27px/.98 var(--serif);color:#fff;text-wrap:balance}
.pin-story small{font-size:13px;line-height:1.35;color:rgba(255,255,255,.82);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.pin-page{border-top:1px solid var(--rule-2);padding-top:10px}
.pp-head{display:flex;height:46px;gap:1px;margin-bottom:10px}
.pp-head i{flex:1;background:var(--c)}
.pp-body{display:flex;flex-direction:column;gap:6px}
.pp-body b{font:400 24px/1 var(--serif);text-wrap:balance}
.pp-body small{font-size:13px;color:var(--soft);line-height:1.4}
.pin-sys{border-top:1px solid var(--rule-2);padding-top:10px;display:flex;flex-direction:column;gap:7px}
.pin-sys b{font:400 25px/1 var(--serif);margin:4px 0 6px}
.sys-row{display:flex;align-items:center;gap:9px;font-size:13px;color:#D6D1C5;line-height:1.25}
.sys-row i{width:20px;height:20px;background:var(--c);flex:none}
.pin-pair .pair2{display:flex;height:170px;gap:2px}
.pair2 span{flex:1;background:var(--c);display:flex;align-items:flex-end;padding:9px;border-radius:var(--r-1)}
.pair2 b{font:400 18px/1 var(--serif)}
.pair2 span[data-ink="dark"]{color:#141311}.pair2 span[data-ink="light"]{color:#fff}
.pin-pair small{display:block;font:italic 400 17px/1.2 var(--serif);letter-spacing:0;text-transform:none;color:var(--soft);margin-top:8px}

/* ---------- closeup + articles ---------- */
.article{padding-top:0}
.art-top{position:sticky;top:0;z-index:5;display:flex;justify-content:space-between;align-items:center;margin:0 calc(-1 * var(--g));padding:calc(var(--top) + 10px) var(--g) 10px;background:linear-gradient(var(--ground) 60%,rgba(14,13,11,0))}
.art-top .icon-btn{margin-left:-6px}
.z-actions{display:flex;gap:8px}
.z-actions .icon-btn{font-size:20px}
.icon-btn.saved{color:#F2A7B5}
.z-color,.c-hero{height:50dvh;background:var(--c);display:flex;flex-direction:column;justify-content:flex-end;padding:20px;border-radius:var(--r-1)}
.z-color[data-ink="dark"],.c-hero[data-ink="dark"]{color:#141311}.z-color[data-ink="light"],.c-hero[data-ink="light"]{color:#fff}
.z-color .eyebrow,.c-hero .eyebrow{color:inherit;opacity:.72}
.z-color h1,.c-hero h1{font:400 clamp(62px,19vw,96px)/.86 var(--serif);letter-spacing:-.04em;margin-top:8px;text-wrap:balance}
.z-color .mono{font:500 13px/1 var(--mono);letter-spacing:.12em;opacity:.72;margin-top:12px}
.z-art img{width:100%;display:block;border-radius:var(--r-1)}
.z-pal{display:flex;height:8px;gap:1px;margin-top:8px}.z-pal i{background:var(--c)}
.z-title,.p-title{font:400 clamp(44px,13vw,60px)/.9 var(--serif);letter-spacing:-.035em;margin-top:16px;text-wrap:balance}
.z-meta,.p-dek{color:var(--soft);margin-top:10px;font-size:15.5px;line-height:1.5;text-wrap:pretty}
.z-type,.p-type{margin-top:18px}
.z-type+.z-title,.p-type+.p-title{margin-top:8px}
.z-story{height:44dvh;background:var(--g);display:flex;flex-direction:column;justify-content:flex-end;padding:20px;position:relative;overflow:hidden;border-radius:var(--r-1)}
.z-story::before{content:"";position:absolute;inset:0;background:linear-gradient(transparent 35%,rgba(0,0,0,.65))}
.z-story>*{position:relative}.z-story .eyebrow{color:rgba(255,255,255,.75)}
.z-story h1{font:400 clamp(46px,13vw,62px)/.92 var(--serif);color:#fff;margin-top:8px;text-wrap:balance}
.z-page,.p-hero{display:flex;height:132px;gap:2px}
.z-page i,.p-hero div{flex:1;background:var(--c);display:flex;align-items:flex-end;padding:8px;font-style:normal}
.z-page span,.p-hero span{font:italic 400 17px/1.25 var(--serif);letter-spacing:0;text-transform:none}
.z-page span[data-ink="dark"],.p-hero div[data-ink="dark"] span{color:rgba(20,19,17,.8)}.z-page span[data-ink="light"],.p-hero div[data-ink="light"] span{color:rgba(255,255,255,.9)}
/* a wiki page's real photo as its hero, in front of a flat swatch (js/explore.js wikiPage, PAGES-AUDIT.md plan item 4) */
.p-hero-photo .fig{margin-top:0}
.p-hero-photo .fig img{border-radius:var(--r-1);max-height:48dvh}
.p-hero-sw{margin-top:14px}
.p-hero-sw .pchip{font-size:17px}
.z-sum{font:400 22px/1.3 var(--serif);color:#E2DDD1;margin-top:18px;text-wrap:pretty}
.z-btns{margin-top:22px}
.codes{display:grid;grid-template-columns:repeat(4,1fr);margin-top:2px;border-bottom:1px solid var(--rule)}
.codes button{padding:10px 0 11px;text-align:left;display:flex;flex-direction:column;gap:4px;min-width:0}
.codes button+button{padding-left:10px;border-left:1px solid var(--rule)}
.codes span{font:500 13px/1 var(--mono);letter-spacing:.14em;color:var(--faint)}
.codes b{font:500 13px/1 var(--mono);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cmp-sec{margin-top:18px}
.facet{margin-top:34px}
.facet h3,.conns h3,.srcs h3{font:italic 400 17px/1.2 var(--serif);letter-spacing:0;text-transform:none;color:var(--soft);padding-bottom:10px;border-bottom:1px solid var(--rule);margin-bottom:14px}
.facet p,.p-body{font-size:16.5px;line-height:1.62;color:#DAD5C9;text-wrap:pretty}
.p-body{margin-top:16px}
.kin{display:grid;grid-template-columns:30px 110px 1fr;gap:12px;align-items:center;width:100%;text-align:left;padding:11px 0;border-bottom:1px solid var(--rule)}
.kin i{width:30px;height:30px;background:var(--c)}
.kin b{font:400 20px/1 var(--serif)}.kin span{color:var(--soft);font-size:13px;line-height:1.35}
.conns{margin-top:40px}
.cg{margin-bottom:18px}.cg .eyebrow{margin-bottom:10px;color:var(--faint)}
.chips-wrap{display:flex;flex-wrap:wrap;gap:6px 14px}
.pchip{display:inline-flex;align-items:center;gap:7px;padding:6px 0;font:400 19px/1.1 var(--serif);text-align:left;border-bottom:1px solid var(--rule)}
.pchip i{width:12px;height:12px;background:var(--c);flex:none}
.pchip em{font:italic 400 17px/1.2 var(--serif);letter-spacing:0;text-transform:none;color:var(--faint);font-style:normal}
.pchip.stub{color:var(--soft)}
.srcs{margin:40px 0 10px}
.srcs ul{margin:0;padding-left:16px;color:var(--faint);font-size:13px;line-height:1.55}
.srcs a{color:var(--soft)}
.facts{display:grid;grid-template-columns:1fr 1fr;margin:22px 0 0;border-top:1px solid var(--rule)}
.facts div{padding:12px 0;border-bottom:1px solid var(--rule)}
.facts div:nth-child(even){padding-left:14px;border-left:1px solid var(--rule)}
.facts dt{font:italic 400 17px/1.2 var(--serif);letter-spacing:0;text-transform:none;color:var(--faint)}
.facts dd{margin:6px 0 0;font:400 19px/1.1 var(--serif)}
.wl{color:var(--ink);text-decoration:underline;text-decoration-color:rgba(236,232,223,.35);text-decoration-thickness:1px;text-underline-offset:3px;cursor:pointer}
.wl i{display:inline-block;width:.55em;height:.55em;background:var(--c);margin-right:.25em;vertical-align:.05em}
.ptg{position:relative;overflow:hidden;background:var(--lift)}
.ptg img{display:block;width:100%;height:auto}
.ptg canvas{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity .35s;image-rendering:pixelated}
.ptg canvas.on{opacity:1}
.palette{display:flex;height:80px;gap:2px;margin-top:18px}
.pal{background:var(--c);display:flex;align-items:flex-end;padding:7px;font:500 13px/1 var(--mono);letter-spacing:.08em;transition:flex .3s}
.pal[data-ink="dark"]{color:rgba(20,19,17,.75)}.pal[data-ink="light"]{color:rgba(255,255,255,.85)}
.pal.on{outline:2px solid var(--ink);outline-offset:-2px}
.pal-names{display:flex;flex-direction:column;margin-top:12px;border-top:1px solid var(--rule)}
.pal-name{display:grid;grid-template-columns:20px 1fr auto;gap:3px 12px;align-items:center;padding:10px 0;border-bottom:1px solid var(--rule);text-align:left}
.pal-name i{width:20px;height:20px;background:var(--c);grid-row:span 2}
.pal-name b{font:400 20px/1 var(--serif)}.pal-name span{font-size:13px;color:var(--soft);grid-column:2}
.pal-name em{font:500 13px/1 var(--mono);letter-spacing:.08em;color:var(--faint);font-style:normal;grid-row:1;grid-column:3}
.pal-name.on b{text-decoration:underline}

/* ---------- color of the day ---------- */
.daily .d-swatch{flex:1;min-height:0;background:var(--c);display:flex;flex-direction:column;justify-content:flex-end;padding:20px;margin-top:10px;border-radius:var(--r-1)}
.d-swatch[data-ink="dark"]{color:#141311}.d-swatch[data-ink="light"]{color:#fff}
.d-swatch .mono{font:500 13px/1 var(--mono);letter-spacing:.12em;opacity:.7}
.d-swatch h1{font:400 clamp(60px,18vw,88px)/.88 var(--serif);letter-spacing:-.04em;margin-top:8px;animation:enter .6s var(--ease) both}
.d-body{padding:18px 0 4px;min-height:40%}
.d-q{font:400 30px/1.05 var(--serif);margin-bottom:14px}
.d-opts{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--rule)}
.d-opts button{min-height:62px;border-bottom:1px solid var(--rule);font:400 22px/1 var(--serif);text-align:left}
.d-opts button:nth-child(odd){border-right:1px solid var(--rule)}
.d-opts button:nth-child(even){padding-left:14px}
.d-verdict{font:400 32px/1.05 var(--serif)}.d-verdict.y{color:var(--good)}
.d-text{color:#D4CFC3;font-size:15.5px;line-height:1.55;margin:10px 0 18px;max-height:24dvh;overflow:auto}

/* ---------- stories ---------- */
.st-top{display:flex;align-items:center;gap:14px;min-height:48px}
.st-stage{flex:1;min-height:0;display:flex;flex-direction:column;cursor:pointer}
.st-slide{flex:1;display:flex;flex-direction:column;gap:20px;min-height:0;padding:8px 0 12px}
.st-slide.fwd{animation:slideL .5s var(--ease) both}.st-slide.back{animation:slideR .5s var(--ease) both}
@keyframes slideL{from{opacity:0;transform:translateX(30px)}}@keyframes slideR{from{opacity:0;transform:translateX(-30px)}}
.st-text{font:400 24px/1.25 var(--serif);letter-spacing:-.005em;text-wrap:pretty}
.v{flex:1;min-height:0;position:relative;overflow:hidden;width:100%;border-radius:var(--r-1)}
.v-swatch{background:var(--c)}
.v-lbl{position:absolute;left:16px;bottom:14px;font:400 30px/1 var(--serif)}
.v-lbl[data-ink="dark"]{color:#141311}.v-lbl[data-ink="light"]{color:#fff}
.v-pair{display:flex;gap:2px}.v-pair>div{flex:1;background:var(--c);position:relative}
.v-row{display:flex;gap:2px;align-items:stretch}
.v-row>div{flex:1;display:flex;flex-direction:column;gap:8px;min-width:0;animation:enter .5s var(--ease) both}
.v-row i{flex:1;background:var(--c)}
.v-row span{font:italic 400 17px/1.2 var(--serif);letter-spacing:0;text-transform:none;text-align:center;color:var(--soft)}
.v-row.many{flex-wrap:wrap}.v-row.many>div{flex:1 0 28%}
.v-strip{display:flex;gap:2px}.v-strip i{flex:1;background:var(--c);animation:enter .5s var(--ease) both}
.v-row>div:nth-child(2),.v-strip i:nth-child(2){animation-delay:.05s}.v-row>div:nth-child(3),.v-strip i:nth-child(3){animation-delay:.1s}
.v-row>div:nth-child(4),.v-strip i:nth-child(4){animation-delay:.15s}.v-row>div:nth-child(5),.v-strip i:nth-child(5){animation-delay:.2s}
.v-row>div:nth-child(6),.v-strip i:nth-child(6){animation-delay:.25s}.v-strip i:nth-child(7){animation-delay:.3s}.v-strip i:nth-child(n+8){animation-delay:.35s}
.v-contrast{display:flex;padding:0;cursor:pointer}
.v-contrast .g{flex:1;background:var(--c);display:grid;place-items:center;transition:background .7s var(--ease)}
.v-contrast .g i{width:34%;aspect-ratio:1;background:var(--c);transition:transform .7s var(--ease)}
.v-contrast.lifted .g{background:var(--ground)}
.v-contrast.lifted .g:first-child i{transform:translateX(52%)}.v-contrast.lifted .g:last-child i{transform:translateX(-52%)}
.v-hint{position:absolute;left:0;right:0;bottom:12px;text-align:center;font:italic 400 17px/1.2 var(--serif);letter-spacing:0;text-transform:none;color:rgba(255,255,255,.88);text-shadow:0 1px 8px rgba(0,0,0,.6)}
.v-contrast.big{flex:none;height:46dvh;margin-top:6px}
.v-wheel{display:grid;place-items:center;background:var(--lift)}
.wheel{position:relative}
.wheel-ring{position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 0deg,#e8836a,#c9a24a,#8fae5e,#3fb39a,#36a6c9,#7c8fdc,#b47ccf,#d878a4,#e8836a);opacity:.55;
  -webkit-mask:radial-gradient(circle,transparent 62%,#000 63%,#000 70.5%,transparent 71%);mask:radial-gradient(circle,transparent 62%,#000 63%,#000 70.5%,transparent 71%)}
.wheel svg{position:relative;overflow:visible}
.v-quote,.v-type,.v-big{display:flex;flex-direction:column;justify-content:flex-end;padding:24px 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);border-radius:0}
.v-quote blockquote{margin:0;font:italic 400 clamp(36px,10vw,50px)/1.02 var(--serif);text-wrap:balance;animation:enter .7s var(--ease) .08s both}
.v-quote cite{margin-top:18px;font:italic 400 17px/1.2 var(--serif);letter-spacing:0;text-transform:none;color:var(--soft);font-style:normal}
.v-type b{font:400 clamp(72px,22vw,120px)/.86 var(--serif);letter-spacing:-.04em;word-break:break-word;animation:enter .7s var(--ease) .08s both}
.v-type span,.v-big span{font:italic 400 17px/1.4 var(--serif);letter-spacing:0;text-transform:none;color:var(--soft);margin-top:14px}
.v-big b{font:400 clamp(80px,26vw,140px)/.84 var(--serif);letter-spacing:-.045em;animation:enter .7s var(--ease) .08s both}
.v-quiz{display:flex;flex-direction:column;gap:16px;padding:6px 0;overflow:auto;cursor:default;border-radius:0}
.qz-q{font:400 32px/1.05 var(--serif);text-wrap:balance}
.qz-opts{display:flex;flex-direction:column;border-top:1px solid var(--rule)}
.qz-opts button{display:flex;align-items:center;gap:12px;min-height:56px;border-bottom:1px solid var(--rule);text-align:left;font:400 21px/1.1 var(--serif)}
.qz-opts i{width:30px;height:30px;background:var(--c);flex:none}
.qz-ex{color:#D4CFC3;font-size:15px;line-height:1.5}
.st-end{flex:1;display:flex;flex-direction:column;justify-content:flex-end;gap:14px;padding-bottom:6px;cursor:default}
.st-end h2{font:400 64px/.88 var(--serif);letter-spacing:-.035em;margin:6px 0 8px}
.st-end .stack{margin-top:20px}

/* ---------- labs ---------- */
.poster{overflow:hidden;margin-top:6px;background:var(--lift)}
.poster svg{display:block;width:100%;height:auto;max-height:42dvh}
.schemes{display:flex;gap:20px;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;margin:16px calc(-1 * var(--g)) 0;padding:0 var(--g);border-bottom:1px solid var(--rule);scrollbar-width:none}
.schemes::-webkit-scrollbar{display:none}
.schemes button{flex:none;position:relative;padding:12px 0 13px;font:italic 400 17px/1.2 var(--serif);letter-spacing:0;text-transform:none;color:var(--faint)}
.schemes button.on{color:var(--ink)}
.schemes button.on::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--ink)}
.h-row{display:flex;gap:16px;align-items:center;margin-top:18px}
.h-list{flex:1;display:flex;flex-direction:column;min-width:0;border-top:1px solid var(--rule)}
.h-item{display:flex;align-items:center;gap:10px;text-align:left;padding:8px 0;border-bottom:1px solid var(--rule)}
.h-item i{width:26px;height:26px;background:var(--c);flex:none}
.h-item span{display:flex;flex-direction:column;min-width:0}.h-item b{font:400 17px/1.1 var(--serif);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.h-item em{font:500 13px/1 var(--mono);letter-spacing:.08em;color:var(--faint);font-style:normal;margin-top:3px}
.pick-row{display:flex;gap:2px;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;margin:0 calc(-1 * var(--g));padding:4px var(--g) 8px;scrollbar-width:none}
.pick-row::-webkit-scrollbar{display:none}
.pick-row button{flex:none;width:30px;height:44px;background:var(--c)}
.pick-row button.on{outline:1px solid var(--ink);outline-offset:3px}
.any{display:inline-flex;align-items:center;gap:10px;margin-top:10px;font:italic 400 17px/1.2 var(--serif);letter-spacing:0;text-transform:none;color:var(--soft)}
.any input,.any-btn input{width:40px;height:30px;border:0;background:none;padding:0}
.any-btn{position:relative;overflow:hidden}.any-btn input{position:absolute;inset:0;width:100%;height:100%;opacity:0}
.presets{display:flex;gap:10px;flex-wrap:wrap}
.presets button{display:flex;height:34px}.presets i{width:26px;background:var(--c)}
.nm-sw{height:30dvh;background:var(--c);display:flex;align-items:flex-end;padding:16px;margin:6px 0 12px;transition:background .3s;border-radius:var(--r-1)}
.nm-sw[data-ink="dark"]{color:#141311}.nm-sw[data-ink="light"]{color:#fff}
.nm-sw .mono{font:500 13px/1 var(--mono);letter-spacing:.12em}
.cam{position:relative;overflow:hidden;margin:6px 0 12px;background:#000}
.cam video{display:block;width:100%;max-height:50dvh;object-fit:cover}
.cam .reticle{position:absolute;left:50%;top:40%;width:54px;height:54px;margin:-27px;border-radius:50%;box-shadow:0 0 0 1.5px #fff,0 0 0 3px rgba(0,0,0,.4)}
.cam .btn{position:absolute;left:16px;right:16px;bottom:16px;width:auto;background:rgba(14,13,11,.7)}

/* ---------- motion ---------- */
.fade-ghost{position:fixed;left:0;right:0;z-index:0;pointer-events:none;transform-origin:50% 30%}
.flyer{position:fixed;z-index:50;pointer-events:none;object-fit:cover;transform-origin:0 0;box-shadow:0 30px 60px -20px rgba(0,0,0,.8)}
.rv{opacity:0;translate:0 18px;transition:opacity .7s var(--ease),translate .8s var(--ease)}
.rv.in{opacity:1;translate:0 0}
img{transition:opacity .6s var(--ease)}
.pin img,.z-art img,.ptg img{opacity:0}
.pin img.ld,.z-art img.ld,.ptg img.ld{opacity:1}
.scrolled .x-head .x-row{max-height:0;opacity:0;padding:0}
.pin,.lab,.pchip,.skill,.play-row,.kin,.pal-name,.h-item{transition:opacity .25s,transform .4s var(--spring)}
.pin:active,.lab:active,.skill:active,.play-row:active,.kin:active,.h-item:active{transform:scale(.97);opacity:.8}
@supports (animation-timeline: view()){
  /* timed on the whole page, so text near the bottom of a card has finished rising once the card snaps into place */
  .page.col{view-timeline:--pg y}
  .col .swatch h2{animation:rise linear both;animation-timeline:--pg;animation-range:entry 10% entry 80%}
  .col .compare,.col .diff,.col .origin{animation:rise linear both;animation-timeline:--pg;animation-range:entry 30% entry 100%}
}
@keyframes rise{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}
@media (min-width:700px){
  .stage{max-height:660px;margin-top:22px}
  .card{left:8%;right:8%}
}
.x-feed>.masonry{margin-top:34px}
.x-feed .labs+.masonry{margin-top:34px}
.p-hero div,.z-page i{min-width:0;overflow:hidden}
.p-hero span,.z-page span{overflow-wrap:anywhere}
.wl i,.pchip i,.sys-row i,.kin i,.h-item i,.pal-name i,.qz-opts i{box-shadow:inset 0 0 0 1px rgba(236,232,223,.22)}

/* ---------- Gym v2 (stations, previews, adjust drills: css/gym.css) ---------- */
.lt-best{display:flex;flex-direction:column;align-items:flex-end;gap:2px}
.lt-best b{font:400 34px/.9 var(--serif);color:var(--ink);letter-spacing:-.02em}

/* ---------- color picker (ring + square + sliders) ---------- */
.cp{display:flex;flex-direction:column;gap:14px}
.cp-wheel{position:relative;width:min(100%,300px);aspect-ratio:1;margin:0 auto;touch-action:none;cursor:crosshair}
.cp-ring{position:absolute;inset:0;border-radius:50%;background:conic-gradient(#f00,#ff0,#0f0,#0ff,#00f,#f0f,#f00);
  -webkit-mask:radial-gradient(circle,transparent calc(70.7% - 26px),#000 calc(70.7% - 25px));mask:radial-gradient(circle,transparent calc(70.7% - 26px),#000 calc(70.7% - 25px))}
.cp-sv{position:absolute;left:50%;top:50%;width:56%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:var(--r-1);
  background:linear-gradient(to top,#000,rgba(0,0,0,0)),linear-gradient(to right,#fff,var(--cp-h))}
.cp-sv-knob,.cp-ring-knob{position:absolute;width:24px;height:24px;border-radius:50%;box-shadow:0 0 0 2px #fff,0 0 0 3.5px rgba(0,0,0,.45),0 4px 10px rgba(0,0,0,.5);background:var(--cp-c);pointer-events:none}
.cp-sv-knob{transform:translate(-50%,-50%)}
.cp-ring-knob{left:0;top:0;background:var(--cp-h)}
.cp-marks{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.cp-read{display:grid;grid-template-columns:44px 1fr auto;align-items:center;gap:12px;padding:12px 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.cp-swatch{width:44px;height:44px;background:var(--cp-c)}
.cp-read b{display:block;font:400 22px/1.05 var(--serif)}
.cp-read em{display:block;font:italic 400 17px/1.4 var(--serif);letter-spacing:0;text-transform:none;color:var(--faint);font-style:normal;margin-top:4px}
.cp-hex input{width:94px;background:none;border:0;border-bottom:1px solid var(--rule-2);color:var(--ink);font:500 14px/1 var(--mono);letter-spacing:.06em;padding:6px 0;text-transform:uppercase;outline:none}
.cp-modes{display:flex;gap:20px;border-bottom:1px solid var(--rule)}
.cp-modes button{position:relative;padding:8px 0 10px;font:500 13px/1 var(--mono);letter-spacing:.14em;color:var(--faint)}
.cp-modes button.on{color:var(--ink)}.cp-modes button.on::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--ink)}
.cp-sliders{display:flex;flex-direction:column;gap:14px}
.cp-sl{display:grid;grid-template-columns:18px 1fr 36px;align-items:center;gap:12px}
.cp-sl span{font:500 13px/1 var(--mono);color:var(--soft)}
.cp-sl b{font:500 13px/1 var(--mono);text-align:right;font-weight:500}
.cp-track{position:relative;height:22px;border-radius:var(--r-1);touch-action:none;cursor:ew-resize;box-shadow:inset 0 0 0 1px rgba(236,232,223,.12)}
.cp-knob{position:absolute;top:50%;width:14px;height:30px;transform:translate(-50%,-50%);border-radius:var(--r-1);background:transparent;box-shadow:0 0 0 2px #fff,0 0 0 3.5px rgba(0,0,0,.5);pointer-events:none}

/* ---------- taste tests ---------- */
.t-title{font:400 clamp(58px,17vw,78px)/.88 var(--serif);letter-spacing:-.04em;margin-top:12px}
.t-title em{font-style:italic;color:#CFC9BC}
.play-tiles{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:22px;padding-top:16px;border-top:1px solid var(--rule)}
.play-tile{text-align:left;display:flex;flex-direction:column;gap:6px}
.play-tile .pt-v{display:grid;height:110px;gap:2px}
.play-tile .pt-c{grid-template-columns:repeat(4,1fr)}.play-tile .pt-c i,.play-tile .pt-p i{background:var(--c)}
.play-tile .pt-p{grid-template-rows:repeat(2,1fr)}.play-tile .pt-p span{display:flex;gap:1px}.play-tile .pt-p span i{flex:1}
.play-tile b{font:400 22px/1 var(--serif);margin-top:6px}
.play-tile small{color:var(--soft);font-size:13px}
/* honeycomb (Spectrum view); the rest lives in css/honey.css */
.honey-panel{position:relative;height:66dvh;margin:6px calc(-1 * var(--g)) 0;overflow:hidden;touch-action:none}
/* ---------- articles: lead, contents, folding sections, photographs, colored words ---------- */
.lead{font:400 20px/1.32 var(--serif);color:#E6E1D5;margin-top:20px;text-wrap:pretty}
.toc{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:baseline;margin-top:24px;padding:14px 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.toc .eyebrow{width:100%;margin-bottom:2px}
.x-toc{margin-top:20px}
.x-sec{scroll-margin-top:150px}   /* clears the sticky Explore header when jumped to */
.toc a{font:400 18px/1.2 var(--serif);color:var(--ink);text-decoration:underline;text-decoration-color:var(--rule-2);text-underline-offset:4px;cursor:pointer}
.sec{border-bottom:1px solid var(--rule)}
.sec summary{list-style:none;display:flex;justify-content:space-between;align-items:center;min-height:58px;cursor:pointer;-webkit-tap-highlight-color:transparent}
.sec summary::-webkit-details-marker{display:none}
.sec summary span{font:400 26px/1.1 var(--serif);letter-spacing:-.01em}
.sec summary i{width:12px;height:12px;border-right:1px solid var(--soft);border-bottom:1px solid var(--soft);transform:rotate(45deg) translate(-3px,-3px);transition:transform .35s var(--ease)}
.sec[open] summary i{transform:rotate(225deg) translate(-3px,-3px)}
.sec-body{padding:0 0 22px;animation:enter .45s var(--ease) both}
.sec-body p{font-size:16.5px;line-height:1.65;color:#DAD5C9;text-wrap:pretty}
.sec-body p+p{margin-top:14px}
.fig{margin:24px 0 0}
.fig img{display:block;width:100%;height:auto;max-height:64dvh;object-fit:cover;border-radius:var(--r-1);background:var(--lift)}
.fig figcaption{display:flex;flex-direction:column;gap:4px;margin-top:8px;font-size:13px;line-height:1.4;color:var(--soft)}
.fig figcaption span,.fig figcaption a{font:500 13px/1.4 var(--mono);letter-spacing:.06em;color:var(--faint);text-decoration:none}
.wl-c{text-decoration-color:var(--c);text-decoration-thickness:3px;text-underline-offset:4px;text-decoration-skip-ink:none}
.codes{grid-template-columns:repeat(auto-fit,minmax(74px,1fr))}
/* profile questions */
.profile .t-title{margin-top:20px}
.opt-list{border-top:1px solid var(--rule)}
.opt{display:grid;grid-template-columns:22px 1fr;gap:14px;align-items:center;width:100%;text-align:left;padding:13px 0;border-bottom:1px solid var(--rule)}
.opt i{width:16px;height:16px;border-radius:50%;box-shadow:inset 0 0 0 1px var(--soft);transition:box-shadow .2s}
.opt.multi i{border-radius:var(--r-1)}
.opt.on i{box-shadow:inset 0 0 0 5px var(--ink)}
.opt b{display:block;font:400 22px/1.1 var(--serif)}
.opt small{display:block;color:var(--soft);font-size:13px;margin-top:3px}
.profile .sec-head{margin-top:30px}
/* many swatches: labels run up the strip like book spines instead of breaking mid-word */
.p-hero:has(div:nth-child(5)) div{align-items:flex-end;justify-content:flex-start}
.p-hero:has(div:nth-child(5)) span{writing-mode:vertical-rl;transform:rotate(180deg);white-space:nowrap;overflow-wrap:normal}

/* ---------- color eye (camera) ---------- */
.eye{padding:0;max-width:none;background:#000}
.eye-stage{position:absolute;inset:0;overflow:hidden;touch-action:none}
.eye-stage video,.eye-stage canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.eye-ret{position:absolute;left:50%;top:50%;width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;pointer-events:none;
  box-shadow:0 0 0 2px #F3F3F1,0 0 0 3.5px rgba(0,0,0,.35),inset 0 0 0 7px var(--c,transparent),inset 0 0 0 8.5px rgba(0,0,0,.25);transition:left .25s var(--ease),top .25s var(--ease)}
.eye-ret-h,.eye-ret-v{position:absolute;left:50%;top:50%;background:#F3F3F1;box-shadow:0 0 0 1px rgba(0,0,0,.4)}
.eye-ret-h{width:13px;height:1.5px;margin:-.75px -6.5px}
.eye-ret-v{width:1.5px;height:13px;margin:-6.5px -.75px}
.eye-ret::after{content:"";position:absolute;left:50%;top:50%;width:4px;height:4px;margin:-2px;border-radius:50%;background:#F3F3F1;z-index:1}
.eye-top{position:absolute;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;padding:calc(var(--top) + 10px) 16px 0;z-index:4;pointer-events:none}
.eye-top>*{pointer-events:auto}
.eye-top-r{display:flex;align-items:center;gap:8px}
.eye-hint{display:flex;align-items:center;gap:7px;font:italic 400 17px/1.2 var(--serif);letter-spacing:0;text-transform:none;color:#F3F3F1;background:var(--surface-2);padding:9px 12px;border-radius:var(--r-pill)}
/* a small pulsing dot beside the word "Live", shown only while the feed is live -- deliberately NOT red (that
   reads as "recording" in every camera app); off-white, same as every other mark in this screen (David,
   2026-10-09: "the video feature is confusing") */
.eye-live-dot{width:7px;height:7px;flex:none;border-radius:50%;background:#F3F3F1;animation:eyeLiveDot 1.8s ease-in-out infinite}
.eye-live-dot[hidden]{display:none}
@keyframes eyeLiveDot{0%,100%{opacity:1}50%{opacity:.35}}
/* a camera flash, not a recording cue: one bright pulse over the frame at the instant of Freeze */
.eye-flash{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none;z-index:5}
.eye-flash.snap{animation:eyeFlash .32s ease-out}
@keyframes eyeFlash{0%{opacity:.85}100%{opacity:0}}
.eye-card{position:absolute;left:0;right:0;bottom:0;z-index:2;max-width:540px;margin:0 auto;padding:18px var(--g) calc(var(--bottom) + 18px);
  background:linear-gradient(to top,rgba(14,13,11,.94) 62%,rgba(14,13,11,0));color:var(--ink)}
.eye-name{display:flex;align-items:center;gap:14px;width:100%;text-align:left;padding-top:28px}
.eye-name i{width:52px;height:52px;flex:none;background:var(--c,#333);border-radius:var(--r-1);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.eye-name span{display:flex;flex-direction:column;min-width:0}
.eye-name b{font:400 clamp(34px,10vw,46px)/1 var(--serif);letter-spacing:-.025em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.eye-name em{font:italic 400 17px/1.3 var(--serif);letter-spacing:0;text-transform:none;color:var(--soft);font-style:normal;margin-top:6px}
.eye-hex{margin:4px 0 0 66px;font:500 13px/1 var(--mono);letter-spacing:.04em;color:var(--faint)}
.eye-mine{display:flex;align-items:center;gap:10px;width:100%;margin-top:14px;padding:11px 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);font-size:14px;color:var(--soft)}
.eye-mine:empty{display:none}
.eye-mine i{width:16px;height:16px;background:var(--c);flex:none}
.eye-mine span{flex:1}.eye-mine b{color:var(--ink);font:400 19px/1 var(--serif);margin-left:4px}
.eye-mine em{font:italic 400 17px/1.2 var(--serif);letter-spacing:0;text-transform:none;font-style:normal;color:var(--faint)}
.eye-acts{display:flex;gap:8px;margin-top:14px}
.eye-acts[hidden]{display:none}
.eye-acts button{flex:1;padding:12px 8px;border-radius:var(--r-pill);background:rgba(236,232,223,.1);color:var(--ink);font:500 13.5px/1 var(--mono);letter-spacing:.01em;text-align:center;transition:transform .2s var(--spring),background .2s}
.eye-acts button:active{transform:scale(.96)}
.eye-acts button.on,.eye-acts [data-act="keep"].on{background:#F3F3F1;color:#141311}
.eye-note{margin-top:14px;font:italic 400 17px/1.3 var(--serif);letter-spacing:0;text-transform:none;color:var(--faint)}
.eye-bar{display:flex;align-items:center;justify-content:space-between;margin-top:16px;padding:0 10px}
.eye-side{width:48px;height:48px;display:grid;place-items:center;border-radius:50%;background:rgba(236,232,223,.08);cursor:pointer}
.eye-shut-wrap{display:flex;flex-direction:column;align-items:center;gap:8px}
/* a plain photo shutter -- a ring with a full circle inside, in BOTH states. It deliberately never morphs into a
   square: that circle-to-square shape is the universal video record/stop icon, and was exactly what read as
   "this records video" (David, 2026-10-09). Frozen state is told by the ring dimming and the label below it
   ("Freeze" -> "Live"), plus the one-time flash (.eye-flash) at the moment of capture -- a photography cue. */
.eye-shut{width:72px;height:72px;border-radius:50%;box-shadow:inset 0 0 0 3px #F3F3F1;display:grid;place-items:center;transition:transform .3s var(--spring),box-shadow .3s var(--ease)}
.eye-shut i{width:56px;height:56px;border-radius:50%;background:#F3F3F1;transition:all .3s var(--spring)}
.eye-shut:active{transform:scale(.92)}
.eye.frozen .eye-shut{box-shadow:inset 0 0 0 3px rgba(243,243,241,.55)}
.eye.frozen .eye-shut i{width:44px;height:44px;background:rgba(243,243,241,.55)}
.eye-shut-label{font:500 12px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:#F3F3F1}
.eye-off{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;justify-content:center;padding:var(--g);max-width:540px;margin:0 auto;background:var(--ground)}
.eye-off h2{font:400 36px/1.1 var(--serif);letter-spacing:-.025em;margin:12px 0 16px}.eye-off h2 em{font-style:italic}
.eye-off-fix{font-size:15px;line-height:1.5;color:var(--soft);margin:0 0 24px;max-width:38ch}
.eye-off-fix[hidden]{display:none}
.eye-off .btn{cursor:pointer}
.eye-off[hidden],.eye.nocam .eye-card,.eye.nocam .eye-ret{display:none}
.eye.nocam .eye-wb,.eye.nocam .eye-hint,.eye.nocam .eye-lock{display:none}
.eye-lock{font:600 13px/1 var(--mono);letter-spacing:.08em}
.eye-lock.on{background:#F3F3F1;color:#141311}
.eye-lock[hidden]{display:none}

/* landscape lane (2026-10-09, CSS only -- js/camera.js untouched): the viewfinder was already full-bleed
   (.eye-stage, position:absolute;inset:0), so this is the one camera-specific gap -- a bottom card stacking
   name/hex/actions/shutter was tall enough on a ~390-440px rotated screen to crowd the shutter. It becomes a
   right-hand rail instead (same card, same markup order, just a column instead of the full-width bottom strip),
   leaving the frame itself the full height on the left -- "image fits the height" applied to the live feed too. */
@media (orientation:landscape){
  .eye-card{left:auto;right:0;top:0;bottom:0;width:min(44vw,360px);max-width:none;margin:0;
    padding:calc(var(--top) + 56px) calc(18px + var(--right)) calc(var(--bottom) + 14px) 18px;
    background:linear-gradient(to left,rgba(14,13,11,.94) 62%,rgba(14,13,11,0));overflow-y:auto}
  .eye-top{padding-left:calc(16px + var(--left));padding-right:calc(16px + var(--right))}
}
.eye-sw{height:120px;background:var(--c);display:flex;align-items:flex-end;padding:12px;border-radius:var(--r-1)}
.eye-sw[data-ink="dark"]{color:#141311}.eye-sw[data-ink="light"]{color:#fff}
/* camera pick mode (cameraPick/photoPick): a running strip of picks, above the caller's own Use/Add+Done */
.eye-picks{display:flex;gap:6px;flex-wrap:wrap;margin-top:14px}
.eye-picks[hidden]{display:none}
.eye-picks i{width:30px;height:30px;border-radius:50%;background:var(--c);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
.eye-picks-done{margin-left:auto;padding:8px 16px;border-radius:var(--r-pill);background:#F3F3F1;color:#141311;font:500 13.5px/1 var(--mono);letter-spacing:.01em}
/* photoPick (js/camera.js, js/eyedrop.js eyedropAttach): a chosen photo, picked with the shared drag loupe */
.photopick .eye-photopick-stage{background:#000}
.eye-photopick-img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;touch-action:none}
.photopick .eye-card{position:absolute;left:0;right:0;bottom:0;z-index:2;max-width:540px;margin:0 auto;padding:18px var(--g) calc(var(--bottom) + 18px)}
/* "Shades of this" entry button on the frozen card */
.eye-shades{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;margin-top:12px;padding:12px 8px;border-radius:var(--r-pill);background:rgba(236,232,223,.1);color:var(--ink);font:500 14px/1 var(--mono);letter-spacing:.01em;transition:transform .2s var(--spring),background .2s}
.eye-shades:active{transform:scale(.97)}
.eye-shades[hidden]{display:none}
/* the "Shades of this" sheet: region preview + tighter/wider, how many, the strip + list, actions */
.shd-sheet .shd-h{font:400 clamp(28px,8vw,36px)/1.05 var(--serif);letter-spacing:-.02em;margin:2px 0 14px}
.shd-stage{position:relative;width:100%;border-radius:var(--r-1);overflow:hidden;background:#000}
.shd-stage canvas{display:block;width:100%}
.shd-mask{position:absolute;inset:0}
.shd-tol{display:flex;align-items:center;gap:10px;margin-top:14px;font:500 12.5px/1 var(--mono);letter-spacing:.04em;color:var(--faint)}
.shd-tol input{flex:1}
.shd-count{margin-top:18px}
.shd-count>b{display:block;font:400 15px/1 var(--serif);margin-bottom:8px}
.shd-n-row{display:flex;align-items:center;gap:10px}
.shd-n-row input{flex:1}
.shd-n-out{min-width:1.6em;text-align:right;font:500 15px/1 var(--mono);color:var(--ink)}
.shd-strip{display:flex;height:34px;border-radius:var(--r-1);overflow:hidden;margin-top:16px}
.shd-seg{background:var(--c);min-width:2px;transition:flex .25s var(--ease)}
.shd-sort{display:flex;gap:8px;margin-top:10px}
.shd-sort button{flex:1;padding:8px 6px;border-radius:var(--r-pill);background:rgba(236,232,223,.07);font:500 12.5px/1 var(--mono);letter-spacing:.03em;color:var(--soft)}
.shd-sort button.on{background:var(--ink);color:var(--ground)}
.shd-list{margin-top:10px;border-top:1px solid var(--rule)}
.shd-row{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--rule)}
.shd-sw{width:28px;height:28px;border-radius:50%;background:var(--c);flex:none;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08);transition:transform .2s var(--spring),box-shadow .2s}
.shd-sw.on{box-shadow:0 0 0 2px var(--ground),0 0 0 4px var(--ink);transform:scale(1.08)}
.shd-name{flex:1;text-align:left;font:400 16px/1.2 var(--serif);color:var(--ink)}
.shd-pct{font:500 13px/1 var(--mono);letter-spacing:.02em;color:var(--faint)}
.shd-acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.shd-acts button{flex:1 1 calc(50% - 4px);min-width:120px;display:flex;align-items:center;justify-content:center;gap:7px;padding:12px 8px;border-radius:var(--r-pill);background:rgba(236,232,223,.07);font:500 13.5px/1 var(--mono);letter-spacing:.01em;color:var(--ink)}
/* the full-screen honeycomb of exactly the chosen shades, sized by share */
.shd-honeyscreen .shd-honey{display:flex;flex-wrap:wrap;gap:6px;padding:16px var(--g) calc(var(--bottom) + 90px)}
.shd-hcell{flex:var(--w) 1 auto;min-width:88px;aspect-ratio:1.05;clip-path:polygon(25% 3%,75% 3%,100% 50%,75% 97%,25% 97%,0% 50%);background:var(--c);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;text-align:center;padding:10px;transition:transform .2s var(--spring)}
.shd-hcell:active{transform:scale(.95)}
.shd-hcell b{font:400 15px/1.1 var(--serif);color:#141311;mix-blend-mode:plus-darker}
.shd-hcell span{font:500 12px/1 var(--mono);letter-spacing:.02em;color:rgba(20,19,17,.72)}
.shd-honey-map{position:fixed;left:var(--g);right:var(--g);bottom:calc(var(--bottom) + 16px)}

/* ---------- studio ---------- */
.st-tiles{display:grid;grid-template-columns:1fr 1fr;gap:22px 16px;margin-top:22px;padding-top:16px;border-top:1px solid var(--rule)}
.st-tile{display:flex;flex-direction:column;text-align:left;cursor:pointer}
.st-tile:first-child{grid-column:1/-1}
.st-tile b{font:400 22px/1.05 var(--serif);margin-top:10px}
.st-tile small{color:var(--soft);font-size:13px;line-height:1.35;margin-top:3px}
.st-art{display:grid;place-items:center;aspect-ratio:1/.8;background:var(--lift);border-radius:var(--r-1);overflow:hidden;position:relative}
.st-tile:first-child .st-art{aspect-ratio:2/1}
.st-eye{background:linear-gradient(140deg,#2E5E5A,#C9A15A 70%,#E9D9B8)}
.st-eye i{width:38%;aspect-ratio:1;border-radius:50%;box-shadow:0 0 0 2px #F3F3F1,inset 0 0 0 7px #C9A15A}
.st-photo{color:var(--soft)}.st-photo svg{width:36px;height:36px}
.st-phrail{display:flex;gap:12px;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;margin:0 calc(-1 * var(--g));padding:2px var(--g) 6px;scroll-snap-type:x proximity;scrollbar-width:none}
.st-phrail::-webkit-scrollbar{display:none}
.st-ph{flex:none;width:112px;scroll-snap-align:start;text-align:left;display:flex;flex-direction:column;gap:6px}
.st-ph img{width:112px;height:112px;object-fit:cover;border-radius:var(--r-1);background:var(--c)}
.st-ph small{display:block;font-size:13px;color:var(--soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.st-saved{display:flex;flex-direction:column}
.st-pal{display:flex;flex-direction:column;gap:9px;padding:14px 0;border-bottom:1px solid var(--rule);text-align:left}
.st-pal .strip{display:flex;height:46px;border-radius:var(--r-1);overflow:hidden}
.st-pal .strip i{flex:1;background:var(--c)}
.st-meta{display:flex;justify-content:space-between;align-items:baseline}
.st-meta b{font:400 19px/1 var(--serif)}.st-meta em{font:500 13px/1 var(--mono);letter-spacing:.1em;color:var(--faint);font-style:normal}

/* gamut wheel */
.gw{position:relative;width:100%;max-width:420px;margin:14px auto 0;aspect-ratio:1}
.gw canvas{position:absolute;inset:0;display:block}
.gw-mask{touch-action:none;cursor:grab}
.gw-names{position:absolute;inset:0;pointer-events:none}
.gw-names span{position:absolute;transform:translate(-50%,-50%);font:italic 400 17px/1.2 var(--serif);letter-spacing:0;text-transform:none;color:#F3F3F1;background:rgba(14,13,11,.7);padding:4px 6px;border-radius:var(--r-1)}
.gw-hint{text-align:center;color:var(--faint);font:italic 400 17px/1.3 var(--serif);letter-spacing:0;text-transform:none;margin-top:12px}
.gw-pal{display:flex;height:64px;margin-top:20px;border-radius:var(--r-1);overflow:hidden}
.gw-pal i{flex:1;background:var(--c);transition:background .15s}

/* palette view */
/* the tappable title on a saved photo or palette (ROADMAP.md §17 jobs #2-3): a plain serif line with a quiet
   hairline underneath, the one hint that it's editable; italic + soft when it's still just the placeholder */
.pv-title{display:block;width:100%;margin-top:14px;padding:4px 0 7px;border:0;border-bottom:1px solid var(--rule);background:none;font:400 30px/1.05 var(--serif);letter-spacing:-.02em;color:var(--ink);text-align:left}
.pv-title.ph{color:var(--soft);font-style:italic}
.pv-title-input{display:block;width:100%;margin-top:14px;padding:4px 0 7px;border:0;border-bottom:1px solid var(--rule-2);background:none;font:400 30px/1.05 var(--serif);letter-spacing:-.02em;color:var(--ink)}
.pv-title-input::placeholder{color:var(--faint);font-style:italic}
.pv-img{position:relative;margin-top:10px}
.pv-img img{display:block;width:100%;max-height:52dvh;object-fit:contain;border-radius:var(--r-1);background:var(--lift)}
.pv-img #dots{position:absolute;inset:0}
.pv-img #dots i{position:absolute;width:20px;height:20px;margin:-10px;border-radius:50%;background:var(--c);box-shadow:0 0 0 2px #F3F3F1,0 2px 8px rgba(0,0,0,.4)}
.pv-ctrl{display:flex;align-items:center;gap:16px;margin-top:18px;flex-wrap:wrap}
/* segmented choices: one solid track (surface-2), the chosen one in paper; numbers stay mono, words serif */
.seg{display:inline-flex;padding:3px;border-radius:var(--r-pill);background:var(--surface-2)}
.seg button,.seg-t{min-height:36px;padding:0 14px;border-radius:var(--r-pill);font:400 17px/1 var(--serif);letter-spacing:0;text-transform:none;color:var(--soft);transition:background var(--dur-1),color var(--dur-1)}
.seg button.on,.seg-t.on{color:var(--paper-ink);background:var(--paper)}
.seg-t{background:var(--surface-2)}
.pv-pal{display:flex;margin-top:16px;border-radius:var(--r-1);overflow:hidden;height:150px}
.pv-pal i{flex:var(--w) 1 0;background:var(--c);display:flex;align-items:flex-end;padding:8px;min-width:0}
.pv-pal i span{font:500 13px/1 var(--mono);letter-spacing:.06em}
.pv-pal i[data-ink="dark"]{color:#141311}.pv-pal i[data-ink="light"]{color:#fff}
.pv-chips{display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:8px;height:auto;overflow:visible}
.pv-chips i{aspect-ratio:1;border-radius:var(--r-1)}
.pv-pal + .h-list{margin-top:16px}
.st-mini{position:relative;width:120px;height:120px}.st-mini svg{position:absolute;inset:0;width:100%;height:100%}

/* ---------- daily challenge ---------- */
.ch-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;margin:22px 0 18px}
.ch-grid span{display:flex;flex-direction:column;gap:6px;align-items:center}
.ch-grid i{width:100%;aspect-ratio:1;background:var(--c);border-radius:var(--r-1)}
.ch-grid .miss i{opacity:.25}
.ch-grid em{font-size:13px;color:var(--faint);font-style:normal}
.ch-grid .hit em{color:var(--ink)}
.sec-link{width:100%;text-align:left}
.sec-link span{display:inline-flex;align-items:center;gap:2px}
.sec-link svg{width:13px;height:13px}

/* ---------- your eye ---------- */
.eye-sec .sec-head{margin-top:34px}
.eye-chart{display:block;width:100%;height:120px;margin-top:14px;color:var(--ink);overflow:visible}
.eye-ends{display:flex;justify-content:space-between;font:500 13px/1 var(--mono);letter-spacing:.06em;color:var(--faint);margin-top:8px}
.eye-ends b{color:var(--ink);font-weight:500}
.eye-gain{font:400 22px/1.15 var(--serif);margin-top:12px}
.eye-fams{display:flex;flex-direction:column;gap:9px;margin-top:14px}
.eye-fams div{display:grid;grid-template-columns:70px 1fr 38px;align-items:center;gap:10px;font-size:13px;color:var(--soft)}
.eye-fams i{height:10px;width:var(--w);background:var(--c);border-radius:var(--r-1)}
.eye-fams b{text-align:right;font-size:13px;color:var(--ink);font-weight:500}
.eye-ch{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;margin-top:14px}
.eye-ch span{display:grid;grid-template-columns:repeat(3,1fr);gap:2px}
.eye-ch i{aspect-ratio:1;background:var(--rule);border-radius:var(--r-1)}
.eye-ch i.hit{background:var(--good)}

/* tab header actions and the install hint */
.bar-r{display:flex;gap:2px;margin-right:-10px}
.inst{flex:none;display:flex;flex-direction:column;gap:10px;margin-top:30px;padding:16px 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.inst b{display:block;font:400 22px/1.1 var(--serif)}
.inst span{display:block;color:var(--soft);font-size:14px;margin-top:4px}
.inst-act{flex:none;display:flex;gap:18px}.inst-act .btn{width:auto;min-height:36px}

/* ---------- peek: a color's story over the flashcards, without leaving them ---------- */
.peek-btn{display:inline-flex;align-items:center;gap:6px;margin-top:12px;padding:8px 0;font:italic 400 17px/1.2 var(--serif);letter-spacing:0;text-transform:none;color:var(--soft);border-bottom:1px solid var(--rule-2)}
.card .peek-btn{opacity:0;pointer-events:none;transition:opacity .3s .15s}
.card.revealed .peek-btn{opacity:1;pointer-events:auto}
.page .peek-btn{align-self:flex-start;margin-top:8px}
.peek{position:fixed;inset:0;top:max(28px,var(--top));z-index:30;max-width:540px;margin:0 auto;background:#14130E;border-top:1px solid var(--rule);border-radius:var(--r-3) var(--r-3) 0 0;overflow-y:auto;overscroll-behavior:contain;padding:10px var(--g) 0;animation:sheetIn .42s var(--ease) both;box-shadow:0 -20px 60px rgba(0,0,0,.6)}
.pk-grab{width:36px;height:3px;background:var(--rule);margin:2px auto 14px;position:relative}
.pk-grab::before{content:"";position:absolute;inset:-16px -80px}
.pk-hero{height:min(38dvh,300px);background:var(--c);border-radius:var(--r-1);padding:18px;display:flex;flex-direction:column;justify-content:flex-end;gap:6px}
.pk-hero[data-ink="dark"]{color:#141311}.pk-hero[data-ink="light"]{color:#fff}
.pk-hero h2{font:400 clamp(44px,13vw,64px)/.92 var(--serif);letter-spacing:-.03em;word-break:break-word}
.pk-hero .mono,.pk-hero small{font:italic 400 17px/1.2 var(--serif);letter-spacing:0;text-transform:none;opacity:.72}
/* the color link sheet (js/swatch.js) can show a longer phrase ("between teal and slate"), not just one word */
.sw-sheet .pk-hero h2{font-size:clamp(26px,7.5vw,38px)}
.sw-sheet .pk-hero{height:auto;min-height:160px}
.pk-vs{display:flex;gap:12px;align-items:center;margin-top:16px}
.pk-vs .pair{display:flex;flex:none}.pk-vs .pair i{width:26px;height:26px;background:var(--c)}
.pk-vs p{font:400 19px/1.2 var(--serif)}
.pk-lead{margin-top:14px;font-size:15px;line-height:1.55;color:var(--soft)}
.pk-sec{margin-top:26px;padding-top:12px;border-top:1px solid var(--rule)}
.pk-sec h3{font:italic 400 17px/1.2 var(--serif);letter-spacing:0;text-transform:none;color:var(--faint);margin-bottom:10px}
.pk-sec p{font-size:15px;line-height:1.6;color:var(--ink)}
.pk-ptgs figure{margin:0}
.pk-ptgs{display:grid;grid-template-columns:repeat(2,1fr);gap:14px 12px}
.pk-ptgs img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r-1);background:var(--lift)}
.pk-ptgs figcaption{display:flex;flex-direction:column;gap:3px;margin-top:6px}
.pk-ptgs b{font:400 16px/1.15 var(--serif)}
.pk-ptgs span{font:500 13px/1.4 var(--mono);letter-spacing:.06em;color:var(--faint)}
.pk-foot{position:sticky;bottom:0;margin:28px calc(-1 * var(--g)) 0;padding:14px var(--g) calc(var(--bottom) + 14px);background:linear-gradient(rgba(20,19,14,0),#14130E 30%)}

/* ---------- design pass (2026-10-07): shared headers, Today's three, taste tiles ---------- */
/* every tab: the brand line (bar), then the tab's title */
.bar + .tab-title,.bar + .kick{margin-top:var(--s5)}
.bar .bar-r .icon-btn{margin-right:0}
/* every inner screen: back or close on the left, the title centered, an optional action on the right */
.nav-top{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:var(--s3);min-height:48px}
.nav-top>.icon-btn{margin-left:-12px;justify-self:start}
.nav-title{font:italic 400 17px/1.25 var(--serif);letter-spacing:0;text-transform:none;color:var(--soft);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:62vw}
.nav-r{justify-self:end;display:flex;gap:var(--s2)}
/* older task headers with a lone title center it the same way */
.deck-top>.eyebrow:last-child{text-align:center;padding-right:32px}
.art-top>.eyebrow{flex:1;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Today's three: equal quiet tiles, each a small picture, a name and a done line */
.today-head{margin-top:var(--s7)}
.trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s3);margin-top:var(--s4)}
.tday{display:flex;flex-direction:column;min-width:0;text-align:left;transition:transform .35s var(--spring),opacity .25s}
.tday:active{transform:scale(.96);opacity:.8}
.tday-art{position:relative;display:block;aspect-ratio:1;border-radius:var(--r-1);overflow:hidden;background:var(--lift)}
.tday-ch{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:1fr 1fr;gap:2px;background:none}
.tday-ch i{background:var(--c);position:relative}
.tday-ch i.miss{opacity:.28}
.tday-ch i.hit::after{content:"";position:absolute;left:50%;top:50%;width:5px;height:5px;margin:-2.5px;border-radius:50%;background:#F3F3F1}
.tday-sa{display:grid;background:none}
.tday-sa .sa{width:auto;height:auto;min-height:0;aspect-ratio:auto;border-radius:0}
.tday b{font:400 19px/1.05 var(--serif);margin-top:var(--s2)}
.tday-st{display:flex;align-items:center;gap:6px;margin-top:5px;font-size:13px;line-height:1.25;color:var(--soft);min-width:0}
.tday-st::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;box-shadow:inset 0 0 0 1px var(--faint)}
.tday.done .tday-st::before{background:var(--good);box-shadow:none}
.tday.done .tday-art{opacity:.55}
.home .collection{margin-top:var(--s7)}

/* Studio: the taste tests sit beside the palettes they make */
.st-taste .st-tile:first-child{grid-column:auto}
.st-taste .st-tile:first-child .st-art{aspect-ratio:1/.8}
.st-taste{border-top:0;padding-top:0;margin-top:var(--s4)}
.st-duel{display:flex;gap:6px;padding:16% 14%}
.st-duel>i{flex:1;align-self:stretch;background:var(--c);border-radius:var(--r-1);box-shadow:0 10px 18px -10px rgba(0,0,0,.8)}
.st-duel>i:first-child{transform:rotate(-4deg)}.st-duel>i:last-child{transform:rotate(4deg)}
.st-duel-pal>i{display:flex;flex-direction:column;background:none;overflow:hidden}
.st-duel-pal b{flex:1;margin:0;background:var(--c)}
/* Explore: the sticky header carries its own top padding, so the screen adds none (the bar lines up with every tab) */
.explore{padding-top:0}

/* ---------- look-alikes: a color among its closest neighbors ---------- */
[data-nb]{cursor:pointer}
.vs[data-nb]::after,.compare[data-nb]::after,.pk-vs[data-nb]::after{content:"look-alikes ↗";display:block;margin-top:6px;font:italic 400 17px/1.2 var(--serif);letter-spacing:0;text-transform:none;opacity:.55}
.compare[data-nb]{flex-wrap:wrap}
.compare[data-nb]::after{flex-basis:100%}
.lk-ring{position:relative;width:min(300px,78vw);aspect-ratio:1;margin:8px auto 4px}
.lk-mid{position:absolute;inset:27%;border-radius:50%;background:var(--c);display:flex;align-items:center;justify-content:center;text-align:center;padding:8px}
.lk-mid[data-ink="dark"]{color:#141311}.lk-mid[data-ink="light"]{color:#fff}
.lk-mid b{font:400 22px/1 var(--serif)}
.lk-dot{position:absolute;width:21%;aspect-ratio:1;margin:-10.5%;border-radius:50%;background:var(--c);transition:transform .25s var(--spring),box-shadow .2s}
.lk-dot.on{transform:scale(1.15);box-shadow:0 0 0 2px var(--ink)}
.lk-pair{display:flex;gap:2px;height:120px;margin-top:10px}
.lk-pair div{flex:1;background:var(--c);display:flex;align-items:flex-end;padding:10px;border-radius:var(--r-1)}
.lk-pair div[data-ink="dark"]{color:#141311}.lk-pair div[data-ink="light"]{color:#fff}
.lk-pair span{font:400 20px/1 var(--serif)}
.lk-line{margin-top:10px;font-size:15px;line-height:1.5}
.lk-list{display:grid;gap:2px;margin-top:16px}
.lk-row{display:grid;grid-template-columns:28px 1fr auto;grid-template-rows:auto auto;column-gap:12px;align-items:center;text-align:left;padding:10px 6px;border-radius:var(--r-1)}
.lk-row.on{background:var(--lift)}
.lk-row i{grid-row:1 / span 2;width:28px;height:28px;border-radius:50%;background:var(--c)}
.lk-row b{font:400 19px/1.1 var(--serif)}
.lk-row span{grid-column:2;font-size:13px;color:var(--soft)}
.lk-row em{grid-column:3;grid-row:1 / span 2;font:italic 400 17px/1.2 var(--serif);font-style:normal;letter-spacing:0;text-transform:none;color:var(--soft)}

/* ================================================================
   Navigation foundation (DESIGN-SYSTEM.md §2): one floor (the honeycomb,
   js/home.js), four rooms (Learn/Train/Explore/Studio) that rise over it.
   js/core.js builds this chrome around whatever a room's own show(html,cls,tab)
   call already renders, so no other screen's JS had to change.
   ================================================================ */

/* the solid corner button: Rooms (left, everywhere) and View (right, Home only) */
.corner{position:fixed;z-index:16;bottom:calc(var(--bottom) + 12px);width:56px;height:56px;border-radius:50%;
  background:var(--surface-2);border:1px solid rgba(236,232,223,.14);box-shadow:0 8px 24px rgba(0,0,0,.5);
  display:grid;place-items:center;color:var(--ink);transition:transform .3s var(--spring),background .2s,color .2s}
.corner.l{left:16px}.corner.r{right:16px}
.corner:active{transform:scale(.92)}
.corner svg{width:24px;height:24px}
.corner.on{background:var(--paper);color:var(--paper-ink);border-color:transparent}

/* a Room: a full-height sheet over the dimmed honeycomb, entered by the signature motion (§8). A thin strip of
   the (decorative) honeycomb shows above it, so you can see you're still on top of Home; tapping it goes home. */
.room-floor-peek{position:fixed;left:0;right:0;top:0;height:calc(var(--top) + 12px);z-index:13;overflow:hidden;background:var(--ground)}
.room-floor-peek i{position:absolute;top:-60%;height:220%;width:6.6%;transform:skewX(-14deg);opacity:.32}
.room-sheet{position:fixed;left:0;right:0;top:calc(var(--top) + 12px);bottom:0;z-index:14;background:var(--surface-1);
  border-radius:var(--r-3) var(--r-3) 0 0;box-shadow:0 -16px 48px rgba(0,0,0,.45);display:flex;flex-direction:column;
  overflow:hidden;animation:roomIn var(--grow) var(--ease-grow) both}
@keyframes roomIn{from{transform:translateY(5%) scale(.97);opacity:.6}}
/* margin:0, min-width:0 (David, 2026-10-09): .screen's base rule centers itself with margin:0 auto (for the rare
   wide/desktop viewport). Auto margins disable flex stretch on the cross axis, so inside room-sheet (a column
   flex container) .screen stopped filling the room's width and instead sized itself to its content (shrink-to-fit)
   -- and a non-wrapping horizontal rail inside it (chip rows like .fv-doors, a mix-up row's chips + Untangle
   button) has a min-content width that can be wider than the room itself. room-sheet's own overflow:hidden then
   quietly clipped the right edge of EVERY row instead of just that one rail scrolling on its own, which is what
   made the whole You page look "too wide" (buttons, swatch strips and the favorite painting cut at the edge). */
.room-sheet>.screen{flex:1;width:100%;min-width:0;min-height:0;overflow-y:auto;padding-top:calc(var(--s4) + 6px)}
/* inside a room the sheet already sits below the status bar: sticky page headers drop their own safe-area inset */
.room-sheet .x-head{padding-top:12px}.room-sheet .art-top{padding-top:10px}
@media (prefers-reduced-motion:reduce){.room-sheet{animation:fade var(--dur-1) linear both}}

/* the stem: Rooms raises up to five bubbles (Home at the foot, only inside a room) in a curve above the corner */
.rooms-stem{position:fixed;left:0;right:0;bottom:0;z-index:17;pointer-events:none}
.rooms-stem .rm-bubble{position:absolute;left:14px;display:flex;align-items:center;gap:16px;pointer-events:auto;
  background:none;border:0;text-align:left;opacity:0;transform:translateY(16px) scale(.9);
  transition:opacity var(--dur-2) var(--ease),transform var(--dur-2) var(--ease);
  transition-delay:calc(var(--i) * 30ms);
  bottom:calc(var(--bottom) + 12px + 100px * (var(--i) + 1));}
.rooms-stem.on .rm-bubble{opacity:1;transform:none}
.rm-art{width:78px;height:78px;border-radius:50%;flex:none;overflow:hidden;display:block;box-shadow:0 10px 30px rgba(0,0,0,.55);background:var(--surface-2)}
.rm-art-strip{display:flex}
.rm-art-strip i{flex:1}
.rm-art-home{display:grid;place-items:center;color:var(--ink)}
.rm-art-home svg{width:30px;height:30px}
.rm-label b{display:block;font:400 30px/1.02 var(--serif);letter-spacing:-.02em;color:var(--ink);text-shadow:0 2px 10px rgba(0,0,0,.6)}
.rm-label em{display:block;margin-top:4px;font:italic 400 17px/1.3 var(--serif);color:#D8D3C6;text-shadow:0 2px 10px rgba(0,0,0,.6)}
body.stem-open .screen,body.stem-open .hc,body.stem-open .hm-stage{filter:brightness(.3)}

/* Learn room: "the path" as a column of units drawn as their own colors (DESIGN-SYSTEM §12) */
.path-list{display:flex;flex-direction:column;gap:14px;margin-top:14px}
.path-band{display:flex;border-radius:var(--r-1);overflow:hidden;gap:2px}
.path-band i{flex:1}
.path-done .path-band{height:30px}
.path-current .path-band{height:72px}
.path-future .path-band{height:8px}
.path-cap{display:flex;justify-content:space-between;align-items:baseline;margin-top:8px}
.path-future-name{color:var(--soft);font-weight:400}

/* ---------- How many: −/+ steppers beside a count slider (js/core.js countify, stepify). Row one: the label and
   −  N  +; row two: the slider, full width. Opaque buttons, 44 px targets. ---------- */
.cnt-wrap.cnt-wrap{display:grid;grid-template-columns:1fr auto;align-items:center;column-gap:12px;row-gap:2px}
.cnt-wrap>input[type=range]{grid-column:1/-1;grid-row:2;width:100%;min-width:0}
.cnt-wrap>:first-child:not(input){grid-column:1;grid-row:1}
.cnt-step{grid-column:2;grid-row:1;display:inline-flex;align-items:center;gap:6px}
.cnt-step>b,.cnt-step>span{min-width:3.2ch;text-align:center !important;font-variant-numeric:tabular-nums}
.cnt-b{flex:none;width:44px;height:44px;border-radius:50%;border:1px solid var(--rule);background:var(--surface-3);color:var(--ink);display:grid;place-items:center;padding:0;cursor:pointer;touch-action:manipulation;-webkit-user-select:none;user-select:none;transition:transform var(--dur-0) var(--ease),background var(--dur-0)}
.cnt-b:active:not(:disabled){transform:scale(.9);background:var(--ink);color:var(--ground)}
.cnt-b:disabled{opacity:.32;cursor:default}
.cnt-b:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.cs-hl-bar .cnt-b{background:var(--paper-line);color:var(--paper-ink);border-color:transparent}

/* ---------- the black-bar diagnostic HUD (js/core.js vbHud) ---------- */
.vb-hud{position:fixed;left:8px;right:8px;bottom:8px;z-index:999;background:#000;color:#6f6;border:1px solid #3a3;border-radius:10px;padding:10px 12px;box-shadow:0 8px 24px rgba(0,0,0,.6)}
.vb-hud pre{margin:0 0 8px;font:11px/1.5 "Geist Mono",ui-monospace,monospace;white-space:pre-wrap;word-break:break-all;max-height:40vh;overflow:auto}
.vb-hud-row{display:flex;gap:8px}
.vb-hud-row button{flex:1;min-height:36px;border-radius:8px;border:1px solid #3a3;background:#0a1a0a;color:#9f9;font:13px/1 "Geist Mono",ui-monospace,monospace}
.vb-hud-row button:active{background:#143014}