/*
 * Dev Playground — warm, alive, a little magical, in the colors of the
 * builder emblem: sand, brass, the cord's orange, lagoon turquoise. Phones get a bottom tab
 * bar (one pane), iPads a slim rail and two panes, desktops a full rail and
 * three panes. Light and dark follow the system; motion follows
 * prefers-reduced-motion.
 */
:root{
  --bg:#FBF5EA; --bg2:#F1E2C6; --fg:#26324A; --dim:#6E675C; --card:rgba(255,252,246,.74); --card-solid:#FFFCF6;
  --line:rgba(38,50,74,.1); --glass:rgba(255,252,246,.55); --code:rgba(38,50,74,.05);
  --accent:#F28A0F; --accent2:#D9622B; --id:#0B7C78; --id2:#2BB3B1;
  --ok:#3B8A36; --ok-soft:rgba(59,138,54,.12); --warn:#B7740A; --warn-soft:rgba(242,138,15,.14); --bad:#C2402A; --bad-soft:rgba(194,64,42,.11);
  --shadow:0 1px 2px rgba(60,40,15,.06),0 12px 32px -12px rgba(110,70,25,.26);
  --a1:#FFB86B; --a2:#F3D27A; --a3:#8FE3DA;
  --display:'Baloo 2',ui-rounded,system-ui,sans-serif; --body:'Nunito',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:ui-monospace,'SF Mono',Menlo,Consolas,monospace;
  --r:22px; --bar:68px; color-scheme:light;
}
@media (prefers-color-scheme: dark){:root{
  --bg:#111722; --bg2:#0E2630; --fg:#F4EEE6; --dim:#A8A193; --card:rgba(26,33,46,.68); --card-solid:#1A212E;
  --line:rgba(255,255,255,.08); --glass:rgba(255,255,255,.06); --code:rgba(255,255,255,.05);
  --accent:#FFA53D; --accent2:#FF8A5B; --id:#4FD6CC; --id2:#2BB3B1;
  --ok:#7FD67A; --ok-soft:rgba(127,214,122,.13); --warn:#FFC266; --warn-soft:rgba(255,194,102,.13); --bad:#FF7A64; --bad-soft:rgba(255,122,100,.13);
  --shadow:0 1px 2px rgba(0,0,0,.3),0 18px 40px -16px rgba(0,0,0,.6);
  --a1:#7A3E10; --a2:#5E4712; --a3:#0F5A55; color-scheme:dark}}

@property --p{syntax:'<number>';inherits:true;initial-value:0}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;min-height:100vh;background:linear-gradient(160deg,var(--bg),var(--bg2));background-attachment:fixed;color:var(--fg);font:15.5px/1.55 var(--body);-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:var(--id);font-weight:800;text-decoration:none} a:hover{text-decoration:underline}
code{font-family:var(--mono);font-size:.85em;background:var(--code);border-radius:7px;padding:1px 6px;overflow-wrap:anywhere}
h1,h2,h3{font-family:var(--display);letter-spacing:-.01em}
h1{font-size:clamp(30px,6.4vw,52px);line-height:1;margin:6px 0 10px;font-weight:800}
h3{font-size:19px;margin:0 0 4px;font-weight:700}
.eyebrow{font:800 12px var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.lead{color:var(--dim);margin:0;max-width:62ch;font-size:16px}
.dim{color:var(--dim)} .small{font-size:13.5px}
[hidden]{display:none!important}

/* ── the living background ─────────────────────────────────────────── */
.aurora{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.aurora i{position:absolute;width:60vmax;height:60vmax;border-radius:50%;filter:blur(70px);opacity:.55;animation:drift 22s ease-in-out infinite alternate}
.aurora i:nth-child(1){background:var(--a1);left:-15vmax;top:-20vmax}
.aurora i:nth-child(2){background:var(--a2);right:-20vmax;top:10vmax;animation-duration:28s;animation-delay:-6s}
.aurora i:nth-child(3){background:var(--a3);left:20vmax;bottom:-30vmax;animation-duration:34s;animation-delay:-12s}
@keyframes drift{to{transform:translate(8vmax,6vmax) scale(1.15)}}

/* ── frame: bottom bar (phone), slim rail (iPad), full rail (desktop) ─ */
.app{min-height:100vh}
main{padding:max(20px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) calc(var(--bar) + 28px + env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));max-width:1320px;margin:0 auto}
.rail{position:fixed;z-index:20;left:0;right:0;bottom:0;padding:6px 8px calc(6px + env(safe-area-inset-bottom));background:var(--card);backdrop-filter:blur(22px) saturate(1.6);-webkit-backdrop-filter:blur(22px) saturate(1.6);border-top:1px solid var(--line)}
.brand,.rail-docs{display:none}
.tabs{display:flex;justify-content:space-around;gap:2px}
.tabs button{all:unset;cursor:pointer;flex:1;max-width:96px;display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 2px;border-radius:16px;font:800 11px var(--body);color:var(--dim);min-height:48px;justify-content:center;transition:color .2s,background .2s,transform .15s}
.tabs svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s cubic-bezier(.3,1.6,.5,1)}
.tabs button[aria-selected="true"]{color:var(--id)}
.tabs button[aria-selected="true"] svg{transform:translateY(-2px) scale(1.12);fill:color-mix(in srgb,var(--id) 16%,transparent)}
.tabs button:active{transform:scale(.94)}
.tabs button:focus-visible{outline:2px solid var(--id);outline-offset:2px}

@media (min-width:760px){
  .rail{top:0;right:auto;width:92px;border-top:0;border-right:1px solid var(--line);display:flex;flex-direction:column;align-items:center;padding:max(18px,env(safe-area-inset-top)) 8px 18px max(8px,env(safe-area-inset-left))}
  .brand{display:block;margin-bottom:18px} .brand img{width:44px;height:44px;border-radius:13px;box-shadow:var(--shadow);display:block} .brand span{display:none}
  .tabs{flex-direction:column;gap:6px;width:100%}
  .tabs button{max-width:none;min-height:62px}
  main{margin-left:92px;padding:max(30px,env(safe-area-inset-top)) 28px 48px}
}
@media (min-width:1180px){
  .rail{width:248px;align-items:stretch;padding:28px 16px}
  .brand{display:flex;gap:12px;align-items:center;color:var(--fg);margin:0 6px 26px} .brand:hover{text-decoration:none}
  .brand span{display:block;font:800 18px/1.1 var(--display)} .brand small{display:block;font:700 12px var(--body);color:var(--dim)}
  .tabs button{flex-direction:row;justify-content:flex-start;gap:12px;padding:10px 14px;font-size:15px;min-height:48px}
  .tabs button[aria-selected="true"]{background:color-mix(in srgb,var(--id) 12%,transparent)}
  .tabs button[aria-selected="true"] svg{transform:scale(1.08)}
  .rail-docs{display:block;margin:auto 14px 0;font-size:14px}
  main{margin-left:248px;padding:44px 40px 56px}
}

/* ── surfaces ──────────────────────────────────────────────────────── */
.card{background:var(--card);backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);border:1px solid var(--line);border-radius:var(--r);padding:18px;margin:0 0 16px;box-shadow:var(--shadow);min-width:0}
.head{display:flex;align-items:center;gap:10px;margin-bottom:4px} .head h3{margin:0;flex:1}
.grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))} .grid .card{margin:0}
.pill{font:800 11px var(--body);letter-spacing:.04em;text-transform:uppercase;border-radius:999px;padding:3px 9px;background:var(--code);color:var(--dim)}
.pill.ok{background:var(--ok-soft);color:var(--ok)} .pill.warn{background:var(--warn-soft);color:var(--warn)} .pill.bad{background:var(--bad-soft);color:var(--bad)} .pill.id{background:color-mix(in srgb,var(--id) 14%,transparent);color:var(--id)}
.page-head{margin:4px 0 22px;display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:clamp(12px,3vw,40px);align-items:center}
.page-head>:not(.head-art){grid-column:1}
/* the painted object of each tab, beside its title */
.head-art{grid-column:2;grid-row:1/span 3;width:auto;height:clamp(84px,15vw,168px);filter:drop-shadow(0 14px 18px rgba(110,70,25,.22));animation:bob 5s ease-in-out infinite}
section{animation:rise .45s cubic-bezier(.2,.8,.2,1)}
@keyframes rise{from{opacity:0;transform:translateY(10px)}}

/* ── buttons ───────────────────────────────────────────────────────── */
button{font:800 15px var(--body);border:0;border-radius:999px;padding:12px 20px;min-height:46px;cursor:pointer;color:var(--fg);background:var(--glass);border:1px solid var(--line);transition:transform .15s,box-shadow .2s,background .2s,opacity .2s;-webkit-tap-highlight-color:transparent}
button:hover:not(:disabled){transform:translateY(-1px)}
button:active:not(:disabled){transform:scale(.96)}
button:disabled{opacity:.38;cursor:default}
button:focus-visible{outline:2px solid var(--id);outline-offset:3px}
button.primary{color:#fff;border:0;background:linear-gradient(135deg,var(--accent),var(--accent2));box-shadow:0 10px 24px -10px color-mix(in srgb,var(--accent2) 80%,transparent)}
button.primary.id{background:linear-gradient(135deg,var(--id),var(--id2));box-shadow:0 10px 24px -10px color-mix(in srgb,var(--id) 90%,transparent)}
button.glass{background:var(--glass)}
button.link{background:none;border:0;color:var(--dim);padding:8px 10px;min-height:36px}
button.play{color:#fff;border:0;background:linear-gradient(135deg,#1FA8A0,#43C6BC);box-shadow:0 10px 24px -10px rgba(31,168,160,.9)}
button.play small{opacity:.85;font-weight:700;margin-left:4px}

/* ── Powers ────────────────────────────────────────────────────────── */
.hero{display:flex;flex-direction:column;align-items:center;text-align:center;gap:18px;padding:12px 0 26px}
.hero .lead{margin:0 auto}
.hero-actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:18px}
@media (min-width:760px){.hero{flex-direction:row;text-align:left;gap:36px;padding:20px 0 34px}.hero .lead{margin:0}.hero-actions{justify-content:flex-start}}
.orb{--c1:var(--dim);--c2:var(--line);position:relative;flex:none;width:clamp(132px,30vw,200px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 32% 28%,#fff 0 6%,transparent 34%),conic-gradient(from 210deg,var(--c1),var(--c2),var(--c1));box-shadow:0 0 0 10px color-mix(in srgb,var(--c1) 10%,transparent),0 30px 60px -20px color-mix(in srgb,var(--c1) 70%,transparent);animation:breathe 4.5s ease-in-out infinite,spin 18s linear infinite;transition:--c1 .8s}
.orb span{position:absolute;inset:-14px;border-radius:50%;border:2px dashed color-mix(in srgb,var(--c2) 60%,transparent);animation:spin 30s linear infinite reverse}
.orb.live{--c1:var(--id);--c2:var(--accent)}
.orb.mock{--c1:var(--accent);--c2:var(--accent2)}
@keyframes breathe{50%{scale:1.05}} @keyframes spin{to{rotate:360deg}}
/* the Builder emblem sits on the orb, which stays behind it as a halo
   whose colour still tells live from mock */
.orb-wrap{position:relative;flex:none;display:grid;place-items:center}
.orb-wrap .orb{opacity:.55}
.emblem{position:absolute;width:118%;height:auto;filter:drop-shadow(0 18px 24px rgba(110,70,25,.28));animation:bob 5s ease-in-out infinite}
@keyframes bob{50%{translate:0 -6px}}
.kicker{font:800 13px var(--body);letter-spacing:.1em;text-transform:uppercase;color:var(--dim);margin:6px 0 12px}
.kicker span{color:var(--fg);font-family:var(--display);font-size:18px}
.powers{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
@media (min-width:1180px){.powers{grid-template-columns:repeat(4,minmax(0,1fr))}}
.power{all:unset;box-sizing:border-box;cursor:pointer;position:relative;display:flex;flex-direction:column;gap:6px;padding:16px;border-radius:var(--r);background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);opacity:0;transform:translateY(12px) scale(.97);transition:opacity .5s,transform .5s cubic-bezier(.2,1.4,.4,1),border-color .3s;min-height:126px}
.power.in{opacity:1;transform:none}
.power:hover{border-color:color-mix(in srgb,var(--pc) 50%,transparent)} .power:active{transform:scale(.97)}
.power:focus-visible{outline:2px solid var(--id);outline-offset:3px}
.power .glyph{width:42px;height:42px;border-radius:14px;display:grid;place-items:center;font:800 20px var(--display);color:#fff;background:var(--pc);filter:grayscale(1) opacity(.45);transition:filter .6s}
.power.on .glyph{filter:none;box-shadow:0 8px 22px -8px var(--pc)}
.power b{font:700 16px/1.2 var(--display)} .power small{color:var(--dim);font-size:12.5px;line-height:1.35}
.power .state{position:absolute;top:14px;right:14px}
.power.on::after{content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--pc) 35%,transparent)}
details.raw{margin-top:22px} details.raw summary{cursor:pointer;font-weight:800;color:var(--dim);padding:8px 0}
.tablebox{overflow-x:auto;border-radius:var(--r);border:1px solid var(--line);background:var(--card);margin-top:8px}
.rules{width:100%;border-collapse:collapse;font-size:14px}
.rules td{padding:10px 14px;border-bottom:1px solid var(--line);vertical-align:top} .rules tr:last-child td{border-bottom:0}
.rules td:first-child{font-weight:700;width:40%}
.yes{color:var(--ok);font-weight:800} .no{color:var(--bad);font-weight:800} .warn{color:var(--warn);font-weight:800}

/* ── CEID game ─────────────────────────────────────────────────────── */
.ceid{display:grid;gap:0 18px;grid-template-columns:minmax(0,1fr)}
@media (min-width:760px){.ceid{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr)} .ceid .col:last-child{grid-column:1 / -1}}
@media (min-width:1180px){.ceid{grid-template-columns:minmax(0,1fr) minmax(0,1.25fr) minmax(0,.9fr)} .ceid .col:last-child{grid-column:auto} .console{position:sticky;top:24px}}
.game{position:relative;overflow:hidden;padding:20px}
.game::before{content:"";position:absolute;inset:0 0 auto;height:120px;background:linear-gradient(135deg,color-mix(in srgb,var(--id) 30%,transparent),color-mix(in srgb,var(--id2) 22%,transparent));pointer-events:none}
.game > *{position:relative}
.who{display:flex;gap:14px;align-items:center;min-width:0}
.avatar{--p:0;position:relative;width:76px;height:76px;flex:none;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--id2) calc(var(--p) * 1%),color-mix(in srgb,var(--fg) 10%,transparent) 0);transition:--p .6s}
.avatar i{position:absolute;inset:5px;border-radius:50%;background:linear-gradient(135deg,var(--id),var(--accent2));display:grid;place-items:center;color:#fff;font:800 30px var(--display);font-style:normal}
.avatar .lvl{position:absolute;bottom:-4px;right:-4px;background:var(--card-solid);border:1px solid var(--line);border-radius:999px;font:800 11px var(--body);padding:2px 7px;color:var(--fg)}
.who .name{min-width:0} .who b{display:block;font:800 22px/1.15 var(--display);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .who span{color:var(--dim);font-size:13px}
.xpbar{height:10px;border-radius:999px;background:var(--code);overflow:hidden;margin:18px 0 6px}
.xpbar i{display:block;height:100%;width:0;border-radius:inherit;background:linear-gradient(90deg,var(--id2),var(--id));transition:width .7s cubic-bezier(.2,1.2,.4,1)}
.xpline{display:flex;justify-content:space-between;font-size:12.5px;color:var(--dim)}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:14px 0 6px}
.stats div{background:var(--code);border-radius:16px;padding:10px 6px;text-align:center}
.stats b{display:block;font:800 24px/1.1 var(--display)} .stats span{font-size:12px;color:var(--dim)}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px;font-size:12.5px}
.chips span{background:var(--code);border-radius:999px;padding:3px 10px;font-weight:700}
.chips .yes{background:var(--ok-soft)} .chips .no{background:var(--bad-soft)}
.empty{text-align:center;padding:10px 0 4px}
.empty .ghost-art{display:block;width:auto;height:118px;margin:0 auto 10px;filter:drop-shadow(0 10px 14px rgba(110,70,25,.2));animation:bob 4s ease-in-out infinite}
.empty .ghost{width:76px;height:76px;margin:0 auto 10px;border-radius:50%;display:grid;place-items:center;font-size:34px;background:var(--code);animation:breathe 3s ease-in-out infinite}
.actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.actions .primary{flex:1 1 100%}
.mockform{display:grid;gap:4px 14px;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));margin-top:6px}
.field{display:block;font-size:13px;font-weight:800;color:var(--dim);margin:8px 0 0}
.field input,.field select{display:block;width:100%;margin-top:5px;padding:11px 14px;border:1px solid var(--line);border-radius:14px;font:600 15px var(--body);background:var(--card-solid);color:var(--fg);min-height:46px}
.field input:focus,.field select:focus{outline:2px solid color-mix(in srgb,var(--id) 60%,transparent);outline-offset:0}
.toggle{display:flex;align-items:center;gap:10px;font-weight:700;font-size:14px;min-height:44px;cursor:pointer}
.toggle input{position:absolute;opacity:0;pointer-events:none}
.toggle span{flex:none;width:44px;height:26px;border-radius:999px;background:color-mix(in srgb,var(--fg) 16%,transparent);position:relative;transition:background .25s}
.toggle span::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.25);transition:transform .3s cubic-bezier(.3,1.6,.5,1)}
.toggle input:checked + span{background:var(--id)} .toggle input:checked + span::after{transform:translateX(18px)}
.toggle input:focus-visible + span{outline:2px solid var(--id);outline-offset:2px}
.progress{width:38px;height:38px;flex:none} .progress svg{width:100%;height:100%;rotate:-90deg}
.progress circle{fill:none;stroke:var(--code);stroke-width:4} .progress .bar{stroke:var(--ok);stroke-linecap:round;stroke-dasharray:97.4;stroke-dashoffset:97.4;transition:stroke-dashoffset .5s}
.summary{font:800 15px var(--display);min-width:3ch}
.scenarios{list-style:none;padding:0;margin:12px 0 0;display:flex;flex-direction:column;gap:8px}
.scenario{display:flex;gap:12px;align-items:center;border:1px solid var(--line);border-radius:18px;padding:11px 12px;background:var(--glass);transition:border-color .3s,background .3s,transform .3s}
.scenario .n{width:30px;height:30px;border-radius:50%;background:var(--code);display:grid;place-items:center;font-weight:800;font-size:13px;flex:none;transition:background .3s,color .3s,transform .4s cubic-bezier(.3,1.8,.5,1)}
.scenario .txt{flex:1;min-width:0;display:flex;flex-direction:column} .scenario .txt b{font-size:14.5px} .scenario .txt span{font-size:13px;color:var(--dim)}
.scenario .out{font:12px var(--mono);overflow-wrap:anywhere}
.scenario.pass{border-color:color-mix(in srgb,var(--ok) 45%,transparent);background:var(--ok-soft)} .scenario.pass .n{background:var(--ok);color:#fff;transform:scale(1.08)} .scenario.pass .out{color:var(--ok)}
.scenario.fail{border-color:color-mix(in srgb,var(--bad) 45%,transparent);background:var(--bad-soft)} .scenario.fail .n{background:var(--bad);color:#fff} .scenario.fail .out{color:var(--bad)}
.scenario.running{border-color:var(--id);transform:translateX(4px)} .scenario.running .n{background:var(--id);color:#fff;animation:pulse 1s ease-in-out infinite}
@keyframes pulse{50%{box-shadow:0 0 0 7px color-mix(in srgb,var(--id) 25%,transparent)}}
.scenario button{min-height:38px;padding:7px 16px;font-size:14px}
.console{background:color-mix(in srgb,#141A24 92%,transparent);color:#EDE6DA;border-color:rgba(255,255,255,.06)}
.console h3{color:#fff} .console .link{color:#A8A193}
.log{list-style:none;padding:0;margin:8px 0 0;font:12.5px/1.6 var(--mono);max-height:560px;overflow:auto}
.log li{padding:5px 0;border-bottom:1px solid rgba(255,255,255,.06);overflow-wrap:anywhere;animation:rise .3s}
.log time{color:#8A8478;margin-right:8px} .log .ok{color:#7FD67A} .log .ko{color:#FF7A64} .log .warn{color:#FFC266} .log .dim{color:#8A8478}

/* ── Sign ──────────────────────────────────────────────────────────── */
.composer{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end}
.composer .field{flex:1 1 260px;margin:0}
.composer .primary{flex:0 0 auto}
.chain{display:flex;flex-direction:column;gap:6px;position:relative;overflow:hidden}
.chain button{align-self:flex-start;margin-top:6px}
.chain-mark{width:52px;height:52px;border-radius:17px;display:grid;place-items:center;font:800 26px var(--display);color:#fff;margin-bottom:6px}
.chain-mark.eth{background:linear-gradient(135deg,#627EEA,#8FA4FF)} .chain-mark.btc{background:linear-gradient(135deg,#F7931A,#FFB651)} .chain-mark.xcp{background:linear-gradient(135deg,#E2406E,#FF7FA4)}
.chain.done{border-color:color-mix(in srgb,var(--ok) 45%,transparent)}
.chain.done .chain-mark{animation:pop .5s cubic-bezier(.3,1.8,.5,1)}
@keyframes pop{40%{transform:scale(1.18) rotate(-6deg)}}
.out{font:12.5px/1.5 var(--mono);color:var(--dim);overflow-wrap:anywhere;margin-top:8px}
.out .row{display:flex;gap:8px;align-items:baseline;padding:6px 0;border-top:1px solid var(--line)}
.out .row b{font:800 11px var(--body);text-transform:uppercase;letter-spacing:.05em;color:var(--dim);flex:none;width:68px}
.out .row span{flex:1;min-width:0;color:var(--fg)}
.out .row button{min-height:28px;padding:2px 10px;font-size:12px}
.out.ok .verdict{color:var(--ok);font:800 13px var(--body)} .out.ko{color:var(--bad)}

/* ── Manifest ──────────────────────────────────────────────────────── */
.manifest{display:grid;gap:0 18px;grid-template-columns:minmax(0,1fr)}
@media (min-width:1000px){.manifest{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}}
.preview .hero-img{display:block;width:100%;height:auto;aspect-ratio:1200/630;object-fit:cover;border-radius:calc(var(--r) - 8px);margin:0 0 14px;box-shadow:var(--shadow)}
.preview .app-card{display:flex;gap:14px;align-items:center}
.preview .app-card img{width:68px;height:68px;border-radius:20px;box-shadow:var(--shadow)}
.preview .app-card b{font:800 22px/1.1 var(--display);display:block}
.preview h4{font:800 12px var(--body);letter-spacing:.1em;text-transform:uppercase;color:var(--dim);margin:18px 0 8px}
.preview .tags{display:flex;flex-wrap:wrap;gap:6px}
.preview .ask{display:flex;gap:10px;align-items:center;padding:10px 0;border-top:1px solid var(--line);font-size:14px}
.preview .ask .pill{flex:none}
pre.model{background:var(--code);border-radius:16px;padding:14px;overflow:auto;font:12.5px/1.65 var(--mono);margin:8px 0 0;max-height:640px}
pre.model code{background:none;padding:0;border-radius:0;font-size:inherit}
pre.model .k{color:var(--id)} pre.model .s{color:var(--ok)} pre.model .n{color:var(--accent)}

/* ── Links ─────────────────────────────────────────────────────────── */
a.linkcard{color:inherit;display:flex;flex-direction:column;gap:4px;transition:transform .25s cubic-bezier(.2,1.4,.4,1),border-color .25s}
a.linkcard:hover{text-decoration:none;transform:translateY(-3px);border-color:color-mix(in srgb,var(--id) 40%,transparent)}
a.linkcard .art{width:auto;height:56px;align-self:flex-start;margin-bottom:4px;filter:drop-shadow(0 6px 8px rgba(110,70,25,.18));transition:transform .25s cubic-bezier(.2,1.4,.4,1)}
a.linkcard:hover .art{transform:rotate(-6deg) scale(1.06)} a.linkcard .go{margin-top:auto;padding-top:8px;color:var(--id);font-weight:800}

/* ── toasts, confetti, floating XP ─────────────────────────────────── */
.toasts{position:fixed;z-index:40;left:50%;translate:-50% 0;bottom:calc(var(--bar) + 18px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:8px;align-items:center;width:min(440px,calc(100% - 32px));pointer-events:none}
@media (min-width:760px){.toasts{bottom:28px;left:auto;right:28px;translate:none;align-items:flex-end}}
.toast{display:flex;gap:10px;align-items:center;background:color-mix(in srgb,#1A2030 92%,transparent);color:#fff;padding:11px 16px;border-radius:18px;font-weight:700;font-size:14px;box-shadow:0 18px 40px -14px rgba(0,0,0,.6);animation:toast-in .4s cubic-bezier(.2,1.4,.4,1);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.toast .ti{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:12px;background:var(--id);flex:none}
.toast.ok .ti{background:#3B8A36} .toast.ko .ti{background:#C2402A} .toast.warn .ti{background:#E08A00}
.toast.leaving{opacity:0;transform:translateY(8px);transition:.4s}
@keyframes toast-in{from{opacity:0;transform:translateY(14px) scale(.96)}}
.confetti{position:fixed;inset:0;width:100vw;height:100vh;pointer-events:none;z-index:50}
.float{position:fixed;z-index:45;translate:-50% 0;pointer-events:none;font:800 22px var(--display);color:var(--id2);text-shadow:0 2px 10px rgba(0,0,0,.2);animation:float 1.1s ease-out forwards}
@keyframes float{to{transform:translateY(-70px) scale(1.25);opacity:0}}

/* ── the mock wallet's sheet ───────────────────────────────────────── */
.mock-sheet-backdrop{position:fixed;inset:0;background:rgba(12,16,24,.5);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);display:flex;align-items:flex-end;justify-content:center;z-index:60;animation:fade .25s}
@keyframes fade{from{opacity:0}}
.mock-sheet{background:var(--card-solid);width:min(460px,100%);border-radius:28px 28px 0 0;padding:10px 20px calc(20px + env(safe-area-inset-bottom));max-height:90vh;overflow:auto;animation:sheet .4s cubic-bezier(.2,1,.3,1);box-shadow:0 -20px 60px -20px rgba(0,0,0,.5)}
@keyframes sheet{from{transform:translateY(100%)}}
@media (min-width:760px){.mock-sheet-backdrop{align-items:center}.mock-sheet{border-radius:28px;animation-name:pop-in}}
@keyframes pop-in{from{opacity:0;transform:scale(.94)}}
.mock-sheet .grab{width:40px;height:5px;border-radius:3px;background:var(--line);margin:0 auto 14px}
.mock-sheet .who{display:flex;gap:12px;align-items:center} .mock-sheet .who img{width:44px;height:44px;border-radius:13px}
.mock-sheet .who b{display:block;font:800 16px var(--display)} .mock-sheet .who span{font-size:13px;color:var(--dim)}
.mock-sheet .ask{margin:16px 0 4px;font:800 22px/1.15 var(--display)} .mock-sheet .reason{margin:0 0 8px;color:var(--dim);font-size:14px}
.mock-sheet .me{display:flex;gap:10px;align-items:center;padding:12px;border-radius:18px;border:1.5px solid var(--id);margin:12px 0 4px;font-size:14px}
.mock-sheet .pick{display:flex;gap:10px;align-items:center;padding:11px 0;border-bottom:1px solid var(--line);font-size:14px}
.mock-sheet .me span:last-child,.mock-sheet .pick code{margin-left:auto;color:var(--dim)}
.mock-sheet .box{width:22px;height:22px;border-radius:7px;display:grid;place-items:center;font-size:12px;color:#fff;background:var(--id)}
.mock-sheet .pick input{width:22px;height:22px;accent-color:var(--id)}
.mock-sheet .grp{font-size:11.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);margin-top:14px}
.mock-sheet .none{color:var(--dim);font-size:13px;margin:6px 0}
.mock-sheet .ok{width:100%;margin-top:16px;color:#fff;border:0;background:linear-gradient(135deg,var(--id),var(--id2))} .mock-sheet .no{width:100%;margin-top:6px;background:none;border:0;color:var(--dim)}
.mock-sheet .note{font-size:12.5px;color:var(--dim);text-align:center;margin:8px 0 0}

@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation:none!important;transition:none!important}.power{opacity:1;transform:none}}
::view-transition-old(root),::view-transition-new(root){animation-duration:.28s}

/* ── Tookans ──────────────────────────────────────────────────────── */
.field textarea{display:block;width:100%;margin-top:5px;padding:11px 14px;border:1px solid var(--line);border-radius:14px;font:600 13px ui-monospace,Menlo,monospace;background:var(--card-solid);color:var(--fg);resize:vertical}
.shop .grp-item{display:block;width:100%;text-align:left;border:1px solid var(--line);border-radius:16px;padding:12px 14px;margin:8px 0 0;background:var(--card-solid);color:var(--fg);font:600 14px var(--body);cursor:pointer}
.shop .grp-item[aria-current="true"]{outline:2px solid var(--id)}
.shop .grp-item b{display:block;font-size:15px}
.shop .grp-item .meta{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.shop .grp-item code{font-size:12px;overflow-wrap:anywhere}
.shop .sale{border-bottom:1px solid var(--line);padding:10px 0;font-size:14px}
.shop .sale:last-child{border-bottom:0}
.shop .sale .row{display:flex;justify-content:space-between;gap:10px;align-items:baseline;flex-wrap:wrap}
.shop .sale .acts{display:flex;gap:10px;margin-top:4px}
.shop .receipt{margin-top:12px;font-size:14px}
.shop .receipt .big{font:800 28px var(--display);color:var(--id)}
.shop .checks{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0}
.shop pre{white-space:pre-wrap;overflow-wrap:anywhere;font-size:12px;max-height:220px;overflow:auto;background:var(--code);border-radius:12px;padding:10px}

/* the buy link's QR code */
.qr-backdrop{position:fixed;inset:0;z-index:60;background:rgba(10,14,22,.55);display:flex;align-items:center;justify-content:center;padding:16px}
.qr-card{background:var(--card-solid);border:1px solid var(--line);border-radius:24px;padding:20px;width:min(360px,100%);display:flex;flex-direction:column;gap:12px;align-items:center;text-align:center;box-shadow:0 30px 80px -20px rgba(0,0,0,.5)}
.qr-img{width:min(260px,100%);aspect-ratio:1;background:#fff;border-radius:14px;padding:8px}
.qr-img svg{width:100%;height:100%;display:block}
.qr-url{font-size:11.5px;word-break:break-all;opacity:.8}
.qr-card button{width:100%}