/* Workoutable styles */
/* base */
:root{color-scheme:light;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}html{scroll-padding-top:env(safe-area-inset-top,0px)}body{margin:0;padding:0;font:14px -apple-system,BlinkMacSystemFont,sans-serif;background:#faf9f5;color:#141413}img{max-width:100%}[hidden]:not([hidden=until-found i]){display:none!important}

/* Workoutable. The app chrome is deliberately quiet: every set brings its own colour. */
:root{
  --ultra:#2438E0;--ember:#F2661C;--mint:#0FA37A;--graphite:#16161A;--chalk:#F7F5F0;
  --ground:#FFFFFF;--wash:#F0EEE7;--line:#E2DED2;--muted:#6B6960;
  --display:"Poppins","Arial Black",Helvetica,Arial,sans-serif;
  --text:"Instrument Sans","Helvetica Neue",Arial,sans-serif;
  --serif:"Instrument Serif",Georgia,"Times New Roman",serif;
  --mono:"DM Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  color-scheme:light;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{background:var(--ground);color:var(--graphite)}
body{font-family:var(--text);font-size:16px;line-height:1.5;margin:0}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:3px solid var(--graphite);outline-offset:2px}
.wrap{max-width:1180px;margin:0 auto;padding-inline:16px;padding-block:12px 48px}
.disp{font-family:var(--display);font-weight:800;text-transform:uppercase;letter-spacing:-.02em}
.mono{font-family:var(--mono);font-weight:500}
.lbl{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}

/* chrome */
.bar{display:flex;flex-wrap:wrap;align-items:center;gap:14px 16px;padding-block:16px 0;margin-bottom:28px}
.bar .tabs{margin-left:auto}
.linkbtn{border:0;background:transparent;padding:6px 4px;font:inherit;color:inherit;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
#signout{font-family:var(--mono);font-size:12px;color:var(--muted)}
.bar .tabs[hidden]+#signout{margin-left:auto}
.brand{display:flex;flex-direction:column;align-items:flex-start;gap:6px;background:none;border:0;padding:0;text-align:left}
.mark{width:34px;height:34px;flex:none;position:relative}
.mark i{position:absolute;border-radius:50%;display:block}
.mark i:nth-child(1){inset:0;background:#8FC6F5}
.mark i:nth-child(2){width:14px;height:14px;right:-2px;bottom:-1px;background:#FFB4C6}
.brand b{font-size:19px;line-height:1;display:block;font-family:var(--display);font-weight:800;text-transform:uppercase;letter-spacing:-.02em}
.brand .wm-logo{display:block;height:64px;width:auto}
/* parent brand at the right end. Both images are cropped to their letters, so its right edge meets the cards below,
   and its bottom sits on the bottom of "able" (row 374 of logo.png's 381) */
.bar .wtw-logo{display:block;height:40px;width:auto;align-self:flex-start;margin-top:calc(64px*374/381 - 40px)}
/* players: nothing else on the right, so push it there (owner: the tabs already do) */
#signout[hidden]+.wtw-logo{margin-left:auto}
@media (max-width:640px){ .bar{padding-block:12px 0;gap:12px 10px;margin-bottom:22px} .brand .wm-logo{height:40px} .bar .wtw-logo{height:26px;margin-top:calc(40px*374/381 - 26px)} .tabs button{padding:7px 12px} }
/* the line under the header: the tagline, then a hairline as wide as the cards */
.tagline{flex-basis:100%;display:flex;align-items:center;gap:12px;margin:10px 0 0;font-family:var(--display);font-weight:600;font-size:14px;line-height:1;color:var(--graphite)}
.tagline .rule{flex:1;height:1px;background:var(--line)}
@media (max-width:640px){ .tagline{font-size:13px;margin-top:8px} }
.tabs{display:flex;gap:4px;background:var(--wash);padding:4px;border-radius:999px}
.tabs button{border:0;background:transparent;padding:8px 16px;border-radius:999px;font-weight:600;font-size:14px}
.tabs button[aria-selected="true"]{background:var(--graphite);color:var(--chalk)}

/* ---------- a card, themed ---------- */
.face{position:absolute;inset:0;background:var(--bg);color:var(--fg);border-radius:var(--rad,6cqw);overflow:hidden;display:flex;flex-direction:column;padding:7cqw;backface-visibility:hidden;-webkit-backface-visibility:hidden;font-family:var(--cbody)}
:is(.face,.art) .mo{position:absolute;pointer-events:none}
/* Poster · Stripes: three flat bands of colour along the bottom (a record-sleeve look) */
:is(.face,.art) .stripes{left:0;right:0;bottom:0;height:13%;display:flex;flex-direction:column}
:is(.face,.art) .stripes i{display:block;flex:5}
:is(.face,.art) .stripes i:nth-child(1){background:var(--m1)}
:is(.face,.art) .stripes i:nth-child(2){background:var(--m2);flex:5}
:is(.face,.art) .stripes i:nth-child(3){background:#16161A;flex:3}
.face.is-stripes{padding-bottom:23cqw}

/* Ticket: dark band on top, a stub below a perforated line, notches cut from both edges */
:is(.face,.art) .tband{left:0;right:0;top:0;height:15.5cqw;background:#16161A}
:is(.face,.art) .tstub{left:0;right:0;bottom:0;height:20cqw;background:var(--m1)}
:is(.face,.art) .tstub .bars{position:absolute;right:7cqw;bottom:5.5cqw;width:24cqw;height:8cqw;background:repeating-linear-gradient(90deg,#16161A 0 .6cqw,transparent .6cqw 1.3cqw,#16161A 1.3cqw 2.5cqw,transparent 2.5cqw 3.1cqw,#16161A 3.1cqw 3.5cqw,transparent 3.5cqw 4.4cqw)}
:is(.face,.art) .tperf{left:5cqw;right:5cqw;bottom:20cqw;border-top:.7cqw dashed rgba(22,22,26,.45)}
.face.is-ticket,.art.is-ticket{-webkit-mask:radial-gradient(circle at 0 calc(100% - 20cqw),#0000 4cqw,#000 4.1cqw) left/51% 100% no-repeat,radial-gradient(circle at 100% calc(100% - 20cqw),#0000 4cqw,#000 4.1cqw) right/51% 100% no-repeat;mask:radial-gradient(circle at 0 calc(100% - 20cqw),#0000 4cqw,#000 4.1cqw) left/51% 100% no-repeat,radial-gradient(circle at 100% calc(100% - 20cqw),#0000 4cqw,#000 4.1cqw) right/51% 100% no-repeat}
.face.is-ticket .top{min-height:7cqw}
.face.is-ticket .pill{background:var(--bg);color:#16161A}
.face.is-ticket .top::after{content:'Workoutable';font-family:var(--text);font-weight:600;font-size:3cqw;letter-spacing:0;color:#fff;opacity:.8}
.face.is-ticket .body{margin-top:3cqw;margin-bottom:15cqw}
.face.is-ticket .foot{position:absolute;left:7cqw;bottom:7.5cqw;z-index:1;font-family:var(--cdisp);font-weight:700;font-size:4.2cqw;letter-spacing:-.01em;text-transform:none;opacity:.85}
:is(.face,.art) .big{width:72cqw;aspect-ratio:1;right:-20cqw;bottom:-28cqw;border-radius:50%;background:var(--m1)}
:is(.face,.art) .blob{width:64cqw;aspect-ratio:1;right:-18cqw;bottom:-22cqw;border-radius:50%;background:var(--m1);box-shadow:-14cqw -10cqw 0 0 var(--m2)}
:is(.face,.art) .dotm{inset:0;background-image:radial-gradient(var(--gridc) var(--gridr,.55cqw),transparent calc(var(--gridr,.55cqw) + .1cqw));background-size:calc(6cqw*var(--gridscale,1)) calc(6cqw*var(--gridscale,1));opacity:.35}
:is(.face,.art) .arc{right:-18cqw;bottom:-30cqw;width:70cqw;aspect-ratio:1;border-radius:50%;border:10cqw solid var(--m1);box-sizing:border-box}
/* grid lines as one repeating tile, so every line is the same weight and spacing */
:is(.face,.art) .graph{--gs:calc(7cqw*var(--gridscale,1));inset:0;background-image:linear-gradient(to right,var(--gridc) var(--gridstroke,max(1px,.25cqw)),transparent 0),linear-gradient(to bottom,var(--gridc) var(--gridstroke,max(1px,.25cqw)),transparent 0),linear-gradient(to right,var(--gridc) var(--gridstroke,max(1.6px,.45cqw)),transparent 0),linear-gradient(to bottom,var(--gridc) var(--gridstroke,max(1.6px,.45cqw)),transparent 0);background-size:var(--gs) var(--gs),var(--gs) var(--gs),calc(var(--gs)*4) calc(var(--gs)*4),calc(var(--gs)*4) calc(var(--gs)*4);opacity:.2}
:is(.face,.art) .ruled{inset:0;background-image:linear-gradient(to bottom,var(--gridc) var(--gridstroke,max(1px,.25cqw)),transparent 0);background-size:100% calc(8cqw*var(--gridscale,1));opacity:.28}
:is(.face,.art) .rmargin{top:0;bottom:0;left:4.2cqw;width:max(1px,.45cqw);background:#E36F6F;opacity:.55}
:is(.face,.art) .halfcircle{width:56cqw;aspect-ratio:1;left:50%;bottom:0;transform:translate(-50%,50%);border-radius:50%;background:var(--m1)}
.face .top{position:relative;display:flex;justify-content:space-between;align-items:center;gap:3cqw}
.face .pill{background:var(--pill);color:var(--pillfg);border-radius:999px;padding:1.4cqw 3.4cqw;font-family:var(--text);font-weight:600;font-size:max(3.3cqw,10px);letter-spacing:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:70cqw}
.face .pills{display:flex;gap:1.6cqw;min-width:0}
.face .pill.soft{background:transparent;color:inherit;box-shadow:inset 0 0 0 .35cqw currentColor;opacity:.8}
.face.is-ticket .pill.soft{color:#fff}
.face .num{font-family:var(--mono);font-size:2.9cqw;letter-spacing:.06em;opacity:.8}
.face .body{position:relative;flex:1;display:flex;flex-direction:column;justify-content:flex-start;gap:4cqw;min-height:0;padding-block:12cqw 4cqw}
/* long text never squeezes into the next thing: text blocks keep their height and the body scrolls instead */
.face .body{overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;-webkit-overflow-scrolling:touch}
.face .body:is(.more,.up){--ft:#000;--fb:#000;-webkit-mask-image:linear-gradient(to bottom,var(--ft) 0,#000 12cqw,#000 calc(100% - 10cqw),var(--fb));mask-image:linear-gradient(to bottom,var(--ft) 0,#000 12cqw,#000 calc(100% - 10cqw),var(--fb))}
.face .body.more{--fb:transparent}.face .body.up{--ft:transparent}
.face .body > :is(.q,.ans,.why,.eyebrow,.xy,.unit,.order,.reveal){flex-shrink:0}
.face.is-multi .body{padding-top:5cqw}
.face.back .body{padding-top:10cqw}
.face.has-big .body{padding-bottom:21cqw}
.face.back.has-big .body{padding-bottom:6cqw}
.face .q{margin:0;font-family:var(--cdisp);font-weight:var(--qw,var(--cw,700));line-height:calc(var(--qlh,1.12)*1em*var(--lead,1));white-space:pre-line;letter-spacing:var(--qtrack,var(--ctrack,-.02em));text-transform:var(--ccase,none);text-wrap:balance;overflow-wrap:break-word}
.face .eyebrow{font-family:var(--text);font-weight:600;font-size:max(3.4cqw,10.5px);letter-spacing:0;opacity:.75}
.face .order{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2.4cqw}
.face .order li{display:flex;gap:2.8cqw;align-items:baseline;font-family:var(--cdisp);font-weight:700;font-size:5.6cqw;line-height:calc(1.15em*var(--lead,1))}
.face .order b{flex:none;width:6.4cqw;aspect-ratio:1;border-radius:50%;background:var(--pill);color:var(--pillfg);display:grid;place-items:center;font-family:var(--mono);font-size:3cqw;font-weight:500}
.face .clues{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:1.8cqw;flex:1;align-content:center;min-height:0}
.face .clues li{position:relative;display:flex;flex-direction:column;border-radius:2.6cqw;overflow:hidden;background:rgba(255,255,255,.5);min-height:0;font-family:var(--cdisp);font-weight:700;letter-spacing:-.01em;line-height:calc(1.1em*var(--lead,1))}
.face .clues li.no-pic{flex-direction:row;align-items:center;justify-content:flex-start;gap:2.2cqw;padding:2.4cqw 2.6cqw;text-align:left}
.face .clues li.no-pic .idx{position:static;flex:none}
.face .clues .idx{position:absolute;top:1.6cqw;left:1.6cqw;z-index:2;width:6cqw;aspect-ratio:1;border-radius:50%;background:var(--pill);color:var(--pillfg);display:grid;place-items:center;font-family:var(--mono);font-size:2.6cqw;font-weight:500;letter-spacing:0;text-transform:none}
.face .clues .clue-text{overflow-wrap:anywhere;padding:2cqw 2.6cqw}
.face .clues li.no-pic .clue-text{padding:0}
.face .clues .cluepic{width:100%;height:21cqw;flex:none;border-radius:0;overflow:hidden;background:rgba(127,127,127,.18);border:0;padding:0;display:block;position:relative}
.face .clues .cluepic img{width:100%;height:100%;object-fit:cover;display:block}
.face .clues .cluepic.empty{display:grid;place-items:center;font-family:var(--mono);font-size:2.4cqw;letter-spacing:.06em;text-transform:uppercase;opacity:.75;cursor:pointer;color:inherit}
.face .clues.list-layout{display:flex;flex-direction:column;grid-template-columns:none;gap:2.4cqw}
.face .clues.list-layout li{flex-direction:row;align-items:center;background:transparent;border-radius:0;min-height:auto;padding:0;gap:2.6cqw}
.face .clues.list-layout li .idx{position:static}
.face .clues.list-layout li .clue-text{padding:0}
.face .clues .oddflag{position:absolute;top:1.6cqw;right:1.6cqw;z-index:2;width:6cqw;aspect-ratio:1;border-radius:50%;background:rgba(0,0,0,.28);color:#fff;display:grid;place-items:center;font-size:2.8cqw;border:0;padding:0;cursor:pointer}
.face .clues .oddflag[aria-pressed="true"]{background:var(--pill);color:var(--pillfg)}
.face .beats{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2.6cqw;overflow:auto}
.face .beats li{display:flex;gap:2.6cqw;align-items:baseline}
.face .beats .bdate{flex:none;min-width:9cqw;font-family:var(--mono);font-size:2.6cqw;letter-spacing:.06em;opacity:.75}
.face .beats .btext{font-family:var(--cdisp);font-weight:700;letter-spacing:var(--ctrack,-.01em);line-height:calc(1.1em*var(--lead,1));overflow-wrap:break-word}
.face .xy{display:flex;flex-direction:column;gap:4.4cqw}
.face .xy .xyrow{display:flex;flex-direction:column;gap:.8cqw}
.face .xy .xylabel{font-family:var(--text);font-weight:600;font-size:max(3.4cqw,10.5px);letter-spacing:0;opacity:.75}
.face .xy .xyval{margin:0;font-family:var(--cdisp);font-weight:var(--cwb,800);letter-spacing:var(--ctrack,-.02em);line-height:calc(1.02em*var(--lead,1));overflow-wrap:break-word;text-wrap:balance}
.face .unit{margin:0;font-family:var(--mono);font-size:3cqw;opacity:.7;letter-spacing:.04em}
.face .pic{border-radius:3cqw;overflow:hidden;aspect-ratio:4/3;background:rgba(0,0,0,.08);flex:none}
.face .pic img{width:100%;height:100%;object-fit:cover;display:block}
.face .pic.empty{display:grid;place-items:center;font-family:var(--mono);font-size:3cqw;letter-spacing:.1em;text-transform:uppercase;opacity:.7}
.face .ans{margin:0;font-family:var(--cdisp);font-weight:var(--cwb,800);letter-spacing:var(--ctrack,-.025em);line-height:calc(1.02em*var(--lead,1));overflow-wrap:break-word;hyphens:auto;text-wrap:balance}
.face .why{margin:0;font-family:var(--cbody);font-size:4.3cqw;line-height:1.45;white-space:pre-line;font-weight:400;max-width:62em;text-wrap:pretty}
.face .foot{position:relative;font-family:var(--text);font-weight:600;font-size:max(3cqw,10px);letter-spacing:0;opacity:.7}
/* word-level styling */
.face b,.face strong{font-weight:800}
.face i,.face em{font-style:italic}
.face .f-display{font-family:var(--cdisp)}
.face .f-sans{font-family:var(--text);font-weight:600}
.face .f-serif{font-family:var(--serif);font-weight:400;letter-spacing:0}
.face .f-mono{font-family:var(--mono);font-weight:500;letter-spacing:-.01em}
.face .sz-n2{font-size:.68em}.face .sz-n1{font-size:.84em}.face .sz-p1{font-size:1.2em}.face .sz-p2{font-size:1.45em}
/* bigger words get just enough line to not touch the line above */
.face .sz-p1,.face .sz-p2{line-height:1}
/* editing on the card */
.face [contenteditable]{cursor:text;border-radius:1.5cqw}
.face [contenteditable]:hover{box-shadow:0 0 0 .8cqw rgba(127,127,127,.18)}
.face [contenteditable]:focus{outline:none;box-shadow:0 0 0 .8cqw rgba(127,127,127,.28)}
.face [contenteditable][data-ph]:empty::before{content:attr(data-ph);opacity:.5}
.face .pic.pickable{cursor:pointer}
/* a picture on the answer side, and where it came from: the one thing that gives way when the back is full, never the answer */
.face .ansfig{margin:0;display:flex;flex-direction:column;gap:1.4cqw;flex:0 1 auto;min-height:34cqw}
.face .ansfig .pic{flex:1 1 auto;min-height:0;aspect-ratio:auto;height:50cqw;max-height:50cqw}
.face .ansfig .pic{position:relative;background:transparent;margin-inline:-7cqw;border-radius:0}
.face .ansfig .pic img{position:relative;object-fit:cover}
.face .ansfig .pic.whole img:not(.backdrop){object-fit:contain}
.face .ansfig .pic img.backdrop{position:absolute;inset:-12%;width:124%;height:124%;object-fit:cover;filter:blur(3cqw) saturate(1.15);opacity:.9}
.face .credit{display:flex;align-items:center;gap:2cqw;font-family:var(--text);font-size:max(2.9cqw,9.5px);line-height:1.3;opacity:.75;overflow-wrap:anywhere}
.face .credit a{color:inherit;text-decoration:underline;text-underline-offset:.2em}
.face .credit [contenteditable]{flex:1;min-width:0}
.face .anspic-add,.face .anspic-rm{border:0;background:rgba(255,255,255,.55);color:inherit;border-radius:999px;font-family:var(--text);font-weight:600;font-size:3cqw;padding:1.6cqw 3.4cqw;cursor:pointer;align-self:flex-start}
.face .anspic-rm{flex:none;background:rgba(0,0,0,.08)}

.flip{position:relative;aspect-ratio:5/7;container-type:inline-size;perspective:1800px;border:0;padding:0;background:transparent;display:block;width:100%;-webkit-tap-highlight-color:transparent}
.flip .inner{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .6s cubic-bezier(.2,.75,.2,1)}
.flip.on .inner{transform:rotateY(180deg)}
.flip .back{transform:rotateY(180deg)}
.static{position:relative;aspect-ratio:5/7;width:100%;container-type:inline-size}
.static .face{backface-visibility:visible}

/* ---------- discover ---------- */
.hero{position:relative;overflow:hidden;border-radius:30px;padding:clamp(22px,4vw,40px);display:grid;grid-template-columns:minmax(0,1fr) auto;gap:22px;align-items:end;background:var(--hb);color:var(--hf);container-type:inline-size;margin-bottom:34px}
.hero .deco{position:absolute;width:34%;aspect-ratio:1;border-radius:50%;background:var(--ha);right:-6%;top:-30%;pointer-events:none;opacity:.9}
.hero > *{position:relative}
.hero h1{margin:.2em 0 0;font-family:var(--hd);font-weight:800;font-size:clamp(30px,5.4vw,56px);line-height:.95;letter-spacing:-.02em;text-wrap:balance}
.hero p{margin:10px 0 0;max-width:46ch;opacity:.92}
/* the set's subtitle above the title: text face in sentence case, not a mono caps label */
.hero .lbl{font-family:var(--text);font-weight:600;font-size:15px;letter-spacing:0;text-transform:none}
.hero .go{margin-top:20px;display:inline-flex;align-items:center;gap:9px;border:0;border-radius:999px;background:var(--hf);color:var(--hb);padding:13px 22px;font-weight:700;font-size:15px}
.hero .thumbs{display:flex;gap:10px}
.hero .thumbs .static{width:clamp(150px,17vw,200px);transform:rotate(4deg);filter:drop-shadow(0 12px 22px rgba(22,22,26,.18))}
.hero.has-img{background:var(--himg) center/cover no-repeat}
.hero.has-img::before{content:'';position:absolute;inset:0;background:linear-gradient(100deg,rgba(0,0,0,.66),rgba(0,0,0,.22) 60%,rgba(0,0,0,.05));pointer-events:none}
.hero.has-img .deco{display:none}
.hero.has-img h1,.hero.has-img p,.hero.has-img .lbl{color:#fff}
.hero.has-img .go{background:#fff;color:#16161A}
@media (max-width:720px){ .hero{grid-template-columns:1fr;border-radius:24px;margin-bottom:26px} .hero .thumbs{display:none} }
/* phones: a calmer hero — smaller type and button, a smaller corner circle */
@media (max-width:640px){ .hero{padding:22px 20px 20px;border-radius:22px} .hero .deco{width:30%;top:-16%;right:-8%}
  .hero .lbl{font-size:13px} .hero h1{font-size:28px;line-height:1} .hero p{font-size:14px;margin-top:8px} .hero .go{margin-top:16px;padding:11px 18px;font-size:14px} }

.shelf{margin-bottom:30px}
.intro{display:flex;gap:10px;align-items:flex-start;background:var(--wash);border-radius:18px;padding:12px 14px;margin-bottom:18px;font-size:15px}
.intro p{margin:0;flex:1}.intro button{border:0;background:transparent;width:36px;height:36px;margin:-6px -6px -6px 0;flex:none}
.histstrip{display:flex;flex-wrap:wrap;gap:8px 22px;align-items:baseline;width:100%;text-align:left;background:none;border:0;border-top:2px solid var(--line);border-bottom:2px solid var(--line);padding:12px 2px;margin:-8px 0 28px;cursor:pointer}
.histstrip div{display:flex;gap:6px;align-items:baseline}
.histstrip b{font-family:var(--display);font-weight:800;font-size:20px}
.histstrip span{color:var(--muted);font-size:13px}
.histstrip .more{margin-left:auto;font-weight:600;color:var(--graphite);font-size:13.5px}
.histstrip:hover .more{text-decoration:underline}
.shelf-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:12px}
.shelf-head h2{margin:0;font-size:17px;font-family:var(--display);font-weight:700;letter-spacing:-.01em}
.rail{display:grid;grid-auto-flow:column;grid-auto-columns:232px;justify-content:start;gap:14px;overflow-x:auto;padding-bottom:6px;scroll-snap-type:x proximity;scrollbar-width:thin}
.rail > *{scroll-snap-align:start}
@media (max-width:520px){ .rail{grid-auto-columns:68vw;margin-inline:-16px;padding-inline:16px;scroll-padding-inline:16px} }
.cover{border:0;padding:0;background:transparent;text-align:left;display:flex;flex-direction:column;gap:8px;color:inherit}
.art{position:relative;aspect-ratio:4/3;border-radius:18px;overflow:hidden;background:var(--bg);color:var(--fg);padding:16px;display:flex;flex-direction:column;justify-content:flex-start;container-type:inline-size;transition:transform .18s}
.cover:hover .art{transform:translateY(-4px)}
.art > h3{position:relative;z-index:1;margin:0;font-family:var(--cd);font-weight:800;font-size:clamp(17px,9.5cqw,26px);line-height:1.02;letter-spacing:-.02em;text-wrap:balance;max-width:92%}
.art .big{width:62cqw;right:-14cqw;bottom:-22cqw}
.art .blob{width:52cqw;right:-12cqw;bottom:-16cqw}
.art .arc{width:60cqw;right:-14cqw;bottom:-24cqw;border-width:9cqw}
.art .halfcircle{width:50cqw}
.art .tband{height:17cqw}.art .tstub{height:19cqw}.art .tperf{bottom:19cqw}
.art .tstub .bars{bottom:5cqw;right:6cqw;height:8cqw;width:24cqw}
/* the mask is on the cover itself, so it can't use its own cqw: 19cqw of a 4:3 cover = 25.33% of its height */
.art.is-ticket{-webkit-mask:radial-gradient(circle 10px at 0 74.67%,#0000 97%,#000) left/51% 100% no-repeat,radial-gradient(circle 10px at 100% 74.67%,#0000 97%,#000) right/51% 100% no-repeat;mask:radial-gradient(circle 10px at 0 74.67%,#0000 97%,#000) left/51% 100% no-repeat,radial-gradient(circle 10px at 100% 74.67%,#0000 97%,#000) right/51% 100% no-repeat}
.art.is-ticket > h3{margin-top:12cqw}
.art.has-img{background:var(--img) center/cover no-repeat}
.art.has-img::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.5),rgba(0,0,0,.05) 70%);pointer-events:none;z-index:0}
.art.has-img > h3{color:#fff}
.art.has-img.is-ticket{-webkit-mask:none;mask:none}
.art.has-img.is-ticket > h3{margin-top:0}
.cover .meta{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:13px;color:var(--muted)}
.cover .meta b{font-weight:600;color:var(--graphite)}
.dots{display:inline-flex;gap:3px}.dots i{width:6px;height:6px;border-radius:50%;background:var(--line)}.dots i.on{background:var(--graphite)}
.progress{height:4px;border-radius:999px;background:var(--line);overflow:hidden}
.progress i{display:block;height:100%;background:var(--graphite)}
.chips{display:flex;gap:7px;flex-wrap:wrap}
.chip{border:0;border-radius:999px;padding:7px 13px;background:var(--wash);font-weight:600;font-size:13px}
.chip[aria-pressed="true"]{background:var(--graphite);color:#fff}

/* ---------- play (session) ----------
   Fixed to the visible viewport (--vvh is set from visualViewport), so when the phone keyboard opens
   the card shrinks to fit instead of scrolling out of view. */
.session{position:fixed;left:0;right:0;top:var(--vvtop,0px);height:var(--vvh,100dvh);z-index:5;background:var(--sg);color:var(--sf);overflow:hidden;
  padding:max(10px,env(safe-area-inset-top,0px)) 16px max(12px,env(safe-area-inset-bottom,0px))}
.session.is-end{overflow-y:auto}
.scol{max-width:480px;height:100%;margin:0 auto;display:flex;flex-direction:column;gap:10px}
.session.is-end .scol{height:auto;min-height:100%}
.sbar{display:flex;align-items:center;gap:10px;flex:none}
.sbar .name{flex:1;min-width:0;font-family:var(--display);font-weight:700;font-size:15px;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sbar .name small{display:block;font-family:var(--text);font-weight:500;font-size:12.5px;letter-spacing:0;opacity:.7;margin-top:2px}
.exit{border:0;background:rgba(22,22,26,.08);color:inherit;border-radius:999px;width:44px;height:44px;font-size:17px;line-height:1;flex:none}
.spts{flex:none;background:#16161A;color:#fff;border-radius:999px;padding:7px 13px;font-family:var(--display);font-weight:800;font-size:14px;white-space:nowrap;font-variant-numeric:tabular-nums}
.prog{display:flex;gap:4px;flex:none}
.prog span{flex:1;height:5px;border-radius:9px;background:rgba(22,22,26,.13)}
.prog span.hit{background:#16161A}.prog span.near{background:rgba(22,22,26,.55)}.prog span.miss{background:rgba(22,22,26,.28)}
.prog span.now{background:#fff;box-shadow:inset 0 0 0 1.5px #16161A}
.stagewrap{flex:1;min-height:0;container-type:size;display:flex;align-items:center;justify-content:center}
.stage{width:min(100cqw,calc(100cqh * 5 / 7),440px);touch-action:pan-y}
.stage .flip{filter:drop-shadow(0 14px 26px rgba(22,22,26,.18));cursor:pointer}
.flip.nudge .inner{animation:nudge .4s}
@keyframes nudge{20%{transform:translateX(-7px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(2px)}}
.answer{flex:none;display:flex;flex-direction:column;gap:8px}
.answer form{display:flex;gap:8px}
.answer form.two{flex-wrap:wrap}.answer form.two input{flex:1 1 40%}.answer form.two .btn{flex:1 1 100%}.answer form.two.three input{flex:1 1 28%}
/* worth + double or nothing, above the answer box */
.stakerow{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:13.5px}
.stakerow b{font-family:var(--display);font-weight:800}
.stake{border:0;border-radius:999px;padding:8px 14px;min-height:40px;font-weight:700;font-size:13.5px;background:rgba(255,255,255,.75);color:#16161A;box-shadow:inset 0 0 0 1.5px rgba(22,22,26,.25)}
.stake[aria-pressed="true"]{background:#16161A;color:#fff;box-shadow:none}
.verdict b.neg{background:#FFD4CC;color:#9A1B0B}
.stakenote{display:block;font-size:12.5px;opacity:.8;margin-top:3px}
.answer input{flex:1;min-width:0;height:50px;border:2px solid #16161A;background:#fff;color:#16161A;border-radius:14px;padding:0 15px;font-size:16px}
.answer input:focus{outline:none;box-shadow:0 0 0 3px rgba(22,22,26,.18)}
.answer .btn{height:50px;border-radius:14px}
.verdict{display:flex;align-items:center;justify-content:space-between;gap:10px;border-radius:14px;padding:11px 14px;font-weight:500;font-size:15px;line-height:1.35;background:#16161A;color:#fff}
.verdict.bad{background:rgba(22,22,26,.78)}
.verdict strong{font-family:var(--display);font-weight:700}
.verdict b{flex:none;font-family:var(--display);font-weight:800;background:#fff;color:#16161A;border-radius:999px;padding:2px 10px;font-size:14px}
.opts{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.opt{min-height:52px;border-radius:14px;background:#fff;border:2px solid #16161A;color:#16161A;font-family:var(--display);font-weight:700;font-size:15px;line-height:1.15;padding:8px 10px;display:flex;align-items:center;justify-content:center;gap:8px;text-align:center}
.opts.six .opt{min-height:46px;font-size:14px}
.opt em{font-style:normal;font-family:var(--mono);font-weight:500;font-size:11px;background:#16161A;color:#fff;border-radius:50%;width:20px;height:20px;display:grid;place-items:center;flex:none}
.opt:disabled{opacity:.35}
.opt:active{transform:translateY(1px)}
.seqline{display:flex;flex-wrap:wrap;gap:6px;align-items:center;min-height:30px;font-size:13.5px}
.seqline span{background:rgba(255,255,255,.7);border-radius:999px;padding:4px 10px;font-weight:600}
.seqline .ph{background:transparent;opacity:.65;font-weight:500;padding:0}
.seqline .undo{margin-left:auto;border:0;background:transparent;font-weight:700;text-decoration:underline;min-height:36px}
.btn.big{height:52px;width:100%;border-radius:14px;font-size:16px;font-weight:700;font-family:var(--display)}
.btn.ghost.big{height:44px;font-family:var(--display);font-weight:600;font-size:14px;letter-spacing:0;text-transform:none;opacity:.75}
.btn.reveal{opacity:1;background:#fff;border:2px solid #16161A;color:#16161A}
/* staged cards: next part and give up side by side, so both fit under the answer box */
.altrow{display:flex;gap:8px}
.altrow .btn.big{flex:1;min-width:0;white-space:normal;line-height:1.15;padding:4px 10px}
.btn.outline{background:#fff;color:#16161A;box-shadow:inset 0 0 0 2px #16161A}
/* end of a set */
.endscreen{display:flex;flex-direction:column;gap:12px;padding:8px 0 4px}
.endscreen > div.big{font-family:var(--display);font-weight:800;font-size:76px;line-height:.9;letter-spacing:-.04em;margin-top:6px}
.endscreen > div.big span{opacity:.35}
.endscreen .sub{margin:0;font-weight:600;font-size:15px}
.endscreen .line{margin:0;opacity:.75}
.squares{font-size:22px;letter-spacing:3px;line-height:1.2}
.recap{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.recap li{display:grid;grid-template-columns:24px minmax(0,1fr) auto auto;gap:10px;align-items:center;background:rgba(255,255,255,.7);border-radius:12px;padding:9px 12px;font-size:13.5px;line-height:1.3}
.recap li b{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:#16161A;color:#fff;font-size:12px}
.recap li.miss b{background:transparent;color:#16161A;box-shadow:inset 0 0 0 1.5px #16161A}
.recap li.near b{background:rgba(22,22,26,.55)}
.recap li span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.recap li em{font-style:normal;font-weight:700;text-align:right;max-width:44vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.endacts{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.endacts > .btn{flex:1 1 auto}
.nextup{border:0;background:transparent;min-height:44px;font-size:14.5px;color:inherit;opacity:.85}
.nextup b{font-family:var(--display)}

.btn{border:0;border-radius:999px;padding:12px 20px;font-weight:600;font-size:14px;background:var(--wash);white-space:nowrap}
.btn.primary{background:var(--graphite);color:#fff}
.btn.dark{background:var(--graphite);color:var(--chalk)}
.btn.ghost{background:transparent;color:inherit;opacity:.8;font-family:var(--mono);font-size:12.5px;letter-spacing:.08em;text-transform:uppercase}
.btn.danger{background:transparent;color:var(--ember)}
.btn.onTheme{background:#16161A;color:#fff}
.btn.sm{padding:8px 14px;font-size:13px}
.btn:disabled{opacity:.45;cursor:default}
.hint{color:var(--muted);font-size:13px;margin:0;text-align:center}
.session .hint{color:inherit;opacity:.72}
.foot-note{margin:36px 0 0;text-align:center;font-family:var(--text);font-size:13px;color:var(--muted)}
.foot-note .linkbtn{font-size:inherit;letter-spacing:inherit;text-transform:inherit;min-height:36px}

/* ---------- studio ---------- */
.studio-shell{display:flex;gap:22px;align-items:flex-start}
.studio-nav{flex:0 0 168px;position:sticky;top:12px;display:flex;flex-direction:column;gap:10px;background:var(--wash);border-radius:22px;padding:12px}
.studio-nav .snav-group{display:flex;flex-direction:column;gap:4px}
.studio-nav .snav-item{border:0;background:transparent;text-align:left;padding:10px 14px;border-radius:14px;font-weight:600;font-size:14px;color:var(--graphite)}
.studio-nav .snav-item[aria-current="true"]{background:var(--graphite);color:var(--chalk)}
.studio-nav .snav-new{width:100%}
.studio-canvas{flex:1;min-width:0}
@media (max-width:820px){
  .studio-shell{flex-direction:column;gap:12px;align-items:stretch}
  .studio-canvas{width:100%}
  .studio-nav{position:static;flex-direction:row;align-items:center;width:100%;overflow-x:auto;padding:0;gap:6px;background:transparent;border-radius:0}
  .studio-nav .snav-group{flex-direction:row}
  .studio-nav .snav-item{flex:none;white-space:nowrap;padding:8px 12px;background:var(--wash);border-radius:999px}
  .studio-nav .snav-new{flex:none;width:auto;margin-left:auto;white-space:nowrap}
}
.tool{display:flex;gap:9px;flex-wrap:wrap;align-items:center;margin-bottom:12px}
.tool .grow{flex:1 1 200px}
.tool select{width:auto;min-width:130px}
input[type=text],input[type=search],input[type=number],input[type=date],select,textarea{width:100%;border:2px solid var(--line);background:#fff;border-radius:14px;padding:10px 12px;font-size:15px}
input:focus,select:focus,textarea:focus{border-color:var(--graphite);outline:none}
textarea{resize:vertical;min-height:70px;line-height:1.45}
.stats{color:var(--muted);font-size:14px;margin:0 0 14px;font-family:var(--mono)}
.stats b{color:var(--graphite)}
.panel{border:2px solid var(--line);border-radius:26px;padding:18px;margin-bottom:22px;background:#fff}
.panel-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.panel-head h2{margin:0;font-size:17px;font-family:var(--display);font-weight:700;letter-spacing:-.01em}
.acts{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.picker{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.picker button{border:2px solid var(--line);background:var(--ground);border-radius:20px;padding:12px;text-align:left;display:flex;flex-direction:column;gap:10px}
.picker button:hover{border-color:var(--graphite)}
.picker b{font-size:15px}
.picker span{color:var(--muted);font-size:13px;line-height:1.35}
.picker .static{width:100%}
.deck2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;max-width:780px}
.side{display:flex;flex-direction:column;gap:10px}
.cardbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.cardbar .cap{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);flex:none}
.metarow{display:flex;gap:14px;align-items:flex-end;flex-wrap:wrap;margin-top:18px;padding-top:16px;border-top:2px solid var(--line)}
.metarow .field{flex:1 1 200px}
.field{display:flex;flex-direction:column;gap:6px}
.field > span{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.looksub{display:flex;flex-direction:column;gap:6px}
.looksub > span{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.seg{display:flex;flex-wrap:wrap;gap:6px}
.seg button{border:2px solid var(--line);background:#fff;border-radius:999px;padding:7px 13px;font-weight:600;font-size:13px}
.seg button[aria-pressed="true"]{border-color:var(--graphite);background:var(--graphite);color:var(--chalk)}
.swatches{display:flex;gap:7px;flex-wrap:wrap}
.swatches .swpv{width:32px;height:32px;border-radius:50%;border:2px solid var(--line);padding:0;position:relative;overflow:hidden;background:transparent}
.swatches .swpv[aria-pressed="true"]{box-shadow:0 0 0 3px #fff,0 0 0 5px var(--graphite)}
.swatches .mopv{position:absolute;top:0;left:0;width:100px;height:100px;transform:scale(.32);transform-origin:top left;display:block;padding:0;border-radius:0;container-type:inline-size;--gridstroke:2.8cqw;--gridr:2.6cqw}
.tbl{width:100%;border-collapse:collapse;font-size:14px}
.tbl th{text-align:left;font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);padding:8px 10px;border-bottom:2px solid var(--line);white-space:nowrap}
.tbl td{padding:9px 10px;border-bottom:1px solid var(--line);vertical-align:top}
.tbl tr:hover td{background:var(--wash)}
.tbl .qcell{font-weight:600;line-height:1.35}
.tbl .qcell small{display:block;font-weight:400;color:var(--muted);font-size:12.5px;margin-top:2px}
.tbl td.num,.tbl td.mid{font-family:var(--mono);font-size:12.5px;color:var(--muted);white-space:nowrap}
.bulk{position:sticky;bottom:12px;z-index:9;display:flex;gap:9px;align-items:center;flex-wrap:wrap;border-radius:18px;background:var(--graphite);color:var(--chalk);padding:10px 14px;margin-top:12px}
.bulk .btn{background:rgba(247,245,240,.16);color:var(--chalk)}
.bulk select{width:auto;border-radius:999px;background:rgba(247,245,240,.12);border-color:transparent;color:var(--chalk)}
.bulk select option{color:var(--graphite)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}
.thumb{border:0;padding:0;background:transparent;text-align:left;display:flex;flex-direction:column;gap:6px}
.thumb .meta{display:flex;justify-content:space-between;align-items:flex-start;font-family:var(--mono);font-size:11px;color:var(--muted);gap:6px}
.badge{flex:none;white-space:nowrap;border-radius:999px;padding:1px 8px;font-size:10px;letter-spacing:.08em;text-transform:uppercase;font-family:var(--mono)}
.badge.draft{background:#EBD9B4;color:var(--graphite)}
.badge.live{background:var(--graphite);color:var(--chalk)}
.badge.archived{background:var(--wash);color:var(--muted);box-shadow:inset 0 0 0 1px var(--line)}
/* grid items may not grow past their column, whatever they hold */
.thumbwrap{position:relative;min-width:0}
.thumb{width:100%;min-width:0}
.tsel{position:absolute;z-index:2;top:6px;left:6px;width:30px;height:30px;border-radius:9px;background:rgba(255,255,255,.92);display:grid;place-items:center;box-shadow:0 1px 4px rgba(22,22,26,.2);cursor:pointer;opacity:.85}
.tsel input{width:16px;height:16px;margin:0;accent-color:#16161A;cursor:pointer}
.thumbwrap:hover .tsel,.tsel:has(input:checked){opacity:1}
.thumb .static{transition:transform .2s}
.thumb:hover .static{transform:translateY(-3px)}
.swatchrow{display:flex;flex-wrap:wrap;gap:14px}
.swatch{display:flex;flex-direction:column;align-items:center;gap:6px;background:transparent;border:0;padding:0;cursor:pointer}
.swatch .swdot{position:relative;width:44px;height:44px;border-radius:50%;display:block;border:1px solid;box-sizing:border-box;overflow:hidden}
.swatch .swdot i{position:absolute;display:block;width:20px;height:20px;border-radius:50%}
.swatch .swdot i:nth-child(1){right:-4px;bottom:-4px}
.swatch .swdot i:nth-child(2){left:-2px;top:-2px}
.swatch .swname{font-family:var(--mono);font-size:11px;color:var(--muted)}
.swatch[aria-pressed="true"] .swdot{outline:2px solid var(--graphite);outline-offset:3px}
.empty-state{border-radius:24px;background:var(--wash);padding:30px;text-align:center;color:var(--muted)}
.note{background:var(--wash);border-radius:16px;padding:12px 14px;font-size:13.5px;color:var(--muted)}
.tip{color:var(--muted);font-size:13px;margin:0 0 14px}
.setrow{display:grid;grid-template-columns:120px minmax(0,1fr) auto;gap:14px;align-items:center;border:2px solid var(--line);border-radius:20px;padding:12px;margin-bottom:10px;background:#fff}
.setrow .art{aspect-ratio:4/3;border-radius:14px;padding:10px}
.setrow .art > h3{font-size:14px}
.setrow h3{margin:0 0 3px;font-size:16px}
.setrow p{margin:0;color:var(--muted);font-size:13px}
@media (max-width:860px){ .deck2{grid-template-columns:1fr} }
/* card look open: the look sits beside the two faces (desktop) or under them, faces side by side (phones) */
.deck2.with-look{max-width:none;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(300px,1.15fr);align-items:start}
.lookside{display:flex;flex-direction:column;gap:14px;border:2px solid var(--line);border-radius:20px;padding:14px;background:#fff;position:sticky;top:12px}
.lookhead{display:flex;justify-content:space-between;align-items:center}
.lookhead b{font-family:var(--display);font-size:16px}
.lookside .swatchrow{gap:10px}
.lookside .swatch .swdot{width:36px;height:36px}
.looktoggle{margin-top:14px}
.tagsum{display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin-top:14px;padding:10px 14px;background:var(--wash);border-radius:14px;font-size:13.5px;color:var(--muted)}
.tagsum b{color:var(--graphite);font-weight:600}
@media (max-width:1100px){ .deck2.with-look{grid-template-columns:repeat(2,minmax(0,1fr))} .deck2.with-look .lookside{grid-column:1 / -1;position:static} }
@media (max-width:860px){ .deck2.with-look{max-width:none;gap:10px} .deck2.with-look .cardbar .cap{font-size:9px} }
.panel-head h2 .badge{vertical-align:3px;margin-left:6px}
#c-looktoggle{white-space:normal;text-align:left}
@media (max-width:640px){
  .composer{padding-bottom:84px}
  .composer-acts{position:fixed;z-index:12;left:0;right:0;bottom:0;background:#fff;padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px));box-shadow:0 -6px 20px rgba(22,22,26,.12);flex-wrap:nowrap;overflow-x:auto}
  .composer-acts #e-status{display:none}
  .composer-acts .btn{flex:1 1 auto;padding:12px 10px;font-size:13.5px}
  .composer-acts .btn.ghost{flex:0 0 auto}
  .deck2{max-width:360px;margin-inline:auto}
}
.statcards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.statcards div{background:var(--wash);border-radius:16px;padding:12px 14px;display:flex;flex-direction:column}
.statcards b{font-family:var(--display);font-weight:800;font-size:26px;line-height:1.1}
.statcards span{color:var(--muted);font-size:13px}
@media (max-width:640px){ .statcards{grid-template-columns:repeat(2,minmax(0,1fr))} }
.daybars{display:flex;gap:6px;align-items:flex-end;height:120px;border-bottom:2px solid var(--line);margin-bottom:34px}
.daybars div{flex:1;height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:4px;position:relative}
.daybars i{display:block;width:100%;max-width:26px;min-height:2px;background:var(--graphite);border-radius:5px 5px 0 0}
.daybars span{position:absolute;bottom:-20px;font-family:var(--mono);font-size:10px;color:var(--muted)}
dialog .signin{display:grid;gap:10px;min-width:min(320px,100%)}
dialog .signin .hint{text-align:left;margin:-4px 0 4px}
dialog .signin .err{color:#B3261E;font-size:13px;min-height:1em}
@media (max-width:640px){ .tbl .hide{display:none} .setrow{grid-template-columns:86px minmax(0,1fr)} }
@media (max-width:520px){ .picker{grid-template-columns:1fr} .picker button{flex-direction:row;align-items:center} .picker .static{width:74px;flex:none} }
@media (max-width:420px){ .grid{grid-template-columns:repeat(2,minmax(0,1fr))} }

/* selection toolbar */
.fmt{position:absolute;z-index:20;display:flex;align-items:center;gap:3px;background:var(--graphite);color:var(--chalk);border-radius:999px;padding:5px;box-shadow:0 10px 26px rgba(22,22,26,.3)}
.fmt button{border:0;background:transparent;color:inherit;border-radius:999px;padding:6px 10px;font-size:14px;line-height:1;min-width:34px}
.fmt button:hover{background:rgba(247,245,240,.16)}
.fmt .sep{width:1px;align-self:stretch;background:rgba(247,245,240,.25);margin:2px 3px}
.fmt .ff-display{font-family:var(--display);font-weight:800}
.fmt .ff-sans{font-family:var(--text);font-weight:600}
.fmt .ff-serif{font-family:var(--serif);font-size:16px}
.seg .cf-theme{font-family:var(--display)}.seg .cf-sans{font-family:var(--text)}.seg .cf-serif{font-family:var(--serif);font-size:16px}.seg .cf-mono{font-family:var(--mono)}
.fmt .ff-mono{font-family:var(--mono)}
.fmt .plain{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase}
.fmt .szbtn{font-family:var(--text);font-weight:600}
.fmt .szbtn span{font-size:11px;vertical-align:super;margin-left:1px}

dialog{border:0;border-radius:26px;padding:22px;max-width:min(680px,calc(100% - 32px));width:100%;box-shadow:0 30px 80px rgba(22,22,26,.3)}
dialog::backdrop{background:rgba(22,22,26,.45)}
dialog h3{margin:0 0 8px;font-size:20px;font-family:var(--display);font-weight:700}
dialog img{max-height:58vh;display:block;margin:12px auto;border-radius:12px}
.toast{position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 20px);transform:translateX(-50%);background:var(--graphite);color:var(--chalk);padding:10px 18px;border-radius:999px;font-weight:600;font-size:14px;z-index:30;max-width:calc(100% - 32px)}
@media (prefers-reduced-motion:reduce){ .flip .inner,.thumb .static,.cover:hover .art{transition:none} }

/* small layout helpers (moved out of inline style attributes) */
.u-002535{margin-top:12px}
.u-01551c{flex:0 0 auto}
.u-0b1343{flex:1 1 100%}
.u-0b88f1{flex:2 1 260px}
.u-0f9ed7{margin:6px 0 0}
.u-119c60{text-align:left;margin-top:6px}
.u-1386d5{margin:0}
.u-1c055c{grid-template-columns:repeat(auto-fill,minmax(110px,1fr));max-height:340px;overflow:auto;padding:4px}
.u-1c38ea{margin-top:-6px}
.u-1daca8{display:flex;justify-content:center;margin-top:14px}
.u-1df987{text-align:left;margin:0}
.u-1f4e40{justify-content:flex-end;margin-top:12px}
.u-200a92{text-align:left}
.u-2475a4{flex:0 0 130px}
.u-36b745{justify-content:flex-end}
.u-499f50{width:54px}
.u-515521{margin:0;padding:0;border:0}
.u-5371db{margin-top:10px}
.u-54ebd3{display:block;margin:22px 0 8px}
.u-553a64{margin-top:14px}
.u-5677b9{display:inline}
.u-610601{margin-left:10px}
.u-617963{margin-bottom:14px}
.u-66a79f{margin-top:14px;justify-content:flex-end}
.u-66d621{margin-top:6px;flex-wrap:wrap}
.u-68c5c6{background:var(--wash);color:var(--muted)}
.u-6d5673{width:100%}
.u-6dbe49{width:34px}
.u-6de775{color:inherit;opacity:.8}
.u-8146da{flex:1 1 180px}
.u-901210{flex-wrap:wrap}
.u-9c68c4{flex:1 1 260px}
.u-9e3c4c{margin-top:6px}
.u-a54a46{grid-template-columns:minmax(0,320px) minmax(0,1fr);max-width:none}
.u-a58b07{margin-bottom:4px}
.u-a7409f{margin-bottom:10px}
.u-ab0877{flex:0 0 120px}
.u-b7e753{flex:1 1 200px}
.u-bdcb9a{margin-top:1.6cqw}
.u-c3f837{margin-left:8px}
.u-d26950{flex:1 1 220px}
.u-d43169{margin-top:8px}
.u-d8b07e{text-align:left;margin-top:8px}
.u-e53991{margin-top:10px;margin-left:6px}
.u-f29d12{display:block;margin:18px 0 8px}
.u-f756a4{flex-wrap:wrap;gap:4px}
.u-fa3e1c{margin-bottom:12px}

/* ---------- tag pickers (card editor, set rules) ---------- */
.tagrow{align-items:flex-start}
.tagrow > .field{flex:1 1 240px}
.tagpick{position:relative}
.tp-box{display:flex;flex-wrap:wrap;gap:6px;align-items:center;min-height:46px;border:2px solid var(--line);background:#fff;border-radius:14px;padding:6px 8px;cursor:text}
.tagpick:focus-within .tp-box{border-color:var(--graphite)}
.tp-box .chip{display:inline-flex;align-items:center;gap:2px;background:var(--wash);border-radius:999px;padding:3px 4px 3px 10px;font-size:13px;font-weight:600;line-height:1.2}
.tp-box .chip button{border:0;background:transparent;width:24px;height:24px;border-radius:50%;font-size:15px;line-height:1;color:var(--muted)}
.tp-box .chip button:hover{background:var(--line);color:var(--graphite)}
.tp-box .tp-in{flex:1 1 90px;min-width:90px;border:0;padding:6px 4px;font-size:14px;background:transparent;border-radius:0}
.tp-box .tp-in:focus{outline:none}
.tp-menu{display:none;position:absolute;z-index:20;left:0;right:0;top:calc(100% + 4px);max-height:260px;overflow:auto;background:#fff;border:2px solid var(--graphite);border-radius:14px;padding:6px;box-shadow:0 14px 30px rgba(22,22,26,.14)}
.tagpick:focus-within .tp-menu:not(:empty){display:block}
.tp-menu button{display:block;width:100%;text-align:left;border:0;background:transparent;border-radius:10px;padding:9px 10px;font-size:14px;min-height:40px}
.tp-menu button:hover,.tp-menu button:focus{background:var(--wash)}
.tp-menu small{color:var(--muted);font-size:12px}
.tp-menu .tp-new{font-weight:700}
.tp-empty{display:block;padding:9px 10px;color:var(--muted);font-size:13px}
.addset{border:2px dashed var(--line);background:transparent;border-radius:999px;padding:7px 13px;font-weight:600;font-size:13px;color:var(--muted)}
.addset:hover{border-color:var(--graphite);color:var(--graphite)}
.newset{display:inline-flex;flex-wrap:wrap;gap:6px;align-items:center}
.newset input{width:auto;min-width:180px;padding:7px 12px;border-radius:999px;font-size:13.5px}
.archived-list{margin-top:18px}
.archived-list summary{cursor:pointer;font-weight:600;color:var(--muted);padding:8px 0}

/* ---------- studio: Names ---------- */
.names-tabs{margin-bottom:16px}
.names .tool .field{flex:0 1 220px}
.names-add{margin-top:12px}
.names-add select{max-width:220px}
.names-tbl td{vertical-align:middle}
.names-tbl .namecell{display:flex;align-items:center;gap:4px}
.names-tbl tr.sub .namecell{padding-left:14px}
.names-tbl .subarrow{color:var(--muted);margin-right:6px}
.names-tbl tr.is-hidden input{color:var(--muted);text-decoration:line-through}
.names-tbl select{padding:6px 10px;font-size:13.5px}
.names-tbl small{color:var(--muted)}
input.inline{border-color:transparent;background:transparent;padding:6px 8px;border-radius:10px;font-weight:600;width:100%;min-width:120px}
input.inline:hover{border-color:var(--line)}
input.inline:focus{border-color:var(--graphite);background:#fff}
.shelflist{display:flex;flex-direction:column;gap:8px;margin-bottom:22px}
.shelfrow{display:flex;gap:10px;align-items:center;border:2px solid var(--line);border-radius:16px;padding:8px 10px;background:#fff}
.shelfrow .grow{flex:1;min-width:0;display:flex;flex-direction:column}
.shelfrow small{color:var(--muted);font-size:12.5px;padding-left:8px}
.shelfrow .mv{display:flex;gap:4px}
.shelfrow .mv .btn{padding:6px 10px}
.shelfrow.is-hidden{opacity:.55}
.names-newshelf .tool select{min-width:180px}

/* ---------- play: the crowd and you vs everyone ---------- */
.crowd{margin:6px 2px 0;font-size:13px;opacity:.7}
.vs{background:rgba(255,255,255,.7);border-radius:16px;padding:12px 14px;display:flex;flex-direction:column;gap:10px}
.vs-win{display:flex;gap:4px;background:rgba(22,22,26,.07);border-radius:999px;padding:3px;align-self:flex-start}
.vs-win button{border:0;background:transparent;border-radius:999px;padding:6px 12px;font-weight:600;font-size:12.5px;min-height:32px}
.vs-win button[aria-pressed="true"]{background:#16161A;color:#fff}
.vs-bars{display:flex;flex-direction:column;gap:6px}
.vs-row{display:grid;grid-template-columns:62px minmax(0,1fr) 42px;gap:10px;align-items:center;font-size:13px;font-weight:600}
.vs-row i{height:12px;border-radius:999px;background:rgba(22,22,26,.1);overflow:hidden}
.vs-row i b{display:block;height:100%;background:#16161A;border-radius:999px}
.vs-row.avg i b{background:rgba(22,22,26,.4)}
.vs-row em{font-style:normal;text-align:right;font-family:var(--display);font-weight:800}
.vs-line,.vs-first,.vs-wait{margin:0;font-size:14px}
.vs-line span{display:block;font-size:12.5px;opacity:.65;margin-top:2px}
.vs-wait{opacity:.6}
.streakline{white-space:nowrap;font-weight:700;opacity:1}

/* ---------- me: your stats ---------- */
.me{display:flex;flex-direction:column;gap:18px}
.me-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap}
.me-title{margin:0;font-family:var(--display);font-weight:800;font-size:clamp(28px,4vw,40px);letter-spacing:-.02em}
.me-tiles .streak.on{background:#FFE7D1}
.me-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.me-card{border:2px solid var(--line);border-radius:22px;padding:16px 18px;background:#fff;min-width:0}
.me-card h2{margin:0 0 12px;font-family:var(--display);font-size:16px;font-weight:700;letter-spacing:-.01em}
.me-card h3{margin:0 0 8px;font-size:13px;font-weight:600;color:var(--muted)}
.me-note{margin:10px 0 0;color:var(--muted);font-size:13.5px}
.callout{margin:0 0 14px;font-size:14.5px}
.cal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;max-width:320px}
.cal span{font-size:11px;color:var(--muted);text-align:center}
.cal i{aspect-ratio:1;border-radius:8px;background:var(--wash)}
.cal i.l1{background:#FFD9B8}.cal i.l2{background:#FF9F5A}.cal i.l3{background:#F2661C}
.cal i.today{box-shadow:inset 0 0 0 2px var(--graphite)}
.cal i.future{background:transparent;box-shadow:inset 0 0 0 1px var(--line)}
.wkbars{display:flex;gap:8px;align-items:flex-end;height:120px;border-bottom:2px solid var(--line);padding-bottom:0;margin-bottom:20px}
.wkbars div{flex:1;height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;position:relative}
.wkbars i{display:block;width:100%;max-width:30px;background:var(--graphite);border-radius:6px 6px 0 0}
.wkbars i.none{background:transparent}
.wkbars span{position:absolute;bottom:-19px;font-size:11px;color:var(--muted)}
.me-days{margin-bottom:22px;height:90px}
.hbars{display:flex;flex-direction:column;gap:7px}
.hbar{display:grid;grid-template-columns:minmax(0,130px) minmax(0,1fr) auto;gap:10px;align-items:center;font-size:13.5px}
.hbar span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.hbar i{height:10px;border-radius:999px;background:var(--wash);overflow:hidden}
.hbar i b{display:block;height:100%;background:var(--graphite);border-radius:999px}
.hbar em{font-style:normal;font-family:var(--display);font-weight:700;white-space:nowrap}
.hbar em small{font-family:var(--text);font-weight:400;color:var(--muted);font-size:12px}
.vsrow{display:grid;grid-template-columns:minmax(0,200px) minmax(0,1fr);gap:14px;align-items:center;padding:10px 0;border-top:1px solid var(--line)}
.vsrow:first-of-type{border-top:0}
.vsname{border:0;background:none;text-align:left;font-weight:700;font-family:var(--display);font-size:14.5px;padding:0;min-height:44px}
.vsname:hover{text-decoration:underline}
.me .vs-row{font-weight:500}
.me .vs-row.avg i b{background:#C9C4B6}
@media (max-width:640px){ .names-tbl{table-layout:fixed} .names-tbl th.c-n{width:48px} .names-tbl th.c-s{width:86px} .names-tbl th.c-d{width:70px} .names-tbl td,.names-tbl th{padding-left:4px;padding-right:4px} .names-tbl input.inline{min-width:0} .names-tbl .btn{padding:7px 10px} .shelfrow{flex-wrap:wrap} }
@media (max-width:720px){ .me-grid{grid-template-columns:1fr} .vsrow{grid-template-columns:1fr;gap:4px} .hbar{grid-template-columns:minmax(0,104px) minmax(0,1fr) auto} }

/* end screen: points, % of what was on offer (can pass 100 or go below 0) */
.endscreen > div.big.neg{color:#9A1B0B}
.endscreen > div.big span{font-size:.4em;letter-spacing:0}
.pctpill{display:inline-block;background:#16161A;color:#fff;border-radius:999px;padding:1px 9px;font-family:var(--display);font-weight:800}
.pctpill.over{background:#0FA37A}.pctpill.under{background:#9A1B0B}
.stakesum{opacity:.85}
.recap .rp{font-style:normal;font-family:var(--display);font-weight:800;font-size:12.5px;min-width:30px;text-align:right}
.recap .rp.neg{color:#9A1B0B}
/* several answers: what to find, in the question's face, a step smaller */
.face .findq{margin-top:4cqw;opacity:.85}
.face .trailq{margin-bottom:2cqw}

/* ---------- numbered Workoutables ---------- */
.hero-acts{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin-top:20px}
.hero .hero-acts .go{margin-top:0}
.hero-link{border:0;background:transparent;color:inherit;font-weight:600;font-size:14px;text-decoration:underline;text-underline-offset:3px;min-height:44px;padding:0 4px}
.hero.has-img .hero-link{color:#fff}
@media (max-width:640px){ .hero-acts{margin-top:16px} }
/* the stats page calendar: played on the day, caught up later, missed, none */
.cal > button,.cal > i{aspect-ratio:1;border-radius:8px;border:0;padding:0;display:block}
.cal .cal-none{background:transparent;box-shadow:inset 0 0 0 1px var(--line);opacity:.5}
.cal .cal-none.future{opacity:.25}
.cal .cal-l3{background:#F2661C}
.cal .cal-l1{background:#FFD0A8}
.cal .cal-missed{background:#fff;box-shadow:inset 0 0 0 2px #FFB27A}
.cal .cal-open{background:#fff;box-shadow:inset 0 0 0 2px var(--graphite)}
.cal .today{outline:2px solid var(--graphite);outline-offset:1px}
.cal-key{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:10px 0 0;font-size:12.5px;color:var(--muted)}
.cal-key i{display:inline-block;width:12px;height:12px;border-radius:4px;margin-left:6px}
.cal-key i:first-child{margin-left:0}
.cal-key .cal-l3{background:#F2661C}.cal-key .cal-l1{background:#FFD0A8}.cal-key .cal-missed{background:#fff;box-shadow:inset 0 0 0 2px #FFB27A}
/* /days: month grids */
.days{display:flex;flex-direction:column;gap:18px}
.dmonth h2{margin:0 0 10px;font-family:var(--display);font-size:17px;font-weight:700}
.dgrid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.dgrid > span:not(.dcell){font-size:11px;color:var(--muted);text-align:center}
.dcell{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;aspect-ratio:1;border-radius:12px;border:0;padding:2px;min-height:44px;background:transparent;color:var(--muted);font-size:12px}
.dcell em{font-style:normal;font-size:11px}
.dcell.future{opacity:.35}
.dcell.pub{background:var(--wash);color:var(--graphite)}
.dcell.pub b{font-family:var(--display);font-weight:800;font-size:14px;line-height:1}
.dcell.pub small{font-size:10.5px;color:var(--muted)}
.dcell.played{background:#FFE7D1}
.dcell.onday{background:#FFD0A8}
.dcell.today{box-shadow:inset 0 0 0 2px var(--graphite)}
@media (min-width:720px){ .dgrid{max-width:620px} .dcell b{font-size:16px} }
/* studio: planning days */
.dayspanel{margin-bottom:22px}
.daylist{display:flex;flex-direction:column;gap:6px}
.dayrow{display:grid;grid-template-columns:110px minmax(0,1fr) auto;gap:12px;align-items:center;border:2px solid var(--line);border-radius:16px;padding:8px 10px 8px 14px;background:#fff;font-size:14px}
.dayrow.empty{border-style:dashed;background:transparent}
.dayrow.is-today{border-color:var(--graphite)}
.dayrow .dday{font-weight:700}
.dayrow .dwhat{min-width:0;overflow:hidden;text-overflow:ellipsis}
.dayrow .dwhat .hint{text-align:left}
.dayrow .acts{display:flex;gap:6px}
@media (max-width:640px){ .dayrow{grid-template-columns:1fr auto} .dayrow .dwhat{grid-column:1 / -1;grid-row:2} }

/* ---------- collections ---------- */
.newtag{color:#0FA37A;font-weight:700}
.newchip{font-style:normal;font-size:11px;font-weight:700;background:#0FA37A;color:#fff;border-radius:999px;padding:1px 7px;margin-left:4px;vertical-align:1px}
.btn.big.another{height:auto;min-height:56px;flex-direction:column;display:flex;align-items:center;justify-content:center;gap:2px;padding:8px 16px}
.btn.big.another small{font-family:var(--text);font-weight:500;font-size:12.5px;opacity:.75}
.alldone{margin:0;text-align:center;font-weight:600;background:rgba(255,255,255,.7);border-radius:14px;padding:12px}

/* the reveal on the back: tags and where the card first appeared */
.face .reveal{margin-top:auto;padding-top:4cqw;display:flex;flex-direction:column;gap:1cqw}
.face .reveal p{margin:0;font-family:var(--text);font-size:max(3.3cqw,10px);line-height:1.3}
.face .reveal .rtags{font-weight:600;opacity:.85}
.face .reveal .rorigin{opacity:.65}

/* ---------- limits ---------- */
.limit{display:flex;flex-direction:column;gap:12px;text-align:center;max-width:340px}
.limit h3{margin:0;font-family:var(--display);font-size:22px;font-weight:800}
.limit p{margin:0}
.limit-acts{display:flex;flex-direction:column;gap:8px}
.limit .btn{min-height:44px}

/* ---------- sharing ---------- */
.chbanner{background:#16161A;color:#fff;border-radius:12px;padding:8px 12px;font-size:14px;text-align:center}
.chbanner b{font-family:var(--display)}
.vsfriend{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.vsfriend div{background:rgba(255,255,255,.7);border-radius:16px;padding:12px;display:flex;flex-direction:column;align-items:center;gap:2px}
.vsfriend div.win{background:#16161A;color:#fff}
.vsfriend span{font-size:13px;opacity:.75}
.vsfriend b{font-family:var(--display);font-weight:800;font-size:32px;line-height:1}
.vsfriend em{font-style:normal;font-size:13px;font-weight:600}
.sendrow{display:flex;justify-content:center;gap:18px}
.sendrow button{border:0;background:transparent;color:inherit;font-weight:600;font-size:13.5px;min-height:40px;opacity:.75;text-decoration:underline;text-underline-offset:3px}

/* ---------- profile ---------- */
.me-card.suggest{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;background:#16161A;color:#fff;border-color:#16161A}
.me-card.suggest p{margin:0;font-weight:600;font-size:15px}
.me-card.suggest .btn.dark{background:#fff;color:#16161A}
.me-tiles b small{font-size:.55em;font-weight:700;opacity:.6}

/* card title in the editor and the bank */
.titlerow{display:flex;flex-wrap:wrap;align-items:flex-end;gap:8px 16px;margin:0 0 14px}
.titlerow .field{flex:1 1 260px;margin:0}
.titlerow .chk{display:flex;align-items:center;gap:8px;min-height:44px;font-size:14px;cursor:pointer}
.titlerow .chk input{width:auto}
.tbl .qcell .ctname{display:block;cursor:pointer}
.thumbname{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;font-weight:600;font-size:13px;line-height:1.3;overflow-wrap:anywhere}
.picfield{margin:16px 0 6px}
.picfield + .hint{text-align:left;margin:0}

/* ---------- card composition ---------- */
/* a question sits in the optical middle of the space it has (auto margins, so long text still scrolls from the top) */
.face.front:not(.is-multi) .body > :first-child{margin-top:auto}
.face.front:not(.is-multi) .body > :last-child{margin-bottom:auto}
/* the back: answer and why sit together in the middle; the tags (if any) keep to the bottom */
.face.back .body > :first-child{margin-top:auto}
.face.back .body > :last-child:not(.reveal){margin-bottom:auto}
/* picture cards: the picture runs edge to edge across the top, the question sits below it */
.face .heropic{position:absolute;left:0;right:0;top:0;height:95cqw;overflow:hidden;background:rgba(22,22,26,.08)}
.face .heropic img{width:100%;height:100%;object-fit:cover;display:block}
.face .heropic.empty{display:grid;place-items:center;font-family:var(--text);font-weight:600;font-size:max(3.4cqw,10.5px);opacity:.7}
.face .heropic.pickable{cursor:pointer}
.face.front.is-image .body{padding-top:calc(95cqw - 13cqw - 13.8cqw)}
.face.front.is-image .body > :first-child{margin-top:0}
.face.front.is-image .pill.soft{background:rgba(255,255,255,.9);color:#16161A;box-shadow:none;opacity:1}
.face.front.is-image.is-ticket .top::after{text-shadow:0 0 2cqw rgba(0,0,0,.5)}

/* ================= card design: headline and ask =================
   One order on every card: pills and number · headline (the title) · the question in its band ·
   blanks to fill · the Workoutable mark. Spacing steps: 2.4 / 4 / 6 cqw. */
/* number and mark: every card is signed, so a screenshot still points home */
.face .top .no{margin-left:auto;font-family:var(--mono);font-weight:500;font-size:max(2.9cqw,9px);letter-spacing:.04em;opacity:.7;white-space:nowrap}
.face.is-ticket .top::after{content:none}
.face.is-ticket .top .no,.face.front.is-image .top .no{color:#fff;opacity:.95;text-shadow:0 0 2.4cqw rgba(0,0,0,.45)}
.face.is-ticket .top .no{text-shadow:none}
.face .foot{display:flex;align-items:center;justify-content:space-between;gap:3cqw;opacity:1;line-height:1}
.face .foot .wm{font-family:var(--display);font-weight:800;font-size:max(3.6cqw,10.5px);letter-spacing:-.02em;line-height:1}
.face .foot .tagl{font-family:var(--text);font-weight:600;font-size:max(3.1cqw,9.5px);opacity:.7;line-height:1}
.face.is-ticket .foot{right:40cqw}
.face.is-ticket .foot .wm{font-size:4.4cqw}
.face.is-ticket .foot .tagl{display:none}
/* small labels, one style */
.face .step,.face .lbl{margin:0;text-transform:none;letter-spacing:0;font-family:var(--text);font-weight:600;font-size:max(3.3cqw,10px);line-height:1.2;opacity:.72;flex-shrink:0}
/* the round badge: numbers items, letters answers (X, Y, Z) and parts */
.face .b{flex:none;width:6.6cqw;height:6.6cqw;border-radius:50%;background:var(--pill);color:var(--pillfg);display:grid;place-items:center;font-family:var(--mono);font-weight:500;font-size:max(3cqw,9px);line-height:1}
/* the headline: the card's title, biggest line on the card */
.face .head{margin:0;font-family:var(--cdisp);font-weight:var(--cwb,800);line-height:.98;letter-spacing:-.035em;text-wrap:balance;max-width:90%;flex-shrink:0;overflow-wrap:break-word}
/* the question in its band */
.face .setup{margin:0;font-family:var(--cbody);font-weight:500;line-height:1.42;white-space:pre-line;text-wrap:pretty;flex-shrink:0}
.face .q.ask{font-weight:min(700,var(--cw,700));line-height:calc(1.08em*var(--lead,1));letter-spacing:-.025em}
.face .q.ask.qbig{font-weight:var(--qw,800);line-height:calc(var(--qlh,1.06)*1em*var(--lead,1));letter-spacing:var(--qtrack,-.03em)}
.face .q.voice{font-weight:var(--qw,600)}
.face .key{background:linear-gradient(transparent 60%,rgba(255,255,255,.72) 60%);border-radius:.1em}
.face .qedit .ask{font-weight:800;background:rgba(255,255,255,.42);border-radius:1cqw}
.face .sheet{flex-shrink:0;display:flex;flex-direction:column;gap:3.4cqw;background:#FFFDF8;color:#16161A;border-radius:4cqw;padding:5.4cqw;box-shadow:0 1cqw 0 rgba(22,22,26,.1)}
.face .sheet .setup{color:#2A2A2F}
.face .sheet .key{background:linear-gradient(transparent 60%,var(--bg) 60%)}
/* answer blanks */
.face .slots{display:grid;gap:2.2cqw;flex-shrink:0}
.face .slot{display:flex;align-items:center;gap:2.4cqw;font-family:var(--text);font-weight:600;font-size:max(3.6cqw,10.5px);line-height:1}
.face .slot i{flex:1;height:0;border-bottom:.45cqw dashed currentColor;opacity:.45;transform:translateY(1.2cqw)}
.face .slots .hint{margin:0;font-family:var(--text);font-weight:600;font-size:max(3.4cqw,10.5px);line-height:1.3;opacity:.75}
/* staged: the newest part leads, earlier parts read as the story, hidden parts show their cost */
.face .parts{display:grid;gap:3cqw;flex-shrink:0}
.face .part{display:grid;grid-template-columns:6.6cqw minmax(0,1fr);gap:3cqw;align-items:start}
.face .part > .b{margin-top:.4cqw}
.face .part .pbody{display:grid;gap:2cqw;min-width:0}
.face .part .pbody .pic{aspect-ratio:16/9}
.face .part .q{font-weight:min(700,var(--cw,700));line-height:1.12;letter-spacing:-.02em}
.face .part.locked p{margin:0;font-family:var(--text);font-weight:600;font-size:max(3.5cqw,10px);line-height:1.3;opacity:.55;padding-top:1.6cqw;border-top:.45cqw dashed currentColor}
.face .part.locked .b{background:transparent;color:inherit;box-shadow:inset 0 0 0 .4cqw currentColor;opacity:.5}
/* items: the ask on top, then photo tiles with a name tag, text tiles, or ordered rows */
.face .q.ask.top{flex-shrink:0}
.face .clues li{background:rgba(255,255,255,.55);border-radius:3.2cqw}
.face .clues li.no-pic{min-height:15cqw;letter-spacing:-.02em}
.face .clues li.has-pic{display:block;aspect-ratio:1.12;min-height:0}
.face .clues.n6 li.has-pic{aspect-ratio:1.6}
.face .clues li.has-pic .cluepic{position:absolute;inset:0;width:100%;height:100%}
.face .clues li.has-pic .clue-text{position:absolute;left:2cqw;bottom:2cqw;max-width:calc(100% - 4cqw);z-index:2;background:rgba(255,255,255,.92);color:#16161A;border-radius:99px;padding:1.2cqw 2.4cqw;font-family:var(--text);font-weight:600;font-size:max(3.1cqw,9.5px);line-height:1.15;letter-spacing:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.face .clues li.has-pic .clue-text:empty{display:none}
.face .clues li.has-pic .clue-text[contenteditable]:empty{display:block}
.face .clues .idx{width:6.4cqw;font-size:max(2.8cqw,9px)}
.face .clues.list-layout li{background:rgba(255,255,255,.55);border-radius:3.2cqw;padding:3cqw 3.4cqw}
.face .clues li.dim{opacity:.4;filter:grayscale(1)}
.face .clues li.odd{box-shadow:0 0 0 1.1cqw var(--fg)}
/* the back: label, the answer (or the filled blanks), a short rule, the why, then the tags */
.face .xy .xyrow{display:grid;grid-template-columns:6.6cqw minmax(0,1fr);gap:3cqw;align-items:start}
.face .xy .xyrow > .b{margin-top:1.4cqw}
.face .xy .xyv{display:grid;gap:.6cqw;min-width:0}
.face .abar{display:block;width:12cqw;height:.6cqw;border-radius:1cqw;background:currentColor;flex-shrink:0}
.face .order li > .b{width:6.4cqw;height:6.4cqw}
/* the theme's round shapes move to the top corner, framing the headline (the half circle stays low) */
.face .mo.big{right:-24cqw;top:-26cqw;bottom:auto;width:62cqw}
.face .mo.blob{right:-16cqw;top:-22cqw;bottom:auto;width:52cqw;box-shadow:-12cqw 9cqw 0 0 var(--m2)}
.face .mo.arc{right:-22cqw;top:-28cqw;bottom:auto;width:62cqw;border-width:9cqw}
.face.has-corner .body{padding-bottom:4cqw}
/* the odd-one-out back: the grid keeps its shape (smaller tiles), only the odd one keeps its name */
.face.back .clues{flex:0 0 auto}
.face.back .clues li.has-pic{aspect-ratio:1.5}
.face.back .clues li.no-pic{min-height:11cqw}
.face.back .clues li.dim .clue-text{display:none}
.face.back .clues li.no-pic.dim .clue-text{display:block}

/* the question's length band, under the card in the editor */
.lenmeter{display:grid;gap:6px;margin-top:8px;max-width:360px}
.lenmeter .bars{display:grid;grid-template-columns:1.2fr 2fr 2.8fr 1.6fr;gap:3px}
.lenmeter .bars span{height:6px;border-radius:3px;background:var(--wash)}
.lenmeter .bars span.on{background:var(--graphite)}
.lenmeter p{margin:0;font-size:12.5px;line-height:1.4;color:var(--muted)}
.lenmeter p b{color:var(--ink,#16161A);font-weight:600}
.fmt .mk{font-family:var(--text);font-weight:600;font-size:13px;padding:6px 10px}
.fmt:not(.isq) .qonly{display:none}
.face .clues li.no-pic .clue-text{overflow-wrap:normal;hyphens:auto}
/* small cards (bank thumbnails, covers): the number gives its room to the pills */
@container (max-width:230px){ .face .top .no{display:none} }
/* poster and ticket keep bands at the bottom, so photo tiles are wider there */
.face.is-stripes .clues li.has-pic,.face.is-ticket .clues li.has-pic{aspect-ratio:1.6}
/* poster: on the cards that need the room (long reads, staged, items), the stripes become a thinner band */
/* ticket: a tighter sheet, so a long read clears the stub */
.face.is-ticket .sheet{padding:4.4cqw;gap:2.8cqw}
.face.is-ticket .sheet .slots{gap:1.6cqw}
/* ---------- polish: long text ---------- */
/* one voice: the reading face, large, with any "?" sentence in bold */
.face .setup.voice{font-weight:500;line-height:1.38;letter-spacing:-.005em}
.face .setup.voice b{font-family:var(--cdisp);font-weight:700;letter-spacing:-.015em}
.face .setup.lg{font-weight:500;line-height:1.4}
/* staged: the parts already read step back */
.face .part.past{opacity:.78}
/* the paper sheet: airier text, a hairline instead of a drop shadow */
.face .sheet{padding:5cqw 5.4cqw;box-shadow:none;border:.35cqw solid rgba(22,22,26,.08)}
.face .sheet .setup{line-height:1.5}
/* two blanks sit side by side */
.face .slots.two{grid-template-columns:1fr 1fr;column-gap:4cqw}
.face .slots.two .hint{grid-column:1/-1}
/* dense cards drop the tagline; the mark stays */
.face:is(.band-sheet,.is-staged,.is-multi) .foot .tagl{display:none}
/* the editor: the question shows its finished layout, and turns into one plain block while you type */
.face .qwrap{display:flex;flex-direction:column;flex-shrink:0}
.face .qview{display:flex;flex-direction:column;gap:4cqw;cursor:text;border-radius:2cqw}
.face .qview:hover,.face .qview:focus-visible{outline:none;box-shadow:0 0 0 .8cqw rgba(127,127,127,.2)}
.face .qwrap .qedit{display:none}
.face .qwrap.editing .qview{display:none}
.face .qwrap.editing .qedit{display:block;font-family:var(--cbody);font-weight:500;font-size:4.6cqw;line-height:1.42;letter-spacing:0}
.face .qwrap.editing.band-big .qedit{font-family:var(--cdisp);font-weight:var(--qw,800);font-size:8cqw;line-height:1.06;letter-spacing:-.03em}
.face .qwrap.editing.band-sheet .qedit{background:#FFFDF8;color:#16161A;border-radius:4cqw;padding:5cqw;font-size:4cqw;line-height:1.5}
.face .qedit .ask{font-family:var(--cdisp);font-weight:700;background:rgba(255,255,255,.5);border-radius:1cqw}
.face .slotshint:empty{display:none}
.face .qwrap.editing ~ .slotshint:empty{display:block}
/* in the editor, a label that only repeats its letter is shown faintly (it's hidden on the card) */
.face .xy .xylabel.same{opacity:.35}
/* ---------- review pass ---------- */
/* the back: a why you can read, and tags that look like tags */
.face .why{font-size:4.6cqw;line-height:1.45}
.face .reveal .rtags{display:flex;flex-wrap:wrap;gap:1.6cqw}
.face .reveal .rtag{font-family:var(--text);font-weight:600;font-size:max(3.1cqw,9.5px);line-height:1;padding:1.5cqw 3cqw;border-radius:99px;box-shadow:inset 0 0 0 .35cqw currentColor;opacity:.75}
.face .reveal .rorigin{opacity:.72}
/* the unit rides beside the number */
.face .ans .aunit{font-family:var(--text);font-weight:600;font-size:.34em;letter-spacing:0;opacity:.75}
/* trail dates you can read */
.face .beats .bdate{font-size:max(3.2cqw,9.5px);font-weight:500;opacity:.8}
/* items: the ask and its items sit together, centred as one group */
.face.is-multi .clues{flex:0 0 auto}
.face.front.is-multi .body > :first-child{margin-top:auto}
.face.front.is-multi .body > :last-child{margin-bottom:auto}

/* ---------- themes pass: the white box ---------- */
/* every question with a setup (and every picture question) sits on warm paper with a hairline; the why too */
.face .sheet.split,.face .sheet.picq{gap:3.2cqw}
.face .sheet.picq .q.ask{letter-spacing:-.025em}
.face .sheet.whys{padding:4.4cqw 5cqw}
.face .sheet .why{color:#2A2A2F}
.face.back .abar{display:none}
/* the body reaches the card's edges (its content keeps the card's margins), so an answer picture can run edge to edge */
.face .body{margin-inline:-7cqw;padding-inline:7cqw}

/* ================= the play screen: the card is the stage, one dock holds everything you do ================= */
/* a quiet header: light close button, the set's name, points as plain text */
.session .sbar{gap:12px;min-height:44px}
.session .exit{background:rgba(22,22,26,.06);width:40px;height:40px;font-size:15px}
.session .spts{background:transparent;color:#16161A;padding:0;font-size:15px}
/* a slim track: done in ink, the current card grey, the rest faint */
.session .prog{gap:4px}
.session .prog span{height:4px;border-radius:4px;background:rgba(22,22,26,.12)}
.session .prog span.now{background:rgba(22,22,26,.42);box-shadow:none}
/* the card sits right under the header and takes the height the dock leaves */
.session .stagewrap{align-items:center}
/* the dock: a white sheet running to the screen's edges and bottom */
.dock{flex:none;display:flex;flex-direction:column;gap:10px;background:#fff;color:#16161A;
  margin:0 -16px calc(-1*max(12px,env(safe-area-inset-bottom,0px)));padding:14px 16px max(12px,env(safe-area-inset-bottom,0px));
  border-radius:24px 24px 0 0;box-shadow:0 -1px 0 rgba(22,22,26,.06),0 -14px 30px -22px rgba(22,22,26,.45)}
@media (min-width:520px){ .dock{margin-inline:0;border-radius:24px;margin-bottom:0;padding-bottom:14px} }
.dock .stakerow{font-size:13.5px;color:#5C5A55}
.dock .stakerow .worth b{font-family:var(--display);font-weight:800;color:#16161A}
.dock .stake{background:#fff}
/* answer fields: rounded, the card's X/Y/Z badge inside, a Check arrow that lights up when there's something to check */
.dock .fields{display:flex;flex-direction:column;gap:8px}
.dock .field{display:flex;flex-direction:row;align-items:center;gap:10px;height:52px;border-radius:999px;background:#F4F2EC;padding:0 6px 0 18px;cursor:text;transition:background .15s,box-shadow .15s}
.dock .field:focus-within{background:#fff;box-shadow:inset 0 0 0 2px #16161A}
.dock .field .b{flex:none;width:26px;height:26px;border-radius:50%;background:#16161A;color:#fff;display:grid;place-items:center;font-family:var(--mono);font-size:12px;margin-left:-6px}
.dock .field input{flex:1;min-width:0;width:auto;height:100%;border:0;background:transparent;padding:0;border-radius:0;font-size:16px;color:#16161A;box-shadow:none;outline:none}
.dock .field input::placeholder{color:#8A877F}
.dock .go{flex:none;width:40px;height:40px;border:0;border-radius:50%;background:rgba(22,22,26,.14);color:#fff;font-size:19px;line-height:1;transition:background .15s}
.dock form.ready .go{background:#16161A}
.dock .field:not(:has(.go)){padding-right:18px}
/* secondary actions: plain text buttons */
.dock .linkbtn{align-self:center;text-decoration:none;border:0;background:transparent;color:#5C5A55;font-family:var(--text);font-weight:600;font-size:14px;min-height:40px;padding:0 12px}
.dock .linkbtn.strong{color:#16161A;border-radius:999px;box-shadow:inset 0 0 0 1.5px rgba(22,22,26,.25);padding:0 16px}
.dock .dockrow{display:flex;justify-content:space-between;align-items:center;gap:8px}
.dock .dockhint{margin:0;text-align:center;font-size:14px;font-weight:600;color:#5C5A55;min-height:24px}
.dock .btn.big{border-radius:999px}
/* true or false: two big pill buttons */
.dock .tfrow{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.dock .bigopt{height:56px;border-radius:999px;border:0;background:#fff;color:#16161A;box-shadow:inset 0 0 0 2px #16161A;font-family:var(--display);font-weight:700;font-size:17px}
.dock .bigopt:active{background:#16161A;color:#fff}
/* sequence: the running order as chips */
.dock .seqchips{display:flex;flex-wrap:wrap;gap:6px;align-items:center;justify-content:center;min-height:32px}
.dock .seqchips span{background:#F1EEE6;border-radius:999px;padding:6px 11px;font-size:13px;font-weight:600}
.dock .seqchips .undo{margin-left:auto;border:0;background:transparent;font-weight:700;font-size:13.5px;text-decoration:underline;min-height:36px;color:#16161A}
/* the result, after answering */
.dock .result{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:18px;background:#F1EEE6}
.dock .result.hit{background:#E6F5EC}
.dock .result.near{background:#FFF3D1}
.dock .result .ric{flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:#16161A;color:#fff;font-weight:700;font-size:16px}
.dock .result.hit .ric{background:#1F8A57}
.dock .result.near .ric{background:#B7791F}
.dock .result p{flex:1;min-width:0;margin:0;font-size:13.5px;line-height:1.35;color:#5C5A55}
.dock .result p b{display:block;font-family:var(--display);font-weight:800;font-size:17px;color:#16161A}
.dock .result .rpts{flex:none;font-family:var(--display);font-weight:800;font-size:18px;font-variant-numeric:tabular-nums}
.dock .result .rpts.neg{color:#9A1B0B}
.dock .sendrow{display:flex;justify-content:center;gap:18px}
.dock .sendrow button{border:0;background:transparent;font-weight:600;font-size:13.5px;color:#5C5A55;min-height:36px}
/* items on the card are the buttons (odd one out, sequence) */
.face .clues li.tappable{cursor:pointer;transition:transform .12s,box-shadow .12s}
.face .clues li.tappable:active{transform:scale(.97)}
.face .clues li.tappable:focus-visible{outline:none;box-shadow:0 0 0 1cqw var(--fg)}
.face .clues li.sel{box-shadow:0 0 0 1.1cqw var(--fg)}
.face .clues li.sel::after{content:'✓';position:absolute;right:2cqw;top:2cqw;z-index:3;width:7cqw;height:7cqw;border-radius:50%;background:var(--fg);color:var(--bg);display:grid;place-items:center;font:700 4cqw/1 var(--text)}
.face .clues.list-layout li.picked{background:#fff;box-shadow:inset 0 0 0 .5cqw var(--fg)}
.face .clues li .ord{margin-left:auto;flex:none;width:7cqw;height:7cqw;border-radius:50%;background:var(--pill);color:var(--pillfg);display:grid;place-items:center;font:700 3.6cqw/1 var(--text)}
/* typed answers fill the card's blanks */
.face .slot i.typed{height:auto;opacity:1;border-bottom-style:solid;transform:none;font-style:normal;font-family:var(--text);font-weight:600;font-size:max(3.8cqw,11px);line-height:1.2;padding-bottom:.6cqw;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ================= covers: a reserved look for each kind of set ================= */
.art[class*="k-"]{--cd:var(--display);color:#16161A;padding:6.5%}
.art .klabel{position:relative;z-index:2;align-self:flex-start;font-family:var(--text);font-weight:600;font-size:max(3.8cqw,10px);line-height:1;background:#16161A;color:#fff;padding:1.8cqw 3.2cqw;border-radius:999px;margin-bottom:3cqw}
.art[class*="k-"] > h3,.art .kface h3{font-size:clamp(16px,9cqw,26px);max-width:88%}
/* Workoutable: a ticket with its number, the date on the stub and the deck's colours as little cards */
.art.k-ticket{background:var(--g);padding:0;-webkit-mask:radial-gradient(circle 9px at 0 80%,#0000 97%,#000) left/51% 100% no-repeat,radial-gradient(circle 9px at 100% 80%,#0000 97%,#000) right/51% 100% no-repeat;mask:radial-gradient(circle 9px at 0 80%,#0000 97%,#000) left/51% 100% no-repeat,radial-gradient(circle 9px at 100% 80%,#0000 97%,#000) right/51% 100% no-repeat}
.art.k-ticket .tband{position:absolute;left:0;right:0;top:0;height:14cqw;background:#16161A;color:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 6cqw;font-family:var(--text);font-weight:600;font-size:max(3.6cqw,10px)}
.art.k-ticket .tband b{font-family:var(--display);font-weight:800;font-size:max(4cqw,11px);letter-spacing:-.01em}
.art.k-ticket .tnum{position:absolute;left:6cqw;top:14.5cqw;margin:0;font-family:var(--display);font-weight:800;font-size:34cqw;line-height:1;letter-spacing:-.06em}
.art.k-ticket .tnum small{font-size:.42em;vertical-align:.9em;margin-right:.03em}
.art.k-ticket .tperf{position:absolute;left:4cqw;right:4cqw;bottom:20%;border-top:max(1px,.6cqw) dashed rgba(22,22,26,.4)}
.art.k-ticket .tstub2{position:absolute;left:0;right:0;bottom:0;height:20%;background:var(--s);display:flex;align-items:center;justify-content:space-between;padding:0 6cqw;font-family:var(--text);font-weight:600;font-size:max(3.4cqw,10px)}
.art.k-ticket .tdeck{display:flex;gap:1.3cqw}
.art.k-ticket .tdeck i{width:5cqw;height:7.4cqw;border-radius:1.2cqw;box-shadow:inset 0 0 0 max(1px,.3cqw) rgba(22,22,26,.18)}
/* your sets: a fanned deck of three of its cards */
.art.k-fan{background:var(--g);justify-content:flex-end}
.art.k-fan .klabel{position:absolute;left:6.5cqw;top:6.5cqw}
.art.k-fan > h3{max-width:54%}
.art .kfan{position:absolute;right:0;top:6cqw;width:48cqw;height:70cqw;pointer-events:none}
.art .mini{position:absolute;top:0;left:4cqw;width:28cqw;aspect-ratio:5/7;border-radius:3cqw;background:var(--bg);box-shadow:0 2cqw 4cqw -2cqw rgba(22,22,26,.35);overflow:hidden;transform-origin:50% 120%;padding:3cqw;display:flex;align-items:flex-end}
.art .mini i{position:absolute;width:24cqw;aspect-ratio:1;border-radius:50%;right:-10cqw;top:-10cqw;background:var(--a)}
.art .mini b{position:relative;font-family:var(--display);font-weight:800;font-size:4.4cqw;line-height:1.05;letter-spacing:-.02em}
.art .mini:nth-child(1){transform:rotate(-14deg)}
.art .mini:nth-child(2){transform:rotate(-2deg) translateX(7cqw)}
.art .mini:nth-child(3){transform:rotate(11deg) translateX(14cqw)}
/* topics: a poster, the title big, the deck's colours as a stripe */
.art.k-poster{background:var(--g)}
.art.k-poster > h3{font-size:clamp(20px,13cqw,34px);line-height:.95;letter-spacing:-.04em}
.art .kstripe{position:absolute;left:0;right:0;bottom:0;height:13%;display:flex}
.art .kstripe i{flex:1}
.art .kstripe i:last-child{flex:.5;background:#16161A}
/* moods: circles */
.art.k-circles{background:var(--g);justify-content:flex-end}
.art.k-circles .klabel{position:absolute;left:6.5cqw;top:6.5cqw}
.art .kc1{position:absolute;width:62cqw;aspect-ratio:1;border-radius:50%;right:-18cqw;top:-26cqw;background:var(--a)}
.art .kc2{position:absolute;width:30cqw;aspect-ratio:1;border-radius:50%;right:22cqw;top:16cqw;background:var(--b);opacity:.9}
/* mix and match: split in both tags' colours */
.art.k-split{background:linear-gradient(135deg,var(--a) 0 50%,var(--b) 50% 100%);justify-content:flex-end}
.art.k-split .klabel{position:absolute;left:6.5cqw;top:6.5cqw;background:#FFFDF8;color:#16161A}
/* ways to work it out, difficulty, offbeat: a stack, the title card on the deck */
.art.k-stack{background:var(--g);padding:0}
.art.k-stack .ke1,.art.k-stack .ke2{position:absolute;left:6cqw;right:6cqw;top:12cqw;bottom:6cqw;border-radius:4.4cqw}
.art.k-stack .ke1{background:var(--e1);transform:translateY(-6cqw) scale(.88)}
.art.k-stack .ke2{background:var(--e2);transform:translateY(-3cqw) scale(.94)}
.art.k-stack .kface{position:absolute;left:6cqw;right:6cqw;top:12cqw;bottom:6cqw;border-radius:4.4cqw;background-color:var(--f);padding:5cqw;display:flex;flex-direction:column;overflow:hidden}
.art.k-stack .kface .klabel{margin-bottom:auto}
.art.k-graph .kface{background-image:linear-gradient(to right,rgb(from var(--tone) r g b / .22) 1px,transparent 1px),linear-gradient(to bottom,rgb(from var(--tone) r g b / .22) 1px,transparent 1px);background-size:6cqw 6cqw}
.art.k-meter .kface{background-image:radial-gradient(rgb(from var(--tone) r g b / .4) .55cqw,transparent .65cqw);background-size:5cqw 5cqw}
.art.k-ruled .kface{background-image:linear-gradient(to right,transparent 4cqw,rgba(227,111,111,.55) 4cqw,rgba(227,111,111,.55) 4.4cqw,transparent 4.4cqw),linear-gradient(to bottom,rgb(from var(--tone) r g b / .28) 1px,transparent 1px);background-size:100% 100%,100% 7cqw}
.art .kmeter{position:absolute;right:5cqw;bottom:5cqw;display:flex;gap:1.6cqw}
.art .kmeter i{width:4.4cqw;height:4.4cqw;border-radius:50%;box-shadow:inset 0 0 0 max(1px,.5cqw) #16161A}
.art .kmeter i.on{background:#16161A}
.shelves-head{margin:10px 0 14px;font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}

/* ================= the hero: today's Workoutable as a big ticket ================= */
.hero2{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(18px,4vw,40px);align-items:center;margin-bottom:34px}
.hero2-ticket{border:0;padding:0;background:transparent;display:block;width:100%;filter:drop-shadow(0 18px 28px rgba(22,22,26,.16));transition:transform .18s}
.hero2-ticket:hover{transform:translateY(-3px) rotate(-.5deg)}
.hero2-ticket .art{border-radius:22px}
.hero2-copy .lbl{font-family:var(--text);font-weight:600;font-size:15px;letter-spacing:0;text-transform:none;color:var(--muted)}
.hero2-copy h1{margin:.15em 0 0;font-family:var(--display);font-weight:800;font-size:clamp(28px,4.4vw,48px);line-height:.98;letter-spacing:-.025em;text-wrap:balance}
.hero2-copy p{margin:10px 0 0;color:var(--muted)}
.hero2-copy .go{margin-top:18px;display:inline-flex;align-items:center;gap:9px;border:0;border-radius:999px;background:#16161A;color:#fff;padding:13px 22px;font-weight:700;font-size:15px;min-height:44px}
.hero2-copy .hero-acts{margin-top:18px}
.hero2-copy .hero-acts .go{margin-top:0}
.hero2-copy .hero-link{color:#16161A;text-decoration:none;border:1.5px solid rgba(22,22,26,.22);border-radius:999px;padding:0 18px;font-weight:700;font-size:15px;display:inline-flex;align-items:center;align-self:stretch}
.hero2-copy .hero-link:hover{border-color:#16161A}
@media (max-width:640px){ .hero2{grid-template-columns:1fr;gap:14px} .hero2-copy h1{font-size:26px} }

/* the /days calendar: each published day reads as a small ticket */
.dcell.pub{position:relative;overflow:hidden;padding-top:12px}
.dcell.pub::before{content:'';position:absolute;left:0;right:0;top:0;height:7px;background:#16161A}
/* a skipped card waiting its turn: an outlined segment on the track */
.session .prog span.skip{background:transparent;box-shadow:inset 0 0 0 1.5px rgba(22,22,26,.45)}
.dock .dockrow .linkbtn{flex:1}
.face .seg .segsep,.seg .segsep{display:inline-block;width:1px;align-self:stretch;background:var(--line);margin:0 4px}
/* the editor's "Try an answer" */
.trybox .tryrow{display:flex;gap:10px;align-items:center}
.trybox .tryrow input{flex:1}
.tryres{flex:none;font-family:var(--display);font-weight:700;font-size:14px;min-width:120px}
.tryres.hit{color:#1F8A57}.tryres.near{color:#B7791F}.tryres.miss{color:#9A1B0B}
.metarow .trybox{flex:1 1 100%}

/* ================= how to play ================= */
.howpage{max-width:880px;margin:0}
.how .howlede{font-size:18px;color:var(--muted);margin:6px 0 26px;max-width:56ch}
.how .howstep{display:grid;grid-template-columns:minmax(0,1fr) 150px;gap:22px;align-items:center;padding:18px 0;border-top:1px solid var(--line)}
.how .howstep:not(:has(.howcard)){grid-template-columns:1fr}
.how .howcopy{display:grid;gap:8px;max-width:60ch}
.how .howcopy h2{margin:0;font-family:var(--display);font-weight:800;font-size:20px;letter-spacing:-.015em}
.how .howcopy p{margin:0;line-height:1.55}
.how .hownum{width:30px;height:30px;border-radius:50%;background:#16161A;color:#fff;display:grid;place-items:center;font-family:var(--mono);font-size:13px}
.how .howpills{display:flex;flex-wrap:wrap;gap:6px}
.how .howpills b{font-weight:600;font-size:13.5px;background:var(--wash);border-radius:999px;padding:5px 11px}
.how .howcard{width:150px;transform:rotate(3deg)}
.how .howstep:nth-of-type(even) .howcard{transform:rotate(-3deg)}
@media (max-width:560px){ .how .howstep{grid-template-columns:1fr} .how .howcard{width:130px;justify-self:start} }
.howdlg{max-height:70vh;overflow-y:auto;padding-right:4px}
.howdlg .how .howstep{grid-template-columns:1fr}
.howdlg .how .howcard{display:none}
.introlink{border:0;background:transparent;padding:0;font:inherit;font-weight:600;text-decoration:underline;color:inherit;cursor:pointer}
/* play screen: the "?" and the replay note */
.session .howbtn{flex:none;width:40px;height:40px;border-radius:50%;border:0;background:rgba(22,22,26,.06);color:#16161A;font-family:var(--display);font-weight:800;font-size:15px}
.session .replaynote{flex:none;text-align:center;font-size:13.5px;font-weight:600;color:#5C5A55;background:rgba(255,255,255,.6);border-radius:999px;padding:6px 12px}

/* Studio › answer rules */
.rules{border:1px solid var(--line,#E4E1DA);border-radius:14px;padding:10px 14px;flex:1 1 100%}
.rules summary{cursor:pointer;font-weight:700;min-height:32px;display:flex;align-items:center;gap:8px}
.rules .rulegroup{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px;padding:12px 0;border-top:1px solid var(--line,#E4E1DA);margin-top:8px}
.rules .rulename{grid-column:1/-1;font-family:var(--display)}
.rules .field span i{font-style:normal;opacity:.6;font-weight:400}
.rules .trybox{grid-column:1/-1}

/* a long read scrolls inside its paper (the question underneath stays put) instead of shrinking the type */
.face .sheet:has(> .rd){flex-shrink:1;min-height:0}
.face .sheet > .setup.rd{flex:0 1 auto;min-height:5.5em;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;-webkit-overflow-scrolling:touch}
.face .sheet > .setup.rd.scrolls{padding-right:1.5cqw}
.face .sheet > .setup.rd.more{-webkit-mask-image:linear-gradient(#000 calc(100% - 2.6em),transparent);mask-image:linear-gradient(#000 calc(100% - 2.6em),transparent)}

/* ---- integrated pass ---- */
/* play: the track fills in as you go (right in ink, close darker grey, a miss lighter) */
.session .prog span.hit{background:#16161A}
.session .prog span.near{background:rgba(22,22,26,.5)}
.session .prog span.miss{background:rgba(22,22,26,.3)}
/* end screen: the squares drawn, the same as the shared picture */
.session .squares{display:flex;gap:6px;font-size:0;letter-spacing:0;margin:2px 0 4px}
.session .squares i{width:28px;height:28px;border-radius:7px;background:rgba(22,22,26,.12);display:grid;place-items:center;font:800 11px/1 var(--display);font-style:normal;color:#16161A}
.session .squares i.hit{background:#2E9E62}.session .squares i.near{background:#E8B33A}
.endacts{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.endacts > .btn{padding-inline:10px;min-width:0}
.endacts > .btn:only-child{grid-column:1/-1}
/* footer: the pages every screen can reach */
.foot-note{padding-top:18px;border-top:1px solid var(--line)}
/* All Workoutables: a readable column, tiles in each day's colour, nothing cut off on a phone */
.days{max-width:720px}
.dcell.pub{background:var(--dc,var(--wash));color:#16161A}
.dcell.pub small{color:#16161A;opacity:.7}
.dcell.played small{opacity:1;font-weight:700}
@media (max-width:480px){ .dcell.pub{padding-top:9px;gap:0} .dcell.pub::before{height:5px} .dcell.pub em{display:none} .dcell.pub small{font-size:9.5px} }

/* word tiles: text may shrink and wrap inside its tile, never clip */
.face .clues li.no-pic .clue-text{min-width:0;overflow-wrap:break-word;hyphens:auto;text-wrap:balance}
.face .clues li.no-pic{font-weight:700}

/* the header's pages: always in reach, the current one in ink */
.pnav{flex-basis:100%;display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;margin:2px -4px 0;padding:2px 4px}
.pnav::-webkit-scrollbar{display:none}
.pnav[hidden]{display:none}
.pnav button{flex:none;border:0;border-radius:999px;background:var(--wash);color:#16161A;font:600 14px var(--text);min-height:40px;padding:0 16px;white-space:nowrap}
.pnav button:hover{background:#E6E2D8}
.pnav button[aria-current="page"]{background:#16161A;color:#fff}
@media (max-width:640px){ .pnav button{font-size:13px;padding:0 13px;min-height:38px} }
/* All Workoutables: a wall of tickets, newest first */
.dstats{display:flex;flex-wrap:wrap;gap:8px}
.dstats span{background:var(--wash);border-radius:999px;padding:8px 14px;font-size:13px;color:var(--muted)}
.dstats b{font-family:var(--display);font-weight:800;color:#16161A;margin-right:2px}
.days{max-width:none}
.dwall{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:22px 18px}
.dticket{border:0;padding:0;background:transparent;text-align:left;display:flex;flex-direction:column;gap:8px;color:inherit;transition:transform .18s}
.dticket .art{filter:drop-shadow(0 10px 18px rgba(22,22,26,.12))}
.dticket:hover{transform:translateY(-3px)}
.dticket .dnote{font-size:13.5px;color:var(--muted);padding-left:2px}
.dticket .dnote b{color:#16161A;font-weight:700}
@media (max-width:520px){ .dwall{grid-template-columns:1fr 1fr;gap:18px 12px} .dticket .dnote{font-size:12.5px} }
/* How to play: the four big things, then the small print as tiles */
.how .howmore{margin:38px 0 14px;font-family:var(--display);font-weight:800;font-size:22px;letter-spacing:-.01em}
.howtips{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px}
.howtip{background:var(--wash);border-radius:16px;padding:14px 16px}
.howtip h3{margin:0 0 4px;font-family:var(--display);font-weight:700;font-size:15px}
.howtip p{margin:0;font-size:14px;line-height:1.45;color:#3A3A40}
.howchip{display:inline-block;border:1.5px solid rgba(22,22,26,.25);border-radius:999px;padding:2px 10px;font-weight:700;white-space:nowrap}
@media (max-width:640px){ .pnav{gap:5px} .pnav button{padding:0 11px;font-size:13px} }

/* ---- How to play, as a deck ---- */
:root{--p-sun:#FFDD7A;--p-coral:#FF9B9B;--p-peach:#FFC08A;--p-sage:#A8E6C1;--p-sky:#8FC6F5;--p-lilac:#C6AEF5;--p-rose:#FFB4C6}
.howpage{max-width:1040px}
.how{display:flex;flex-direction:column;gap:22px}
.how .howtop{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:6px 16px}
.how .howlede{margin:0;color:var(--muted);font-size:16px}
.rdeck{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;padding:6px 2px 10px}
.rcard{position:relative;border-radius:22px;overflow:hidden;background:var(--c);color:#16161A;padding:20px;display:flex;flex-direction:column;gap:10px;min-height:360px;transition:transform .2s;box-shadow:0 14px 26px -18px rgba(22,22,26,.45)}
.rcard > *{position:relative}
.rcard .motif{position:absolute;right:-34px;top:-34px;width:130px;height:130px;border-radius:50%;background:var(--a)}
.rcard .num{font:800 72px/.8 var(--display);letter-spacing:-.06em}
.rcard .num small{font-size:.45em;vertical-align:.8em;margin-right:.02em}
.rcard h3{margin:4px 0 0;font:800 21px/1.04 var(--display);letter-spacing:-.02em;text-wrap:balance}
.rcard p{margin:0;font-size:14px;line-height:1.42}
.rcard .demo{margin-top:auto;background:#FFFDF8;border-radius:14px;padding:12px;display:flex;flex-direction:column;gap:7px;font-size:13px}
@media (min-width:900px){
  .rdeck .rcard:nth-child(1){transform:rotate(-2.2deg)} .rdeck .rcard:nth-child(2){transform:rotate(1deg) translateY(6px)}
  .rdeck .rcard:nth-child(3){transform:rotate(-1deg)} .rdeck .rcard:nth-child(4){transform:rotate(2deg) translateY(4px)}
  .rdeck .rcard:hover{transform:rotate(0) translateY(-6px)}
}
.rdots{display:none;gap:6px;justify-content:center;margin-top:-10px}
.rdots i{width:7px;height:7px;border-radius:9px;background:rgba(22,22,26,.18);transition:width .2s}
.rdots i.on{width:20px;background:#16161A}
.ansbox{border:1.5px solid #16161A;border-radius:999px;padding:7px 8px 7px 14px;display:flex;justify-content:space-between;align-items:center;font-weight:600;background:#fff}
.ansbox b{width:26px;height:26px;border-radius:50%;background:#16161A;color:#fff;display:grid;place-items:center;font-size:13px}
.ladder{display:flex;align-items:flex-end;gap:6px;height:70px}
.ladder i{flex:1;border-radius:6px 6px 2px 2px;background:#16161A;display:flex;justify-content:center;color:#fff;font:700 12px/1 var(--display);font-style:normal;padding-top:5px}
.ladder-l{display:flex;gap:6px}.ladder-l span{flex:1;text-align:center;font:600 11px var(--text)}
.how .chip{align-self:flex-start;background:#16161A;color:#fff;border-radius:999px;padding:6px 12px;font:700 13px var(--display)}
.how .row{display:flex;justify-content:space-between;align-items:center;gap:8px}
.how .typed{font-weight:600}
.how .v{flex:none;font:700 11.5px var(--display);border-radius:999px;padding:4px 10px}
.how .v.hit{background:#2E9E62;color:#fff}.how .v.near{background:#E8B33A;color:#16161A}.how .v.miss{background:rgba(22,22,26,.12);color:#16161A}
.how .share{background:#FFFDF8;border-radius:22px;padding:18px;display:flex;flex-direction:column;gap:12px;box-shadow:inset 0 0 0 1px var(--line)}
.how .share h2,.how .stubs h2{margin:0;font:800 21px var(--display);letter-spacing:-.01em}
.how .share > p{margin:-8px 0 0;font-size:14px;color:var(--muted)}
.sgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.stile{background:#fff;border-radius:16px;padding:12px;display:flex;flex-direction:column;gap:6px;box-shadow:0 1px 0 var(--line),0 0 0 1px var(--line)}
.stile b{font:700 14.5px var(--display)}
.stile span{font-size:13px;color:#3A3A40;line-height:1.38}
.stile .ill{height:56px;border-radius:12px;background:var(--c);display:flex;align-items:center;justify-content:center;gap:5px;font:800 15px var(--display);color:#16161A}
.stile .ill i{width:15px;height:15px;border-radius:4px;background:rgba(22,22,26,.14)}
.stile .ill i.h{background:#2E9E62}.stile .ill i.n{background:#E8B33A}
.stile .ill .mini{width:28px;height:40px;border-radius:6px;background:#fff;box-shadow:0 3px 6px rgba(22,22,26,.2)}
.stile .ill .story{width:26px;height:44px;border-radius:6px;background:#fff;border:2.5px solid #16161A}
.how .stubs{display:flex;flex-direction:column;gap:12px}
.stubgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:8px}
.stub{display:flex;gap:12px;align-items:flex-start;border-radius:14px;background:var(--wash);padding:12px 14px}
.stub i{flex:none;width:8px;align-self:stretch;border-radius:4px;background:var(--c)}
.stub b{display:block;font:700 14px var(--display)}
.stub span{font-size:13px;color:#3A3A40;line-height:1.4}
/* phone: the deck swipes, one card at a time */
@media (max-width:899px){
  .rdeck{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;margin-inline:-16px;padding:6px 16px 12px;scroll-padding-inline:16px;scrollbar-width:none}
  .rdeck::-webkit-scrollbar{display:none}
  .rdeck .rcard{flex:0 0 min(78%,300px);scroll-snap-align:center;min-height:340px}
  .rdots{display:flex}
  .sgrid{grid-template-columns:1fr 1fr}
}
.howdlg .rdeck{margin-inline:0;padding-inline:0}
@media (prefers-reduced-motion:reduce){ .rcard,.rdots i{transition:none} }

/* Studio › a Workoutable's card picker: cards already used in another day can't be picked */
.thumb.taken{cursor:not-allowed;filter:grayscale(.6)}
.oddnote{flex:1 1 100%;margin:0}
.oddnote.todo{background:#FFF1C9;border-radius:12px;padding:10px 12px}

/* Ticket: the band always fits a pill (pills have a pixel minimum, the band scales with the card), and the
   pills and number sit centred in it; the second pill is a soft white tint on the dark band */
.face.is-ticket{--tb:max(15.5cqw,calc(max(3.3cqw,10px)*1.2 + 2.8cqw + 10px))}
.face.is-ticket .tband{height:var(--tb)}
.face.is-ticket .top{margin-top:-7cqw;height:var(--tb);min-height:0;align-items:center}
.face.is-ticket .body{margin-top:1.5cqw}
.face.is-ticket .pill.soft{background:rgba(255,255,255,.16);box-shadow:none;color:#fff;opacity:1}