:root{
  --bg: oklch(0.985 0.004 85);
  --surface: oklch(0.965 0.005 85);
  --surface-2: oklch(0.94 0.006 85);
  --ink: oklch(0.2 0.012 255);
  --ink-2: oklch(0.42 0.012 255);
  --ink-3: oklch(0.58 0.01 255);
  --line: oklch(0.89 0.006 85);
  --dark: oklch(0.17 0.01 255);
  --dark-2: oklch(0.23 0.01 255);
  --red: oklch(0.56 0.19 28);
  --blue: oklch(0.5 0.12 250);
  --font-body: 'General Sans', 'Helvetica Neue', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
  --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem; --text-lg: 1.25rem;
  --text-xl: clamp(1.6rem, 1.2rem + 1.4vw, 2.3rem);
  --text-2xl: clamp(2.1rem, 1.4rem + 2.6vw, 3.4rem);
  --text-hero: clamp(2.8rem, 1.6rem + 4.6vw, 5.2rem);
  --r: 14px;
  --ease: cubic-bezier(.2,.7,.2,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--font-body);background:var(--bg);color:var(--ink);font-size:var(--text-base);line-height:1.55;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:6px}
.skip{position:absolute;left:-999px}.skip:focus{left:12px;top:12px;z-index:99;background:#fff;padding:8px 12px;border-radius:8px}
.container{width:min(1120px,100% - 40px);margin-inline:auto}
.narrow{width:min(760px,100% - 40px);margin-inline:auto}
.muted{color:var(--ink-2)} .small{font-size:var(--text-sm)} .xs{font-size:var(--text-xs)}
.mono{font-family:var(--font-mono);font-size:var(--text-sm)}
.eyebrow{font-size:var(--text-sm);font-weight:500;color:var(--blue);margin-bottom:.6rem}
.dark .eyebrow{color:oklch(0.78 0.08 250)}
h1,h2,h3{font-weight:500;letter-spacing:-0.025em;line-height:1.05}
h1{font-size:var(--text-hero)} h2{font-size:var(--text-2xl)} h3{font-size:var(--text-lg);letter-spacing:-0.01em;line-height:1.25}
p{max-width:64ch}

/* nav */
.nav-wrap{position:fixed;top:8px;left:0;right:0;z-index:50;display:flex;justify-content:center;padding:0 12px}
.nav{width:min(1140px,100%);display:flex;align-items:center;justify-content:space-between;gap:12px;padding:6px 6px 6px 14px;border-radius:12px;background:color-mix(in oklch, var(--bg) 78%, transparent);backdrop-filter:blur(14px) saturate(1.3);-webkit-backdrop-filter:blur(14px);border:1px solid color-mix(in oklch, var(--line) 80%, transparent)}
.brand{display:inline-flex;white-space:nowrap;align-items:center;gap:9px;font-weight:600;font-size:var(--text-sm);letter-spacing:-0.01em}
.nav-links{display:flex;align-items:center;gap:18px;font-size:var(--text-sm);color:var(--ink-2)}
.nav-links a[data-link]:hover,.nav-links a[aria-current]{color:var(--ink)}
.meter{display:flex;align-items:center;gap:8px}
.meter-label{font-size:var(--text-xs);color:var(--ink-3)}
.meter-bar{width:64px;height:4px;border-radius:4px;background:var(--surface-2);overflow:hidden}
.meter-fill{display:block;height:100%;width:0;background:var(--ink);transition:width .8s var(--ease)}
.meter-fill.t3{background:var(--red)}

.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 18px;border-radius:9px;font-weight:500;font-size:var(--text-sm);transition:transform .2s var(--ease),background .2s,opacity .2s;border:1px solid transparent;white-space:nowrap}
.btn:hover{transform:translateY(-1px)}
.btn-sm{padding:8px 13px}
.btn-dark{background:var(--dark);color:#fff}
.btn-light{background:#fff;color:var(--dark)}
.btn-ghost{border-color:color-mix(in oklch, currentColor 30%, transparent)}
.btn[disabled]{opacity:.45;cursor:not-allowed;transform:none}
.linklike{font-size:var(--text-sm);color:var(--ink-2);text-align:left;padding:0}
.linklike:hover{color:var(--ink)}

/* hero */
.hero{position:relative;min-height:min(92vh,760px);background:var(--dark);color:#fff;display:flex;align-items:center;overflow:hidden}
.hero-img{position:absolute;inset:0;background:url(./assets/hero.jpg) 70% 50%/cover no-repeat}
.hero-img::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--dark) 0%, color-mix(in oklch,var(--dark) 85%,transparent) 36%, transparent 70%)}
.hero .container{position:relative;padding-top:110px;padding-bottom:70px}
.hero h1{max-width:none}
.hero .lede{font-size:var(--text-lg);line-height:1.45;color:oklch(0.88 0.005 255);max-width:34ch;margin:22px 0 30px}
.status{display:flex;align-items:center;gap:9px;margin-top:34px;font-size:var(--text-sm);color:oklch(0.8 0.005 255)}
.status::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;animation:pulse 2.4s infinite}
@keyframes pulse{50%{opacity:.25}}
.row{display:flex;gap:10px;flex-wrap:wrap}

section.block{padding:clamp(64px,9vw,120px) 0}
section.alt{background:var(--surface)}
section.dark{background:var(--dark);color:#fff}
.split{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(28px,5vw,72px);align-items:center}
.split.rev{grid-template-columns:1fr 1.05fr}
@media (max-width:860px){.split,.split.rev{grid-template-columns:1fr}}

/* clip */
.clip{position:relative;border-radius:var(--r);overflow:hidden;background:var(--dark);aspect-ratio:4/3;box-shadow:0 30px 60px -30px rgba(10,12,20,.45)}
.clip canvas{width:100%;height:100%;display:block}
.clip-play{position:absolute;inset:34px 14px auto auto;background:rgba(255,255,255,.92);color:var(--dark);border-radius:999px;padding:8px 14px;font-size:var(--text-xs);font-weight:500;display:flex;gap:6px;align-items:center}
.clip-cap{font-size:var(--text-xs);color:var(--ink-3);margin-top:10px}

.spec{margin-top:26px;border-top:1px solid var(--line)}
.spec div{display:grid;grid-template-columns:130px 1fr;gap:16px;padding:14px 0;border-bottom:1px solid var(--line);font-size:var(--text-sm)}
.spec dt{color:var(--ink-3)}
.dark .spec,.dark .spec div{border-color:var(--dark-2)}

/* steps */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:40px}
@media (max-width:820px){.steps{grid-template-columns:1fr}}
.step{background:var(--bg);border:1px solid var(--line);border-radius:var(--r);padding:26px}
.step .num{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--ink-3)}
.step h3{margin:18px 0 8px}
.schema{margin-top:22px;background:var(--dark);color:oklch(0.9 0.005 255);border-radius:var(--r);padding:24px 26px;font-family:var(--font-mono);font-size:var(--text-sm);line-height:1.9;overflow-x:auto}
.schema .k{color:oklch(0.66 0.01 255);display:inline-block;min-width:110px}
.schema .v-red{color:oklch(0.74 0.16 28)}

/* redaction */
.redact{position:relative;border-radius:3px;transition:background .6s,color .6s,filter .6s;cursor:help}
.redact.locked{background:var(--ink);color:transparent;user-select:none;filter:none}
.dark .redact.locked,.schema .redact.locked{background:oklch(0.9 0.005 255)}
.redact.revealed{background:color-mix(in oklch,var(--red) 14%,transparent);color:inherit;padding:0 2px}
.dark .redact.revealed,.schema .redact.revealed{background:color-mix(in oklch,var(--red) 30%,transparent)}

/* cards */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:40px}
@media (max-width:960px){.cards{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.cards{grid-template-columns:1fr}}
.card{display:flex;flex-direction:column;border:1px solid var(--line);background:var(--bg);border-radius:var(--r);overflow:hidden;transition:transform .3s var(--ease),box-shadow .3s}
a.card:hover{transform:translateY(-3px);box-shadow:0 20px 40px -24px rgba(10,12,20,.35)}
.card .thumb{aspect-ratio:16/10;background:var(--dark);position:relative}
.card .thumb canvas{width:100%;height:100%;display:block}
.card .body{padding:18px 20px 20px;display:flex;flex-direction:column;gap:8px;flex:1}
.card .meta{display:flex;justify-content:space-between;font-family:var(--font-mono);font-size:var(--text-xs);color:var(--ink-3)}
.card.locked{background:var(--surface)}
.card.locked .thumb{background:repeating-linear-gradient(135deg,var(--surface-2) 0 10px,var(--surface) 10px 20px);display:grid;place-items:center;color:var(--ink-3);font-size:var(--text-xs);font-family:var(--font-mono)}
.card.locked h3{color:var(--ink-3)}
.tag{display:inline-flex;align-self:flex-start;padding:3px 8px;border-radius:999px;background:var(--surface-2);font-size:var(--text-xs);font-weight:500;color:var(--ink-2)}
.tag.red{background:color-mix(in oklch,var(--red) 14%,transparent);color:var(--red)}

.two{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:40px}
@media (max-width:760px){.two{grid-template-columns:1fr}}
.panel{border:1px solid var(--line);border-radius:var(--r);padding:30px;background:var(--bg);display:flex;flex-direction:column;gap:12px;align-items:flex-start}

/* faq */
.faq{margin-top:34px;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:20px 0;display:flex;justify-content:space-between;gap:16px;font-weight:500}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--ink-3);font-weight:400;transition:transform .3s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .ans{padding:0 0 22px;color:var(--ink-2);max-width:62ch}

/* page head */
.page-head{padding:140px 0 40px}
.page-head p{margin-top:18px;font-size:var(--text-lg);color:var(--ink-2);max-width:48ch;line-height:1.45}
.crumbs{font-size:var(--text-sm);color:var(--ink-3);margin-bottom:22px}
.crumbs a:hover{color:var(--ink)}

/* product */
.product-img{border-radius:var(--r);background:#f4f1ec;overflow:hidden}
.price{font-size:var(--text-xl);font-weight:500;letter-spacing:-0.02em}
.price s{color:var(--ink-3);font-size:var(--text-lg);margin-left:8px}
.swatches{display:flex;gap:8px;margin:18px 0}
.swatch{padding:8px 12px;border:1px solid var(--line);border-radius:999px;font-size:var(--text-sm)}
.swatch[aria-pressed=true]{border-color:var(--ink);background:var(--ink);color:#fff}
.compare{width:100%;border-collapse:collapse;margin-top:30px;font-size:var(--text-sm)}
.compare th,.compare td{text-align:left;padding:13px 10px;border-bottom:1px solid var(--line);vertical-align:top}
.compare th{font-weight:500;color:var(--ink-3)}
.compare td:first-child{color:var(--ink-3);width:28%}
.wide-img{width:100%;aspect-ratio:21/9;object-fit:cover;border-radius:var(--r);filter:contrast(1.05)}

/* rewards */
.coin-row{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:36px}
@media (max-width:760px){.coin-row{grid-template-columns:1fr}}
.stat{border:1px solid var(--line);border-radius:var(--r);padding:24px;background:var(--bg)}
.stat .n{font-size:var(--text-xl);font-weight:500;letter-spacing:-0.02em;margin-bottom:6px}
.bars{margin-top:30px;display:grid;gap:12px}
.bar{display:grid;grid-template-columns:130px 1fr 70px;gap:12px;align-items:center;font-size:var(--text-sm)}
.bar .track{display:block;height:12px;background:var(--surface-2);border-radius:6px;overflow:hidden}
.bar .fill{display:block;width:100%;height:100%;background:var(--ink);border-radius:6px;transform-origin:left;transition:transform 1.4s var(--ease)}
.bar .fill.red{background:var(--red)}
.catalog{display:flex;justify-content:space-between;align-items:center;margin-top:36px;padding:18px 20px;border:1px solid var(--line);border-radius:var(--r);background:var(--bg)}
.token{display:flex;gap:14px;align-items:center}
.token .dot{width:38px;height:38px;border-radius:50%;background:radial-gradient(circle at 35% 30%,oklch(0.86 0.12 85),oklch(0.62 0.13 70));display:grid;place-items:center;font-weight:600;font-size:var(--text-xs);color:var(--dark)}

/* form */
.form{display:grid;gap:18px;margin-top:10px}
.field{display:grid;gap:7px}
.field label{font-size:var(--text-sm);font-weight:500}
.field input,.field select{font:inherit;padding:12px 14px;border:1px solid var(--line);border-radius:9px;background:var(--bg);color:var(--ink)}
.field input:focus,.field select:focus{outline:2px solid var(--blue);outline-offset:0;border-color:transparent}
.range-wrap{display:grid;gap:8px}
.range-wrap input{accent-color:var(--ink);width:100%}
.range-val{font-family:var(--font-mono);font-size:var(--text-sm)}
.role-tabs{display:inline-flex;background:var(--surface-2);padding:4px;border-radius:10px;gap:4px;margin-bottom:12px}
.role-tabs button{padding:8px 14px;border-radius:7px;font-size:var(--text-sm);color:var(--ink-2)}
.role-tabs button[aria-pressed=true]{background:var(--bg);color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.08)}
.idcard{background:var(--dark);color:#fff;border-radius:18px;padding:28px;font-family:var(--font-mono);font-size:var(--text-sm);line-height:1.8;position:relative;overflow:hidden}
.idcard .hdr{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px;font-family:var(--font-body)}
.idcard .k{color:oklch(0.62 0.01 255);display:inline-block;min-width:150px}
.idcard::after{content:"";position:absolute;right:-60px;top:-60px;width:200px;height:200px;border-radius:50%;border:1px solid oklch(0.3 0.01 255)}

/* statement */
.statement{padding:150px 0 90px}
.statement h1{font-size:var(--text-2xl);max-width:18ch}
.statement .body p{margin-top:1.1em;font-size:1.075rem;line-height:1.7}
.statement h2{font-size:var(--text-xl);margin-top:2.2em}
.sources{margin-top:18px;padding-left:1.1em;font-size:var(--text-sm);color:var(--ink-2);display:grid;gap:8px}
.sources a{text-decoration:underline;text-underline-offset:2px}
.inline-link{text-decoration:underline;text-underline-offset:3px;text-decoration-color:color-mix(in oklch,currentColor 40%,transparent)}

.note{margin-top:18px;padding:14px 16px;border-left:2px solid var(--red);background:color-mix(in oklch,var(--red) 6%,transparent);font-size:var(--text-sm);color:var(--ink-2);border-radius:0 8px 8px 0}
.dark .note{color:oklch(0.85 0.005 255);background:color-mix(in oklch,var(--red) 16%,transparent)}

/* footer */
.footer{border-top:1px solid var(--line);padding:56px 0 30px;margin-top:0}
.footer-grid{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap}
.footer-grid p{margin-top:10px}
.footer-cols{display:flex;gap:60px;flex-wrap:wrap}
.footer-cols div{display:grid;gap:8px;align-content:start;font-size:var(--text-sm);color:var(--ink-2)}
.footer-cols a:hover{color:var(--ink)}
.footer-cols .eyebrow{color:var(--ink);margin-bottom:4px}
.disclaimer{margin-top:48px;padding-top:22px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:30px;font-size:var(--text-xs);color:var(--ink-3)}
.disclaimer p:first-child{max-width:80ch}
@media (max-width:700px){.disclaimer{flex-direction:column}}

.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);opacity:0;background:var(--dark);color:#fff;padding:12px 18px;border-radius:10px;font-size:var(--text-sm);transition:all .5s var(--ease);z-index:80;pointer-events:none;max-width:calc(100% - 32px)}
.toast.show{opacity:1;transform:translate(-50%,0)}

.reveal{opacity:0;transform:translateY(14px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}.reveal{opacity:1;transform:none}}

@media (max-width:760px){
  .hide-sm,.meter-label{display:none}
  .nav-links{gap:12px}
  .meter-bar{width:36px}
  .hero-img{background-position:78% 50%}
  .hero-img::after{background:linear-gradient(180deg,color-mix(in oklch,var(--dark) 55%,transparent),var(--dark) 78%)}
  .spec div{grid-template-columns:100px 1fr}
  .bar{grid-template-columns:90px 1fr 56px}
}
@media (max-width:440px){.nav-links a[data-link]{display:none}}

/* alignment */
.align h2{font-size:var(--text-2xl);max-width:14ch}
.align .align-body{margin-top:18px;font-size:var(--text-lg);line-height:1.5;color:oklch(0.84 0.005 255);max-width:40ch}
.align .align-answer{margin-top:34px;font-size:var(--text-hero);font-weight:500;letter-spacing:-0.03em;line-height:1;color:#fff}
.align .align-answer::after{content:"";display:inline-block;width:.16em;height:.16em;border-radius:50%;background:var(--red);margin-left:.06em;vertical-align:.08em}
.align .align-foot{margin-top:34px;font-size:var(--text-sm);color:oklch(0.68 0.008 255);max-width:52ch}