/* onedollar.help - one column, 1120px max. The note is the hero object; the page is a desk, and the
   paper objects on it stay paper in dark mode. Tokens on :root, light values first.
   Source: operacje/www/onedollar/assets/style.css (build.py hashes it into prod/assets/). */
:root{
  --bg:#efece3; --bg-2:#e5e1d4; --surface:#f9f7f1; --surface-2:#eae6da;
  --fg:#1a1b18; --fg-2:#565650; --fg-3:#64645b;
  --line:rgba(26,27,24,.12); --line-2:rgba(26,27,24,.26);
  --accent:#0f6f4f; --accent-ink:#0b5a40; --accent-soft:rgba(15,111,79,.11); --on-accent:#ffffff;
  --stamp:#b5342c;
  --tile:#e6e1d2; --tile-2:#dcd6c4; --tile-fg:#2a2b26;
  --ground:rgba(20,30,24,.42); --shadow:rgba(0,0,0,.2);
  --toast-bg:#1a1b18; --toast-fg:#f3f0e8;
  --focus:#0f6f4f;
  --hilite:rgba(255,255,255,.35); --hilite-soft:rgba(255,255,255,.18); --shadow-2:rgba(0,0,0,.08);
  --glint:#ffffff; --shine:rgba(255,255,255,.95); --shine-0:rgba(255,255,255,0); --shine-2:rgba(255,255,255,.42);
  --foil:#ffb3b3,#ffe0b3,#fff6b3,#c8f7c5,#b3e5ff,#d9c2ff,#ffb3e6,#ffb3b3;
  --mask-on:#000; --mask-off:#0000;
  --receipt:#fffdf6; --receipt-fg:#1c1c19; --receipt-muted:#66655d; --receipt-line:rgba(28,28,25,.34); --receipt-hair:rgba(28,28,25,.16); --receipt-in:#0b5a40;
  /* note tints per denomination (the note is a paper object, same ink and paper in both themes) */
  --n1-ink:#1e5a44; --n1-ink2:#2f7a5c; --n1-a:#ece8d4; --n1-b:#dcd6bb; --n1-l:#f5f2e4;
  --n10-ink:#6a4418; --n10-ink2:#8a5e26; --n10-a:#efe5cf; --n10-b:#e1d0ad; --n10-l:#f7efdf;
  --n100-ink:#2b4663; --n100-ink2:#3b5f85; --n100-a:#e4e8ec; --n100-b:#cfd7df; --n100-l:#f1f4f7;
  --n1000-ink:#4b2a52; --n1000-ink2:#6a3d72; --n1000-a:#ebe3ea; --n1000-b:#dacbd9; --n1000-l:#f6f0f5;
  --name-size:26;
  --font-display:"Fraunces","Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  --font-body:"Instrument Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#111311; --bg-2:#181b18; --surface:#1a1d1a; --surface-2:#22261f;
    --fg:#ebe8df; --fg-2:#aeada3; --fg-3:#8f8e85;
    --line:rgba(235,232,223,.12); --line-2:rgba(235,232,223,.26);
    --accent:#3fc08f; --accent-ink:#5bd3a4; --accent-soft:rgba(63,192,143,.14); --on-accent:#0f110f;
    --stamp:#e2574e;
    --tile:#2a2e29; --tile-2:#343931; --tile-fg:#e6e3da;
    --ground:rgba(0,0,0,.85); --shadow:rgba(0,0,0,.55);
    --toast-bg:#ebe8df; --toast-fg:#111311;
    --focus:#5bd3a4;
    --hilite:rgba(255,255,255,.07); --hilite-soft:rgba(255,255,255,.1); --shadow-2:rgba(0,0,0,.3);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#111311; --bg-2:#181b18; --surface:#1a1d1a; --surface-2:#22261f;
  --fg:#ebe8df; --fg-2:#aeada3; --fg-3:#8f8e85;
  --line:rgba(235,232,223,.12); --line-2:rgba(235,232,223,.26);
  --accent:#3fc08f; --accent-ink:#5bd3a4; --accent-soft:rgba(63,192,143,.14); --on-accent:#0f110f;
  --stamp:#e2574e;
  --tile:#2a2e29; --tile-2:#343931; --tile-fg:#e6e3da;
  --ground:rgba(0,0,0,.85); --shadow:rgba(0,0,0,.55);
  --toast-bg:#ebe8df; --toast-fg:#111311;
  --focus:#5bd3a4;
  --hilite:rgba(255,255,255,.07); --hilite-soft:rgba(255,255,255,.1); --shadow-2:rgba(0,0,0,.3);
  color-scheme:dark;
}

/* registered so the tint can cross-fade; @property initial-value must be a literal by spec, the live values come from :root tokens */
@property --ink{syntax:'<color>';inherits:true;initial-value:#1e5a44}
@property --ink-2{syntax:'<color>';inherits:true;initial-value:#2f7a5c}
@property --paper-a{syntax:'<color>';inherits:true;initial-value:#ece8d4}
@property --paper-b{syntax:'<color>';inherits:true;initial-value:#dcd6bb}
@property --paper-l{syntax:'<color>';inherits:true;initial-value:#f5f2e4}
.note{ --ink:var(--n1-ink); --ink-2:var(--n1-ink2); --paper-a:var(--n1-a); --paper-b:var(--n1-b); --paper-l:var(--n1-l); }
.note[data-denom="10"]{ --ink:var(--n10-ink); --ink-2:var(--n10-ink2); --paper-a:var(--n10-a); --paper-b:var(--n10-b); --paper-l:var(--n10-l); }
.note[data-denom="100"]{ --ink:var(--n100-ink); --ink-2:var(--n100-ink2); --paper-a:var(--n100-a); --paper-b:var(--n100-b); --paper-l:var(--n100-l); }
.note[data-denom="1000"]{ --ink:var(--n1000-ink); --ink-2:var(--n1000-ink2); --paper-a:var(--n1000-a); --paper-b:var(--n1000-b); --paper-l:var(--n1000-l); }

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:clip}
/* copy that is only true once app.js runs (the preview tile); <html class="no-js"> is removed by theme.js */
html.no-js .js-only{display:none}
body{
  margin:0;
  padding-left:max(16px, env(safe-area-inset-left, 0px));
  padding-right:max(16px, env(safe-area-inset-right, 0px));
  padding-block:0 0;
  background:var(--bg);
  background-image:radial-gradient(1100px 520px at 50% -8%, var(--bg-2), transparent 70%);
  background-repeat:no-repeat;
  color:var(--fg); font:400 1rem/1.55 var(--font-body);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:clip;
}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top, 0px);z-index:10;background:var(--bg)}
@media (max-width:759px){[data-page="index"] body{padding-block:0 calc(78px + env(safe-area-inset-bottom, 0px))}}
svg{display:block}
a{color:inherit}
button{font:inherit;color:inherit}
[hidden]{display:none!important}
.container{width:min(100%, 1120px);margin-inline:auto}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.small{font-size:.88rem}
.muted{color:var(--fg-3)}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:6px}
section[id],form[id],div[id],article[id]{scroll-margin-top:84px}
.skip{position:absolute;left:16px;top:-60px;z-index:50;background:var(--accent);color:var(--on-accent);padding:10px 14px;border-radius:10px;font-weight:600;text-decoration:none;transition:top .15s}
.skip:focus{top:calc(10px + env(safe-area-inset-top, 0px))}

/* ---------- header (full-bleed band inside the body gutter) ---------- */
.top{position:sticky;top:env(safe-area-inset-top, 0px);z-index:20;margin-inline:calc(-1 * max(16px, env(safe-area-inset-left, 0px))) calc(-1 * max(16px, env(safe-area-inset-right, 0px)));padding-inline:max(16px, env(safe-area-inset-left, 0px)) max(16px, env(safe-area-inset-right, 0px));background:var(--bg);background:color-mix(in srgb, var(--bg) 84%, transparent);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.top__in{display:flex;align-items:center;gap:16px;min-height:60px}
.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;white-space:nowrap;flex:0 0 auto;font:600 1.05rem/1 var(--font-display);letter-spacing:.005em;color:var(--fg)}
.brand__mark{width:28px;height:18px;color:var(--accent)}
.top__nav{display:none;gap:22px;margin-left:14px;font-size:.92rem;color:var(--fg-2)}
.top__nav a{text-decoration:none;padding:6px 2px;transition:color .15s}
.top__nav a:hover{color:var(--fg)}
@media (min-width:760px){.top__nav{display:flex}}
.top__actions{margin-left:auto;display:flex;align-items:center;gap:8px}
@media (min-width:560px){.top__actions{gap:10px}}

/* ---------- buttons, tags, inputs ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:0 18px;height:44px;border-radius:999px;border:1px solid transparent;font:600 .95rem var(--font-body);text-decoration:none;cursor:pointer;white-space:nowrap;transition:transform .15s ease,background .2s,box-shadow .2s,border-color .2s,opacity .2s}
.btn--primary{background:var(--accent);color:var(--on-accent);box-shadow:0 1px 0 var(--hilite-soft) inset,0 10px 24px -12px var(--accent)}
.btn--primary:hover{background:var(--accent-ink)}
.btn:active{transform:translateY(1px) scale(.99)}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.7;cursor:progress;transform:none}
.btn--ghost{background:transparent;border-color:var(--line-2);color:var(--fg)}
.btn--ghost:hover{background:var(--surface-2)}
.btn--small{height:36px;padding:0 14px;font-size:.88rem}
.icon-btn{width:36px;height:36px;border-radius:50%;border:1px solid var(--line-2);background:transparent;color:var(--fg);display:grid;place-items:center;cursor:pointer;padding:0;transition:background .15s}
.icon-btn:hover{background:var(--surface-2)}
.icon-btn svg{width:18px;height:18px}
.icon-btn [data-ico]{display:none}
:root:not([data-theme]) [data-ico="auto"]{display:block}
:root[data-theme="light"] [data-ico="light"]{display:block}
:root[data-theme="dark"] [data-ico="dark"]{display:block}
.tag{display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 8px;border-radius:999px;border:1px solid var(--line-2);font:600 .64rem/1 var(--font-mono);letter-spacing:.09em;text-transform:uppercase;color:var(--fg-2);white-space:nowrap}
.input{height:44px;width:100%;border-radius:12px;border:1px solid var(--line-2);background:var(--bg);color:var(--fg);padding:0 14px;font:500 1rem var(--font-body);transition:border-color .15s,box-shadow .15s}
.input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.input::placeholder{color:var(--fg-3)}
.input.is-error{border-color:var(--stamp)}

/* ---------- hero ---------- */
.hero{padding:clamp(28px,5vw,52px) 0 0}
.hero__head{max-width:900px;text-align:center;margin-inline:auto}
.eyebrow{margin:0 0 16px;font:600 .74rem/1 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--fg-2)}
.eyebrow .dot{margin:0 6px;opacity:.6}
.h1{margin:0;font:500 clamp(2rem, 1.1rem + 3vw, 2.95rem)/1.08 var(--font-display);letter-spacing:-.016em;text-wrap:balance;font-optical-sizing:auto}
.h1 em{font-style:italic;font-weight:600;color:var(--accent-ink)}
.lede{margin:18px auto 0;max-width:640px;font-size:clamp(1rem,.95rem + .35vw,1.14rem);color:var(--fg-2);text-wrap:pretty}
.eyebrow--left,.h1--left,.lede--left{text-align:left;margin-inline:0}

.stage-wrap{margin-top:clamp(26px,4vw,44px)}
.stage{--rx:0;--ry:0;--mx:.5;--my:.35;position:relative;max-width:900px;margin:0 auto;perspective:1400px;touch-action:pan-y}
.note-shadow{position:absolute;inset:8% 3% -2% 3%;border-radius:24px;box-shadow:0 60px 90px -40px var(--ground),0 24px 40px -24px var(--ground);transform:translate(calc(var(--rx) * -12px), calc(var(--ry) * 10px));pointer-events:none}
.note{
  position:relative;aspect-ratio:1000/430;max-width:100%;border-radius:1.6% / 3.72%;
  transform-style:preserve-3d;
  transform:rotateX(calc(var(--ry) * -6deg)) rotateY(calc(var(--rx) * 8deg));
  will-change:transform;
  transition:--ink .7s ease,--ink-2 .7s ease,--paper-a .7s ease,--paper-b .7s ease,--paper-l .7s ease;
  animation:noteIn .9s cubic-bezier(.2,.8,.2,1);
}
@keyframes noteIn{from{opacity:0;transform:translateY(24px) rotateX(10deg)}}
@media (hover:none){
  .note:not(.is-live){animation:noteIn .9s cubic-bezier(.2,.8,.2,1),idle 9s 1.2s ease-in-out infinite alternate}
}
@keyframes idle{from{transform:rotateX(2deg) rotateY(-4deg)}to{transform:rotateX(-2deg) rotateY(4deg)}}
@media (max-width:640px){:root{--name-size:36}}
.note__svg{width:100%;height:100%;border-radius:inherit;transform-origin:center}
.note__svg.is-kick{animation:kick .32s ease-out}
@keyframes kick{0%{transform:scale(1)}35%{transform:scale(.988)}100%{transform:scale(1)}}
.note__shine{
  position:absolute;inset:0;border-radius:inherit;pointer-events:none;mix-blend-mode:soft-light;opacity:.85;
  background:
    radial-gradient(55% 85% at calc(var(--mx) * 100%) calc(var(--my) * 100%), var(--shine), var(--shine-0) 62%),
    linear-gradient(calc(104deg + var(--rx) * 22deg), transparent 28%, var(--shine-2) 46%, transparent 62%);
}
.note__foil{
  position:absolute;left:70.2%;top:20.2%;width:23.6%;aspect-ratio:1;border-radius:50%;pointer-events:none;
  mix-blend-mode:overlay;opacity:.4;
  background:conic-gradient(from calc(var(--rx) * 200deg + var(--ry) * 120deg), var(--foil));
  -webkit-mask:radial-gradient(circle, var(--mask-on) 52%, var(--mask-off) 70%);mask:radial-gradient(circle, var(--mask-on) 52%, var(--mask-off) 70%);
  filter:blur(8px) saturate(1.1);
}
.stamp{
  position:absolute;left:57%;top:9%;width:20%;aspect-ratio:1;pointer-events:none;color:var(--stamp);
  mix-blend-mode:multiply;opacity:0;transform:translateZ(40px) rotate(-14deg) scale(1.9);
}
/* resting state of a stamped note comes first, so the stamp is visible even with animations off */
.note.is-stamped .stamp{opacity:.86;transform:translateZ(40px) rotate(-14deg) scale(1);animation:slam .5s cubic-bezier(.2,.9,.25,1) both}
@keyframes slam{
  0%{opacity:0;transform:translateZ(40px) rotate(-21deg) scale(1.9)}
  62%{opacity:.92;transform:translateZ(40px) rotate(-13deg) scale(.96)}
  100%{opacity:.86;transform:translateZ(40px) rotate(-14deg) scale(1)}
}

/* SVG note styles */
.ink{fill:var(--ink)}
.ink-s{stroke:var(--ink)}
.paper-f{fill:var(--paper-l)}
.glint{stroke:var(--glint)}
.st-a{stop-color:var(--paper-a)} .st-b{stop-color:var(--paper-b)} .st-l{stop-color:var(--paper-l)}
.t-cap{font:500 13px var(--font-display);letter-spacing:5px;fill:var(--ink)}
.t-micro{font:500 7px var(--font-body);letter-spacing:1.4px;fill:var(--ink);opacity:.72}
.t-label{font:600 9.5px var(--font-body);letter-spacing:2.4px;fill:var(--ink);opacity:.85}
.t-name{font:italic 400 26px var(--font-display);fill:var(--ink)}
.t-name.is-empty{opacity:.42}
.t-name.is-long{font-size:18px}
.t-name.is-longer{font-size:14px}
.t-micro2{font:italic 400 11px var(--font-display);fill:var(--ink);opacity:.82}
.t-sign{font:italic 500 19px var(--font-display);fill:var(--ink)}
.t-serial{font:500 12px var(--font-mono);letter-spacing:2.2px;fill:var(--ink)}
.t-ring{font:600 10.5px var(--font-body);letter-spacing:2.2px;fill:var(--ink);opacity:.8}
.t-ribbon{font:700 22px var(--font-display);letter-spacing:3px;fill:var(--paper-l)}
.t-ribbon.is-w18{font-size:18px}
.t-ribbon.is-w14{font-size:14px}
.t-ribbon.is-w11{font-size:11px}
.t-q{font:700 15px var(--font-display);fill:var(--ink)}
.c-num{font:700 36px var(--font-display);fill:var(--ink);transform-box:fill-box;transform-origin:center}
.big-num{font:800 200px var(--font-display);fill:var(--ink);transform-box:fill-box;transform-origin:center;font-optical-sizing:auto}
.big-num.is-d2{font-size:150px}
.big-num.is-d3{font-size:114px}
.big-num.is-d4{font-size:88px}
.big-num.is-d5{font-size:74px}
.c-num.is-stamp,.big-num.is-stamp{animation:stampIn .46s cubic-bezier(.2,.9,.3,1.15)}
.c-num.is-stamp{animation-delay:.06s}
@keyframes stampIn{0%{transform:scale(1.5) rotate(-7deg);opacity:0}55%{transform:scale(.97) rotate(1deg);opacity:1}100%{transform:none;opacity:1}}
.ripple{opacity:0;transform-box:fill-box;transform-origin:center;stroke-width:2}
.ripple.is-stamp{animation:ripple .75s ease-out}
@keyframes ripple{0%{opacity:.55;transform:scale(.92);stroke-width:7}100%{opacity:0;transform:scale(1.28);stroke-width:.5}}

/* ---------- stub (form) ---------- */
.stub{max-width:900px;margin:22px auto 0;background:var(--surface);border:1px solid var(--line);border-radius:22px;padding:16px;display:grid;gap:16px;grid-template-columns:1fr;box-shadow:0 1px 0 var(--hilite) inset}
@media (min-width:900px){
  .stub{grid-template-columns:1fr 1.3fr auto;align-items:end;padding:18px 20px 20px;column-gap:14px}
  .stub .picker,.stub .amount-line,.stub .next,.stub .fine{grid-column:1 / -1}
}
.stub__top{grid-column:1 / -1;display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.stub__title{margin:0;font:500 1.15rem/1.2 var(--font-display)}
.field{display:grid;gap:6px;min-width:0}
.field label,.picker legend{font:600 .7rem/1 var(--font-mono);letter-spacing:.09em;text-transform:uppercase;color:var(--fg-2)}
.field label .opt{opacity:.7;text-transform:none;letter-spacing:0;margin-left:4px}
.field--msg{position:relative}
.field--msg .input{padding-right:72px}
.count{position:absolute;right:12px;bottom:14px;font:500 .7rem var(--font-mono);color:var(--fg-3);pointer-events:none;font-variant-numeric:tabular-nums}
.count.is-near{color:var(--stamp)}
.picker{margin:0;padding:0;border:0;min-inline-size:0;display:grid;gap:8px}
.picker legend{padding:0;margin:0 0 2px}
.amounts{display:grid;gap:8px;grid-template-columns:repeat(2,1fr)}
@media (min-width:720px){.amounts{grid-template-columns:repeat(4,1fr) 1.45fr}}
.pick{position:relative;min-width:0}
.pick input[type="radio"]{position:absolute;inset:0;width:100%;height:100%;opacity:0;margin:0;cursor:pointer}
.pick__box{display:grid;gap:2px;height:100%;min-height:58px;padding:9px 12px 8px;border-radius:14px;border:1px solid var(--line-2);background:var(--bg);transition:background .2s,color .2s,border-color .2s;pointer-events:none}
.pick__usd{font:600 1.08rem/1.1 var(--font-mono);letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.pick__cap{font:italic 400 .82rem/1.2 var(--font-display);color:var(--fg-2)}
.pick input:checked + .pick__box{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.pick input:checked + .pick__box .pick__cap{color:inherit;opacity:.78}
.pick input:focus-visible + .pick__box{outline:2px solid var(--focus);outline-offset:2px}
.pick:hover .pick__box{border-color:var(--fg-3)}
.pick--custom{grid-column:1 / -1;display:grid;grid-template-columns:auto 1fr;align-items:stretch;gap:0}
@media (min-width:720px){.pick--custom{grid-column:auto;grid-template-columns:1fr}}
.pick--custom input[type="radio"]{inset:auto;width:1px;height:1px;left:0;top:0}
.pick--custom .pick__box{pointer-events:auto;cursor:pointer;border-radius:14px 0 0 14px;border-right:0;min-width:92px}
@media (min-width:720px){.pick--custom .pick__box{border-radius:14px 14px 0 0;border-right:1px solid var(--line-2);border-bottom:0;min-height:0;padding-bottom:4px}}
.pick__field{display:flex;align-items:center;gap:0;border:1px solid var(--line-2);border-radius:0 14px 14px 0;background:var(--bg);padding:0 10px 0 12px;min-width:0}
@media (min-width:720px){.pick__field{border-radius:0 0 14px 14px;height:40px}}
.pick__dollar{font:600 1rem var(--font-mono);color:var(--fg-2)}
.pick__num{width:100%;min-width:0;border:0;background:transparent;color:var(--fg);font:600 1.08rem var(--font-mono);padding:0 4px;height:100%;appearance:textfield;-moz-appearance:textfield}
.pick__num::-webkit-outer-spin-button,.pick__num::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.pick__num:focus{outline:none}
.pick__field:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.pick--custom input:checked ~ .pick__field{border-color:var(--fg)}
.amount-line{margin:0;font:italic 500 1.05rem/1.4 var(--font-display);color:var(--fg-2);min-height:1.5em}
.amount-line.is-error{color:var(--stamp)}
.actions{display:grid;gap:6px}
.actions .spacer{height:.7rem}
.next{margin:0;padding-top:12px;border-top:1px dashed var(--line-2);font-size:.9rem;color:var(--fg-2);text-wrap:pretty}
.next b{font-weight:600;color:var(--fg)}
.fine{margin:0;font-size:.8rem;color:var(--fg-3);text-wrap:pretty}
.fine b{font-weight:600;color:var(--fg-2)}
.fine a{color:var(--fg-2)}
.fine--consent{margin-top:-6px}

/* ---------- sections ---------- */
.section{padding:clamp(56px,8vw,96px) 0 0}
.section__head{max-width:640px;margin-bottom:clamp(20px,3vw,32px)}
.kicker{margin:0 0 10px;font:600 .72rem/1 var(--font-mono);letter-spacing:.13em;text-transform:uppercase;color:var(--accent-ink)}
.h2{margin:0;font:500 clamp(1.6rem,1.2rem + 1.6vw,2.4rem)/1.12 var(--font-display);letter-spacing:-.012em;text-wrap:balance}
.sub{margin:12px 0 0;color:var(--fg-2);font-size:1.02rem;text-wrap:pretty}

/* ---------- wall ---------- */
.wall-box{position:relative}
.wall{--cols:10;--cell:34px;--gap:3px;list-style:none;margin:0;padding:var(--gap);display:grid;grid-template-columns:repeat(var(--cols),var(--cell));grid-auto-rows:var(--cell);grid-auto-flow:dense;gap:var(--gap);background:var(--surface-2);border:1px solid var(--line);border-radius:14px;overflow:hidden;width:100%;min-height:calc(var(--rows, 6) * (var(--cell) + var(--gap)) + var(--gap))}
.tile{position:relative;background:var(--tile);color:var(--tile-fg);border-radius:3px;display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;padding:4px 5px;overflow:hidden;min-width:0;text-align:left;cursor:default}
.tile[data-tone="1"]{background:var(--tile-2)}
.tile--s2{grid-column:span 2;grid-row:span 2}
.tile--s3{grid-column:span 3;grid-row:span 3}
.tile--s4{grid-column:span 4;grid-row:span 4;padding:7px 8px}
.tile--you{background:var(--accent);color:var(--on-accent);grid-column:1 / span var(--s,1);grid-row:1 / span var(--s,1);z-index:1;outline:2px solid var(--accent);outline-offset:1px;animation:ring 2.2s ease-in-out infinite;transition:background .2s}
@keyframes ring{0%,100%{outline-color:var(--accent)}50%{outline-color:transparent}}
.tile.is-hi{outline:2px solid var(--fg);outline-offset:-2px;z-index:2}
.tile__ini{margin:auto;font:700 calc(var(--cell) * .5)/1 var(--font-display);font-optical-sizing:auto}
.tile__nm{font:600 clamp(10px,calc(var(--cell) * .34),13px)/1.15 var(--font-body);letter-spacing:-.01em;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;hyphens:none;overflow-wrap:break-word;max-width:100%}
.tile--s3 .tile__nm{font-size:clamp(12px,calc(var(--cell) * .38),16px)}
.tile--s4 .tile__nm{font:600 clamp(14px,calc(var(--cell) * .44),20px)/1.1 var(--font-display);-webkit-line-clamp:2}
.tile__amt{font:500 clamp(9px,calc(var(--cell) * .28),12px)/1.2 var(--font-mono);opacity:.78;margin-top:2px}
.tile--you .tile__amt{opacity:.94}
.tile__note{font:italic 400 clamp(10px,calc(var(--cell) * .3),13px)/1.3 var(--font-display);opacity:.92;margin-bottom:auto;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;max-width:100%;hyphens:none;overflow-wrap:break-word}
.wall-empty{position:absolute;inset:0;margin:0;display:flex;align-items:center;justify-content:center;pointer-events:none;padding:16px}
.wall-empty__in{font:italic 500 clamp(1rem,.9rem + .6vw,1.3rem)/1.4 var(--font-display);color:var(--fg-2);background:color-mix(in srgb, var(--surface) 86%, transparent);border:1px dashed var(--line-2);border-radius:999px;padding:10px 18px;text-align:center;max-width:min(100%, 520px);text-wrap:balance}
.wall-cap{margin:12px 0 0;min-height:2.6em;font-size:.92rem;color:var(--fg-2);display:flex;gap:10px;align-items:flex-start}
.wall-cap .sw{flex:0 0 auto;width:14px;height:14px;border-radius:3px;background:var(--tile);margin-top:4px;border:1px solid var(--line-2)}
.wall-cap .sw.is-you{background:var(--accent);border-color:var(--accent)}
.wall-cap b{color:var(--fg);font-weight:600}
.wall-cap .q{font-style:italic;font-family:var(--font-display)}
.wall-legend{margin:10px 0 0;display:flex;flex-wrap:wrap;gap:6px 18px;font:500 .74rem/1.4 var(--font-mono);color:var(--fg-3)}
.wall-legend .sq{display:inline-block;vertical-align:-2px;background:var(--fg-3);margin-right:6px;border-radius:1px}
.wall-legend .sq--1{width:8px;height:8px}
.wall-legend .sq--2{width:12px;height:12px}
.wall-legend .sq--3{width:16px;height:16px}
.wall-legend .sq--4{width:20px;height:20px}

/* ---------- faq ---------- */
.faq{max-width:760px;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px;align-items:center;padding:18px 0;font:500 1.12rem/1.3 var(--font-display)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font:400 1.5rem/1 var(--font-mono);color:var(--fg-2);transition:transform .2s;flex:0 0 auto}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{margin:0 0 20px;color:var(--fg-2);max-width:62ch;text-wrap:pretty}
.faq details a{color:var(--fg)}

/* ---------- small print cards ---------- */

/* ---------- long pages: privacy, terms, 404, thanks ---------- */
.page{padding:clamp(28px,5vw,52px) 0 0;max-width:760px}
.page .small{margin:10px 0 0}
.page__actions{margin:28px 0 0;display:flex;gap:10px;flex-wrap:wrap}
.prose h2{margin:34px 0 10px;font:500 1.35rem/1.25 var(--font-display);letter-spacing:-.01em;text-wrap:balance}
.prose p{margin:0 0 14px;color:var(--fg-2);text-wrap:pretty;max-width:70ch}
.prose p a{color:var(--fg)}
.prose .lede{margin-top:18px;margin-bottom:8px;color:var(--fg)}
.hero--thanks .lede{max-width:700px}
.stub--thanks{display:grid;gap:16px}
.stub--thanks > *{grid-column:1 / -1}
.thanks__actions{display:flex;gap:10px;flex-wrap:wrap}
.receipt-lite{list-style:none;margin:0;padding:0;display:grid;gap:8px;grid-column:1 / -1}
.receipt-lite li{display:flex;justify-content:space-between;gap:16px;padding:8px 0;border-bottom:1px dotted var(--line-2);font-size:.95rem}
.receipt-lite li span:first-child{font:600 .7rem/1.6 var(--font-mono);letter-spacing:.09em;text-transform:uppercase;color:var(--fg-2);flex:0 0 auto}
.receipt-lite li span:last-child{text-align:right;overflow-wrap:anywhere}
.receipt-lite li .q{font-style:italic;font-family:var(--font-display)}
.notice{max-width:760px;margin:22px auto 0;padding:16px 18px;border:1px dashed var(--line-2);border-radius:16px;color:var(--fg-2);font-size:.95rem}
.notice b{color:var(--fg);font-weight:600}

/* ---------- footer (full-bleed band inside the gutter) ---------- */
.foot{margin-top:clamp(56px,9vw,104px);margin-inline:calc(-1 * max(16px, env(safe-area-inset-left, 0px))) calc(-1 * max(16px, env(safe-area-inset-right, 0px)));padding-inline:max(16px, env(safe-area-inset-left, 0px)) max(16px, env(safe-area-inset-right, 0px));border-top:1px solid var(--line);padding-block:32px calc(32px + env(safe-area-inset-bottom, 0px));color:var(--fg-2);font-size:.88rem}
.foot__in{display:grid;gap:18px}
@media (min-width:760px){.foot__in{grid-template-columns:1fr auto;align-items:end}}
.foot p{margin:0;max-width:60ch;text-wrap:pretty}
.foot .brand{margin-bottom:10px}
.foot__right{display:flex;gap:10px 18px;align-items:center;flex-wrap:wrap}
.foot__links{display:flex;gap:16px;font-size:.9rem;flex-wrap:wrap}
.foot__links a{text-decoration:none;border-bottom:1px solid var(--line-2);padding-bottom:1px}
.foot__links a:hover{border-color:var(--fg)}

/* ---------- toast, sticky bar ---------- */
.toast{position:fixed;left:50%;top:calc(env(safe-area-inset-top, 0px) + 72px);transform:translate(-50%,-10px);opacity:0;pointer-events:none;background:var(--toast-bg);color:var(--toast-fg);padding:12px 16px;border-radius:12px;font-size:.92rem;max-width:min(92vw,520px);box-shadow:0 20px 40px -16px var(--shadow);transition:opacity .25s,transform .25s cubic-bezier(.2,.8,.2,1);z-index:30;text-align:center;text-wrap:pretty}
.toast.is-on{opacity:1;transform:translate(-50%,0)}
.bar{position:fixed;left:0;right:0;bottom:0;z-index:25;background:var(--surface);border-top:1px solid var(--line);padding:10px max(16px, env(safe-area-inset-right, 0px)) calc(10px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));display:flex;align-items:center;gap:12px;box-shadow:0 -12px 30px -18px var(--shadow)}
@media (min-width:760px){.bar{display:none}}
.bar__txt{min-width:0;display:grid;gap:1px;flex:1 1 auto}
.bar__amt{font:600 1rem/1.1 var(--font-mono)}
.bar__cap{font:italic 400 .82rem/1.2 var(--font-display);color:var(--fg-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bar .btn{flex:0 0 auto}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .note,.note:not(.is-live){animation:none}
  .tile--you{animation:none}
  .note.is-stamped .stamp{animation:none}
}