:root{
  --bg:#08070A;--ink2:#0F0D11;--ink3:#151217;--line:#221D24;--line2:#332B33;
  --ivory:#ECE4D2;--mist:#918A88;--mist2:#B8B3A6;--gold:#E2B867;--gold2:#F5D9A0;--ember:#CF8A62;
  --serif:'Bodoni Moda',Didot,'Times New Roman',serif;--sans:'Instrument Sans',system-ui,sans-serif;--mono:'IBM Plex Mono',ui-monospace,monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--ivory);font:400 16px/1.6 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:100;opacity:.05;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
a{color:inherit}
em{font-style:italic;color:var(--gold)}
.skip{position:absolute;left:-999px}.skip:focus{left:12px;top:12px;z-index:200;background:var(--gold);color:#000;padding:8px 12px;border-radius:8px}
.mono{font-family:var(--mono)}.small{font-size:12.5px}.mute{color:var(--mist)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 26px;border-radius:999px;border:1px solid var(--line2);background:transparent;color:var(--ivory);font:600 15px var(--sans);text-decoration:none;cursor:pointer;transition:transform .25s,background .25s,border-color .25s,box-shadow .25s}
.btn:hover{transform:translateY(-1px);border-color:var(--mist)}
.btn.gold{background:linear-gradient(180deg,var(--gold2),var(--gold));color:#140f06;border-color:transparent;box-shadow:0 0 0 1px rgba(245,217,160,.3) inset,0 10px 30px -12px rgba(226,184,103,.6)}
.btn.gold:hover{box-shadow:0 0 0 1px rgba(245,217,160,.5) inset,0 14px 40px -10px rgba(226,184,103,.8)}
.btn.sm{min-height:44px;padding:0 18px;font-size:14px}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}
.wm{font:600 17px var(--serif);letter-spacing:.42em}

/* nav */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px clamp(18px,3vw,40px);transition:background .3s,border-color .3s;border-bottom:1px solid transparent}
.nav.scrolled{background:rgba(8,7,10,.78);backdrop-filter:blur(14px);border-color:var(--line)}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.links{display:flex;gap:4px}
.links a{padding:10px 12px;border-radius:999px;text-decoration:none;color:var(--mist2);font-size:14px;transition:color .2s,background .2s}
.links a i{font:italic 400 13px var(--serif);color:var(--gold);margin-right:4px}
.links a:hover,.links a.on{color:var(--ivory);background:rgba(236,228,210,.05)}
.nav-r{display:flex;align-items:center;gap:10px}
.chainpill{display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:0 14px;border-radius:999px;border:1px solid var(--line2);font:12px var(--mono);color:var(--mist2)}
.chainpill .dot{width:7px;height:7px;border-radius:50%;background:var(--mist)}
.chainpill.live .dot{background:var(--gold);box-shadow:0 0 10px var(--gold)}
@media (max-width:1100px){.links{display:none}}
@media (max-width:640px){.chainpill{display:none}}

/* side rail */
.rail{position:fixed;left:18px;top:50%;transform:translateY(-50%);z-index:40;display:flex;flex-direction:column;align-items:center;gap:10px;font:11px var(--mono);letter-spacing:3px;color:var(--mist);writing-mode:vertical-rl}
.rail .dial{width:34px;height:34px;writing-mode:horizontal-tb}
@media (max-width:900px){.rail{display:none}}

/* frames & marginalia */
.frame{position:absolute;inset:clamp(10px,1.6vw,22px);pointer-events:none}
.frame span{position:absolute;width:16px;height:16px;border-color:rgba(226,184,103,.55);border-style:solid;border-width:0}
.frame .tl{left:0;top:0;border-left-width:1px;border-top-width:1px}.frame .tr{right:0;top:0;border-right-width:1px;border-top-width:1px}
.frame .bl{left:0;bottom:0;border-left-width:1px;border-bottom-width:1px}.frame .br{right:0;bottom:0;border-right-width:1px;border-bottom-width:1px}
.margin{position:absolute;z-index:3;font:11px/1.6 var(--mono);letter-spacing:2px;color:var(--mist);text-transform:uppercase}
.margin span{text-transform:none;letter-spacing:0;font-style:italic;font-family:var(--serif);font-size:13px;color:#77706d}

/* hero */
.hero{position:relative;min-height:100svh;min-height:100vh;overflow:hidden;display:flex;align-items:center}
.hero .stage{position:absolute;inset:0;width:100%;height:100%}
.hero::after{content:"";position:absolute;inset:0;background:radial-gradient(70% 90% at 15% 55%,rgba(8,7,10,.92),rgba(8,7,10,.35) 55%,transparent 75%);pointer-events:none}
.m-tl{left:clamp(40px,5vw,80px);top:96px}.m-br{right:clamp(40px,5vw,80px);bottom:44px}
.hero-copy{position:relative;z-index:4;max-width:690px;margin-left:clamp(24px,8vw,140px);padding:150px 0 170px;display:flex;flex-direction:column;gap:26px}
.eyebrow{font:500 12px var(--mono);letter-spacing:.32em;text-transform:uppercase;color:var(--gold)}
.eyebrow::before{content:"";display:inline-block;width:28px;height:1px;background:var(--gold);vertical-align:middle;margin-right:14px}
h1{margin:0;font:400 clamp(48px,6.2vw,96px)/.98 var(--serif);letter-spacing:-.02em}
h1 em{display:inline-block}
.lead{margin:0;max-width:540px;font-size:clamp(17px,1.35vw,19px);line-height:1.65;color:var(--mist2)}
.cta{display:flex;flex-wrap:wrap;gap:12px}
.chains{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--mist)}
.chains b{font:italic 400 18px var(--serif);color:var(--ivory)}.chains .sep{font:italic 16px var(--serif)}
.ledger{position:absolute;z-index:4;left:clamp(24px,8vw,140px);right:clamp(24px,8vw,140px);bottom:38px;display:flex;gap:clamp(20px,5vw,70px);border-top:1px solid var(--line);padding-top:16px}
.ledger small{display:block;font:11px var(--mono);letter-spacing:2px;text-transform:uppercase;color:var(--mist)}
.ledger b{font:400 30px var(--serif)}.ledger b.g{color:var(--gold)}
@media (max-width:760px){.m-br,.m-tl{display:none}.hero{align-items:flex-start}.hero-copy{padding:360px 22px 170px 0;margin-left:22px}.ledger{gap:18px}.ledger b{font-size:24px}.hero::after{background:linear-gradient(180deg,transparent 0,transparent 34%,rgba(8,7,10,.9) 48%,rgba(8,7,10,.96))}}
.up{opacity:0;transform:translateY(22px);animation:up 1.1s cubic-bezier(.2,.8,.2,1) forwards}
.up.d1{animation-delay:.4s}.up.d2{animation-delay:.6s}.up.d3{animation-delay:.85s}.up.d4{animation-delay:1.05s}
@keyframes up{to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.up{animation:none;opacity:1;transform:none}html{scroll-behavior:auto}}

/* plates */
.plate,.vessel,.faq{position:relative;padding:clamp(90px,12vw,160px) clamp(20px,6vw,110px)}
.plate-head{display:flex;align-items:center;gap:18px;margin-bottom:clamp(36px,5vw,64px)}
.plate-head .num{font:italic 400 64px/1 var(--serif);color:var(--gold);min-width:60px}
.plate-head .lat{font:500 12px var(--mono);letter-spacing:.42em;color:var(--ivory)}
.plate-head .rule{flex:1;height:1px;background:linear-gradient(90deg,var(--line2),transparent)}
.plate-head .fig{font:italic 400 15px var(--serif);color:var(--mist)}
@media (max-width:760px){.plate-head .fig{display:none}}
.plate-body{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(30px,5vw,80px);align-items:center}
.plate.flip .plate-body .copy{order:2}
@media (max-width:960px){.plate-body{grid-template-columns:1fr}.plate.flip .plate-body .copy{order:0}}
.copy h2,.v-intro h2{margin:0 0 22px;font:400 clamp(36px,3.8vw,58px)/1.04 var(--serif);letter-spacing:-.015em}
.copy h2 em,.v-intro h2 em{display:block}
.copy p{color:var(--mist2);font-size:17px;max-width:560px;margin:0 0 16px}
.art{position:relative;aspect-ratio:6/5;border-radius:4px;background:radial-gradient(70% 70% at 50% 45%,#141013,var(--bg) 75%);border:1px solid var(--line)}
.art .stage{position:absolute;inset:0;width:100%;height:100%}
.art .cap{position:absolute;left:28px;bottom:22px;font:11px var(--mono);letter-spacing:2px;color:var(--mist);text-transform:uppercase}

/* demos */
.demo{margin-top:26px;border:1px solid var(--line2);border-radius:18px;padding:18px;background:linear-gradient(180deg,rgba(22,18,20,.9),rgba(14,12,14,.9))}
.demo-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.demo input:not([type=range]){flex:1;min-width:0;min-height:44px;border-radius:12px;border:1px solid var(--line2);background:var(--bg);color:var(--ivory);font:14px var(--mono);padding:0 14px}
.demo input:focus-visible,.v-card input:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
ol.log,ol.chain{list-style:none;margin:14px 0 0;padding:0;font:13px/1.75 var(--mono)}
ol.log li{display:flex;gap:10px;animation:up .5s forwards;opacity:0}
ol.log li.ok::before{content:"✓";color:var(--gold)}ol.log li.no::before{content:"✕";color:#ff8f8f}
ol.log li.no{color:#ffb1b1}
ol.chain li{display:grid;grid-template-columns:34px 1fr;gap:8px;padding:8px 0;border-top:1px dashed var(--line2);animation:up .5s forwards;opacity:0}
ol.chain li b{font:italic 400 18px var(--serif);color:var(--gold)}
ol.chain li span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
ol.chain li small{display:block;color:var(--mist)}
input[type=range]{width:100%;accent-color:var(--gold);margin:12px 0}
.phases{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;font:12px/1.3 var(--mono)}
.phases span{padding:10px 8px;border-radius:10px;border:1px solid var(--line2);color:var(--mist);transition:all .3s}
.phases span.on{border-color:var(--gold);color:var(--ivory);background:rgba(226,184,103,.08)}
@media (max-width:560px){.phases{grid-template-columns:1fr 1fr}}
ul.virtues{list-style:none;padding:0;margin:0;display:flex;flex-direction:column}
ul.virtues li{display:grid;grid-template-columns:minmax(150px,1fr) 2fr;gap:18px;padding:18px 0;border-top:1px solid var(--line)}
ul.virtues li:last-child{border-bottom:1px solid var(--line)}
ul.virtues b{font:italic 400 21px/1.2 var(--serif)}ul.virtues span{color:var(--mist2)}
@media (max-width:560px){ul.virtues li{grid-template-columns:1fr;gap:4px}}
table.tolls{width:100%;max-width:560px;border-collapse:collapse;margin:8px 0 18px;font:14px var(--mono)}
table.tolls th{font:500 11px var(--mono);letter-spacing:2px;text-transform:uppercase;color:var(--mist);text-align:left;padding:10px 0;border-bottom:1px solid var(--line2)}
table.tolls td{padding:12px 0;border-bottom:1px solid var(--line)}table.tolls td:first-child{color:var(--mist2);font-family:var(--sans)}
.fine{font:12.5px/1.6 var(--mono)!important;color:var(--mist)!important}

/* vessel app */
.v-wrap{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(30px,5vw,80px);align-items:start}
@media (max-width:960px){.v-wrap{grid-template-columns:1fr}}
.v-intro p{color:var(--mist2);font-size:17px;max-width:520px}
.tabs,.seg{display:inline-flex;gap:4px;padding:4px;border:1px solid var(--line2);border-radius:999px;margin:10px 10px 0 0}
.tabs button,.seg button{min-height:40px;padding:0 18px;border-radius:999px;border:0;background:transparent;color:var(--mist2);font:500 14px var(--sans);cursor:pointer}
.tabs button[aria-selected=true],.seg button[aria-pressed=true]{background:var(--ivory);color:#0b0b0f}
.v-card{position:relative;border:1px solid var(--line2);border-radius:24px;padding:clamp(20px,3vw,34px);background:linear-gradient(180deg,#151114,#0b090b);box-shadow:0 40px 120px -60px rgba(226,184,103,.35)}
.pane{display:flex;flex-direction:column;gap:16px}
.pane[hidden]{display:none}
.pane label{display:flex;flex-direction:column;gap:8px;font-size:14px;color:var(--ivory)}
.pane label small{color:var(--mist);font-size:12.5px}
.pane input{min-height:48px;border-radius:12px;border:1px solid var(--line2);background:var(--bg);color:var(--ivory);font:14px var(--mono);padding:0 14px}
.predict{border:1px dashed var(--line2);border-radius:12px;padding:12px 14px}
.predict small{display:block;font-size:12px;color:var(--mist);margin-bottom:4px}
.predict code{font:13px var(--mono);color:var(--gold);word-break:break-all}
dl.readout{display:grid;grid-template-columns:auto 1fr;gap:8px 18px;margin:0;font:13px var(--mono)}
dl.readout dt{color:var(--mist)}dl.readout dd{margin:0;word-break:break-all}

/* faq */
.faq-list{max-width:900px;margin-left:clamp(0px,6vw,80px)}
details{border-top:1px solid var(--line)}details:last-child{border-bottom:1px solid var(--line)}
summary{cursor:pointer;list-style:none;padding:22px 0;font:400 24px var(--serif);display:flex;justify-content:space-between;gap:16px}
summary::after{content:"+";font:300 26px var(--sans);color:var(--gold);transition:transform .3s}
details[open] summary::after{transform:rotate(45deg)}
summary::-webkit-details-marker{display:none}
details p{margin:0 0 22px;color:var(--mist2);max-width:720px}

/* footer */
.foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:20px;padding:36px clamp(20px,6vw,110px);border-top:1px solid var(--line)}
.foot-l{display:flex;align-items:center;gap:14px}.foot-l small{display:block;color:var(--mist);font-size:13px;margin-top:2px}
.foot-r{display:flex;gap:20px;align-items:center}.foot-r a{color:var(--mist2)}
@media (max-width:480px){.navbuild{display:none}}

.chainnote{display:inline-flex;align-items:center;min-height:40px;margin-top:10px;font:italic 400 18px var(--serif);color:var(--mist2)}