/* BANANA RIG — shared brand system. Single dark look: a night-shift server room.
   Display: Press Start 2P (sparingly). Data: VT323. Body: Pixelify Sans. */
:root{
  --night:#0e1117; --panel:#151a23; --panel-2:#1b2230; --line:#2b3446; --shadow:#06080c;
  --ink:#f4ecd2; --ink-soft:#bdb59c; --mute:#7f7a69;
  --banana:#ffd23f; --banana-2:#ffe98a; --peel:#c98f00;
  --phosphor:#6ff2c1; --phosphor-dim:#2a8f6e; --down:#ff6b5a; --gold:#f2c230;
  --f-display:"Press Start 2P","Courier New",monospace;
  --f-data:"VT323","Courier New",monospace;
  --f-body:"Pixelify Sans",ui-sans-serif,system-ui,sans-serif;
  --ease-out:cubic-bezier(.22,1,.36,1); --ease-pop:cubic-bezier(.15,.7,.3,1);
  color-scheme:dark;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{background:var(--night);color:var(--ink)}
body{font-family:var(--f-body);font-size:16px;line-height:1.5;margin:0;overflow-x:hidden}
a{color:var(--banana)}
button,input{font:inherit;color:inherit}
:focus-visible{outline:2px dashed var(--banana);outline-offset:3px}
.wrap{max-width:1240px;margin:0 auto;padding-inline:16px}
.mono{font-family:var(--f-data);font-variant-numeric:tabular-nums}
.lbl{font-family:var(--f-display);font-size:8px;letter-spacing:.08em;text-transform:uppercase;color:var(--mute);line-height:1.6}
.ico{width:20px;height:14px;image-rendering:pixelated;vertical-align:-2px}
.px{image-rendering:pixelated;image-rendering:crisp-edges}

/* ---------- top bar ---------- */
.bar{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:rgba(14,17,23,.94);border-bottom:2px solid var(--line);backdrop-filter:blur(4px)}
.bar .wrap{display:flex;align-items:center;gap:16px;padding-block:10px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink)}
.brand img{width:36px;height:26px;image-rendering:pixelated}
.brand b{font-family:var(--f-display);font-size:12px;letter-spacing:.04em}
.brand span{font-family:var(--f-data);font-size:20px;color:var(--banana)}
.nav{display:flex;gap:4px;flex-wrap:wrap}
.nav a{font-family:var(--f-display);font-size:8px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-soft);text-decoration:none;padding:8px}
.nav a:hover,.nav a[aria-current="page"]{color:var(--banana)}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-left:auto;align-items:center}
.chip{font-family:var(--f-display);font-size:8px;letter-spacing:.06em;padding:7px 9px;border:2px solid var(--line);background:var(--panel);color:var(--ink-soft);cursor:pointer;display:inline-flex;gap:6px;align-items:center;text-transform:uppercase;text-decoration:none}
.chip .dot{width:6px;height:6px;background:var(--phosphor);box-shadow:0 0 8px var(--phosphor);animation:blink 1.2s steps(2) infinite}
.chip.sample{color:var(--banana);border-color:var(--peel)}
.chip.sample .dot{background:var(--banana);box-shadow:0 0 8px var(--banana)}
.chip[aria-pressed="true"]{color:var(--night);background:var(--phosphor);border-color:var(--phosphor)}
@keyframes blink{50%{opacity:.25}}

/* ---------- buttons ---------- */
.btn{font-family:var(--f-display);font-size:10px;letter-spacing:.04em;text-transform:uppercase;padding:13px 16px;border:0;cursor:pointer;background:var(--banana);color:var(--night);box-shadow:4px 4px 0 var(--peel),4px 4px 0 2px #000;text-decoration:none;display:inline-block;transition:transform .08s,box-shadow .08s;line-height:1.4}
.btn:hover{transform:translate(-1px,-1px);box-shadow:5px 5px 0 var(--peel),5px 5px 0 2px #000}
.btn:active{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--peel)}
.btn.ghost{background:var(--panel);color:var(--ink);box-shadow:4px 4px 0 var(--line),4px 4px 0 2px #000}
.btn.sm{font-size:8px;padding:9px 11px}
.btn[disabled]{opacity:.4;cursor:not-allowed;transform:none}

/* ---------- panels ---------- */
.panel{background:var(--panel);border:2px solid var(--line);box-shadow:6px 6px 0 var(--shadow);padding:14px;min-width:0;display:flex;flex-direction:column;gap:12px}
.sec{display:flex;justify-content:space-between;gap:10px;align-items:baseline;border-bottom:2px solid var(--line);padding-bottom:9px}
.sec h2,.sec h3{font-family:var(--f-display);font-size:10px;margin:0;letter-spacing:.05em;text-transform:uppercase}
.note{font-size:13px;color:var(--mute);line-height:1.45}
.draft{font-family:var(--f-display);font-size:7px;color:var(--night);background:var(--banana);padding:3px 5px;vertical-align:2px}
.h2{font-family:var(--f-display);font-size:clamp(14px,1.8vw,18px);margin:0 0 18px;line-height:1.5;text-wrap:balance}
.h2 em{font-style:normal;color:var(--banana)}
.kicker{font-family:var(--f-display);font-size:8px;color:var(--banana);letter-spacing:.1em;text-transform:uppercase;margin:0 0 10px}
.flash-up{animation:fu .8s ease-out}
.flash-down{animation:fd .8s ease-out}
@keyframes fu{0%{color:var(--phosphor);text-shadow:0 0 12px var(--phosphor)}}
@keyframes fd{0%{color:var(--down);text-shadow:0 0 12px var(--down)}}

/* ---------- risk + footer ---------- */
.risk{margin-top:56px;border:3px solid var(--banana);background:repeating-linear-gradient(-45deg,var(--panel) 0 14px,#18160f 14px 28px);padding:22px;box-shadow:6px 6px 0 var(--shadow)}
.risk h2{font-family:var(--f-display);font-size:14px;margin:0 0 12px;color:var(--banana);line-height:1.5}
.risk p{max-width:72ch;margin:0 0 10px;color:var(--ink)}
footer.foot{margin-top:48px;border-top:2px solid var(--line);padding-block:20px 40px;display:flex;flex-wrap:wrap;gap:18px;justify-content:space-between;align-items:center;font-size:14px;color:var(--mute)}
footer.foot .ca{font-family:var(--f-data);font-size:18px;color:var(--ink-soft);word-break:break-all}
footer.foot nav{display:flex;gap:14px;flex-wrap:wrap}
footer.foot nav a{color:var(--ink-soft);font-size:14px}

/* ---------- toast ---------- */
.toasts{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:70;display:flex;flex-direction:column;gap:10px;max-width:min(360px,calc(100vw - 32px))}
.toast{background:var(--panel);border:2px solid var(--banana);box-shadow:5px 5px 0 #000;padding:12px 14px;display:flex;gap:12px;align-items:center;animation:tin .5s var(--ease-pop)}
.toast b{font-family:var(--f-display);font-size:9px;color:var(--banana);display:block;margin-bottom:4px;line-height:1.5}
.toast span{font-size:14px;color:var(--ink-soft)}
.toast canvas{width:48px;height:48px;flex:none}
@keyframes tin{from{transform:translateY(20px) scale(.9);opacity:0}}

/* ---------- cursor trail ---------- */
.trail{position:fixed;inset:0;pointer-events:none;z-index:60}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition:none!important}}