/* A market at night. Dark lane, lantern amber, and cream receipt paper for anything the till prints.
   Serif italics for the voice, mono for money. Motion lives in the market canvas and the receipts. */
:root{
  --night:#0c0a11; --panel:#14101b; --panel2:#1c1626; --ink:#f4ecdc; --mute:#aca193; --dim:#72685f;
  --line:rgba(244,236,220,.11); --line2:rgba(244,236,220,.22);
  --lamp-rgb:255,180,73; --lamp:rgb(var(--lamp-rgb)); --shut:#ff6a5c; --ok:#8fd6a0;
  --paper:#f0e6cf; --paper-ink:#1d1712; --paper-mute:#6d6152; --paper-line:rgba(29,23,18,.2); --paper-ok:#22703f; --paper-shut:#bb2f25;
  --serif:"Fraunces",Georgia,serif; --sans:"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif; --mono:"DM Mono",ui-monospace,Consolas,monospace;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px}
body{margin:0;background:var(--night);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased}
h1,h2,h3,p,dl,dd,ol,ul,fieldset{margin:0;padding:0} fieldset{border:0;min-width:0} ol,ul{list-style:none}
a{color:inherit;text-decoration:none} button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--lamp);outline-offset:3px;border-radius:3px}
[hidden]{display:none!important}
.wrap{max-width:1320px;margin-inline:auto;padding-inline:clamp(16px,4vw,56px)}
.lbl{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.lbl i{font-style:normal;color:var(--lamp);margin-right:10px}
.mute{color:var(--dim);font-size:14px}
em{font-style:italic;color:var(--lamp)}

/* header */
.top{position:sticky;top:0;z-index:20;background:rgba(12,10,17,.86);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.top-row{display:flex;align-items:center;justify-content:space-between;gap:20px;height:64px}
.logo{display:inline-flex;align-items:center;gap:10px;font-family:var(--serif);font-weight:600;font-size:20px;letter-spacing:.14em;color:var(--ink)}
.lantern{width:12px;height:16px;border-radius:3px 3px 5px 5px;background:var(--lamp);box-shadow:0 0 14px 3px rgba(var(--lamp-rgb),.55);animation:flicker 3.4s ease-in-out infinite}
@keyframes flicker{0%,100%{opacity:1}42%{opacity:.82}47%{opacity:1}71%{opacity:.9}}
nav{display:flex;gap:clamp(14px,2.4vw,34px)} nav a:hover{color:var(--ink)}
@media (max-width:900px){nav{display:none}}
.top-cta{display:flex;align-items:center;gap:12px}
.purse{border:1px solid var(--line2);border-radius:999px;padding:8px 12px;color:var(--lamp);white-space:nowrap;letter-spacing:.06em}
@media (max-width:420px){.purse{display:none}}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--sans);font-weight:600;font-size:14.5px;cursor:pointer;white-space:nowrap;
  background:var(--lamp);color:#1a1206;border:1px solid var(--lamp);border-radius:6px;padding:11px 18px;box-shadow:0 0 0 rgba(var(--lamp-rgb),0);transition:box-shadow .2s,transform .1s}
.btn:hover{box-shadow:0 0 26px rgba(var(--lamp-rgb),.42)} .btn:active{transform:translateY(1px)}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line2)} .btn.ghost:hover{box-shadow:none;border-color:var(--ink)}
.btn[disabled]{opacity:.55;cursor:wait}

/* hero */
.hero{padding-block:clamp(34px,5vw,68px) clamp(40px,5vw,72px);display:flex;flex-direction:column;gap:clamp(24px,3vw,40px)}
.hero-copy{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(20px,4vw,64px);align-items:end}
@media (max-width:900px){.hero-copy{grid-template-columns:minmax(0,1fr)}}
h1{font-family:var(--serif);font-weight:500;font-size:clamp(40px,6vw,84px);line-height:1;letter-spacing:-.025em;text-wrap:balance}
h2{font-family:var(--serif);font-weight:500;font-size:clamp(32px,4.2vw,56px);line-height:1.02;letter-spacing:-.02em;text-wrap:balance}
h3{font-family:var(--serif);font-weight:600;font-size:22px;line-height:1.15}
.lede{color:var(--mute);max-width:58ch;font-size:16.5px}
.hero-side{display:flex;flex-direction:column;gap:22px;align-items:flex-start}
.cta{display:flex;gap:12px;flex-wrap:wrap}

.stage{position:relative;border:1px solid var(--line2);border-radius:14px;overflow:hidden;
  background:radial-gradient(120% 90% at 50% 38%,#231a2d 0%,#150f1d 48%,#0b0810 100%)}
#market{display:block;width:100%;height:clamp(330px,52vw,640px);cursor:default}
.stage-top,.stage-bot{position:absolute;left:14px;right:14px;display:flex;gap:8px;justify-content:space-between;pointer-events:none}
.stage-top{top:14px} .stage-bot{bottom:14px}
.chip{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--mute);background:rgba(12,10,17,.72);border:1px solid var(--line);border-radius:999px;padding:6px 11px;white-space:nowrap}
.chip.live{color:var(--ink)} .chip.live::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--lamp);margin-right:8px;box-shadow:0 0 8px var(--lamp);animation:flicker 2s infinite}
@media (max-width:560px){.stage-bot,#mode{display:none}}
.tip{position:absolute;pointer-events:none;background:var(--paper);color:var(--paper-ink);font-family:var(--mono);font-size:12px;line-height:1.45;padding:9px 11px;border-radius:4px;transform:translate(-50%,calc(-100% - 14px));white-space:nowrap;box-shadow:0 8px 24px rgba(0,0,0,.5)}
.tip b{display:block;font-family:var(--serif);font-size:15px;font-weight:600}

.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-block:1px solid var(--line)}
.stats div{padding:16px 18px 18px;border-left:1px solid var(--line)} .stats div:first-child{border-left:0;padding-left:0}
.stats dd{font-family:var(--serif);font-size:clamp(26px,3vw,38px);line-height:1.1;margin-top:4px;font-variant-numeric:tabular-nums}
.stats div:last-child dd{color:var(--lamp)}
@media (max-width:640px){.stats{grid-template-columns:repeat(2,minmax(0,1fr))}.stats div:nth-child(3){border-left:0;padding-left:0}.stats div:nth-child(n+3){border-top:1px solid var(--line)}}

/* wholesale ticker */
.ticker{position:relative;overflow:hidden;white-space:nowrap;border-top:1px solid var(--line)}
.ticker-in{display:inline-flex;padding-block:12px;animation:tick 70s linear infinite}
.ticker:hover .ticker-in{animation-play-state:paused}
@keyframes tick{to{transform:translateX(-50%)}}
.tick-lbl{position:absolute;z-index:1;left:0;top:0;bottom:0;display:flex;align-items:center;padding:0 34px 0 clamp(16px,4vw,56px);color:var(--lamp);background:linear-gradient(90deg,var(--night) 78%,transparent)}
.ticker .it{font-family:var(--mono);font-size:12.5px;color:var(--mute);padding-right:38px;font-variant-numeric:tabular-nums}
.ticker .it b{font-weight:500;color:var(--ink);margin:0 8px}
.ticker .it i{font-style:normal;color:var(--dim)} .ticker .it i.up{color:var(--shut)} .ticker .it i.dn{color:var(--ok)}
@media (prefers-reduced-motion:reduce){.ticker{overflow-x:auto;scrollbar-width:none}}

/* sections */
.sec{padding-block:clamp(52px,7vw,104px);border-top:1px solid var(--line);display:flex;flex-direction:column;gap:clamp(24px,3vw,40px)}
.sec-head{display:flex;flex-direction:column;gap:14px;align-items:flex-start}

/* paper: anything the till prints */
.paper{--z:10px;background:var(--paper);color:var(--paper-ink);font-family:var(--mono);font-size:13px;line-height:1.5;
  -webkit-mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) bottom/var(--z) 51% repeat-x,conic-gradient(from 135deg at top,#0000,#000 1deg 89deg,#0000 90deg) top/var(--z) 51% repeat-x;
  mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) bottom/var(--z) 51% repeat-x,conic-gradient(from 135deg at top,#0000,#000 1deg 89deg,#0000 90deg) top/var(--z) 51% repeat-x}
.receipt{padding:26px 18px 28px;position:relative;display:flex;flex-direction:column;gap:10px;min-height:230px}
.r-title{font-weight:500;letter-spacing:.14em;text-align:center;padding-bottom:10px;border-bottom:1px dashed var(--paper-line)}
.r-note{color:var(--paper-mute)}
.r-what{font-family:var(--serif);font-size:19px;font-weight:600;line-height:1.2}
.r-checks{display:flex;flex-direction:column}
.r-checks li{display:grid;grid-template-columns:30px minmax(0,1fr);gap:8px;padding:7px 0;border-bottom:1px dashed var(--paper-line)}
.r-checks li>b{font-weight:500} .r-checks li.ok>b{color:var(--paper-ok)} .r-checks li.no>b{color:var(--paper-shut)}
.r-checks span b{font-weight:500} .r-checks small{display:block;font-size:12px;color:var(--paper-mute);overflow-wrap:anywhere}
.r-checks li.skip{opacity:.4}
.r-total{display:flex;justify-content:space-between;font-weight:500}
.stamp{align-self:center;margin-top:6px;font-weight:500;font-size:15px;letter-spacing:.16em;padding:7px 14px;border:3px double currentColor;border-radius:4px;transform:rotate(-5deg);color:var(--paper-ok)}
.stamp.no{color:var(--paper-shut)}
.receipt.fresh .stamp{animation:thunk .35s cubic-bezier(.2,1.6,.4,1)}
.receipt.fresh{animation:print .45s ease-out}
@keyframes thunk{from{transform:rotate(-5deg) scale(2.2);opacity:0}}
@keyframes print{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0)}}

/* counter */
.counter{display:grid;grid-template-columns:minmax(0,260px) minmax(0,1fr) minmax(0,290px);gap:18px;align-items:start}
@media (max-width:1100px){.counter{grid-template-columns:minmax(0,240px) minmax(0,1fr)}.side{grid-column:1/-1;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:18px}}
@media (max-width:760px){.counter{grid-template-columns:minmax(0,1fr)}}
.stalls{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:10px;overflow:hidden;max-height:640px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--dim) transparent}
@media (max-width:760px){.stalls{flex-direction:row;overflow-x:auto;max-height:none}.stalls button{flex:0 0 190px;border-bottom:0;border-right:1px solid var(--line)}}
.stalls button{display:grid;grid-template-columns:10px minmax(0,1fr) auto;gap:2px 10px;align-items:center;text-align:left;background:none;border:0;border-bottom:1px solid var(--line);padding:12px 14px;cursor:pointer}
.stalls button:last-child{border-bottom:0}
.stalls button:hover{background:var(--panel)} .stalls button.on{background:var(--panel2)}
.stalls .dot{width:10px;height:10px;border-radius:2px;grid-row:1/3}
.stalls b{font-weight:600;font-size:14.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.stalls .p{font-family:var(--mono);font-size:13px;color:var(--lamp)}
.stalls small{grid-column:2/4;color:var(--dim);font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.stalls button.out .p{color:var(--dim)}

.booth{border:1px solid var(--line2);border-radius:10px;background:var(--panel);display:flex;flex-direction:column;min-width:0}
.booth-head{padding:18px;display:flex;flex-direction:column;gap:12px;border-bottom:1px solid var(--line)}
.booth-id{display:flex;gap:14px;align-items:center}
.face{width:68px;height:68px;flex:none;border-radius:13px}
.swatch{width:34px;height:34px;border-radius:6px;flex:none;background:repeating-linear-gradient(90deg,var(--c,#c8423b) 0 7px,var(--paper) 7px 14px)}
.booth-char{color:var(--mute);font-family:var(--serif);font-style:italic;font-size:17px}
.kv{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
@media (max-width:520px){.kv{grid-template-columns:repeat(2,minmax(0,1fr))}}
.kv dd{font-family:var(--mono);font-size:17px;margin-top:2px;font-variant-numeric:tabular-nums}
.chat{height:280px;overflow-y:auto;padding:16px 18px;display:flex;flex-direction:column;gap:10px;scrollbar-width:thin;scrollbar-color:var(--dim) transparent}
.chat p{max-width:85%;padding:9px 13px;border-radius:12px;font-size:15px;overflow-wrap:anywhere}
.chat .k{align-self:flex-start;background:var(--panel2);border:1px solid var(--line);border-bottom-left-radius:3px;font-family:var(--serif);font-size:16.5px}
.chat .y{align-self:flex-end;background:rgba(var(--lamp-rgb),.14);border:1px solid rgba(var(--lamp-rgb),.3);border-bottom-right-radius:3px}
.chat .s{align-self:center;font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--dim);padding:2px 0;text-align:center}
.chat .s.ok{color:var(--ok)} .chat .s.no{color:var(--shut)}
.chat .k.wait::after{content:"…";animation:flicker 1s infinite}
.chips{display:flex;gap:8px;flex-wrap:wrap;padding:0 18px 14px}
.chips button{font-size:13px;color:var(--mute);background:none;border:1px solid var(--line2);border-radius:999px;padding:6px 12px;cursor:pointer;text-align:left}
.chips button:hover{color:var(--ink);border-color:var(--ink)}
.say{display:grid;grid-template-columns:104px 112px minmax(0,1fr) auto;gap:10px;align-items:end;padding:14px 18px 18px;border-top:1px solid var(--line)}
@media (max-width:620px){.say{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.f-text,.say .btn{grid-column:1/-1}}
label,.say label{display:flex;flex-direction:column;gap:6px;min-width:0}
input,select,textarea{background:var(--night);border:1px solid var(--line2);border-radius:6px;padding:10px 12px;width:100%;font-size:15px;min-width:0}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--lamp)}
textarea{min-height:92px;resize:vertical}
.cur{display:flex;align-items:center;gap:6px;background:var(--night);border:1px solid var(--line2);border-radius:6px;padding-left:11px;font-family:var(--mono);color:var(--lamp)}
.cur:focus-within{border-color:var(--lamp)}
.cur input{border:0;background:none;padding-left:0;font-family:var(--mono);color:var(--ink)}
.stepper{display:grid;grid-template-columns:36px 1fr 36px;align-items:center;border:1px solid var(--line2);border-radius:6px;background:var(--night);height:44px}
.stepper button{background:none;border:0;height:100%;cursor:pointer;font-size:18px;color:var(--mute)} .stepper button:hover{color:var(--ink)}
.stepper output{text-align:center;font-family:var(--mono)}
.say .btn{height:44px}

.side{display:flex;flex-direction:column;gap:18px;min-width:0}
.bag{border:1px solid var(--line);border-radius:10px;padding:16px;display:flex;flex-direction:column;gap:10px}
.bag li{display:flex;justify-content:space-between;gap:10px;font-family:var(--mono);font-size:13.5px;padding:6px 0;border-bottom:1px solid var(--line)}
.bag li:last-child{border-bottom:0} .bag .sum{color:var(--lamp)}
.journal li{display:grid;grid-template-columns:44px minmax(0,1fr);justify-content:initial;font-family:var(--sans);font-size:13.5px;color:var(--mute)}
.journal li span:first-child{font-family:var(--mono);font-size:12px;color:var(--dim)}
.journal li.no span:last-child{color:var(--shut)} .journal li.mute{display:block}
.r-rows li{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-bottom:1px dashed var(--paper-line)}
.r-rows small{display:block;font-size:12px;color:var(--paper-mute)}
.r-rows li>b{font-weight:500;white-space:nowrap}
.hunters .receipt{min-height:0;margin-bottom:10px}

/* tape */
.filters,.tabs{display:flex;gap:8px;flex-wrap:wrap}
.filters button,.tabs button{font-size:13.5px;color:var(--mute);background:none;border:1px solid var(--line2);border-radius:999px;padding:7px 14px;cursor:pointer}
.filters button:hover,.tabs button:hover{color:var(--ink)}
.filters button.on,.tabs button.on{background:var(--ink);color:var(--night);border-color:var(--ink)}
.roll{padding:22px clamp(14px,2.4vw,28px) 26px;max-height:520px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--paper-mute) transparent}
.roll .r{display:grid;grid-template-columns:46px minmax(0,170px) 92px minmax(0,1fr) 70px;gap:12px;padding:8px 0;border-bottom:1px dashed var(--paper-line);align-items:baseline}
.roll .r:last-child{border-bottom:0}
.roll .t,.roll .by{color:var(--paper-mute)}
.roll .who{font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;background:none;border:0;padding:0;text-align:left;cursor:pointer;color:inherit;font:inherit}
.roll .who:hover{text-decoration:underline}
.roll .k{letter-spacing:.08em;font-size:11.5px}
.roll .tx{font-family:var(--sans);font-size:14.5px;overflow-wrap:anywhere}
.roll .amt{text-align:right;font-variant-numeric:tabular-nums}
.roll .r[data-g="blocked"] .k,.roll .r[data-g="blocked"] .amt{color:var(--paper-shut)}
.roll .r[data-g="deal"] .k{color:var(--paper-ok)}
.roll .r.new{animation:ink 1.6s ease-out}
@keyframes ink{from{background:rgba(255,180,73,.5)}}
.roll[data-f="deal"] .r:not([data-g="deal"]),.roll[data-f="sale"] .r:not([data-g="sale"]),.roll[data-f="move"] .r:not([data-g="move"]),.roll[data-f="blocked"] .r:not([data-g="blocked"]){display:none}
@media (max-width:760px){.roll .r{grid-template-columns:46px minmax(0,1fr) 64px;gap:2px 10px}.roll .k{display:none}.roll .tx{grid-column:2/4}}

/* till playground */
.play{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:18px;align-items:start}
@media (max-width:860px){.play{grid-template-columns:minmax(0,1fr)}}
.play-ctl{border:1px solid var(--line2);border-radius:10px;background:var(--panel);padding:18px;display:flex;flex-direction:column;gap:18px;min-width:0}
#pFields{display:flex;flex-direction:column;gap:16px}
.range{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 12px;align-items:center}
.range .lbl{grid-column:1/-1}
.range output{font-family:var(--mono);font-size:15px;color:var(--lamp);min-width:64px;text-align:right}
input[type=range]{appearance:none;-webkit-appearance:none;height:26px;padding:0;border:0;background:none}
input[type=range]::-webkit-slider-runnable-track{height:4px;border-radius:2px;background:var(--line2)}
input[type=range]::-moz-range-track{height:4px;border-radius:2px;background:var(--line2)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:var(--lamp);margin-top:-7px;box-shadow:0 0 12px rgba(var(--lamp-rgb),.6);cursor:grab}
input[type=range]::-moz-range-thumb{width:18px;height:18px;border:0;border-radius:50%;background:var(--lamp);cursor:grab}
.json{margin:0;font-family:var(--mono);font-size:12.5px;color:var(--mute);background:var(--night);border:1px solid var(--line);border-radius:6px;padding:12px;white-space:pre-wrap;overflow-wrap:anywhere}
.rules{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));gap:0;border-top:1px solid var(--line)}
.rules li{padding:18px 18px 18px 0;border-bottom:1px solid var(--line)}
.rules b{display:block;font-family:var(--serif);font-size:19px;font-weight:600;margin-bottom:4px}
.rules span{color:var(--mute);font-size:14.5px}

/* standings */
.board{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,290px);gap:28px;align-items:start}
@media (max-width:980px){.board{grid-template-columns:minmax(0,1fr)}}
.tbl-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:10px}
.tbl{width:100%;border-collapse:collapse;font-size:14.5px}
.tbl th,.tbl td{padding:12px 14px;text-align:left;border-bottom:1px solid var(--line);white-space:nowrap}
.tbl thead th{font-family:var(--mono);font-size:11px;font-weight:400;letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.tbl tbody tr:last-child>*{border-bottom:0}
.tbl .n{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums}
.tbl .up{color:var(--ok)} .tbl .dn{color:var(--shut)}
.tbl tbody tr.on{background:var(--panel2)}
.tbl .nm{display:inline-flex;align-items:center;gap:10px;background:none;border:0;padding:0;cursor:pointer;font-weight:600}
.tbl .nm:hover{color:var(--lamp)} .tbl .nm i{width:10px;height:10px;border-radius:2px}
.tbl svg{display:block}
.tbl.real th{font-family:var(--serif);font-size:18px;font-weight:600;vertical-align:top;width:190px}
.tbl.real td{white-space:normal;color:var(--mute)}
@media (max-width:560px){.tbl.real th{width:110px}}
.hunters{display:flex;flex-direction:column;gap:12px}
#hunters{counter-reset:h}
#hunters li{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--line);font-size:14.5px}
#hunters li:not(.mute)::before{counter-increment:h;content:counter(h);font-family:var(--mono);color:var(--dim);margin-right:10px}
#hunters li span:first-of-type{flex:1} #hunters li span:last-child{font-family:var(--mono);color:var(--lamp)}

/* open a stall */
.open{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:clamp(18px,3vw,44px);align-items:start}
@media (max-width:860px){.open{grid-template-columns:minmax(0,1fr)}.preview{order:-1}}
.form{display:flex;flex-direction:column;gap:18px}
.row2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
@media (max-width:520px){.row2{grid-template-columns:minmax(0,1fr)}}
legend{margin-bottom:8px}
.tempers{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));gap:10px}
.tempers button{text-align:left;background:var(--panel);border:1px solid var(--line2);border-radius:8px;padding:12px 14px;cursor:pointer;display:flex;flex-direction:column;gap:3px}
.tempers button b{font-family:var(--serif);font-size:17px;font-weight:600} .tempers button span{color:var(--mute);font-size:13px}
.tempers button.on{border-color:var(--lamp);background:rgba(var(--lamp-rgb),.08)}
.swatches{display:flex;gap:8px;flex-wrap:wrap}
.swatches button{width:32px;height:32px;border-radius:6px;border:2px solid transparent;cursor:pointer;background:var(--c)}
.swatches button.on{border-color:var(--ink);box-shadow:0 0 0 2px var(--night) inset}
.form-end{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.msg{font-family:var(--mono);font-size:13px;color:var(--mute)} .msg.err{color:var(--shut)} .msg.ok{color:var(--ok)}
.preview{border:1px solid var(--line2);border-radius:14px;background:radial-gradient(90% 80% at 50% 55%,#261c31 0%,#120d19 70%);padding:12px 12px 16px;text-align:center;position:sticky;top:90px}
#preview{display:block;width:100%;height:300px}

/* holders */
.hold{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:18px;align-items:start}
@media (max-width:860px){.hold{grid-template-columns:minmax(0,1fr)}}
.hold-kv dd{font-family:var(--serif);font-size:26px;color:var(--ink)} .hold-kv div:first-child dd{color:var(--lamp)}
.wallet{display:flex;align-items:center;gap:12px 16px;flex-wrap:wrap;padding-top:16px;border-top:1px solid var(--line)}
.wallet p{font-size:14px;color:var(--mute);flex:1 1 220px}
.wallet code{font-family:var(--mono);color:var(--ink)}
.tiers{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.tiers li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 14px;padding:16px 18px;border-bottom:1px solid var(--line);border-left:3px solid transparent}
.tiers li:last-child{border-bottom:0}
.tiers li.on{background:var(--panel2);border-left-color:var(--lamp)}
.tiers b{font-family:var(--serif);font-size:20px;font-weight:600}
.tiers .min{font-family:var(--mono);font-size:13px;color:var(--lamp);align-self:center}
.tiers span.d{grid-column:1/-1;color:var(--mute);font-size:14.5px}
.swatches button.locked{opacity:.35;cursor:not-allowed;position:relative}
.swatches button.locked::after{content:"";position:absolute;inset:9px;border:2px solid var(--ink);border-radius:2px}
.badge{font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--lamp);border:1px solid rgba(var(--lamp-rgb),.5);border-radius:999px;padding:1px 7px;margin-left:8px;font-weight:400}

/* faq + footer */
.faq{border-top:1px solid var(--line)}
details{border-bottom:1px solid var(--line)}
summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:18px;padding:18px 0;font-family:var(--serif);font-size:20px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font-family:var(--mono);color:var(--lamp)} details[open] summary::after{content:"–"}
details p{color:var(--mute);padding-bottom:20px;max-width:68ch}
.foot{display:flex;justify-content:space-between;align-items:center;gap:14px 40px;flex-wrap:wrap;padding-block:28px 48px;border-top:1px solid var(--line);text-transform:none;letter-spacing:.02em;font-size:12.5px}
.foot .logo{font-size:16px}
.foot-links{display:flex;gap:18px} .foot-links a{color:var(--lamp)} .foot-links a:hover{text-decoration:underline}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}