/* COINSLOT shell — design width 1920. 1rem = 16px @1920; root scales with 100vw from 1024 up. */
:root{
  --paper:#FDEED9;--paper-2:#FCE8CE;--peach:#F7DDC1;--chip:#F4DFC7;
  --hero-top:#F66932;--hero-bot:#EF834B;--primary:#EF5A20;--primary-deep:#C83F0A;
  --teal-900:#012528;--teal-800:#033A3E;--teal-700:#154C50;--teal-500:#26757F;
  --mint:#85EED7;--mint-2:#97FCE4;--lime:#A8EF1C;--lime-2:#BFFC3C;--cyan:#3FB6C8;
  --ink:#073F49;--on-dark:#FEF6E7;--brown-field:#895840;--amber:#FFB020;
  --bg:var(--paper);
  --font-display:"Jersey 20",monospace;--font-body:"Hind Siliguri",system-ui,sans-serif;
  --font-num:"Spline Sans Mono",ui-monospace,monospace;--font-label:"Barlow",system-ui,sans-serif;--font-led:"Bitcount Grid Single","Spline Sans Mono",monospace;
  /* --rule-* : widths from BORDER_TABLE (CSS px @1920 => rem), hairlines never under 1px */
  --w-panel:max(1px,.2313rem);--w-panel-inner:max(1px,.2313rem);--w-card:max(1px,.2063rem);--w-input:max(1px,.1438rem);
  --w-chip:max(1px,.1375rem);--w-row:max(1px,.0938rem);--w-line:max(1px,.0625rem);--w-ghost:max(1px,.1563rem);--w-dock:max(1px,.0688rem);--w-footer:max(1px,.125rem);--w-icon:max(1px,.0625rem);
  --c-panel:#80D0CA;--c-panel-inner:#26757F;--c-card:#EFFDFB;--c-input:#C0E0DC;--c-chip:#D5DEDD;--c-row:#6FAAAD;--c-line:#72A2A0;--c-ghost:#E9CBAE;--c-dock:#E4E3DA;--c-footer:#72D8C7;--c-icon:rgba(96,43,14,.32);
  --r-panel:2.25rem;--r-inner:1.5rem;--r-card:1.875rem;--r-input:.5rem;--r-chip:.875rem;--r-row:.375rem;
  --ease-spring:cubic-bezier(.3,1.45,.5,1);--ease-mech:cubic-bezier(.4,0,.2,1);--t-press:180ms;--t-drop:420ms;--t-scan:220ms;
  --gut-l:11.125rem;--gut-r:9.375rem;--pgut-l:2.75rem;--pgut-r:2.625rem;
}
html{font-size:calc(100vw / 120)}
@media (max-width:1023px){html{font-size:16px}}
*,*::before,*::after{box-sizing:border-box}
:where(button,input,select,textarea){border:0;font:inherit;color:inherit;background:none}
:where(button){cursor:pointer}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font-body);font-size:max(12px,1rem);line-height:1.45;display:block;min-height:100vh;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img,svg{max-width:100%;display:block}
table{border-collapse:collapse;width:100%}td,th{font-variant-numeric:tabular-nums}

/* ONE PAGE FRAME: container + atmosphere live here only */
.page{position:relative;min-height:100vh;display:flex;flex-direction:column;background:linear-gradient(180deg,#FFF9EE 0,#FDEED9 14%,#FDEBD8 55%,#FCE8CE 100%);isolation:isolate}
main{flex:1;position:relative;z-index:1;width:100%}
.frame{margin-left:var(--gut-l);margin-right:var(--gut-r);position:relative}
.frame-wide{margin-left:var(--pgut-l);margin-right:var(--pgut-r);position:relative}
.bleed{width:100%;position:relative}

/* PAGE ATMOSPHERE (DESIGN §3b) */
.atmos{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.atmos i{position:absolute;display:block}
.hill{border-radius:50%}
.hill-l{left:-14rem;top:20rem;width:30rem;height:30rem;background:radial-gradient(circle at 60% 40%,rgba(107,162,150,.38),rgba(208,235,193,.18) 62%,transparent 70%)}
.hill-r{right:-16rem;top:30rem;width:34rem;height:34rem;background:radial-gradient(circle at 40% 40%,rgba(208,235,193,.45),rgba(107,162,150,.2) 60%,transparent 70%)}
.hill-b{left:-10%;right:-10%;bottom:-18rem;height:34rem;border-radius:50% 50% 0 0;background:radial-gradient(ellipse at 50% 20%,rgba(208,235,193,.5),rgba(107,162,150,.22) 55%,transparent 72%)}
.cloud{left:0;right:0;top:44rem;height:22rem;background:linear-gradient(180deg,transparent,rgba(247,221,193,.55) 40%,rgba(252,232,206,.7) 60%,transparent)}
.ghost{position:absolute;width:3.8rem;height:3.8rem;border-radius:.875rem;background:rgba(244,217,192,.3)}
.ghost-l{left:1.85rem}.ghost-r{right:1.9rem}
.g1{top:19.8rem}.g2{top:30.6rem}.g3{top:41.3rem}
body[data-route="sdk"] .ghost{width:2.875rem;height:3.3rem}
body[data-route="sdk"] .ghost-l{left:.875rem}body[data-route="sdk"] .ghost-r{right:.875rem}
body[data-route="sdk"] .g1{top:19.625rem}body[data-route="sdk"] .g2{top:30.69rem}body[data-route="sdk"] .g3{top:41.5rem}

/* BORDER CLASSES — the only place borders are declared */
.rule-panel{border:var(--w-panel) solid var(--c-panel);border-radius:var(--r-panel)}
.rule-panel-inner{border:var(--w-panel-inner) solid var(--c-panel-inner);border-radius:var(--r-inner)}
.rule-card{border:var(--w-card) solid var(--c-card);border-radius:var(--r-card)}
.rule-input{border:var(--w-input) solid var(--c-input);border-radius:var(--r-input)}
.rule-chip{border:var(--w-chip) solid var(--c-chip);border-radius:var(--r-chip)}
.rule-row{border:var(--w-row) solid var(--c-row);border-radius:var(--r-row)}
.rule-line{border-top:var(--w-line) solid var(--c-line)}
.rule-line-b{border-bottom:var(--w-line) solid var(--c-line)}
.rule-ghost{border:var(--w-ghost) solid var(--c-ghost)}
.rule-dock{border:var(--w-dock) solid var(--c-dock);border-radius:999px}
.rule-footer{border:var(--w-footer) solid var(--c-footer);border-radius:1.25rem}
.rule-icon{border:var(--w-icon) solid var(--c-icon);border-radius:.8125rem}
.rule-nav{border-bottom:var(--w-line) solid rgba(7,63,73,.12)}
.rule-hair{border-top:var(--w-line) solid rgba(7,63,73,.16)}

/* NAV (chrome/nav.html verbatim sizes) */
.nav{position:relative;z-index:5;height:4.25rem;padding:0 11rem;display:flex;align-items:center;gap:1.125rem;background:linear-gradient(180deg,#fff9ee,#fdebd8);box-shadow:0 .5rem 1.375rem rgba(34,67,63,.12)}
.brand{display:flex;align-items:center;gap:.8125rem;font-family:var(--font-display);font-size:1.4375rem;letter-spacing:.125rem;color:var(--ink)}
.brand img{width:4.3125rem;height:2.8125rem;object-fit:contain}
.vrule{display:block;width:1px;height:1.75rem;background:rgba(7,63,73,.18)}
.chain{padding:.4375rem 1.125rem;border-radius:1.125rem;background:var(--mint);color:var(--ink);font-weight:700;font-size:1rem;box-shadow:0 .1875rem .5rem rgba(7,63,73,.18);white-space:nowrap}
.spacer{flex:1}
.utility{display:flex;align-items:center;gap:.8125rem;font-size:1rem;font-weight:700}
.icon,.ca,.connect{background:var(--chip);padding:.4375rem .75rem;box-shadow:0 .125rem .375rem rgba(54,40,29,.1);line-height:1.4;display:inline-block}
.icon.is-soon{opacity:.55;cursor:default}
.ca{background:var(--primary);color:#fff;border-radius:.8125rem}
.connect{background:var(--lime);color:#163d22;padding-inline:1.25rem;border-color:#c9ff4e}
.nav-toggle{display:none}
.nav a.is-active{color:var(--primary-deep)}

/* DOCK (one dock under the content) */
.dock{position:relative;z-index:2;display:flex;gap:1.1rem;margin:2.6rem 3.2rem 2.5rem 3.1rem;padding:.78rem 1.1rem;background:rgba(255,246,232,.82);box-shadow:0 .5rem 1.375rem rgba(34,67,63,.12)}
.pill{flex:var(--g,1) 1 0;display:flex;align-items:center;justify-content:center;gap:.9rem;height:3.05rem;border-radius:999px;background:var(--peach);color:var(--ink);font-weight:600;font-size:1.3rem;box-shadow:0 .2rem .45rem rgba(120,70,30,.18),inset 0 .1rem 0 rgba(255,255,255,.55);transition:transform var(--t-press) var(--ease-spring),box-shadow var(--t-press) var(--ease-mech)}
.pill svg{width:1.55rem;height:1.55rem;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.pill:hover{transform:translateY(-.08rem)}
.pill:active,.pill.is-active{transform:translateY(.1rem)}
.pill.is-active{background:var(--primary-deep);color:var(--on-dark);box-shadow:inset 0 .22rem .5rem rgba(60,15,0,.5),0 0 1rem rgba(191,252,60,.4)}

/* FOOTER */
.footer{position:relative;z-index:2;min-height:4.25rem;margin:0 .5625rem .75rem;padding:.6rem 2.75rem;display:flex;align-items:center;gap:1.75rem;background:linear-gradient(180deg,#08747a,#053f49);box-shadow:0 .3125rem .75rem rgba(7,63,73,.28);font-size:1.0625rem;color:#fff9ee}
.footer .sep{width:1px;height:1.75rem;background:#72d8c7;flex:none}
.footer .links{margin-left:auto;display:flex;gap:1.375rem;align-items:center}
.footer .links a{color:#fff9ee;border-bottom:var(--w-line) solid #b8eee4}
.footer a[aria-disabled="true"]{opacity:.6;pointer-events:none}
.f-mark{width:2.875rem;height:1.875rem;object-fit:contain;flex:none}
.f-ca{font-family:var(--font-num);font-size:.9375rem;color:#dfff30;white-space:nowrap}

/* MOTION (§10 DESIGN): mechanical + springy; transform/opacity only */
.leds{display:inline-flex;overflow:hidden}
.led-d{display:inline-block;animation:led-flip var(--t-drop) var(--ease-spring) both}
@keyframes led-flip{from{transform:translateY(-100%);opacity:0}to{transform:none;opacity:1}}
.coin-drop{animation:coin-drop var(--t-drop) var(--ease-mech) both}
@keyframes coin-drop{0%{transform:translate(0,-1.5rem) rotate(-30deg);opacity:0}60%{transform:translate(0,.2rem) rotate(8deg);opacity:1}100%{transform:none;opacity:1}}
[data-drop]{opacity:0;transform:translateY(-.8rem)}
[data-drop].is-in{opacity:1;transform:none;transition:opacity 260ms var(--ease-mech),transform var(--t-drop) var(--ease-spring);transition-delay:calc(var(--i,0) * 40ms)}
[data-tick].is-tick{animation:tick 260ms steps(4) 1}
@keyframes tick{50%{opacity:.35;transform:translateY(.1rem)}}
.scan{position:fixed;left:0;right:0;top:0;height:.35rem;z-index:50;pointer-events:none;opacity:0;background:linear-gradient(90deg,transparent,var(--lime-2),transparent);box-shadow:0 0 .8rem var(--lime-2);transform:translateY(0)}
.scan.go{animation:scan var(--t-scan) linear 1}
@keyframes scan{0%{opacity:.9;transform:translateY(4.25rem)}100%{opacity:0;transform:translateY(100vh)}}
main.is-leaving{opacity:1}
.led-glow{box-shadow:0 0 .75rem rgba(191,252,60,.45)}
.wire{stroke-dasharray:.6rem .9rem;animation:wire 1.4s linear infinite}
@keyframes wire{to{stroke-dashoffset:-3rem}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  [data-drop]{opacity:1;transform:none}.scan{display:none}
}

/* MOBILE <1024: stacked, drawer nav, scrollable dock */
@media (max-width:1023px){
  :root{--gut-l:16px;--gut-r:16px;--pgut-l:12px;--pgut-r:12px}
  .nav{height:auto;min-height:56px;padding:8px 16px;flex-wrap:wrap;gap:10px}
  .brand{font-size:20px}.brand img{width:54px;height:36px}
  .chain{font-size:12px;padding:4px 10px}
  .vrule{display:none}
  .nav-toggle{display:inline-flex;flex-direction:column;justify-content:center;gap:4px;width:40px;height:40px;padding:10px;border-radius:10px;background:var(--chip)}
  .nav-toggle i{display:block;height:2px;background:var(--ink);border-radius:2px}
  .utility{display:none;order:9;width:100%;flex-wrap:wrap;gap:8px;font-size:14px;padding:8px 0 4px}
  .nav.is-open .utility{display:flex}
  .icon,.ca,.connect{padding:8px 12px}
  .dock{margin:20px 12px;padding:8px;gap:8px;overflow-x:auto;border-radius:999px;scrollbar-width:none}
  .dock::-webkit-scrollbar{display:none}
  .pill{flex:0 0 auto;min-width:132px;height:44px;font-size:15px;gap:8px;padding:0 14px}
  .pill svg{width:20px;height:20px}
  .footer{flex-wrap:wrap;gap:8px 14px;padding:14px 16px;font-size:13px;border-radius:16px}
  .footer .sep{display:none}.footer .links{margin-left:0;flex-wrap:wrap;gap:8px 16px;width:100%}
  .f-mark{width:40px;height:26px}
  .ghost,.hill-l,.hill-r{display:none}
}