/* ==========================================================================
   DateTruth – hand-written CSS. No build step.
   Editorial / zine / poster. Paper, ink, one hot signal colour, a highlighter.
   ========================================================================== */

/* ---------- Fonts (self-hosted, variable, font-display: swap) ------------- */
@font-face{font-family:"DT Display";font-weight:200 800;font-style:normal;font-display:swap;src:url(/fonts/bricolage-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"DT Display";font-weight:200 800;font-style:normal;font-display:swap;src:url(/fonts/bricolage-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"DT Display";font-weight:200 800;font-style:normal;font-display:swap;src:url(/fonts/onest-cyrillic.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"DT Display";font-weight:200 800;font-style:normal;font-display:swap;src:url(/fonts/onest-cyrillic-ext.woff2) format("woff2");unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}

@font-face{font-family:"DT Text";font-weight:100 900;font-style:normal;font-display:swap;src:url(/fonts/onest-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"DT Text";font-weight:100 900;font-style:normal;font-display:swap;src:url(/fonts/onest-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"DT Text";font-weight:100 900;font-style:normal;font-display:swap;src:url(/fonts/onest-cyrillic.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"DT Text";font-weight:100 900;font-style:normal;font-display:swap;src:url(/fonts/onest-cyrillic-ext.woff2) format("woff2");unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}

@font-face{font-family:"DT Mono";font-weight:100 800;font-style:normal;font-display:swap;src:url(/fonts/jbmono-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"DT Mono";font-weight:100 800;font-style:normal;font-display:swap;src:url(/fonts/jbmono-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"DT Mono";font-weight:100 800;font-style:normal;font-display:swap;src:url(/fonts/jbmono-cyrillic.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}

@font-face{font-family:"DT Serif";font-weight:100 900;font-style:italic;font-display:swap;src:url(/fonts/fraunces-italic-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"DT Serif";font-weight:100 900;font-style:italic;font-display:swap;src:url(/fonts/fraunces-italic-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"DT Serif";font-weight:100 900;font-style:italic;font-display:swap;src:url(/fonts/sourceserif-italic-cyrillic.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}

/* ---------- Tokens -------------------------------------------------------- */
:root{
  color-scheme:light;
  --paper:#f3eee3;
  --paper-deep:#e8e0cf;
  --card:#fcf9f2;
  --ink:#17130f;
  --ink-soft:#4d443a;
  --ink-faint:#7d7263;
  --signal:#ee4b2b;
  --signal-text:#c23519;      /* signal tuned for small text on paper (AA) */
  --on-signal:#17130f;
  --marker:#d7f045;
  --on-marker:#17130f;
  --shadow-c:#17130f;
  --rule:rgba(23,19,15,.16);
  --grain:.5;
  --rv-bg:#17130f;
  --rv-fg:#f3eee3;
  --rv-accent:#d7f045;
  --rv-soft:#b9ae9c;

  --f-display:"DT Display","Bricolage Grotesque","Arial Black","Helvetica Neue",system-ui,sans-serif;
  --f-text:"DT Text","Onest",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --f-mono:"DT Mono","JetBrains Mono",ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
  --f-serif:"DT Serif","Fraunces",Georgia,"Times New Roman",serif;

  --bw:2px;
  --r:12px;
  --r-s:8px;
  --sh:4px 4px 0 var(--shadow-c);
  --sh-s:2px 2px 0 var(--shadow-c);
  --sh-l:7px 7px 0 var(--shadow-c);
  --ease:cubic-bezier(.2,.8,.2,1);
  --wrap:1240px;
  --gut:max(18px,env(safe-area-inset-left,0px),env(safe-area-inset-right,0px));
  --dirx:1;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --paper:#14110e;
    --paper-deep:#1e1a15;
    --card:#1f1b16;
    --ink:#f3ede0;
    --ink-soft:#cbc1ae;
    --ink-faint:#968b79;
    --signal:#ff5b38;
    --signal-text:#ff7b5c;
    --shadow-c:#3b352c;
    --rule:rgba(243,237,224,.16);
    --grain:.28;
    --rv-bg:#f3ede0;
    --rv-fg:#17130f;
    --rv-accent:#c9331a;
    --rv-soft:#5d5447;
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --paper:#14110e;
  --paper-deep:#1e1a15;
  --card:#1f1b16;
  --ink:#f3ede0;
  --ink-soft:#cbc1ae;
  --ink-faint:#968b79;
  --signal:#ff5b38;
  --signal-text:#ff7b5c;
  --shadow-c:#3b352c;
  --rule:rgba(243,237,224,.16);
  --grain:.28;
  --rv-bg:#f3ede0;
  --rv-fg:#17130f;
  --rv-accent:#c9331a;
  --rv-soft:#5d5447;
}
:root[dir="rtl"]{--dirx:-1}

/* Non-Latin scripts: system stacks (no web font for them) */
:lang(ja){--f-text:"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic UI","Yu Gothic",Meiryo,"Noto Sans JP",system-ui,sans-serif;--f-display:"Hiragino Sans","Yu Gothic",Meiryo,"Noto Sans JP",system-ui,sans-serif}
:lang(zh){--f-text:"PingFang SC","Microsoft YaHei UI","Microsoft YaHei","Noto Sans SC","Source Han Sans SC",system-ui,sans-serif;--f-display:"PingFang SC","Microsoft YaHei","Noto Sans SC",system-ui,sans-serif}
:lang(ko){--f-text:"Apple SD Gothic Neo","Malgun Gothic","Noto Sans KR",system-ui,sans-serif;--f-display:"Apple SD Gothic Neo","Malgun Gothic","Noto Sans KR",system-ui,sans-serif}
:lang(ar){--f-text:"Segoe UI","Noto Sans Arabic","Noto Naskh Arabic",Tahoma,"Geeza Pro",system-ui,sans-serif;--f-display:"Segoe UI","Noto Sans Arabic",Tahoma,"Geeza Pro",system-ui,sans-serif;--f-serif:"Noto Naskh Arabic","Segoe UI",serif}
:lang(hi){--f-text:"Noto Sans Devanagari","Nirmala UI","Mangal","Kohinoor Devanagari",system-ui,sans-serif;--f-display:"Noto Sans Devanagari","Nirmala UI","Mangal",system-ui,sans-serif}
:lang(ja),:lang(zh),:lang(ko),:lang(ar),:lang(hi){--ls:0}
:lang(ar) .mono,:lang(ja) .mono,:lang(zh) .mono,:lang(ko) .mono,:lang(hi) .mono{text-transform:none}

/* ---------- Reset / base -------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
svg.sprite{position:absolute;width:0;height:0;overflow:hidden}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:76px;background:var(--paper)}
body{margin:0;min-height:100vh;min-height:100dvh;background:var(--paper);color:var(--ink);font:400 1rem/1.55 var(--f-text);font-optical-sizing:auto;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;overflow-x:clip;position:relative}
/* paper grain (pure CSS: inline SVG turbulence) */
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:var(--grain);mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .32 0 0 0 0 .26 0 0 0 0 .18 0 0 0 .34 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
:root[data-theme="dark"] body::before{mix-blend-mode:screen}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) body::before{mix-blend-mode:screen}}

h1,h2,h3,h4,p,ul,ol,figure,blockquote{margin:0}
ul,ol{padding:0;list-style:none}
img,svg{max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0;padding:0}
a{color:inherit;text-decoration-thickness:2px;text-underline-offset:.18em}
a:hover{text-decoration-color:var(--signal)}
mark{background:none;color:inherit}
::selection{background:var(--marker);color:var(--on-marker)}
[hidden]{display:none!important}
:focus{outline:none}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px;box-shadow:0 0 0 6px var(--marker);border-radius:var(--r-s)}
.sr-only{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;margin:-1px;padding:0;border:0}
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.skip{position:absolute;inset-inline-start:12px;top:-60px;z-index:100;background:var(--ink);color:var(--paper);padding:10px 16px;border-radius:var(--r-s);font-weight:700;text-decoration:none;transition:top .15s}
.skip:focus{top:12px}
.ico{width:1.15em;height:1.15em;flex:none;fill:none;stroke:currentColor}
.mono{font-family:var(--f-mono);font-size:.74rem;letter-spacing:.07em;text-transform:uppercase}
.kicker{font:700 .74rem/1.2 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--signal-text);margin-bottom:.6rem}
.section-title{font:800 clamp(1.75rem,4.2vw,2.8rem)/1.02 var(--f-display);letter-spacing:-.03em;text-wrap:balance}
.section-sub{color:var(--ink-soft);margin-top:.7rem;max-width:56ch;text-wrap:pretty}
.link-arrow{font-weight:700;display:inline-block;margin-top:1rem}

/* ---------- Buttons, stickers, form atoms --------------------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55em;min-height:48px;padding:.55em 1.25em;border:var(--bw) solid var(--ink);border-radius:var(--r-s);font:700 1rem/1.1 var(--f-text);text-decoration:none;color:var(--ink);background:var(--card);box-shadow:var(--sh);transition:transform .12s var(--ease),box-shadow .12s var(--ease),background .12s;-webkit-tap-highlight-color:transparent;user-select:none;text-align:center}
.btn:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--shadow-c)}
.btn:active{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--shadow-c)}
.btn--ink{background:var(--ink);color:var(--paper)}
.btn--signal{background:var(--signal);color:var(--on-signal)}
.btn--marker{background:var(--marker);color:var(--on-marker)}
.btn--ghost{background:transparent}
.btn--sm{min-height:44px;padding:.4em .95em;font-size:.92rem;box-shadow:var(--sh-s)}
.btn[disabled]{opacity:.6;pointer-events:none}
.icon-btn{display:inline-flex;align-items:center;justify-content:center;gap:.35em;min-width:44px;min-height:44px;padding:0 .6em;border:var(--bw) solid var(--ink);border-radius:var(--r-s);background:var(--card);box-shadow:var(--sh-s);font:700 .8rem/1 var(--f-mono);letter-spacing:.06em;list-style:none;transition:transform .12s var(--ease),box-shadow .12s var(--ease)}
.icon-btn::-webkit-details-marker{display:none}
.icon-btn:hover{transform:translate(-1px,-1px);box-shadow:3px 3px 0 var(--shadow-c)}
.icon-btn:active{transform:translate(2px,2px);box-shadow:none}

.sticker{display:inline-block;font:700 .78rem/1 var(--f-mono);letter-spacing:.09em;text-transform:uppercase;background:var(--marker);color:var(--on-marker);border:var(--bw) solid var(--ink);padding:.5em .85em;box-shadow:var(--sh-s);border-radius:4px}
.sticker--tilt-l{transform:rotate(-3.5deg)}
.sticker--tilt-r{transform:rotate(3deg);background:var(--card);color:var(--ink)}
.input{width:100%;min-height:48px;padding:.5em .85em;border:var(--bw) solid var(--ink);border-radius:var(--r-s);background:var(--card);color:var(--ink);box-shadow:inset 3px 3px 0 var(--rule)}
.input::placeholder{color:var(--ink-faint)}
.field-label{display:block;font:700 .75rem/1 var(--f-mono);text-transform:uppercase;letter-spacing:.09em;margin-bottom:.4rem}

.skeleton{border-radius:6px;background:linear-gradient(100deg,var(--paper-deep) 30%,var(--card) 50%,var(--paper-deep) 70%);background-size:220% 100%;animation:sk 1.4s linear infinite}
.skeleton--line{height:2.2rem;margin-block:.6rem}
.skeleton--short{width:60%}
.skeleton--block{height:240px}
@keyframes sk{to{background-position:-220% 0}}

/* ---------- Header --------------------------------------------------------- */
.site-header{position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--paper) 92%,transparent);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border-bottom:var(--bw) solid var(--ink);padding-top:env(safe-area-inset-top,0px)}
.site-header__in{display:flex;align-items:center;gap:1rem;min-height:64px}
.logo{display:inline-block;text-decoration:none;line-height:1}
.wordmark{display:inline-flex;align-items:baseline;font:800 1.7rem/1 var(--f-display);letter-spacing:-.045em;white-space:nowrap}
.wordmark__date{color:var(--ink)}
.wordmark__truth{position:relative;color:var(--signal-text);font-family:var(--f-serif);font-style:italic;font-weight:700;letter-spacing:-.03em;margin-inline-start:.02em;padding-inline-end:.05em}
.wordmark__scribble{position:absolute;inset-inline:-4%;bottom:-.34em;width:108%;height:.34em;color:var(--ink);overflow:visible}
.site-nav{display:flex;gap:.4rem;margin-inline-start:auto}
.site-nav__link{display:inline-flex;align-items:center;min-height:44px;padding:0 .8em;font-weight:600;text-decoration:none;border-radius:var(--r-s)}
.site-nav__link:hover{background:var(--marker);color:var(--on-marker)}
.site-nav__soon{font-family:var(--f-mono);font-size:.78rem;letter-spacing:.08em;text-transform:uppercase}
.site-tools{display:flex;gap:.55rem;align-items:center}
.theme-btn .ico--sun{display:none}
:root[data-theme="dark"] .theme-btn .ico--moon{display:none}
:root[data-theme="dark"] .theme-btn .ico--sun{display:block}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .theme-btn .ico--moon{display:none}:root:not([data-theme="light"]) .theme-btn .ico--sun{display:block}}
.lang{position:relative}
.lang__btn{cursor:pointer;user-select:none}
.lang[open] .lang__btn{background:var(--marker);color:var(--on-marker)}
.lang__list{position:absolute;inset-inline-end:0;top:calc(100% + 10px);z-index:50;width:min(260px,calc(100vw - 2 * var(--gut)));max-height:min(70vh,520px);overflow:auto;background:var(--card);border:var(--bw) solid var(--ink);border-radius:var(--r);box-shadow:var(--sh-l);padding:.4rem;display:grid;grid-template-columns:1fr 1fr;gap:2px}
.lang__list a{display:flex;align-items:center;min-height:44px;padding:0 .7em;border-radius:6px;text-decoration:none;font-weight:600}
.lang__list a:hover{background:var(--paper-deep)}
.lang__list a[aria-current]{background:var(--ink);color:var(--paper)}

/* ---------- Intro ----------------------------------------------------------- */
.intro{padding-block:clamp(1.6rem,4vw,3rem) clamp(.8rem,2vw,1.4rem);position:relative}
.intro__in{position:relative}
.intro .sticker{margin-bottom:1rem}
.intro__title{font:800 clamp(2.5rem,7vw,5.6rem)/.94 var(--f-display);letter-spacing:-.055em;max-width:16ch;text-wrap:balance}
.intro__title mark{position:relative;white-space:normal;display:inline;padding:0 .12em;margin-inline:-.12em;background:linear-gradient(transparent 58%,var(--marker) 58%,var(--marker) 93%,transparent 93%);-webkit-box-decoration-break:clone;box-decoration-break:clone;color:inherit}
:root[data-theme="dark"] .intro__title mark{color:inherit}
.intro__lede{margin-top:clamp(.9rem,2vw,1.4rem);max-width:52ch;font-size:clamp(1rem,1.8vw,1.2rem);line-height:1.5;color:var(--ink)}
.intro__spoiler{margin-top:.7rem;display:flex;flex-wrap:wrap;align-items:center;gap:.4rem 1.2rem;font:italic 500 clamp(1.05rem,2vw,1.35rem)/1.3 var(--f-serif);color:var(--ink-soft)}
.intro__start{display:inline-flex;align-items:center;gap:.4rem;font:700 .8rem/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;text-decoration:none;color:var(--signal-text)}
.intro__arrow{width:34px;height:48px;fill:none;stroke:currentColor;color:var(--signal-text);animation:bob 2.4s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(6px) rotate(3deg)}}

/* ---------- Tool layout ----------------------------------------------------- */
.tool{padding-block:clamp(.5rem,2vw,1.5rem) clamp(2rem,5vw,4rem)}
.notice{background:var(--marker);color:var(--on-marker);border:var(--bw) solid var(--ink);padding:1rem;border-radius:var(--r-s)}
.tool__grid{display:grid;gap:clamp(1.1rem,2.4vw,1.75rem);grid-template-columns:minmax(0,1fr);grid-template-areas:"who" "hero" "wish";align-items:start}
.who{grid-area:who}.hero{grid-area:hero}.wish{grid-area:wish}
@media (min-width:1020px){
  .tool__grid{grid-template-columns:minmax(0,1.12fr) minmax(380px,.88fr);grid-template-areas:"who hero" "wish hero"}
  .tool__grid .hero{position:sticky;top:80px}
}
.card{position:relative;background:var(--card);border:var(--bw) solid var(--ink);border-radius:var(--r);box-shadow:var(--sh);padding:clamp(1.1rem,2.6vw,1.8rem)}
.card__tag{display:inline-block;font:700 .76rem/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;margin-bottom:1rem;padding:.42em .7em;background:var(--ink);color:var(--paper);border-radius:4px}
.card__tag--signal{background:var(--signal);color:var(--on-signal)}

/* ---------- Sentence & blanks ----------------------------------------------- */
.sentence__text{font:700 clamp(1.3rem,2.9vw,1.9rem)/1.95 var(--f-display);letter-spacing:-.025em;text-wrap:pretty}
.blank{position:relative;display:inline-flex;align-items:center;gap:.18em;vertical-align:baseline;min-height:1.5em;padding:0 .3em .02em .36em;margin-inline:.05em;color:var(--ink);background:color-mix(in srgb,var(--marker) 62%,transparent);border-bottom:3px solid var(--signal);border-radius:5px 5px 0 0;white-space:nowrap;cursor:pointer;transition:background .15s,transform .12s var(--ease);line-height:1.35}
:root[data-theme="dark"] .blank{color:var(--ink);background:color-mix(in srgb,var(--marker) 30%,transparent)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .blank{background:color-mix(in srgb,var(--marker) 30%,transparent)}}
.blank:hover{background:var(--marker);color:var(--on-marker);transform:translateY(-2px)}
.blank:focus-within{outline:3px solid var(--ink);outline-offset:3px;background:var(--marker);color:var(--on-marker)}
.blank__v{pointer-events:none}
.blank__chev{width:.55em;height:.55em;stroke-width:2;pointer-events:none;color:var(--signal-text);flex:none}
.blank:hover .blank__chev,.blank:focus-within .blank__chev{color:var(--on-marker)}
.blank__sel{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;font-size:16px;appearance:none;-webkit-appearance:none;border:0;background:transparent}
.blank__sel:focus-visible{outline:0;box-shadow:none}
.blank--num{padding-inline:.25em}
.blank__num{width:2.1ch;min-width:2ch;padding:0;border:0;background:none;text-align:center;font:inherit;color:inherit;appearance:textfield;-moz-appearance:textfield;letter-spacing:0;cursor:text;min-height:1.4em}
.blank__num::-webkit-outer-spin-button,.blank__num::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.blank__num:focus-visible{outline:0;box-shadow:none}
.blank--bad{border-bottom-color:var(--signal);animation:shake .3s}
@keyframes shake{25%{transform:translateX(-3px)}75%{transform:translateX(3px)}}

.musts{margin-top:1.3rem;padding-top:1.2rem;border-top:2px dashed var(--rule)}
.musts__title{font:700 .74rem/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:.7rem}
.musts__list{display:flex;flex-wrap:wrap;gap:.55rem}
.musts__none{font:italic 500 1.05rem/1.2 var(--f-serif);color:var(--ink-soft);align-self:center}
.chip{display:inline-flex;align-items:center;gap:.45em;min-height:40px;padding:.2em .5em .2em .85em;border:var(--bw) solid var(--ink);border-radius:999px;background:var(--card);font:600 .9rem/1.2 var(--f-text);box-shadow:var(--sh-s);transition:transform .12s var(--ease),background .12s;animation:pop .35s var(--ease) both;max-width:100%;text-align:start}
.chip span{overflow-wrap:anywhere}
.chip .ico{width:.8em;height:.8em;stroke-width:2.4}
.chip--req .ico{background:var(--ink);color:var(--paper);border-radius:50%;width:1.35em;height:1.35em;padding:.32em;box-sizing:border-box}
.chip--req:hover{background:var(--signal);color:var(--on-signal)}
.chip--req:hover .ico{background:var(--on-signal);color:var(--signal)}
.chip--add{border-style:dashed;box-shadow:none;background:transparent;padding-inline-end:.9em}
.chip--add:hover{background:var(--marker);color:var(--on-marker)}
@keyframes pop{from{transform:scale(.7) rotate(-4deg);opacity:0}}

.clock{margin-top:1.1rem;display:flex;align-items:center;gap:.6rem;font:500 .88rem/1.35 var(--f-mono);color:var(--ink-soft)}
.clock__dot{width:.7rem;height:.7rem;border-radius:50%;background:var(--signal);flex:none;animation:blink 2s ease-in-out infinite}
@keyframes blink{50%{opacity:.25}}

/* ---------- Hero number ------------------------------------------------------- */
.hero{overflow:hidden}
.hero::after{content:"";position:absolute;inset-inline-end:-30px;top:-30px;width:110px;height:110px;border-radius:50%;background:var(--marker);opacity:.0;pointer-events:none}
.hero__label{font:700 clamp(1.05rem,2.2vw,1.3rem)/1.2 var(--f-display);letter-spacing:-.02em}
.hero__numwrap{container-type:inline-size;margin-top:.5rem;position:relative}
.hero__num{display:flex;align-items:flex-end;justify-content:flex-start;min-height:1em;font:800 clamp(2.4rem,calc(100cqw / var(--w,9)),7.4rem)/1 var(--f-display);letter-spacing:-.04em;font-feature-settings:"tnum" 1,"lnum" 1;color:var(--ink);white-space:nowrap;direction:ltr}
.hero__placeholder{visibility:hidden}
.d{position:relative;display:inline-block;width:.62em;height:1.04em;overflow:hidden;text-align:center;flex:none}
.d__strip{display:block;transition:transform .85s var(--ease) var(--delay,0ms);transform:translateY(calc(var(--v,0) * -1.04em));will-change:transform}
.d__strip i{display:block;height:1.04em;line-height:1.04em;font-style:normal}
.sep{display:inline-block;width:.3em;text-align:center;flex:none;height:1.04em;line-height:1.04em;color:var(--signal-text)}
.hero__bar{display:block;height:10px;margin-top:.3rem;border:var(--bw) solid var(--ink);border-radius:99px;background:var(--paper-deep);overflow:hidden;position:relative}
.hero__bar::after{content:"";position:absolute;inset:0;background:var(--marker);transform:scaleX(1);transform-origin:left;transition:transform .5s var(--ease)}
[dir=rtl] .hero__bar::after{transform-origin:right}
[data-busy="1"] .hero__bar::after{background:repeating-linear-gradient(115deg,var(--marker) 0 14px,var(--signal) 14px 28px);background-size:56px 100%;animation:barber .6s linear infinite}
[data-busy="1"] .hero__num{opacity:.5}
.hero__num{transition:opacity .25s}
@keyframes barber{to{background-position:56px 0}}
.hero__world{margin-top:.8rem;font:italic 500 1.12rem/1.3 var(--f-serif);color:var(--ink-soft)}
.hero__world b{font-style:normal;font-family:var(--f-display);font-weight:800;color:var(--ink)}
.hero__range{margin-top:.2rem;font:500 .78rem/1.3 var(--f-mono);color:var(--ink-faint)}

.crowd{margin-top:1rem;padding-top:.9rem;border-top:2px dashed var(--rule)}
.crowd__title{font:700 .72rem/1.3 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:.7rem}
.crowd__grid{display:grid;grid-template-columns:repeat(20,1fr);gap:clamp(3px,.8vw,5px);position:relative;direction:ltr}
.dot{display:block;aspect-ratio:1;border-radius:50%;background:var(--ink);transition:background .5s var(--ease),transform .5s var(--ease),opacity .5s var(--ease),border-color .5s;transition-delay:calc(var(--i,0) * 2.5ms);border:2px solid var(--ink);width:100%}
.crowd__grid .dot{cursor:default}
.dot--gone,.dot[data-s="gone"]{background:transparent;border-color:var(--rule);transform:scale(.62);opacity:.75}
.dot--taken,.dot[data-s="taken"]{background:radial-gradient(circle,var(--ink) 0 22%,transparent 24%);border-color:var(--ink);opacity:.85;transform:scale(.86)}
.dot--free,.dot[data-s="free"]{background:var(--signal);border-color:var(--ink);transform:scale(1.15);z-index:1;animation:pulse 1.8s ease-in-out infinite}
.dot[data-s="alive"]{background:var(--ink);border-color:var(--ink)}
@keyframes pulse{50%{box-shadow:0 0 0 4px color-mix(in srgb,var(--signal) 35%,transparent)}}
.crowd__legend{display:flex;flex-wrap:wrap;gap:.35rem 1rem;margin-top:.8rem;font:500 .74rem/1.2 var(--f-mono);color:var(--ink-soft)}
.crowd__legend li{display:inline-flex;align-items:center;gap:.4rem}
.crowd__legend .dot{width:12px;transition:none;animation:none;transform:none}
.crowd__note{margin-top:.5rem;font:italic 500 .92rem/1.3 var(--f-serif);color:var(--ink-soft)}
.tip{position:fixed;z-index:80;pointer-events:none;background:var(--ink);color:var(--paper);padding:.45em .7em;border-radius:6px;font:600 .8rem/1.25 var(--f-text);max-width:240px;transform:translate(-50%,calc(-100% - 12px));opacity:0;transition:opacity .12s}
.tip[data-on="1"]{opacity:1}

.hero__free{margin-top:.9rem;padding:.7rem .9rem;border:var(--bw) dashed var(--ink);border-radius:var(--r-s);font:600 1.02rem/1.35 var(--f-text);background:color-mix(in srgb,var(--signal) 14%,var(--card))}
.hero__free strong{font:800 1.5em/1 var(--f-display);letter-spacing:-.03em;color:var(--signal-text);font-variant-numeric:tabular-nums}
.hero__actions{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:.9rem}
.hero__actions .btn{flex:1 1 auto;min-height:46px;padding-inline:1em}
.hero__msg{margin-top:1rem;padding:.8rem 1rem;border:var(--bw) solid var(--ink);border-radius:var(--r-s);background:var(--marker);color:var(--on-marker);font-weight:600;display:flex;gap:.8rem;align-items:center;justify-content:space-between;flex-wrap:wrap}
.hero__msg .btn{min-height:40px;padding:.3em .9em;box-shadow:var(--sh-s)}

/* ---------- Wish list (accordion) ---------------------------------------------- */
.wish__head{display:flex;flex-wrap:wrap;gap:.9rem 1.5rem;justify-content:space-between;align-items:flex-start;margin-bottom:1.1rem}
.wish__sub{color:var(--ink-soft);max-width:44ch;font-size:.98rem}
.wish__actions{display:flex;gap:.6rem;flex-wrap:wrap}
.filters{display:grid;gap:.75rem}
.grp{border:var(--bw) solid var(--ink);border-radius:var(--r);background:var(--paper);overflow:clip;transition:box-shadow .15s}
.grp[data-open="true"]{background:var(--card);box-shadow:var(--sh-s)}
.grp__h{margin:0}
.grp__btn{width:100%;display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:.4rem .8rem;padding:.85rem 1rem;min-height:60px;text-align:start}
.grp__btn:hover{background:var(--paper-deep)}
.grp[data-open="true"] .grp__btn:hover{background:transparent}
.grp__name{font:800 1.28rem/1.1 var(--f-display);letter-spacing:-.025em}
.grp__blurb{grid-column:1;grid-row:2;font:italic 500 .95rem/1.25 var(--f-serif);color:var(--ink-soft)}
.grp__badge{grid-column:2;grid-row:1/3;min-width:2rem;height:2rem;display:inline-grid;place-items:center;padding:0 .5rem;border-radius:99px;border:var(--bw) solid var(--ink);font:800 .85rem/1 var(--f-mono);background:var(--paper-deep);color:var(--ink-faint)}
.grp__badge[data-n]:not([data-n="0"]){background:var(--signal);color:var(--on-signal);animation:pop .35s var(--ease)}
.grp__chev{grid-column:3;grid-row:1/3;transition:transform .25s var(--ease);width:1.1rem;height:1.1rem}
.grp[data-open="true"] .grp__chev{transform:rotate(180deg)}
.grp__panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s var(--ease)}
.grp[data-open="true"] .grp__panel{grid-template-rows:1fr}
.grp__inner{overflow:hidden;min-height:0}
.grp__body{padding:.2rem 1rem 1.2rem;display:grid;gap:1.6rem}
.crit{display:grid;gap:.7rem}
.crit__top{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem .7rem}
.crit__label{font:700 1.02rem/1.2 var(--f-text)}
.crit__tools{margin-inline-start:auto;display:flex;align-items:center;gap:.5rem}
.hint-btn{width:28px;height:28px;border:var(--bw) solid var(--ink);border-radius:50%;font:800 .8rem/1 var(--f-mono);display:inline-grid;place-items:center;background:var(--card);position:relative}
.hint-btn::after{content:"";position:absolute;inset:-8px}
.hint-btn[aria-expanded="true"]{background:var(--marker);color:var(--on-marker)}
.crit__hint{font:italic 500 .98rem/1.35 var(--f-serif);color:var(--ink-soft);max-width:58ch;padding-inline-start:.8rem;border-inline-start:3px solid var(--marker)}
.crit__flag{display:inline-block;width:.6rem;height:.6rem;border-radius:50%;background:var(--signal);margin-inline-end:.1rem;vertical-align:middle;transform:scale(0);transition:transform .25s var(--ease)}
.crit[data-active="1"] .crit__flag{transform:scale(1)}

.opts{display:flex;flex-wrap:wrap;gap:.5rem}
.opt{min-height:44px;padding:.35em 1em;border:var(--bw) solid var(--ink);border-radius:999px;background:var(--card);font:600 .95rem/1.15 var(--f-text);transition:transform .12s var(--ease),background .12s,box-shadow .12s;user-select:none;-webkit-tap-highlight-color:transparent}
.opt:hover{background:var(--paper-deep);transform:translateY(-1px)}
.opt[aria-pressed="true"]{background:var(--ink);color:var(--paper);box-shadow:var(--sh-s);transform:translate(-1px,-1px)}
.opt[aria-pressed="true"]::before{content:"✓";margin-inline-end:.4em;color:var(--marker);font-weight:800}
.opts--presets .opt{min-height:36px;padding:.2em .7em;font-size:.82rem;font-family:var(--f-mono);font-weight:600;border-width:1.5px}
.opts--presets .opt[aria-pressed="true"]::before{content:none}

.seg{display:inline-flex;border:var(--bw) solid var(--ink);border-radius:var(--r-s);overflow:hidden;background:var(--card);max-width:100%;flex-wrap:wrap}
.seg__b{min-height:44px;padding:.3em 1.05em;font:700 .93rem/1.15 var(--f-text);border-inline-start:var(--bw) solid var(--ink);transition:background .12s,color .12s;-webkit-tap-highlight-color:transparent;flex:1 1 auto}
.seg__b:first-child{border-inline-start:0}
.seg__b:hover{background:var(--paper-deep)}
.seg__b[aria-checked="true"]{background:var(--ink);color:var(--paper)}
.seg--small .seg__b{min-height:40px;padding:.25em .85em;font-size:.86rem}

.sw{display:inline-flex;align-items:center;gap:.7rem;min-height:44px;text-align:start;font-weight:600}
.sw__track{position:relative;width:56px;height:30px;border:var(--bw) solid var(--ink);border-radius:99px;background:var(--paper-deep);flex:none;transition:background .15s}
.sw__knob{position:absolute;top:2px;inset-inline-start:2px;width:22px;height:22px;border-radius:50%;background:var(--ink);transition:transform .2s var(--ease);box-shadow:0 0 0 0 transparent}
.sw[aria-checked="true"] .sw__track{background:var(--marker)}
:root[data-theme="dark"] .sw[aria-checked="true"] .sw__knob{background:var(--on-marker)}
.sw[aria-checked="true"] .sw__knob{transform:translateX(calc(26px * var(--dirx)))}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .sw[aria-checked="true"] .sw__knob{background:var(--on-marker)}}
.sw__txt{color:var(--ink-soft)}
.sw[aria-checked="true"] .sw__txt{color:var(--ink)}

/* range */
.range{display:grid;gap:.4rem}
.range__read{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .6rem;font-weight:600}
.range__to{color:var(--ink-faint);font:italic 500 1rem/1 var(--f-serif)}
.step{display:inline-flex;align-items:stretch;border:var(--bw) solid var(--ink);border-radius:var(--r-s);overflow:hidden;background:var(--card)}
.step__b{width:40px;min-height:44px;display:grid;place-items:center;transition:background .12s}
.step__b:hover{background:var(--marker);color:var(--on-marker)}
.step__b[disabled]{opacity:.3;pointer-events:none}
.step__b .ico{width:.8rem;height:.8rem}
.step__v{min-width:5.2em;padding:0 .6em;display:grid;place-items:center;border-inline:var(--bw) solid var(--ink);font:700 .95rem/1 var(--f-mono);font-variant-numeric:tabular-nums;white-space:nowrap;text-align:center}
.step[data-open="1"] .step__v{color:var(--ink-faint);font-weight:500}
.range__track{position:relative;height:44px;margin-inline:6px;--lo:0%;--hi:100%}
.range__rail{position:absolute;inset-inline:0;top:50%;height:12px;margin-top:-6px;border:var(--bw) solid var(--ink);border-radius:99px;background:var(--paper-deep);overflow:hidden}
.range__fill{position:absolute;top:0;bottom:0;inset-inline-start:var(--lo);inset-inline-end:calc(100% - var(--hi));background:var(--marker);border-inline:var(--bw) solid var(--ink)}
.range__in{position:absolute;inset:0;width:100%;height:100%;margin:0;background:none;pointer-events:none;appearance:none;-webkit-appearance:none;touch-action:pan-y}
.range__in::-webkit-slider-runnable-track{appearance:none;-webkit-appearance:none;background:none;height:44px;border:0}
.range__in::-moz-range-track{background:none;height:44px;border:0}
.range__in::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;pointer-events:auto;width:44px;height:44px;border:0;border-radius:50%;cursor:grab;background:radial-gradient(circle,var(--signal) 0 8px,var(--ink) 8.5px 13px,transparent 13.5px);transition:transform .12s}
.range__in::-moz-range-thumb{pointer-events:auto;width:44px;height:44px;border:0;border-radius:50%;cursor:grab;background:radial-gradient(circle,var(--signal) 0 8px,var(--ink) 8.5px 13px,transparent 13.5px);transition:transform .12s}
.range__in:active::-webkit-slider-thumb{cursor:grabbing;transform:scale(1.12)}
.range__in:active::-moz-range-thumb{cursor:grabbing;transform:scale(1.12)}
.range__in:focus-visible{outline:0;box-shadow:none}
.range__in:focus-visible::-webkit-slider-thumb{background:radial-gradient(circle,var(--marker) 0 8px,var(--ink) 8.5px 13px,transparent 13.5px);filter:drop-shadow(0 0 0 var(--marker)) drop-shadow(0 0 3px var(--ink))}
.range__in:focus-visible::-moz-range-thumb{background:radial-gradient(circle,var(--marker) 0 8px,var(--ink) 8.5px 13px,transparent 13.5px)}
.range__ends{display:flex;justify-content:space-between;margin-inline:6px;font:500 .72rem/1 var(--f-mono);color:var(--ink-faint)}
.range__presets{margin-top:.2rem}
.cur-row{display:flex;flex-wrap:wrap;gap:.6rem 1rem;align-items:center}
.select-box{position:relative;display:inline-flex;align-items:center}
.select-box select{appearance:none;-webkit-appearance:none;min-height:44px;padding:.3em 2.2em .3em .9em;border:var(--bw) solid var(--ink);border-radius:var(--r-s);background:var(--card);font:700 .95rem/1.2 var(--f-text);cursor:pointer;box-shadow:var(--sh-s);color:var(--ink)}
[dir=rtl] .select-box select{padding:.3em .9em .3em 2.2em}
.select-box .ico{position:absolute;inset-inline-end:.7em;pointer-events:none;width:.8rem;height:.8rem}
.crit__note{font-size:.85rem;color:var(--ink-faint)}

/* ---------- Story ---------------------------------------------------------------- */
.story{padding-block:clamp(1rem,3vw,2.5rem) clamp(2rem,5vw,4rem);display:grid;gap:clamp(2rem,5vw,4rem)}
.story__grid{display:grid;gap:clamp(1.2rem,3vw,2rem);align-items:start}
@media (min-width:1020px){.story__grid{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)}}
.story__duo{display:grid;gap:clamp(1.2rem,3vw,2rem);align-items:start}

.section-head{margin-bottom:1.3rem}
.section-head .seg{margin-top:1rem}

.fn{display:grid;gap:.15rem;counter-reset:fn}
.fn-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:baseline;gap:.15rem .7rem;padding:.65rem 0;border-top:1.5px solid var(--rule);animation:rowin .5s var(--ease) both;animation-delay:calc(var(--i,0) * 35ms)}
.fn-row:first-child{border-top:0}
.fn-label{font-weight:600;line-height:1.25;overflow-wrap:anywhere}
.fn-count{font:800 1.12rem/1 var(--f-display);letter-spacing:-.02em;font-variant-numeric:tabular-nums;text-align:end}
.fn-tag{font:700 .76rem/1 var(--f-mono);padding:.35em .55em;border-radius:5px;border:1.5px solid var(--ink);background:var(--paper-deep);min-width:4.2em;text-align:center;font-variant-numeric:tabular-nums}
.fn-row[data-big="1"] .fn-tag{background:var(--signal);color:var(--on-signal);transform:rotate(-3deg);box-shadow:var(--sh-s)}
.fn-bar{grid-column:1/-1;height:12px;border:1.5px solid var(--ink);border-radius:99px;background:var(--paper-deep);overflow:hidden}
.fn-bar i{display:block;height:100%;width:var(--w,100%);background:var(--ink);border-radius:99px;transition:width .8s var(--ease)}
.fn-row--pool{background:linear-gradient(90deg,color-mix(in srgb,var(--marker) 50%,transparent),transparent);margin-inline:-.6rem;padding-inline:.6rem;border-top:2px solid var(--ink)!important;border-radius:6px}
.fn-row--pool .fn-label{font-weight:800}
.fn-row--taken .fn-bar i{background:repeating-linear-gradient(135deg,var(--ink) 0 4px,transparent 4px 8px)}
.fn-row--single .fn-bar i{background:var(--signal)}
.fn-row--single .fn-label{font-weight:800}
.fn-row--single .fn-count{color:var(--signal-text);font-size:1.4rem}
.fn-note{margin-top:1rem;font:500 .74rem/1.3 var(--f-mono);color:var(--ink-faint)}
@keyframes rowin{from{opacity:0;transform:translateY(8px)}}

/* Reveal: the inverted, dramatic block */
.reveal{position:relative;background:var(--rv-bg);color:var(--rv-fg);border:var(--bw) solid var(--ink);border-radius:var(--r);padding:clamp(1.3rem,3vw,2.2rem);box-shadow:var(--sh-l);overflow:hidden}
.reveal__kicker{font:800 clamp(3.4rem,10vw,6.5rem)/.9 var(--f-display);letter-spacing:-.06em;color:var(--rv-accent)}
.reveal__title{font:600 1.15rem/1.3 var(--f-text);margin-top:.5rem;max-width:30ch;color:var(--rv-soft)}
.reveal__body{margin-top:1.4rem;display:grid;gap:1.4rem}
.split{display:flex;height:42px;border:var(--bw) solid var(--rv-fg);border-radius:99px;overflow:hidden}
.split i{display:block;height:100%;transition:flex-basis .9s var(--ease);flex:0 0 var(--p,0%);min-width:0}
.split__m{background:repeating-linear-gradient(135deg,var(--rv-fg) 0 5px,transparent 5px 10px)}
.split__p{background:repeating-linear-gradient(45deg,var(--rv-soft) 0 5px,transparent 5px 10px)}
.split__s{background:var(--rv-accent);flex-grow:1}
.rv-facts{display:grid;gap:.5rem}
.rv-fact{display:flex;gap:.7rem;align-items:baseline;font-size:1.08rem;line-height:1.35}
.rv-fact::before{content:"";flex:none;width:.7rem;height:.7rem;border-radius:2px;transform:translateY(.05rem) rotate(45deg);background:var(--rv-accent)}
.rv-fact--m::before{background:repeating-linear-gradient(135deg,var(--rv-fg) 0 2px,transparent 2px 4px);border:1.5px solid var(--rv-fg)}
.rv-fact--p::before{background:repeating-linear-gradient(45deg,var(--rv-soft) 0 2px,transparent 2px 4px);border:1.5px solid var(--rv-soft)}
.rv-fact strong{font-family:var(--f-display);font-weight:800;font-size:1.25em;letter-spacing:-.02em}
.rv-final{position:relative;padding:.9rem .4rem 0}
.rv-final__num{position:relative;font:800 clamp(3.2rem,8vw,5rem)/1.05 var(--f-display);letter-spacing:-.05em;color:var(--rv-accent);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.rv-final__lab{margin-top:.7rem;display:flex;flex-wrap:wrap;align-items:baseline;gap:.2rem .7rem;font:700 1.15rem/1.2 var(--f-text)}
.rv-final__lab em{font:italic 500 1.15rem/1.2 var(--f-serif);color:var(--rv-soft)}
.rv-final__wrap{position:relative;display:inline-block;max-width:100%;padding:.12em .42em .16em}
.rv-circle{position:absolute;inset:0;width:100%;height:100%;color:var(--rv-accent);pointer-events:none;opacity:.9}
.rv-circle use{stroke-dasharray:1;stroke-dashoffset:0}
.rv-band{font:500 .8rem/1.3 var(--f-mono);color:var(--rv-soft);margin-top:.5rem}
.rv-more{display:grid;gap:.9rem;padding-top:1.2rem;border-top:2px dashed var(--rv-soft)}
.rv-more p{line-height:1.45;color:var(--rv-fg);font-size:1.02rem}
.rv-more strong{font-weight:800}
.rv-more small{display:block;margin-top:.2rem;color:var(--rv-soft);font:500 .78rem/1.3 var(--f-mono)}

.compare__cards{display:grid;gap:1.1rem}
@media (min-width:700px){.compare__cards{grid-template-columns:1fr 1fr}}
.cmp{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));align-items:end}
.cmp__where,.cmp__note{grid-column:1/-1}
.cmp__big{grid-column:1/-1;font-size:clamp(2.4rem,5.5vw,4rem)}
.cmp{border:var(--bw) solid var(--ink);border-radius:var(--r);padding:1.2rem;background:var(--card);box-shadow:var(--sh);display:grid;gap:.9rem;align-content:start}
.cmp--world{background:var(--marker);color:var(--on-marker)}
.cmp--world .cmp__stat small,.cmp--world .cmp__where{color:rgba(23,19,15,.72)}
.cmp__where{font:700 .75rem/1.2 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft)}
.cmp__big{font:800 clamp(1.8rem,4vw,2.6rem)/1 var(--f-display);letter-spacing:-.04em;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.cmp__big small{display:block;margin-top:.35rem;font:600 .78rem/1.2 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;opacity:.75}
.cmp__stat{display:grid;gap:.1rem}
.cmp__stat b{font:800 1.5rem/1.1 var(--f-display);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.cmp__stat b.acc{color:var(--signal-text)}
.cmp--world .cmp__stat b.acc{color:var(--on-marker)}
.cmp__stat small{font:500 .78rem/1.25 var(--f-mono);color:var(--ink-soft)}
.cmp__note{grid-column:1/-1;font:italic 500 .95rem/1.3 var(--f-serif);opacity:.8}

.bars{display:grid;gap:.45rem}
@media (min-width:900px){.bars{grid-template-columns:1fr 1fr;grid-auto-flow:column;grid-template-rows:repeat(5,auto);column-gap:3rem}.bars__gap{display:none}}
.bar{display:grid;grid-template-columns:1.6rem minmax(0,1fr);gap:.6rem;align-items:center;padding:.15rem 0}
.bar__rank{font:700 .8rem/1 var(--f-mono);color:var(--ink-faint);text-align:end}
.bar__main{display:grid;gap:.25rem}
.bar__row{display:flex;justify-content:space-between;gap:.6rem;align-items:baseline}
.bar__name{font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bar__val{font:800 .95rem/1 var(--f-display);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.bar__fill{height:12px;border:1.5px solid var(--ink);border-radius:99px;background:var(--paper-deep);overflow:hidden}
.bar__fill i{display:block;height:100%;width:var(--w,0%);background:var(--ink);transition:width .8s var(--ease);transition-delay:calc(var(--i,0) * 40ms);border-radius:99px}
.bar--you .bar__fill i{background:var(--signal)}
.bar--you .bar__name{font-weight:800}
.bar__you{display:inline-block;margin-inline-start:.5rem;transform:rotate(-4deg);font:800 .64rem/1 var(--f-mono);text-transform:uppercase;letter-spacing:.08em;background:var(--marker);color:var(--on-marker);border:1.5px solid var(--ink);padding:.25em .45em;border-radius:3px}
.bars__gap{height:0;border-top:2px dotted var(--rule);margin:.3rem 0}
.bars__empty{grid-column:1/-1;font:italic 500 1.05rem/1.4 var(--f-serif);color:var(--ink-soft);padding:.6rem 0}

.loosen{border:var(--bw) solid var(--ink);border-radius:var(--r);padding:clamp(1.2rem,3vw,2rem);background:var(--paper-deep)}
.loosen__cta{display:flex;flex-wrap:wrap;gap:1rem;align-items:center}
.loosen__empty{font:italic 500 1.1rem/1.4 var(--f-serif);color:var(--ink-soft)}
.loosen__prog{font:600 .85rem/1.3 var(--f-mono);color:var(--ink-soft)}
.loosen__prog i{display:block;height:8px;margin-top:.5rem;border:1.5px solid var(--ink);border-radius:99px;background:var(--card);overflow:hidden;max-width:320px}
.loosen__prog i b{display:block;height:100%;background:var(--signal);width:var(--p,0%);transition:width .25s}
.loosen__list{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));margin-top:.3rem}
.ls{border:var(--bw) solid var(--ink);border-radius:var(--r);background:var(--card);padding:1.1rem;display:grid;gap:.7rem;box-shadow:var(--sh);align-content:space-between;animation:pop .45s var(--ease) both;animation-delay:calc(var(--i,0) * 90ms)}
.ls__what{font:600 1rem/1.25 var(--f-text);color:var(--ink-soft)}
.ls__x{font:800 clamp(2.4rem,6vw,3.4rem)/.95 var(--f-display);letter-spacing:-.05em;color:var(--signal-text);font-variant-numeric:tabular-nums}
.ls__to{font:500 .8rem/1.3 var(--f-mono);color:var(--ink-soft)}
.ls .btn{justify-self:start}
.loosen__again{margin-top:1.2rem}

/* ---------- Soon (ticket) ---------------------------------------------------------- */
.soon{padding-block:clamp(2rem,5vw,4rem)}
.ticket{display:grid;border:var(--bw) solid var(--ink);border-radius:var(--r);box-shadow:var(--sh-l);background:var(--signal);color:var(--on-signal);overflow:visible;position:relative}
@media (min-width:860px){.ticket{grid-template-columns:minmax(0,1.25fr) minmax(300px,.75fr)}}
.ticket__main{padding:clamp(1.4rem,4vw,3rem);position:relative}
.ticket__main .sticker{margin-bottom:1.2rem}
.ticket__title{font:800 clamp(1.9rem,5vw,3.4rem)/1 var(--f-display);letter-spacing:-.045em;max-width:15ch;text-wrap:balance}
.ticket__lede{margin-top:1.1rem;max-width:48ch;font-size:1.12rem;line-height:1.45}
.ticket__lede em{font-family:var(--f-serif);font-weight:600;background:var(--marker);color:var(--on-marker);padding:0 .2em}
.ticket__list{margin-top:1.1rem;display:grid;gap:.4rem;font-weight:600}
.ticket__list li{display:flex;gap:.6rem;align-items:baseline}
.ticket__list li::before{content:"→";font-weight:800}
.ticket__stub{position:relative;background:var(--card);color:var(--ink);padding:clamp(1.3rem,3vw,2rem);border-top:2px dashed var(--ink);border-radius:0 0 calc(var(--r) - 2px) calc(var(--r) - 2px)}
@media (min-width:860px){.ticket__stub{border-top:0;border-inline-start:2px dashed var(--ink);border-radius:0 calc(var(--r) - 2px) calc(var(--r) - 2px) 0;display:flex;flex-direction:column;justify-content:center}
  [dir=rtl] .ticket__stub{border-radius:calc(var(--r) - 2px) 0 0 calc(var(--r) - 2px)}}
.ticket__stub::before,.ticket__stub::after{content:"";position:absolute;width:26px;height:26px;border-radius:50%;background:var(--paper);border:var(--bw) solid var(--ink);z-index:1}
.ticket__stub::before{top:-14px;inset-inline-start:20px}
.ticket__stub::after{top:-14px;inset-inline-end:20px}
@media (min-width:860px){
  .ticket__stub::before{top:-14px;inset-inline-start:-14px;left:auto}
  .ticket__stub::after{top:auto;bottom:-14px;inset-inline-start:-14px;inset-inline-end:auto}
}
.waitlist{display:grid;gap:.7rem}
.waitlist .btn{width:100%}
.waitlist__msg{min-height:1.4em;font-weight:700;font-size:.95rem}
.waitlist__msg[data-state="ok"]{color:#16703a}
:root[data-theme="dark"] .waitlist__msg[data-state="ok"]{color:var(--marker)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .waitlist__msg[data-state="ok"]{color:var(--marker)}}
.waitlist__msg[data-state="invalid"],.waitlist__msg[data-state="busy"],.waitlist__msg[data-state="error"]{color:var(--signal-text)}
.waitlist__fine{font-size:.8rem;color:var(--ink-faint)}
.hp{position:absolute;inset-inline-start:-9999px;width:1px;height:1px;overflow:hidden}

/* ---------- FAQ ---------------------------------------------------------------------- */
.faq{padding-block:clamp(2rem,5vw,4rem) clamp(3rem,7vw,6rem)}
.faq__grid{display:grid;gap:2rem}
@media (min-width:900px){.faq__grid{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:4rem}.faq__head{position:sticky;top:96px;align-self:start}}
.qa{border-top:var(--bw) solid var(--ink)}
.qa:last-child{border-bottom:var(--bw) solid var(--ink)}
.qa summary{display:flex;justify-content:space-between;align-items:center;gap:1rem;min-height:64px;padding-block:.8rem;cursor:pointer;font:700 1.12rem/1.25 var(--f-display);letter-spacing:-.015em;list-style:none}
.qa summary::-webkit-details-marker{display:none}
.qa summary:hover{color:var(--signal-text)}
.qa .ico{transition:transform .25s var(--ease);width:1.1rem;height:1.1rem}
.qa[open] .ico{transform:rotate(180deg)}
.qa p{padding-bottom:1.2rem;max-width:62ch;color:var(--ink-soft);text-wrap:pretty}

/* ---------- Doc pages & errors ----------------------------------------------------------- */
.doc{padding-block:clamp(2rem,6vw,5rem)}
.doc__head{max-width:56rem;margin-bottom:2.5rem}
.doc__title{font:800 clamp(2.4rem,7vw,5rem)/.95 var(--f-display);letter-spacing:-.05em;text-wrap:balance}
.doc__lede{margin-top:1.2rem;font:italic 500 clamp(1.15rem,2.4vw,1.5rem)/1.4 var(--f-serif);color:var(--ink-soft);max-width:44ch}
.doc__body{max-width:46rem;display:grid;gap:2.2rem}
.doc__sec h2{font:800 1.5rem/1.15 var(--f-display);letter-spacing:-.03em;margin-bottom:.8rem;display:flex;gap:.8rem;align-items:baseline}
.doc__num{font:700 .8rem/1 var(--f-mono);color:var(--signal-text);letter-spacing:.06em}
.doc__sec p{margin-top:.8rem;text-wrap:pretty;font-size:1.06rem;line-height:1.65}
.doc__sec code{font-family:var(--f-mono);font-size:.9em;background:var(--paper-deep);padding:.1em .4em;border-radius:4px}
.doc__note{border:var(--bw) dashed var(--ink);border-radius:var(--r);padding:1.4rem;background:color-mix(in srgb,var(--marker) 35%,var(--card))}
.doc__note h2{font:800 1.2rem/1.2 var(--f-display);margin-bottom:.5rem}
.doc__updated{font:500 .8rem/1 var(--f-mono);color:var(--ink-faint)}
.oops{padding-block:clamp(3rem,10vw,8rem)}
.oops__in{display:grid;gap:1rem;justify-items:start}
.oops__code{font:800 clamp(6rem,26vw,16rem)/.8 var(--f-display);letter-spacing:-.08em;color:var(--signal-text)}
.oops__title{font:800 clamp(2rem,6vw,3.6rem)/1 var(--f-display);letter-spacing:-.04em}
.oops__text{font:italic 500 1.3rem/1.4 var(--f-serif);color:var(--ink-soft)}

/* ---------- Footer -------------------------------------------------------------------------- */
.site-footer{background:var(--ink);color:var(--paper);padding-block:clamp(2.2rem,5vw,3.5rem) calc(2rem + env(safe-area-inset-bottom,0px));margin-top:2rem}
.site-footer .wordmark{font-size:2.6rem}
.site-footer .wordmark__date{color:var(--paper)}
.site-footer .wordmark__truth{color:var(--signal)}
.site-footer .wordmark__scribble{color:var(--marker)}
.site-footer__grid{display:grid;gap:1.6rem 3rem}
@media (min-width:860px){.site-footer__grid{grid-template-columns:auto minmax(0,1fr) auto;align-items:start}}
.site-footer__tag{margin-top:.8rem;font:italic 500 1.05rem/1.3 var(--f-serif);color:var(--paper-deep);opacity:.85}
.site-footer__disclaimer{max-width:58ch;font-size:.92rem;line-height:1.55;opacity:.85}
.site-footer__links{display:grid;gap:.2rem}
.site-footer__links a{display:inline-flex;min-height:36px;align-items:center;font-weight:600;text-decoration:none}
.site-footer__links a:hover,.site-footer__langs a:hover{color:var(--marker);text-decoration:underline}
.site-footer__langs{margin-top:2rem;padding-top:1.4rem;border-top:1.5px solid rgba(243,238,227,.3);display:flex;flex-wrap:wrap;gap:.2rem 1.1rem}
.site-footer__langs a{display:inline-flex;min-height:40px;align-items:center;text-decoration:none;opacity:.85;font-size:.95rem}
.site-footer__langs a[aria-current]{opacity:1;font-weight:800;color:var(--marker)}
.site-footer__fine{margin-top:1.4rem;font:500 .76rem/1.3 var(--f-mono);opacity:.6}
.site-footer :focus-visible{outline-color:var(--paper);box-shadow:0 0 0 6px var(--signal)}
:root[data-theme="dark"] .site-footer{background:#0c0a08;border-top:var(--bw) solid var(--ink)}
:root[data-theme="dark"] .site-footer{color:var(--ink)}
:root[data-theme="dark"] .site-footer .wordmark__date{color:var(--ink)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .site-footer{background:#0c0a08;border-top:var(--bw) solid var(--ink);color:var(--ink)}:root:not([data-theme="light"]) .site-footer .wordmark__date{color:var(--ink)}}

/* ---------- Mobile sticky result bar ----------------------------------------------------------- */
.mbar{position:fixed;inset-inline:0;bottom:0;z-index:45;padding:8px var(--gut) calc(8px + env(safe-area-inset-bottom,0px));pointer-events:none;transform:translateY(120%);transition:transform .35s var(--ease)}
.mbar[data-on="1"]{transform:none}
.mbar__in{pointer-events:auto;display:flex;align-items:center;gap:1rem;max-width:560px;margin-inline:auto;min-height:60px;padding:.55rem 1rem;background:var(--ink);color:var(--paper);border:var(--bw) solid var(--ink);border-radius:16px;box-shadow:0 6px 0 var(--signal),0 14px 28px rgba(0,0,0,.25);text-decoration:none}
.mbar__col{display:grid;line-height:1.05}
.mbar__col b{font:800 1.45rem/1 var(--f-display);letter-spacing:-.035em;font-variant-numeric:tabular-nums}
.mbar__col small{font:500 .64rem/1.2 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;opacity:.75;margin-top:.2rem}
.mbar__col--free b{color:var(--marker)}
:root[data-theme="dark"] .mbar__col--free b{color:var(--rv-accent)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .mbar__col--free b{color:var(--rv-accent)}}
.mbar__go{margin-inline-start:auto;display:inline-flex;align-items:center;gap:.2rem;font:700 .8rem/1 var(--f-mono);text-transform:uppercase;letter-spacing:.07em}
.mbar[data-busy="1"] .mbar__col b{opacity:.5}
@media (min-width:1020px){.mbar{display:none!important}}

/* ---------- Modal & toast --------------------------------------------------------------------------- */
.modal{padding:0;border:var(--bw) solid var(--ink);border-radius:var(--r);background:var(--card);color:var(--ink);box-shadow:var(--sh-l);width:min(560px,calc(100vw - 2 * var(--gut)));max-height:calc(100dvh - 32px)}
.modal::backdrop{background:rgba(20,17,14,.62)}
.modal__in{padding:1.2rem;display:grid;gap:1rem;max-height:calc(100dvh - 36px);overflow:auto}
.modal__head{display:flex;justify-content:space-between;align-items:center;gap:1rem}
.modal__head h2{font:800 1.4rem/1.1 var(--f-display);letter-spacing:-.03em}
.modal__img{display:grid;place-items:center;min-height:220px;background:var(--paper-deep);border:var(--bw) solid var(--ink);border-radius:var(--r-s);overflow:hidden;font:500 .9rem var(--f-mono);color:var(--ink-faint)}
.modal__img img{display:block;width:100%;height:auto;max-height:52dvh;object-fit:contain}
.modal__actions{display:flex;flex-wrap:wrap;gap:.7rem}
.modal__actions .btn{flex:1 1 auto}
.modal__link{font:500 .78rem/1.3 var(--f-mono);color:var(--ink-faint);overflow-wrap:anywhere}
.toast{position:fixed;inset-inline:var(--gut);bottom:calc(86px + env(safe-area-inset-bottom,0px));z-index:90;margin-inline:auto;width:fit-content;max-width:min(92vw,520px);background:var(--marker);color:var(--on-marker);border:var(--bw) solid var(--ink);border-radius:var(--r-s);padding:.7rem 1rem;font-weight:700;box-shadow:var(--sh);opacity:0;transform:translateY(16px) rotate(-1deg);transition:opacity .25s,transform .25s var(--ease);pointer-events:none}
.toast[data-on="1"]{opacity:1;transform:none}
@media (min-width:1020px){.toast{bottom:28px}}

/* ---------- Responsive tweaks --------------------------------------------------------------------------- */
@media (max-width:760px){
  .site-nav__link:not(.site-nav__soon){display:none}
  .wordmark{font-size:1.5rem}
  .lang__list{grid-template-columns:1fr}
  .tool .card{border-radius:var(--r)}
  body{padding-bottom:78px}
  .btn{min-height:48px}
}
@media (max-width:420px){
  .site-nav{display:none}
  .site-tools{margin-inline-start:auto}
  .step__v{min-width:4.2em}
  .hero__actions .btn{flex:1 1 100%}
}

/* ---------- Motion preferences ------------------------------------------------------------------------------ */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;transition-delay:0ms!important}
}
.no-motion *,.no-motion *::before,.no-motion *::after{animation-duration:.001ms!important;transition-duration:.001ms!important;transition-delay:0ms!important}

@media print{.site-header,.mbar,.toast,.modal,.wish,.soon{display:none!important}body::before{display:none}.card,.reveal{box-shadow:none}}