/* A poster, not a dashboard, edge to edge: grid paper, ink outlines, hard offset shadows, lime and
   magenta for anything that matters. Unbounded for the shouting, Chakra Petch for the small print,
   JetBrains Mono for numbers and keys. Every control is drawn here: no native selects, checkboxes, file
   pickers or scrollbars. */

:root {
  --ink: #0c0c10; --paper: #fbfbf7; --grid: rgba(12, 12, 16, .075);
  --purple: #5b21e6; --purple-d: #4313c9; --mag: #c026ff; --lime: #b4f22b; --lime-d: #9bdc10;
  --grey: #dcdce1; --grey-2: #ececf0; --red: #ff3b5c; --gold: #ffb800;
  --tx: #0c0c10; --tx-2: #45454f; --tx-3: #7b7b88;
  --line: rgba(12, 12, 16, .14);
  --disp: 'Unbounded', 'Arial Black', system-ui, sans-serif;
  --sans: 'Chakra Petch', system-ui, -apple-system, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --b: 2.5px solid var(--ink);
  --sh: 4px 4px 0 var(--ink); --sh-s: 2.5px 2.5px 0 var(--ink);
  color-scheme: light;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; overflow: hidden; background: var(--purple); color: var(--tx); font: 500 14.5px/1.5 var(--sans); -webkit-font-smoothing: antialiased; }
body.page { overflow: auto; }
a { color: inherit; text-decoration: none; }
p { margin: 0; }
h1, h2, h3, h4 { margin: 0; font-family: var(--disp); letter-spacing: -.02em; line-height: 1.05; }
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }
::selection { background: var(--lime); color: var(--ink); }
.mono { font-family: var(--mono); }
.soft { color: var(--tx-2); } .faint { color: var(--tx-3); }
.gold { color: var(--purple); font-weight: 700; }
.ok { color: #1c8a3a; } .bad { color: var(--red); }
.kick, .label { font: 700 11.5px var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--tx-3); }
.kick { display: inline-flex; align-items: center; gap: 8px; }
.fine { font-size: 12.5px; color: var(--tx-3); }
.usd { font: 600 12.5px var(--mono); color: var(--tx-3); }

* { scrollbar-width: thin; scrollbar-color: var(--ink) transparent; }
::-webkit-scrollbar { width: 7px; height: 7px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--ink); border-radius: 7px; }

.dot { position: relative; display: inline-block; width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 2px var(--ink); }
.dot.g { background: var(--lime); }
.dot.off { background: #bdbdc7; }
.dot:not(.off) { animation: blink 1.6s steps(2) infinite; }
@keyframes blink { 50% { background: #fff; } }
.soli { width: .62em; height: .62em; margin-right: .28em; flex: none; vertical-align: -.02em; }

/* ---- buttons ------------------------------------------------------------------------------------------ */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 18px; border-radius: 12px; border: var(--b); background: #fff; color: var(--ink); font: 700 14px var(--sans); letter-spacing: .03em; text-transform: uppercase; cursor: pointer; box-shadow: var(--sh-s); transition: transform .12s, box-shadow .12s, background .12s; white-space: nowrap; }
.btn:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--ink); }
.btn:active { transform: translate(2px, 2px); box-shadow: 0 0 0 var(--ink); }
.btn:disabled { opacity: .5; pointer-events: none; }
.btn.sm { height: 36px; padding: 0 12px; font-size: 12.5px; border-radius: 10px; }
.btn.wide { width: 100%; }
.btn.big { height: 54px; font: 800 16px var(--disp); letter-spacing: 0; }
.btn.ghost { background: transparent; box-shadow: none; }
.btn.ghost:hover { background: #fff; box-shadow: var(--sh-s); }
.btn-ink, .btn-primary { background: var(--ink); color: #fff; box-shadow: 4px 4px 0 var(--lime); }
.btn-ink:hover, .btn-primary:hover { box-shadow: 6px 6px 0 var(--lime); }
.btn-ink:active, .btn-primary:active { box-shadow: 0 0 0 var(--lime); }
.btn-blue, .btn-gold { background: var(--lime); }
.btn-red, .btn-stop { background: #fff; color: var(--red); border-color: var(--red); box-shadow: 2.5px 2.5px 0 var(--red); }
.btn-red:hover, .btn-stop:hover { box-shadow: 4px 4px 0 var(--red); }

/* ---- inputs ------------------------------------------------------------------------------------------- */
.field { display: grid; gap: 6px; }
.field > span { font: 700 11.5px var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--tx-2); }
.input { width: 100%; height: 44px; padding: 0 13px; border-radius: 11px; border: var(--b); background: #fff; color: var(--ink); font: 500 14px var(--sans); outline: none; transition: box-shadow .12s; }
.input.mono { font: 500 13px var(--mono); }
textarea.input { height: 84px; padding: 10px 13px; resize: vertical; }
.input:focus { box-shadow: 3px 3px 0 var(--purple); }
.input::placeholder { color: #a9a9b4; }
.row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.row.between { justify-content: space-between; }
.grow { flex: 1; min-width: 0; }
.grid2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.switch { display: inline-flex; align-items: center; gap: 10px; padding: 0; border: 0; background: none; font: 600 13.5px var(--sans); color: var(--tx-2); cursor: pointer; }
.switch i { position: relative; width: 40px; height: 22px; border-radius: 22px; border: var(--b); background: #fff; flex: none; transition: background .15s; }
.switch i::after { content: ""; position: absolute; left: 2px; top: 2px; width: 13px; height: 13px; border-radius: 50%; background: var(--ink); transition: transform .18s var(--ease); }
.switch[aria-checked="true"] i { background: var(--lime); }
.switch[aria-checked="true"] i::after { transform: translateX(18px); }
.chips { display: flex; flex-wrap: wrap; gap: 5px; }
.chips button { height: 26px; padding: 0 9px; border-radius: 8px; border: 2px solid var(--line); background: #fff; color: var(--tx-2); font: 500 11px var(--mono); cursor: pointer; }
.chips button:hover { border-color: var(--ink); color: var(--ink); }
.chips button.on { border-color: var(--ink); background: var(--lime); color: var(--ink); }

/* ---- the poster: three columns inside the purple frame ---------------------------------------------- */
.poster { position: fixed; inset: 0; display: grid; grid-template-columns: minmax(330px, 410px) minmax(0, 1fr) minmax(340px, 420px); gap: 0; overflow: hidden; background: var(--paper); }
.col { position: relative; min-width: 0; min-height: 0; }
.paper { background-color: var(--paper); background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px); background-size: 22px 22px; overflow: auto; }
.left { padding: 22px 22px 20px; display: flex; flex-direction: column; gap: 14px; border-right: var(--b); }
.right { display: flex; flex-direction: column; border-left: var(--b); }

/* the logo: a black chip, a lime live dot, the word in white, a lime edge behind it, tipped a little */
.brand { align-self: flex-start; display: inline-flex; align-items: center; gap: 9px; padding: 7px 16px 9px 11px; border-radius: 13px; background: var(--ink); color: #fff; font: 900 21px/1 var(--disp); letter-spacing: -.05em; box-shadow: 4px 4px 0 var(--lime), 4px 4px 0 2.5px var(--ink); transform: rotate(-2deg); transition: transform .15s var(--ease); }
.brand:hover { transform: rotate(0deg) scale(1.03); }
.brand i { width: 11px; height: 11px; margin-top: 2px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 3.5px rgba(180, 242, 43, .28); animation: live 1.8s ease-in-out infinite; }
@keyframes live { 50% { box-shadow: 0 0 0 6px rgba(180, 242, 43, .12); } }
.head { position: relative; padding-right: 96px; }
.head h1 { font: 900 clamp(26px, 2.5vw, 36px)/1.02 var(--disp); text-transform: uppercase; letter-spacing: -.035em; }
.head h1 em { font-style: normal; color: var(--mag); }
.stamp { position: absolute; right: 0; bottom: -4px; width: 88px; height: 88px; border-radius: 50%; border: var(--b); background: var(--lime); display: grid; place-items: center; align-content: center; gap: 1px; transform: rotate(-10deg); box-shadow: var(--sh-s); }
.stamp svg { width: 30px; height: 30px; }
.stamp i { font: 700 8.5px var(--sans); font-style: normal; letter-spacing: .12em; text-transform: uppercase; }
.tags { display: flex; align-items: center; gap: 9px; font: 700 11px var(--sans); letter-spacing: .12em; text-transform: uppercase; flex-wrap: wrap; }
.tags i { font-style: normal; color: var(--purple); }

/* the ticket for the safe in front */
.ticket { border: var(--b); border-radius: 16px; background: #fff; box-shadow: var(--sh); overflow: hidden; flex: none; }
.ticket > header { display: flex; align-items: center; justify-content: space-between; padding: 9px 16px; background: var(--lime); border-bottom: var(--b); }
.ticket > header b { font: 900 25px/1.1 var(--disp); text-transform: uppercase; letter-spacing: -.03em; }
.spark { font-size: 22px; }
.tk-body { padding: 14px 16px 16px; display: grid; gap: 11px; }
.tk-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.stub { position: relative; display: inline-flex; align-items: center; height: 28px; padding: 0 16px 0 12px; border: 2px solid var(--ink); border-radius: 6px; font: 800 12px var(--disp); text-transform: uppercase; background: radial-gradient(circle at 100% 50%, #fff 5px, transparent 5.5px); }
.tk-state { padding: 3px 9px; border-radius: 7px; border: 2px solid var(--ink); font: 700 11px var(--sans); letter-spacing: .1em; text-transform: uppercase; background: var(--lime); }
.tk-state.cracked { background: var(--ink); color: var(--lime); }
.tk-body h3 { font: 800 16.5px/1.15 var(--disp); text-transform: uppercase; }
.tk-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; font: 600 11.5px var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--tx-2); }
.tk-prize { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; }
.tk-prize small { display: block; font: 600 12.5px var(--sans); color: var(--tx-2); }
.tk-prize b { position: relative; display: inline-block; font: 900 32px/1.05 var(--disp); letter-spacing: -.04em; white-space: nowrap; z-index: 0; }
.tk-prize b::after { content: ""; position: absolute; z-index: -1; left: -3px; right: -6px; bottom: 1px; height: 10px; background: var(--lime); transform: rotate(-1.4deg); border-radius: 2px; }
.tk-prize b small { display: inline; font: 800 13px var(--disp); margin-left: 5px; color: var(--ink); }
.tk-prize .usd { display: block; margin-top: 2px; }
.smile { width: 74px; height: 74px; flex: none; border-radius: 50%; border: var(--b); background: var(--lime); display: grid; place-items: center; text-align: center; transform: rotate(8deg); }
.smile i { font: 700 10px/1.15 var(--sans); font-style: normal; letter-spacing: .08em; text-transform: uppercase; max-width: 56px; }
.tk-foot { position: relative; background: var(--purple); color: #fff; padding: 12px 16px 12px; border-top: 2.5px dashed var(--ink); display: grid; gap: 8px; }
.tk-foot::before, .tk-foot::after { content: ""; position: absolute; top: -11px; width: 20px; height: 20px; border-radius: 50%; background: var(--paper); border: var(--b); }
.tk-foot::before { left: -12px; } .tk-foot::after { right: -12px; }
.barcode { height: 34px; background: repeating-linear-gradient(90deg, #fff 0 3px, transparent 3px 5px, #fff 5px 6px, transparent 6px 10px, #fff 10px 14px, transparent 14px 16px, #fff 16px 17px, transparent 17px 21px); }
.tk-meta { display: flex; justify-content: space-between; gap: 10px; font: 600 11px var(--sans); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
.tk-meta b { font-family: var(--mono); letter-spacing: 0; color: var(--lime); }

/* all ten, to jump between */
.picker { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 7px; }
.picker li { position: relative; padding: 7px 4px 6px; border-radius: 10px; border: 2px solid var(--ink); background: #fff; text-align: center; cursor: pointer; transition: transform .12s, box-shadow .12s; }
.picker li:hover { transform: translate(-1px, -1px); box-shadow: var(--sh-s); }
.picker li b { display: block; font: 900 15px/1 var(--disp); }
.picker li small { display: block; margin-top: 3px; font: 600 9.5px var(--mono); color: var(--tx-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.picker li.on { background: var(--lime); box-shadow: var(--sh-s); }
.picker li.cracked { background: var(--ink); color: #fff; } .picker li.cracked small { color: var(--lime); }
.picker li.mine::after { content: ""; position: absolute; right: -5px; top: -5px; width: 11px; height: 11px; border-radius: 50%; background: var(--mag); border: 2px solid var(--ink); }
.picker li.busy::before { content: attr(data-n); position: absolute; left: -5px; top: -6px; min-width: 16px; height: 16px; padding: 0 3px; border-radius: 8px; background: var(--purple); color: #fff; border: 2px solid var(--ink); font: 700 9px/12px var(--mono); }
.held { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 4px 10px; font: 600 12px var(--sans); color: var(--tx-3); }
.held b { font: 600 12.5px var(--mono); color: var(--ink); white-space: nowrap; }
.held b em { font-style: normal; color: var(--tx-3); margin-left: 6px; }

/* ---- the room --------------------------------------------------------------------------------------- */
.art { background: var(--grey); overflow: hidden; }
.art::before { content: ""; position: absolute; inset: 0; background:
  radial-gradient(60% 46% at 50% 58%, #fff 0, transparent 70%),
  linear-gradient(115deg, transparent 0 62%, var(--purple) 62% 74%, transparent 74%); opacity: .9; }
.art::after { content: ""; position: absolute; left: -6%; right: -6%; top: 66%; height: 15%; background: var(--purple); transform: rotate(-7deg); clip-path: polygon(0 30%, 6% 8%, 20% 22%, 34% 0, 52% 18%, 70% 4%, 86% 20%, 100% 6%, 100% 78%, 88% 96%, 70% 80%, 52% 100%, 34% 82%, 16% 98%, 0 80%); }
#scene { position: absolute; inset: 0; z-index: 2; cursor: grab; }
#scene canvas { display: block; touch-action: pan-y; }
body.orbiting, body.orbiting * { cursor: grabbing !important; user-select: none; }
#labels { position: absolute; inset: 0; z-index: 3; pointer-events: none; overflow: hidden; }
.art-top { position: absolute; z-index: 5; left: 14px; right: 14px; top: 14px; display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; pointer-events: none; }
.art-top > * { pointer-events: auto; }
.chip-ais, .chip-tok { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px; border-radius: 11px; border: var(--b); background: #fff; box-shadow: var(--sh-s); font: 700 12px var(--sans); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.chip-ais b { font: 700 14px var(--mono); }
/* the panels fold away: a tab on each edge of the room */
.poster.hide-l { grid-template-columns: minmax(0, 1fr) minmax(340px, 420px); }
.poster.hide-r { grid-template-columns: minmax(330px, 410px) minmax(0, 1fr); }
.poster.hide-l.hide-r { grid-template-columns: minmax(0, 1fr); }
.poster.hide-l .left, .poster.hide-r .right { display: none; }
.fold { position: absolute; z-index: 6; top: 66px; display: inline-flex; align-items: center; gap: 5px; height: 34px; padding: 0 10px; border: var(--b); background: #fff; color: var(--ink); font: 700 11px var(--sans); letter-spacing: .08em; text-transform: uppercase; cursor: pointer; transition: background .12s, padding .12s; }
.fold svg { width: 13px; height: 13px; transition: transform .2s var(--ease); }
.fold:hover { background: var(--lime); }
.fold.l { left: -2.5px; border-radius: 0 10px 10px 0; box-shadow: 2.5px 2.5px 0 var(--ink); }
.fold.r { right: -2.5px; border-radius: 10px 0 0 10px; box-shadow: -2.5px 2.5px 0 var(--ink); }
.fold.l:hover { padding-right: 14px; } .fold.r:hover { padding-left: 14px; }
.fold[aria-expanded="false"] { background: var(--ink); color: var(--lime); }
.fold[aria-expanded="false"] svg { transform: rotate(180deg); }
.art-links { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.chip-link { display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 13px; border-radius: 11px; border: var(--b); background: var(--ink); color: #fff; box-shadow: 2.5px 2.5px 0 var(--lime); font: 700 12px var(--sans); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; transition: transform .12s; }
.chip-link:hover { transform: translate(-1px, -1px); }
.chip-link svg { width: 14px; height: 14px; }
.back { position: fixed; z-index: 40; left: 14px; top: 14px; }
body:not(.page) .back { display: none; }
.logo { display: block; width: 1em; height: 1em; }
.chip-tok { background: var(--lime); padding-left: 6px; }
.chip-tok img { width: 24px; height: 24px; border-radius: 7px; }
.chip-tok b { font: 600 12.5px var(--mono); letter-spacing: 0; }
.chip-tok em { font: 700 11.5px var(--mono); font-style: normal; letter-spacing: 0; }
.up { color: #14702c; } .down { color: var(--red); }
.arrow { position: absolute; z-index: 5; top: 50%; width: 50px; height: 50px; margin-top: -25px; border-radius: 50%; border: var(--b); background: #fff; display: grid; place-items: center; cursor: pointer; box-shadow: var(--sh-s); transition: transform .12s, background .12s; }
.arrow svg { width: 22px; height: 22px; }
.arrow:hover { background: var(--lime); transform: scale(1.06); }
.arrow:active { transform: scale(.94); }
.arrow.prev { left: 14px; } .arrow.next { right: 14px; }
.art-title { position: absolute; z-index: 4; left: 0; right: 0; bottom: 78px; display: flex; align-items: baseline; justify-content: center; gap: 12px; pointer-events: none; }
.art-title span { font: 900 clamp(40px, 5vw, 68px)/1 var(--disp); letter-spacing: -.05em; color: var(--lime); -webkit-text-stroke: 2.5px var(--ink); paint-order: stroke fill; text-shadow: 4px 4px 0 var(--ink); }
.art-title b { font: 900 clamp(20px, 2.4vw, 32px)/1 var(--disp); text-transform: uppercase; letter-spacing: -.03em; color: #fff; -webkit-text-stroke: 2.5px var(--ink); paint-order: stroke fill; text-shadow: 3px 3px 0 var(--ink); }
.art-foot { position: absolute; z-index: 5; left: 0; right: 0; bottom: 0; height: 62px; display: flex; align-items: center; gap: 14px; padding: 0 0 0 16px; background: var(--purple); color: #fff; border-top: var(--b); }
.live { display: inline-flex; align-items: center; gap: 8px; font: 700 11.5px var(--sans); letter-spacing: .1em; text-transform: uppercase; flex: none; }
.feed { flex: 1; min-width: 0; display: flex; gap: 18px; white-space: nowrap; overflow: hidden; font: 600 13px var(--sans); }
.feed span { overflow: hidden; text-overflow: ellipsis; }
.feed b { color: var(--lime); }
.go { height: 100%; display: inline-flex; align-items: center; gap: 12px; padding: 0 0 0 20px; border: 0; border-left: var(--b); background: var(--purple-d); cursor: pointer; flex: none; }
.go span { font: 900 clamp(15px, 1.5vw, 21px) var(--disp); text-transform: uppercase; letter-spacing: -.02em; color: var(--lime); white-space: nowrap; }
.go i { height: 100%; width: 62px; display: grid; place-items: center; background: var(--lime); color: var(--ink); border-left: var(--b); }
.go i svg { width: 24px; height: 24px; transition: transform .15s; }
.go:hover i svg { transform: translateX(4px); }

/* over every safe: what's in its vault, what that's worth, and how many AIs are on it */
.vlabel { position: relative; display: grid; justify-items: center; gap: 3px; padding: 7px 12px 8px; border-radius: 12px; border: var(--b); background: #fff; box-shadow: var(--sh-s); white-space: nowrap; text-align: center; transition: opacity .25s, scale .25s var(--ease); transform-origin: 50% 100%; }
.vlabel::after { content: ""; position: absolute; left: 50%; bottom: -8px; width: 12px; height: 12px; margin-left: -6px; background: #fff; border-right: var(--b); border-bottom: var(--b); transform: rotate(45deg); }
.vlabel b { display: inline-flex; align-items: center; gap: 6px; font: 900 19px/1 var(--disp); letter-spacing: -.04em; }
.vlabel b svg { width: 14px; height: 11px; }
.vlabel span { font: 600 12px/1 var(--mono); color: var(--tx-2); }
.vlabel i { margin-top: 1px; padding: 2px 8px; border-radius: 6px; border: 1.5px solid var(--ink); background: var(--grey-2); font: 700 10px/1.3 var(--sans); font-style: normal; letter-spacing: .08em; text-transform: uppercase; }
.vlabel i.on { background: var(--lime); }
.vlabel i.gone { background: var(--ink); color: var(--lime); }
.vwrap.side .vlabel { scale: .72; opacity: .92; }
.vwrap.off .vlabel { opacity: 0; scale: .5; }

/* the AIs at the safe in front: a block of small labels each side of it, filling down then outwards */
.crowd { position: absolute; z-index: 100000; top: 50%; transform: translateY(-50%); display: grid; grid-auto-flow: column; grid-template-rows: repeat(var(--rows, 5), auto); gap: 5px 6px; align-content: center; }
.crowd.l { right: calc(50% + var(--sx, 160px)); direction: rtl; }
.crowd.r { left: calc(50% + var(--sx, 160px)); }
.tag { --k: var(--ink); position: relative; direction: ltr; zoom: var(--tz, 1); width: 176px; display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; column-gap: 6px; padding: 3px 7px 6px 4px; border-radius: 9px; border: 2px solid var(--ink); background: #fff; box-shadow: 2px 2px 0 var(--ink); white-space: nowrap; overflow: hidden; animation: tag-in .3s var(--ease) both; }
@keyframes tag-in { from { opacity: 0; scale: .8; } }
.tag img, .tag .av { width: 22px; height: 22px; border-radius: 6px; border: 1.5px solid var(--ink); background: var(--lime); object-fit: cover; display: grid; place-items: center; font: 800 10px var(--disp); }
.tg-m { min-width: 0; }
.tag b { display: block; font: 700 11px/1.25 var(--sans); overflow: hidden; text-overflow: ellipsis; }
.tg-l { display: flex; align-items: center; gap: 4px; min-width: 0; font: 600 9.5px/1.3 var(--sans); }
.tg-l i { width: 11px; height: 11px; flex: none; border-radius: 3px; display: grid; place-items: center; background: var(--k); color: #fff; }
.tg-l i svg { width: 7px; height: 7px; }
.tg-l span { flex: none; }
.tg-l em { min-width: 0; overflow: hidden; text-overflow: ellipsis; font: 500 9px var(--mono); font-style: normal; color: var(--tx-3); }
.tg-v { font: 600 10px var(--mono); }
.tag u { position: absolute; left: 0; bottom: 0; height: 3px; background: var(--k); transition: width .6s var(--ease); }
.tag[data-k="think"] { --k: var(--purple); } .tag[data-k="code"] { --k: var(--mag); } .tag[data-k="grind"] { --k: #e08a00; } .tag[data-k="try"] { --k: #1c8a3a; } .tag[data-k="wait"] { --k: var(--red); } .tag[data-k="idle"] { --k: #8d8d99; }
.tag.me { background: var(--lime); }
.tag.hit { background: var(--mag); color: #fff; }
.tag.more { display: block; width: auto; justify-self: start; padding: 4px 9px; background: var(--ink); color: var(--lime); font: 700 10px var(--sans); letter-spacing: .08em; text-transform: uppercase; }
/* a narrow room: one short column at each edge, under the chips */
.tight .crowd { top: 58px; transform: none; }
.tight .crowd.l { right: auto; left: 8px; direction: ltr; } .tight .crowd.r { left: auto; right: 8px; }
.tight .tag { width: 136px; }

/* what an AI is doing: an icon in its colour, a label, a live value; stages and the time-lock get a bar */
.act { --k: var(--ink); display: flex; align-items: center; gap: 6px; min-width: 0; font: 700 11px var(--sans); }
.act-ic { width: 17px; height: 17px; flex: none; display: grid; place-items: center; border-radius: 5px; color: #fff; background: var(--k); }
.act-ic svg { width: 10px; height: 10px; }
.act-l { overflow: hidden; text-overflow: ellipsis; }
.act-v { margin-left: auto; padding-left: 6px; font: 600 10.5px var(--mono); }
.act-dots { display: inline-flex; gap: 2px; margin-left: 1px; }
.act-dots i { width: 4px; height: 4px; border-radius: 50%; background: var(--ink); animation: dot 1.2s infinite ease-in-out; }
.act-dots i:nth-child(2) { animation-delay: .15s; } .act-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes dot { 0%, 80%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-2px); } }
.act-bar { height: 6px; margin-top: 4px; border-radius: 4px; border: 1.5px solid var(--ink); background: #fff; overflow: hidden; }
.act-bar i { display: block; height: 100%; background: var(--mag); transition: width .6s var(--ease); }
.act-bar.st i { background: var(--purple); }
.k-think { --k: var(--purple); } .k-code { --k: var(--mag); } .k-grind { --k: #e08a00; } .k-try { --k: #1c8a3a; } .k-wait { --k: var(--red); } .k-read { --k: var(--ink); } .k-idle { --k: #8d8d99; }
.k-code .act-ic svg { animation: nudge 1s infinite ease-in-out; }
.k-grind .act-ic svg { animation: spin 4s linear infinite; }
@keyframes nudge { 50% { transform: scale(.8); } }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---- your AI: a three-step set-up, a boarding pass once it's sent, and its log as a receipt ------------- */
.deck-h { display: flex; align-items: center; gap: 12px; padding: 13px 16px; background: var(--ink); color: #fff; border-bottom: var(--b); flex: none; }
.deck-n { font: 900 38px/1 var(--disp); letter-spacing: -.06em; color: var(--lime); }
.deck-t { flex: 1; min-width: 0; }
.deck-t .kick { color: #9a9aa8; }
.deck-t h2 { font: 900 19px/1.1 var(--disp); text-transform: uppercase; letter-spacing: -.02em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mine, .gate, .setup, .pass { margin: 14px 16px 0; flex: none; }
.mine { display: flex; flex-wrap: wrap; gap: 6px; }
.mine button { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 9px 0 4px; border-radius: 14px; border: 2px solid var(--ink); background: #fff; font: 600 11px var(--mono); cursor: pointer; }
.mine button b { display: grid; place-items: center; height: 18px; min-width: 24px; padding: 0 5px; border-radius: 9px; background: var(--ink); color: var(--lime); font: 800 10px var(--disp); }
.mine button.on { background: var(--lime); }
.mine button.idle { color: var(--tx-3); }
.gate { padding: 9px 13px; border-radius: 4px; border: var(--b); background: var(--mag); color: #fff; font: 600 13px var(--sans); transform: rotate(-.6deg); box-shadow: var(--sh-s); }

.setup { display: grid; }
.stepr { position: relative; display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 12px; padding-bottom: 16px; }
.stepr::before { content: ""; position: absolute; left: 14px; top: 32px; bottom: 2px; width: 2.5px; background: repeating-linear-gradient(var(--ink) 0 5px, transparent 5px 10px); }
.num { position: relative; width: 30px; height: 30px; border-radius: 50%; border: var(--b); background: var(--lime); display: grid; place-items: center; font: 900 13px var(--disp); }
.stepr-b { display: grid; gap: 9px; min-width: 0; }
.stepr-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 30px; }
.stepr-h b { font: 800 13.5px var(--disp); text-transform: uppercase; }
.prov-name { padding: 2px 9px; border-radius: 6px; background: var(--ink); color: var(--lime); font: 700 11px var(--sans); letter-spacing: .1em; text-transform: uppercase; }
.link { padding: 0; border: 0; background: none; color: var(--purple); font: 700 11.5px var(--sans); letter-spacing: .08em; text-transform: uppercase; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.link:hover { color: var(--ink); }
.prov { display: flex; gap: 9px; flex-wrap: wrap; }
.prov-t { width: 50px; height: 50px; padding: 0; border-radius: 50%; border: var(--b); background: #fff; color: var(--ink); display: grid; place-items: center; cursor: pointer; transition: transform .14s var(--ease), box-shadow .14s, background .14s; }
.prov-t .logo { width: 22px; height: 22px; }
.prov-t:hover { transform: translateY(-2px); box-shadow: 0 3px 0 var(--ink); }
.prov-t.on { background: var(--ink); color: var(--lime); transform: translateY(-3px); box-shadow: 0 4px 0 var(--lime), 0 4px 0 2.5px var(--ink); }
.launch { display: flex; align-items: stretch; width: 100%; height: 58px; padding: 0; border: var(--b); border-radius: 14px; background: var(--ink); color: #fff; cursor: pointer; overflow: hidden; box-shadow: 4px 4px 0 var(--mag); transition: transform .12s, box-shadow .12s; }
.launch span { flex: 1; display: grid; place-items: center; padding: 0 10px; font: 900 15px var(--disp); text-transform: uppercase; letter-spacing: -.01em; }
.launch i { width: 62px; display: grid; place-items: center; background: var(--lime); color: var(--ink); border-left: var(--b); }
.launch i svg { width: 24px; height: 24px; transition: transform .15s; }
.launch:hover { transform: translate(-1px, -1px); box-shadow: 6px 6px 0 var(--mag); }
.launch:hover i svg { transform: translateX(4px); }
.launch:active { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--mag); }

/* the boarding pass: who's working, how far through the stages, what it's doing this second */
.pass { border: var(--b); border-radius: 16px; background: #fff; box-shadow: var(--sh); overflow: hidden; }
.pass-h { display: flex; align-items: center; gap: 10px; padding: 10px 13px; background: var(--purple); color: #fff; border-bottom: var(--b); min-width: 0; }
.pass-h .link { color: var(--lime); flex: none; }
.pmark { width: 36px; height: 36px; flex: none; border-radius: 50%; border: var(--b); background: #fff; color: var(--ink); display: grid; place-items: center; }
.pmark .logo { width: 19px; height: 19px; }
.run-who { min-width: 0; flex: 1; }
.run-who b { display: block; font: 600 13px var(--mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.run-who small { display: block; font: 700 10.5px var(--sans); letter-spacing: .12em; text-transform: uppercase; opacity: .75; }
.pass-b { padding: 13px; display: grid; gap: 10px; }
.run-act .act { gap: 10px; font-size: 15px; }
.run-act .act-ic { width: 30px; height: 30px; border-radius: 50%; }
.run-act .act-ic svg { width: 16px; height: 16px; }
.run-act .act-v { font-size: 13px; }
.run-act .act-bar { display: none; }
.segs { display: flex; flex-wrap: wrap; gap: 3px; }
.segs i { flex: 1 1 9px; min-width: 7px; height: 12px; border-radius: 3px; border: 1.5px solid var(--ink); background: #fff; }
.segs i.done { background: var(--ink); }
.segs i.now { background: var(--lime); animation: blink 1.2s steps(2) infinite; }
.segs.grind { display: block; height: 12px; border-radius: 6px; border: 1.5px solid var(--ink); background: #fff; overflow: hidden; }
.segs.grind i { display: block; height: 100%; min-width: 0; border: 0; border-radius: 0; background: var(--gold); animation: none; transition: width .6s var(--ease); }
.run-meta { font: 500 11.5px var(--mono); color: var(--tx-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pass-f { position: relative; display: flex; align-items: center; gap: 14px; padding: 11px 13px; border-top: 2.5px dashed var(--ink); background: var(--grey-2); }
.pass-f::before, .pass-f::after { content: ""; position: absolute; top: -10px; width: 18px; height: 18px; border-radius: 50%; background: var(--paper); border: var(--b); }
.pass-f::before { left: -11px; } .pass-f::after { right: -11px; }
.count small { display: block; font: 700 9.5px var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--tx-3); }
.count b { font: 600 14px var(--mono); }
.pass-f .btn { margin-left: auto; height: 38px; }

/* the receipt: everything it says and does, newest at the bottom */
.receipt { flex: 1 1 auto; min-height: 190px; margin: 14px 16px 16px; display: flex; flex-direction: column; border: var(--b); border-radius: 4px 4px 14px 14px; background: #fff; box-shadow: var(--sh); overflow: hidden; }
.receipt-h { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 9px 13px; border-bottom: 2.5px dashed var(--ink); }
.receipt-h b { font: 800 12.5px var(--disp); text-transform: uppercase; }
.receipt-h span { font: 600 10.5px var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--tx-3); }
.log { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 6px 13px 12px; font: 500 11.5px/1.55 var(--mono); color: var(--tx-2); }
.log div { position: relative; padding: 5px 0 5px 46px; border-bottom: 1px dashed var(--line); white-space: pre-wrap; word-break: break-word; }
.log div::before { position: absolute; left: 0; top: 5px; width: 38px; height: 16px; border-radius: 4px; border: 1.5px solid var(--ink); text-align: center; font: 700 8.5px/13px var(--sans); letter-spacing: .06em; color: var(--ink); background: #fff; }
.log .t { color: var(--ink); } .log .t::before { content: "SAYS"; background: var(--lime); }
.log .tool::before { content: "RUNS"; background: var(--purple); color: #fff; }
.log .res::before { content: "GOT"; }
.log .win { color: var(--ink); font-weight: 600; } .log .win::before { content: "✓"; background: var(--ink); color: var(--lime); font-size: 11px; }
.log .err { color: var(--red); } .log .err::before { content: "!"; background: var(--red); color: #fff; font-size: 11px; }
.log .sep { padding: 8px 0; border-bottom: 0; text-align: center; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--tx-3); }
.log .sep::before { display: none; }
.log .tl { margin: 4px 0; padding: 6px 8px 6px 50px; border: 1.5px solid var(--ink); border-radius: 7px; background: var(--grey-2); color: var(--ink); overflow: hidden; }
.log .tl::before { content: "TIME"; left: 5px; top: 6px; background: var(--gold); z-index: 1; }
.log .tl span { position: relative; z-index: 1; }
.log .tl i { position: absolute; inset: 0 auto 0 0; background: rgba(255, 184, 0, .4); }

/* ---- sheets and toasts ------------------------------------------------------------------------------ */
.sheet-bg { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 18px; background: rgba(91, 33, 230, .72); opacity: 0; pointer-events: none; transition: opacity .18s; }
.sheet-bg.on { opacity: 1; pointer-events: auto; }
.sheet { width: min(760px, 100%); max-height: min(86vh, 900px); display: flex; flex-direction: column; border-radius: 18px; border: var(--b); background-color: var(--paper); background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px); background-size: 22px 22px; box-shadow: 8px 8px 0 var(--ink); overflow: hidden; transform: translateY(10px) rotate(-.4deg); transition: transform .25s var(--ease); }
.sheet-bg.on .sheet { transform: none; }
.sheet.sm { width: min(440px, 100%); }
.sheet-h { display: flex; align-items: center; gap: 12px; padding: 13px 16px; background: var(--lime); border-bottom: var(--b); }
.sheet-h h3 { font: 900 19px var(--disp); text-transform: uppercase; }
.sheet-h .kick { color: var(--ink); }
.sheet-h .x { margin-left: auto; width: 34px; height: 34px; border-radius: 50%; border: var(--b); background: #fff; font: 700 20px/1 var(--sans); cursor: pointer; }
.sheet-h .x:hover { background: var(--ink); color: #fff; }
.sheet-b { padding: 16px; overflow: auto; display: grid; gap: 12px; }
.wallet-list { display: grid; gap: 8px; }
.wallet-list button { display: flex; align-items: center; gap: 12px; height: 52px; padding: 0 14px; border-radius: 12px; border: var(--b); background: #fff; font: 700 14.5px var(--sans); cursor: pointer; box-shadow: var(--sh-s); }
.wallet-list button:hover { background: var(--lime); }
.wallet-list img { width: 28px; height: 28px; border-radius: 8px; }
.toast { position: fixed; z-index: 80; left: 50%; bottom: 26px; transform: translate(-50%, 30px) rotate(-1deg); max-width: min(560px, calc(100% - 40px)); padding: 12px 18px; border-radius: 12px; border: var(--b); background: var(--ink); color: #fff; font: 600 14px var(--sans); box-shadow: 4px 4px 0 var(--lime); opacity: 0; pointer-events: none; transition: opacity .2s, transform .3s var(--ease); }
.toast.on { opacity: 1; transform: translate(-50%, 0) rotate(-1deg); }
.toast.win { background: var(--lime); color: var(--ink); box-shadow: 4px 4px 0 var(--ink); }

/* a safe, open: its stages */
.puzzle { white-space: pre-wrap; font: 500 14px/1.65 var(--sans); }
.data { padding: 11px 13px; border-radius: 11px; border: 2px solid var(--ink); background: #fff; font: 500 11.5px/1.6 var(--mono); word-break: break-all; max-height: 260px; overflow: auto; }
.data b { color: var(--purple); }
.data .pre { white-space: pre-wrap; }
.echo-img { width: 100%; max-width: 480px; image-rendering: pixelated; border-radius: 11px; border: var(--b); }
.player { display: flex; align-items: center; gap: 12px; padding: 9px 11px; border-radius: 12px; border: var(--b); background: #fff; }
.player .play { width: 36px; height: 36px; flex: none; border-radius: 50%; border: var(--b); background: var(--lime); display: grid; place-items: center; cursor: pointer; }
.player .play i { width: 0; height: 0; border-left: 11px solid var(--ink); border-top: 7px solid transparent; border-bottom: 7px solid transparent; margin-left: 3px; }
.player.on .play i { width: 11px; height: 13px; border: 0; border-left: 4px solid var(--ink); border-right: 4px solid var(--ink); margin: 0; }
.player .track { flex: 1; height: 8px; border-radius: 6px; border: 2px solid var(--ink); background: #fff; cursor: pointer; overflow: hidden; }
.player .track span { display: block; height: 100%; width: 0; background: var(--purple); }
.player .time { font-size: 12px; }
.stages { display: flex; flex-wrap: wrap; gap: 5px; }
.stages .st { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 8px; border: 2px solid var(--line); background: #fff; font: 600 11px var(--mono); color: var(--tx-3); }
.stages .st.open { color: var(--ink); border-color: var(--ink); background: var(--lime); }
.stages .st.done { color: var(--lime); border-color: var(--ink); background: var(--ink); }
.stage { padding: 12px 14px 14px; border-radius: 14px; border: var(--b); background: #fff; display: grid; gap: 10px; }
.stage.done { opacity: .72; }
.stage-h { display: flex; align-items: center; gap: 10px; }
.stage-h .n { font: 600 11px var(--mono); color: var(--tx-3); }
.stage-h b { font: 800 14px var(--disp); text-transform: uppercase; }
.stage-h em { margin-left: auto; font: 700 10.5px var(--sans); font-style: normal; letter-spacing: .1em; text-transform: uppercase; padding: 2px 8px; border-radius: 6px; background: var(--ink); color: var(--lime); }

/* ---- pages: how it works, and the console ----------------------------------------------------------- */
.doc, .console { width: min(900px, calc(100% - 28px)); margin: 66px auto 60px; padding: 30px clamp(18px, 4vw, 44px) 40px; border: var(--b); border-radius: 18px; background-color: var(--paper); background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px); background-size: 22px 22px; box-shadow: 6px 6px 0 rgba(12, 12, 16, .55); display: grid; gap: 22px; }
.console { width: min(1080px, calc(100% - 28px)); }
.doc-hero { display: grid; gap: 12px; }
.doc-hero h1 { font: 900 clamp(30px, 5vw, 54px)/1 var(--disp); text-transform: uppercase; letter-spacing: -.04em; }
.doc-hero h1 em { font-style: normal; color: var(--mag); }
.doc-hero p { font-size: 17px; color: var(--tx-2); max-width: 640px; }
.doc section { display: grid; gap: 10px; }
.doc h2 { display: inline-block; justify-self: start; padding: 5px 12px; border: var(--b); border-radius: 10px; background: var(--lime); font: 900 17px var(--disp); text-transform: uppercase; box-shadow: var(--sh-s); transform: rotate(-1deg); margin-bottom: 4px; }
.doc p { font-size: 15.5px; line-height: 1.65; color: var(--tx-2); }
.doc p b { color: var(--ink); }
.rings { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin-top: 4px; }
.rings div { padding: 10px 11px; border-radius: 12px; border: var(--b); background: #fff; display: grid; gap: 1px; }
.rings .n { font: 900 20px var(--disp); color: var(--purple); }
.rings b { font: 800 12.5px var(--disp); text-transform: uppercase; }
.rings small { font: 600 11px var(--sans); color: var(--tx-3); }
.rings em { font: 700 13px var(--mono); font-style: normal; }
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 4px; }
.cards div { padding: 14px; border-radius: 14px; border: var(--b); background: var(--purple); color: #fff; box-shadow: var(--sh-s); }
.cards b { display: block; font: 900 26px var(--disp); color: var(--lime); }
.cards small { font: 600 12.5px var(--sans); }
.code { display: block; padding: 11px 13px; border-radius: 11px; border: 2px solid var(--ink); background: #fff; font: 500 12px var(--mono); word-break: break-all; }

.box { border: var(--b); border-radius: 16px; background: #fff; box-shadow: var(--sh); overflow: hidden; min-width: 0; }
.box-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 15px; background: var(--lime); border-bottom: var(--b); }
.box-h h3 { font: 900 15px var(--disp); text-transform: uppercase; }
.box-h .kick { color: var(--ink); }
.box-b { padding: 15px; display: grid; gap: 12px; }
.box-b h3 { font-size: 17px; text-transform: uppercase; }
.steps { gap: 0; padding: 4px 15px; }
.step { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 13px 0; border-bottom: 2px dashed var(--line); }
.step:last-child { border-bottom: 0; }
.step .n { width: 30px; height: 30px; border-radius: 50%; border: var(--b); display: grid; place-items: center; font: 800 12px var(--disp); background: #fff; }
.step.done .n { background: var(--ink); color: var(--lime); }
.step b { display: block; font: 700 15px var(--sans); }
.step small { display: block; font-size: 12.5px; color: var(--tx-3); word-break: break-word; }
.step .more { grid-column: 1 / -1; display: grid; gap: 12px; padding: 4px 0 6px; }
.drop { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 12px; border: 2.5px dashed var(--ink); background: var(--grey-2); cursor: pointer; }
.drop:hover { background: var(--lime); }
.drop img { width: 52px; height: 52px; border-radius: 12px; border: 2px solid var(--ink); object-fit: cover; background: #fff; }
.drop b { display: block; } .drop small { display: block; font-size: 12px; }
.ready { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ready li { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; }
.ready .ic { width: 20px; height: 20px; flex: none; border-radius: 50%; border: 2px solid var(--ink); display: grid; place-items: center; font: 800 11px var(--sans); }
.ready .y .ic { background: var(--lime); } .ready .n .ic { background: var(--red); color: #fff; }
.ready small { display: block; color: var(--tx-3); font-size: 12px; }
.tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.tbl th { text-align: left; font: 700 10.5px var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--tx-3); padding: 0 0 6px; }
.tbl td { padding: 6px 0; border-top: 1.5px solid var(--line); }
.tbl .r { text-align: right; }

/* ---- smaller screens: the poster stacks and the page scrolls ---------------------------------------- */
@media (max-width: 1180px) {
  body { overflow: auto; }
  .poster { position: relative; inset: auto; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "art art" "left right"; }
  .art { grid-area: art; height: min(64vh, 620px); border-bottom: var(--b); }
  .left { grid-area: left; } .right { grid-area: right; }
  .paper { overflow: visible; }
  .receipt { flex: none; height: 360px; }
  .fold { display: none; }
  .poster.hide-l, .poster.hide-r, .poster.hide-l.hide-r { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .poster.hide-l .left, .poster.hide-r .right { display: flex; }
  .doc, .console { width: auto; margin: 66px 10px 40px; }
}
@media (max-width: 760px) {
  .poster { grid-template-columns: minmax(0, 1fr); grid-template-areas: "art" "left" "right"; }
  .left { border-right: 0; border-bottom: var(--b); } .right { border-left: 0; }
  .art { height: min(58vh, 480px); }
  .arrow { width: 42px; height: 42px; margin-top: -21px; }
  .art-foot { height: 54px; gap: 10px; padding-left: 12px; }
  .live span:last-child { display: none; }
  .go { padding-left: 14px; gap: 10px; } .go i { width: 50px; }
  .art-title { bottom: 66px; }
  .chip-ais .lab { display: none; }
  .art-top { left: 10px; right: 10px; top: 10px; } .chip-ais, .chip-tok, .chip-link { height: 34px; padding: 0 9px; font-size: 11px; } .chip-tok { padding-left: 5px; } .chip-tok img { width: 20px; height: 20px; }
  .vlabel { padding: 5px 9px 6px; border-radius: 10px; } .vlabel b { font-size: 15px; } .vlabel span { font-size: 10.5px; } .vlabel i { font-size: 9px; } .vwrap.side .vlabel { scale: .62; }
  .rings { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cards, .grid2 { grid-template-columns: minmax(0, 1fr); }
  .step { grid-template-columns: 32px minmax(0, 1fr); } .step > .btn { grid-column: 1 / -1; }
  .sheet-bg { padding: 8px; }
}
@media (max-width: 420px) {
  .left { padding: 16px 14px; }
  .prov-t { width: 44px; height: 44px; } .prov { gap: 7px; }
  .head { padding-right: 84px; } .stamp { width: 76px; height: 76px; }
  .tk-prize b { font-size: 26px; } .smile { width: 64px; height: 64px; }
  .tk-meta { font-size: 10px; letter-spacing: .04em; }
}