/* drawllm · design D — the public site (home · watch · your drawls), 2026-10-17.
   Identity: white paper, ink, Caveat for words a person wrote and the drawl titles, Schibsted Grotesk for what the app says,
   amber on the wordmark, honey on interactive chrome. Every value below is an existing token (web/studio/studio.css,
   mockups/shelves_v2/assets/shelves.css, DESIGN.md). Founder rules held here:
   NO LINES (no hairline rules anywhere: spacing does the grouping) · no spinners · one theme (no dark media query). */

:root{
  --paper:#FFFFFF;
  --ink:#232227;
  --ink-faint:rgba(35,34,39,.55);
  --ink-hair:rgba(35,34,39,.14);
  --ink-ghost:rgba(35,34,39,.32);
  --ink-rule:rgba(21,20,25,.84);
  --tint:rgba(21,20,25,.055);
  --amber:#FFC400;
  --honey:#FFC400;
  --honey-hover:#F2B600;
  --honey-edge:#F2B600;          /* founder 2026-10-18: never the brown-olive; edges, rings, underlines = the deeper yellow */
  --honey-soft:#FFF3C2;
  --gold-ink:#F2B600;             /* icons + accents only; TEXT is always ink (no dark gold anywhere: founder 2026-10-18) */
  --err:#B3261E;
  --pop-edge:rgba(35,34,39,.2);
  --pop-shadow:0 10px 30px rgba(35,34,39,.14),0 2px 6px rgba(35,34,39,.06);
  --ui:'Schibsted Grotesk','Segoe UI Variable Text','Segoe UI',system-ui,-apple-system,Roboto,sans-serif;
  --hand:'Caveat','Segoe Print','Bradley Hand','Comic Sans MS',cursive;
  --pad:clamp(16px,3vw,48px);
  --col:1240px;
  --gapx:clamp(14px,1.2vw,20px);
  --ease:cubic-bezier(.33,.9,.4,1);
  --top-h:64px;
  --lane-h:82px;
  --tint-faint:rgba(21,20,25,.028);    /* the faintest paper tint: --tint's ink at half its strength (the watch page's stage frame) */
  --ink-deep:#151419;                  /* the identity's deep ink: the pressed / hovered state of an ink pill */
  --tabbar:0px;
  color-scheme:light;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--paper);color:var(--ink)}
body{min-height:100dvh;font:400 15px/1.5 var(--ui);-webkit-font-smoothing:antialiased;overscroll-behavior-y:contain;display:flex;flex-direction:column;padding-bottom:var(--tabbar)}
a{color:inherit;text-decoration:none}
button,input{font:inherit;color:inherit}
button{background:none;border:0;padding:0;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
img{display:block;max-width:100%}
:focus-visible{outline:2px solid var(--amber);outline-offset:3px;border-radius:4px}
[hidden]{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.eyebrow{font:500 11px/1 var(--ui);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint)}
svg.st{fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
html.fs-lock,html.fs-lock body{overflow:hidden}

/* =====================================================================================================================
   HEADER — wordmark (= home) + Explore · Your drawls · the search/ask line CENTRED (watch + your drawls; on the home it
   appears once the hero ask scrolls away) · avatar. No rule under it: a soft lift only once the page scrolls.
   ===================================================================================================================== */
.topwrap{position:sticky;top:0;z-index:60;background:var(--paper);transition:box-shadow .25s var(--ease)}
.topwrap.scrolled{box-shadow:0 10px 24px -22px rgba(35,34,39,.55)}
.top{display:grid;grid-template-columns:minmax(0,1fr) clamp(300px,32vw,500px) minmax(0,1fr);align-items:center;column-gap:24px;height:var(--top-h);padding:0 var(--pad);padding-top:env(safe-area-inset-top,0px);width:100%;max-width:calc(var(--col) + 2*var(--pad));margin:0 auto}
.tl{display:flex;align-items:center;gap:clamp(18px,2.6vw,40px);min-width:0}
.tr{display:flex;align-items:center;justify-content:flex-end;gap:6px;min-width:0}
.wm{font:600 clamp(15px,.2vw + 13px,17px)/24px var(--ui);letter-spacing:.16em;user-select:none;white-space:nowrap}
.wm i{font-family:'Segoe Print','Bradley Hand','Comic Sans MS',cursive;font-style:normal;font-weight:600;letter-spacing:.6px;margin-right:.11em}
.wm b{font-weight:600;color:var(--amber)}
.nav{display:flex;align-items:center;gap:clamp(16px,1.8vw,28px)}
.nav a{display:inline-flex;align-items:center;min-height:44px;font:500 14px var(--ui);color:var(--ink-faint);white-space:nowrap}
.nav a:hover{color:var(--ink)}
.nav a.on{color:var(--ink);font-weight:600}
.avatar{flex:none;width:32px;height:32px;border-radius:50%;cursor:pointer;background:var(--honey-soft);border:1px solid rgba(242,182,0,.35);display:grid;place-items:center;font:600 13px var(--ui);color:var(--ink)}
.avatar:hover{background:var(--honey);border-color:var(--honey-edge)}
.avatar svg{width:18px;height:18px}
.icb{flex:none;width:44px;height:44px;border-radius:50%;display:none;place-items:center;color:var(--ink)}
.icb:hover{background:var(--tint)}
.icb svg{width:22px;height:22px}
.hsearch{position:relative;min-width:0;transition:opacity .3s var(--ease),transform .3s var(--ease),visibility 0s linear 0s}
.top .back{display:none}
.topwrap.hide-search .hsearch{opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .2s var(--ease),transform .2s var(--ease),visibility 0s linear .2s}

/* =====================================================================================================================
   THE INK LINE — the ask is written on the paper above ONE hand-drawn ink underline (a tapered pen stroke d.js draws for
   the field's real width). On focus an amber pen traces over it, left to right. No box, no fill.
   ===================================================================================================================== */
.field{--go:44px;--lnh:12px;position:relative;display:flex;align-items:flex-end;gap:6px;padding:0 0 calc(var(--lnh) - 1px)}
.field input{flex:1;min-width:0;border:0;background:transparent;outline:none;height:50px;padding:0 0 0 2px;font:600 clamp(24px,.4vw + 20px,27px)/50px var(--hand);color:var(--ink);caret-color:var(--gold-ink);border-radius:0;text-overflow:ellipsis}
.field input::placeholder{color:var(--ink-ghost);font-weight:500;opacity:1}
.field input:focus-visible{outline:none}
.field .glyph{flex:none;width:19px;height:19px;margin:0 2px 10px 0;color:var(--ink-ghost);transition:color .2s var(--ease)}
.field:focus-within .glyph{color:var(--ink)}
.field .ln{position:absolute;left:0;right:0;bottom:0;height:var(--lnh);pointer-events:none}
.field .ln svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.field .ln .base path{fill:var(--ink);opacity:.8}
.field .ln .ink path{fill:var(--amber)}
.field .ln .base{animation:lnIn .7s .1s var(--ease) both}
.field .ln .ink{clip-path:inset(0 100% 0 0);transition:clip-path .6s var(--ease)}
.field:focus-within .ln .ink,.field.lit .ln .ink{clip-path:inset(0 -2% 0 0)}
.field.busy .ln .ink{clip-path:inset(0 -2% 0 0);animation:lnBusy 1.6s var(--ease) infinite}
@keyframes lnIn{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes lnBusy{0%{clip-path:inset(0 100% 0 0)}60%{clip-path:inset(0 0 0 0)}100%{clip-path:inset(0 0 0 100%)}}

/* the go button: a SOLID honey disc with a SOLID ink arrow (founder: no outlined sketch circle) */
.go{appearance:none;flex:none;width:var(--go);height:var(--go);margin-bottom:3px;border-radius:50%;border:0;background:var(--honey);display:grid;place-items:center;cursor:pointer;padding:0;
  box-shadow:0 1px 0 var(--honey-edge),0 3px 10px rgba(255,196,0,.26);transition:background .15s var(--ease),transform .15s var(--ease),box-shadow .2s var(--ease)}
.go svg{width:calc(var(--go) * .5);height:calc(var(--go) * .5);fill:var(--ink);transition:transform .2s var(--ease)}
.go:hover{background:var(--honey-hover);box-shadow:0 1px 0 var(--honey-edge),0 5px 16px rgba(255,196,0,.36)}
.go:hover svg{transform:translateX(2px)}
.go:active{transform:scale(.95)}
.go[disabled]{opacity:.55;cursor:default}
/* the small round tools on the line: mic (desktop) · camera */
.tool{appearance:none;flex:none;width:38px;height:38px;margin:0 0 7px;padding:0;border:0;border-radius:50%;background:transparent;display:grid;place-items:center;cursor:pointer;color:var(--ink-faint);transition:color .2s var(--ease),background .2s var(--ease)}
.tool svg{width:21px;height:21px}
.tool:hover{color:var(--gold-ink);background:var(--tint)}
.tool.rec{color:var(--ink);background:var(--honey-soft);box-shadow:0 0 0 2px var(--honey)}
.tool.rec svg{animation:breathe 1.4s var(--ease) infinite}
/* the mic shows on phones too: the browser's own dictation fills the field (founder 2026-10-18 "dictation isn't working") */
/* the photo, once picked: a small round thumbnail inside the bar */
.pthumb{position:relative;flex:none;width:38px;height:38px;margin:0 4px 7px 0;border-radius:50%;overflow:visible}
.pthumb img{width:38px;height:38px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 2px var(--paper),0 0 0 3px var(--honey)}
.pthumb .tx{position:absolute;right:-6px;top:-6px;width:20px;height:20px;border-radius:50%;background:var(--paper);box-shadow:0 0 0 1px var(--ink-hair),0 1px 3px rgba(35,34,39,.15);display:grid;place-items:center;color:var(--ink-faint)}
.pthumb .tx:hover{color:var(--ink)}
.pthumb .tx svg{width:11px;height:11px}
.pthumb.reading img{animation:breathe 1.4s var(--ease) infinite}
@keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}

/* sizes: hero · header · explore card */
.bar{width:min(640px,100%);text-align:left}
.bar .field{--go:50px;--lnh:12px}
.hsearch .field{--go:34px;--lnh:10px;gap:8px;padding-bottom:7px}
.hsearch .field input{height:38px;font-size:21px;line-height:38px}
.hsearch .field .glyph{width:18px;height:18px;margin-bottom:10px}
.hsearch .go{margin-bottom:2px}
.excard .field{--go:34px;--lnh:10px;gap:10px;padding-bottom:7px}
.excard .field input{height:40px;font-size:21px;line-height:40px}

.hint{margin:10px 0 0;min-height:0;font:400 13.5px/1.5 var(--ui);color:var(--ink-faint);text-align:left}
.hint:empty{display:none}
.hint.err{color:var(--err)}
.hint b{font-weight:600;color:var(--ink)}
.hint .alts{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.hint .alt{display:inline-flex;align-items:center;min-height:30px;padding:3px 12px;border-radius:15px;background:var(--honey-soft);font:500 13px/1.3 var(--ui);color:var(--ink);text-align:left}
.hint .alt:hover{background:var(--honey)}

/* type-ahead under the header line (search or ask) — the house popover family */
.ta{position:absolute;left:-14px;right:-14px;top:calc(100% + 8px);background:var(--paper);border:1px solid var(--pop-edge);border-radius:12px;box-shadow:var(--pop-shadow);padding:6px;z-index:70}
.ta a,.ta button{display:flex;align-items:center;gap:12px;width:100%;min-height:52px;padding:6px 8px;border-radius:8px;text-align:left;color:var(--ink)}
.ta a:hover,.ta button:hover,.ta .on{background:var(--honey-soft)}
.ta img{flex:none;width:72px;height:41px;object-fit:cover;border-radius:4px 5px 4px 4px;box-shadow:0 0 0 1px var(--ink-hair);background:var(--paper)}
.ta .tt{display:flex;flex-direction:column;min-width:0}
.ta .tt b{font:500 15px/1.3 var(--ui);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ta .tt small{font:400 12.5px/1.35 var(--ui);color:var(--ink-faint)}
.ta .lbl{padding:6px 8px 4px;font:500 11px/1 var(--ui);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint)}
.ta .draw{margin-top:4px}
.ta .draw i{flex:none;width:36px;height:36px;margin:0 18px;border-radius:50%;background:var(--honey);display:grid;place-items:center;box-shadow:0 1px 0 var(--honey-edge)}
.ta .draw i svg{width:17px;height:17px;fill:var(--ink)}
.ta .draw q{font-family:var(--hand);font-size:20px;font-weight:600}

main{flex:1;width:100%;max-width:calc(var(--col) + 2*var(--pad));margin:0 auto;padding:0 var(--pad) 56px}
.view{display:block}

/* =====================================================================================================================
   HOME — a smaller hero, then ONE browse line (categories left · sort right), then the shelves
   ===================================================================================================================== */
.hero{display:flex;flex-direction:column;align-items:center;text-align:center;padding:clamp(24px,5.5vh,60px) 0 clamp(30px,4.6vh,50px)}
.lead{margin:0 0 12px;font:500 clamp(21px,1.9vw,27px)/1.3 var(--ui);letter-spacing:-.01em;text-wrap:balance}
.hero .sub{margin:14px 0 0;font:400 13.5px/1.5 var(--ui);color:var(--ink-faint)}
/* the one job still drawing (left the wait screen): a quiet line under the ask bar */
.openjob{width:min(640px,100%);margin:10px 0 0;font:400 13.5px/1.5 var(--ui);color:var(--ink-faint);text-align:left}
.openjob b{font-weight:500;color:var(--ink)}
.openjob a{font-weight:600;color:var(--ink);text-decoration:underline;text-decoration-color:var(--honey);text-underline-offset:3px}
.openjob a:hover{color:var(--ink)}
@media (min-width:700px){.hero .sub{white-space:nowrap}}

.browse{display:flex;align-items:center;gap:24px;margin:0 0 clamp(22px,3vh,34px);scroll-margin-top:calc(var(--top-h) + 12px)}
.topics{--fl:0px;--fr:0px;display:flex;gap:clamp(16px,1.9vw,30px);overflow-x:auto;scrollbar-width:none;flex:1;min-width:0;scroll-behavior:smooth;padding-bottom:4px;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 var(--fl),#000 calc(100% - var(--fr)),transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 var(--fl),#000 calc(100% - var(--fr)),transparent 100%)}
.topics::-webkit-scrollbar{display:none}
.topics button{position:relative;flex:none;min-height:46px;padding:0 2px;font:500 14.5px var(--ui);color:var(--ink-faint);white-space:nowrap}
.topics button:hover{color:var(--ink)}
.topics button.on{color:var(--ink);font-weight:600}
/* founder 2026-10-18: no coloured dot under the active category; it reads by its ink weight alone */
.sort{flex:none;display:inline-flex;align-items:center;border-radius:9px;padding:3px;background:var(--tint)}
.sort button{min-height:30px;padding:0 12px;border-radius:7px;font:500 13px var(--ui);color:var(--ink-faint);white-space:nowrap}
.sort button:hover{color:var(--ink)}
.sort button.on{background:var(--paper);color:var(--ink);box-shadow:0 1px 2px rgba(35,34,39,.12)}
.sortmenu{position:relative;flex:none;display:none}
.sortmenu > button{display:inline-flex;align-items:center;gap:5px;min-height:44px;padding:0 2px 0 6px;font:500 14px var(--ui);color:var(--ink)}
.sortmenu > button svg{width:14px;height:14px}
.pop{position:absolute;right:0;top:calc(100% + 2px);min-width:184px;background:var(--paper);border:1px solid var(--pop-edge);border-radius:12px;box-shadow:var(--pop-shadow);padding:6px;z-index:40;display:flex;flex-direction:column}
.pop button{display:flex;align-items:center;justify-content:space-between;min-height:44px;padding:0 12px;border-radius:8px;font:500 14px var(--ui);color:var(--ink);text-align:left}
.pop button:hover{background:var(--honey-soft)}
.pop button.on:after{content:'';width:8px;height:8px;border-radius:50%;background:var(--amber)}

/* shelves */
.shelf{margin:0 0 clamp(30px,4.4vh,48px)}
.shelf-head{display:flex;align-items:baseline;gap:12px;margin:0 0 8px}
.shelf-head h2{margin:0;font:600 clamp(25px,1.1vw + 16px,29px)/1.15 var(--hand);color:var(--ink);letter-spacing:.005em}
.shelf-head .count{font:400 13px var(--ui);color:var(--ink-faint)}
.shelf-head .sp{flex:1}
.seeall{font:500 13px var(--ui);color:var(--ink-faint);min-height:36px;padding:0 2px;display:inline-flex;align-items:center;gap:4px;white-space:nowrap}
.seeall:hover{color:var(--ink)}
.arrows{display:none}
.arrows button{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;color:var(--ink-faint);background:var(--tint)}
.arrows button:hover{color:var(--ink);background:var(--honey-soft)}
.arrows button[disabled]{opacity:.35;cursor:default}
.arrows svg{width:16px;height:16px}
@media (hover:hover){.shelf:hover .arrows{opacity:1}}
@media (hover:none){.arrows{display:none}}

.grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(24px,2.2vw,32px) var(--gapx);padding-top:6px}
/* a shelf shows exactly the cards one row holds (4 · 3 · 2 · 2 stacked on a phone); "see all" opens the rest as full rows */
.shelf.one:not(.open) .grid > .tile:nth-child(n+5){display:none}
.tile{display:flex;flex-direction:column;gap:9px;min-width:0;cursor:pointer;container-type:inline-size}
.grid .tile{flex:none}
/* a tile under 240 px shows the short meta ("Sara · 2.1K · 1d"), never an ellipsis mid-word */
.tile .m .meta.short{display:none}
@container (max-width:240px){.tile .m .meta.long{display:none}.tile .m .meta.short{display:block}}
.poster{position:relative;display:block;aspect-ratio:16/9;border-radius:7px 8px 7px 6px;overflow:hidden;background:var(--paper);box-shadow:0 0 0 1px var(--ink-hair);transition:box-shadow .15s var(--ease),transform .15s var(--ease)}
.poster img{width:100%;height:100%;object-fit:cover}
.poster .dur{position:absolute;right:8px;bottom:8px;padding:2px 7px;border-radius:5px;background:rgba(255,255,255,.94);box-shadow:0 0 0 1px var(--ink-hair);font:500 11.5px/1.3 var(--ui);color:var(--ink);font-variant-numeric:tabular-nums}
.poster .play{position:absolute;left:50%;top:50%;width:50px;height:50px;margin:-25px 0 0 -25px;border-radius:50%;background:var(--honey);display:grid;place-items:center;box-shadow:0 1px 0 var(--honey-edge),0 4px 14px rgba(255,196,0,.32);opacity:0;transform:scale(.86);transition:opacity .18s var(--ease),transform .18s var(--ease)}
.poster .play svg{width:20px;height:20px;fill:var(--ink);margin-left:3px}
.tile:hover .poster .play,.tile:focus-within .poster .play{opacity:1;transform:none}
.tile:hover .poster,.tile:focus-within .poster{box-shadow:0 0 0 1.5px var(--amber);transform:translateY(-2px)}
.tile .t{margin:0;font:600 clamp(18px,.3vw + 15px,20px)/1.18 var(--hand);color:var(--ink);word-break:break-word;text-wrap:pretty;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tile .m{display:flex;align-items:center;gap:7px;font:400 12.5px/1.4 var(--ui);color:var(--ink-faint);min-width:0;margin-top:-2px}
.tile .m .meta{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tile .m b{font-weight:500;color:var(--ink)}
.av{flex:none;width:20px;height:20px;border-radius:50%;display:inline-grid;place-items:center;font:600 10.5px var(--ui);color:var(--ink);background:var(--honey-soft);box-shadow:inset 0 0 0 1px rgba(242,182,0,.3)}
.av.house{background:var(--honey) url(/studio/favicon.svg?v=dm5) center/100% no-repeat;box-shadow:none;color:transparent;font-size:0}
.av.lg{width:38px;height:38px;font-size:15px}
.av.house.lg{font-size:17px}
.av.xl{width:76px;height:76px;font-size:30px}

/* "be the first to ask" — an honest empty slot: the question, nothing invented as drawn */
.tile.ask .poster{box-shadow:none;background:var(--tint);display:grid;place-items:center;padding:14px}
.tile.ask .poster .pen{display:flex;flex-direction:column;align-items:center;gap:8px;color:var(--ink-faint);font:500 12px var(--ui);text-align:center}
.tile.ask .poster svg{width:26px;height:26px;color:var(--ink-ghost)}
.tile.ask .t{color:var(--ink-faint)}
.tile.ask:hover .t{color:var(--ink)}
.tile.ask:hover .poster{box-shadow:none;background:var(--honey-soft)}
.tile.ask .m .draw{display:inline-flex;align-items:center;gap:6px;color:var(--ink)}
.tile.ask .m .draw i{width:17px;height:17px;border-radius:50%;background:var(--honey);display:inline-grid;place-items:center}
.tile.ask .m .draw svg{width:10px;height:10px;fill:var(--ink)}
.calm{display:flex;align-items:center;gap:12px;margin:0 0 18px;font:400 14px/1.5 var(--ui);color:var(--ink-faint)}
.calm svg{flex:none;width:22px;height:22px;color:var(--ink-ghost)}
.calm b{font-weight:500;color:var(--ink)}
.notyet{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 16px;padding:4px 0}
.notyet h2{margin:0;font:600 clamp(23px,1vw + 15px,26px)/1.15 var(--hand);color:var(--ink-faint)}
.notyet p{margin:0;display:flex;align-items:baseline;flex-wrap:wrap;gap:2px 0;font:400 14px/1.5 var(--ui);color:var(--ink-faint)}
.notyet button{min-height:36px;padding:0 6px;font:500 14px var(--ui);color:var(--ink);text-decoration:underline;text-decoration-color:var(--honey);text-underline-offset:4px}
.notyet button:hover{color:var(--ink)}
.notyet .dot{color:var(--ink-ghost)}
.notyet .tail{margin-left:10px}
.skel .poster{background:var(--tint);box-shadow:none}
.skel .t{height:20px;width:70%;border-radius:4px;background:var(--tint)}

/* footer: spacing only */
.foot{display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px;margin:48px 0 0;font:400 12.5px var(--ui);color:var(--ink-faint)}
.foot a:hover{color:var(--ink)}
.foot .sp{flex:1}
.foot .note{width:100%;font-size:11.5px;color:var(--ink-ghost)}

/* phone tab bar: Home · Explore · Ask · Your drawls (no rule above it: a soft lift) */
.tabbar{display:none;position:fixed;left:0;right:0;bottom:0;z-index:55;background:rgba(255,255,255,.97);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  box-shadow:0 -10px 24px -20px rgba(35,34,39,.5);padding:6px max(8px,env(safe-area-inset-left)) calc(6px + env(safe-area-inset-bottom,0px)) max(8px,env(safe-area-inset-right))}
.tabbar a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:50px;font:500 11px var(--ui);color:var(--ink-faint);border-radius:8px}
.tabbar a svg{width:24px;height:24px}
.tabbar a.on{color:var(--ink)}
.tabbar a.on svg{color:var(--gold-ink)}
.tabbar .disc{width:34px;height:34px;margin:-6px 0 -1px;border-radius:50%;background:var(--honey);display:grid;place-items:center;box-shadow:0 1px 0 var(--honey-edge),0 3px 10px rgba(255,196,0,.26)}
.tabbar .disc svg{width:18px;height:18px;fill:var(--ink)}

/* =====================================================================================================================
   THE WAIT (a new drawl being drawn) and THE CARD (refusal · failure · paused · sign-in) — the studio's honest screens
   ===================================================================================================================== */
.wait,.card{padding-top:clamp(40px,12vh,140px);display:flex;flex-direction:column;align-items:center;text-align:center}
.asked{margin:0;max-width:min(720px,100%);font:600 clamp(25px,3vw,35px)/1.25 var(--hand);color:var(--ink);word-break:break-word;text-wrap:balance}
.asked:before{content:'\201C'}.asked:after{content:'\201D'}
.waitline{position:relative;width:min(640px,100%);height:12px;margin:14px 0 32px}
.waitline .field{position:absolute;inset:0;padding:0}
.stages{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:10px 28px}
.stages li{display:inline-flex;align-items:center;gap:9px;font:500 15px/1 var(--ui);color:var(--ink-ghost);transition:color .35s var(--ease)}
.stages li .mark{width:14px;height:14px;flex:none;position:relative}
.stages li .mark svg{position:absolute;inset:0;width:14px;height:14px;fill:none;stroke:var(--ink);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:24;stroke-dashoffset:24;opacity:0}
.stages li .mark:before{content:'';position:absolute;left:4px;top:4px;width:6px;height:6px;border-radius:50%;background:var(--ink-hair);transition:background .3s var(--ease)}
.stages li.running{color:var(--ink)}
.stages li.running .mark:before{background:var(--amber);animation:breathe2 1.6s var(--ease) infinite}
.stages li.done{color:var(--ink)}
.stages li.done .mark:before{background:transparent}
.stages li.done .mark svg{opacity:1;animation:tick .45s var(--ease) forwards}
@keyframes breathe2{0%,100%{transform:scale(1)}50%{transform:scale(1.5)}}
@keyframes tick{to{stroke-dashoffset:0}}
.wmeta{margin:36px 0 0;display:flex;align-items:baseline;gap:12px;font:400 15px/1 var(--ui);color:var(--ink-faint)}
.wmeta .elapsed{font:600 28px/1 var(--ui);color:var(--ink);font-variant-numeric:tabular-nums}
.quiet{margin:28px 0 0;font:400 13px/1.5 var(--ui);color:var(--ink-faint)}
.quiet a{text-decoration:underline;text-decoration-color:var(--honey);text-underline-offset:3px}
.card h2{margin:0 0 12px;font:600 clamp(20px,2.2vw,26px)/1.3 var(--ui);letter-spacing:-.01em;text-wrap:balance;max-width:26ch}
.card .under{display:block;width:150px;height:8px;margin:0 auto 14px}
.card .under path{fill:none;stroke:var(--amber);stroke-width:2.2;stroke-linecap:round;stroke-dasharray:170;stroke-dashoffset:170;animation:under .55s .1s ease-out forwards}
@keyframes under{to{stroke-dashoffset:0}}
.card .body{margin:0;max-width:52ch;font:400 15px/1.6 var(--ui);color:var(--ink-faint);text-wrap:pretty}
.card .care{margin:14px 0 0;max-width:52ch;padding:12px 16px;border-radius:10px;background:var(--honey-soft);font:400 14px/1.6 var(--ui);color:var(--ink)}
.card .asked{font-size:clamp(19px,2vw,23px);color:var(--ink-faint);margin:0 0 18px}
.card .grid{margin-top:30px;width:100%;max-width:900px;text-align:left;grid-template-columns:repeat(3,minmax(0,1fr))}
.actrow{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:28px}
.btn{appearance:none;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:40px;padding:0 16px;border:0;border-radius:22px;background:var(--tint);color:var(--ink);font:600 13.5px var(--ui);cursor:pointer;transition:background .12s,color .12s,transform .12s;-webkit-tap-highlight-color:transparent;touch-action:manipulation;white-space:nowrap}
.btn:hover,.btn:focus-visible{background:var(--honey-soft);transform:translateY(-1px)}
.btn.on{background:var(--honey-soft)}
/* ONE primary button: the ink pill (like Draw / Choose Pencil / Done); honey stays for selection, toggles, dots and the scrubber */
.btn.primary{background:var(--ink);color:var(--paper);box-shadow:none}
.btn.primary:hover,.btn.primary:focus-visible{background:var(--ink-deep)}
.btn svg{width:17px;height:17px;flex:none}
.btn svg.fill{fill:currentColor;stroke:none}

/* =====================================================================================================================
   THE WATCH PAGE — the drawl gets the stage. ONE panel: the real drawl page (iframe, its own lane hidden) + our ONE lane.
   Right column = only THIS drawl (its parts, go deeper). Other drawls: ONE row below the title (founder 17:30).
   Size modes: default · theatre (wide; the right column moves below) · fullscreen (the whole player, lane auto-hides).
   ===================================================================================================================== */
/* THE STAGE FRAME (founder markups 17:45 + 'watch frame'): the full content width is the drawl's; the drawl sits centred
   inside at a proportionate size (never stretched to fill), on the faintest paper tint, no rule; ONE control row along the
   frame's bottom edge. Theatre = a larger drawl in the same frame; full screen = the whole frame, the drawl still proportionate. */
.wv{padding-top:12px}
.player{--stage-pad:clamp(16px,3vw,48px);--stage-padb:4px;--lane-pad:clamp(14px,2vw,28px);position:relative;width:100%;background:linear-gradient(var(--tint-faint),var(--tint-faint)) var(--paper);border-radius:22px 24px 23px 21px;display:flex;flex-direction:column}
.pstage{position:relative;display:flex;justify-content:center;padding:clamp(18px,2.6vw,34px) var(--stage-pad) var(--stage-padb)}
.screen{position:relative;flex:none;width:min(900px,100%,calc((100dvh - var(--top-h) - var(--lane-h) - 104px) * 16 / 9));aspect-ratio:16/9;border-radius:12px 13px 12px 11px;overflow:hidden;background:var(--paper);
  box-shadow:0 1px 2px rgba(35,34,39,.05),0 12px 32px -16px rgba(35,34,39,.24);user-select:none;-webkit-user-select:none}
.screen.fitted{aspect-ratio:auto}
.wv.theatre .pstage{padding:14px clamp(12px,2vw,24px) 2px}
.wv.theatre .screen{width:min(100%,calc((100dvh - var(--top-h) - var(--lane-h) - 64px) * 16 / 9))}
.screen iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;background:var(--paper);opacity:0;transition:opacity .35s var(--ease)}
.screen iframe.on{opacity:1}
/* under the frame: left = title + asked + meta, then Sources, then Comments; right = In this drawing + Go deeper; then More drawls */
.wgrid{display:grid;grid-template-columns:minmax(0,1fr) 320px;grid-template-areas:"primary rail" "src rail" "more more";grid-template-rows:auto 1fr auto;column-gap:clamp(28px,3.6vw,56px);align-items:start;padding:0 clamp(0px,.8vw,10px)}
.winfo{grid-area:primary;min-width:0;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"title acts" "asked asked" "strip strip";column-gap:16px;align-items:start}
.winfo .watch-h1{grid-area:title}
.winfo .acts{grid-area:acts;margin-top:18px}
.winfo .askedline{grid-area:asked}
.winfo .strip{grid-area:strip}
.rail{grid-area:rail;min-width:0;padding-top:24px}
.src{grid-area:src;min-width:0}
.src .sec{margin-top:32px}
.more{grid-area:more;min-width:0}
.strip{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;margin:14px 0 0;font:400 13.5px/1.5 var(--ui);color:var(--ink-faint)}
.strip .av{margin-right:2px}
.strip .seg{display:inline-flex;align-items:baseline;gap:8px;white-space:nowrap}   /* "· item" travels as one piece when the line wraps */
.strip b{font-weight:600;color:var(--ink)}
.strip .who:hover b{color:var(--ink)}
.strip .dot{color:var(--ink-ghost)}
.strip .srcb{font:500 13.5px/1.5 var(--ui);color:var(--ink);text-decoration:underline;text-decoration-color:var(--honey);text-underline-offset:3px}
.strip .srcb:hover{color:var(--ink)}
#srcsec.flash .sources .n{animation:srcflash 1.2s var(--ease) 2}
@keyframes srcflash{50%{background:var(--honey)}}
.ghost{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;color:var(--ink-faint);font:400 13.5px var(--ui);opacity:0;transition:opacity .3s var(--ease)}
.ghost.in{opacity:1}
.gate{position:absolute;left:50%;top:50%;z-index:6;width:76px;height:76px;margin:-38px 0 0 -38px;border-radius:50%;background:var(--honey);display:grid;place-items:center;box-shadow:0 0 0 10px rgba(255,196,0,.2),0 8px 26px rgba(35,34,39,.18)}
.gate svg{width:32px;height:32px;fill:var(--ink);margin-left:4px}
.gate:hover{background:var(--honey-hover)}
.soundhint{position:absolute;left:14px;top:14px;z-index:6;display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 15px 0 11px;border-radius:18px;background:var(--honey);box-shadow:0 1px 0 var(--honey-edge),0 4px 14px rgba(35,34,39,.14);font:600 13px var(--ui);color:var(--ink)}
.soundhint svg{width:19px;height:19px}
.soundhint:hover{background:var(--honey-hover)}
.fsname{display:none;position:absolute;left:clamp(20px,3vw,44px);top:16px;z-index:5;font:600 clamp(21px,1.3vw + 10px,27px)/1.2 var(--hand);color:var(--ink);transition:opacity .35s var(--ease);pointer-events:none}

/* the ONE lane: segmented amber scrubber (one segment per part) + play · replay · time · Part n of N · volume · share · size */
.lane{position:relative;padding:6px var(--lane-pad) 10px}
.track{position:relative;display:flex;gap:3px;height:20px;align-items:center;padding:0 7px;cursor:pointer;touch-action:none;outline-offset:-2px}
.track i{position:relative;flex:var(--w) 1 0;height:4px;border-radius:2px;background:rgba(35,34,39,.13);overflow:hidden;transition:height .12s var(--ease)}
.track i b{position:absolute;left:0;top:0;bottom:0;width:var(--f,0%);background:var(--honey)}
.track:hover i,.track.drag i{height:6px}
.track .knob{position:absolute;left:var(--kx,7px);top:50%;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:var(--honey);box-shadow:0 0 0 2px var(--paper),0 0 0 3px var(--honey-edge);pointer-events:none;z-index:2;transition:transform .12s var(--ease)}
.track:hover .knob,.track.drag .knob{transform:scale(1.15)}
.track .tip{position:absolute;bottom:calc(100% + 6px);transform:translateX(-50%);padding:3px 8px;border-radius:6px;background:var(--ink);color:#fff;font:500 11.5px/1.4 var(--ui);white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .12s}
.track:hover .tip,.track.drag .tip{opacity:1}
.ctl{display:flex;align-items:center;gap:2px;margin-top:2px;min-height:44px}
.lviews{flex:none;margin:0 10px 0 4px;font:500 13px var(--ui);color:var(--ink-faint);white-space:nowrap;font-variant-numeric:tabular-nums}
.ic{flex:none;width:44px;height:44px;display:grid;place-items:center;border-radius:50%;color:var(--ink);position:relative}
.ic:hover{background:var(--tint)}
.ic svg{width:21px;height:21px}
.ic svg.fill{fill:currentColor;stroke:none}
.ic.on{background:var(--honey-soft)}
.ic.on[data-tip]:hover:after,.player.fs .ic[data-tip]:hover:after{display:none}
.ic[data-tip]:hover:after{content:attr(data-tip);position:absolute;bottom:calc(100% + 4px);left:50%;transform:translateX(-50%);padding:3px 8px;border-radius:6px;background:var(--ink);color:#fff;font:500 11.5px/1.4 var(--ui);white-space:nowrap;pointer-events:none;z-index:9}
.time{flex:none;white-space:nowrap;font:500 13px var(--ui);color:var(--ink-faint);font-variant-numeric:tabular-nums;margin:0 10px 0 4px}
.time b{color:var(--ink);font-weight:600}
.pill{display:inline-flex;align-items:center;gap:9px;height:30px;padding:0 13px 0 11px;border-radius:15px;background:var(--honey-soft);font:600 12.5px var(--ui);color:var(--ink);white-space:nowrap;min-width:0;overflow:hidden;cursor:default}
.pill.act{background:var(--honey);cursor:pointer;box-shadow:0 1px 0 var(--honey-edge)}
.pill.act:hover{background:var(--honey-hover)}
.pill .txt{overflow:hidden;text-overflow:ellipsis}
.pill .txt span{font-weight:500;color:var(--ink-faint)}
.pill svg{flex:none;width:14px;height:14px}
.pill .dashes{display:inline-flex;gap:3px;flex:none}
.pill .dashes i{width:10px;height:3px;border-radius:2px;background:rgba(35,34,39,.22)}
.pill .dashes i.on{background:var(--honey-edge)}
.ctl .sp{flex:1;min-width:4px}
.vol{display:flex;align-items:center}
.vol input{width:0;opacity:0;margin:0;accent-color:var(--honey);transition:width .2s var(--ease),opacity .2s var(--ease),margin .2s var(--ease)}
@media (hover:hover){.vol:hover input,.vol:focus-within input{width:72px;opacity:1;margin:0 8px 0 2px}}
.vol .x{display:none}
.vol.muted .w{display:none}
.vol.muted .x{display:inline}
/* the language switch: an "EN" chip in the lane's own control look; English + the drawl's languages in a small house popover, opening up */
.lang{position:relative;flex:none}
.lang .ic .code{font:600 12px/1 var(--ui);letter-spacing:.06em;color:var(--ink)}
.lang .pop{top:auto;bottom:calc(100% + 8px);right:0;min-width:172px}
.lang .pop button{gap:14px;font-size:14.5px;unicode-bidi:plaintext}
.parts[dir=rtl] .part .nm{text-align:right}
.ic.theatre .narrow,.wv.theatre .ic.theatre .wide{display:none}
.wv.theatre .ic.theatre .narrow{display:inline}
.ic.fsb .exit,.player.fs .ic.fsb .enter{display:none}
.player.fs .ic.fsb .exit{display:inline}

/* full screen: the WHOLE frame incl. its control row; the drawl stays proportionate, centred; the row hides after 2.5 s */
.player.fs{position:fixed;inset:0;z-index:300;width:100vw;height:100vh;height:100dvh;border-radius:0}
.player::backdrop{background:var(--paper)}
.player.fs{--stage-pad:clamp(20px,3vw,48px);--stage-padb:6px}
.player.fs .pstage{flex:1;min-height:0;align-items:center;padding:60px var(--stage-pad) var(--stage-padb)}
.player.fs .screen{width:min(100%,calc((100dvh - var(--lane-h) - 132px) * 16 / 9))}
.player.fs .lane{padding-bottom:max(14px,env(safe-area-inset-bottom));transition:opacity .35s var(--ease),transform .35s var(--ease)}
.player.fs .fsname{display:block}
.player.fs .ic.theatre{display:none}
.player.fs.idle .lane{opacity:0;transform:translateY(8px);pointer-events:none}
.player.fs.idle .fsname{opacity:0}
.player.fs.idle,.player.fs.idle *{cursor:none}

/* ---------- END OF DRAWL: small amber dots on the named parts (from the drawl page's own labels), lit 1, 2, 3 … once ---------- */
.pois{position:absolute;inset:0;z-index:4;pointer-events:none}
.poi{position:absolute;width:40px;height:40px;margin:-20px 0 0 -20px;border-radius:50%;display:grid;place-items:center;pointer-events:auto;opacity:0;transform:scale(.4);transition:opacity .3s var(--ease),transform .35s var(--ease)}
.poi.in{opacity:1;transform:none}
.poi .dot{position:relative;width:22px;height:22px;border-radius:50%;background:var(--honey);box-shadow:0 0 0 2.5px #fff,0 0 0 3.5px var(--honey-edge),0 2px 6px rgba(35,34,39,.25);display:grid;place-items:center;font:600 11.5px/1 var(--ui);color:var(--ink);font-variant-numeric:tabular-nums;transition:transform .25s var(--ease)}
.poi:hover .dot,.poi.hl .dot,.poi.sel .dot{transform:scale(1.2)}
.poi.hl .dot:after,.poi.sel .dot:after{content:'';position:absolute;inset:-3px;border-radius:50%;animation:ring 1.4s ease-out infinite}
@keyframes ring{0%{box-shadow:0 0 0 2px rgba(255,196,0,.55)}100%{box-shadow:0 0 0 16px rgba(255,196,0,0)}}
.poi .tag{position:absolute;left:38px;top:50%;transform:translate(-4px,-50%);padding:4px 10px;border-radius:8px;background:rgba(255,255,255,.98);box-shadow:0 0 0 1px var(--ink-hair),0 3px 10px rgba(35,34,39,.1);font:500 13px/1.35 var(--ui);color:var(--ink);white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .25s var(--ease),transform .25s var(--ease)}
.poi.left .tag{left:auto;right:38px;transform:translate(4px,-50%)}
.poi:hover .tag,.poi.hl .tag{opacity:1;transform:translate(0,-50%)}
.poi.sel .tag{opacity:0}
/* in the stage box (not the screen, which slides left for the Draw next column): its left edge = the scrubber's first segment
   (the lane's padding + the track's 7 px), 10 px above the lane */
.poihint{position:absolute;left:calc(var(--lane-pad) + 7px);bottom:calc(var(--stage-padb) + 10px);z-index:5;display:inline-flex;align-items:center;gap:7px;font:500 12.5px/1.4 var(--ui);color:var(--ink);background:rgba(255,255,255,.94);padding:4px 10px 4px 8px;border-radius:8px;box-shadow:0 0 0 1px var(--ink-hair);opacity:0;transition:opacity .4s var(--ease);pointer-events:none}
.poihint.in{opacity:1}
.poihint i{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--honey);box-shadow:0 0 0 1px var(--honey-edge)}

/* the next directions (founder markup 'end directions'): at the end only, after the dots, 2-3 calm cards on the frame's
   right side, beside the drawing (the drawing slides a little left when the frame needs the room); on phones under the stage */
.screen{transition:transform .5s var(--ease)}
.dirs{position:absolute;z-index:7;display:flex;flex-direction:column;gap:10px;opacity:0;transition:opacity .4s var(--ease)}
.dirs.in{opacity:1}
.dirs .eyebrow{margin:0 0 2px 3px}
.dir{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:2px 10px;width:100%;padding:11px 11px 11px 15px;border-radius:13px 14px 13px 12px;background:var(--paper);text-align:left;
  box-shadow:0 1px 2px rgba(35,34,39,.05),0 8px 20px -12px rgba(35,34,39,.28);opacity:0;transform:translateX(10px);transition:opacity .45s var(--ease),transform .45s var(--ease),box-shadow .15s var(--ease)}
.dir.in{opacity:1;transform:none}
.dir .q{flex:1;min-width:0;font:600 19px/1.15 var(--hand);color:var(--ink);text-wrap:pretty}
.dir .chev{flex:none;width:30px;height:30px;border-radius:50%;background:var(--honey-soft);display:grid;place-items:center;color:var(--ink);transition:background .15s var(--ease)}
.dir .chev svg{width:16px;height:16px;stroke-width:2.2}
.dir small{order:3;flex-basis:100%;font:500 11.5px var(--ui);color:var(--ink-faint)}
.dir:hover{box-shadow:0 0 0 1.5px var(--amber),0 8px 20px -12px rgba(35,34,39,.28)}
.dir:hover .chev{background:var(--honey)}
.dirs.below{position:static;flex-direction:row;flex-wrap:wrap;padding:6px clamp(14px,2vw,28px) 18px}
.dirs.below .eyebrow{flex-basis:100%}
.dirs.below .dir{flex:1 1 240px;width:auto;transform:translateY(6px)}
.dirs.below .dir.in{transform:none}
/* Up next (phone end): a poster + its title, one tap plays it */
.dir.upnext{flex-wrap:nowrap;gap:12px;padding:8px 11px 8px 8px;text-decoration:none}
.dir.upnext img,.dir.upnext .ph{flex:none;width:84px;aspect-ratio:16/9;border-radius:8px;object-fit:cover;background:var(--honey-soft);box-shadow:0 0 0 1px var(--ink-hair)}
.dir.upnext .un{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.dir.upnext .lab{font:600 11px/1.3 var(--ui);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-faint)}
.dir.upnext .q{font:600 15.5px/1.2 var(--ui);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
@media (max-width:720px){
  .dirs.below{gap:8px;padding:8px 12px 18px}
  .dirs.below .dir.play,.dirs.below .dir.upnext,.dirs.below .dir.d3{flex-basis:100%}
  .dirs.below .dir:not(.play):not(.upnext):not(.d3){flex:1 1 40%;align-items:flex-start;padding:10px 10px 10px 12px}
  .dirs.below .dir:not(.play):not(.upnext):not(.d3) .q{font-size:16px;line-height:1.15;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
  .dirs.below .dir:not(.play):not(.upnext):not(.d3) .chev{display:none}
  .dirs.below .eyebrow{margin:4px 0 0 3px}
}
/* the keyboard tooltips ("Sound (m)") are for a mouse: never on a touch screen */
@media (hover:none){.ic[data-tip]:hover:after,.ic[data-tip]:focus:after,[data-tip]:hover:after{display:none!important;content:none!important}}

/* the "Explore further" card — a minimal floating card beside the dot (a bottom sheet on the phone) */
.excard{position:absolute;z-index:20;width:384px;max-width:calc(100% - 24px);background:var(--paper);border:1px solid var(--pop-edge);border-radius:14px;box-shadow:var(--pop-shadow);padding:14px 16px 16px}
.excard .ex-top,.sheet .sh-top{display:flex;align-items:center;justify-content:space-between;gap:6px;margin:0 0 8px}
.excard .ex-top .sp{flex:1}
.excard .ex-top .rp{display:inline-flex;align-items:center;gap:5px;min-height:30px;padding:0 6px;border-radius:8px;font:500 12.5px var(--ui);color:var(--ink-faint)}
.excard .ex-top .rp:hover{color:var(--ink);background:var(--tint)}
.excard .ex-top .rp svg{width:14px;height:14px}
.x{width:32px;height:32px;margin:-6px -8px -6px 0;border-radius:50%;display:grid;place-items:center;color:var(--ink-faint)}
.x:hover{background:var(--tint);color:var(--ink)}
.x svg{width:16px;height:16px}
.excard .ex-name{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.excard .ex-name .num{flex:none;width:24px;height:24px;border-radius:50%;background:var(--honey);display:grid;place-items:center;font:600 12px/1 var(--ui);box-shadow:0 1px 0 var(--honey-edge)}
.excard .ex-name b{font:600 17px/1.3 var(--ui);color:var(--ink)}
.excard .ex-name small{font:400 12.5px var(--ui);color:var(--ink-faint)}
.excard .ex-name .rp{margin-left:auto;display:inline-flex;align-items:center;gap:5px;min-height:30px;padding:0 4px;font:500 12.5px var(--ui);color:var(--ink-faint)}
.excard .ex-name .rp:hover{color:var(--ink)}
.excard .ex-name .rp svg{width:14px;height:14px}
.excard form{margin-top:4px}
.drawbtn{flex:none;display:inline-flex;align-items:center;gap:6px;height:36px;margin-bottom:2px;padding:0 14px;border-radius:18px;background:var(--ink);font:600 13.5px var(--ui);color:var(--paper)}
.drawbtn:hover{background:var(--ink-deep)}
.drawbtn svg{width:15px;height:15px;fill:var(--paper)}
.excard .ex-note{margin:10px 0 0;font:400 12.5px/1.45 var(--ui);color:var(--ink-faint)}
.excard .ex-note.err{color:var(--err)}
.excard .ex3d{display:flex;align-items:center;gap:10px;width:100%;margin-top:12px;padding:9px 12px;border-radius:10px;background:var(--honey-soft);font:600 13.5px var(--ui);color:var(--ink);text-align:left}
.excard .ex3d:hover{background:var(--honey)}
.excard .ex3d svg{width:20px;height:20px}
.excard .ex3d small{display:block;font:400 12px var(--ui);color:var(--ink-faint)}

/* the share sheet: Copy link · X · Facebook · LinkedIn · WhatsApp (mockups/share/share_sheet.html styling, no rules) */
.sheet{position:fixed;z-index:320;width:380px;max-width:calc(100vw - 24px);background:var(--paper);border:1px solid var(--pop-edge);border-radius:14px;box-shadow:var(--pop-shadow);padding:14px 16px 16px}
.sheet .sh-top b{font:600 15px var(--ui)}
.sh-link{display:flex;align-items:center;gap:10px;padding:0 0 0 12px;height:46px;border-radius:11px;background:var(--tint)}
.sh-link .url{flex:1;min-width:0;font:400 13.5px var(--ui);color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;user-select:all}
.sh-link .url span{color:var(--ink-faint)}
.sh-link .copy{flex:none;display:inline-flex;align-items:center;gap:6px;height:36px;margin-right:5px;padding:0 13px;border-radius:9px;background:var(--ink);font:600 13px var(--ui);color:var(--paper)}
.sh-link .copy:hover{background:var(--ink-deep)}
.sh-link .copy svg{width:15px;height:15px}
.sh-row{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;margin:16px -4px 0}
.sh-row.five{grid-template-columns:repeat(5,1fr)}
.sh-it{display:flex;flex-direction:column;align-items:center;gap:6px;padding:4px 0 2px;border-radius:10px;font:500 12px var(--ui);color:var(--ink);text-align:center}
.sh-it .ci{width:48px;height:48px;border-radius:50%;background:var(--tint);display:grid;place-items:center;transition:background .15s var(--ease)}
.sh-it:hover .ci{background:var(--honey-soft)}
.sh-it .ci svg{width:21px;height:21px}
.sh-it .ci svg .f{fill:var(--ink);stroke:none}
.sh-note{margin:14px 0 0;font:400 12px/1.45 var(--ui);color:var(--ink-faint)}
.scrim{position:fixed;inset:0;z-index:310;background:rgba(35,34,39,.2)}

/* under the player: what it is, who asked it */
.watch-h1{margin:18px 0 4px;font:600 clamp(20px,1.6vw,26px)/1.25 var(--ui);letter-spacing:-.01em;text-wrap:balance}
.askedline{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;margin:0;color:var(--ink-faint);font:400 13px var(--ui)}
.askedline .q{font:600 clamp(19px,1.4vw,23px)/1.3 var(--hand);color:var(--ink-faint)}
.askedline .q:before{content:'\201C'}.askedline .q:after{content:'\201D'}
.creator{display:flex;align-items:center;gap:14px 18px;margin:16px 0 0;flex-wrap:wrap}
.creator .who{display:inline-flex;align-items:center;gap:10px;color:var(--ink)}
.creator .who .nm{display:flex;flex-direction:column;line-height:1.25}
.creator .who .nm b{font:600 14.5px var(--ui);color:var(--ink)}
.creator .who .nm small{font:400 12.5px var(--ui);color:var(--ink-faint)}
.creator .stat{font:400 13.5px var(--ui);color:var(--ink-faint)}
.creator .stat b{font-weight:600;color:var(--ink)}
.creator .sp{flex:1}
.acts{display:flex;gap:8px;flex-wrap:wrap}
.facts{margin:14px 0 0;font:400 13px/1.5 var(--ui);color:var(--ink-faint);display:flex;flex-wrap:wrap;gap:2px 8px}
.facts b{font-weight:500;color:var(--ink)}

/* the right column under the player — only THIS drawl: its parts, go deeper */
.rail{display:flex;flex-direction:column;gap:28px}
.rail h2,.sec > h2,.more h2,.deep h2{margin:0 0 10px;font:600 25px/1.15 var(--hand);color:var(--ink);display:flex;align-items:baseline;gap:10px}
.rail h2 small,.sec > h2 small,.more h2 small,.deep h2 small{font:400 13px var(--ui);color:var(--ink-faint)}
.parts{display:flex;flex-direction:column;gap:2px}
.part{display:flex;align-items:center;gap:11px;min-height:44px;padding:4px 10px 4px 6px;margin:0 0 0 -6px;border-radius:10px;text-align:left;color:var(--ink);font:500 14.5px/1.3 var(--ui)}
.part:hover,.part.on{background:var(--honey-soft)}
.part .n{flex:none;width:24px;height:24px;border-radius:50%;background:var(--honey-soft);box-shadow:inset 0 0 0 1px rgba(242,182,0,.35);display:grid;place-items:center;font:600 11.5px/1 var(--ui);font-variant-numeric:tabular-nums}
.part:hover .n,.part.on .n{background:var(--honey);box-shadow:none}
.part .nm{flex:1;min-width:0}
.part s{text-decoration:none;color:var(--ink-faint);font:400 12.5px var(--ui);font-variant-numeric:tabular-nums}
.rail .quiet,.deep .quiet{margin:8px 0 0;font:400 12.5px/1.5 var(--ui);color:var(--ink-faint);text-align:left}
.b3d{display:flex;align-items:center;gap:10px;margin-top:12px;padding:10px 12px;border-radius:11px;background:var(--honey-soft);font:600 13.5px var(--ui);color:var(--ink);text-align:left;width:100%}
.b3d:hover{background:var(--honey)}
.b3d svg{width:22px;height:22px;flex:none}
.b3d small{display:block;font:400 12px var(--ui);color:var(--ink-faint)}
.deeper{display:flex;flex-direction:column;gap:2px}
.deeper button{display:flex;align-items:center;gap:12px;min-height:44px;padding:6px 10px;margin:0 0 0 -10px;border-radius:10px;font:500 14.5px/1.35 var(--ui);color:var(--ink);text-align:left}
.deeper button:hover{background:var(--honey-soft)}
.deeper button svg{flex:none;width:18px;height:18px;margin-left:auto;fill:var(--honey-edge)}

/* other drawls: ONE full row under the sources + comments (no sideways row), "see all" opens the rest */
.more{margin-top:44px}
.more .shelf-head h2{font-size:26px}

.sec{margin-top:36px}
.sources{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.sources li{display:flex;gap:12px}
.sources .n{flex:none;width:24px;height:24px;border-radius:50%;background:var(--honey-soft);display:grid;place-items:center;font:600 11.5px var(--ui);color:var(--ink);margin-top:1px}
.sources .pub{font:600 13.5px/1.4 var(--ui);color:var(--ink)}
.sources a{display:block;font:400 14px/1.45 var(--ui);color:var(--ink-faint);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--ink-hair);word-break:break-word}
.sources a:hover{color:var(--ink);text-decoration-color:var(--honey)}
.sources .none{color:var(--ink-faint);font:400 14px var(--ui)}
.composer{display:flex;align-items:flex-end;gap:12px;margin:4px 0 0}
.composer .field{flex:1;--lnh:9px}
.composer .field input{height:40px;font:400 15px/40px var(--ui);color:var(--ink-faint)}
.composer .field .ln .base path{opacity:.35}
.cnote{margin:12px 0 0 50px;font:400 13px/1.5 var(--ui);color:var(--ink-faint)}

/* the 3D viewer, when a drawl has one (today: the jet engine) */
.x3{position:fixed;inset:0;z-index:400;background:var(--paper);display:flex;flex-direction:column}
.x3 .x3top{display:flex;align-items:center;gap:12px;height:56px;padding:0 var(--pad)}
.x3 .x3top b{font:600 22px/1.2 var(--hand)}
.x3 .x3top .sp{flex:1}
.x3 iframe{flex:1;width:100%;border:0;background:var(--paper)}

/* =====================================================================================================================
   YOUR DRAWLS — the creator page (Notebook's: the numbers, Drawls / Saved / History, each drawl's views + Public)
   ===================================================================================================================== */
.chead{display:flex;align-items:center;gap:22px;padding:clamp(22px,4vh,44px) 0 4px;flex-wrap:wrap}
.chead h1{margin:0;font:600 clamp(26px,2.4vw,32px)/1.15 var(--ui);letter-spacing:-.01em}
.chead .line{margin:4px 0 0;font:400 14px/1.5 var(--ui);color:var(--ink-faint)}
.chead .line b{font-weight:600;color:var(--ink)}
.chead .cta{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}
.stats{display:flex;flex-wrap:wrap;align-items:flex-end;gap:16px clamp(28px,4vw,56px);margin:30px 0 0}
.stat{display:flex;flex-direction:column;gap:2px}
.stat b{font:600 clamp(24px,2.2vw,30px)/1.1 var(--ui);letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.stat span{font:400 13px var(--ui);color:var(--ink-faint)}
.stat.note{margin-left:auto;text-align:right}
.stat.note .hand{font:600 21px/1.15 var(--hand);color:var(--ink)}
.ctabs{display:flex;align-items:center;gap:26px;margin:40px 0 18px}
.ctabs button{position:relative;min-height:44px;font:500 15px var(--ui);color:var(--ink-faint)}
.ctabs button:hover{color:var(--ink)}
.ctabs button.on{color:var(--ink);font-weight:600}
/* the active category reads by its ink weight alone (founder 2026-10-18: no coloured dot under the tab) */
.ctabs .n{margin-left:5px;font:400 13px var(--ui);color:var(--ink-faint)}
.own{display:flex;align-items:center;justify-content:space-between;gap:8px;font:400 12.5px var(--ui);color:var(--ink-faint);margin-top:-2px}
.own b{font-weight:600;color:var(--ink)}
.vis{display:inline-flex;align-items:center;gap:8px;min-height:32px;font:500 12.5px var(--ui);color:var(--ink-faint);cursor:default}
.vis .sw{position:relative;width:30px;height:18px;border-radius:9px;background:var(--honey);transition:background .2s}
.vis .sw:after{content:'';position:absolute;top:2px;left:14px;width:14px;height:14px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(35,34,39,.3);transition:left .2s}
.vis.private .sw{background:var(--ink-ghost)}
.vis.private .sw:after{left:2px}
/* the asker's own controls on a tile: Public/Private + a quiet Delete (a confirm sheet follows) */
.own .ctl{display:inline-flex;align-items:center;gap:4px}
.own .del{min-height:32px;padding:0 8px;border-radius:8px;font:500 12.5px var(--ui);color:var(--ink-faint);cursor:pointer}
.own .del:hover{color:var(--err);background:var(--tint-faint)}
.a-btn.a-danger{background:var(--err);color:#fff;margin-bottom:8px}
.a-btn.a-danger:hover{background:#97201A}
.endnote{margin:48px 0 0;text-align:center;font:600 clamp(21px,2vw,25px)/1.3 var(--hand);color:var(--ink-faint)}
.endnote a,.endnote button{color:var(--ink);text-decoration:underline;text-decoration-color:var(--honey);text-underline-offset:4px;font:inherit}
.cquiet{margin:14px 0 0;font:400 12.5px/1.5 var(--ui);color:var(--ink-faint)}

.toast{position:fixed;left:50%;bottom:calc(24px + var(--tabbar) + env(safe-area-inset-bottom,0px));transform:translate(-50%,8px);background:var(--ink);color:var(--paper);padding:9px 14px;border-radius:9px;font:500 13px var(--ui);opacity:0;pointer-events:none;transition:opacity .25s var(--ease),transform .25s var(--ease);z-index:500}
.toast.on{opacity:1;transform:translate(-50%,0)}

/* =====================================================================================================================
   RESPONSIVE
   ===================================================================================================================== */
@media (max-width:1180px){
  .top{grid-template-columns:auto minmax(0,1fr) auto}
  .hsearch{justify-self:center;width:min(100%,460px)}
  .grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .shelf.one:not(.open) .grid > .tile:nth-child(n+4){display:none}
  .wgrid{grid-template-columns:minmax(0,1fr) 280px}
}
@media (max-width:980px){
  .wgrid{grid-template-columns:minmax(0,1fr);grid-template-areas:"primary" "rail" "src" "more";grid-template-rows:auto}
  .rail{padding-top:30px}
  .ic.theatre{display:none}
  .wv.theatre .screen{width:min(900px,100%,calc((100dvh - var(--top-h) - var(--lane-h) - 104px) * 16 / 9))}
}
@media (max-width:900px){
  .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .shelf.one:not(.open) .grid > .tile:nth-child(n+3){display:none}
  .nav{gap:16px}
  .card .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:720px){
  :root{--tabbar:calc(64px + env(safe-area-inset-bottom,0px));--top-h:56px;--lane-h:74px}
  .top{grid-template-columns:minmax(0,1fr) auto;column-gap:8px}
  .nav{display:none}
  .hsearch{display:none}
  .icb{display:grid}
  .tr{gap:2px}
  .topwrap.searching .top{grid-template-columns:auto minmax(0,1fr)}
  .topwrap.searching .tl,.topwrap.searching .tr{display:none}
  .topwrap.searching .back{display:grid;margin-left:-10px}
  .topwrap.searching .hsearch{display:block;width:100%;opacity:1;visibility:visible;transform:none}
  .topwrap.searching .ta{position:fixed;left:0;right:0;top:calc(var(--top-h) + env(safe-area-inset-top,0px));bottom:0;border:0;border-radius:0;box-shadow:none;background:var(--paper);padding:8px 8px calc(8px + var(--tabbar));overflow:auto}
  .tabbar{display:flex}
  .hero{padding-top:18px;padding-bottom:26px;align-items:stretch;text-align:left}
  .lead{font-size:22px;margin-bottom:6px;max-width:none}
  .bar{width:100%}
  .bar .field{--go:46px}
  .field input{font-size:24px}
  .hero .sub{font-size:13px;margin-top:12px}
  .browse{gap:8px;margin-bottom:20px;margin-right:calc(-1*var(--pad));padding-right:calc(var(--pad) - 6px)}
  .topics{margin-left:calc(-1*var(--pad));padding-left:var(--pad)}
  .topics button{min-height:46px;font-size:15px}
  .sort{display:none}
  .sortmenu{display:block}
  .shelf-head h2{font-size:26px}
  .shelf-head .count{display:none}
  .grid{grid-template-columns:minmax(0,1fr);gap:26px}
  .card .grid{grid-template-columns:minmax(0,1fr)}
  .tile .t{font-size:21px}
  .tile .m{font-size:13px}
  .av{width:22px;height:22px}
  .notyet .tail{flex-basis:100%;margin:2px 0 0 6px}
  /* the watch page on a phone: the player edge to edge, the drawing in the kit's own upright framing */
  .wv{padding-top:0}
  .player{--stage-pad:0px;--stage-padb:0px;--lane-pad:6px;margin:0 calc(-1*var(--pad));width:calc(100% + 2*var(--pad));border-radius:0;background:var(--paper)}
  .pstage,.wv.theatre .pstage{padding:0}
  .screen,.wv.theatre .screen{width:100%;border-radius:0;box-shadow:none}
  .player.fs{margin:0;width:100vw}
  .player.fs{--stage-padb:4px}
  .player.fs .pstage{padding:44px 0 var(--stage-padb)}
  .player.fs .screen{width:min(100%,calc((100dvh - var(--lane-h) - 60px) * 16 / 9))}
  .lane{padding:4px var(--lane-pad) 6px}
  .lviews{display:none}
  .ic{width:42px}
  .wgrid{padding:0}
  .pill{height:28px;font-size:12px;padding:0 10px 0 9px;gap:7px}
  .pill .long{display:none}
  .pill .dashes{display:none!important}
  .ic.replay{display:none}
  .time{margin:0 6px 0 2px;font-size:12.5px}
  .watch-h1{font-size:21px;margin-top:14px}
  .creator{gap:10px 12px}
  .winfo{grid-template-columns:minmax(0,1fr);grid-template-areas:"title" "asked" "strip" "acts"}
  .winfo .acts{margin-top:14px}
  .acts{overflow-x:auto;scrollbar-width:none;flex-wrap:nowrap}
  .acts::-webkit-scrollbar{display:none}
  .btn{min-height:44px}
  .chead{gap:16px;padding-top:16px}
  .chead .av.xl{width:62px;height:62px;font-size:25px}
  .chead .cta{flex-basis:100%;margin-left:0}
  .stats{display:grid;grid-template-columns:1fr 1fr;gap:18px 24px}
  .stat.note{grid-column:1 / -1;margin-left:0;text-align:left}
  .ctabs{gap:20px;margin-top:30px}
  .foot{margin-top:30px}
  .cnote{margin-left:0}
  /* phone: the share sheet and the explore card become bottom sheets */
  .sheet,.excard{position:fixed;left:0!important;right:0;top:auto!important;bottom:0;width:auto;max-width:none;border-radius:18px 18px 0 0;border:0;padding:16px 18px calc(20px + env(safe-area-inset-bottom,0px));z-index:330;box-shadow:0 -10px 30px rgba(35,34,39,.16)}
  .sheet:before,.excard:before{content:'';display:block;width:38px;height:4px;border-radius:2px;background:rgba(35,34,39,.18);margin:-6px auto 12px}
  .poi .tag{display:none}
  .poi{width:36px;height:36px;margin:-18px 0 0 -18px}
  .poi .dot{width:20px;height:20px;font-size:10.5px}
  .poihint{font-size:12px}
  .soundhint{left:10px;top:10px}
  /* an empty category: the "not drawn yet" slots sit two to a row, with a 4:3 poster (a 16:9 one per row was a wall of grey) */
  .shelf.empty .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px var(--gapx)}
  .shelf.empty .tile.ask .poster{aspect-ratio:4/3}
  .shelf.empty .tile .t{font-size:19px}
}
@media (orientation:landscape) and (max-height:520px){
  .player:not(.fs) .screen{width:min(100%,calc((100dvh - var(--top-h) - var(--lane-h) - 8px) * 16 / 9))}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
  .row{scroll-behavior:auto}
  .field .ln .ink{clip-path:none!important;opacity:0}
  .field:focus-within .ln .ink{opacity:1}
}

/* founder 2026-10-17 18:15 (markup on the watch stage): "keep the whole thing white, not grey in white - looks weird - make it
   minimal" -> the stage is plain white paper: no tinted frame, no card, no shadow; the drawl sits straight on the page. */
.player{background:var(--paper)}
.screen{box-shadow:none;border-radius:0}

/* ===== the go-button = the end of the ink line (founder 2026-10-17; from mockups/askbutton/parts/d_line_arrow/opt.css) ===== */
/* opt-d_line_arrow -- THE LINE ENDS IN AN ARROW (final, iteration 6, 2026-10-17)
   No button shape: the hand-drawn ink underline finishes in a filled, swept, hand-inked arrowhead.
   Drop-in: give the existing .go button the extra class `opt-d_line_arrow` and its new <svg>; nothing else in the
   markup changes. Scoping uses :has(), so only fields whose go-button carries the class are touched.
   States: empty = ink (the end of the line) | ready (.field.lit) = amber, with the line | hover = 2px forward, a touch
   bigger | pressed = squashes forward, deeper amber | keyboard focus = 2px amber ring, sized to the head, over a 44px
   invisible target | busy (.field.busy) = stays amber and nudges forward each time the line's amber pass reaches it. */
.field:has(> .go.opt-d_line_arrow){
  --ar-hd:calc(var(--go) * .66);              /* the drawn head's box: hero 33px, phone 30px, header 22px */
  --ar-hit:44px;                              /* the invisible touch target */
  --ar-cx:calc(var(--ar-hd) * .408 + 1.5px);  /* head centre, measured from the field's right edge (tip lands ~1.5px inside) */
  --ar-shaft:calc(var(--ar-hd) * .1);         /* where the shaft stops: right of the head centre, hidden inside the ink */
  --ar-tail:72px;                             /* the pen line's end taper is drawn past the head and clipped off */
  --ar-ring:calc(var(--ar-hd) + 10px);
  --ar-idle:color-mix(in srgb,var(--ink) 80%,var(--paper));   /* = the line's own ink (.ln .base is ink at .8) */
  padding-right:calc(var(--ar-hd) * .5);      /* mic + camera stop just before the head */
}
/* the line runs into the head at full pen width (its tapered end is cut off under the ink) */
.field:has(> .go.opt-d_line_arrow) > .ln{right:calc(var(--ar-cx) - var(--ar-shaft) - var(--ar-tail));clip-path:inset(-8px var(--ar-tail) -8px -8px)}
/* the camera keeps its own clicks where its circle meets the head's target */
.field:has(> .go.opt-d_line_arrow) > .tool{position:relative;z-index:2}
.go.opt-d_line_arrow{position:absolute;z-index:1;right:calc(var(--ar-cx) - var(--ar-hit) / 2);bottom:calc(var(--lnh) / 2 - var(--ar-hit) / 2);
  width:var(--ar-hit);height:var(--ar-hit);margin:0;padding:0;border:0;border-radius:50%;background:transparent;box-shadow:none;
  display:grid;place-items:center;color:var(--ar-idle);cursor:pointer;transition:color .2s var(--ease)}
.go.opt-d_line_arrow:before{content:'';position:absolute;left:calc(50% + var(--ar-hd) * .07);top:50%;width:var(--ar-ring);height:var(--ar-ring);
  margin:calc(var(--ar-ring) / -2);border-radius:50%;box-shadow:0 0 0 2px var(--amber);opacity:0;transform:scale(.86);
  transition:opacity .15s var(--ease),transform .2s var(--ease);pointer-events:none}
.go.opt-d_line_arrow svg{width:var(--ar-hd);height:var(--ar-hd);fill:currentColor;transition:transform .22s var(--ease)}
.field.lit > .go.opt-d_line_arrow{color:var(--gold-ink)}
.go.opt-d_line_arrow:hover{background:transparent;box-shadow:none;color:var(--gold-ink)}
.go.opt-d_line_arrow:hover svg{transform:translateX(2px) scale(1.08)}
.go.opt-d_line_arrow:active{transform:none;color:color-mix(in srgb,var(--amber) 78%,var(--ink))}
.go.opt-d_line_arrow:active svg{transform:translateX(3px) scale(.9);transition-duration:.08s}
.go.opt-d_line_arrow:focus-visible{outline:none;box-shadow:none}
.go.opt-d_line_arrow:focus-visible:before{opacity:1;transform:none}
.go.opt-d_line_arrow[disabled]{opacity:1}
.field.busy > .go.opt-d_line_arrow{color:var(--gold-ink);cursor:progress}
.field.busy > .go.opt-d_line_arrow svg{animation:arKick 1.6s var(--ease) infinite}
@keyframes arKick{0%,18%{transform:none}30%{transform:translateX(3px)}48%,100%{transform:none}}
@media (prefers-reduced-motion:reduce){.go.opt-d_line_arrow svg{transition:none;animation:none!important}}

/* ===== founder 2026-10-17 ("the bottom isn't organised well, it looks bad"): recomposed under the stage (desktop) =====
   one full-width head row: title + asked line on the left, Share / Save on the right on the same block (never floating mid-page);
   then two columns that START ON THE SAME LINE: left = Sources, Comments; right = In this drawing, Go deeper; then More drawls. */
@media (min-width:981px){
  .wgrid{grid-template-areas:"primary primary" "src rail" "more more";grid-template-rows:auto auto auto}
  .winfo{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"title acts" "asked acts" "strip strip";align-items:start}
  .winfo .acts{grid-area:acts;align-self:center;margin-top:0}
  .rail{padding-top:0;margin-top:32px}
}
/* the phone tab bar's Ask: the same inked arrowhead, no honey disc (founder 2026-10-17) */
.tabbar .disc{background:none;box-shadow:none;width:30px;height:30px;margin:-4px 0 -1px}
.tabbar .disc svg{width:22px;height:22px;fill:var(--ink)}
.tabbar a.on .disc svg,.tabbar a:hover .disc svg{fill:var(--amber)}

/* ===== go-button B "the play point" - picked by the founder 2026-10-17 18:25 (mockups/askbutton/parts/b_play_point/go_v4.css) ===== */
/* drawllm · ask bar go-button · direction B "THE PLAY POINT" (v4, final) — mockups/askbutton/parts/b_play_point
   The ink underline IS the arrow's shaft; the brand's play triangle is its head, the amber point sits at its tip.
   No circle, no fill colour, no shadow. Scoped: put class "opt-b_play_point" on <body> (or any ancestor of the bars).
   States come from the classes d.js already sets: .field.lit (has text) · .field.busy + .go[disabled] (sending).
     empty  — an open ink head on paper, the point grey: calm, nothing reacts on hover
     ready  — the head inks solid, the point turns amber
     hover  — the point brightens (honey) and grows, the head nudges 2px forward
     press  — the head dips, the point lands on the tip
     focus  — amber keyboard ring (2px, the house :focus-visible colour), drawn inside the 44px target
     busy   — the head is re-drawn on a ghost of itself while the line's amber sweep runs into it; the point breathes */
.opt-b_play_point :is(.bar,.hsearch) .field{--g:20px;--gw:calc(var(--g) * 1.175)}
.opt-b_play_point .bar .field{--go:44px}
.opt-b_play_point .hsearch .field{--g:15px}
@media (max-width:720px){.opt-b_play_point .bar .field{--g:19px;--go:44px}}
/* the shaft: the line now stops under the head; its own end-taper is pushed past the cut so it meets the head at full weight */
.opt-b_play_point :is(.bar,.hsearch) .field .ln{right:calc(var(--gw) * .62);overflow:hidden}
.opt-b_play_point :is(.bar,.hsearch) .field .ln svg{width:calc(100% + 72px)}
/* keep every other target clear of the go's 44px box */
.opt-b_play_point .bar .field .tool.cam{margin-right:calc((var(--go) + var(--gw)) / 2 + 2px)}
.opt-b_play_point .hsearch .field input{margin-right:calc((var(--go) + var(--gw)) / 2 + 6px)}
.opt-b_play_point .bar .hint{margin-right:40px}
/* the button: a transparent 44px target centred ON the line's end */
.opt-b_play_point .go{position:absolute;z-index:1;right:calc((var(--gw) - var(--go)) / 2);bottom:calc(var(--lnh) / 2 - var(--go) / 2);width:var(--go);height:var(--go);margin:0;padding:0;border:0;border-radius:12px;background:transparent;box-shadow:none;display:grid;place-items:center;cursor:pointer;transform:none;transition:none;-webkit-tap-highlight-color:transparent}
.opt-b_play_point .go:hover,.opt-b_play_point .go:active{background:transparent;box-shadow:none;transform:none}
.opt-b_play_point .go[disabled]{opacity:1}
.opt-b_play_point .go:before{content:"";position:absolute;inset:min(0px,calc((var(--go) - 44px) / 2))}
.opt-b_play_point .go svg{width:var(--gw);height:var(--g);overflow:visible;fill:none;transform:none;transition:transform .24s var(--ease)}
.opt-b_play_point .go .tb,.opt-b_play_point .go .tri{stroke-width:34;stroke-linecap:round;stroke-linejoin:round}
.opt-b_play_point .go .tb{fill:var(--paper);stroke:transparent;transition:stroke .2s var(--ease)}
.opt-b_play_point .go .tri{fill:var(--ink);stroke:var(--ink);transition:fill .22s var(--ease),stroke .22s var(--ease)}
.opt-b_play_point .go .pt{fill:var(--amber);transform-box:fill-box;transform-origin:center;transition:fill .18s var(--ease),transform .24s var(--ease)}
/* empty */
.opt-b_play_point .field:not(.lit) .go{cursor:default}
.opt-b_play_point .field:not(.lit) .go .tri{fill:var(--paper);stroke:var(--ink-rule)}
.opt-b_play_point .field:not(.lit) .go .pt{fill:var(--ink-ghost);transform:scale(.72)}
/* ready → hover → press */
.opt-b_play_point .field.lit .go:hover svg{transform:translateX(2px)}
.opt-b_play_point .field.lit .go:hover .pt{fill:var(--honey);transform:scale(1.22)}
.opt-b_play_point .field.lit .go:active svg{transform:translateX(3px) scale(.86);transition-duration:.07s}
.opt-b_play_point .field.lit .go:active .pt{fill:var(--amber);transform:translateX(-32px) scale(.9);transition-duration:.07s}
/* keyboard focus */
.opt-b_play_point .go:focus-visible{outline:2px solid var(--amber);outline-offset:-3px;border-radius:12px}
.opt-b_play_point .hsearch .go:focus-visible{outline-offset:-1px;border-radius:10px}
/* busy (no spinner) */
.opt-b_play_point .field.busy .go{cursor:progress}
.opt-b_play_point .field.busy .go svg{transform:none}
.opt-b_play_point .field.busy .go .tb{stroke:var(--ink-hair)}
.opt-b_play_point .field.busy .go .tri{fill:transparent;stroke:var(--ink);stroke-dasharray:1 1;animation:ppTrace 1.6s var(--ease) infinite}
.opt-b_play_point .field.busy .go .pt{fill:var(--amber);animation:ppBreathe 1.6s var(--ease) infinite}
/* in step with the line's lnBusy (1.6s): the amber sweep reaches the head at 60%, the head draws itself, the point pulses, both let go */
@keyframes ppTrace{0%,52%{stroke-dashoffset:1}78%,86%{stroke-dashoffset:0}100%{stroke-dashoffset:-1}}
@keyframes ppBreathe{0%,55%,100%{transform:scale(.78)}80%{transform:scale(1.18)}}
@media (prefers-reduced-motion:reduce){.opt-b_play_point .go svg,.opt-b_play_point .go .pt{transition:none}.opt-b_play_point .field.busy .go .tri{animation:none;stroke-dasharray:none}.opt-b_play_point .field.busy .go .pt{animation:none}}
/* the phone tab bar's Ask uses the same play point */
.tabbar .disc svg{width:22px;height:19px;overflow:visible}
.tabbar .disc .tb{fill:none;stroke:none}
.tabbar .disc .tri{fill:var(--ink);stroke:var(--ink);stroke-width:34;stroke-linejoin:round}
.tabbar .disc .pt{fill:var(--amber)}
/* ===== founder 2026-10-17 18:27 "nice, just the bottom to be fixed": everything under the stage sits in ONE column the width of
   the drawing above it (left edge under the drawing's left edge, right edge under its right edge), so the page reads as one
   composition; inside it: the head row (title + Share/Save), then Sources/Comments | In this drawing/Go deeper, then More drawls. */
@media (min-width:981px){
  .wgrid{max-width:900px;margin:8px auto 0;padding:0;grid-template-columns:minmax(0,1fr) 280px;column-gap:44px}
  .winfo .watch-h1{margin-top:6px}
  .acts .btn{min-height:38px;padding:0 14px;font-size:13.5px}
}

/* ===== go-button C "the word" - founder 2026-10-17 18:35: "it should say Draw ... will look professional ... a draw symbol, like search has a symbol" (mockups/askbutton/parts/c_word_pill) ===== */
/* =====================================================================================================================
   GO-BUTTON · direction C · THE WORD (2026-10-17) — replaces .go (the honey disc) on the home ask bar + the header line.
   A calm ink pill that says what it does: "Draw it →". Quiet until there is a question: a pale tint pill while the field
   is empty, solid ink once you type (d.js already toggles .field.lit), the arrow takes the honey point on hover,
   "Drawing…" while sending. No shadow, no glow, no gradient. Phones (≤540 px) fold the word away: a short ink capsule.
   Tokens: --ink --paper --tint --ink-ghost --honey --amber --ui --ease (d.css). One local value: --wp-deep #151419
   (the identity's deep ink, the brand mark's stroke) for the pressed state.
   State hooks (no JS change): .field.lit = has text · .field.busy (+ #go[disabled]) = sending · :hover :active
   :focus-visible. A photo being read (.pthumb.reading) does not show "Drawing…". aria-busy="true" also works.
   ===================================================================================================================== */
.opt-c_word_pill{
  --wp-h:38px;--wp-fs:15px;--wp-pl:16px;--wp-pr:14px;--wp-ar:14px;--wp-deep:#151419;
  appearance:none;flex:none;position:relative;display:inline-grid;place-items:center;
  height:var(--wp-h);margin:0 0 7px 4px;padding:0 var(--wp-pr) 0 var(--wp-pl);border:0;border-radius:calc(var(--wp-h) / 2);
  background:var(--ink);color:var(--paper);font:600 var(--wp-fs)/1 var(--ui);letter-spacing:-.005em;white-space:nowrap;
  box-shadow:none;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation;
  transition:background-color .22s var(--ease),color .22s var(--ease),transform .12s var(--ease)}
/* 44 px touch target around the visible pill */
.opt-c_word_pill::before{content:'';position:absolute;inset:calc((44px - var(--wp-h)) / -2) -2px}
.opt-c_word_pill .wp-face{display:grid}
.opt-c_word_pill .wp-go,.opt-c_word_pill .wp-busy{grid-area:1/1;display:inline-flex;align-items:center;justify-content:center;transition:opacity .2s var(--ease),transform .25s var(--ease)}
.opt-c_word_pill .wp-go{gap:5px}
.opt-c_word_pill .wp-busy{opacity:0;transform:translateY(5px)}
.opt-c_word_pill .wp-busy i{font-style:normal}
.opt-c_word_pill .wp-ar{flex:none;width:var(--wp-ar);height:var(--wp-ar);fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s var(--ease),stroke .2s var(--ease)}

/* empty field — calm, disabled-looking (still answers a click with the "write a question first" hint); also while a photo is read */
.field:not(.lit) .opt-c_word_pill{background:var(--tint);color:var(--ink-ghost);cursor:default}
/* hover — the arrow takes the honey point and leans forward */
.field.lit .opt-c_word_pill:hover .wp-ar{stroke:var(--honey);transform:translateX(2px)}
/* pressed */
.field.lit .opt-c_word_pill:active{background:var(--wp-deep);transform:scale(.97)}
/* keyboard focus */
.opt-c_word_pill:focus-visible{outline:2px solid var(--amber);outline-offset:2px;border-radius:calc(var(--wp-h) / 2)}

/* busy — "Drawing…", the dots take turns (no spinner) */
.field.busy:not(:has(.pthumb.reading)) .opt-c_word_pill,.opt-c_word_pill[aria-busy="true"]{background:var(--ink);color:var(--paper);cursor:progress;transform:none}
.field.busy:not(:has(.pthumb.reading)) .opt-c_word_pill .wp-go,.opt-c_word_pill[aria-busy="true"] .wp-go{opacity:0;transform:translateY(-5px)}
.field.busy:not(:has(.pthumb.reading)) .opt-c_word_pill .wp-busy,.opt-c_word_pill[aria-busy="true"] .wp-busy{opacity:1;transform:none}
.field.busy:not(:has(.pthumb.reading)) .opt-c_word_pill .wp-busy i,.opt-c_word_pill[aria-busy="true"] .wp-busy i{animation:wpDot 1.2s var(--ease) infinite both}
.opt-c_word_pill .wp-busy i:nth-child(3){animation-delay:.16s}
.opt-c_word_pill .wp-busy i:nth-child(4){animation-delay:.32s}
@keyframes wpDot{0%,100%{opacity:.32}35%{opacity:1}}

/* the compact header line (34 px field): a smaller pill, and no fill at all while the field is empty */
.hsearch .opt-c_word_pill{--wp-h:32px;--wp-fs:14px;--wp-pl:13px;--wp-pr:11px;--wp-ar:13px;margin:0 0 3px 2px}
.hsearch .field:not(.lit) .opt-c_word_pill{background:transparent}

/* narrow screens: the word folds away (kept for screen readers), the arrow stays — a short capsule, not a disc */
@media (max-width:540px){
  .opt-c_word_pill{--wp-pl:0px;--wp-pr:0px;width:50px}
  .hsearch .opt-c_word_pill{--wp-pl:0px;--wp-pr:0px;width:42px}
  .opt-c_word_pill .wp-t,.opt-c_word_pill .wp-bt{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .opt-c_word_pill .wp-ar{width:18px;height:18px}
  .hsearch .opt-c_word_pill .wp-ar{width:16px;height:16px}
  .opt-c_word_pill .wp-busy{gap:4px}
  .opt-c_word_pill .wp-busy i{width:4px;height:4px;border-radius:50%;background:currentColor;font-size:0}
  .hsearch .opt-c_word_pill .wp-busy{gap:3px}
  .hsearch .opt-c_word_pill .wp-busy i{width:3.5px;height:3.5px}
}
@media (prefers-reduced-motion:reduce){.opt-c_word_pill .wp-busy i{animation:none!important;opacity:1}}
/* the draw symbol: a sharpened pencil tip (ink) with its point in honey, before the word */
.opt-c_word_pill .wp-draw{width:15px;height:15px;stroke-width:1.6}
.opt-c_word_pill .wp-draw .wp-tip{fill:var(--honey);stroke:none}
.field:not(.lit) .opt-c_word_pill .wp-draw .wp-tip{fill:currentColor}
.field.lit .opt-c_word_pill:hover .wp-draw{stroke:currentColor;transform:translateX(1px)}
@media (max-width:540px){.opt-c_word_pill .wp-draw{width:19px;height:19px}}
/* type-ahead under the home bar + the 'Draw <q>' row: the draw symbol in ink, no honey disc (founder 2026-10-17) */
.hero .field .ta{left:-10px;right:-10px;top:calc(100% + 10px);text-align:left}
.ta .draw i{background:none;box-shadow:none;width:36px;height:36px;margin:0 18px}
.ta .draw i svg.drawsym{width:20px;height:20px;fill:none;stroke:var(--ink);stroke-width:1.6;stroke-linejoin:round}
.ta .draw i svg.drawsym circle{fill:var(--honey);stroke:none}
.hsearch .field{padding-left:4px}
/* founder 2026-10-17: no search icon in the phone header - the home bar and the Ask tab do it */
.opensearch{display:none!important}
/* ===== the drawllm mark (founder pick 2026-10-17 "The Solid Collar": a pencil tip that is also a play button) before the wordmark ===== */
.wm{display:inline-flex;align-items:center;gap:8px}
.wm .wmark{width:31px;height:20px;flex:none;overflow:visible}
.wm .wmark .mi{fill:var(--ink)}
.wm .wmark .mp{fill:var(--amber)}
.wm i{margin-left:0}
.wm{gap:0}
.wm .wmark{margin-right:9px}
/* the Draw button's symbol = the same mark, small: ink follows the button text colour, the point stays amber */
.opt-c_word_pill .wp-draw.mk{width:20px;height:13px;stroke:none}
.opt-c_word_pill .wp-draw.mk .mi{fill:currentColor}
.opt-c_word_pill .wp-draw.mk .mp{fill:var(--honey)}
.field:not(.lit) .opt-c_word_pill .wp-draw.mk .mp{fill:currentColor}

/* ===== the drawllm mark (founder pick 2026-10-17 late, "The Tip in the Word"): the wordmark IS the logo - its d is a pencil
   with an amber point; the pen mark beside the word is gone. Paths: marketing/brand/2026-10-17 drawllm Mark - Tip in the Word ===== */
.wm{--wmh:clamp(20px,.25vw + 18.5px,23px)}
.wm .wmark.wword{width:calc(var(--wmh) * 5.055);height:var(--wmh);margin:0;display:block}
/* the Draw button's symbol and the type-ahead 'Draw' row = the pencil of the d */
.opt-c_word_pill .wp-draw.mk.pen{width:7.5px;height:15px}
.opt-c_word_pill .wp-draw.mk.pen path{stroke:none}
.ta .draw i svg.drawsym.pen{width:10px;height:20px;stroke:none}
.ta .draw i svg.drawsym.pen .mi{fill:var(--ink)}
.ta .draw i svg.drawsym.pen .mp{fill:var(--honey)}
/* the phone Ask tab = the d's pencil (founder 2026-10-17: the d is the logo, no play/pen mark) */
.tabbar .disc.pen svg{width:12px;height:24px;stroke:none}
.tabbar .disc.pen svg .mi{fill:var(--ink)}
.tabbar .disc.pen svg .mp{fill:var(--amber)}
.tabbar a.on .disc.pen svg .mi,.tabbar a:hover .disc.pen svg .mi{fill:var(--amber)}
/* ===== 2026-10-18 founder markups on the watch page ===== */
/* theatre is gone */
.ic.theatre{display:none!important}
/* the header search's Draw = the pencil alone ("on the top we can just have the icon"): a 20 px pencil, legible at rest (ink-faint), not an 8 x 15 grey sliver */
.hsearch .opt-c_word_pill .wp-t,.hsearch .opt-c_word_pill .wp-bt{display:none}
.hsearch .opt-c_word_pill{--wp-pl:11px;--wp-pr:11px;min-width:36px}
.hsearch .opt-c_word_pill .wp-draw.mk.pen{width:10px;height:20px}
.hsearch .field:not(.lit) .opt-c_word_pill{color:var(--ink-faint)}
/* Draw next: clean readable type, not the joined hand ("use a clean drawing ... make it less text, easy to read and click") */
.dir .q{font:500 14.5px/1.35 var(--ui);letter-spacing:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.dirs.side .dir .q{-webkit-line-clamp:3}   /* the side column is under 240 px: a third line rather than a cut title */
.dir{padding:10px 10px 10px 14px}
.dir.d3{color:var(--ink);text-decoration:none;background:var(--honey-soft)}
.dir.d3 > svg{flex:none;width:20px;height:20px}
.dir.d3 .q{font-weight:600}
/* the ask card opened from a Draw next item: centred over the stage */
@media (min-width:721px){.excard.free{left:50%!important;top:50%!important;transform:translate(-50%,-50%)}}
/* dot labels: the lit / hovered dot and its label always above its neighbours */
.poi.hl,.poi:hover,.poi.sel{z-index:3}
/* ONE CANVAS (founder 2026-10-18: "consider this whole thing as a canvas ... it's chopping the drawing when zooming"): on desktop the
   screen spans the whole stage; the drawl inside keeps its proportionate size (height-bound) and its world simply continues to the
   stage edges, softly faded there, instead of being cut at an inner 16:9 box */
@media (min-width:721px){
  .screen{width:100%;aspect-ratio:auto;height:min(506px,calc((100vw - 96px) * 9 / 16),calc(100dvh - var(--top-h) - var(--lane-h) - 104px))}
  .screen iframe{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 48px,#000 calc(100% - 48px),transparent 100%),linear-gradient(180deg,transparent 0,#000 44px,#000 100%);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent 0,#000 48px,#000 calc(100% - 48px),transparent 100%),linear-gradient(180deg,transparent 0,#000 44px,#000 100%);mask-composite:intersect}
  .player.fs .screen{width:100%;height:calc(100dvh - var(--lane-h) - 132px)}
}
/* PLAY THE ENDING: the Try-it button (heads Draw next) and the step bar on the stage */
.dir.play{background:var(--honey);color:var(--ink)}
.dir.play > svg{flex:none;width:16px;height:16px;fill:currentColor}
.dir.play .q{font-weight:600}
.dir.play:hover{background:var(--honey-hover)}
.playbar{position:absolute;z-index:9;left:50%;bottom:16px;transform:translate(-50%,8px);display:flex;align-items:center;gap:10px;max-width:calc(100% - 32px);padding:9px 10px 9px 16px;border-radius:999px;background:var(--ink);color:var(--paper);font:500 14.5px/1.3 var(--ui);box-shadow:0 6px 20px rgba(35,34,39,.22);opacity:0;transition:opacity .25s var(--ease),transform .3s var(--ease)}
.playbar.in{opacity:1;transform:translate(-50%,0)}
.playbar .pt{flex:1;min-width:0}
.playbar .pa{flex:none;padding:6px 12px;border-radius:999px;background:var(--honey);color:var(--ink);font:600 13px var(--ui)}
.playbar .px{flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;color:var(--paper);opacity:.75}
.playbar .px:hover{opacity:1}
.playbar .px svg{width:15px;height:15px}
/* QUIET CONTROLS (founder 2026-10-18: the filled amber pills "look crude"; he chose the white ones: "with white everything, it is cleaner"):
   the same white hairline chip as "5 parts to explore": no fill, no shadow, ink text. */
.soundhint{height:32px;padding:0 13px 0 10px;background:rgba(255,255,255,.94);color:var(--ink);box-shadow:0 0 0 1px var(--ink-hair);font:500 13px var(--ui)}
.soundhint:hover{background:#fff;box-shadow:0 0 0 1px rgba(35,34,39,.35)}
.soundhint svg{width:17px;height:17px}
.pill.act{background:#fff;box-shadow:0 0 0 1px var(--ink-hair);color:var(--ink)}
.pill.act:hover{background:var(--tint);box-shadow:0 0 0 1px rgba(35,34,39,.35)}
/* the playable ending speaks in the same white chip, at the TOP of the stage (founder 2026-10-18: the dark bar "is not working" and it
   covered the drawing's caption); the Try-it entry is white like the other Draw next items, its play mark amber */
.playbar{top:14px;bottom:auto;transform:translate(-50%,-6px);padding:6px 6px 6px 14px;background:rgba(255,255,255,.96);color:var(--ink);box-shadow:0 0 0 1px var(--ink-hair);font:500 13.5px/1.3 var(--ui)}
.playbar.in{transform:translate(-50%,0)}
.playbar .pa{background:#fff;color:var(--ink);box-shadow:0 0 0 1px var(--ink-hair);font:600 12.5px var(--ui);padding:5px 12px}
.playbar .pa:hover{background:var(--tint)}
.playbar .px{color:var(--ink-faint);opacity:1}
.playbar .px:hover{color:var(--ink)}
@media (max-width:720px){.playbar{top:54px}}
.dir.play{background:var(--paper)}
.dir.play:hover{background:var(--paper)}
.dir.play > svg{fill:var(--amber)}

/* ===== THE ACCOUNT JOURNEY (2026-10-18): sign in · welcome · drawls left · out of drawls · checkout · done · plans page.
   White, quiet, the ink pill for the one main action, amber only as an accent; a centred card on desktop, a bottom sheet on phones. */
.a-scrim{position:fixed;inset:0;z-index:90;background:rgba(21,20,25,.26);opacity:0;transition:opacity .25s var(--ease)}
.a-scrim.in{opacity:1}
.a-sheet{position:fixed;z-index:91;left:50%;top:50%;width:min(420px,calc(100vw - 32px));max-height:calc(100dvh - 40px);overflow:auto;background:var(--paper);border-radius:20px;box-shadow:var(--pop-shadow);padding:30px 28px 22px;transform:translate(-50%,-46%);opacity:0;transition:opacity .25s var(--ease),transform .3s var(--ease)}
.a-sheet.in{opacity:1;transform:translate(-50%,-50%)}
.a-x{position:absolute;right:12px;top:12px;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;color:var(--ink-faint)}
.a-x:hover{background:var(--tint);color:var(--ink)}
.a-x svg{width:16px;height:16px}
.a-tile{display:block;width:44px;height:44px;border-radius:11px;margin:0 0 16px}
.a-h{margin:0 0 6px;font:600 21px/1.25 var(--ui);color:var(--ink);letter-spacing:-.01em;padding-right:24px}
.a-q{margin:4px 0 14px;font:500 20px/1.25 var(--hand);color:var(--ink)}
.a-p{margin:6px 0 16px;font:400 15px/1.5 var(--ui);color:var(--ink-faint)}
.a-p b{color:var(--ink);font-weight:600}
.a-list{list-style:none;margin:6px 0 16px;padding:0;display:grid;gap:7px;font:400 14.5px/1.35 var(--ui);color:var(--ink)}
.a-list li{position:relative;padding-left:18px}
.a-list li:before{content:'';position:absolute;left:2px;top:.5em;width:7px;height:7px;border-radius:50%;background:var(--honey)}
.a-agree{display:grid;gap:10px;margin:4px 0 16px;padding:14px;border-radius:14px;background:var(--tint-faint)}
.a-agree label{display:flex;gap:10px;align-items:flex-start;font:400 13.5px/1.45 var(--ui);color:var(--ink);cursor:pointer}
.a-agree input{flex:none;width:18px;height:18px;margin:1px 0 0;accent-color:var(--ink)}
.a-agree a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--honey-edge);text-underline-offset:2px}
.a-btn{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;min-height:48px;padding:0 18px;border-radius:999px;background:var(--ink);color:var(--paper);font:600 15px var(--ui);transition:background .15s var(--ease),opacity .15s var(--ease)}
.a-btn:hover{background:var(--ink-deep)}
.a-btn:disabled{opacity:.55;cursor:default}
/* not yet agreed: the button stays full ink (aria-disabled); a press flashes the agree box honey-soft and focuses the checkbox */
.a-agree.nudge,.a-sale.nudge{animation:agreeNudge 1.1s var(--ease)}
@keyframes agreeNudge{0%,55%{background:var(--honey-soft)}100%{background:var(--tint-faint)}}
.a-btn svg{width:16px;height:16px;flex:none}
.a-btn .drawsym{width:10px;height:20px}
.a-btn .drawsym .mi{fill:var(--paper)}
.a-btn .drawsym .mp{fill:var(--honey)}
.a-btn.g-btn{background:#fff;color:var(--ink);box-shadow:0 0 0 1px rgba(35,34,39,.28)}
.a-btn.g-btn:hover:not(:disabled){background:var(--tint-faint)}
.a-btn.g-btn svg{width:18px;height:18px}
.a-btn.a-ghost{background:#fff;color:var(--ink);box-shadow:0 0 0 1px var(--ink-hair)}
.a-btn.a-ghost:hover{background:var(--tint-faint)}
.a-small{margin:14px 0 0;font:400 12.5px/1.5 var(--ui);color:var(--ink-faint);text-align:center}
.a-small a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--honey-edge);text-underline-offset:2px}
.a-hit{display:grid;grid-template-columns:1fr auto;align-items:center;gap:2px 10px;width:100%;margin:0 0 14px;padding:12px 14px;border-radius:14px;background:var(--honey-soft);text-align:left}
.a-hit .eyebrow{grid-column:1/-1}
.a-hit b{font:600 14.5px/1.3 var(--ui);color:var(--ink)}
.a-hitgo{display:inline-flex;align-items:center;gap:4px;font:600 13px var(--ui);color:var(--ink)}
.a-hitgo svg{width:14px;height:14px}
.a-seg{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;margin:4px 0 16px;border-radius:999px;background:var(--tint)}
.a-seg button{min-height:36px;border-radius:999px;font:600 13.5px var(--ui);color:var(--ink-faint)}
.a-seg button[aria-selected="true"]{background:#fff;color:var(--ink);box-shadow:0 1px 3px rgba(35,34,39,.12)}
.a-step{display:flex;align-items:center;justify-content:center;gap:12px;margin:2px 0 12px}
.a-pm{width:44px;height:44px;border-radius:50%;box-shadow:0 0 0 1px var(--ink-hair);font:500 22px/1 var(--ui);color:var(--ink)}
.a-pm:hover{background:var(--tint-faint)}
.a-step input{width:120px;height:56px;border:0;border-radius:14px;background:var(--tint-faint);text-align:center;font:600 30px var(--ui);color:var(--ink);-moz-appearance:textfield}
.a-step input::-webkit-outer-spin-button,.a-step input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.a-step input.usd{font-size:26px}
.a-step input:focus{outline:2px solid var(--amber);outline-offset:2px}
.a-presets{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:0 0 12px}
.a-presets button{min-height:32px;padding:0 13px;border-radius:999px;box-shadow:0 0 0 1px var(--ink-hair);font:500 13px var(--ui);color:var(--ink)}
.a-presets button:hover{background:var(--tint-faint)}
.a-price{margin:0 0 14px;text-align:center;font:400 14px/1.5 var(--ui);color:var(--ink-faint)}
.a-price b{color:var(--ink);font:600 17px var(--ui)}
.a-tip{display:block;font-size:12.5px;color:var(--ink-faint)}
.a-bill{display:flex;justify-content:center;gap:4px;padding:4px;margin:0 auto 12px;width:max-content;max-width:100%;border-radius:999px;background:var(--tint)}
.a-bill button{min-height:32px;padding:0 14px;border-radius:999px;font:600 12.5px var(--ui);color:var(--ink-faint)}
.a-bill button[aria-pressed="true"]{background:#fff;color:var(--ink);box-shadow:0 1px 3px rgba(35,34,39,.12)}
.a-plans{display:grid;gap:8px;margin:0 0 14px}
.a-plan{display:grid;grid-template-columns:1fr auto;gap:1px 12px;align-items:center;width:100%;padding:12px 16px;border-radius:14px;box-shadow:0 0 0 1px var(--ink-hair);text-align:left}
.a-plan .nm{font:600 15px var(--ui);color:var(--ink)}
.a-plan .dr{grid-row:2;font:400 13px var(--ui);color:var(--ink-faint)}
.a-plan .pr{grid-row:1/3;grid-column:2;font:600 15px var(--ui);color:var(--ink)}
.a-plan.on{box-shadow:0 0 0 2px var(--ink)}
.a-plan.cur{opacity:.55;cursor:default}
.a-dots{display:flex;justify-content:center;gap:6px;margin:6px 0 4px}
.a-dots i{width:8px;height:8px;border-radius:50%;background:var(--honey);animation:wpDot 1.2s var(--ease) infinite both}
.a-dots i:nth-child(2){animation-delay:.16s}.a-dots i:nth-child(3){animation-delay:.32s}
/* drawls left: a quiet chip by the avatar */
.acct-left{display:inline-flex;align-items:center;gap:4px;height:32px;padding:0 12px;margin-right:10px;border-radius:999px;background:#fff;box-shadow:0 0 0 1px var(--ink-hair);font:500 13px var(--ui);color:var(--ink-faint);white-space:nowrap}
.acct-left b{color:var(--ink);font-weight:600}
.acct-left.low b{color:var(--ink)}
.acct-left:hover{box-shadow:0 0 0 1px rgba(35,34,39,.35)}
/* the plans page */
.plansp{max-width:1000px;margin:0 auto;padding:clamp(28px,5vw,56px) clamp(16px,3vw,32px) 80px;text-align:center}
.plansp h1.hand{margin:0 0 8px;font:600 clamp(40px,5vw,56px)/1 var(--hand);color:var(--ink)}
.plansp h2.hand.sm{margin:56px 0 6px;font:600 32px/1.1 var(--hand);color:var(--ink)}
.plansp .sub{max-width:560px;margin:0 auto 22px;font:400 16px/1.5 var(--ui);color:var(--ink-faint)}
.a-bill.big button{min-height:38px;padding:0 18px;font-size:13.5px}
.pcards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin:18px 0 0;text-align:left}
.pcard{display:flex;flex-direction:column;padding:26px 24px 22px;border-radius:20px;background:#fff;box-shadow:0 0 0 1px var(--ink-hair)}
.pcard.mid{background:var(--paper)}   /* the grey tint read as disabled: three white cards */
.pcard h3.hand{margin:0 0 10px;font:600 34px/1 var(--hand);color:var(--ink)}
.pcard .pp{margin:0;font:400 14px var(--ui);color:var(--ink-faint)}
.pcard .pp b{font:600 30px var(--ui);color:var(--ink);letter-spacing:-.02em}
.pcard .pd{margin:4px 0 16px;font:400 13px var(--ui);color:var(--ink-faint)}
.pcard ul{list-style:none;margin:0 0 22px;padding:0;display:grid;gap:8px;flex:1;align-content:start;font:400 14.5px/1.35 var(--ui);color:var(--ink)}
.pcard li{position:relative;padding-left:18px}
.pcard li:before{content:'';position:absolute;left:2px;top:.5em;width:7px;height:7px;border-radius:50%;background:var(--honey)}
.a-btn.wide{width:auto;display:inline-flex;min-width:220px;margin:6px auto 0}
.faq{max-width:640px;margin:56px auto 0;text-align:left}
.faq details{padding:14px 2px}
.faq summary{cursor:pointer;font:600 15.5px var(--ui);color:var(--ink);list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:'+';float:right;color:var(--ink-faint);font-weight:400}
.faq details[open] summary:after{content:'–'}
.faq p{margin:8px 0 0;font:400 14.5px/1.55 var(--ui);color:var(--ink-faint)}
.faq a,.plansp .legal a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--honey-edge);text-underline-offset:2px}
.plansp .legal{margin:40px 0 0;font:400 13px var(--ui);color:var(--ink-faint)}
@media (max-width:720px){
  .a-sheet{left:0;right:0;top:auto;bottom:0;width:auto;max-height:92dvh;border-radius:22px 22px 0 0;padding:26px 20px calc(20px + env(safe-area-inset-bottom));transform:translateY(24px)}
  .a-sheet.in{transform:none}
  .pcards{grid-template-columns:1fr}
  .acct-left{height:30px;padding:0 10px;margin-right:6px;font-size:12.5px}
}
.a-sheet:focus{outline:none}
.a-line{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:6px 0 14px;padding:14px 16px;border-radius:14px;box-shadow:0 0 0 1px var(--ink-hair)}
.a-line b{font:600 15.5px var(--ui);color:var(--ink)}
.a-line span{font:400 12.5px var(--ui);color:var(--ink-faint)}
.a-agree b{font-weight:600}
.a-sale{display:flex;gap:9px;align-items:flex-start;margin:0 0 12px;padding:10px 12px;border-radius:12px;background:var(--tint-faint);font:400 12.5px/1.45 var(--ui);color:var(--ink);cursor:pointer;text-align:left}
.a-sale input{flex:none;width:17px;height:17px;margin:1px 0 0;accent-color:var(--ink)}
.a-sale a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--honey-edge);text-underline-offset:2px}

/* THE 'SOURCED' BADGE (founder 2026-10-18: "add some badge ... to add credibility that every drawl is sourced"): beside the views on a
   tile, and in the watch page's info strip (tap = the numbered sources). Shown only when the drawl's record lists its sources. */
.sbadge{display:inline-flex;align-items:center;gap:4px;flex:none;padding:1px 8px 1px 5px;border-radius:999px;background:var(--honey-soft);color:var(--ink);font:600 11.5px/1.55 var(--ui);letter-spacing:.01em;white-space:nowrap}
.sbadge .seal{width:14px;height:14px;flex:none}
.poster .srcchip{position:absolute;left:8px;bottom:8px;display:inline-flex;align-items:center;gap:4px;padding:2px 8px 2px 5px;border-radius:5px;background:rgba(255,255,255,.94);box-shadow:0 0 0 1px var(--ink-hair);font:600 11.5px/1.3 var(--ui);color:var(--ink)}
.poster .srcchip .seal{width:13px;height:13px;flex:none}
.strip .srcb.sbadge{font:600 12.5px/1.6 var(--ui);text-decoration:none;color:var(--ink);padding:2px 10px 2px 6px;cursor:pointer;transition:background .15s var(--ease)}
.strip .srcb.sbadge:hover{box-shadow:inset 0 0 0 1px var(--honey);color:var(--ink)}
.strip .srcb.sbadge .seal{width:15px;height:15px}

/* THE TRY-IT CARD INVITES (founder 2026-10-18: "highlight it more ... a yellow outline or something minimal so one would want to
   click"): a gold trim, a gold play disc, and a soft glow that pulses three times as the card arrives */
.dir.play{box-shadow:0 0 0 2px var(--honey),0 8px 22px -14px rgba(255,196,0,.7)}
.dir.play > svg{width:28px;height:28px;padding:7px 6px 7px 8px;border-radius:50%;background:var(--honey);fill:var(--ink)}
.dir.play:hover{background:var(--honey-soft);box-shadow:0 0 0 2px var(--honey-hover),0 10px 24px -14px rgba(255,196,0,.8)}
.dir.play.in{animation:playglow 1.7s var(--ease) .4s 3}
@keyframes playglow{0%{box-shadow:0 0 0 2px var(--honey),0 0 0 0 rgba(255,196,0,.55)}70%{box-shadow:0 0 0 2px var(--honey),0 0 0 14px rgba(255,196,0,0)}100%{box-shadow:0 0 0 2px var(--honey),0 0 0 0 rgba(255,196,0,0)}}
@media (prefers-reduced-motion:reduce){.dir.play.in{animation:none}}

.ftest{margin:10px 0 0;text-align:center}.ftest .a-ghost{font:500 13px var(--ui);color:var(--ink-faint);text-decoration:underline;text-decoration-color:var(--honey);background:none;border:0;cursor:pointer}

/* the BETA tag beside the wordmark (founder 2026-10-18: "just put a tag of beta on it and take it live") */
.wm{display:inline-flex;align-items:center}
.betatag{margin-left:8px;padding:1px 7px;border-radius:999px;background:var(--honey-soft);box-shadow:inset 0 0 0 1px rgba(242,182,0,.55);color:var(--ink);font:600 10.5px/1.6 var(--ui);letter-spacing:.06em;text-transform:uppercase}

/* THE ACCOUNT (founder 2026-10-18): the header sizes its sides by their content so the search never runs under the nav; the balance
   chip (gold d-tile + number) and the avatar open the account menu */
.top{grid-template-columns:auto minmax(0,1fr) auto}
.top .hsearch{justify-self:center;width:min(100%,500px);margin:0 8px}
.acct-left{gap:6px;height:32px;padding:0 10px 0 4px;margin-right:8px;box-shadow:0 0 0 1px var(--ink-hair);background:var(--paper);cursor:pointer}
.acct-left .dt,.am-bal .dt{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:7px;background:var(--honey);color:var(--ink-deep);font:700 15px/1 var(--hand)}
.acct-left b{font:600 14px var(--ui);color:var(--ink);font-variant-numeric:tabular-nums}
.acct-left.low b{color:var(--ink)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.acctpop{position:absolute;right:var(--pad);top:calc(var(--top-h) - 6px);width:300px;padding:10px;gap:2px;z-index:60}
.acctpop .am-who{display:flex;align-items:center;gap:12px;padding:8px 8px 12px}
.acctpop .am-av{flex:none;width:40px;height:40px;border-radius:50%;background:var(--honey-soft);border:1px solid rgba(242,182,0,.35);display:grid;place-items:center;font:600 16px var(--ui);color:var(--ink)}
.acctpop .am-id{display:flex;flex-direction:column;min-width:0}
.acctpop .am-id b{font:600 15px/1.3 var(--ui);color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acctpop .am-id small{font:400 12.5px/1.3 var(--ui);color:var(--ink-faint);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acctpop .am-card{margin:0 6px 8px;padding:12px;border-radius:12px;background:var(--honey-soft)}
.acctpop .am-bal{display:flex;align-items:center;gap:8px}
.acctpop .am-bal b{font:600 22px/1 var(--ui);color:var(--ink);font-variant-numeric:tabular-nums}
.acctpop .am-bal span:last-child{font:500 14px var(--ui);color:var(--ink)}
.acctpop .am-sub{margin:6px 0 0 32px;font:400 12.5px/1.4 var(--ui);color:var(--ink-faint)}
.acctpop a,.acctpop button{display:flex;align-items:center;justify-content:flex-start;gap:10px;min-height:42px;padding:0 12px;border-radius:8px;font:500 14px var(--ui);color:var(--ink);text-align:left;width:100%}
.acctpop a:hover,.acctpop button:hover,.acctpop a:focus-visible,.acctpop button:focus-visible{background:var(--honey-soft);outline:none}
.acctpop .am-buy{font-weight:600}
.acctpop .am-buy svg{width:16px;height:16px}
.acctpop .am-sep{height:1px;margin:6px 8px;background:var(--ink-hair)}
.ptest{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:6px auto 26px;max-width:720px;padding:16px 18px;border-radius:16px;background:var(--honey-soft);box-shadow:0 0 0 2px var(--honey)}
.ptest[hidden]{display:none}
.ptest b{display:block;font:600 16px var(--ui);color:var(--ink)}
.ptest > div span{display:block;margin-top:3px;font:400 13px/1.4 var(--ui);color:var(--ink-faint)}
.ptest .a-btn{width:auto;flex:none;padding:0 22px}
@media (max-width:720px){
  .acctpop{position:fixed;left:8px;right:8px;top:auto;bottom:calc(8px + env(safe-area-inset-bottom,0px));width:auto;border-radius:18px;padding:12px 10px}
  .acctpop a,.acctpop button{min-height:48px;font-size:15px}
  .ptest{flex-direction:column;align-items:stretch;text-align:left}
  .ptest .a-btn{width:100%}
}

/* THE SOFT LAUNCH: buying opens soon -- the buttons stay in place, greyed, with the word "soon" (founder 2026-10-18) */
.a-btn.soon,.a-btn.soon:hover,.a-btn[disabled].soon{background:var(--tint-faint);color:var(--ink-faint);box-shadow:0 0 0 1px var(--ink-hair);cursor:default}
.am-buy.soon{color:var(--ink-faint);cursor:default}
.soonnote{display:flex;align-items:center;gap:10px;margin:0 0 14px;padding:10px 14px;border-radius:12px;background:var(--honey-soft);font:500 14px/1.35 var(--ui);color:var(--ink)}
.soonnote .dt{flex:none;display:inline-grid;place-items:center;width:24px;height:24px;border-radius:7px;background:var(--honey);color:var(--ink-deep);font:700 15px/1 var(--hand)}

/* THE ROUND MARK (founder 2026-10-18: "used circular logo and d in it would look better"): the drawl-count chip and the notes wear
   the round logo, the gold circle with the pencil-d (the favicon file), never a square tile with a letter */
.acct-left .dt,.am-bal .dt,.soonnote .dt{border-radius:50%;background:var(--honey) url(/studio/favicon.svg?v=dm5) center/100% no-repeat;color:transparent;font-size:0}

/* TOUCH TARGETS (QA 2026-10-18): on a touch screen every small control answers a 44 px finger, the look unchanged
   (never list an absolute badge here: position:relative pulled the 'Sourced' chip out of its picture corner on phones) */
@media (hover:none) and (pointer:coarse){
  .avatar,.acct-left,.tool,.seeall,.strip .srcb,.pill,.foot a,.ib,.lang,.chip{position:relative}
  .avatar:after,.acct-left:after,.tool:after,.seeall:after,.strip .srcb:after,.pill:after,.foot a:after{content:"";position:absolute;left:50%;top:50%;width:max(100%,44px);height:max(100%,44px);transform:translate(-50%,-50%)}
  .foot a{display:inline-block;padding:6px 0}
}
.qlong{margin:6px 2px 0;font:500 12.5px/1.4 var(--ui);color:var(--ink-faint)}

/* =====================================================================================================================
   COMMENTS (server/studio_comments.py, 2026-10-18) -- the count, the composer (the ink line + an ink Post pill), the list:
   name · time, the words, a quiet Delete on your own and a small Report on others'. Spacing groups (no rules); gold only as
   the focus highlight (the ink line's amber trace, :focus-visible). Every text is set with textContent by d.js.
   ===================================================================================================================== */
.composer.live .field input{color:var(--ink)}
.composer .field input[readonly]{cursor:pointer}
.composer .av.anon{background:var(--tint);box-shadow:none;color:var(--ink-faint)}
.composer .av.anon svg{width:20px;height:20px}
.composer .cpost{flex:none;margin:0 0 3px;padding:0 18px}
.composer .cpost[aria-disabled="true"]{cursor:default}
.composer .cpost[aria-disabled="true"]:hover{background:var(--tint);transform:none}
.composer.busy .cpost{pointer-events:none;opacity:.75}
.cmeta{display:flex;justify-content:flex-end;margin:6px 0 0 50px}
.cleft{font:500 12px/1.3 var(--ui);color:var(--ink-faint);font-variant-numeric:tabular-nums}
.cleft.over{color:var(--err)}
.clist{list-style:none;margin:20px 0 0;padding:0;display:flex;flex-direction:column;gap:20px}
.clist:empty{display:none}
.cm{display:flex;align-items:flex-start;gap:12px}
.cm .av{width:38px;height:38px;font-size:15px}
.cm .av.house{font-size:17px}
.cb{flex:1;min-width:0}
.ch{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 8px}
.cn{font:600 13.5px/1.35 var(--ui);color:var(--ink)}
.ct{font:400 12.5px/1.35 var(--ui);color:var(--ink-faint)}
.chid{font:500 11.5px/1.35 var(--ui);color:var(--ink);background:var(--honey-soft);padding:1px 8px;border-radius:9px}
.cx{margin:2px 0 0;font:400 14.5px/1.5 var(--ui);color:var(--ink);overflow-wrap:anywhere}
.cm.hid .cx{color:var(--ink-faint)}
.ca{display:flex;align-items:center;gap:2px;margin:2px 0 0 -8px}
.cbtn{min-height:32px;padding:0 8px;border-radius:8px;font:500 12.5px var(--ui);color:var(--ink-faint)}
.cbtn:focus-visible{color:var(--ink);background:var(--tint)}
@media (hover:hover){.cbtn:hover{color:var(--ink);background:var(--tint)}}
.cbtn.arm{color:var(--err);background:var(--tint-faint)}
.cbtn[disabled]{cursor:default;opacity:.6}
.cdone{display:inline-flex;align-items:center;min-height:32px;padding:0 8px;font:400 12.5px var(--ui);color:var(--ink-faint)}
#comments .cnote{margin-top:16px}
@media (max-width:720px){
  .cmeta{margin-left:0}
  .composer{gap:10px}
  .composer .cpost{padding:0 16px}
  .clist{gap:18px}
  .cm{gap:10px}
  .cm .av{width:32px;height:32px;font-size:13px}
  .cm .av.house{font-size:15px}
  .ca{margin-top:0}
  .cbtn,.cdone{min-height:30px}
  .cbtn{position:relative}
  .cbtn:after{content:"";position:absolute;left:50%;top:50%;width:max(100%,44px);height:44px;transform:translate(-50%,-50%)}   /* the 44 px tap area */
}

/* NO PLAY DISC ON TILES (founder 2026-10-17: "the outline highlight is enough; click opens and plays"; DESIGN.md hard rule) */
.poster .play,.tile:hover .poster .play,.tile:focus-within .poster .play{display:none}

/* =====================================================================================================================
   NAME + @HANDLE (server/studio_profiles.py, 2026-10-18) -- "Choose your name": two ink-line fields in the house sheet, a live
   handle check (an ink tick when free; the reason + three tap-to-use suggestions when not), one ink Continue pill.
   Text is ink; yellow only as the soft chip fill (#FFF3C2, #FFC400 on hover) and the line's amber trace.
   ===================================================================================================================== */
.pf-l{display:block;margin:16px 0 0;font:600 12.5px/1.3 var(--ui);color:var(--ink)}
.a-sheet .field.pf{--lnh:9px;gap:4px;margin-top:2px}
.a-sheet .field.pf input{height:44px;font:500 17px/44px var(--ui);color:var(--ink);padding-left:0}
.a-sheet .field.pf input::placeholder{font:400 16px/44px var(--ui)}
.field.pf .pf-at{flex:none;font:500 17px/44px var(--ui);color:var(--ink-faint);padding-bottom:0}
.field.pf .pf-ok{flex:none;display:grid;place-items:center;width:24px;height:44px;color:var(--ink)}
.field.pf .pf-ok svg{width:20px;height:20px}
.pf-msg{min-height:19px;margin:6px 0 0;font:400 13px/1.45 var(--ui);color:var(--ink-faint)}
.pf-msg.bad{color:var(--err)}
#pfNm:empty{min-height:0;margin:0}
.pf-sugg{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 0}
.pf-sugg:empty{display:none}
.pf-chip{min-height:36px;padding:0 14px;border-radius:999px;background:var(--honey-soft);font:500 14px var(--ui);color:var(--ink)}
@media (hover:hover){.pf-chip:hover{background:var(--honey)}}
#pfGo{margin-top:20px}
.chd{font:400 12.5px/1.35 var(--ui);color:var(--ink-faint)}
.chead .line .yh{color:var(--ink-faint)}
@media (max-width:720px){
  .pf-chip{min-height:40px}
}

/* =====================================================================================================================
   ACCOUNT SETTINGS (/studio/account.html, 2026-10-18) -- one calm column, phone first: groups spaced apart (no rules), each a
   hand-lettered heading over plain rows. Ink text; yellow only as a fill (the chosen language, the sound switch, the brand d).
   ===================================================================================================================== */
.acc{max-width:640px;margin:0 auto;padding:clamp(22px,4vw,44px) 0 40px}
.acc-h{margin:0 0 22px;font:600 clamp(26px,2.4vw,32px)/1.15 var(--ui);letter-spacing:-.01em;color:var(--ink)}
.acc-g{margin:0 0 30px}
.acc-g > h2{margin:0 0 6px;font:600 23px/1.15 var(--hand);color:var(--ink)}
.acc-row{display:flex;align-items:center;gap:14px;min-height:56px;padding:6px 0}
.acc-row .grow{flex:1;min-width:0}
.acc-row b{display:block;font:600 15.5px/1.35 var(--ui);color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acc-row small{display:block;margin-top:1px;font:400 13px/1.4 var(--ui);color:var(--ink-faint)}
.acc-row .btn{flex:none}
.acc-ic{flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--tint-faint)}
.acc-ic svg{width:20px;height:20px}
.acc-ic .dt{display:inline-block;width:24px;height:24px;border-radius:50%;background:var(--honey) url(/studio/favicon.svg?v=dm5) center/100% no-repeat;color:transparent;font-size:0}
.acc-note{margin:4px 0 0;font:400 13px/1.5 var(--ui);color:var(--ink-faint)}
.acc-acts{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 0 52px}
.btn.soon,.btn.soon:hover{background:var(--tint-faint);color:var(--ink-faint);cursor:default;transform:none}
.acc-langs{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 0}
.acc-langs button{min-height:40px;padding:0 16px;border-radius:999px;background:var(--tint);font:500 14.5px var(--ui);color:var(--ink)}
.acc-langs button[aria-checked="true"]{background:var(--honey-soft);box-shadow:inset 0 0 0 1.5px var(--honey);font-weight:600}
@media (hover:hover){.acc-langs button[aria-checked="false"]:hover{background:var(--honey-soft)}}
.acc-sw{flex:none;position:relative;width:46px;height:28px;border-radius:14px;background:var(--ink-ghost);transition:background .2s var(--ease)}
.acc-sw:after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(35,34,39,.3);transition:left .2s var(--ease)}
.acc-sw[aria-checked="true"]{background:var(--honey)}
.acc-sw[aria-checked="true"]:after{left:21px}
.acc-list{display:flex;flex-direction:column;align-items:flex-start}
.acc-link{display:flex;align-items:center;min-height:46px;font:500 15px var(--ui);color:var(--ink);text-align:left}
@media (hover:hover){.acc-link:hover{text-decoration:underline;text-decoration-color:var(--honey);text-underline-offset:4px}}
.acc-danger{color:var(--err)}
@media (hover:hover){.acc-danger:hover{text-decoration-color:var(--err)}}
.acc-card{padding:20px;border-radius:16px;background:var(--tint-faint)}
.acc-card .acc-p{margin:0 0 16px;font:400 15px/1.5 var(--ui);color:var(--ink)}
@media (max-width:720px){
  .acc{padding-top:18px}
  .acc-acts{margin-left:0}
  .acc-g{margin-bottom:26px}
}

.acctpop .am-sub.soon{margin:0;color:var(--ink);font-weight:500}