/*
  FILE: assets/css/site.css
  VERSION: 1.15.0
  START_MODULE_CONTRACT
  PURPOSE: Shared dark visual system (Open WebUI-inspired) for the landing, the gated app and the hall window.
  SCOPE: Tokens, typography, pills, nav, landing sections, checkout dialog, app shell, certificate + print, hall list.
  KEYWORDS: DOMAIN(UI): dark minimal; CONCEPT(i18n): .ru/.en visibility by html[lang]; TECH(CSS): custom properties, grid, <dialog>.
  LINKS: USED_BY(index.html, app.html, hall.html)
  END_MODULE_CONTRACT
  START_RATIONALE
  Q: Why is Noto Serif Display in the serif stack?
  A: Instrument Serif (the only display face, per the owner) has no Cyrillic. Cyrillic glyphs fall back to Noto Serif Display
     condensed to wdth 66 / weight 400, which matches Instrument Serif proportions; Latin always renders in Instrument Serif.
  Q: Why two faces (serif + Onest) after the earlier "one font everywhere" decision?
  A: Owner's decision 2026-10-07: running text set in the condensed display serif was unreadable (hairline strokes at 16-19px).
     The serif is now limited to headings and large accent text (>= ~24px: numbers, prices, counters, signs, certificate titles);
     body copy, UI, lists and code use Onest (Cyrillic + Latin). Font sizes were lowered ~1-2px because Onest is wider and has a
     taller x-height than the condensed serif the old sizes were tuned for.
  END_RATIONALE
  START_CHANGE_SUMMARY
  LAST_CHANGE: 1.15.0 - Stage row back to 3 columns: 2 paid cards + Stage 3 Free as a regular dashed .stage card (.stages-slot display:contents); old wide free-card layout removed.
  PREV_CHANGE_SUMMARY: 1.14.0 - Two paid stage cards: .stages grid 3 -> 2 columns (centered, max-width 860px); free card comments Stage 4 -> Stage 3.
  PREV_CHANGE_SUMMARY: 1.13.0 - Gambler chart on the test result: .dx-chart track, zone bar .dx-z.lv0..lv4 (grey -> coral -> warn), "you are here" .dx-marker, .dx-ticks, .dx-legend.
  PREV_CHANGE_SUMMARY: 1.12.0 - New logo: .brand-mark is the Codex/GPT Image pill+V mark (assets/img/logo/mark.png); .brand wordmark set in the sans UI face (removed from DISPLAY_FACE serif list).
  PREV_CHANGE_SUMMARY: 1.11.0 - BLOCK_FREE: .free-head row puts the $0 price left of the Stage 3 name + tagline (.free-title).
  PREV_CHANGE_SUMMARY: 1.10.0 - Language picker: .seg toggle replaced by .lang-btn trigger + .modal.lang-modal with .lang-opt rows (BLOCK_BASE, BLOCK_MODAL).
  PREV_CHANGE_SUMMARY: 1.9.1 - Iteration 6: partner auction cells in the Iteration 4 look (5 columns), slot buy dialog, Ads page banners.
  PREV_CHANGE_SUMMARY: 1.9.0 - BLOCK_APP_RESTORED: rock simulator full screen (.sim-wrap, .sim-bar, .sim-full + icons, .sim-wrap.is-full, html.rock-full scroll lock, safe-area insets); .sim width:100% + min-width:0 fixes the phone-width overflow that hid the button.
  PREV_CHANGE_SUMMARY: 1.8.0 - BLOCK_FREE: wide dashed Stage 3 card (.stage-free), guilt modal (.free-guilt, .free-pic), stacked confirm dialog (.modal.confirm, --free-dim backdrop), pop animation.
  PREV_CHANGE_SUMMARY: 1.7.0 - Partners: .pcell.free slot buttons ("Become a partner +"); .partners-cta removed with the separate button.
  PREV_CHANGE_SUMMARY: 1.6.0 - Billboards removed: BLOCK_BOARDS, .ov-bill, .ov-band and #ov-boy/#ov-kitchen/#ov-granny deleted.
  PREV_CHANGE_SUMMARY: 1.5.0 - Readable text: Onest for body/UI/code, serif only for headings and large accents (DISPLAY_FACE); type scale retuned.
  PREV_CHANGE_SUMMARY: 1.4.0 - Partners block at the bottom; stage cards aligned with subgrid.
  PREV_CHANGE_SUMMARY: 1.3.0 - No italics anywhere: only the upright face is loaded and used.
  PREV_CHANGE_SUMMARY: 1.2.0 - One font for everything (body, UI, code); restored v1/v2 components; oil-painting frames with HTML text overlays.
  PREV_CHANGE_SUMMARY: 1.1.0 - Single display face: Instrument Serif everywhere (Cyrillic via condensed Noto Serif Display).
  PREV_CHANGE_SUMMARY: 1.0.0 - Initial v3 dark system.
  END_CHANGE_SUMMARY
  START_MODULE_MAP
  BLOCK [9] Tokens => :root
  BLOCK [7] Base + type + pills => body, h1-h3, .pill
  BLOCK [8] Display face: serif only for headings and large accents => .steps li::before .tile>span .pcell .ov ...
  BLOCK [7] Nav => .nav
  BLOCK [8] Landing sections => .hero .stats .diag .packs .stories .stages .foot
  BLOCK [7] Checkout dialog + language dialog => .modal .lang-modal
  BLOCK [7] Stage 3 Free card + guilt modal + confirm dialog => .stage-free .free-guilt .free-pic .modal.confirm
  BLOCK [8] Partner auction grid + slot buy dialog => .pgrid .pcell .slot-dlg
  BLOCK [7] Ads page banners (hello-tag look) => .ads-list .ad-item .ad-tag
  BLOCK [9] App shell + panes => .shell .side .pane
  BLOCK [7] Certificate + print => .cert
  BLOCK [6] Hall => .hall
  END_MODULE_MAP
*/

/* START_BLOCK_TOKENS */
:root{
  --bg:#0a0a0a; --bg-2:#111111; --card:#141414; --card-2:#1b1b1b;
  --line:rgba(255,255,255,.08); --line-2:rgba(255,255,255,.16);
  --text:#fafafa; --muted:rgba(250,250,250,.64); --dim:rgba(250,250,250,.42);
  --warn:#ff5a4e; --ok:#62d394;
  --paper:#e9e5dc; --paper-2:#d9d4c8; --ink:#141414;
  --serif:"Instrument Serif", "Noto Serif Display", Georgia, "Times New Roman", serif;
  --serif-axes:"wdth" 66; /* condenses the Cyrillic fallback to Instrument Serif proportions; no effect on Instrument Serif */
  --sans:"Onest", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; /* readable text face (owner's decision 2026-10-07): body, UI, lists */
  --mono:var(--sans); /* no separate code face: code, receipts and counters use the text face */
  --r:20px;
  color-scheme: dark;
}
/* END_BLOCK_TOKENS */

/* START_BLOCK_BASE */
*{box-sizing:border-box}
/* BUG_FIX_CONTEXT: component rules like .locked-screen{display:grid} beat the UA [hidden]{display:none}, so the paywall screen stayed visible above the app. */
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
html{font-synthesis:none}
body{margin:0; background:var(--bg); color:var(--text); font:400 17px/1.55 var(--sans); -webkit-font-smoothing:antialiased}
/* one upright face everywhere (owner's decision): no italics anywhere, including UA defaults for em/i/cite/address */
em, i, cite, b, strong, var, dfn, address, blockquote{font-weight:400; font-style:normal}
a{color:inherit}
img,svg{max-width:100%}
button,input,textarea,select{font:inherit; color:inherit}
:focus-visible{outline:2px solid var(--text); outline-offset:3px; border-radius:6px}
:root[lang="en"] .ru{display:none!important}
:root:not([lang="en"]) .en{display:none!important}
.wrap{max-width:1120px; margin:0 auto; padding-inline:24px}
@media (max-width:600px){ .wrap{padding-inline:16px} }
h1,h2,h3{margin:0; font-weight:400; font-family:var(--serif); font-variation-settings:var(--serif-axes); text-wrap:balance}
p{margin:0}
.serif{font-family:var(--serif); font-weight:400; font-variation-settings:var(--serif-axes); font-variant-numeric:lining-nums}
h1.serif{font-size:clamp(46px,8vw,104px); line-height:.98; letter-spacing:-.015em}
h2.serif{font-size:clamp(36px,5.4vw,64px); line-height:1.02; letter-spacing:-.01em}
h3.serif{font-size:clamp(26px,3vw,34px); line-height:1.08}
.serif em, em.it{font-style:normal}
.label{font:400 12.5px/1.4 var(--sans); letter-spacing:.12em; text-transform:uppercase; color:var(--dim)}
.lead{font-size:clamp(18px,1.6vw,20px); line-height:1.5; color:var(--muted); max-width:60ch}
.muted{color:var(--muted)}
.mono{font-family:var(--mono)}
pre, code, kbd, samp{font-family:var(--mono); font-size:inherit} /* UA default is monospace; code uses the text face (no extra font download) */
pre, code, .field, .mono{font-variant-ligatures:none}
.pill{display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:44px; padding:0 20px; border-radius:999px; border:1px solid transparent; font:400 15px/1 var(--sans); text-decoration:none; cursor:pointer; background:none; transition:opacity .15s, background .15s, border-color .15s; white-space:nowrap}
.pill.solid{background:var(--text); color:var(--bg)}
.pill.solid:hover{opacity:.86}
.pill.ghost{border-color:var(--line-2); color:var(--text)}
.pill.ghost:hover{border-color:rgba(255,255,255,.4)}
.pill.small{min-height:34px; padding:0 14px; font-size:14px}
.pill:disabled{opacity:.45; cursor:not-allowed}
.lang-btn{display:inline-flex; align-items:center; gap:7px; min-height:34px; padding:0 13px; border:1px solid var(--line-2); border-radius:999px; background:none; color:var(--text); font:400 13px/1 var(--sans); letter-spacing:.04em; cursor:pointer}
.lang-btn:hover{border-color:rgba(255,255,255,.4)}
.lang-globe{width:14px; height:14px; border:1.5px solid currentColor; border-radius:50%; position:relative; opacity:.7}
.lang-globe::before{content:""; position:absolute; inset:-1.5px 3px; border:1.5px solid currentColor; border-radius:50%}
.lang-globe::after{content:""; position:absolute; left:0; right:0; top:50%; border-top:1.5px solid currentColor; transform:translateY(-50%)}
.card{background:var(--card); border:1px solid var(--line); border-radius:var(--r)}
section{padding-block:clamp(64px,8vw,104px)}
.sec-head{display:grid; gap:18px; margin-bottom:clamp(36px,5vw,56px); max-width:820px}
/* END_BLOCK_BASE */

/* START_BLOCK_NAV */
.nav{position:sticky; top:0; z-index:40; background:rgba(10,10,10,.82); backdrop-filter:saturate(1.4) blur(12px); -webkit-backdrop-filter:saturate(1.4) blur(12px); border-bottom:1px solid var(--line)}
.nav .wrap{display:flex; align-items:center; gap:22px; min-height:64px}
.brand{display:inline-flex; align-items:center; gap:9px; text-decoration:none; font:400 17.5px/1 var(--sans); letter-spacing:-.01em; white-space:nowrap}
.brand-mark{width:28px; height:28px; flex:none; display:block; object-fit:contain}
.nav-links{display:flex; gap:24px; margin-left:12px; font-size:15px}
.nav-links a{text-decoration:none; color:var(--muted)}
.nav-links a:hover{color:var(--text)}
.nav-right{display:flex; align-items:center; gap:10px; margin-left:auto}
@media (max-width:960px){ .nav-links{display:none} }
@media (max-width:480px){ .nav .pill.app-pill .opt{display:none} }
/* END_BLOCK_NAV */

/* START_BLOCK_HERO */
.hero{padding-block:clamp(64px,10vw,120px) clamp(48px,6vw,72px); text-align:center}
.hero .wrap{display:grid; justify-items:center; gap:26px}
.hero .lead{margin-inline:auto}
.cta{display:flex; flex-wrap:wrap; justify-content:center; gap:12px}
.aside-line{font-size:15px; color:var(--dim)}
.aside-line button{background:none; border:0; padding:0; color:var(--muted); text-decoration:underline; text-underline-offset:3px; cursor:pointer}
.aside-line button:hover{color:var(--text)}
.art{margin:clamp(40px,6vw,64px) 0 0; width:100%}
.art figcaption{margin-top:14px; font-size:15px; color:var(--dim)}
/* END_BLOCK_HERO */

/* START_BLOCK_STATS */
.stats{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); border-block:1px solid var(--line)}
.stat{padding:30px 24px; display:grid; gap:6px; text-align:left}
.stat + .stat{border-left:1px solid var(--line)}
.stat b{font:400 clamp(34px,4.6vw,56px)/1 var(--serif); font-variation-settings:var(--serif-axes); font-variant-numeric:lining-nums tabular-nums; letter-spacing:-.01em}
.stat span{font-size:15px; color:var(--muted)}
@media (max-width:900px){ .stats{grid-template-columns:repeat(2,minmax(0,1fr))} .stat:nth-child(3){border-left:0} .stat:nth-child(n+3){border-top:1px solid var(--line)} }
@media (max-width:520px){ .stats{grid-template-columns:1fr} .stat + .stat{border-left:0; border-top:1px solid var(--line)} }
/* END_BLOCK_STATS */

/* START_BLOCK_DIAG */
.versus{border-top:1px solid var(--line)}
.vrow{display:grid; grid-template-columns:1fr 1.2fr 1.4fr; gap:24px; padding:20px 0; border-bottom:1px solid var(--line); align-items:baseline}
.vrow.head{padding-block:14px}
.vrow.head span{font:400 12px/1.4 var(--sans); letter-spacing:.14em; text-transform:uppercase; color:var(--dim)}
.vrow .m{font-weight:400}
.vrow .c{color:var(--dim)}
.vrow .v{color:var(--text)}
.vrow .k{display:none}
@media (max-width:700px){
  .vrow{grid-template-columns:1fr; gap:4px}
  .vrow.head{display:none}
  .vrow .k{display:inline; color:var(--dim); font-size:12.5px; letter-spacing:.12em; text-transform:uppercase; margin-right:8px}
}
/* END_BLOCK_DIAG */

/* START_BLOCK_PACKS: parody plain packaging (Pantone 448C) with Claude-drawn warnings */
.packs{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:34px; align-items:start; padding-top:10px}
.pack{position:relative; max-width:100%; background:linear-gradient(90deg,#4A412A 0%,#5A5034 50%,#4A412A 100%); border-radius:6px 6px 4px 4px; padding:14px; display:flex; flex-direction:column; gap:12px; box-shadow:0 30px 50px -26px rgba(0,0,0,.9), inset 0 0 0 1px rgba(255,255,255,.06); transition:transform .25s}
.pack:nth-child(1){transform:rotate(-2.5deg)}
.pack:nth-child(2){transform:translateY(18px)}
.pack:nth-child(3){transform:rotate(2.5deg)}
.pack:hover{transform:rotate(0) translateY(-6px)}
.pack::before{content:""; position:absolute; left:0; right:0; top:22%; height:1px; background:rgba(0,0,0,.35)}
.warn{background:#fff; border:5px solid #000; display:flex; flex-direction:column; flex:1 1 auto; min-height:0; color:#000}
.warn .pic{flex:none; border-radius:0}
.warn p{background:#000; color:#fff; font:400 clamp(12.5px,1.15vw,14px)/1.2 var(--sans); text-transform:uppercase; padding:9px 10px; text-align:center; letter-spacing:.01em}
.warn small{flex:1 1 auto; display:flex; align-items:center; justify-content:center; min-height:64px; background:#fff; color:#000; font:400 12.5px/1.3 var(--sans); padding:7px 8px; text-align:center}
.pack-brand{color:#EDE6CF; font:400 clamp(17px,1.8vw,19px)/1.1 var(--sans); text-align:center}
.pack-sub{color:#BFB595; font:400 11.5px/1.3 var(--mono); text-align:center; letter-spacing:.04em}
.pack-note{margin-top:64px; display:flex; flex-wrap:wrap; gap:8px 28px; font:400 14px/1.5 var(--mono); color:var(--dim)}
@media (max-width:820px){
  .packs{grid-template-columns:1fr; max-width:340px; margin:0 auto; gap:40px}
  .pack:nth-child(n){transform:none}
  .warn p{font-size:15px}
}
/* END_BLOCK_PACKS */

/* START_BLOCK_STORIES */
.stories{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px}
.story{margin:0; display:grid; gap:18px; align-content:start; padding:14px 14px 24px}
.story .pic{border-radius:14px}
.story blockquote{margin:0 6px; font-size:17px; line-height:1.6}
.story cite{margin:0 6px; font-style:normal; font-size:14px; color:var(--dim)}
@media (max-width:880px){ .stories{grid-template-columns:1fr; max-width:460px; margin:0 auto} }
/* END_BLOCK_STORIES */

/* START_BLOCK_STAGES */
.stages{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; align-items:stretch}
.stages-slot{display:contents}
.stage{padding:28px; display:flex; flex-direction:column; gap:18px}
.stage .top{display:flex; justify-content:space-between; align-items:center; gap:10px}
.chip{display:inline-flex; align-items:center; gap:6px; font:400 13px/1 var(--sans); padding:7px 10px; border-radius:999px; border:1px solid var(--line-2); color:var(--muted); white-space:nowrap}
.chip.hot{border-color:transparent; background:var(--warn); color:#fff}
.stage .tag{font-size:15px; color:var(--dim); font-style:normal}
.price{display:flex; align-items:baseline; gap:10px}
.price b{font:400 clamp(56px,6vw,76px)/.9 var(--serif); font-variation-settings:var(--serif-axes); font-variant-numeric:lining-nums}
.price small{color:var(--dim); font-size:15px}
.funds{font-size:15px; color:var(--muted); padding:14px 16px; border-radius:12px; background:var(--card-2)}
.funds span.k{display:block; font:400 11.5px/1.4 var(--sans); letter-spacing:.14em; text-transform:uppercase; color:var(--dim); margin-bottom:4px}
.feat{list-style:none; margin:0; padding:0; display:grid; flex:1; align-content:start}
.feat li{padding:11px 0; border-top:1px solid var(--line); font-size:16px; display:flex; gap:10px}
.feat li::before{content:"✓"; color:var(--dim)}
.stage .pill{width:100%}
.stage.top-tier{background:var(--text); color:var(--bg); border-color:var(--text)}
.stage.top-tier .label, .stage.top-tier .tag, .stage.top-tier .price small{color:rgba(10,10,10,.55)}
.stage.top-tier .funds{background:rgba(10,10,10,.06); color:rgba(10,10,10,.75)}
.stage.top-tier .funds span.k{color:rgba(10,10,10,.5)}
.stage.top-tier .feat li{border-color:rgba(10,10,10,.12)}
.stage.top-tier .feat li::before{color:rgba(10,10,10,.5)}
.stage.top-tier .chip{border-color:rgba(10,10,10,.2); color:rgba(10,10,10,.7)}
.stage.top-tier .chip.hot{border-color:transparent; color:#fff}
.stage.top-tier .pill.solid{background:var(--bg); color:var(--text)}
.stage.top-tier .pill.ghost{border-color:rgba(10,10,10,.25); color:var(--bg)}
.pay-note{margin-top:22px; font-size:15px; color:var(--dim); text-align:center}
/* stage cards share row tracks so prices, fund boxes, lists and CTAs line up even when a name wraps */
@supports (grid-template-rows: subgrid){
  .stages{row-gap:18px}
  .stage{display:grid; grid-row:span 6; grid-template-rows:subgrid; row-gap:18px}
  .stage > *{min-width:0}
  .stage .price{align-self:end}
  .stage .pill{align-self:end}
}
@media (max-width:900px){ .stages{grid-template-columns:1fr; max-width:520px; margin:0 auto} }
/* END_BLOCK_STAGES */

/* START_BLOCK_FOOT */
.foot{border-top:1px solid var(--line); padding-block:64px 48px}
.foot .wrap{display:grid; gap:28px}
.warnbox{border:2px solid var(--text); padding:18px 20px; font:400 clamp(15px,1.7vw,18px)/1.35 var(--sans); text-transform:uppercase; letter-spacing:.01em}
.foot-grid{display:grid; grid-template-columns:1.4fr 1fr; gap:16px}
.foot-grid .card{padding:24px; display:grid; gap:10px; align-content:start}
.foot-grid .card b{font-weight:400}
.kumo{text-decoration:none; transition:border-color .15s}
.kumo:hover{border-color:var(--line-2)}
.kumo .big{font:400 40px/1 var(--serif); font-variation-settings:var(--serif-axes)}
.kumo .url{font:400 14px/1 var(--mono); color:var(--muted)}
.foot-links{display:flex; flex-wrap:wrap; gap:10px 24px; font-size:15px}
.foot-links a, .foot-links button{color:var(--muted); text-decoration:none; background:none; border:0; padding:0; cursor:pointer}
.foot-links a:hover, .foot-links button:hover{color:var(--text)}
.fine{font-size:14px; color:var(--dim); max-width:90ch}
@media (max-width:760px){ .foot-grid{grid-template-columns:1fr} }
/* END_BLOCK_FOOT */

/* START_BLOCK_MODAL */
.modal{width:min(480px, calc(100vw - 32px)); padding:0; border:1px solid var(--line-2); border-radius:var(--r); background:var(--bg-2); color:var(--text)}
.modal::backdrop{background:rgba(0,0,0,.72); backdrop-filter:blur(4px)}
.modal-in{padding:28px; display:grid; gap:18px}
.modal-head{display:flex; justify-content:space-between; align-items:start; gap:16px}
.x{width:36px; height:36px; flex:none; border-radius:999px; border:1px solid var(--line-2); background:none; cursor:pointer; font-size:18px; line-height:1}
.coins{display:flex; flex-wrap:wrap; gap:8px}
.demo-box{border:1px dashed var(--line-2); border-radius:12px; padding:14px 16px; font-size:15px; color:var(--muted)}
.demo-box b{color:var(--text); font-weight:400}
.status{min-height:1.6em; font:400 15px/1.6 var(--mono); color:var(--muted)}
.status.ok{color:var(--ok)}
.status.bad{color:var(--warn)}
.receipt{font:400 14px/1.5 var(--mono); background:var(--card-2); border-radius:10px; padding:12px 14px; word-break:break-all}
.modal-actions{display:flex; flex-wrap:wrap; gap:10px}
.modal-actions .pill{flex:1}
.modal.lang-modal{width:min(400px, calc(100vw - 32px))}
.lang-list{display:grid; gap:8px}
.lang-opt{display:flex; justify-content:space-between; align-items:center; gap:12px; width:100%; padding:16px 18px; border:1px solid var(--line-2); border-radius:12px; background:var(--card); color:var(--text); font:400 17px/1.2 var(--sans); text-align:left; cursor:pointer}
.lang-opt b{font-weight:400}
.lang-opt span{font-size:13px; letter-spacing:.08em; color:var(--dim)}
.lang-opt:hover{border-color:rgba(255,255,255,.4)}
.lang-opt[aria-pressed="true"]{background:var(--text); color:var(--bg); border-color:var(--text)}
.lang-opt[aria-pressed="true"] span{color:var(--bg); opacity:.6}
/* END_BLOCK_MODAL */

/* START_BLOCK_FREE: Stage 3 Free card skin (a .stage card in the stage row) + guilt modal + stacked confirm dialog */
.stage.stage-free{background:transparent; border-style:dashed; border-color:var(--line-2)}
.stage-free .free-note{margin:6px 0 0; font-size:14px; color:var(--muted)}
.modal.free-guilt{width:min(520px, calc(100vw - 32px))}
.free-pic{display:block; width:100%; height:auto; aspect-ratio:3/2; object-fit:cover; border-radius:12px}
.free-text{margin:0; font-size:17px; color:var(--text)}
.modal.confirm{width:min(420px, calc(100vw - 32px)); text-align:center}
.modal.confirm::backdrop{background:rgba(0,0,0,var(--free-dim,.5)); backdrop-filter:none}
.modal.confirm .modal-in{justify-items:center}
.modal.confirm .modal-actions{width:100%}
.modal-in.pop{animation:free-pop .22s ease-out}
@keyframes free-pop{from{transform:scale(.94); opacity:.4} to{transform:scale(1); opacity:1}}
@media (prefers-reduced-motion:reduce){ .modal-in.pop{animation:none} }
/* END_BLOCK_FREE */

/* START_BLOCK_APP_SHELL */
body.app{min-height:100vh}
.shell{display:grid; grid-template-columns:272px minmax(0,1fr); min-height:100vh}
.side{position:sticky; top:0; height:100vh; display:flex; flex-direction:column; gap:18px; padding:18px 14px; background:var(--bg-2); border-right:1px solid var(--line); overflow-y:auto}
.side .brand{padding:6px 8px}
.newchat{display:flex; align-items:center; gap:10px; width:100%; padding:10px 12px; border-radius:12px; border:1px solid var(--line); background:none; cursor:pointer; font-size:15px; text-align:left}
.newchat:hover{background:var(--card)}
.sidenav{display:grid; gap:2px}
.sidenav .grp{padding:14px 10px 6px}
.navbtn{display:flex; align-items:center; gap:10px; width:100%; padding:9px 10px; border:0; border-radius:10px; background:none; cursor:pointer; font-size:15px; text-align:left; color:var(--muted)}
.navbtn:hover{background:var(--card); color:var(--text)}
.navbtn[aria-current="page"]{background:var(--card-2); color:var(--text)}
.navbtn .ic{width:20px; text-align:center; flex:none}
.navbtn .lk{margin-left:auto; font-size:12.5px; color:var(--dim); white-space:nowrap}
.side-foot{margin-top:auto; display:grid; gap:12px; padding:14px 8px 4px; border-top:1px solid var(--line)}
.who{display:grid; gap:2px}
.who b{font-weight:400; font-size:15px}
.who span{font:400 13px/1.4 var(--mono); color:var(--dim)}
.side-row{display:flex; align-items:center; justify-content:space-between; gap:8px}
.linkbtn{background:none; border:0; padding:0; font-size:14px; color:var(--dim); cursor:pointer; text-decoration:underline; text-underline-offset:3px}
.linkbtn:hover{color:var(--warn)}
.pane{min-width:0; padding:clamp(28px,5vw,56px) clamp(16px,5vw,56px) 80px}
.pane-in{max-width:820px; margin:0 auto; display:grid; gap:26px}
.pane-head{display:grid; gap:12px}
@media (max-width:860px){
  .shell{grid-template-columns:1fr}
  .side{position:static; height:auto; border-right:0; border-bottom:1px solid var(--line); gap:12px}
  .sidenav{display:flex; flex-wrap:wrap; gap:6px}
  .sidenav .grp{display:none}
  .navbtn{width:auto; border:1px solid var(--line); border-radius:999px; padding:7px 12px}
  .navbtn .lk{margin-left:0}
  .newchat{display:none}
  .side-foot{margin-top:0}
}
/* END_BLOCK_APP_SHELL */

/* START_BLOCK_APP_PANES */
.locked-screen{min-height:100vh; display:grid; place-items:center; text-align:center; padding:40px 16px}
.locked-screen .in{display:grid; justify-items:center; gap:22px; max-width:640px}
.home{min-height:calc(100vh - 220px); display:grid; align-content:center; gap:22px}
.model-chip{justify-self:start; display:inline-flex; align-items:center; gap:8px; font-size:15px; color:var(--muted)}
.model-chip i{width:8px; height:8px; border-radius:50%; background:var(--warn); display:inline-block}
.composer{display:flex; align-items:center; gap:8px; padding:8px 8px 8px 18px; border:1px solid var(--line-2); border-radius:26px; background:var(--card)}
.composer input{flex:1; min-width:0; border:0; background:none; outline:none; font-size:17px; padding:10px 0}
.send{width:40px; height:40px; flex:none; border-radius:999px; border:0; background:var(--text); color:var(--bg); cursor:pointer; font-size:18px}
.sugg{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px}
.sugg button{text-align:left; padding:14px 16px; border-radius:14px; border:1px solid var(--line); background:none; cursor:pointer; display:grid; gap:4px}
.sugg button:hover{background:var(--card)}
.sugg b{font-weight:400; font-size:15px}
.sugg span{font-size:14px; color:var(--dim)}
@media (max-width:640px){ .sugg{grid-template-columns:1fr} }
.thread{display:grid; gap:14px}
.bubble{max-width:85%; padding:12px 16px; border-radius:18px; line-height:1.5; font-size:16px}
.bubble.me{justify-self:end; background:var(--card-2)}
.bubble.bot{justify-self:start; border:1px solid var(--line)}
.bubble .who-line{display:block; font:400 13px/1.4 var(--sans); color:var(--dim); margin-bottom:4px}
.typing{font:400 14px/1.4 var(--mono); color:var(--dim)}
.typing::after{content:"▍"; animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.counter{font:400 14px/1.4 var(--mono); color:var(--dim)}

.acc{display:grid; border-top:1px solid var(--line)}
.acc details{border-bottom:1px solid var(--line)}
.acc summary{cursor:pointer; list-style:none; padding:18px 0; display:flex; justify-content:space-between; gap:16px; font-size:18px; font-weight:400}
.acc summary::-webkit-details-marker{display:none}
.acc summary::after{content:"+"; color:var(--dim); font:400 24px/1 var(--sans)}
.acc details[open] summary::after{content:"−"}
.acc .body{display:grid; gap:12px; padding:0 0 22px; color:var(--muted); max-width:66ch}
.books{list-style:none; margin:0; padding:0; display:grid; border-top:1px solid var(--line)}
.books li{display:flex; justify-content:space-between; gap:16px; padding:13px 0; border-bottom:1px solid var(--line); font-size:16px}
.books small{color:var(--dim); white-space:nowrap}

.q{display:grid; gap:12px; padding:20px 0; border-bottom:1px solid var(--line)}
.q p{font-size:18px}
.q .n{font:400 13px/1 var(--mono); color:var(--dim)}
.opts{display:flex; flex-wrap:wrap; gap:8px}
.opt input{position:absolute; opacity:0; pointer-events:none}
.opt span{display:inline-flex; align-items:center; min-height:38px; padding:0 14px; border-radius:999px; border:1px solid var(--line-2); font-size:15px; color:var(--muted); cursor:pointer}
.opt input:checked + span{background:var(--text); color:var(--bg); border-color:var(--text)}
.opt input:focus-visible + span{outline:2px solid var(--text); outline-offset:2px}
.result{padding:28px; display:grid; gap:12px}
.result .score{font:400 14px/1 var(--mono); color:var(--dim)}
/* START_BLOCK_DX_CHART: "gambler chart" on the test result. Zones grow with the number of score points they cover. */
.dx-chart{display:grid; gap:14px; margin-top:8px; padding-top:20px; border-top:1px solid var(--line)}
.dx-chart .lv0{--z:#3a3a3a} .dx-chart .lv1{--z:#6b5a4f} .dx-chart .lv2{--z:#b0634f} .dx-chart .lv3{--z:#f0705a} .dx-chart .lv4{--z:#ff3b30}
.dx-track{position:relative; padding-top:38px}
.dx-bar{display:flex; gap:3px; height:14px}
.dx-z{display:block; flex-basis:0; min-width:4px; border-radius:4px; background:var(--z); opacity:.45}
.dx-z.on{opacity:1}
.dx-marker{position:absolute; top:0; bottom:22px; width:0; border-left:2px solid var(--text); transform:translateX(-1px)}
.dx-marker span{position:absolute; top:0; transform:translateX(-50%); white-space:nowrap; font-size:13px; line-height:1; padding:6px 9px; border-radius:999px; background:var(--text); color:var(--bg)}
.dx-ticks{display:flex; margin-top:8px; font-size:12px; color:var(--dim)}
.dx-ticks span{flex-basis:0; min-width:4px}
.dx-ticks span:last-child{flex:none}
.dx-legend{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px 18px; font-size:14px; color:var(--dim)}
.dx-legend li{display:inline-flex; align-items:center; gap:7px}
.dx-legend i{width:10px; height:10px; border-radius:3px; background:var(--z)}
.dx-legend b{font-weight:400; color:var(--muted)}
.dx-legend li.on{color:var(--text)}
.dx-legend li.on b{color:var(--text)}
/* END_BLOCK_DX_CHART */
.note{font-size:15px; color:var(--dim)}
.note.alert{color:var(--warn)}
.row-actions{display:flex; flex-wrap:wrap; gap:10px; align-items:center}

.drill{display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); gap:14px; padding:18px 0; border-bottom:1px solid var(--line); align-items:center}
.drill pre{margin:0; background:var(--card); border:1px solid var(--line); border-radius:12px; padding:14px 16px; overflow-x:auto; font:400 15px/1.6 var(--mono)}
.drill pre .lg{display:block; font:400 11.5px/1 var(--sans); letter-spacing:.14em; text-transform:uppercase; color:var(--dim); margin-bottom:8px}
.drill .ans{display:grid; gap:8px}
.drill .ans .in{display:flex; gap:8px}
.field{flex:1; min-width:0; min-height:42px; padding:0 14px; border-radius:12px; border:1px solid var(--line-2); background:var(--card); font:400 16px/1 var(--mono); outline:none}
.field:focus{border-color:rgba(255,255,255,.4)}
.field.ok{border-color:var(--ok)}
.field.bad{border-color:var(--warn)}
.verdict{min-height:1.4em; font-size:15px}
.verdict.ok{color:var(--ok)}
.verdict.bad{color:var(--warn)}
@media (max-width:720px){ .drill{grid-template-columns:1fr} }
.progress{height:4px; border-radius:99px; background:var(--card-2); overflow:hidden}
.progress i{display:block; height:100%; background:var(--text); width:0; transition:width .3s}

.chat{display:grid; gap:14px}
.chat-log{display:grid; gap:12px; max-height:min(520px, 60vh); overflow-y:auto; padding:18px; border:1px solid var(--line); border-radius:var(--r); background:var(--bg-2)}
.members{display:flex; flex-wrap:wrap; gap:8px}

.form{display:grid; gap:14px}
.form label{display:grid; gap:8px; font-size:15px; color:var(--muted)}
.form .field{font-family:var(--sans)}
.checklist{list-style:none; margin:0; padding:0; display:grid; gap:8px; font-size:16px}
.checklist li{display:flex; gap:10px; align-items:center}
.checklist .y{color:var(--ok)}
.checklist .no{color:var(--warn)}
.upsell{padding:32px; display:grid; gap:16px; justify-items:start}
.upsell .big{font-size:40px; line-height:1}
/* END_BLOCK_APP_PANES */

/* START_BLOCK_CERT */
.cert{background:var(--paper); color:var(--ink); border-radius:6px; padding:clamp(18px,3vw,28px)}
.cert-in{border:2px solid var(--ink); outline:1px solid var(--ink); outline-offset:-8px; padding:clamp(24px,5vw,48px) clamp(18px,4vw,44px); display:grid; gap:18px; text-align:center; position:relative}
.cert .label{color:rgba(20,20,20,.55)}
.cert h2{font:400 clamp(30px,4.6vw,48px)/1.05 var(--serif); font-style:normal; font-variation-settings:var(--serif-axes)}
.cert .holder{font:400 clamp(28px,4vw,40px)/1.1 var(--serif); font-variation-settings:var(--serif-axes); border-bottom:1px solid var(--ink); justify-self:center; padding:0 18px 6px}
.cert .txt{max-width:56ch; margin:0 auto; font-size:16px; line-height:1.6}
.cert .diag{font-size:15px}
.cert .meta{display:flex; justify-content:space-between; align-items:end; gap:16px; flex-wrap:wrap; margin-top:12px; font:400 13px/1.5 var(--mono); text-align:left}
.cert .sig{font:400 24px/1 var(--serif); font-variation-settings:var(--serif-axes); border-top:1px solid var(--ink); padding-top:6px; min-width:180px; text-align:center}
.cert .stamp{position:absolute; left:50%; bottom:clamp(14px,3vw,30px); width:clamp(76px,12vw,112px); height:auto; transform:translateX(-50%) rotate(-14deg); opacity:.82}
@media print{
  @page{margin:12mm}
  body{background:#fff!important}
  body *{visibility:hidden!important}
  #cert, #cert *{visibility:visible!important}
  #cert{position:absolute; left:0; top:0; width:100%; background:#fff!important}
}
/* END_BLOCK_CERT */

/* START_BLOCK_HALL */
body.hall-page{min-height:100vh}
.hall-top{display:flex; justify-content:space-between; align-items:center; gap:12px; padding:16px 0}
.hall-head{display:grid; gap:14px; padding:24px 0 30px}
.hall-list{list-style:none; margin:0; padding:0; border-top:1px solid var(--line)}
.hall-row{display:grid; grid-template-columns:48px minmax(0,1fr) auto; gap:4px 16px; padding:18px 0; border-bottom:1px solid var(--line); align-items:baseline}
.hall-row .rk{font:400 30px/1 var(--serif); font-variation-settings:var(--serif-axes); font-variant-numeric:lining-nums; color:var(--dim); grid-row:span 2}
.hall-row:nth-child(-n+3) .rk{color:var(--text)}
.hall-row .nk{font:400 16px/1.3 var(--mono); overflow-wrap:anywhere}
.hall-row .tk{font:400 15px/1.3 var(--mono); color:var(--muted); text-align:right; white-space:nowrap}
.hall-row .qt{grid-column:2 / -1; font-style:normal; font-size:17px; line-height:1.45; color:var(--muted)}
.hall-row .st{grid-column:2 / -1; font-size:13px; color:var(--dim)}
.hall-row.you{background:var(--card); border-radius:14px; padding-inline:14px; margin-inline:-14px; border-bottom-color:transparent}
.you-tag{display:inline-block; margin-left:8px; font:400 12px/1 var(--sans); letter-spacing:.12em; text-transform:uppercase; background:var(--warn); color:#fff; padding:4px 7px; border-radius:999px; vertical-align:2px}
.hall-foot{padding:30px 0 48px; display:grid; gap:14px; justify-items:start}
/* END_BLOCK_HALL */

/* START_BLOCK_PICTURES: Codex oil paintings + HTML text overlays (positions in % of the picture, sizes in cqw) */
.pic{position:relative; container-type:inline-size; overflow:hidden; border-radius:var(--r); background:#1b1b1b}
.pic img{display:block; width:100%; height:auto; aspect-ratio:3/2; object-fit:cover}
.pic.wide img{aspect-ratio:3/2}
.ov{position:absolute; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; line-height:1.05; pointer-events:none; color:#141414}
.ov em{font-style:normal; color:#B3261E}
.ov-board{font-size:2.6cqw}
.ov-sign{font-size:4.4cqw; color:#B3261E; transform:rotate(-3deg)}
.ov-screen{font-size:2.6cqw; color:#ff6b6b; line-height:1.1}
.ov-tag{font-size:4cqw; color:#fafafa; background:rgba(10,10,10,.6); padding:.3em .6em; border-radius:.4em}
.ov-book{font-size:3.4cqw; color:#fafafa; letter-spacing:.06em}
.ov-plank{font-size:5.4cqw; color:#f6e7c6; text-transform:uppercase; letter-spacing:.02em; text-shadow:0 2px 0 rgba(40,22,8,.85), 0 0 14px rgba(40,22,8,.6)}
.ov-plank small{display:block; font-size:.48em; text-transform:none; letter-spacing:0}
/* overlay positions measured on the generated 3:2 paintings */
#ov-therapy{left:37%; top:8%; width:28.5%; height:21%; font-size:2.35cqw; line-height:1.15}
#ov-town{left:28.5%; top:36%; width:47.5%; height:25.5%}
#ov-kid{left:28.5%; top:11%; width:43.5%; height:35%; font-size:6.6cqw}
#ov-hospital{left:66.2%; top:22.6%; width:16%; height:7.5%; font-size:2.6cqw; line-height:1.05; text-shadow:0 0 6px rgba(255,80,80,.6)}
#ov-wallet{left:5%; bottom:5%}
#ov-dmitry{left:47%; top:66%; width:20%; height:12%; transform:rotate(-7deg)}
#ov-alina{left:31%; top:55%; width:35%; height:28%; font-size:3.8cqw}
/* END_BLOCK_PICTURES */

/* START_BLOCK_PARTNERS: auction grid in the Iteration 4 look. Every cell is a <button data-slot>: .held = holder name only (dim named-cell style), .free = dim "Become a partner +" */
.pgrid{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r); overflow:hidden}
.pcell{display:grid; place-items:center; align-content:center; gap:6px; min-width:0; min-height:120px; padding:18px; background:var(--bg); color:var(--dim); font-size:24px; text-align:center; text-decoration:none; overflow-wrap:anywhere}
button.pcell{width:100%; border:0; border-radius:0; line-height:1.15; cursor:pointer; transition:color .15s, background .15s, opacity .15s}
button.pcell:focus-visible{outline-offset:-6px}
.pcell.held:hover{color:var(--text); background:var(--bg-2)}
.pcell.free{color:rgba(250,250,250,.26)}
.pcell.free:hover{color:var(--text); background:var(--bg-2)}
.partner-msg{margin:18px 0 0; color:var(--muted); font-size:15.5px}
@media (max-width:760px){ .pgrid{grid-template-columns:repeat(2,minmax(0,1fr))} .pcell{min-height:96px; font-size:21px} .pcell:last-child:nth-child(odd){grid-column:1 / -1} }
/* Auction + rename dialog: reuses .modal, .form, .field, .demo-box, .status */
.modal.slot-dlg{width:min(480px, calc(100vw - 32px)); max-height:calc(100dvh - 32px); overflow:auto}
.slot-where{margin:0; font-size:15px; line-height:1.5; color:var(--muted)}
.slot-price{font:400 56px/1 var(--serif); font-variation-settings:var(--serif-axes)}
.slot-dlg .modal-head .label a{color:var(--text); text-underline-offset:3px}
.slot-dlg .field{width:100%}
.rename-box{display:grid; gap:12px; padding-top:18px; border-top:1px solid var(--line-2)}
.rename-title{margin:0; font:400 17px/1.35 var(--sans); color:var(--text)}
.rename-row{display:flex; flex-wrap:wrap; gap:10px}
.rename-row .field{flex:1 1 180px; width:auto}
.rename-out{display:grid; gap:12px; justify-items:start}
.rename-out .status{min-height:0; margin:0}
.rn-brand{max-width:100%; white-space:normal; font-size:22px; padding:10px 0}
.rn-brand .brand-mark{flex:none; width:34px; height:34px; border-radius:9px; font-size:21px}
/* END_BLOCK_PARTNERS */

/* START_BLOCK_HELLO_TAG */
.hello-tag{display:inline-flex; flex-direction:column; max-width:100%; border:2px solid var(--warn); border-radius:12px; overflow:hidden; background:var(--text); color:var(--bg); transform:rotate(-2deg)}
.hello-tag b{background:var(--warn); color:#fff; font-style:normal; font-size:12.5px; letter-spacing:.14em; text-transform:uppercase; padding:7px 14px}
.hello-tag > span{font-size:clamp(16px,1.8vw,19px); line-height:1.35; font-style:normal; padding:8px 18px 10px}
/* END_BLOCK_HELLO_TAG */

/* START_BLOCK_ADS: app "Ads" page; banners reuse the .hello-tag look (red strip + white body) */
.ads-list{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr)); gap:28px 24px; padding:10px 6px}
.ad-item{display:grid; gap:10px; justify-items:start; min-width:0; max-width:560px}
.ad-item:nth-child(odd) .ad-tag{transform:rotate(-2deg)}
.ad-item:nth-child(even) .ad-tag{transform:rotate(1.5deg)}
.ad-tag{max-width:100%; min-width:0}
.ad-tag > span{overflow-wrap:anywhere}
.ad-meta{margin:0; font-size:14px; color:var(--muted); overflow-wrap:anywhere}
.ad-meta a{color:var(--text); text-underline-offset:3px}
.ads-empty a{color:var(--text); text-underline-offset:3px}
.ads-foot{margin:0}
/* END_BLOCK_ADS */

/* START_BLOCK_MARQUEE */
.marquee{overflow:hidden; white-space:nowrap; border-bottom:1px solid var(--line); margin-top:-1px}
.marquee-in{display:inline-block; padding-block:16px; animation:slide 50s linear infinite; font-size:17px; font-style:normal; color:var(--muted)}
.marquee-in span{margin-right:48px}
.marquee-in span::before{content:"✕"; font-style:normal; color:var(--warn); margin-right:16px}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
/* END_BLOCK_MARQUEE */

/* START_BLOCK_CARDS3 */
.cards3{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin-bottom:40px}
.cards3 .card{padding:26px; display:grid; gap:10px; align-content:start}
.cards3 .big{font-size:34px; line-height:1}
.cards3 p{color:var(--muted)}
@media (max-width:820px){ .cards3{grid-template-columns:1fr} }
/* END_BLOCK_CARDS3 */

/* START_BLOCK_SELFTEST */
.test-grid{display:grid; grid-template-columns:1.3fr 1fr; gap:20px; align-items:start}
.checklist{display:grid; overflow:hidden}
.checklist label{display:flex; gap:14px; align-items:flex-start; padding:15px 20px; border-bottom:1px solid var(--line); cursor:pointer; font-size:17px; line-height:1.45}
.checklist label:last-child{border-bottom:0}
.checklist label:hover{background:var(--card-2)}
.checklist input{appearance:none; -webkit-appearance:none; flex:none; width:22px; height:22px; margin:1px 0 0; border:1.5px solid var(--line-2); border-radius:6px; display:grid; place-items:center; cursor:pointer; background:none} /* margin-top centers the 22px box on the first 24.65px text line */
.checklist input:checked{background:var(--warn); border-color:var(--warn)}
.checklist input:checked::after{content:"✓"; color:#fff; font-size:14px; line-height:1}
.diagnosis{position:sticky; top:90px; padding:26px; display:grid; gap:14px}
.meter{height:8px; border-radius:99px; overflow:hidden; background:var(--card-2)}
.meter i{display:block; height:100%; width:0; background:var(--warn); transition:width .3s}
.rx{font-style:normal; color:var(--muted); border-top:1px dashed var(--line-2); padding-top:12px}
.diagnosis .pill{justify-self:start}
@media (max-width:880px){ .test-grid{grid-template-columns:1fr} .diagnosis{position:static} }
/* END_BLOCK_SELFTEST */

/* START_BLOCK_STEPS */
.steps{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; counter-reset:step}
.steps li{background:var(--bg); padding:22px 22px 24px; display:grid; gap:6px; align-content:start; counter-increment:step}
.steps li::before{content:counter(step, decimal-leading-zero); font-size:34px; line-height:1; color:var(--dim); font-variant-numeric:lining-nums}
.steps h3{font-size:24px; line-height:1.1}
.steps p{color:var(--muted); font-size:16px}
/* END_BLOCK_STEPS */

/* START_BLOCK_TILES */
.tiles{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px}
.tile{position:relative; padding:20px 22px; display:grid; gap:6px; align-content:start}
.tile b{font-size:28px; line-height:1; font-style:normal}
.tile > span{font-size:24px; line-height:1.1}
.tile small{color:var(--dim); font-size:14.5px}
.tile .chip{position:absolute; top:16px; right:16px; font-style:normal}
@media (max-width:900px){ .tiles{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:560px){ .tiles{grid-template-columns:1fr} }
/* END_BLOCK_TILES */

/* START_BLOCK_RELAPSE_FAQ_TOWN */
.relapse{margin-top:28px; display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:12px 20px; text-align:center}
.faq{max-width:860px}
.town{padding-top:0}
.town .pic img{aspect-ratio:3/2}
/* END_BLOCK_RELAPSE_FAQ_TOWN */

/* START_BLOCK_DISPLAY_FACE: the serif is kept only for headings (h1-h3, .serif) and large accent text; everything else is Onest */
.steps li::before, .tile > span, .pcell, .timer-out, .sim-start p, .book b, .ov{font-family:var(--serif); font-variation-settings:var(--serif-axes)}
/* END_BLOCK_DISPLAY_FACE */

/* START_BLOCK_APP_RESTORED: shelf (v1), timer (v1), broken assistant (v2), rock simulator (v2) */
.shelf{display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:14px}
.book{aspect-ratio:2/3; border-radius:3px 8px 8px 3px; padding:14px 12px; display:flex; flex-direction:column; justify-content:space-between; color:#fff; box-shadow:inset 6px 0 0 rgba(0,0,0,.2), 0 12px 20px -14px rgba(0,0,0,.9); transition:transform .2s}
.book:hover{transform:translateY(-6px) rotate(-1deg)}
.book b{font-size:19px; line-height:1.1; font-style:normal}
.book span{font-size:13px; opacity:.85; line-height:1.25}
.timer-card{padding:24px; display:grid; gap:12px}
.timer-card pre{margin:0; background:var(--bg-2); border:1px solid var(--line); border-radius:12px; padding:14px 16px; overflow-x:auto; font-size:15.5px; line-height:1.5; color:var(--muted)}
.timer-out{font-size:40px; line-height:1; font-variant-numeric:lining-nums tabular-nums; min-width:3.2em}
.bubble.err{border-left:3px solid var(--warn)}
code.leak{display:block; margin:10px 0 6px; padding:10px 12px; border-radius:8px; background:#1a0f0f; color:#ffb4ae; font-size:14px; line-height:1.4; word-break:break-all}
/* BUG_FIX_CONTEXT: with width:auto, aspect-ratio 16/9 transfers min-height:240px into a 427px minimum width, so on phones (<~460px) the scene overflowed the pane and the top-right full-screen button sat off-screen. An explicit width:100% + min-width:0 keeps the box inside the pane; the height then clamps to 240px. */
.sim{position:relative; width:100%; min-width:0; border-radius:var(--r); overflow:hidden; background:linear-gradient(#A9D2F2,#DCEFFB 60%,#7DB36A 60%); aspect-ratio:16/9; min-height:240px; border:1px solid var(--line)}
.sim canvas{display:block; width:100%; height:100%}
.sim::after{content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(ellipse 75% 70% at 50% 45%, transparent 55%, rgba(10,10,10,.55) 80%, rgba(10,10,10,.92) 100%)}
.sim-start{position:absolute; inset:0; z-index:2; display:grid; place-items:center; align-content:center; gap:14px; text-align:center; padding:20px; background:rgba(10,10,10,.45)}
.sim-start p{font-size:clamp(24px,3.4vw,36px); line-height:1.1}
.hud{position:absolute; z-index:2; left:14px; top:14px; display:flex; gap:8px; font-size:14px}
.hud span{background:rgba(10,10,10,.72); padding:6px 10px; border-radius:999px}
.locs{display:flex; flex-wrap:wrap; gap:8px}
.loc{border:1px solid var(--line-2); background:none; border-radius:999px; padding:8px 14px; cursor:pointer; font-size:15px; color:var(--text)}
.loc[aria-pressed="true"]{background:var(--text); color:var(--bg); border-color:var(--text)}
.loc.locked{color:var(--dim); border-style:dashed}
.sim-wrap, .sim-bar{display:grid; gap:26px}
.sim-full{position:absolute; z-index:3; top:14px; right:14px; width:40px; height:40px; padding:0; display:grid; place-items:center; border:0; border-radius:50%; background:rgba(10,10,10,.72); color:#fff; cursor:pointer}
.sim-full:hover{background:rgba(10,10,10,.9)}
.sim-full .ic-out{display:none}
.sim-wrap.is-full .sim-full .ic-in{display:none}
.sim-wrap.is-full .sim-full .ic-out{display:block}
.sim-wrap.is-full{position:fixed; inset:0; z-index:100; display:block; background:#000; width:100%; height:100%}
.sim-wrap.is-full .sim{position:absolute; inset:0; aspect-ratio:auto; min-height:0; border:0; border-radius:0}
.sim-wrap.is-full .sim-bar{position:absolute; left:0; right:0; bottom:0; z-index:3; gap:10px; padding:16px max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); background:linear-gradient(transparent, rgba(10,10,10,.7)); justify-items:center}
.sim-wrap.is-full .sim-bar .note{order:-1; text-align:center; color:#fff; text-shadow:0 1px 3px rgba(0,0,0,.8)}
.sim-wrap.is-full .locs{justify-content:center}
.sim-wrap.is-full .loc:not([aria-pressed="true"]){background:rgba(10,10,10,.6)}
.sim-wrap.is-full .hud{top:max(14px, env(safe-area-inset-top))}
.sim-wrap.is-full .sim-full{top:max(14px, env(safe-area-inset-top))}
.sim-wrap.is-full canvas{touch-action:none}
html.rock-full, html.rock-full body{overflow:hidden}
/* END_BLOCK_APP_RESTORED */

@media (prefers-reduced-motion:reduce){ *{animation:none!important; transition:none!important} }