/* App shell around the Sahne player (P212): same world — Onest, honey, navy markers, mist light / midnight dark, posters
   with the searched question on the finished-result picture. One memorable moment per page: the shuffling poster stack on
   the home page, the step tiles that develop while a guide is being prepared. */
:root{
  --bg:oklch(0.956 0.008 255); --surface:oklch(0.984 0.004 255); --ink:oklch(0.23 0.03 258); --muted:oklch(0.45 0.02 258);
  --line:oklch(0.88 0.012 255); --honey:oklch(0.78 0.16 72); --honey-ink:oklch(0.25 0.05 60); --honey-text:oklch(0.56 0.14 62);
  --num-ink:oklch(0.75 0.16 69); --focus:oklch(0.5 0.13 60); --img-edge:oklch(0.23 0.03 258 / .08);
  --marker:oklch(0.43 0.11 255); --ok:oklch(0.52 0.13 150); --danger:oklch(0.55 0.18 25);
  --font:"Onest",system-ui,-apple-system,"Segoe UI",sans-serif;
  --bar-h:60px; --tab-h:64px; --ease:cubic-bezier(.22,1,.36,1); --ease-in-out:cubic-bezier(.77,0,.175,1);
  --z-sticky:10; --z-toast:30; --glow:.42;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:oklch(0.17 0.03 262); --surface:oklch(0.22 0.03 262); --ink:oklch(0.95 0.008 255); --muted:oklch(0.76 0.02 258);
  --line:oklch(0.31 0.03 262); --honey:oklch(0.83 0.15 78); --honey-ink:oklch(0.22 0.05 60); --honey-text:oklch(0.83 0.15 78);
  --num-ink:oklch(0.83 0.15 78); --focus:oklch(0.83 0.15 78); --img-edge:oklch(1 0 0 / .06);
  --marker:oklch(0.50 0.12 255); --ok:oklch(0.72 0.14 150); --danger:oklch(0.7 0.16 25); --glow:.55; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:oklch(0.17 0.03 262); --surface:oklch(0.22 0.03 262); --ink:oklch(0.95 0.008 255); --muted:oklch(0.76 0.02 258);
  --line:oklch(0.31 0.03 262); --honey:oklch(0.83 0.15 78); --honey-ink:oklch(0.22 0.05 60); --honey-text:oklch(0.83 0.15 78);
  --num-ink:oklch(0.83 0.15 78); --focus:oklch(0.83 0.15 78); --img-edge:oklch(1 0 0 / .06);
  --marker:oklch(0.50 0.12 255); --ok:oklch(0.72 0.14 150); --danger:oklch(0.7 0.16 25); --glow:.55; color-scheme:dark}

*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:400 16px/1.5 var(--font);min-height:100dvh}
a{color:inherit}
button,input{font:inherit;color:inherit}
button{cursor:pointer;border:0;background:none;padding:0;touch-action:manipulation;
  transition:transform .12s var(--ease),background-color .15s var(--ease),color .15s var(--ease),border-color .15s var(--ease),opacity .15s var(--ease)}
button:active,.btn:active,.poster:active{transform:scale(.97)}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:8px}
::selection{background:color-mix(in oklch,var(--honey) 45%,transparent);color:var(--ink)}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.ic{width:1em;height:1em;flex:none;display:block}
#view{outline:none;overflow-x:clip}

/* top bar: brand, a compact ask field (not on the home page, it has its own), tabs, language, theme */
.topbar{position:sticky;top:0;z-index:var(--z-sticky);background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);padding-top:env(safe-area-inset-top,0px)}
.topbar-in{height:var(--bar-h);max-width:1240px;margin:0 auto;padding-inline:20px;display:flex;align-items:center;gap:14px}
.brand{display:flex;align-items:center;gap:8px;font-weight:800;font-size:1.05rem;white-space:nowrap;text-decoration:none}
.brand i{width:26px;height:26px;border-radius:50%;background:var(--honey);color:var(--honey-ink);display:grid;place-items:center;font-size:15px}
.brand small{font-weight:500;color:var(--muted);font-size:.75rem}
.ask{flex:1;min-width:0;max-width:420px;display:flex;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding-inline:12px;height:42px;color:var(--muted)}
.ask input{flex:1;min-width:0;border:0;background:none;outline:none;color:var(--ink);font-weight:500}
.ask:focus-within{border-color:var(--focus)}
.tabs{display:flex;gap:4px;margin-inline-start:auto}
.tabs a{display:flex;align-items:center;gap:7px;padding:8px 12px;border-radius:999px;text-decoration:none;font-weight:700;font-size:.92rem;color:var(--muted)}
.tabs a .ic{width:18px;height:18px}
.tabs a[aria-current="page"]{color:var(--ink);background:var(--surface);box-shadow:inset 0 0 0 1px var(--line)}
.tabs a[data-tab="home"]{display:none}
.tools{display:flex;gap:8px;align-items:center}
.seg{display:inline-flex;background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:3px}
.seg button{width:36px;height:34px;border-radius:999px;display:grid;place-items:center}
.seg button .ic{width:18px;height:18px}
.seg button[aria-pressed="true"]{background:var(--ink);color:var(--bg)}
.langm{position:relative}
.lbtn{display:flex;align-items:center;gap:7px;height:40px;padding-inline:8px 10px;border-radius:999px;background:var(--surface);border:1px solid var(--line);font-weight:800;font-size:.85rem}
.flag{display:block;width:24px;height:18px;border-radius:4px;object-fit:cover;box-shadow:0 0 0 1px oklch(0.23 0.03 258 / .12);flex:none}
.lbtn .chev{width:16px;height:16px;color:var(--muted);transition:rotate .2s var(--ease)}
.lbtn[aria-expanded="true"] .chev{rotate:180deg}
.lmenu{position:absolute;top:calc(100% + 8px);inset-inline-end:0;z-index:var(--z-toast);width:min(270px,calc(100vw - 24px));max-height:min(70vh,520px);overflow-y:auto;
  padding:6px;border-radius:18px;background:var(--surface);border:1px solid var(--line);box-shadow:0 20px 44px -18px oklch(0.1 0.03 262 / .5);animation:pop-in .18s var(--ease)}
.lmenu .lh{margin:6px 10px 4px;font-size:.74rem;font-weight:700;color:var(--muted)}
.lmenu button{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;width:100%;padding:9px 10px;border-radius:12px;text-align:start;font-weight:700}
.lmenu button .flag{width:28px;height:21px}
.lmenu button .ic{width:18px;height:18px;color:var(--honey-text)}
.lmenu button[aria-checked="true"]{background:color-mix(in srgb,var(--honey) 16%,var(--surface))}
.lmenu button[aria-disabled="true"]{cursor:default;opacity:.5}

/* shared pieces */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:0 24px;border-radius:14px;background:var(--honey);color:var(--honey-ink);
  font-weight:800;text-decoration:none;white-space:nowrap}
.btn .ic{width:18px;height:18px}
.ghost{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 18px;border-radius:14px;border:1px solid var(--line);background:var(--surface);
  font-weight:700;text-decoration:none;text-align:center}
.lede{margin:0;color:var(--muted);font-size:1.08rem;max-width:56ch;text-wrap:pretty}
.lede .ic{display:inline-block;vertical-align:-3px;width:18px;height:18px;margin-inline-end:6px;color:var(--honey-text)}
.you{display:flex;gap:10px;align-items:baseline;margin:0;padding:10px 14px;border-radius:16px 16px 16px 4px;background:var(--surface);border:1px solid var(--line);
  max-width:60ch;font-weight:600;align-self:flex-start}
.you span{font-size:.75rem;font-weight:800;color:var(--honey-text);flex:none}
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.sh{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.sh h2{margin:0;font-size:1.5rem;font-weight:900;letter-spacing:-.015em}
.sub{display:inline-flex;align-items:center;gap:6px;color:var(--muted);font-weight:600;font-size:.9rem}
.sub .ic{width:16px;height:16px;color:var(--honey-text)}

/* library poster: finished-result picture with the searched question on it */
.poster{position:relative;display:block;aspect-ratio:4/3.1;border-radius:22px;overflow:hidden;text-decoration:none;color:oklch(0.99 0.003 255);
  background:var(--surface);outline:1px solid var(--img-edge);outline-offset:-1px;transition:transform .2s var(--ease)}
.poster img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.poster::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,oklch(0.14 0.03 262 / .9) 0%,oklch(0.14 0.03 262 / .5) 38%,oklch(0.14 0.03 262 / 0) 66%)}
.pt{position:absolute;z-index:1;inset:auto 0 0;padding:16px 18px;display:grid;gap:4px}
.pt b{font-size:1.18rem;line-height:1.18;font-weight:800;letter-spacing:-.01em;text-wrap:balance}
.pt small{font-size:.86rem;font-weight:600;color:oklch(0.95 0.01 255 / .82)}
.pm{display:flex;gap:6px;margin-top:6px}
.pm span{display:inline-flex;align-items:center;gap:5px;padding:3px 9px 3px 7px;border-radius:999px;background:oklch(1 0 0 / .16);font-weight:700;font-size:.8rem}
.pm .ic{width:14px;height:14px} .pm .st .ic{color:var(--honey)}
.poster.wide{aspect-ratio:16/9;width:100%}
.poster.busy::after{background:linear-gradient(to top,oklch(0.14 0.03 262 / .94) 0%,oklch(0.14 0.03 262 / .82) 46%,oklch(0.14 0.03 262 / .25) 80%)}
.poster.wide .pt b{font-size:clamp(1.3rem,2.6vw,1.8rem)}

/* ---------- home */
.hero,.how,.lib,.band,.foot,.flow,.admin{max-width:1240px;margin-inline:auto;padding-inline:20px}
.hero{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(24px,5vw,72px);align-items:center;padding-block:clamp(36px,7vh,80px) 28px}
.hero-text{display:grid;gap:20px;min-width:0}
.hero h1{margin:0;font-size:clamp(2.6rem,5.6vw,4.6rem);line-height:.98;font-weight:900;letter-spacing:-.035em;text-wrap:balance}
.search{display:flex;gap:8px;padding:8px;border-radius:20px;background:var(--surface);border:1px solid var(--line);box-shadow:0 18px 40px -26px oklch(0.15 0.03 262 / .5)}
.search:focus-within{border-color:var(--focus)}
.search input{flex:1;min-width:0;border:0;background:none;outline:none;padding:0 12px;font-size:1.08rem;font-weight:500}
.search.big .btn{min-height:56px}
/* P248: the need field grows with the text (up to six lines) and carries up to three photos; the actions sit at its foot */
.search{align-items:flex-end;--sh:52px}
.search.big{--sh:56px}
.search .sbox{flex:1;min-width:0;display:grid;gap:8px;padding-inline:12px 4px}
.search textarea{display:block;width:100%;resize:none;border:0;background:none;outline:none;color:inherit;font:inherit;
  font-size:1.08rem;font-weight:500;line-height:1.45;min-height:var(--sh);padding-block:calc((var(--sh) - 1.45em) / 2);
  max-height:calc(1.45em * 6 + var(--sh) - 1.45em);overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.search textarea::placeholder{color:var(--muted);opacity:1}
.search .sacts{display:flex;gap:8px;align-items:center}
.search .cam{position:relative;flex:none;display:grid;place-items:center;width:var(--sh);height:var(--sh);border-radius:14px;
  border:1px solid var(--line);background:var(--bg);color:var(--ink);transition:border-color .15s var(--ease),transform .15s var(--ease)}
.search .cam .ic{width:24px;height:24px}
.search .cam:hover{border-color:var(--muted)}
.search .cam:active{transform:scale(.96)}
.search .cam:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.search .cam .cnt{position:absolute;top:-6px;inset-inline-end:-6px;min-width:20px;height:20px;padding:0 5px;border-radius:999px;
  background:var(--honey);color:var(--honey-ink);font-size:.75rem;font-weight:800;line-height:20px;text-align:center}
.search .cnt[hidden]{display:none}
.search .shots{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding-bottom:8px}
.search .shots[hidden]{display:none}
.search .shot{position:relative;width:64px;height:64px;border-radius:12px;overflow:hidden;outline:1px solid var(--img-edge);outline-offset:-1px;
  animation:rise .25s var(--ease)}
.search .shot img{width:100%;height:100%;object-fit:cover;display:block;background:var(--bg)}
.search .shot button{position:absolute;top:4px;inset-inline-end:4px;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;
  background:oklch(0.15 0.03 262 / .72);color:oklch(0.99 0 0)}
.search .shot button .ic{width:14px;height:14px}
.search .shot button:focus-visible{outline:2px solid var(--focus);outline-offset:1px}
.search .pnote{flex-basis:100%;color:var(--muted);font-size:.85rem;line-height:1.4}
@media (prefers-reduced-motion:reduce){ .search .shot{animation:none} .search .cam{transition:none} }
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{padding:8px 14px;border-radius:999px;background:var(--surface);border:1px solid var(--line);font-weight:600;font-size:.9rem;white-space:nowrap}
/* the memorable home moment: a slowly shuffling stack of finished-result posters */
.stack{position:relative;aspect-ratio:4/4.4;max-width:460px;width:100%;justify-self:center;isolation:isolate}
.sp{position:absolute;inset:0;border-radius:26px;overflow:hidden;background:var(--surface);box-shadow:0 24px 50px -28px oklch(0.12 0.03 262 / .6);
  transform:translate(calc(var(--k) * -18px),calc(var(--k) * -16px)) rotate(calc(var(--k) * -3deg)) scale(calc(1 - var(--k) * .05));
  z-index:calc(10 - var(--k));opacity:calc(1 - var(--k) * .18);transition:transform .6s var(--ease),opacity .6s var(--ease)}
.sp img{width:100%;height:100%;object-fit:cover;display:block}
.sp::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,oklch(0.14 0.03 262 / .85),oklch(0.14 0.03 262 / 0) 55%)}
.sp span{position:absolute;z-index:1;inset:auto 0 0;padding:22px;color:oklch(0.99 0.003 255);font-size:1.5rem;line-height:1.12;font-weight:900;letter-spacing:-.015em}
.sp.out{transform:translate(-40px,30px) rotate(-8deg) scale(.96);opacity:0}
.how{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;list-style:none;margin:8px auto 0;padding-block:28px;border-block:1px solid var(--line)}
.how li{display:flex;gap:14px;align-items:flex-start}
.how b{font-size:3rem;line-height:.8;font-weight:900;color:var(--num-ink);letter-spacing:-.04em;flex:none}
.how span{display:grid;gap:2px;color:var(--muted);font-weight:500}
.how strong{color:var(--ink);font-weight:800;font-size:1.05rem}
.lib{padding-block:40px 24px}
.band{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:24px;margin-block:12px 32px;padding:18px 18px 18px 28px;border-radius:24px;
  background:var(--ink);color:var(--bg);text-decoration:none;max-width:1200px}
.bt{display:grid;gap:2px} .bt b{font-size:1.4rem;font-weight:900} .bt span{opacity:.75;font-weight:500}
.bp{display:flex} .bp img{width:62px;height:96px;object-fit:cover;border-radius:12px;border:2px solid var(--ink);margin-inline-start:-14px;transform:rotate(calc(var(--r,0) * 1deg))}
.bp img:nth-child(1){--r:-6} .bp img:nth-child(3){--r:6}
.band .go{width:52px;height:52px;border-radius:50%;background:var(--honey);color:var(--honey-ink);display:grid;place-items:center}
.band .go .ic{width:22px;height:22px}
.foot{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-block:20px 40px;color:var(--muted);font-size:.88rem;font-weight:500}
.foot a{font-weight:700}

/* ---------- flows (match, question, waiting, saved): one centred column */
.flow{max-width:760px;display:flex;flex-direction:column;gap:18px;padding-block:clamp(24px,5vh,56px) 48px}
.flow h1{margin:0;font-size:clamp(2rem,4.2vw,3rem);line-height:1.05;font-weight:900;letter-spacing:-.025em;text-wrap:balance}
.row{display:flex;gap:10px;flex-wrap:wrap}
.found .poster{margin-top:4px}

/* question round */
.qs{display:grid;gap:22px}
.q{margin:0;padding:0;border:0;display:grid;gap:10px;min-width:0}
.q legend{display:flex;gap:8px;padding:0;margin-bottom:10px;font-size:1.25rem;font-weight:800;line-height:1.25}
.q legend b{color:var(--num-ink)}
.opts{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.opts .free{grid-column:1 / -1}
.opt{position:relative;display:flex;align-items:center;gap:12px;min-height:54px;padding:12px 16px;border-radius:16px;background:var(--surface);border:1px solid var(--line);
  font-weight:700;cursor:pointer;transition:border-color .15s var(--ease),background-color .15s var(--ease)}
.opt input{position:absolute;opacity:0;pointer-events:none}
.opt span{flex:1}
.opt .ic{width:20px;height:20px;color:var(--honey-ink);opacity:0;transition:opacity .15s var(--ease)}
.opt::before{content:"";width:20px;height:20px;border-radius:50%;border:2px solid var(--line);flex:none;transition:border-color .15s var(--ease),background-color .15s var(--ease)}
.opt:has(input:checked){border-color:var(--honey);background:color-mix(in srgb,var(--honey) 14%,var(--surface))}
.opt:has(input:checked)::before{border-color:var(--honey);background:var(--honey);box-shadow:inset 0 0 0 4px var(--surface)}
.opt:has(input:focus-visible){outline:3px solid var(--focus);outline-offset:2px}
.opt.other span{color:var(--muted)}
.free{min-height:52px;padding:0 16px;border-radius:14px;border:1px solid var(--focus);background:var(--surface);outline:none;font-weight:500}
.why summary{cursor:pointer;color:var(--muted);font-weight:700;font-size:.9rem;padding-block:4px;width:max-content}
.why p{margin:6px 0 0;color:var(--muted);max-width:60ch}
.q.nudge{animation:shake .35s var(--ease)}
.qgo{display:flex;gap:10px;flex-wrap:wrap;align-items:center}

/* waiting */
.phases{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.phases li{display:flex;align-items:center;gap:12px;font-weight:700;color:var(--muted);transition:color .2s var(--ease)}
.phases li small{font-weight:600}
.phases i{width:22px;height:22px;border-radius:50%;border:2px solid var(--line);flex:none;display:grid;place-items:center;transition:all .25s var(--ease)}
.phases li.on{color:var(--ink)} .phases li.on i{border-color:var(--honey);border-top-color:transparent;animation:spin .9s linear infinite}
.phases li.done{color:var(--ink)} .phases li.done i{border-color:var(--ok);background:var(--ok)}
.phases li.done i::after{content:"";width:9px;height:5px;border:solid var(--surface);border-width:0 0 2.5px 2.5px;rotate:-45deg;translate:0 -1px}
/* the memorable waiting moment: tiles get their step number, then their picture develops */
.build{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:10px}
.tile{position:relative;aspect-ratio:3/2;border-radius:14px;overflow:hidden;border:2px dashed var(--line);background:var(--surface)}
.tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;filter:blur(14px) saturate(.4);scale:1.08;transition:opacity .9s var(--ease),filter 1.2s var(--ease),scale 1.2s var(--ease)}
.tile b{position:absolute;inset-inline-start:8px;top:4px;font-size:2rem;line-height:1;font-weight:900;color:var(--num-ink);opacity:0;translate:0 8px;transition:opacity .3s var(--ease),translate .3s var(--ease)}
.build.writing .tile{border-style:solid}
.tile.num b{opacity:1;translate:0 0}
.tile.img img{opacity:1;filter:none;scale:1}
.tile.img b{color:oklch(0.99 0.003 255);text-shadow:0 1px 8px oklch(0.12 0.03 262 / .6)}
.hint{display:flex;gap:8px;align-items:flex-start;margin:0;color:var(--muted);font-weight:500;font-size:.92rem}
.hint .ic{width:18px;height:18px;margin-top:2px}
.ready{display:grid;gap:10px;justify-items:start;animation:rise .3s var(--ease)}
.demo{margin:0;padding:10px 14px;border-radius:12px;background:var(--surface);border:1px dashed var(--line);color:var(--muted);font-size:.9rem}
.mean{margin-top:18px;display:grid;gap:12px}
.mean h2{margin:0;font-size:1.1rem;font-weight:800}
.mean .pt b{font-size:1rem} .mean .pm{display:none}

/* saved */
.empty{display:grid;justify-items:center;gap:14px;text-align:center;padding:40px 20px;border-radius:24px;border:1px dashed var(--line)}
.empty > .ic{width:40px;height:40px;color:var(--honey-text)}
.empty p{margin:0;max-width:44ch;color:var(--muted)} .empty b{color:var(--ink);display:block}

/* ---------- discover: one guide per screen */
body[data-page="kesfet"]{overflow:hidden}
.feed{height:calc(100dvh - var(--bar-h) - env(safe-area-inset-top,0px));overflow-y:auto;scroll-snap-type:y mandatory;overscroll-behavior:contain;scrollbar-width:none}
.feed::-webkit-scrollbar{display:none}
.reel{position:relative;height:100%;scroll-snap-align:start;scroll-snap-stop:always;display:grid;place-items:center;overflow:hidden;isolation:isolate;padding:16px}
.reel .bg{position:absolute;inset:-40px;width:calc(100% + 80px);height:calc(100% + 80px);object-fit:cover;filter:blur(40px) saturate(1.3);opacity:var(--glow);z-index:-1}
.card{position:relative;height:100%;max-height:820px;aspect-ratio:9/16;max-width:100%;border-radius:28px;overflow:hidden;color:oklch(0.99 0.003 255);
  box-shadow:0 30px 60px -30px oklch(0.1 0.03 262 / .7)}
.card .ph{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.card::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,oklch(0.12 0.03 262 / .92) 0%,oklch(0.12 0.03 262 / .55) 34%,oklch(0.12 0.03 262 / 0) 60%)}
.rt{position:absolute;z-index:1;inset:auto 72px 0 0;padding:22px;display:grid;gap:8px;justify-items:start}
.cat{padding:4px 10px;border-radius:999px;background:oklch(1 0 0 / .18);font-weight:700;font-size:.78rem}
.rt h2{margin:0;font-size:1.65rem;line-height:1.1;font-weight:900;letter-spacing:-.015em;text-wrap:balance}
.rt p{margin:0;font-weight:600;opacity:.85}
.rm{display:flex;gap:12px;flex-wrap:wrap;font-weight:700;font-size:.88rem;margin-block:4px 8px}
.rm span{display:inline-flex;align-items:center;gap:5px} .rm .ic{width:16px;height:16px} .rm .st .ic{color:var(--honey)}
.rail2{position:absolute;z-index:1;right:12px;bottom:26px;display:grid;gap:16px}
.rail2 button{display:grid;justify-items:center;gap:4px;font-size:.72rem;font-weight:700;color:oklch(0.99 0.003 255)}
.rail2 button .ic{width:26px;height:26px;padding:11px;box-sizing:content-box;border-radius:50%;background:oklch(1 0 0 / .16)}
.rail2 button[aria-pressed="true"] .ic{background:var(--honey);color:var(--honey-ink);fill:currentColor}
.swipe{position:absolute;z-index:2;left:50%;translate:-50% 0;top:26px;display:grid;justify-items:center;color:oklch(0.99 0.003 255);pointer-events:none}
.swipe .ic{width:24px;height:24px;margin-block:-7px;animation:chev 1.5s var(--ease-in-out) infinite}
.swipe .ic + .ic{animation-delay:.16s}
.fnav{position:fixed;z-index:var(--z-sticky);right:max(24px,calc(50% - 360px));top:50%;translate:0 -50%;display:grid;gap:10px}
.fnav button{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:var(--surface);border:1px solid var(--line);box-shadow:0 10px 24px -14px oklch(0.12 0.03 262 / .5)}
.fnav .ic{width:22px;height:22px} .fnav [data-d="1"] .ic{rotate:180deg}
.swipe small{margin-top:10px;font-weight:700;font-size:.78rem;padding:3px 10px;border-radius:999px;background:oklch(0.12 0.03 262 / .5)}

/* ---------- owner panel (operate) */
.admin{display:grid;gap:20px;padding-block:28px 48px}
.ah{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;flex-wrap:wrap}
.ah h1{margin:0;font-size:2rem;font-weight:900;letter-spacing:-.02em} .ah p{margin:2px 0 0;color:var(--muted);font-weight:600}
.kpis{display:grid;grid-template-columns:1fr 1fr 1.6fr;gap:12px}
.kpi{display:grid;gap:4px;align-content:start;padding:16px 18px;border-radius:18px;background:var(--surface);border:1px solid var(--line)}
.kpi > span{display:flex;align-items:center;gap:7px;color:var(--muted);font-weight:700;font-size:.88rem} .kpi > span .ic{width:18px;height:18px}
.kpi b{font-size:2rem;font-weight:900;letter-spacing:-.02em;font-variant-numeric:tabular-nums} .kpi b em{font-style:normal;font-size:1rem;color:var(--muted);font-weight:700}
.kpi small{color:var(--muted);font-weight:500}
.bar{display:block;height:8px;border-radius:4px;background:var(--line);overflow:hidden;margin-block:4px}
.bar i{display:block;height:100%;width:var(--p);background:var(--honey);border-radius:4px}
.acols{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:16px;align-items:start}
.aside{display:grid;gap:16px}
.abox{padding:18px;border-radius:20px;background:var(--surface);border:1px solid var(--line);display:grid;gap:10px}
.abox h2{display:flex;align-items:center;gap:8px;margin:0;font-size:1.1rem;font-weight:800} .abox h2 .ic{width:20px;height:20px;color:var(--honey-text)}
.pill{min-width:24px;height:24px;padding-inline:7px;border-radius:12px;background:var(--danger);color:#fff;display:inline-grid;place-items:center;font-size:.8rem}
.abox .sub{margin:-4px 0 4px}
.rep,.mini{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.rep li{display:grid;grid-template-columns:72px minmax(0,1fr);gap:8px 12px;padding:12px;border-radius:16px;border:1px solid var(--line);background:var(--bg);
  transition:opacity .28s var(--ease),transform .28s var(--ease)}
.rep img{width:72px;height:54px;object-fit:cover;border-radius:10px;grid-row:span 2}
.rb{display:grid;gap:2px;min-width:0} .rb b{font-weight:800}
.rr{color:var(--danger);font-weight:700;font-size:.86rem} .rn{color:var(--muted);font-size:.88rem}
.ra{display:flex;gap:6px;flex-wrap:wrap}
.ra button{display:inline-flex;align-items:center;gap:6px;min-height:38px;padding:0 12px;border-radius:10px;border:1px solid var(--line);background:var(--surface);font-weight:700;font-size:.86rem}
.ra .ic{width:16px;height:16px}
.ra [data-act="del"]{color:var(--danger)}
.gone{opacity:0;transform:translateX(16px)}
.done{display:flex;gap:8px;align-items:center;margin:0;color:var(--ok);font-weight:700} .done .ic{width:18px;height:18px}
.mini li{display:flex;align-items:center;gap:12px;transition:opacity .28s var(--ease),transform .28s var(--ease)}
.mini img{width:56px;height:42px;border-radius:8px;object-fit:cover}
.mini span{display:grid;flex:1;min-width:0;line-height:1.3} .mini b{font-weight:700;font-size:.92rem} .mini small{color:var(--muted)}
.spin{width:18px;height:18px;border-radius:50%;border:2px solid var(--honey);border-top-color:transparent;animation:spin .9s linear infinite;flex:none}
.mini .ok{min-height:36px;padding:0 12px;border-radius:10px;background:var(--honey);color:var(--honey-ink);font-weight:800;font-size:.86rem}

.toast{position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 20px);transform:translate(-50%,8px);background:var(--ink);color:var(--bg);
  padding:10px 18px;border-radius:999px;font-weight:600;z-index:var(--z-toast);opacity:0;pointer-events:none;max-width:calc(100vw - 32px);text-align:center;
  transition:opacity .2s var(--ease),transform .2s var(--ease)}
.toast.on{opacity:1;transform:translate(-50%,0)}

@keyframes spin{to{rotate:360deg}}
@keyframes rise{from{opacity:0;transform:translateY(10px)}}
@keyframes pop-in{from{opacity:0;transform:translateY(-6px) scale(.97)}}
@keyframes shake{25%{translate:-6px 0}50%{translate:5px 0}75%{translate:-3px 0}}
@keyframes chev{0%{opacity:.2;transform:translateY(5px)}45%{opacity:1}100%{opacity:.2;transform:translateY(-5px)}}

@media (hover:hover) and (pointer:fine){
  .poster:hover img{transform:scale(1.04)}
  .chip:hover,.ghost:hover,.opt:hover,.ra button:hover{border-color:var(--muted)}
  .btn:hover{background:color-mix(in oklch,var(--honey) 88%,white)}
  .tabs a:not([aria-current]):hover{color:var(--ink)}
  .band:hover .go{transform:translateX(4px)}
}

@media (max-width:1000px){
  .tabs a span,.brand small{display:none} .tabs a{padding:10px}
  .hero{grid-template-columns:1fr} .stack{display:none}
  .grid,.grid.three{grid-template-columns:repeat(2,minmax(0,1fr))}
  .acols{grid-template-columns:1fr}
}

/* phones: bottom tab bar (Sor · Keşfet · Kaydettiklerim), single columns, sticky primary actions */
@media (max-width:760px){
  body{padding-bottom:calc(var(--tab-h) + env(safe-area-inset-bottom,0px))}
  /* no backdrop-filter here: it would make the fixed tab bar position inside the top bar */
  .topbar{backdrop-filter:none;background:var(--bg)}
  .topbar-in{padding-inline:12px;gap:8px}
  .brand small,.brand b{display:none}
  .ask{max-width:none;height:44px}
  .tabs{position:fixed;left:0;right:0;bottom:0;z-index:var(--z-sticky);margin:0;height:calc(var(--tab-h) + env(safe-area-inset-bottom,0px));padding:6px 8px env(safe-area-inset-bottom,0px);
    background:color-mix(in srgb,var(--bg) 94%,transparent);backdrop-filter:blur(10px);border-top:1px solid var(--line);justify-content:space-around}
  .tabs a{flex:1;flex-direction:column;gap:3px;padding:6px 4px;font-size:.72rem;border-radius:14px;justify-content:center}
  .tabs a .ic{width:22px;height:22px}
  .tabs a span{display:inline}
  .tabs a[data-tab="home"]{display:flex}
  .tabs a[aria-current="page"]{background:none;box-shadow:none;color:var(--honey-text)}
  .lbtn{height:44px;padding-inline:8px} .lbtn .code{display:none}
  .seg button{width:38px;height:36px}
  .hero{grid-template-columns:1fr;padding-block:28px 12px;gap:20px}
  .hero h1{font-size:2.5rem}
  .stack{display:none}
  .search{flex-direction:column;padding:6px;border-radius:18px}
  .search input{min-height:52px;font-size:1.05rem}
  .search .btn{width:100%}
  .search{align-items:stretch}
  .search .sbox{padding-inline:10px}
  .search .sacts .btn{flex:1;width:auto}
  .chips{flex-wrap:nowrap;overflow-x:auto;margin-inline:-12px;padding-inline:12px;scrollbar-width:none}
  .chips::-webkit-scrollbar{display:none}
  .hero,.how,.lib,.band,.foot,.flow,.admin{padding-inline:16px}
  .how{grid-template-columns:1fr;gap:14px;padding-block:20px}
  .how b{font-size:2.4rem;width:1.1em}
  .grid,.grid.three{grid-template-columns:1fr 1fr;gap:10px}
  .poster{border-radius:18px;aspect-ratio:3/4}
  .pt{padding:12px} .pt b{font-size:.98rem} .pt small{display:none} .pm span:not(.st){display:none}
  .poster.wide{aspect-ratio:4/3} .poster.wide .pt small{display:block} .poster.wide .pm span{display:inline-flex}
  .band{grid-template-columns:minmax(0,1fr) auto;margin-inline:16px;padding:16px 16px 16px 20px}
  .band .bp{display:none}
  .flow{padding-block:20px 28px}
  .row .btn,.row .ghost{width:100%}
  .qgo{position:sticky;bottom:calc(var(--tab-h) + env(safe-area-inset-bottom,0px));padding-block:12px;background:linear-gradient(to bottom,transparent,var(--bg) 14px)}
  .qgo .btn{flex:1}
  .opts{grid-template-columns:1fr}
  .build{gap:6px} .tile b{font-size:1.4rem}
  .mean .grid{grid-template-columns:repeat(3,minmax(0,1fr))} .mean .pt{padding:8px} .mean .pt b{font-size:.8rem}
  .feed{height:calc(100dvh - var(--bar-h) - var(--tab-h) - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px))}
  .reel{padding:0}
  .fnav{display:none}
  .card{aspect-ratio:auto;width:100%;border-radius:0;max-height:none}
  .kpis{grid-template-columns:1fr 1fr} .kpi.spend{grid-column:1 / -1}
  .rep li{grid-template-columns:56px minmax(0,1fr)} .rep img{width:56px;height:44px} .ra{grid-column:1 / -1}
}
/* ===== P213 ===== */
:root[lang="ar"] body{font-family:"IBM Plex Sans Arabic","Onest",system-ui,sans-serif}
:root[lang="zh"] body{font-family:"Noto Sans SC","Onest","PingFang SC",sans-serif}
:root[lang="ar"] h1,:root[lang="ar"] h2,:root[lang="zh"] h1,:root[lang="zh"] h2{letter-spacing:0}
[dir="rtl"] .btn > .ic,[dir="rtl"] .sub > .ic,[dir="rtl"] .mapp a > .ic,[dir="rtl"] .band .go .ic{scale:-1 1}
.foot nav{display:flex;flex-wrap:wrap;gap:6px 18px}


/* ---------- home B: centred question + two poster rivers */
.hb{max-width:880px;margin:0 auto;padding:clamp(40px,9vh,96px) 20px 28px;display:grid;justify-items:center;gap:20px;text-align:center}
.hb h1{margin:0;font-size:clamp(2.8rem,6.6vw,5.4rem);line-height:.96;font-weight:900;letter-spacing:-.04em;text-wrap:balance}
.hb .lede{margin-inline:auto}
.hb .search{width:100%;text-align:start}
.hb .chips{justify-content:center}
.marq{display:grid;gap:14px;padding-block:18px 8px;overflow:hidden;mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent)}
.mrow{overflow:hidden}
.mtrack{display:flex;gap:14px;width:max-content;animation:river 60s linear infinite}
.mrow.rev .mtrack{animation-direction:reverse;animation-duration:72s}
.marq:hover .mtrack{animation-play-state:paused}
.mc{position:relative;flex:none;width:250px;aspect-ratio:4/3;border-radius:18px;overflow:hidden;color:oklch(0.99 0.003 255);text-decoration:none}
.mc img{width:100%;height:100%;object-fit:cover;display:block}
.mc::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,oklch(0.14 0.03 262 / .85),oklch(0.14 0.03 262 / 0) 60%)}
.mc span{position:absolute;z-index:1;inset:auto 0 0;padding:12px 14px;font-weight:800;line-height:1.2;font-size:.95rem}
@keyframes river{to{transform:translateX(calc(-50% - 7px))}}
[dir="rtl"] .mtrack{animation-name:river-rtl}
@keyframes river-rtl{to{transform:translateX(calc(50% + 7px))}}
.filt{display:flex;flex-wrap:wrap;gap:6px}
.filt button{padding:7px 14px;border-radius:999px;border:1px solid var(--line);background:var(--surface);font-weight:700;font-size:.88rem}
.filt button[aria-pressed="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}

/* ---------- home C: immersive guide of the day, question docked under it, rails */
.hc{max-width:1240px;margin:0 auto;padding:20px 20px 0;position:relative}
.feat{position:relative;display:block;height:min(68vh,620px);min-height:380px;border-radius:30px;overflow:hidden;color:oklch(0.99 0.003 255);text-decoration:none;isolation:isolate}
.feat > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-1}
.feat::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(to top,oklch(0.12 0.03 262 / .92) 0%,oklch(0.12 0.03 262 / .55) 40%,oklch(0.12 0.03 262 / 0) 70%)}
.feat .tag{position:absolute;top:18px;inset-inline-start:18px;display:flex;align-items:center;gap:6px;padding-block:7px;padding-inline:10px 14px;border-radius:999px;
  background:oklch(0.12 0.03 262 / .7);font-weight:700;font-size:.88rem}
.feat .tag .ic{width:16px;height:16px;color:var(--honey)}
.ft{position:absolute;inset:auto 0 0;padding:28px 28px 92px;display:grid;justify-items:start;gap:8px;max-width:820px}
.ft b{font-size:clamp(1.8rem,3.6vw,3rem);line-height:1.05;font-weight:900;letter-spacing:-.025em;text-wrap:balance}
.ft small{font-size:1rem;font-weight:600;opacity:.85}
.ft .btn{margin-top:6px;min-height:46px}
.dockc{position:relative;z-index:1;margin:-64px auto 0;width:min(100% - 40px,760px);padding:20px;border-radius:24px;background:var(--surface);border:1px solid var(--line);
  box-shadow:0 26px 50px -30px oklch(0.12 0.03 262 / .6);display:grid;gap:14px}
.dockc h1{margin:0;font-size:1.5rem;font-weight:900;letter-spacing:-.015em}
.dockc .search{box-shadow:none;background:var(--bg)}
.rail{max-width:1240px;margin:0 auto;padding:36px 20px 0}
.rl{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(280px,1fr);gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:6px;scrollbar-width:thin;
  overscroll-behavior-x:contain}
.rl .poster{scroll-snap-align:start}
.rail .sh h2{display:flex;align-items:center;gap:8px} .rail .sh h2 .ic{width:22px;height:22px;color:var(--ok)}
.rail .sub{text-decoration:none}

/* ---------- waiting B: stepper, one stage, counter */
.wb{max-width:860px}
.stepper{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);position:relative}
.stepper::before,.stepper::after{content:"";position:absolute;top:21px;height:3px;border-radius:2px;inset-inline-start:16.6%;width:66.8%;background:var(--line)}
.stepper::after{background:var(--honey);width:calc(66.8% * var(--fill));transition:width .6s var(--ease)}
.stepper li{position:relative;z-index:1;display:grid;justify-items:center;gap:6px;font-weight:700;color:var(--muted);font-size:.9rem}
.stepper i{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--surface);border:2px solid var(--line);transition:all .3s var(--ease)}
.stepper i .ic{width:20px;height:20px}
.stepper li.on{color:var(--ink)} .stepper li.on i{border-color:var(--honey);box-shadow:0 0 0 6px color-mix(in srgb,var(--honey) 22%,transparent)}
.stepper li.done{color:var(--ink)} .stepper li.done i{background:var(--honey);border-color:var(--honey);color:var(--honey-ink)}
.theater{position:relative;aspect-ratio:16/10;width:min(100%,calc(56vh * 1.6));align-self:center;border-radius:26px;overflow:hidden;background:var(--surface);border:1px solid var(--line)}
.srcfly{position:absolute;inset:0;display:flex;flex-wrap:wrap;align-content:center;justify-content:center;gap:10px;padding:24px;transition:opacity .4s var(--ease)}
.srcfly span{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:999px;background:var(--bg);border:1px solid var(--line);font-weight:700;
  opacity:0;transform:translateY(14px) scale(.96);transition:opacity .45s var(--ease),transform .45s var(--ease)}
.srcfly span.in{opacity:1;transform:none}
.srcfly .ic{width:18px;height:18px;color:var(--honey-text)}
.theater:not(.src) .srcfly{opacity:0;pointer-events:none}
.slide{position:absolute;inset:0;margin:0;opacity:0;transition:opacity .5s var(--ease)}
.slide.on{opacity:1}
.slide img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;filter:blur(18px) saturate(.4);scale:1.06;transition:opacity 1s var(--ease),filter 1.3s var(--ease),scale 1.3s var(--ease)}
.slide.img img{opacity:1;filter:none;scale:1}
.slide::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,oklch(0.12 0.03 262 / .75),oklch(0.12 0.03 262 / 0) 50%);opacity:0;transition:opacity .6s}
.slide.img::after{opacity:1}
.slide b{position:absolute;inset-inline-start:24px;top:12px;font-size:clamp(4rem,10vw,7rem);line-height:1;font-weight:900;color:var(--num-ink);letter-spacing:-.04em;
  opacity:0;translate:0 20px;transition:opacity .4s var(--ease),translate .4s var(--ease),color .4s}
.slide.num b{opacity:1;translate:0 0}
.slide.img b{color:oklch(0.99 0.003 255);text-shadow:0 2px 16px oklch(0.1 0.03 262 / .5)}
.slide figcaption{position:absolute;inset:auto 0 0;padding:20px 24px;font-size:clamp(1.1rem,2.2vw,1.6rem);font-weight:800;color:var(--ink);opacity:0;transition:opacity .4s .15s}
.slide.num figcaption{opacity:1} .slide.img figcaption{color:oklch(0.99 0.003 255)}
.meter{display:grid;gap:8px}
.meter h1{font-size:clamp(1.6rem,3vw,2.2rem)}
.meter p{margin:0;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-weight:700}
.meter p span{color:var(--muted);font-weight:600}
.meter .bar,.pcard2 .bar{display:block;height:6px;border-radius:3px;background:var(--line);overflow:hidden}
.meter .bar i,.pcard2 .bar i{display:block;height:100%;width:0;background:var(--honey);border-radius:3px;transition:width .3s linear}

/* ---------- waiting C: live log + developing result */
.wc{max-width:1240px;margin:0 auto;padding:clamp(24px,5vh,48px) 20px 48px;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(24px,4vw,56px);align-items:start}
.logcol{display:flex;flex-direction:column;gap:14px;min-width:0}
.logcol h1{margin:0;font-size:clamp(2rem,4vw,2.8rem);line-height:1.05;font-weight:900;letter-spacing:-.025em}
.lh2{display:flex;align-items:center;gap:8px;margin:0;color:var(--muted);font-weight:700;font-size:.9rem}
.dot{width:9px;height:9px;border-radius:50%;background:var(--ok)}
.logl{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.logl li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:10px;align-items:start;animation:rise .35s var(--ease) both}
.logl time{font-size:.78rem;font-weight:700;color:var(--muted);font-variant-numeric:tabular-nums;padding-top:12px;direction:ltr}
.logl li > div{padding:10px 14px;border-radius:14px;background:var(--surface);border:1px solid var(--line);display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;line-height:1.4}
.logl li.ok > div{border-color:color-mix(in srgb,var(--ok) 35%,var(--line))}
.logl li.warn > div{background:color-mix(in srgb,var(--honey) 14%,var(--surface));border-color:color-mix(in srgb,var(--honey) 45%,var(--line))}
.logl .srcs{display:flex;flex-wrap:wrap;gap:6px;width:100%}
.logl .srcs span{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:999px;background:var(--bg);font-size:.82rem;font-weight:700}
.logl .srcs .ic{width:14px;height:14px;color:var(--honey-text)}
.logl .sn{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:var(--honey);color:var(--honey-ink);font-weight:900;font-size:.82rem}
.logl small{color:var(--muted);font-weight:600}
.logl .th{position:relative;width:96px;height:64px;border-radius:10px;overflow:hidden;flex:none;background:var(--bg)}
.logl .th img{width:100%;height:100%;object-fit:cover;animation:develop 1.1s var(--ease) both}
.logl .th b{position:absolute;inset-inline-start:6px;top:2px;color:#fff;font-weight:900;text-shadow:0 1px 6px #0008}
.logl .pl{font-weight:700}
.prev{position:sticky;top:calc(var(--bar-h) + 20px);display:grid;gap:14px}
.pcard2{position:relative;aspect-ratio:4/3.4;border-radius:24px;overflow:hidden;background:var(--surface);display:grid}
.pcard2 img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:blur(calc((1 - var(--dev)) * 22px)) saturate(calc(.3 + var(--dev) * .7));
  scale:calc(1.1 - var(--dev) * .1);transition:filter .6s var(--ease),scale .6s var(--ease)}
.pcard2 .tag{position:absolute;top:14px;inset-inline-start:14px;display:flex;align-items:center;gap:6px;padding-block:6px;padding-inline:8px 12px;border-radius:999px;
  background:oklch(0.14 0.03 262 / .72);color:oklch(0.98 0.005 255);font-weight:700;font-size:.85rem}
.pcard2 .tag .ic{width:16px;height:16px;color:var(--honey)}
.pcard2 .bar{position:absolute;inset:auto 16px 16px;height:6px}
.prev .mean{margin-top:0} .prev .mean .grid{grid-template-columns:repeat(3,minmax(0,1fr))} .prev .mean .pt{padding:8px} .prev .mean .pt b{font-size:.78rem} .prev .mean .pt small{display:none}
@keyframes develop{from{filter:blur(12px) saturate(.3);opacity:.2}}
@keyframes beat{70%{box-shadow:0 0 0 8px transparent}100%{box-shadow:0 0 0 0 transparent}}

/* ---------- status screens */
.state h1{max-width:22ch}
.skick{display:inline-flex;align-items:center;gap:7px;align-self:flex-start;padding-block:6px;padding-inline:10px 14px;border-radius:999px;font-weight:800;font-size:.86rem}
.skick .ic{width:18px;height:18px}
.skick.lim{background:color-mix(in srgb,var(--honey) 18%,var(--surface));color:var(--honey-text)}
.skick.none,.skick.cap,.skick.err{background:var(--surface);border:1px solid var(--line);color:var(--muted)}
.skick.scope{background:color-mix(in srgb,var(--danger) 14%,var(--surface));color:var(--danger)}
.why2{display:flex;gap:12px;margin:0;padding:16px 18px;border-radius:18px;background:var(--surface);border:1px solid var(--line);line-height:1.6}
.why2 .ic{width:20px;height:20px;color:var(--honey-text);margin-top:3px}
.covers h2,.mean h2{margin:0 0 10px;font-size:1.1rem;font-weight:800}
.covers ol,.nowl{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.covers li,.nowl li{display:flex;align-items:center;gap:12px;font-weight:700}
.covers b,.nowl b{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;flex:none;background:var(--surface);border:1px solid var(--line);color:var(--num-ink);font-weight:900}
.nowl li{align-items:flex-start;font-weight:600;line-height:1.5} .nowl b{color:var(--danger)}
.caution2{display:flex;gap:10px;margin:0;padding:12px 16px;border-radius:14px;background:color-mix(in srgb,var(--honey) 14%,var(--surface));border:1px solid color-mix(in srgb,var(--honey) 40%,var(--line));font-weight:600}
.caution2 .ic{width:20px;height:20px;color:var(--honey-text);margin-top:2px}
.srcl{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0;color:var(--muted);font-weight:700;font-size:.86rem}
.srcl .ic{width:16px;height:16px} .srcl span{padding:3px 10px;border-radius:999px;background:var(--surface);border:1px solid var(--line)}
.ghost .ic{width:18px;height:18px;margin-inline-end:6px}
.tips{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.tips li{display:flex;gap:10px;align-items:center;font-weight:600} .tips .ic{width:18px;height:18px;color:var(--ok)}
.soonchip{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;margin:0;padding:8px 14px;border-radius:999px;border:1px dashed var(--line);color:var(--muted);font-weight:700;font-size:.88rem}
.soonchip .ic{width:18px;height:18px}
.btn.danger{background:var(--danger);color:#fff}
.btn.busy{opacity:.7;pointer-events:none} .btn.busy .ic{animation:spin .8s linear infinite}
.queue{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:18px;background:var(--surface);border:1px solid var(--line)}
.queue .qi{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:color-mix(in srgb,var(--honey) 18%,var(--surface));color:var(--honey-text);flex:none}
.queue .qi .ic{width:22px;height:22px}
.queue div{display:grid;flex:1;min-width:0} .queue small{color:var(--muted);font-weight:700} .queue b{font-weight:800}
.queue .qb .ic{width:22px;height:22px;color:var(--honey-text);fill:currentColor}
.big404{margin:0;font-size:clamp(5rem,16vw,9rem);line-height:.9;font-weight:900;color:var(--num-ink);letter-spacing:-.05em}

/* ---------- about, privacy, map */
.prose h2{margin:12px 0 0;font-size:1.3rem;font-weight:900}
.prose p{margin:0;max-width:64ch;line-height:1.65}
.ab{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.ab li{display:flex;gap:14px;align-items:flex-start}
.ab b{font-size:2.6rem;line-height:.85;font-weight:900;color:var(--num-ink);width:1.1em;flex:none}
.ab span{display:grid;gap:2px;color:var(--muted);line-height:1.55} .ab strong{color:var(--ink);font-size:1.05rem}
.draft{display:flex;align-items:center;gap:8px;padding:10px 14px;border-radius:12px;border:1px dashed var(--line);color:var(--muted);font-weight:700}
.draft .ic{width:18px;height:18px}
.pv{margin:0;display:grid;gap:10px}
.pv div{padding:14px 16px;border-radius:16px;background:var(--surface);border:1px solid var(--line)}
.pv dt{font-weight:800;margin-bottom:4px} .pv dd{margin:0;color:var(--muted);line-height:1.6}
.mapp h2{margin:8px 0 8px;font-size:1.1rem;font-weight:800}
.mapp ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:8px}
.mapp a{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 14px;border-radius:14px;background:var(--surface);border:1px solid var(--line);font-weight:700;text-decoration:none}
.mapp a .ic{width:18px;height:18px;color:var(--muted)}

@media (hover:hover) and (pointer:fine){.mapp a:hover,.filt button:not([aria-pressed="true"]):hover{border-color:var(--muted)} .mc:hover img{transform:scale(1.04)} .mc img{transition:transform .5s var(--ease)}}
@media (max-width:1000px){
  .wc{grid-template-columns:1fr} .prev{position:static;order:-1} .prev .pcard2{aspect-ratio:16/9}
}
@media (max-width:760px){
  .hb{padding-top:32px;gap:16px} .hb h1{font-size:2.6rem}
  .mc{width:180px}
  .filt{width:100%;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .hc{padding:0}
  .feat{height:calc(100dvh - var(--bar-h) - var(--tab-h) - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));min-height:520px;border-radius:0}
  .ft{padding:20px 20px 236px}
  .ft b{font-size:1.9rem}
  .dockc{position:absolute;inset:auto 12px 12px;margin:0;width:auto;padding:14px;gap:10px;border-radius:22px}
  .dockc h1{font-size:1.15rem}
  .dockc .search{flex-direction:row;padding:5px}
  .dockc .search input{min-height:48px;font-size:1rem}
  .dockc .search .btn{width:auto;min-height:48px;padding:0 14px}
  .dockc .search .btn span{display:none}
  .rail{padding:28px 16px 0} .rl{grid-auto-columns:72%;margin-inline:-16px;padding-inline:16px;scroll-padding-inline:16px}
  .stepper span{font-size:.8rem}
  .theater{aspect-ratio:4/3.4;border-radius:22px}
  .wc{padding:20px 16px 40px;gap:18px}
  .logl li{grid-template-columns:34px minmax(0,1fr);gap:8px} .logl .th{width:72px;height:48px}
  .logl li > div{padding:8px 12px;font-size:.92rem} .logl time{font-size:.72rem;padding-top:9px}
  .logl .sn{width:22px;height:22px;font-size:.74rem}
  .prev .mean{display:none}
}
@media (prefers-reduced-motion:reduce){.mtrack{animation:none} .marq .mrow{overflow-x:auto}}
/* ===== P214 ===== */
/* account button in the top bar */
.acct{display:flex;align-items:center;gap:7px;height:40px;padding-inline:10px 14px;border-radius:999px;background:var(--surface);border:1px solid var(--line);font-weight:700;font-size:.88rem}
.acct .ic{width:18px;height:18px}
.acct.in{padding:3px;border-color:transparent;background:none}
.av{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--honey);color:var(--honey-ink);font-weight:900;font-size:1.1rem;flex:none}
.av.sm{width:34px;height:34px;font-size:.9rem}

/* questions one at a time */
.qhead{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.qof{font-size:clamp(1.8rem,3.8vw,2.6rem);font-weight:900;letter-spacing:-.02em;line-height:1.05}
.qdots{display:flex;gap:6px}
.qdots i{width:28px;height:6px;border-radius:3px;background:var(--line);transition:background-color .25s var(--ease)}
.qdots i.on{background:var(--honey)}
.qstage .q legend{font-size:clamp(1.25rem,2.4vw,1.6rem)}
.qgo .textbtn{margin-inline-start:auto}

/* waiting B: fact cards in the middle (front: common belief, back: the correct version) */
.facts2{display:grid;gap:12px}
.facts2 h2{display:flex;align-items:center;gap:8px;margin:0;font-size:1.05rem;font-weight:800;color:var(--muted)}
.facts2 h2 .ic{width:20px;height:20px;color:var(--honey-text)}
.deck{position:relative;height:clamp(230px,34vh,300px)}
.fcard{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;gap:16px;padding:26px 30px;border-radius:26px;
  background:var(--surface);border:1px solid var(--line);box-shadow:0 20px 44px -28px oklch(0.12 0.03 262 / .5);
  opacity:0;transform:translateX(36px);transition:opacity .4s var(--ease),transform .55s var(--ease)}
[dir="rtl"] .fcard{transform:translateX(-36px)}
.fcard.in{opacity:1;transform:none}
.fcard.leave{opacity:0;transform:translateX(-36px) scale(.97)}
[dir="rtl"] .fcard.leave{transform:translateX(36px) scale(.97)}
.fcard p{margin:0;display:grid;gap:6px}
.fcard p.myth{display:block}
.fcard .myth small{display:flex;margin-bottom:6px}
.fcard small{display:inline-flex;align-items:center;gap:7px;font-weight:800;font-size:.85rem}
.fcard small .ic{width:17px;height:17px}
.myth small{color:var(--muted)}
.myth s{text-decoration:none;font-size:1.02rem;font-weight:600;color:var(--muted);line-height:1.5;
  background:linear-gradient(var(--danger),var(--danger)) no-repeat 0 58% / 0 2px;-webkit-box-decoration-break:clone;box-decoration-break:clone;
  transition:background-size .6s var(--ease)}
[dir="rtl"] .myth s{background-position:100% 58%}
.struck .myth s{background-size:100% 2px}
.truth{opacity:0;transform:translateY(10px);transition:opacity .45s var(--ease),transform .45s var(--ease)}
.told .truth{opacity:1;transform:none}
.truth small{color:var(--ok)}
.truth b{font-size:clamp(1.25rem,2.4vw,1.7rem);line-height:1.3;font-weight:800;letter-spacing:-.01em;text-wrap:pretty}
.fctl{display:flex;align-items:center;justify-content:space-between;gap:12px}
.fdots{display:flex;gap:6px} .fdots i{width:8px;height:8px;border-radius:50%;background:var(--line);transition:all .25s var(--ease)} .fdots i.on{width:22px;border-radius:4px;background:var(--honey)}
.fctl .textbtn{display:inline-flex;align-items:center;gap:6px;text-decoration:none} .fctl .textbtn .ic{width:16px;height:16px}
[dir="rtl"] .fctl .textbtn .ic{scale:-1 1}
.fnote{margin:0;font-size:.78rem;color:var(--muted)}
.mini-build{display:flex;align-items:center;gap:8px}
.mini-build > span{font-weight:700;font-size:.88rem;color:var(--muted);margin-inline-end:4px}
.mini-build .tile{width:76px;flex:none;border-radius:10px}
.mini-build .tile b{font-size:1.2rem;top:2px;inset-inline-start:6px}

/* sheets (sign in, save to list) */
dialog.sheet2{width:min(460px,calc(100vw - 32px));max-width:none;max-height:min(86vh,680px);margin:auto;padding:0;border:1px solid var(--line);border-radius:24px;background:var(--surface);color:var(--ink);
  box-shadow:0 30px 60px -24px oklch(0.1 0.03 262 / .55);overflow:hidden;animation:pop-in .22s var(--ease)}
dialog.sheet2::backdrop{background:oklch(0.12 0.03 262 / .55)}
.sb{position:relative;display:grid;grid-template-columns:minmax(0,1fr);gap:14px;padding:22px;max-height:inherit;overflow-y:auto}
.sb .x{position:absolute;top:12px;inset-inline-end:12px;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:var(--bg)}
.sb .x .ic{width:18px;height:18px}
.sb h2{margin:0;padding-inline-end:40px;font-size:1.3rem;font-weight:900;letter-spacing:-.01em}
.sg{margin:-6px 0 0;color:var(--muted);font-weight:600}
.sic{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:color-mix(in srgb,var(--honey) 18%,var(--surface));color:var(--honey-text)}
.sic .ic{width:24px;height:24px}
.prov{display:grid;gap:8px}
.prov button{display:flex;align-items:center;justify-content:center;gap:10px;min-height:50px;border-radius:14px;border:1px solid var(--line);background:var(--bg);font-weight:800}
.prov .ic{width:20px;height:20px}
.em{display:grid;gap:8px}
.em input,.nl input{min-height:50px;padding:0 14px;border-radius:14px;border:1px solid var(--line);background:var(--bg);outline:none;font-weight:500}
.em input:focus,.nl input:focus{border-color:var(--focus)}
.fineprint{margin:0;color:var(--muted);font-size:.8rem}
.pick{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.pick label{display:flex;align-items:center;gap:12px;padding:8px;border-radius:14px;border:1px solid var(--line);background:var(--bg);cursor:pointer;position:relative}
.pick label:has(input:checked){border-color:var(--honey);background:color-mix(in srgb,var(--honey) 12%,var(--bg))}
.pick input{position:absolute;opacity:0;pointer-events:none}
.pick label:has(input:focus-visible){outline:3px solid var(--focus);outline-offset:2px}
.pick span:not(.col){display:grid;flex:1;min-width:0} .pick small{color:var(--muted);font-weight:600}
.pick .tick{width:26px;height:26px;border-radius:50%;border:2px solid var(--line);display:grid;place-items:center;color:transparent;flex:none}
.pick .tick .ic{width:14px;height:14px}
.pick label:has(input:checked) .tick{background:var(--honey);border-color:var(--honey);color:var(--honey-ink)}
.nl{display:flex;gap:8px} .nl input{flex:1;min-width:0}
.btn.wide{width:100%}
.nudge2{display:flex;align-items:center;gap:10px;margin:0;padding:10px 14px;border-radius:14px;background:color-mix(in srgb,var(--honey) 12%,var(--surface));border:1px solid color-mix(in srgb,var(--honey) 35%,var(--line));font-size:.9rem;font-weight:600}
.nudge2 > .ic{width:18px;height:18px;color:var(--honey-text)} .nudge2 span{flex:1}
.nudge2 button{font-weight:800;color:var(--honey-text);white-space:nowrap}

/* lists */
.col{display:grid;width:72px;height:72px;border-radius:14px;overflow:hidden;background:var(--bg);flex:none;gap:2px}
.col.n2,.col.n3,.col.n4{grid-template-columns:1fr 1fr} .col.n3 img:first-child{grid-row:span 2}
.col img{width:100%;height:100%;object-fit:cover;display:block;min-height:0}
.col i{display:grid;place-items:center;color:var(--honey-text)} .col i .ic{width:24px;height:24px}
.pick .col{width:52px;height:52px;border-radius:10px}
.lh3{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.lgrid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}
.lgrid a{display:flex;align-items:center;gap:14px;padding:10px;border-radius:18px;background:var(--surface);border:1px solid var(--line);text-decoration:none}
.lgrid .col{width:88px;height:88px}
.lt{display:grid;gap:2px;min-width:0} .lt b{font-weight:800;font-size:1.05rem} .lt small{color:var(--muted);font-weight:600}
.lgrid.small .col{width:64px;height:64px}
.backl{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;font-weight:700;color:var(--muted);text-decoration:none}
.backl .ic{width:16px;height:16px;scale:-1 1} [dir="rtl"] .backl .ic{scale:1 1}
#lName[contenteditable="true"]{outline:2px dashed var(--focus);outline-offset:4px;border-radius:6px}
.pw{position:relative}
.pw .rm{position:absolute;z-index:2;top:10px;inset-inline-end:10px;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:oklch(0.12 0.03 262 / .7);color:#fff}
.pw .rm .ic{width:16px;height:16px}
.dangerT{color:var(--danger)}
.prof{display:flex;align-items:center;gap:14px;padding:16px;border-radius:20px;background:var(--surface);border:1px solid var(--line)}
.prof .av{width:56px;height:56px;font-size:1.4rem} .prof span:not(.av){display:grid} .prof b{font-size:1.2rem;font-weight:900} .prof small{color:var(--muted);font-weight:600}
.accp h2{margin:8px 0 10px;font-size:1.1rem;font-weight:800}
.hist{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.hist button{display:flex;align-items:center;gap:10px;width:100%;text-align:start;padding:10px 14px;border-radius:14px;background:var(--surface);border:1px solid var(--line);font-weight:600}
.hist .ic{width:16px;height:16px;color:var(--muted)} .hist bdi{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .hist small{color:var(--muted)}

@media (hover:hover) and (pointer:fine){.lgrid a:hover,.hist button:hover,.prov button:hover,.pick label:hover{border-color:var(--muted)} .acct:hover{border-color:var(--muted)}}
/* small phones: the bottom “Ask” tab replaces the top search field, so the bar keeps room for language, account and theme */
@media (max-width:520px){.topbar .ask{display:none}}
@media (max-width:1000px){.acct span{display:none} .acct{padding:0;width:40px;justify-content:center}}
/* phones: home B keeps the centred question but drops the moving strips; chips and filters wrap instead of scrolling sideways */
@media (max-width:760px){
  .marq{display:none}
  .hb .chips{flex-wrap:wrap;justify-content:center;overflow:visible;margin-inline:0;padding-inline:0}
  .hb .chips .chip:nth-child(n+4){display:none}
  .filt{flex-wrap:wrap;overflow:visible}
  dialog.sheet2{width:100%;max-width:100%;margin:auto 0 0;border-radius:24px 24px 0 0;border-bottom:0;max-height:88dvh}
  .sb{padding-bottom:calc(env(safe-area-inset-bottom,0px) + 22px)}
  .acct{width:44px;height:44px}
  .deck{height:clamp(240px,40vh,300px)}
  .fcard{padding:22px}
  .mini-build .tile{width:58px}
  .mini-build > span{display:none}
  .qgo{flex-wrap:wrap} .qgo .textbtn{width:100%;text-align:center;margin:0}
  .lgrid{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){.fcard,.fcard.in,.fcard.leave,[dir="rtl"] .fcard,[dir="rtl"] .fcard.leave,.truth{transform:none}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important}
  button:active,.btn:active,.poster:active{transform:none}
  .sp,.tile img,.tile b{transition:opacity .2s}
}

/* P221/P222 waiting D (owner): one calm panel — the request, the percentage with the time left, one bar, the current
   stage and the step pictures; below it the "did you know" cards change by themselves (a timer line runs along each
   card's bottom edge). P222: lighter on the phone (owner: "too crowded"), picture tiles shimmer until they are drawn. */
.wd{max-width:720px;gap:14px}
.prog{display:grid;gap:14px;padding:18px 20px 20px;border-radius:24px;background:var(--surface);border:1px solid var(--line)}
.wq{margin:0;display:flex;align-items:baseline;gap:8px;min-width:0;font-size:.9rem;font-weight:600;color:var(--muted)}
.wq span{flex:none;font-size:.75rem;font-weight:800;color:var(--honey-text)}
.wq bdi{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.ptop{display:flex;align-items:center;gap:16px}
.pct{flex:none;min-width:3.2ch;font-size:clamp(2.8rem,10vw,3.6rem);line-height:.9;font-weight:800;letter-spacing:-.04em;
  font-variant-numeric:tabular-nums;color:var(--honey-text);transition:color .3s var(--ease)}
.pct small{font-size:.55em;font-weight:800;letter-spacing:0}
.ptxt{display:grid;gap:2px;min-width:0}
.wd .ptxt h1{font-size:1.2rem;line-height:1.25;font-weight:800;letter-spacing:-.01em}
.ptxt .eta{margin:0;font-size:.95rem;font-weight:600;color:var(--muted);font-variant-numeric:tabular-nums}
.pbar{position:relative;display:block;height:6px;border-radius:3px;background:var(--line);overflow:hidden}
.pbar i{position:absolute;inset:0;border-radius:inherit;background:var(--honey);transform:scaleX(var(--f,0));transform-origin:left;transition:transform .25s linear}
[dir="rtl"] .pbar i{transform-origin:right}
.stage{margin:-4px 0 0;display:flex;gap:6px;font-size:.88rem;font-weight:700}
.stage bdi{color:var(--muted);font-variant-numeric:tabular-nums}
.prog .tiles{display:grid;grid-template-columns:repeat(var(--n,4),minmax(0,112px));gap:8px}
.prog .tile{border-radius:10px;border-width:1.5px}
.prog .tile::before{content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,transparent 25%,color-mix(in oklch,var(--ink) 8%,transparent) 50%,transparent 75%);
  transform:translateX(-100%);animation:shim 1.8s var(--ease-in-out) infinite}
.prog .tile img{z-index:1}
.prog .tile b{z-index:2;top:2px;inset-inline-start:6px;font-size:1.05rem}
.prog .tile.num{border-style:solid}
.prog .tile.active{border-color:var(--honey)}
.prog .tile.active::before{background:linear-gradient(100deg,transparent 20%,color-mix(in oklch,var(--honey) 45%,transparent) 50%,transparent 80%);animation-duration:1.1s}
.prog .tile.img::before{animation:none;opacity:0}
@keyframes shim{to{transform:translateX(100%)}}
.prog.is-ready .pct{color:var(--ok)}
.btn.auto{position:relative;isolation:isolate;overflow:hidden}
.btn.auto::after{content:"";position:absolute;inset:0;z-index:-1;background:color-mix(in oklch,var(--honey-ink) 16%,transparent);
  transform:scaleX(0);transform-origin:left;animation:fill 4s linear forwards}
[dir="rtl"] .btn.auto::after{transform-origin:right}
@keyframes fill{to{transform:scaleX(1)}}

.dyk{position:relative;display:grid;gap:10px}
.deck2{display:grid;touch-action:pan-y}
.deck2 > .fc{grid-area:1/1}
.deck2.probe{position:absolute;top:0;inset-inline-start:0;visibility:hidden;pointer-events:none}
.fc{position:relative;display:grid;align-content:center;gap:8px;padding:20px 22px 26px;border-radius:24px;overflow:hidden;
  background:var(--surface);border:1px solid var(--line);box-shadow:0 22px 44px -30px oklch(0.12 0.03 262 / .45);
  opacity:0;transform:translateX(calc(var(--dx,1) * 32px));filter:blur(6px);
  transition:opacity .45s var(--ease),transform .6s var(--ease),filter .5s var(--ease)}
[dir="rtl"] .fc{transform:translateX(calc(var(--dx,1) * -32px))}
.fc.in{opacity:1;transform:none;filter:none}
.fc.out{opacity:0;transform:translateX(calc(var(--dx,1) * 32px)) scale(.98);filter:blur(4px);transition-duration:.3s,.35s,.3s;pointer-events:none}
[dir="rtl"] .fc.out{transform:translateX(calc(var(--dx,1) * -32px)) scale(.98)}
.fh{display:flex;align-items:center;justify-content:space-between;gap:10px}
.fc .em{font-size:2.3rem;line-height:1.1;font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif}
.fc .tag{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:999px;background:var(--bg);font-size:.78rem;font-weight:800;color:var(--muted)}
.fc .tag .ic{width:14px;height:14px;color:var(--honey-text)}
.fc .tag.pz,.fc.paused .tag{display:none}
.fc.paused .tag.pz{display:inline-flex}
.fc h2{margin:2px 0 0;font-size:clamp(1.3rem,4.4vw,1.65rem);line-height:1.22;font-weight:800;letter-spacing:-.015em;text-wrap:balance}
.fc p{margin:0;max-width:62ch;font-size:1.02rem;line-height:1.55;color:var(--muted);text-wrap:pretty}
.fc .tm{position:absolute;inset-inline:0;bottom:0;height:4px;background:color-mix(in oklch,var(--line) 70%,transparent)}
.fc .tm::after{content:"";position:absolute;inset:0;background:var(--honey);transform:scaleX(0);transform-origin:left;animation:fill var(--dur,10s) linear forwards}
[dir="rtl"] .fc .tm::after{transform-origin:right}
.fc:not(.in) .tm::after,.fc.paused .tm::after{animation-play-state:paused}
.deck2.hold .tm{visibility:hidden}
.dctl{display:flex;justify-content:center;gap:10px}
.rb{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--surface);border:1px solid var(--line);color:var(--ink)}
.rb .ic{width:18px;height:18px}
.rb.prev .ic{scale:-1 1}
[dir="rtl"] .rb .ic{scale:-1 1}
[dir="rtl"] .rb.prev .ic{scale:1 1}
@media (hover:hover){.rb:hover{border-color:var(--honey)}}
.wnote{margin:0;font-size:.82rem;color:var(--muted)}
.linkbtn{font-weight:700;color:var(--ink);text-decoration:underline;text-decoration-color:var(--honey);text-underline-offset:3px}
@media (max-width:520px){
  .prog{gap:12px;padding:16px 16px 18px}
  .ptop{gap:14px}
  .prog .tiles{gap:6px}
  .fc{padding:18px 18px 24px}
  .prog .ready .btn{width:100%}
}
@media (max-width:520px) and (max-height:780px){
  .wd{gap:12px;padding-top:14px}
  .prog{gap:10px;padding:14px 14px 16px}
  .pct{font-size:2.5rem}
  .wd .ptxt h1{font-size:1.06rem}
  .ptxt .eta,.stage{font-size:.86rem}
  .fc{gap:6px;padding:16px 18px 22px}
  .fc .em{font-size:2rem}
  .fc h2{font-size:1.2rem}
  .fc p{font-size:.95rem;line-height:1.5}
}
@media (prefers-reduced-motion:reduce){
  .fc,.fc.in,.fc.out,[dir="rtl"] .fc,[dir="rtl"] .fc.out{transform:none;filter:none}
  .fc .tm::after{animation-duration:var(--dur,10s)!important}
  .prog .tile::before{display:none}
}