/* PLEAT — cream paper on electric blue. The blue is the brand; nothing here desaturates it. */

:root{
  --blue:#1b1bf2;
  --blue-deep:#1111b4;
  --blue-ink:#07074a;
  --cream:#f2e7cf;
  --cream-2:#e4d6b8;
  --cream-dim:rgba(242,231,207,.68);
  --cream-faint:rgba(242,231,207,.14);
  --panel:rgba(11,11,102,.56);
  --panel-line:rgba(242,231,207,.18);
  --gold:#f0c97a;
  --gas:#8f93ff;
  --r:14px;
  --max:1180px;
  --sans:'Archivo',system-ui,-apple-system,'Helvetica Neue',sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,'SF Mono',Menlo,monospace;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:var(--blue);color:var(--cream);
  font:400 16px/1.55 var(--sans);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:inherit}

/* ── the stage sits behind everything and never moves */
.stage{position:fixed;inset:0;z-index:0}
.stage-canvas{display:block;width:100%;height:100%}
.grain{
  position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.22;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
}

/* ── top bar */
.top{
  position:sticky;top:0;z-index:30;
  display:flex;align-items:center;gap:20px;
  padding:14px max(16px,env(safe-area-inset-left)) 14px max(16px,env(safe-area-inset-right));
  backdrop-filter:blur(14px) saturate(130%);
  background:linear-gradient(180deg,rgba(13,13,120,.72),rgba(13,13,120,.28));
  border-bottom:1px solid var(--cream-faint);
}
.mark{display:flex;align-items:center;gap:9px;text-decoration:none;font-weight:700;letter-spacing:.14em;font-size:14px}
.mark svg{flex:0 0 auto}
.tabs{display:flex;gap:4px;margin-left:auto}
.tabs a{
  text-decoration:none;font-size:13.5px;font-weight:500;letter-spacing:.02em;
  padding:7px 13px;border-radius:999px;color:var(--cream-dim);
  transition:background .18s,color .18s;
}
.tabs a:hover{color:var(--cream);background:rgba(242,231,207,.09)}
.tabs a.on{color:var(--blue-ink);background:var(--cream);font-weight:600}
.live{
  display:flex;align-items:center;gap:7px;font:500 11.5px/1 var(--mono);
  letter-spacing:.06em;text-transform:uppercase;color:var(--cream-dim);
  padding:7px 11px;border:1px solid var(--panel-line);border-radius:999px;white-space:nowrap;
}
.live i{width:7px;height:7px;border-radius:50%;background:#ffb020;box-shadow:0 0 0 0 rgba(255,176,32,.5);animation:pip 2.4s infinite}
.live.ok i{background:#6ee89a}
.live.bad i{background:#ff6b6b;animation:none}
@keyframes pip{0%{box-shadow:0 0 0 0 rgba(110,232,154,.45)}70%{box-shadow:0 0 0 7px rgba(110,232,154,0)}100%{box-shadow:0 0 0 0 rgba(110,232,154,0)}}

/* ── pages */
main{position:relative;z-index:10}
.page{display:none;max-width:var(--max);margin:0 auto;padding:0 16px 80px}
.page.on{display:block;animation:in .42s cubic-bezier(.22,.8,.3,1) both}
@keyframes in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

.hero{padding:clamp(40px,9vh,96px) 0 clamp(26px,4vh,44px);max-width:720px}
/* the band the stage drops the fan into when there is no room beside the words. The
   aspect test is the same one the scene uses to decide it is narrow. */
.fan-slot{display:none}
@media(max-aspect-ratio:95/100){
  .fan-slot{display:block;height:clamp(132px,18vh,200px)}
  .hero{padding-top:clamp(18px,3vh,34px)}
}
.eyebrow{
  margin:0 0 18px;font:500 11.5px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;
  color:var(--cream-dim);
}
h1{
  margin:0;font-weight:600;letter-spacing:-.035em;line-height:.97;
  font-size:clamp(40px,7.2vw,76px);
}
h1 em{font-style:normal;color:var(--gold)}
.lede{margin:22px 0 0;max-width:54ch;color:var(--cream-dim);font-size:16.5px;line-height:1.62}

.head{padding:clamp(40px,9vh,88px) 0 26px;max-width:720px}
.head h1{font-size:clamp(34px,5.4vw,58px)}
.head p{margin:18px 0 0;color:var(--cream-dim);max-width:60ch}
.head-2{padding:56px 0 18px}
.head-2 h2{margin:0;font-size:clamp(22px,3vw,30px);font-weight:600;letter-spacing:-.02em}

/* ── panels */
.panels{display:grid;gap:14px;grid-template-columns:repeat(12,1fr)}
.panel{
  grid-column:span 12;
  background:var(--panel);
  border:1px solid var(--panel-line);
  border-radius:var(--r);
  padding:22px;
  backdrop-filter:blur(18px) saturate(125%);
  box-shadow:0 18px 50px -30px rgba(0,0,40,.8);
}
.panel h2{
  margin:0 0 18px;font:500 11.5px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;
  color:var(--cream-dim);
}
@media(min-width:900px){
  .panel-input{grid-column:span 5}
  .panel-verdict{grid-column:span 7}
  .panel-year{grid-column:span 12}
}
@media(min-width:1100px){
  .panel-input{grid-column:span 4}
  .panel-verdict{grid-column:span 4}
  .panel-year{grid-column:span 4}
}

/* ── sliders */
.field{display:block;margin-bottom:26px}
.field-top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:10px}
.field-top b{font-weight:600;font-size:15px}
.field-top output{font:600 20px/1 var(--mono);color:var(--gold);letter-spacing:-.02em}
.field-foot{display:flex;justify-content:space-between;margin-top:8px;font:400 11px/1 var(--mono);color:var(--cream-dim)}
input[type=range]{
  -webkit-appearance:none;appearance:none;width:100%;height:26px;background:transparent;cursor:grab;display:block;
}
input[type=range]:active{cursor:grabbing}
input[type=range]::-webkit-slider-runnable-track{height:3px;border-radius:2px;background:var(--cream-faint)}
input[type=range]::-moz-range-track{height:3px;border-radius:2px;background:var(--cream-faint)}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;width:18px;height:18px;margin-top:-7.5px;border-radius:3px;
  background:var(--cream);border:none;box-shadow:0 2px 10px rgba(0,0,40,.5);transition:transform .14s;
}
input[type=range]:hover::-webkit-slider-thumb{transform:scale(1.14)}
input[type=range]::-moz-range-thumb{width:18px;height:18px;border-radius:3px;background:var(--cream);border:none}
input[type=range]:focus-visible{outline:2px solid var(--gold);outline-offset:6px;border-radius:4px}

.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.chip{
  font:500 12px/1 var(--mono);letter-spacing:.02em;color:var(--cream-dim);
  background:transparent;border:1px solid var(--panel-line);border-radius:999px;
  padding:8px 13px;cursor:pointer;transition:all .16s;
}
.chip:hover{color:var(--blue-ink);background:var(--cream);border-color:var(--cream)}

/* ── verdict */
.verdict{margin:0;font-weight:600;letter-spacing:-.03em;font-size:clamp(28px,4vw,40px);line-height:1.04}
.verdict-sub{margin:10px 0 22px;color:var(--cream-dim);font-size:14.5px}
.rows{margin:0;display:grid;gap:1px;background:var(--panel-line);border-radius:10px;overflow:hidden}
.rows>div{display:flex;justify-content:space-between;align-items:center;gap:16px;background:rgba(7,7,66,.72);padding:11px 14px}
.rows dt{font-size:13.5px;display:flex;flex-direction:column;gap:2px}
.rows dt small{color:var(--cream-dim);font:400 11px/1.3 var(--mono)}
.rows dd{margin:0;font:500 14px/1 var(--mono);white-space:nowrap}
.rows .split dt{padding-left:12px;position:relative}
.rows .split dt::before{content:'';position:absolute;left:0;top:7px;bottom:7px;width:2px;background:var(--cream-faint);border-radius:2px}

/* ── year panel */
.bigs{display:flex;gap:26px;flex-wrap:wrap;margin-bottom:22px}
.bigs div{display:flex;flex-direction:column;gap:3px}
.bigs b{font:600 24px/1 var(--mono);letter-spacing:-.03em}
.bigs span{font-size:12px;color:var(--cream-dim)}
.meter{display:flex;height:10px;border-radius:5px;overflow:hidden;background:var(--cream-faint)}
.meter i{display:block;height:100%;transition:width .4s cubic-bezier(.22,.8,.3,1)}
.m-kept{background:var(--cream)}
.m-fee{background:var(--gold)}
.m-gas{background:var(--gas)}
.legend{display:flex;gap:18px;flex-wrap:wrap;list-style:none;margin:12px 0 0;padding:0;font-size:12.5px;color:var(--cream-dim)}
.legend li{display:flex;align-items:center;gap:7px}
.legend i{width:9px;height:9px;border-radius:2px;display:block}
.legend b{font:500 12.5px/1 var(--mono);color:var(--cream)}
.note{margin:18px 0 0;color:var(--cream-dim);font-size:13.5px;line-height:1.6;max-width:62ch}

/* ── gas bar */
.gasbar{
  display:flex;flex-wrap:wrap;gap:0;margin-top:14px;
  border:1px solid var(--panel-line);border-radius:var(--r);overflow:hidden;
  background:rgba(7,7,66,.66);backdrop-filter:blur(14px);
}
.gasbar>span{
  flex:1 1 150px;padding:13px 16px;display:flex;flex-direction:column;gap:3px;
  font-size:11px;color:var(--cream-dim);border-right:1px solid var(--panel-line);
}
.gasbar>span:last-child{border-right:0}
.gasbar b{font:500 15px/1.2 var(--mono);color:var(--cream);letter-spacing:-.01em}
.gb-h{flex:0 0 auto !important;justify-content:center;font:500 10.5px/1 var(--mono) !important;letter-spacing:.16em;text-transform:uppercase}

/* ── creases */
.chartwrap{border:1px solid var(--panel-line);border-radius:var(--r);background:rgba(7,7,66,.66);padding:18px;backdrop-filter:blur(14px)}
.chart{width:100%;height:220px;display:block}
.chart-ax{display:flex;justify-content:space-between;margin-top:10px;font:400 11px/1 var(--mono);color:var(--cream-dim)}
.tablewrap{margin-top:14px;border:1px solid var(--panel-line);border-radius:var(--r);overflow:auto;max-height:430px;background:rgba(7,7,66,.66);backdrop-filter:blur(14px)}
table.log{width:100%;border-collapse:collapse;font:400 13px/1 var(--mono);min-width:620px}
table.log th{
  position:sticky;top:0;background:rgba(10,10,86,.96);text-align:right;padding:11px 14px;
  font:500 10.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--cream-dim);
  border-bottom:1px solid var(--panel-line);
}
table.log th:first-child,table.log td:first-child{text-align:left}
table.log td{padding:10px 14px;text-align:right;border-bottom:1px solid rgba(242,231,207,.07)}
table.log tbody tr:hover{background:rgba(242,231,207,.05)}

/* ── protocol */
.code{
  margin:0;padding:20px;border-radius:var(--r);overflow-x:auto;
  background:rgba(6,6,60,.6);border:1px solid var(--panel-line);
  font:500 13.5px/1.9 var(--mono);color:var(--cream);backdrop-filter:blur(14px);
}
.para{max-width:66ch;color:var(--cream-dim);margin:26px 0 0;line-height:1.7}
.para b,.para code{color:var(--cream)}
code{font:500 .93em/1 var(--mono);background:rgba(242,231,207,.1);padding:2px 5px;border-radius:4px}
.rules{display:grid;gap:14px;grid-template-columns:1fr;margin-top:34px}
@media(min-width:860px){.rules{grid-template-columns:repeat(3,1fr)}}
.rules article{
  background:var(--panel);border:1px solid var(--panel-line);border-radius:var(--r);padding:22px;
  backdrop-filter:blur(16px);
}
.rules span{font:600 11px/1 var(--mono);letter-spacing:.16em;color:var(--gold)}
.rules h3{margin:12px 0 10px;font-size:17px;font-weight:600;letter-spacing:-.02em;line-height:1.25}
.rules p{margin:0;font-size:14px;color:var(--cream-dim);line-height:1.6}
table.contracts{width:100%;border-collapse:collapse;font-size:14px}
table.contracts th{text-align:left;padding:14px 16px 14px 0;font:600 14px/1.4 var(--sans);white-space:nowrap;vertical-align:top;border-bottom:1px solid rgba(242,231,207,.09)}
table.contracts td{padding:14px 16px 14px 0;color:var(--cream-dim);vertical-align:top;border-bottom:1px solid rgba(242,231,207,.09)}
td.addr{font:400 12px/1.4 var(--mono);white-space:nowrap;text-align:right;padding-right:0}

/* ── token */
.stats{display:grid;gap:14px;grid-template-columns:repeat(2,1fr)}
@media(min-width:860px){.stats{grid-template-columns:repeat(4,1fr)}}
.stats div{background:var(--panel);border:1px solid var(--panel-line);border-radius:var(--r);padding:20px;backdrop-filter:blur(16px)}
.stats b{display:block;font:600 clamp(20px,2.6vw,28px)/1 var(--mono);letter-spacing:-.03em}
.stats span{display:block;margin-top:8px;font-size:12.5px;color:var(--cream-dim)}
.loop{display:grid;gap:14px;grid-template-columns:1fr;margin-top:14px}
@media(min-width:860px){.loop{grid-template-columns:repeat(4,1fr)}}
.loop-step{border:1px solid var(--panel-line);border-radius:var(--r);padding:20px;background:rgba(7,7,66,.62);backdrop-filter:blur(14px)}
.loop-step span{font:600 11px/1 var(--mono);letter-spacing:.16em;color:var(--gold)}
.loop-step p{margin:11px 0 0;font-size:14px;color:var(--cream-dim);line-height:1.6}
.loop-step b{color:var(--cream)}
table.geom{width:100%;border-collapse:collapse;font:400 13.5px/1 var(--mono);margin-top:4px}
table.geom th{text-align:right;padding:11px 0 11px 16px;font:500 10.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--cream-dim);border-bottom:1px solid var(--panel-line)}
table.geom th:first-child,table.geom td:first-child{text-align:left;padding-left:0;font-family:var(--sans)}
table.geom td{text-align:right;padding:11px 0 11px 16px;border-bottom:1px solid rgba(242,231,207,.07)}
table.geom small{display:block;color:var(--cream-dim);font-size:11px;margin-top:3px}

/* ── footer */
.foot{
  position:relative;z-index:10;display:flex;justify-content:space-between;align-items:center;gap:16px;
  max-width:var(--max);margin:0 auto;padding:22px 16px 40px;
  border-top:1px solid var(--cream-faint);font-size:13px;color:var(--cream-dim);
}
.foot a{text-decoration:none}
.foot a:hover{color:var(--cream)}

@media(max-width:700px){
  .top{gap:12px;flex-wrap:wrap}
  .tabs{order:3;width:100%;margin-left:0;overflow-x:auto;padding-bottom:2px}
  .tabs a{white-space:nowrap}
  .live{margin-left:auto}
  .panel{padding:18px}
  .bigs{gap:18px}
}
@media(prefers-reduced-motion:reduce){
  .page.on{animation:none}
  .live i{animation:none}
}

/* ─────────────────────────────────────────────── the vault bar */
.topright{display:flex;align-items:center;gap:10px;margin-left:12px}
.btn{
  font:600 13px/1 var(--sans);letter-spacing:.01em;color:var(--blue-ink);background:var(--cream);
  border:1px solid var(--cream);border-radius:999px;padding:9px 16px;cursor:pointer;
  transition:transform .14s,opacity .14s,background .14s;white-space:nowrap;
}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:none}
.btn:disabled{opacity:.42;cursor:not-allowed;transform:none}
.btn.on{background:transparent;color:var(--cream);border-color:var(--panel-line);font-family:var(--mono);font-size:12px}

.vaultbar{
  margin-top:8px;background:var(--panel);border:1px solid var(--panel-line);border-radius:var(--r);
  padding:22px;backdrop-filter:blur(18px) saturate(125%);box-shadow:0 18px 50px -30px rgba(0,0,40,.8);
}
.vaultbar.off{opacity:.78}
.vb-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-bottom:18px}
.vb-head h2{margin:0;font:500 11.5px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--cream-dim)}
.vb-addr{font:400 11.5px/1 var(--mono);color:var(--cream-dim)}
.vb-grid{display:grid;gap:1px;background:var(--panel-line);border-radius:10px;overflow:hidden;grid-template-columns:repeat(2,1fr)}
@media(min-width:760px){.vb-grid{grid-template-columns:repeat(5,1fr)}}
.vb-stat{background:rgba(7,7,66,.72);padding:13px 15px;display:flex;flex-direction:column;gap:4px}
.vb-stat b{font:600 17px/1.1 var(--mono);letter-spacing:-.02em}
.vb-stat span{font-size:11.5px;color:var(--cream-dim)}

.vb-actions{display:grid;gap:14px;margin-top:14px;grid-template-columns:1fr}
@media(min-width:860px){.vb-actions{grid-template-columns:1fr 1fr 1.1fr}}
.vb-form{display:flex;flex-direction:column;gap:9px}
.vb-form label{font-size:13px;font-weight:600;display:flex;flex-direction:column;gap:7px}
.vb-in{display:flex;align-items:center;gap:8px;background:rgba(7,7,66,.72);border:1px solid var(--panel-line);border-radius:10px;padding:0 12px}
.vb-in input{
  flex:1;min-width:0;background:transparent;border:0;outline:0;color:var(--cream);
  font:500 16px/1 var(--mono);padding:13px 0;letter-spacing:-.01em;
}
.vb-in input::placeholder{color:rgba(242,231,207,.32)}
.vb-in input:disabled{color:var(--cream-dim)}
.vb-in em{font:500 11.5px/1 var(--mono);font-style:normal;color:var(--cream-dim)}
.vb-max{
  font:500 10.5px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--cream-dim);
  background:transparent;border:1px solid var(--panel-line);border-radius:6px;padding:5px 7px;cursor:pointer;
}
.vb-max:hover:not(:disabled){color:var(--blue-ink);background:var(--cream);border-color:var(--cream)}
.vb-max:disabled{opacity:.4;cursor:not-allowed}
.vb-form small{font:400 11.5px/1.4 var(--mono);color:var(--cream-dim)}
.btn-go{width:100%;padding:12px 16px}
.vb-fold{background:rgba(7,7,66,.72);border:1px solid var(--panel-line);border-radius:10px;padding:15px;display:flex;flex-direction:column;gap:9px}
.vb-foldtop{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.vb-foldtop b{font-size:14px}
.vb-foldtop span{font:500 11.5px/1 var(--mono);color:var(--cream-dim)}
.vb-fold.ready .vb-foldtop span{color:#8dffb0}
.vb-fold p{margin:0;font-size:12.5px;line-height:1.55;color:var(--cream-dim)}
.btn-fold{margin-top:auto;background:var(--gold);border-color:var(--gold)}
.vb-msg{margin:14px 0 0;min-height:1.2em;font:400 13px/1.5 var(--mono);color:var(--cream-dim)}
.vb-msg.bad{color:#ff9d9d}
.vb-msg.good{color:#8dffb0}
@media(max-width:700px){.topright{margin-left:auto}.vaultbar{padding:18px}}

.vb-form small.warn{color:var(--gold)}
.vb-form small.warn:empty{display:none}