/* 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}
.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 .face.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{--ph:95cqw}
/* the photo keeps its full size; only the paper moves: it rises over the photo as far as the story needs (fitFace sets --ph) */
.face.front.is-image .heropic{height:95cqw}
.face.front.is-image .body{padding-top:calc(var(--ph) - 26.8cqw)}
.face.front.is-image .body > :first-child{margin-top:auto}
.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}
/* with a label above the answer, the badge sits beside the answer, not between the two */
.face .xy .xyrow:has(.xylabel){row-gap:.6cqw}
.face .xy .xyrow:has(.xylabel) > .xyv{display:contents}
.face .xy .xyrow:has(.xylabel) > .b{grid-area:2/1}
.face .xy .xyrow:has(.xylabel) .xylabel{grid-area:1/2}
.face .xy .xyrow:has(.xylabel) .xyval{grid-area:2/2}
.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 back: one layout for every type =================
   The answer panel (label, then the answer), the picture's source, the why on paper. Answers come in fixed
   steps (answerStep in core.js) carried as --af, so 1, 2 and 3 answers look the same on every card. */
.face .apanel{display:flex;flex-direction:column;gap:2.6cqw;flex-shrink:0;min-width:0}
.face .apanel .ans,.face .xy .xyval{font-size:var(--af)}
.face .xy{gap:3.4cqw}
/* each answer's badge sits centred on the answer's first line, whatever its size */
.face .xy .xyrow > .b{margin-top:calc((var(--af) * 1.02 * var(--lead,1) - 6.6cqw) / 2)}
/* answers never break inside a word */
.face .apanel :is(.ans,.xyval){hyphens:manual;overflow-wrap:normal}
.face .xy .xylabel{font-size:max(3.2cqw,10px);line-height:1.2}
.face .ans .aunit{font-size:max(3.6cqw,12px);opacity:.8}
.face .areason{margin:0;font-family:var(--cdisp);font-weight:700;font-size:5.4cqw;line-height:1.15;letter-spacing:-.015em;text-wrap:balance}
.face .credit{margin:-1cqw 0 0}
/* who am I: the clues as one quiet line each under the answer */
.face .wclues.onback{gap:1.2cqw}
.face .wclues.onback li{padding:1.6cqw 2.6cqw;align-items:center}
.face .wclues.onback li > .b{width:5.4cqw;height:5.4cqw}
.face .wclues.onback li p:not([contenteditable]){display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;overflow:hidden;font-size:max(3.6cqw,10.5px);line-height:1.3}
.face .wclues.onback li p[contenteditable]{font-size:max(3.6cqw,10.5px)}
/* with a picture: it fills the top (as tall as the back allows, see fitFace) and the answer panel rises over its bottom edge */
.face.has-anspic{--ph:60cqw}
.face .heropic.anshero{height:var(--ph)}
.face.back.has-anspic .body{padding-top:calc(var(--ph) - 22cqw)}
.face.back.has-anspic .body > :first-child{margin-top:0}
.face.back.has-anspic .apanel{position:relative;background:var(--bg);margin-inline:-7cqw;padding:5cqw 7cqw 1.4cqw;border-radius:5cqw 5cqw 0 0}
.face.back.has-anspic.is-ticket .apanel{border-radius:4cqw 4cqw 0 0}
/* pills and the number over a photo sit on ink, so they read on any picture */
.face:is(.front.is-image,.back.has-anspic) .top .no{background:#16161A;color:#fff;opacity:1;text-shadow:none;border-radius:999px;padding:1.3cqw 2.6cqw;box-shadow:0 .6cqw 2cqw rgba(0,0,0,.25)}
.face:is(.front.is-image,.back.has-anspic) .pill{box-shadow:0 .6cqw 2cqw rgba(0,0,0,.25)}
.face:is(.front.is-image,.back.has-anspic) .pill.soft{background:#16161A;color:#fff;opacity:1}

/* ================= 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:4em;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}

/* ---- Quotes: pull-quotes on warm paper; one is big with a large mark in the card's own tone ---- */
.face .quotes{display:flex;flex-direction:column;gap:2.2cqw;flex-shrink:0}
.face .qslip{margin:0;display:flex;gap:2.6cqw;align-items:flex-start;background:#FFFDF8;color:#16161A;border-radius:3.4cqw;padding:3.2cqw 3.6cqw;position:relative}
.face .qslip > .b{margin-top:.3cqw}
.face .qslip .qtext{flex:1;min-width:0;display:flex;flex-direction:column;gap:1.2cqw}
.face .qslip blockquote{margin:0;font-family:var(--cbody);font-weight:500;line-height:1.4;color:#2A2A2F;overflow-wrap:break-word}
.face .qslip blockquote:not(:empty)::before{content:'\201C'}
.face .qslip blockquote:not(:empty)::after{content:'\201D'}
.face .qslip figcaption{font-family:var(--text);font-weight:600;font-size:max(3cqw,9.5px);color:#6B6A70}
.face .qslip figcaption:not(:empty)::before{content:'— '}
.face .qslip.now{box-shadow:0 0 0 .6cqw #16161A}
.face .qslip.locked{background:rgba(255,255,255,.45);color:inherit;align-items:center;font-family:var(--text);font-weight:600;font-size:max(3.4cqw,10px);opacity:.75}
.face .qslip.locked .b{background:transparent;color:inherit;box-shadow:inset 0 0 0 .4cqw currentColor;opacity:.6}
.face .quotes.one .qslip{padding:5cqw 5cqw 4.6cqw 14cqw}
.face .quotes.one .qslip::before{content:'\201C';position:absolute;left:3.2cqw;top:.6cqw;font-family:var(--cdisp);font-weight:800;font-size:17cqw;line-height:1;color:var(--gridc)}
.face .quotes.one blockquote{font-weight:600;line-height:1.34;color:#16161A;letter-spacing:-.005em}
.face .quotes.one blockquote::before,.face .quotes.one blockquote::after{content:none}
.face .quotes.onback .qslip{padding:2.6cqw 3.4cqw}
.face .quotes.onback blockquote{color:#3A3A40}
.face[data-fit] .qslip blockquote:empty{display:none}

/* ---- Who am I?: a silhouette, the kind, and a ladder of clues ---- */
.face .whohead{display:flex;align-items:flex-end;justify-content:space-between;gap:3cqw;flex-shrink:0}
.face .whohead .q{margin:0;font-weight:var(--cwb,800);letter-spacing:-.03em;line-height:1}
.face .silh{flex:none;width:15cqw;aspect-ratio:1;border-radius:50%;background:#16161A;position:relative;overflow:hidden}
.face .silh::before{content:'';position:absolute;left:50%;top:18%;width:38%;aspect-ratio:1;border-radius:50%;background:var(--bg);transform:translateX(-50%)}
.face .silh::after{content:'';position:absolute;left:50%;top:60%;width:72%;height:60%;border-radius:50% 50% 0 0;background:var(--bg);transform:translateX(-50%)}
.face .wclues{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2cqw;flex-shrink:0}
.face .wclues li{display:flex;gap:2.6cqw;align-items:flex-start;background:#FFFDF8;color:#16161A;border-radius:3.2cqw;padding:2.8cqw 3.2cqw;position:relative}
.face .wclues li > .b{margin-top:.2cqw}
.face .wclues li p{margin:0;flex:1;min-width:0;font-family:var(--cbody);font-weight:500;line-height:1.38;color:#2A2A2F}
.face .wclues li.now p{font-family:var(--cdisp);font-weight:700;line-height:1.2;letter-spacing:-.015em;color:#16161A}
.face .wclues li.past{opacity:.85}
.face .wclues li.locked{background:rgba(255,255,255,.42);color:inherit;align-items:center}
.face .wclues li.locked p{font-family:var(--text);font-weight:600;font-size:max(3.4cqw,10px);color:inherit;opacity:.75}
.face .wclues li.locked .b{background:transparent;color:inherit;box-shadow:inset 0 0 0 .4cqw currentColor;opacity:.6}
.face .wclues.onback li{padding:2.2cqw 3cqw}
.face .wclues li.got{box-shadow:0 0 0 .6cqw #16161A}
.face .wclues .gotpts{flex:none;align-self:center;background:#16161A;color:#fff;border-radius:999px;padding:.8cqw 2.2cqw;font-family:var(--display);font-weight:700;font-size:max(2.8cqw,9px)}
/* play: a wrong guess on who am I */
.wrongnote{margin:0 0 8px;background:#F3F1EC;border-radius:12px;padding:9px 12px;font-size:13.5px;color:#3A3A40}
.wrongnote b{font-family:var(--display);color:#16161A}

/* quotes: who it's by (hint on the front, source on the back) reads clearly */
.face .qslip figcaption{font-size:max(3.7cqw,11px);font-weight:600;color:#4A4950;line-height:1.3}
.face .quotes.one figcaption{font-size:max(4.2cqw,12px);color:#3A3A40}
.face .quotes.onback figcaption{font-size:max(3.5cqw,10.5px)}

/* quotes, the back: where the quotes are from, as quiet lines under the answer */
.face .qsources{display:flex;flex-direction:column;gap:1.2cqw;flex-shrink:0}
.face .qsources p{margin:0;font-family:var(--text);font-weight:600;font-size:max(3.7cqw,11px);line-height:1.3;opacity:.8}
.face .qsources p:not(:empty)::before{content:'— '}
.face .qsources .lbl{margin-bottom:.4cqw}
/* picture cards: the body and pill row lie over the picture, so their empty space lets clicks through to it
   (in the Studio, clicking the picture opens the picker); what's inside them stays clickable */
.face.front.is-image .body,.face.front.is-image .top{pointer-events:none}
.face.front.is-image .body > *,.face.front.is-image .top > *{pointer-events:auto}

/* ================= play, phone first: the card takes the screen ================= */
/* top bar: close, the set's name (smaller), and what this card is worth */
.session .sbar{min-height:40px;gap:10px}
.session .exit{width:36px;height:36px;font-size:14px}
.session .sbar .name{font:600 13.5px/1.2 var(--text);color:rgba(22,22,26,.72);letter-spacing:0}
.session .sbar .name b{font-family:var(--display);font-weight:700;color:#16161A}
.wchip{flex:none;display:inline-flex;align-items:center;gap:5px;height:30px;padding:0 11px;border-radius:999px;background:#fff;box-shadow:inset 0 0 0 1.5px var(--tn,rgba(22,22,26,.2));font:800 13px var(--display);color:#16161A;white-space:nowrap;font-variant-numeric:tabular-nums}
.wchip svg{width:13px;height:13px;color:var(--tn,#16161A)}
.wchip.x2{background:#16161A;color:#fff;box-shadow:none}
.wchip.won{background:#2E9E62;color:#fff;box-shadow:none}
.wchip.lost{background:rgba(255,255,255,.7);color:#5C5A55}
/* the track: each card in its own colour; played solid, a miss striped, now taller and outlined, to come faint */
.session .prog{gap:5px;align-items:center;height:8px}
.session .prog span{height:5px;border-radius:5px;background:var(--c);opacity:.32;box-shadow:none;transition:height .2s}
.session .prog span.done{opacity:1}
.session .prog span.miss{opacity:1;background:repeating-linear-gradient(135deg,var(--c) 0 4px,rgba(255,255,255,.6) 4px 7px)}
.session .prog span.now{opacity:1;height:8px;background:var(--c);box-shadow:0 0 0 1.5px #16161A}
.session .prog span.skip{opacity:.6;background:transparent;box-shadow:inset 0 0 0 1.5px var(--c)}
/* the card: full width, and as tall as the space allows (never taller than 5:7) */
.session .stage{position:relative;width:min(100cqw,440px);height:min(100cqh,calc(min(100cqw,440px)*1.4))}
.session .stage .flip{aspect-ratio:auto;height:100%}
.session .stage.staked .face.front{box-shadow:inset 0 0 0 3px #16161A}
.x2badge{position:absolute;z-index:4;top:-8px;right:-6px;background:#16161A;color:#fff;border-radius:999px;padding:4px 10px;font:800 13px var(--display);box-shadow:0 4px 10px -4px rgba(22,22,26,.5)}
/* at rest the card is flat (iPhone scrolls it); it's 3D only while it turns over */
.flip:not(.turning) .inner{transform:none;transform-style:flat}
.flip:not(.turning):not(.on) .face.back{display:none}
.flip.on:not(.turning) .face.front{display:none}
.flip.on:not(.turning) .face.back{transform:none}
.flip.notrans .inner{transition:none}
/* tapped choices ring in the card's own deeper colour */
.face .clues li.sel{box-shadow:0 0 0 1.1cqw var(--gridc)}
.face .clues li.sel::after{background:var(--gridc);color:#fff}
.face .clues.list-layout li.picked{box-shadow:inset 0 0 0 .6cqw var(--gridc)}
.face .clues li .ord{background:var(--gridc);color:#fff}
/* the reading bar: Skip, the next clue, Answer */
.dock.bar{background:transparent;box-shadow:none;margin:0;padding:0 0 max(4px,env(safe-area-inset-bottom,0px));border-radius:0;gap:6px}
.barrow{display:flex;align-items:center;gap:8px}
.barbtn{flex:none;height:52px;border:0;border-radius:16px;padding:0 18px;font:700 15px var(--display);display:inline-flex;align-items:center;justify-content:center;gap:8px;cursor:pointer}
.barbtn.main{flex:1;background:#16161A;color:#fff}
.barbtn.ghost{background:rgba(255,255,255,.72);color:#16161A;box-shadow:inset 0 0 0 1.5px rgba(22,22,26,.18);font:600 14px var(--text)}
.barbtn.ghost.off{opacity:.5;cursor:default}
.barbtn.tf{flex:1;background:#fff;color:#16161A;box-shadow:inset 0 0 0 2px #16161A;font-size:16px}
.barhint{flex:1;font:600 13.5px var(--text);color:#5C5A55;text-align:center}
.stakechip{flex:none;width:52px;height:52px;border:0;border-radius:16px;background:rgba(255,255,255,.72);box-shadow:inset 0 0 0 1.5px rgba(22,22,26,.18);font-size:20px;cursor:pointer}
.stakechip[aria-pressed="true"]{background:#16161A;box-shadow:none}
.barfoot{display:flex;justify-content:space-between;min-height:0}
.barfoot:empty{display:none}
.barfoot .linkbtn{text-decoration:none;font:600 13.5px var(--text);color:#5C5A55;min-height:36px;padding:0 4px}
/* the answer sheet */
.dock.sheet2{gap:10px;padding-top:6px}
.dock.sheet2 .handle{align-self:center;width:44px;height:18px;border:0;background:transparent;position:relative;cursor:pointer;margin-bottom:-4px}
.dock.sheet2 .handle::before{content:'';position:absolute;left:0;right:0;top:6px;height:5px;border-radius:5px;background:#D9D5CC}
.dock .stakerow{min-height:40px}
.dock .stake[aria-pressed="true"]{background:#16161A;color:#fff;box-shadow:none}
.dock .fields .field{height:48px;border-radius:14px}
.dock .go{border-radius:11px}
.sheetfoot{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}
.sheetfoot .linkbtn{min-height:38px}
.dock.sheet2 .wrongnote{margin:0}
/* the replay note: a quiet line */
.session .replaynote{background:transparent;padding:0;font-weight:500;font-size:12.5px}
.barrow,.barfoot{width:100%;align-self:stretch}
.session .stagewrap{align-items:flex-start}
.session .stage{height:min(100cqh,calc(min(100cqw,440px)*1.75))}

/* ================= home: the Workoutables carousel, your bar, carry on ================= */
/* the page links under the header: How to play and Stats, lightly coloured; "← Home" on the other pages */
.pnav{gap:8px}
.pnav button{display:inline-flex;align-items:center;gap:8px;height:40px;min-height:40px;padding:0 14px 0 6px;border-radius:12px;font:600 14px var(--text);color:#16161A}
.pnav button .ic{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;font:700 14px var(--display)}
.pnav button .ic svg{width:17px;height:17px}
.pnav button.pl-how{background:#F1ECFD}.pnav button.pl-how .ic{background:#C6AEF5}
.pnav button.pl-me{background:#FFF6DA}.pnav button.pl-me .ic{background:#FFDD7A}
.pnav button.pl-home{background:var(--wash)}.pnav button.pl-home .ic{background:#fff}
.pnav button:hover{filter:brightness(.97)}
.pnav button[hidden]{display:none}
.pnav .pl-wide{display:inline}
@media (max-width:640px){ .pnav button{font-size:13.5px;padding:0 12px 0 6px} }
.shelf-head .seeall{border:0;background:transparent;font:600 14px var(--text);color:var(--muted);cursor:pointer;min-height:36px}
/* the carousel */
.wshelf .wnote{margin:-4px 0 10px;font-size:14px;color:var(--muted)}
.wshelf .wnote b{font-family:var(--display);font-weight:700;color:#16161A}
.wrail{display:flex;gap:12px;overflow-x:auto;scrollbar-width:none;scroll-snap-type:x mandatory;margin-inline:-16px;padding:2px 16px 12px;scroll-padding-inline:16px}
.wrail::-webkit-scrollbar{display:none}
.wrail > .wtk{flex:0 0 86%;scroll-snap-align:start}
@media (min-width:720px){ .wrail{margin-inline:0;padding-inline:0;gap:16px} .wrail > .wtk{flex:0 0 230px} .wrail > .wtk.lead{flex:0 0 min(440px,44%)} }
/* the ticket */
.wtk{position:relative;display:flex;flex-direction:column;border:0;padding:0;text-align:left;border-radius:22px;overflow:hidden;cursor:pointer;color:#16161A;background:transparent;box-shadow:0 22px 34px -24px rgba(22,22,26,.6);transition:transform .18s;
  --stub:60px;-webkit-mask:radial-gradient(circle 10px at 0 calc(100% - var(--stub)),#0000 97%,#000) left/51% 100% no-repeat,radial-gradient(circle 10px at 100% calc(100% - var(--stub)),#0000 97%,#000) right/51% 100% no-repeat;mask:radial-gradient(circle 10px at 0 calc(100% - var(--stub)),#0000 97%,#000) left/51% 100% no-repeat,radial-gradient(circle 10px at 100% calc(100% - var(--stub)),#0000 97%,#000) right/51% 100% no-repeat}
.wtk:hover{transform:translateY(-2px)}
.wtk .bd{position:relative;flex:1;background:var(--g);padding:16px 18px;display:flex;flex-direction:column;min-height:200px}
.wtk .wlbl{font:600 12px var(--text);color:rgba(22,22,26,.65)}
.wtk .wlbl .dt{font-weight:700;color:#16161A}
.wtk .num{font:800 110px/.8 var(--display);letter-spacing:-.06em;margin-top:8px}
.wtk .num small{font-size:.42em;vertical-align:.95em;margin-right:.02em}
.wtk .ttl{margin-top:auto;padding-top:10px;font:700 15px/1.25 var(--display);letter-spacing:-.01em;max-width:74%;position:relative;z-index:1}
.wtk .fan{position:absolute;right:14px;top:28px;width:118px;height:108px;transform:scale(.9);transform-origin:100% 0}
.wtk .fan i{position:absolute;left:38px;top:6px;width:46px;height:64px;border-radius:8px;background:var(--c);box-shadow:0 0 0 2px #fff,0 6px 12px -6px rgba(22,22,26,.45);overflow:hidden;transform-origin:50% 130%}
.wtk .fan i::after{content:'';position:absolute;width:30px;height:30px;border-radius:50%;right:-10px;top:-10px;background:rgba(255,255,255,.55)}
.wtk .fan i:nth-child(1){transform:rotate(-24deg)}.wtk .fan i:nth-child(2){transform:rotate(-12deg)}.wtk .fan i:nth-child(4){transform:rotate(12deg)}.wtk .fan i:nth-child(5){transform:rotate(24deg)}
.wtk .st{height:var(--stub);flex:none;background:#16161A;color:#fff;display:flex;align-items:center;gap:10px;padding:0 9px 0 16px;border-top:2px dashed rgba(255,255,255,.28)}
.wtk .facts{display:flex;align-items:center;gap:12px;min-width:0;flex:1}
.wtk .fact{display:flex;align-items:center;gap:4px;font:500 12px var(--text);color:rgba(255,255,255,.7);white-space:nowrap}
.wtk .fact svg{width:15px;height:15px;color:#fff;flex:none}
.wtk .fact b{font:800 15px var(--display);color:#fff}
.wtk .fact em{font-style:normal}
.wtk .pbtn{flex:none;display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 7px;border-radius:999px;background:#fff;color:#16161A;font:700 14px var(--display)}
.wtk .pbtn .t{display:none}
.wtk .pbtn .d{width:28px;height:28px;border-radius:50%;background:#16161A;color:#fff;display:grid;place-items:center}
.wtk .pbtn .d svg{width:12px;height:12px}
.wtk .pbtn.ok{background:rgba(255,255,255,.16);color:#fff;width:40px;padding:0;justify-content:center;font-size:16px}
.wtk.done::after{content:'';position:absolute;inset:0;background:rgba(255,255,255,.55);pointer-events:none}
.wtk.done{box-shadow:none}
/* the lead ticket on a wide screen: bigger, and its facts in words */
@media (min-width:720px){
  .wtk.lead .bd{min-height:250px;padding:20px 22px}
  .wtk.lead .num{font-size:160px}
  .wtk.lead .ttl{font-size:17px}
  .wtk.lead .fan{transform:none;right:30px;top:40px}
  .wtk.lead .fact{font-size:13px}.wtk.lead .fact b{font-size:18px}
  .wtk:not(.lead) .num{font-size:92px}
  .wtk:not(.lead) .fan{display:none}
  .wtk:not(.lead) .bd{min-height:0}
}

/* your bar: streak and score */
.statsbar{width:100%;display:flex;align-items:center;gap:20px;border:0;border-radius:14px;background:var(--wash);padding:12px 16px;margin:-10px 0 28px;font:500 14px var(--text);color:var(--muted);cursor:pointer;text-align:left}
.statsbar b{font:800 18px var(--display);color:#16161A;margin-right:3px}
.statsbar .go{margin-left:auto;color:#16161A;font-size:18px}
/* carry on: wide rows */
.carry{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px}
.crow{display:flex;align-items:center;gap:14px;border:0;background:#fff;border-radius:16px;box-shadow:inset 0 0 0 1px var(--line);padding:10px 14px 10px 10px;cursor:pointer;text-align:left;color:inherit}
.crow .thumb{width:104px;flex:none}
.crow .thumb .art{border-radius:10px}
.crow .thumb .klabel,.crow .thumb h3{display:none}
.crow .ct{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.crow .ct b{font:700 15px var(--display);letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.crow .ct > span{font-size:13px;color:var(--muted)}
.crow .cprog{height:4px;border-radius:4px;background:var(--wash);overflow:hidden}
.crow .cprog i{display:block;height:100%;background:#16161A}
.crow .cgo{font:700 14px var(--display);white-space:nowrap}
/* shelves: four across on a wide screen; finished ones fade back */
@media (min-width:900px){ .rail{grid-auto-columns:calc((100% - 42px)/4)} }
.cover.done .art{opacity:.45}

/* the page links sit on the right */
.pnav{justify-content:flex-end}
/* the Workoutables rail: no heading; it ends with a tile for all of them */
.wshelf{margin-top:4px}
.wall{flex:0 0 132px;scroll-snap-align:start;border:0;border-radius:22px;background:var(--wash);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;font:700 14px/1.2 var(--display);color:#16161A;cursor:pointer;text-align:center;padding:12px}
.wall .deck{position:relative;width:44px;height:38px}
.wall .deck i{position:absolute;top:0;width:28px;height:38px;border-radius:6px;box-shadow:0 0 0 2px var(--wash)}
.wall .deck i:nth-child(1){left:0;transform:rotate(-12deg);background:#8FC6F5}.wall .deck i:nth-child(2){left:8px;background:#FFB4C6}.wall .deck i:nth-child(3){left:16px;transform:rotate(12deg);background:#FFDD7A}
@media (max-width:719px){ .wall{flex-basis:40%} }
/* 3. the track reads left to right: played cards in their colour, the current one in its colour and outlined, the rest grey */
.session .prog span{background:rgba(22,22,26,.12);opacity:1}
.session .prog span.done{background:var(--c)}
.session .prog span.miss{background:repeating-linear-gradient(135deg,var(--c) 0 4px,rgba(255,255,255,.6) 4px 7px)}
.session .prog span.now{background:var(--c)}
.session .prog span.skip{background:transparent;box-shadow:inset 0 0 0 1.5px rgba(22,22,26,.3)}

/* ================= home: challenge sets and practice ================= */
.pgroup{display:flex;align-items:center;gap:12px;margin:34px 0 0}
.pgroup h2{margin:0;font:800 20px var(--display);letter-spacing:-.02em;white-space:nowrap}
.pgroup .rule{flex:1;height:1px;background:var(--line)}
.pnote{margin:4px 0 14px;font-size:14px;color:var(--muted)}
/* a pill on the tile: the points on a challenge set, cards left on practice; in the tile's complementary pastel, ink text */
.art .kpill{position:absolute;z-index:3;font-family:var(--display);font-weight:700;font-size:max(4cqw,11px);line-height:1;color:#16161A;background:var(--pc);border-radius:999px;padding:2cqw 3.6cqw;box-shadow:0 1px 0 rgba(22,22,26,.08)}
.art .kpill.top{left:6.5cqw;top:6.5cqw}
.art .kpill.low{right:5cqw;bottom:calc(13% + 3cqw)}
.art .kpill.corner{right:5cqw;bottom:5cqw}
.art.k-fan .kfan{top:17cqw}
/* finished ones fade back, the pill stays crisp */
.cover.done .art{opacity:1;background-color:#F6F4EF}
.cover.done .art > *:not(.kpill){opacity:.45}

/* How to play: the three ways to play, three across (one per row on a phone) */
.how .share.three .sgrid{grid-template-columns:repeat(3,minmax(0,1fr))}
.how .share.three .stile .ill{font-size:17px}
@media (max-width:640px){ .how .share.three .sgrid{grid-template-columns:1fr} }

/* a long read that scrolls says so: a small "More" pill over its faded last line */
.face .rdmore{position:relative;z-index:2;align-self:center;margin:-1.4cqw 0 0;height:6.4cqw;padding:0 3.2cqw;border:0;border-radius:999px;background:#16161A;color:#fff;font-family:var(--text);font-weight:600;font-size:max(3cqw,10px);line-height:1;cursor:pointer;box-shadow:0 .6cqw 2cqw rgba(0,0,0,.2);flex-shrink:0}
.face .rdmore[hidden]{display:none}
/* one long quote scrolls inside its own slip (the slip keeps its rounded corners and stays clear of the foot) */
.face[data-fit] .quotes.one{flex-shrink:1;min-height:0}
.face[data-fit] .quotes.one .qslip{flex:0 1 auto;min-height:0;align-items:stretch}
.face[data-fit] .quotes.one .qtext{min-height:0}
.face .quotes.one blockquote.rd{flex:0 1 auto;min-height:4em;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
.face .quotes.one blockquote.rd.more{-webkit-mask-image:linear-gradient(#000 calc(100% - 2.6em),transparent);mask-image:linear-gradient(#000 calc(100% - 2.6em),transparent)}
/* the number stays readable where a theme's corner shape sits behind it */
.face.has-corner .top .no{background:var(--bg);opacity:1;border-radius:999px;padding:1.3cqw 2.6cqw;margin-right:-2.6cqw}
/* in play the top bar already says Workoutable: the card gives the wordmark's room to the question
   (shared pictures and reels keep it) */
.session .stage .face .foot .wm{display:none}
.session .stage .face:not(.is-ticket):not(.is-stripes) .foot{display:none}

/* ================= home pass ================= */
/* the page links sit at the end of the "Figure it out!" row: icons and words on a wide screen, icons on a phone */
/* the tagline starts its own row under the logos and shares it with the links */
.bar .brk{flex-basis:100%;height:0}
.tagline{flex:1 1 0;min-width:0;margin-top:10px}
.bar .wtw-logo{margin-left:auto}
.bar .pnav{flex:0 0 auto;margin:10px -4px 0 0;justify-content:flex-end}
@media (max-width:640px){
  .bar .pnav button:is(.pl-how,.pl-me){width:44px;height:44px;min-height:44px;padding:0;justify-content:center;border-radius:14px}
  .bar .pnav button:is(.pl-how,.pl-me) .pt{display:none}
  .bar .pnav button:is(.pl-how,.pl-me) .ic{background:transparent}
}
/* every ticket: the date (or Today) on top in ink */
.wtk .wlbl{font:600 12.5px var(--text);color:#16161A}
.wtk .wlbl .w{color:rgba(22,22,26,.65)}
.wall .wl{display:block}.wall .nw{white-space:nowrap}
/* loading: ticket-shaped placeholders where the tickets will be */
.wtk.skel{display:block;height:258px;background:linear-gradient(100deg,var(--wash) 40%,#F6F4EF 50%,var(--wash) 60%) 0 0/300% 100%;box-shadow:none;cursor:default}
.wtk.skel:hover{transform:none}
@media (prefers-reduced-motion:no-preference){ .wtk.skel{animation:skel 1.4s linear infinite} }
@keyframes skel{to{background-position:-150% 0}}
@media (min-width:720px){ .wtk.skel.lead{height:316px} }

/* ================= sharing: one button, one sheet, three kinds with their own icons ================= */
.sharebtn{align-self:center;display:inline-flex;align-items:center;gap:8px;border:0;background:transparent;color:#16161A;font:600 14px var(--text);min-height:44px;padding:0 14px;border-radius:999px;cursor:pointer}
.sharebtn:hover{background:rgba(22,22,26,.06)}
.sharebtn svg,.withic svg,.shrow .shic svg{width:19px;height:19px;flex:none}
.btn.withic{display:inline-flex;align-items:center;justify-content:center;gap:9px}
.sharesheet{display:flex;flex-direction:column;gap:8px}
.sharesheet h3{margin:0 0 6px;font:800 20px var(--display);letter-spacing:-.01em}
.shrow{display:flex;align-items:center;gap:14px;width:100%;border:0;border-radius:16px;background:var(--wash);padding:12px 14px;text-align:left;cursor:pointer;color:#16161A;min-height:64px}
.shrow:hover{filter:brightness(.97)}
.shrow .shic{width:42px;height:42px;border-radius:12px;background:#fff;display:grid;place-items:center;flex:none}
.shrow b{display:block;font:700 15px var(--display)}
.shrow > span:last-child > span{display:block;font-size:13.5px;color:var(--muted);margin-top:2px}
.sharesheet #sh-close{align-self:center;margin-top:4px}
.how .share.three .stile .ill svg{width:30px;height:30px}
/* the end screen: score, squares, recap, Challenge and Share, what's next, then quiet links */
.endscreen > #shareEnd{margin-top:-2px}
.session .squares i.miss{background:#FF9B9B}
.crow.nextup{opacity:1;min-height:0;width:100%;font-size:inherit;background:#fff;margin-top:6px}
.crow.nextup .ct > span{font-size:12.5px;color:var(--muted)}
.crow.nextup .cgo{font-size:22px;padding-right:4px}
.crow.nextup .thumb{width:84px}
.endlinks{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 18px;margin-top:4px}
.endlinks button{border:0;background:transparent;color:#5C5A55;font:600 14px var(--text);min-height:44px;cursor:pointer;text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(22,22,26,.25)}
/* ================= play on a wide screen: the card on the left at full height, what you do on the right ================= */
@media (min-width:1024px) and (min-height:600px){
  .session:not(.is-end) .scol{max-width:1040px;display:grid;grid-template-columns:minmax(0,1fr) 380px;grid-template-rows:auto auto auto minmax(0,1fr);column-gap:32px;row-gap:10px}
  .session:not(.is-end) .scol > *{grid-column:1/-1}
  .session:not(.is-end) .scol > .stagewrap{grid-column:1;grid-row:4}
  .session:not(.is-end) .scol > .dock{grid-column:2;grid-row:4;align-self:center;margin:0;border-radius:24px;padding:18px}
  .session .stage{width:min(100cqw,520px);height:min(100cqh,calc(min(100cqw,520px)*1.4))}
}
@media (min-width:1024px) and (min-height:600px){ .session .dock .handle{display:none} }
/* ================= the Studio editor: one order for every card type =================
   the card's front and back · Question and answers (count, this type's options, then each answer's rules) · Tags · Sets */
.composer .edh{margin:22px 0 0;padding-top:16px;border-top:2px solid var(--line);font:800 16px var(--display);letter-spacing:-.01em}
.composer .qasec{display:flex;flex-direction:column;gap:12px}
.composer .qaopts{display:flex;flex-wrap:wrap;gap:14px 22px;align-items:flex-start}
.composer .qaopts:empty{display:none}
.composer .qasec .rules{flex:none;width:100%}
.composer .edh + .metarow.tagrow{margin-top:10px;padding-top:0;border-top:0}

/* ================= each theme has its own layout, not just its own pattern =================
   Poster: a big headline set hard left at the top, under a thick ink rule, square pills.
   Ticket: everything centred, like a printed pass.
   Grid: a big question written on a notebook page taped to the card.
   Circles: the question settles at the bottom, under the shape in the corner.
   Plain: quiet type: lighter weight, a hairline under the pills, the question left at the top.
   Paper sheets, items and the back's answers keep their own layouts inside; only placement and voice change. */
/* poster */
.face.fam-poster .pill{border-radius:1.2cqw}
.face.fam-poster.front:not(.is-multi):not(.is-image) .body > :first-child{margin-top:0}
.face.fam-poster.front:not(.is-image) .body{padding-top:8cqw}
.face.fam-poster.front .q.ask.qbig,.face.fam-poster.front .q.ask.top,.face.fam-poster.front .whohead .q{position:relative;padding-top:4.6cqw}
.face.fam-poster.front .q.ask.qbig::before,.face.fam-poster.front .q.ask.top::before,.face.fam-poster.front .whohead .q::before{content:'';position:absolute;left:0;top:0;width:16cqw;height:1.6cqw;background:#16161A;border-radius:.4cqw}
.face.fam-poster.front .q.ask.qbig{letter-spacing:-.04em}
.face.fam-poster.back .body > :first-child{margin-top:0}
.face.fam-poster.back:not(.has-anspic) .body{padding-top:8cqw}
.face.fam-poster.back:not(.has-anspic) .apanel{position:relative;padding-top:4.6cqw}
.face.fam-poster.back:not(.has-anspic) .apanel::before{content:'';position:absolute;left:0;top:0;width:16cqw;height:1.6cqw;background:#16161A;border-radius:.4cqw}
/* ticket */
.face.fam-ticket .body{text-align:center}
.face.fam-ticket :is(.q,.ans,.head,.lbl,.step,.why,.areason){text-align:center}
.face.fam-ticket .head{margin-inline:auto}
/* the answers centre as one block, so their badges stay lined up */
.face.fam-ticket .xy{display:grid;justify-content:center}
.face.fam-ticket .xy .xyrow{grid-template-columns:6.6cqw auto}
.face.fam-ticket .xy .xyv{text-align:left}
.face.fam-ticket .slots:not(.two) .slot{max-width:80%;margin-inline:auto;width:100%}
.face.fam-ticket .qslip,.face.fam-ticket .sheet .setup,.face.fam-ticket .wclues li,.face.fam-ticket .part,.face.fam-ticket .beats li,.face.fam-ticket .clues li{text-align:left}
.face.fam-ticket.front .q.ask.qbig{position:relative;padding:4cqw 0;border-block:.5cqw dashed rgba(22,22,26,.4)}
/* grid: the big question on a taped notebook page */
.face.fam-grid.front .q.ask.qbig{position:relative;align-self:stretch;background:#FFFDF8 repeating-linear-gradient(to bottom,transparent 0 calc(1.06em - 1px),rgba(74,134,190,.22) calc(1.06em - 1px) 1.06em);background-position:0 5cqw;border-radius:1.6cqw;padding:5cqw 5cqw 5cqw 9cqw;box-shadow:0 1.2cqw 0 rgba(22,22,26,.08);transform:rotate(-1.2deg);color:#16161A}
.face.fam-grid.front .q.ask.qbig::before{content:'';position:absolute;left:5.6cqw;top:0;bottom:0;width:.45cqw;background:#E36F6F;opacity:.6}
.face.fam-grid.front .q.ask.qbig::after{content:'';position:absolute;top:-2.6cqw;left:50%;width:20cqw;height:5.2cqw;margin-left:-10cqw;background:var(--m1);opacity:.85;transform:rotate(3deg);border-radius:.6cqw}
.face.fam-grid.front .slots{transform:rotate(-1.2deg)}
/* circles: settles at the bottom, under the shape */
.face.fam-circles.has-corner.front:not(.is-multi):not(.is-image) .body > :last-child{margin-bottom:0}
.face.fam-circles.has-corner.front:not(.is-multi):not(.is-image) .body > :first-child{margin-top:auto}
.face.fam-circles.has-corner.back:not(.has-anspic) .body > :last-child{margin-bottom:0}
/* plain: quiet type */
.face.fam-none .top{padding-bottom:3cqw;border-bottom:.35cqw solid rgba(22,22,26,.18)}
.face.fam-none.is-ticket .top{border:0}
.face.fam-none.front:not(.is-multi):not(.is-image) .body > :first-child{margin-top:0}
.face.fam-none.front:not(.is-image) .body{padding-top:9cqw}
.face.fam-none .q.ask.qbig{font-weight:600;letter-spacing:-.02em}
.face.fam-none .head{font-weight:700}
.face.fam-none :is(.ans,.xyval){font-weight:700;letter-spacing:-.02em}
/* set editor: the look choices read as left-aligned labels, not centred notes */
.lookpicker .hint{text-align:left}
/* who am I back: with many clues the list scrolls on its own, so the answer and the why stay in view */
.face[data-fit].back .wclues.onback{flex-shrink:1;min-height:12cqw;overflow-y:auto;scrollbar-width:thin}
.face[data-fit].back.is-whoami .apanel{flex-shrink:1;min-height:0}
.face[data-fit].back .wclues.onback{-webkit-mask-image:linear-gradient(#000 calc(100% - 6cqw),transparent);mask-image:linear-gradient(#000 calc(100% - 6cqw),transparent);padding-bottom:4cqw}
/* the page's centred .hint style stays off the cards */
.face .hint{text-align:left}
.face.fam-ticket .hint{text-align:center}
/* busy cards (long reads, quotes, parts, clues, dates) don't keep the half circle's strip free: paper sits over it */
.face.has-big.front:is(.band-sheet,.band-split,.is-quotes,.is-staged,.is-whoami,.is-trail,.is-multi) .body{padding-bottom:5cqw}
/* a long quote always shows a good run of lines before it scrolls */
.face[data-fit] .quotes.one blockquote.rd{min-height:7em}
/* wide play: the card's own size (--stw × --ch) with its text laid out on a narrower box (--tw), see sizeStage */
.session .stage.wide{width:var(--stw);height:var(--sth)}
.session .stage.wide .flip{container-type:normal;height:100%}
.session .stage.wide .flip .inner{left:50%;right:auto;width:var(--tw);margin-left:calc(var(--tw) / -2);container-type:inline-size}
.session .stage.wide .flip .face{left:calc((var(--tw) - var(--stw)) / 2);right:calc((var(--tw) - var(--stw)) / 2)}
/* desktop: tap-to-answer cards get the same white panel as the others */
@media (min-width:1024px) and (min-height:600px){
  .session:not(.is-end) .scol > .dock.bar{background:#fff;box-shadow:0 -1px 0 rgba(22,22,26,.06),0 14px 30px -22px rgba(22,22,26,.45);padding:18px;gap:12px}
  .session:not(.is-end) .scol{grid-template-columns:minmax(0,1fr) 360px}
}
/* small cards (Studio previews, the bank, the set editor): long text gives way inside its paper, never over its neighbours */
.face .quotes.one,.face .quotes.one .qslip,.face .quotes.one .qtext{min-height:0}
.face[data-fit] .quotes.one .qslip{overflow:hidden}
@container (max-width:340px){
  .face[data-fit] .quotes.one blockquote.rd{min-height:3em}
  .face[data-fit].front.is-whoami .wclues{flex-shrink:1;min-height:0;overflow:hidden;-webkit-mask-image:linear-gradient(#000 calc(100% - 8cqw),transparent);mask-image:linear-gradient(#000 calc(100% - 8cqw),transparent)}
}
@container (max-width:340px){
  .face[data-fit] .quotes.one{overflow:hidden}
  /* a small back with a picture and two or three answers: the picture gives its room first */
  .face[data-fit].back.has-anspic{--ph:34cqw}
}
/* picture questions: the paper sits close to the bottom edge, so it can rise taller */
.face.front.is-image .body{padding-bottom:1cqw}