/* PRINTER: a print shop. Cream paper, black ink, money green, hard offset shadows, banknotes and receipts. */
:root {
  --paper: #f4f0e6; --paper-2: #ebe5d6; --white: #fffdf7; --ink: #111a14; --ink-2: #3c4a40; --muted: #6e776f; --rule: #d7cfbc;
  --green: #0f8a4a; --green-2: #12a55a; --neon: #2dff7a; --bill: #d9e8d2; --bill-ink: #1d5a35; --red: #d6303f; --gold: #f2b705;
  --display: 'Anton', Impact, 'Arial Narrow', sans-serif; --sans: 'Inter', system-ui, sans-serif; --mono: 'Space Mono', ui-monospace, monospace;
  --shadow: 4px 4px 0 var(--ink); --shadow-sm: 2px 2px 0 var(--ink); --r: 10px;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; }
body { background: var(--paper); color: var(--ink); font: 15px/1.55 var(--sans);
  background-image: radial-gradient(rgba(17,26,20,.06) 1px, transparent 1.2px); background-size: 18px 18px; }
a { color: var(--green); text-decoration: none; font-weight: 600; } a:hover { text-decoration: underline; }
button { font: inherit; color: inherit; }
.muted { color: var(--muted); } .mono { font-family: var(--mono); }
.up { color: var(--green); } .down { color: var(--red); } .r { text-align: right; }
main { max-width: 1240px; margin: 0 auto; padding: 0 24px 40px; }

/* ── ticker tape ── */
.tape { background: var(--ink); color: #e9f3ea; overflow: hidden; white-space: nowrap; font: 700 12.5px var(--mono); border-bottom: 3px solid var(--neon); }
.tape .run { display: inline-flex; gap: 42px; padding: 8px 0; animation: tape 70s linear infinite; }
.tape b { color: var(--neon); } .tape i { font-style: normal; color: #9fb2a4; }
.tape:hover .run { animation-play-state: paused; }
@keyframes tape { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ── top bar ── */
.top { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 22px; padding: 12px 24px; background: rgba(244,240,230,.94); backdrop-filter: blur(6px); border-bottom: 2px solid var(--ink); }
.brand { display: flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none !important; }
.bmark svg { width: 44px; height: 44px; border-radius: 10px; border: 2px solid var(--ink); display: block; box-shadow: var(--shadow-sm); }
.bmark.sm svg { width: 22px; height: 22px; border-width: 1.5px; border-radius: 5px; display: inline-block; vertical-align: -6px; margin-right: 6px; }
.bword { font: 400 30px/1 var(--display); letter-spacing: .02em; }
.links { display: flex; gap: 4px; margin: 0 auto; }
.links a { color: var(--ink); font-weight: 700; font-size: 14px; padding: 7px 12px; border-radius: 99px; border: 2px solid transparent; text-decoration: none; }
.links a:hover { border-color: var(--ink); }
.links a.on { background: var(--ink); color: var(--paper); }
.acts { display: flex; align-items: center; gap: 8px; }
.ca { border: 2px dashed var(--ink); background: var(--white); border-radius: 8px; padding: 6px 10px; font: 700 12px var(--mono); cursor: pointer; }
.xl { display: grid; place-items: center; width: 38px; height: 38px; border: 2px solid var(--ink); border-radius: 8px; color: var(--ink); background: var(--white); }
.burger { display: none; border: 2px solid var(--ink); background: var(--white); border-radius: 8px; width: 40px; height: 40px; cursor: pointer; font-size: 18px; }

/* ── buttons ── */
.b { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 2px solid var(--ink); background: var(--white); color: var(--ink); border-radius: 10px; padding: 10px 16px; font: 800 14px var(--sans); cursor: pointer; box-shadow: var(--shadow-sm); text-decoration: none !important; transition: transform .08s, box-shadow .08s; }
.b:hover:not(:disabled) { transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--ink); }
.b:active:not(:disabled) { transform: translate(2px, 2px); box-shadow: 0 0 0 var(--ink); }
.b.ink { background: var(--ink); color: var(--paper); }
.b.go { background: var(--neon); }
.b.green { background: var(--green); color: #fff; }
.b.red { background: #ffe1e3; color: var(--red); }
.b.ghost { background: transparent; box-shadow: none; }
.b.sm { padding: 6px 11px; font-size: 12.5px; border-radius: 8px; } .b.lg { padding: 14px 22px; font-size: 16px; }
.b:disabled { opacity: .45; cursor: default; }

.notice { max-width: 1240px; margin: 14px auto 0; padding: 10px 14px; border: 2px dashed var(--ink); border-radius: 10px; background: #fff7d1; font: 700 13px var(--mono); display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.toast { position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%); background: var(--ink); color: var(--paper); padding: 11px 18px; border-radius: 10px; font-weight: 700; z-index: 99; box-shadow: 4px 4px 0 var(--neon); }

/* ── blocks ── */
.sec { margin-top: 64px; }
.sh { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; }
.sh h2 { font: 400 clamp(34px, 4.6vw, 54px)/.95 var(--display); text-transform: uppercase; margin: 0; letter-spacing: .01em; }
.sh h2 em { font-style: normal; color: var(--green); }
.sh .kick { display: block; font: 700 12px var(--mono); letter-spacing: .14em; color: var(--muted); text-transform: uppercase; margin-bottom: 6px; }
.sh p { margin: 0; max-width: 520px; color: var(--ink-2); }
.card { background: var(--white); border: 2px solid var(--ink); border-radius: var(--r); box-shadow: var(--shadow); padding: 18px; }
.card h3 { font: 400 26px/1 var(--display); text-transform: uppercase; margin: 0 0 8px; letter-spacing: .01em; }
.lbl { font: 700 11px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.pill { display: inline-block; font: 700 11px var(--mono); letter-spacing: .1em; padding: 3px 9px; border-radius: 99px; border: 2px solid var(--ink); background: var(--white); vertical-align: 2px; }
.pill.live { background: var(--neon); } .pill.paper, .pill.practice { background: #fff1a8; } .pill.on { background: var(--ink); color: var(--paper); } .pill.off { background: var(--paper-2); color: var(--muted); }
.empty { padding: 26px; text-align: center; color: var(--muted); border: 2px dashed var(--rule); border-radius: var(--r); }

/* ── hero ── */
.hero { display: grid; grid-template-columns: 1.25fr 1fr; gap: 40px; align-items: center; padding: 50px 0 10px; }
.hero .kick { display: inline-flex; gap: 8px; align-items: center; font: 700 12.5px var(--mono); letter-spacing: .12em; text-transform: uppercase; border: 2px solid var(--ink); background: var(--white); border-radius: 99px; padding: 5px 12px; }
.hero .kick i { width: 9px; height: 9px; border-radius: 50%; background: var(--green-2); box-shadow: 0 0 0 3px rgba(18,165,90,.25); animation: pulse 1.6s infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 7px rgba(18,165,90,0); } }
.hero h1 { font: 400 clamp(52px, 7vw, 100px)/1.08 var(--display); text-transform: uppercase; margin: 18px 0 20px; letter-spacing: -.005em; }
.hero h1 .hl { color: var(--white); background: var(--green); padding: 0 .1em; box-decoration-break: clone; -webkit-box-decoration-break: clone; box-shadow: 5px 5px 0 var(--ink); }
.hero .sub { font-size: 18px; color: var(--ink-2); max-width: 600px; margin: 0 0 22px; }
.hero .sub b { color: var(--ink); background: linear-gradient(transparent 58%, rgba(45,255,122,.55) 0); }
.findbar { display: flex; gap: 8px; max-width: 560px; }
.findbar input { flex: 1; min-width: 0; border: 2px solid var(--ink); border-radius: 10px; padding: 12px 14px; font: 700 14px var(--mono); background: var(--white); outline: none; }
.findbar input:focus { box-shadow: var(--shadow-sm); }
.ctas { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }

/* the hero's money printer (web/machine.js) */
.machine { position: relative; justify-self: center; width: min(560px, 100%); }
.mprint { width: 100%; height: auto; display: block; overflow: visible; }
.mprint .rumble { animation: rumble .16s linear infinite alternate; transform-origin: 280px 480px; }
@keyframes rumble { from { transform: translate(-.8px, 0) rotate(-.15deg); } to { transform: translate(.8px, -.6px) rotate(.15deg); } }
.mprint .feed { animation: feedin 3.5s ease-in-out infinite; }
@keyframes feedin { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(8px); } }
.mprint .data { animation: led .35s steps(1) infinite; } .mprint .pwr { animation: led 2.4s steps(1) infinite; }
.mprint .fly { opacity: 0; animation: fly 3.5s cubic-bezier(.25,.7,.4,1) infinite; }
@keyframes fly {
  0% { transform: translate(0, -6px) scale(.92, .08); opacity: 1; }
  12% { transform: translate(0, 18px) scale(1, 1) rotate(0); opacity: 1; }
  55% { transform: translate(calc(var(--dx) * .7), calc(var(--dy) * .5 + 6px)) rotate(calc(var(--r) * .7)); opacity: 1; }
  88% { opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)) rotate(var(--r)); opacity: 0; }
}
.mprint.burst .fly { animation-duration: 1.6s; }
.mprint.burst .rumble { animation-duration: .08s; }
@keyframes led { 50% { fill: #3b4044; } }
.mprint .brrr { animation: brrr .5s ease-in-out infinite alternate; transform-origin: 280px 110px; }
@keyframes brrr { from { transform: scale(1); } to { transform: scale(1.05) translateY(-3px); } }
.mprint .shake-lines { animation: lines .3s steps(2) infinite; } @keyframes lines { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .mprint * { animation: none !important; } .mprint .fly { opacity: 0; } }

/* receipts */
.receipt { position: relative; background: var(--white); color: var(--ink); padding: 14px 16px 22px; font: 400 12.5px/1.55 var(--mono); border-left: 2px solid var(--ink); border-right: 2px solid var(--ink);
  -webkit-mask: radial-gradient(circle 7px at 50% 100%, #0000 98%, #000) 0 0 / 16px 100% repeat-x; mask: radial-gradient(circle 7px at 50% 100%, #0000 98%, #000) 0 0 / 16px 100% repeat-x; }
.receipt .rh { text-align: center; font-weight: 700; letter-spacing: .18em; border-bottom: 1.5px dashed var(--ink); padding-bottom: 6px; margin-bottom: 8px; }
.receipt .rl { display: flex; justify-content: space-between; gap: 10px; } .receipt .rl b { font-weight: 700; }
.receipt .tot { border-top: 1.5px dashed var(--ink); margin-top: 8px; padding-top: 6px; font-weight: 700; font-size: 15px; }
.receipt .who { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; color: var(--ink); } .receipt .who svg { width: 28px; height: 28px; border-radius: 6px; border: 1.5px solid var(--ink); }
.receipt .stampx { display: table; margin: 10px auto 0; transform: rotate(-6deg); border: 2.5px solid var(--green); color: var(--green); font: 700 12px var(--mono); letter-spacing: .14em; padding: 2px 7px; border-radius: 5px; opacity: .85; }
.receipts { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 18px; }
.receipts .receipt { border-top: 2px solid var(--ink); border-radius: 4px 4px 0 0; }

/* banknote strip */
.bill { position: relative; margin-top: 46px; background: var(--bill); border: 3px solid var(--ink); border-radius: 14px; box-shadow: var(--shadow); padding: 20px 24px; overflow: hidden;
  background-image: repeating-radial-gradient(circle at 0 50%, transparent 0 9px, rgba(29,90,53,.07) 9px 10px), repeating-radial-gradient(circle at 100% 50%, transparent 0 9px, rgba(29,90,53,.07) 9px 10px); }
.bill::before { content: ''; position: absolute; inset: 8px; border: 1.5px solid rgba(29,90,53,.45); border-radius: 9px; pointer-events: none; }
.bill .serial { display: flex; justify-content: space-between; font: 700 12px var(--mono); color: var(--bill-ink); letter-spacing: .16em; margin-bottom: 10px; }
.bill .nums { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.bill .nums div { text-align: center; padding: 6px 4px; }
.bill .nums b { display: block; font: 400 clamp(30px, 3.8vw, 46px)/1 var(--display); color: var(--bill-ink); letter-spacing: .01em; }
.bill .nums span { font: 700 11px var(--mono); letter-spacing: .1em; color: var(--bill-ink); text-transform: uppercase; opacity: .8; }

/* the loop */
.loop { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.step { position: relative; background: var(--white); border: 2px solid var(--ink); border-radius: var(--r); box-shadow: var(--shadow); padding: 18px; }
.step .n { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--ink); color: var(--paper); font: 400 18px var(--display); }
.step h4 { font: 400 28px/1 var(--display); text-transform: uppercase; margin: 12px 0 6px; }
.step p { margin: 0; color: var(--ink-2); font-size: 14px; }
.step .v { margin-top: 12px; font: 700 15px var(--mono); border-top: 2px dashed var(--rule); padding-top: 10px; }
.step:not(:last-child)::after { content: '→'; position: absolute; right: -19px; top: 44%; font: 400 26px var(--display); color: var(--green); z-index: 2; }
.step.hot { background: var(--neon); }

/* split columns */
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: start; }
.two.wide-l { grid-template-columns: 1.4fr 1fr; }
.tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.tabs button { border: 2px solid var(--ink); background: var(--white); border-radius: 99px; padding: 4px 12px; font: 700 12px var(--mono); cursor: pointer; }
.tabs button.on { background: var(--ink); color: var(--paper); }
.feed { display: flex; flex-direction: column; }
.feed .it { display: grid; grid-template-columns: 64px 1fr auto; gap: 10px; align-items: start; padding: 9px 0; border-bottom: 1.5px dashed var(--rule); font-size: 14px; }
.feed .it:last-child { border-bottom: 0; }
.feed time { font: 700 11.5px var(--mono); color: var(--muted); padding-top: 2px; }
.tag { display: inline-block; font: 700 10.5px var(--mono); letter-spacing: .08em; text-transform: uppercase; padding: 1px 7px; border-radius: 5px; border: 1.5px solid var(--ink); margin-right: 6px; background: var(--white); }
.tag.printed { background: var(--neon); } .tag.win { background: #c9f5d9; } .tag.loss { background: #ffd9dc; } .tag.raid { background: #fff1a8; } .tag.round { background: var(--bill); } .tag.burn { background: #ffd9c2; } .tag.council { background: #e3d9ff; } .tag.duel { background: #ffd9dc; } .tag.alliance { background: #c9f5d9; }

/* printer cards */
.pgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 16px; }
.pcard { display: block; background: var(--white); border: 2px solid var(--ink); border-radius: var(--r); box-shadow: var(--shadow-sm); padding: 12px; color: var(--ink); text-decoration: none !important; transition: transform .1s, box-shadow .1s; position: relative; }
.pcard:hover { transform: translate(-2px, -2px); box-shadow: var(--shadow); }
.pcard svg { width: 100%; height: auto; aspect-ratio: 1; border-radius: 8px; border: 2px solid var(--ink); display: block; }
.pcard .nm { font: 800 14px var(--sans); margin-top: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pcard .meta { display: flex; justify-content: space-between; font: 700 11.5px var(--mono); color: var(--muted); margin-top: 3px; }
.pcard .rank { position: absolute; top: -10px; left: -10px; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: var(--gold); border: 2px solid var(--ink); font: 400 17px var(--display); }
.pcard.trading::after { content: 'IN A TRADE'; position: absolute; top: 18px; right: 18px; font: 700 9.5px var(--mono); letter-spacing: .1em; background: var(--neon); border: 1.5px solid var(--ink); border-radius: 4px; padding: 1px 5px; }

/* the wall: every printer as a tile */
.wall { display: grid; grid-template-columns: repeat(auto-fill, minmax(62px, 1fr)); gap: 8px; }
.wall a { position: relative; display: block; border-radius: 9px; border: 2px solid var(--ink); overflow: hidden; background: var(--white); }
.wall a svg { width: 100%; height: auto; display: block; }
.wall a.trading { box-shadow: 0 0 0 3px var(--neon); }
.wall a.idle { opacity: .4; filter: grayscale(.7); }
.wall a.flash { animation: flash 1.4s ease-out; }
@keyframes flash { 0% { box-shadow: 0 0 0 8px var(--gold); transform: scale(1.12); } 100% { box-shadow: 0 0 0 0 var(--gold); transform: none; } }
.legend { display: flex; gap: 16px; flex-wrap: wrap; font: 700 12px var(--mono); color: var(--muted); margin-top: 12px; }
.legend i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; border: 2px solid var(--ink); vertical-align: -2px; margin-right: 5px; }

/* chat + council */
.chatlist { max-height: 460px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding-right: 4px; }
.msg { display: grid; grid-template-columns: 36px 1fr; gap: 10px; }
.msg svg { width: 36px; height: 36px; border-radius: 8px; border: 2px solid var(--ink); }
.msg .bub { background: var(--paper); border: 2px solid var(--ink); border-radius: 4px 12px 12px 12px; padding: 7px 11px; font-size: 14px; }
.msg .bub .h { font: 700 11.5px var(--mono); color: var(--muted); margin-bottom: 2px; } .msg .bub .h a { color: var(--ink); }
.lessons { margin: 10px 0 0; padding: 0; list-style: none; } .lessons li { padding: 8px 0; border-top: 1.5px dashed var(--rule); font-size: 14px; } .lessons time { font: 700 11px var(--mono); color: var(--muted); margin-right: 8px; }
.kv { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; }
.kv div { border: 2px solid var(--ink); border-radius: 8px; padding: 8px 10px; background: var(--paper); }
.kv b { display: block; font: 400 24px/1.1 var(--display); letter-spacing: .02em; } .kv span { font: 700 10.5px var(--mono); letter-spacing: .08em; color: var(--muted); text-transform: uppercase; }

/* staking */
.stakecard { background: linear-gradient(180deg, #eef6ea, var(--white)); }
.stakerow { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; border: 2px dashed var(--ink); border-radius: 10px; padding: 12px 14px; background: var(--white); }
.stakerow b { display: block; font: 400 32px/1.05 var(--display); letter-spacing: .02em; } .stakerow small { display: block; font-size: 12.5px; }

/* meetings */
.boardroom { display: grid; grid-template-columns: 290px 1fr; gap: 22px; align-items: start; }
.mlist { position: sticky; top: 84px; max-height: calc(100vh - 110px); overflow-y: auto; padding: 14px; }
.mitem { display: block; padding: 9px 10px; border: 2px solid transparent; border-radius: 9px; color: var(--ink); text-decoration: none !important; }
.mitem:hover { border-color: var(--ink); }
.mitem.on { background: var(--ink); color: var(--paper); } .mitem.on small { color: #b9c6bc; }
.mitem b { display: block; font: 400 20px/1.1 var(--display); letter-spacing: .02em; } .mitem span { display: block; font: 700 11.5px var(--mono); } .mitem small { color: var(--muted); font-size: 12px; }
.transcript { display: flex; flex-direction: column; gap: 10px; max-height: 640px; overflow-y: auto; padding: 4px 4px 4px 0; }
.transcript.mini { max-height: 380px; }
.mline { display: grid; grid-template-columns: 40px 1fr; gap: 10px; align-items: start; }
.mline.new { animation: popin .35s ease-out; }
@keyframes popin { from { opacity: 0; transform: translateY(6px); } }
.mline svg { width: 40px; height: 40px; border-radius: 9px; border: 2px solid var(--ink); display: block; }
.mline .mb { background: var(--white); border: 2px solid var(--ink); border-radius: 4px 14px 14px 14px; padding: 8px 12px; font-size: 14.5px; box-shadow: var(--shadow-sm); }
.mline .mh { display: flex; gap: 6px; align-items: center; font: 700 11.5px var(--mono); color: var(--muted); margin-bottom: 2px; } .mline .mh a { color: var(--ink); } .mline .mh time { margin-left: auto; }
.mline.chair .mb { background: var(--ink); color: var(--paper); } .mline.chair .mh, .mline.chair .mh a { color: #b9c6bc; }
.mline.proposal .mb { background: #fff1a8; } .mline.vote .mb { background: var(--neon); } .mline.leader .mb { background: #ffe9a8; }
.mline.boss .mb { background: #ebe3ff; } .mline.react .mb { background: var(--paper); }
.mline.typing { grid-template-columns: auto 1fr; align-items: center; }
.dots { display: inline-flex; gap: 4px; background: var(--white); border: 2px solid var(--ink); border-radius: 99px; padding: 8px 12px; }
.dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--ink); animation: dot 1s infinite; } .dots i:nth-child(2) { animation-delay: .15s; } .dots i:nth-child(3) { animation-delay: .3s; }
@keyframes dot { 50% { transform: translateY(-4px); opacity: .4; } }
@media (max-width: 1000px) { .boardroom { grid-template-columns: 1fr; } .mlist { position: static; max-height: 260px; } }

/* closing band */
.band { margin-top: 70px; background: var(--ink); color: var(--paper); border-radius: 16px; padding: 34px; display: grid; grid-template-columns: 1fr auto; gap: 20px; align-items: center; box-shadow: 8px 8px 0 var(--green); }
.band h2 { font: 400 clamp(32px, 4.4vw, 54px)/.95 var(--display); text-transform: uppercase; margin: 0; } .band h2 em { font-style: normal; color: var(--neon); }
.band p { margin: 8px 0 0; color: #b9c6bc; }

/* ── one printer ── */
.crumb { margin: 26px 0 14px; font: 700 12.5px var(--mono); color: var(--muted); }
.ph { display: grid; grid-template-columns: 180px 1fr auto; gap: 24px; align-items: center; }
.ph .face svg { width: 180px; height: 180px; border-radius: 16px; border: 3px solid var(--ink); box-shadow: var(--shadow); display: block; }
.ph h1 { font: 400 clamp(36px, 5vw, 60px)/.95 var(--display); text-transform: uppercase; margin: 6px 0 10px; }
.ph .tags { display: flex; gap: 6px; flex-wrap: wrap; }
.minibill { background: var(--bill); border: 2.5px solid var(--ink); border-radius: 12px; padding: 14px 18px; text-align: center; box-shadow: var(--shadow); min-width: 210px;
  background-image: repeating-radial-gradient(circle at 0 50%, transparent 0 7px, rgba(29,90,53,.08) 7px 8px); }
.minibill span { font: 700 10.5px var(--mono); letter-spacing: .12em; color: var(--bill-ink); text-transform: uppercase; } .minibill b { display: block; font: 400 40px/1 var(--display); color: var(--bill-ink); margin: 4px 0; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-top: 26px; }
.stats div { background: var(--white); border: 2px solid var(--ink); border-radius: 10px; padding: 10px 12px; }
.stats b { display: block; font: 400 26px/1.1 var(--display); letter-spacing: .02em; } .stats > div > span { font: 700 10.5px var(--mono); letter-spacing: .08em; color: var(--muted); text-transform: uppercase; }
.cols { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 26px; align-items: start; }
.cols > div { display: flex; flex-direction: column; gap: 22px; }
.switch { display: flex; align-items: center; justify-content: space-between; gap: 14px; border: 2px solid var(--ink); border-radius: 12px; padding: 14px; background: var(--paper); }
.switch .big { font: 400 26px/1 var(--display); text-transform: uppercase; }
.tog { position: relative; width: 74px; height: 38px; border-radius: 99px; border: 2px solid var(--ink); background: var(--paper-2); cursor: pointer; flex: none; }
.tog::after { content: ''; position: absolute; top: 4px; left: 4px; width: 26px; height: 26px; border-radius: 50%; background: var(--white); border: 2px solid var(--ink); transition: left .15s; }
.tog.on { background: var(--neon); } .tog.on::after { left: 40px; }
.tog:disabled { opacity: .5; cursor: default; }
.opts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 8px; }
.opts.five { grid-template-columns: repeat(5, 1fr); }
.opt { text-align: left; border: 2px solid var(--ink); border-radius: 10px; background: var(--white); padding: 10px; cursor: pointer; }
.opt:hover:not(:disabled) { background: var(--paper); }
.opt.on { background: var(--ink); color: var(--paper); } .opt.on small { color: #b9c6bc; }
.opt span { font-size: 20px; } .opt b { display: block; font: 800 13.5px var(--sans); margin-top: 2px; } .opt small { display: block; color: var(--muted); font-size: 11.5px; line-height: 1.35; margin-top: 3px; }
.opt:disabled { cursor: default; }
.rowb { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 8px; }
.say { margin-top: 10px; font-size: 13.5px; font-weight: 700; min-height: 1.2em; } .say.ok { color: var(--green); } .say.err { color: var(--red); }
.guard { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 12px; }
.guard div { border: 2px dashed var(--ink); border-radius: 8px; padding: 8px 10px; } .guard span { display: block; font: 700 10px var(--mono); letter-spacing: .1em; color: var(--muted); text-transform: uppercase; } .guard b { font: 700 14px var(--mono); }
.live-trade { border: 2px solid var(--ink); background: #fff7d1; border-radius: 12px; padding: 14px; }
.live-trade .sym { font: 400 34px/1 var(--display); }
table.t { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.t th { text-align: left; font: 700 10.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); padding: 8px 6px; border-bottom: 2px solid var(--ink); }
table.t td { padding: 8px 6px; border-bottom: 1.5px dashed var(--rule); vertical-align: middle; }
table.t tr:last-child td { border-bottom: 0; }
table.t .who { display: flex; align-items: center; gap: 8px; color: var(--ink); } table.t .who svg { width: 30px; height: 30px; border-radius: 6px; border: 1.5px solid var(--ink); }
.chatbox { display: flex; flex-direction: column; gap: 8px; max-height: 300px; overflow-y: auto; margin: 10px 0; padding: 4px; }
.bb { max-width: 86%; padding: 8px 12px; border: 2px solid var(--ink); border-radius: 12px; font-size: 14px; }
.bb.me { align-self: flex-end; background: var(--ink); color: var(--paper); border-radius: 12px 12px 4px 12px; }
.bb.bot { align-self: flex-start; background: var(--paper); border-radius: 12px 12px 12px 4px; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip { border: 2px solid var(--ink); background: var(--white); border-radius: 99px; padding: 4px 11px; font: 700 12px var(--sans); cursor: pointer; }
.chip:hover { background: var(--neon); }
.talkrow { display: flex; gap: 8px; margin-top: 10px; }
textarea, input[type=text] { flex: 1; border: 2px solid var(--ink); border-radius: 10px; padding: 10px 12px; font: 14px var(--sans); background: var(--white); resize: vertical; outline: none; min-width: 0; }
.pb { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; margin-top: 10px; }
.pb div { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; border-bottom: 1.5px dashed var(--rule); padding: 4px 0; } .pb div span { color: var(--muted); } .pb div.mine b { background: var(--neon); padding: 0 4px; border-radius: 3px; }
.search { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 16px; }
.search input { max-width: 340px; }
.fine { margin: 0; padding-left: 18px; } .fine li { margin: 6px 0; color: var(--ink-2); }

@media (max-width: 1000px) {
  .hero { grid-template-columns: 1fr; } .machine { justify-self: start; }
  .loop { grid-template-columns: 1fr 1fr; } .step:nth-child(2)::after { display: none; }
  .two, .two.wide-l, .cols { grid-template-columns: 1fr; }
  .ph { grid-template-columns: 120px 1fr; } .ph .face svg { width: 120px; height: 120px; } .minibill { grid-column: 1 / -1; }
}
@media (max-width: 820px) {
  .links { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; background: var(--paper); border-bottom: 2px solid var(--ink); padding: 10px 16px; }
  .links.open { display: flex; } .burger { display: grid; place-items: center; } .top { gap: 10px; padding: 10px 16px; } #buy, .ca { display: none; }
  main { padding: 0 16px 40px; } .bill .nums { grid-template-columns: 1fr 1fr; } .loop { grid-template-columns: 1fr; } .step::after { display: none; }
  .opts, .opts.five { grid-template-columns: 1fr 1fr; } .band { grid-template-columns: 1fr; padding: 24px; } .foot { flex-direction: column; }
  table.t { font-size: 12.5px; } .hide-sm { display: none; }
}
.foot { max-width: 1240px; margin: 40px auto 0; padding: 22px 24px 40px; border-top: 2px solid var(--ink); display: flex; justify-content: space-between; gap: 12px; font-size: 13.5px; }