/* ==========================================================================
   OTC HOLDER CRATES
   Static site. Design tokens follow the live OTC interface (otcdesks.cash):
   paper and ink neutrals, lime accents, Geist for text, VT323 for CRT marks.
   ========================================================================== */

@font-face {
  font-family: "Geist";
  src: url("assets/fonts/geist-latin-var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "VT323";
  src: url("assets/fonts/vt323-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
/* Metric-matched fallback reduces layout shift while Geist loads */
@font-face {
  font-family: "Geist Fallback";
  src: local("Arial");
  ascent-override: 95%;
  descent-override: 28%;
  line-gap-override: 0%;
  size-adjust: 104%;
}

/* Tokens ----------------------------------------------------------------- */
:root {
  --paper: #f8f7f4;
  --paper-2: #ffffff;
  --card: #ffffff;
  --track: #efece5;
  --ink: #1a1a18;
  --muted: #696762;
  --frame: #dad6cc;
  --line: #efece5;
  --chrome: #85837e;
  --well: #f5f3ef;
  --well-2: #efece5;
  --head: #3f6212;
  --lime: #a3e635;
  --phos: #2e7d4f;
  --alert: #be123c;
  --panel: #1a1a18;
  --panel-2: #222220;
  --on-panel: #f8f7f4;
  --notice: #1a1a18;
  --on-notice: #f8f7f4;
  --tip: #f7fee7;
  --tip-line: #d9f99d;
  --on-tip: #3f6212;
  --bar: rgba(248, 247, 244, .92);
  --rest: 0 0 0 1px #efece5, 0 1px 2px rgba(58,56,50,.03), 0 2px 4px rgba(58,56,50,.04);
  --lift: 0 6px 12px -2px rgba(58,56,50,.05), 0 12px 24px -4px rgba(58,56,50,.08);
  --stage: radial-gradient(90% 80% at 50% 18%, #ffffff 0%, #f3f1ec 55%, #e9e6de 100%);
  --focus: 0 0 0 2px var(--paper), 0 0 0 4px var(--ink);

  --font-sans: "Geist", "Geist Fallback", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-crt: "VT323", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --font-mono: ui-monospace, "SFMono-Regular", "Cascadia Mono", "Segoe UI Mono", Menlo, Consolas, "Liberation Mono", monospace;

  --max: 1200px;
  --gutter: 24px;
  --r-sm: 5px;
  --r: 8px;
  --r-lg: 12px;
  --strip-h: 34px;
  --top-h: 60px;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #121211; --paper-2: #1a1a18; --card: #1a1a18; --track: #26251f;
    --ink: #f2f1ed; --muted: #a3a19a; --frame: #3a3935; --line: #262521;
    --chrome: #6f6d67; --well: #201f1d; --well-2: #262521; --head: #a3e635;
    --phos: #4ade80; --alert: #f2555a; --panel: #1f1f1c; --panel-2: #262622; --on-panel: #f2f1ed;
    --notice: #080807; --on-notice: #f2f1ed;
    --tip: rgba(163,230,53,.07); --tip-line: rgba(163,230,53,.2); --on-tip: #bef264;
    --bar: rgba(18, 18, 17, .9);
    --rest: 0 0 0 1px #262521, 0 1px 2px rgba(0,0,0,.3);
    --lift: 0 8px 22px rgba(0,0,0,.45);
    --stage: radial-gradient(90% 80% at 50% 18%, #2c2b28 0%, #1f1e1c 55%, #171615 100%);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #121211; --paper-2: #1a1a18; --card: #1a1a18; --track: #26251f;
  --ink: #f2f1ed; --muted: #a3a19a; --frame: #3a3935; --line: #262521;
  --chrome: #6f6d67; --well: #201f1d; --well-2: #262521; --head: #a3e635;
  --phos: #4ade80; --alert: #f2555a; --panel: #1f1f1c; --panel-2: #262622; --on-panel: #f2f1ed;
  --notice: #080807; --on-notice: #f2f1ed;
  --tip: rgba(163,230,53,.07); --tip-line: rgba(163,230,53,.2); --on-tip: #bef264;
  --bar: rgba(18, 18, 17, .9);
  --rest: 0 0 0 1px #262521, 0 1px 2px rgba(0,0,0,.3);
  --lift: 0 8px 22px rgba(0,0,0,.45);
  --stage: radial-gradient(90% 80% at 50% 18%, #2c2b28 0%, #1f1e1c 55%, #171615 100%);
  color-scheme: dark;
}

/* Base ------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--top-h) + 16px);
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
@supports (overflow: clip) { body { overflow-x: clip; } }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; }
p { margin: 0; }
h1, h2, h3, h4 { margin: 0; font-weight: 500; letter-spacing: -0.035em; line-height: 1.05; }
ul, ol { margin: 0; padding: 0; }
dl, dd { margin: 0; }
::selection { background: var(--lime); color: #1a1a18; }

:focus { outline: none; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 4px; }
.on-dark :focus-visible, .on-dark:focus-visible { outline-color: var(--lime); }

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}
.skip {
  position: absolute;
  left: 12px; top: -60px;
  z-index: 100;
  padding: 10px 14px;
  background: var(--ink); color: var(--paper);
  border-radius: var(--r-sm);
  font-weight: 500; font-size: 14px;
  text-decoration: none;
  transition: top .15s;
}
.skip:focus { top: 12px; }

.wrap {
  width: 100%;
  max-width: calc(var(--max) + var(--gutter) * 2);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.tnum { font-variant-numeric: tabular-nums; }

/* Labels, chips --------------------------------------------------------- */
.label {
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}
.kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 14px;
}
.kicker::before {
  content: "";
  width: 7px; height: 7px;
  background: var(--lime);
  box-shadow: 0 0 0 1px rgba(63,98,18,.35);
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding: 0 9px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
  border: 1px solid var(--frame);
  background: var(--card);
  color: var(--muted);
}
.chip-dot::before {
  content: "";
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--lime);
  box-shadow: 0 0 0 2px rgba(163,230,53,.25);
}
.chip-dark {
  border-color: rgba(248,247,244,.18);
  background: rgba(248,247,244,.05);
  color: rgba(248,247,244,.78);
}
.chip-lime {
  border-color: rgba(163,230,53,.45);
  background: rgba(163,230,53,.12);
  color: #d9f99d;
}

/* Buttons ---------------------------------------------------------------- */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 15px;
  border-radius: var(--r-sm);
  border: 1px solid transparent;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.005em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .15s, border-color .15s, color .15s, transform .15s, box-shadow .15s;
  -webkit-tap-highlight-color: transparent;
}
.btn:active { transform: translateY(1px); }
.btn svg { width: 15px; height: 15px; flex: none; transition: transform .2s; }
.btn:hover svg.arr { transform: translateX(2px); }
.btn-lg { min-height: 48px; padding: 0 20px; font-size: 15px; }
.btn-sm { min-height: 34px; padding: 0 12px; font-size: 13px; }
.btn-ink { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.btn-ink:hover { background: color-mix(in srgb, var(--ink) 86%, var(--paper)); }
.btn-line { background: var(--card); color: var(--ink); border-color: var(--frame); }
.btn-line:hover { border-color: var(--chrome); }
.btn-paper { background: #f8f7f4; color: #1a1a18; }
.btn-paper:hover { background: #ffffff; }
.btn-ghost { background: rgba(248,247,244,.06); color: #f8f7f4; border-color: rgba(248,247,244,.32); }
.btn-ghost:hover { background: rgba(248,247,244,.12); border-color: rgba(248,247,244,.5); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .55; cursor: default; transform: none; }

/* OTC gloss: same treatment as the live site's primary buttons */
.gloss {
  isolation: isolate;
  overflow: hidden;
  background-image: linear-gradient(152deg, rgba(255,255,255,.5) 0%, rgba(255,255,255,.1) 38%, rgba(255,255,255,0) 64%);
}
.gloss::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 1px rgba(255,255,255,.75), inset 0 -1px rgba(0,0,0,.05);
}
.gloss::after {
  content: "";
  position: absolute; top: -40%; bottom: -40%; left: 0;
  width: 34%;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(255,255,255,.55) 50%, rgba(0,0,0,0) 100%);
  transform: translateX(-180%) skewX(-18deg);
  opacity: 0;
}
.gloss:hover::after { opacity: 1; animation: sheen 1.1s cubic-bezier(.4,0,.2,1); }
@keyframes sheen {
  0% { transform: translateX(-180%) skewX(-18deg); }
  42%, 100% { transform: translateX(460%) skewX(-18deg); }
}

.link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-weight: 500;
  font-size: 14px;
  text-decoration: none;
  color: var(--ink);
  border-bottom: 1px solid var(--frame);
  padding-bottom: 1px;
  transition: border-color .15s;
}
.link:hover { border-color: var(--ink); }
.link svg { width: 12px; height: 12px; }

/* Strip ----------------------------------------------------------------- */
.strip {
  position: relative;
  z-index: 41;
  background: var(--notice);
  color: var(--on-notice);
  font-size: 12.5px;
  min-height: var(--strip-h);
  display: flex;
  align-items: center;
}
.strip .wrap { display: flex; align-items: center; justify-content: center; gap: 10px; padding-top: 6px; padding-bottom: 6px; padding-right: 48px; }
.strip strong { font-weight: 500; display: inline-flex; align-items: center; gap: 7px; }
.strip strong::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--lime); }
.strip span { color: rgba(248,247,244,.66); }
.strip a { color: inherit; text-underline-offset: 3px; text-decoration-color: rgba(248,247,244,.4); white-space: nowrap; }
.strip-x {
  position: absolute;
  right: 10px; top: 50%;
  width: 32px; height: 32px;
  margin-top: -16px;
  display: grid; place-items: center;
  background: none; border: 0; cursor: pointer;
  color: rgba(248,247,244,.6);
  border-radius: 6px;
}
.strip-x:hover { color: #fff; background: rgba(255,255,255,.08); }
.strip-x svg { width: 14px; height: 14px; }
.strip[hidden] { display: none; }

/* Top bar ---------------------------------------------------------------- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  height: var(--top-h);
  background: var(--bar);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--line);
}
.topbar .wrap { height: 100%; display: flex; align-items: center; gap: 14px; }
.brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: -0.01em;
  flex: none;
}
.brand img { width: 22px; height: 22px; }
.crumb { display: inline-flex; align-items: center; gap: 10px; color: var(--muted); font-size: 13.5px; white-space: nowrap; }
.crumb i { font-style: normal; color: var(--frame); }
.crumb b { font-weight: 500; color: var(--ink); }
.nav { margin-left: auto; }
.nav ul { list-style: none; display: flex; align-items: center; gap: 2px; }
.nav a {
  display: inline-flex;
  align-items: center;
  height: 34px;
  padding: 0 11px;
  border-radius: 6px;
  font-size: 13.5px;
  color: var(--muted);
  text-decoration: none;
  transition: color .15s, background-color .15s;
}
.nav a:hover { color: var(--ink); }
.nav a[aria-current] { color: var(--ink); background: var(--well-2); }
.top-actions { display: flex; align-items: center; gap: 8px; flex: none; }
.icon-btn {
  width: 36px; height: 36px;
  display: inline-grid; place-items: center;
  border-radius: 6px;
  border: 0; background: none; cursor: pointer;
  color: var(--ink);
}
.icon-btn:hover { background: var(--well-2); }
.icon-btn svg { width: 17px; height: 17px; }
.theme-toggle .i-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .i-sun { display: block; }
:root[data-theme="dark"] .theme-toggle .i-moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .i-sun { display: block; }
  :root:not([data-theme="light"]) .theme-toggle .i-moon { display: none; }
}
.menu-btn { display: none; }

.sheet {
  position: fixed;
  inset: var(--top-h) 0 0 0;
  border-top: 1px solid var(--line);
  z-index: 39;
  background: var(--paper);
  padding: 12px var(--gutter) 28px;
  overflow-y: auto;
  display: none;
}
.sheet.is-open { display: block; animation: sheet-in .18s ease-out; }
@keyframes sheet-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.sheet ul { list-style: none; border-top: 1px solid var(--line); }
.sheet li a {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 54px;
  border-bottom: 1px solid var(--line);
  font-size: 17px; font-weight: 500; letter-spacing: -0.02em;
  text-decoration: none;
}
.sheet li a::after { content: "\2192"; color: var(--chrome); font-weight: 400; }
.sheet .btn { width: 100%; margin-top: 20px; }
.sheet .sheet-note { margin-top: 18px; font-size: 13px; color: var(--muted); }

/* Hero ------------------------------------------------------------------- */
.hero { padding: 20px 0 0; }
.hero-panel {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
  grid-template-rows: 1fr auto;
  grid-template-areas: "copy art" "formula art";
  align-items: stretch;
  min-height: min(640px, max(540px, calc(100svh - var(--top-h) - var(--strip-h) - 104px)));
  border-radius: var(--r-lg);
  background: #1a1a18;
  color: #f8f7f4;
  overflow: hidden;
  isolation: isolate;
  box-shadow: 0 0 0 1px rgba(255,255,255,.05);
}
.hero-panel::before {
  /* pixel grid, an echo of the OTC terminal look */
  content: "";
  position: absolute; inset: 0;
  z-index: -1;
  background-image: radial-gradient(rgba(248,247,244,.07) 1px, transparent 1.2px);
  background-size: 16px 16px;
  -webkit-mask-image: radial-gradient(70% 70% at 75% 40%, #000 0%, transparent 75%);
  mask-image: radial-gradient(70% 70% at 75% 40%, #000 0%, transparent 75%);
}
.hero-copy {
  grid-area: copy;
  position: relative;
  z-index: 2;
  padding: 52px 20px 32px 52px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.hero-eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 26px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(248,247,244,.6);
}
.hero-eyebrow img { width: 30px; height: 30px; }
.hero-eyebrow .sep { width: 1px; height: 14px; background: rgba(248,247,244,.2); }
.hero h1 {
  font-size: clamp(46px, 6.1vw, 86px);
  line-height: .96;
  letter-spacing: -0.05em;
  font-weight: 500;
}
.hero h1 .l2 {
  display: block;
  background: linear-gradient(180deg, #f8f7f4 10%, #b9b6ae 115%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero-lede {
  margin-top: 22px;
  max-width: 46ch;
  font-size: 16px;
  line-height: 1.55;
  color: rgba(248,247,244,.72);
}
.hero-lede strong { color: #f8f7f4; font-weight: 500; }
.hero-sub {
  margin-top: 10px;
  font-size: 14px;
  color: rgba(248,247,244,.55);
}
.hero-ctas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.formula {
  grid-area: formula;
  position: relative;
  z-index: 2;
  display: flex;
  align-items: stretch;
  margin: 0 20px 44px 52px;
  max-width: 520px;
  border-top: 1px solid rgba(248,247,244,.12);
  padding-top: 18px;
}
.formula > p { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; }
.formula .f-k {
  font-size: 9.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(248,247,244,.48);
}
.formula .f-v { margin-top: 5px; font-size: 14px; font-weight: 500; line-height: 1.2; }
.formula .op {
  flex: none;
  align-self: center;
  width: 30px;
  text-align: center;
  font-family: var(--font-crt);
  font-size: 26px;
  line-height: 1;
  color: var(--lime);
  padding-top: 12px;
}
.formula .res .f-v { color: #d9f99d; }

.hero-art {
  grid-area: art;
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 24px 24px 18px 0;
}
.hero-art::before {
  /* spotlight */
  content: "";
  position: absolute;
  left: 4%; right: 0; top: -12%; height: 86%;
  z-index: -1;
  background: radial-gradient(50% 55% at 50% 45%, rgba(248,247,244,.13), rgba(248,247,244,0) 70%);
}
.hero-art::after {
  /* desk surface */
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0; height: 30%;
  z-index: -1;
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.012) 60%, rgba(255,255,255,0));
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 25%, #000 85%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 25%, #000 85%, transparent);
}
.hero-art .crate-frame { --frame-ratio: 1.12; --canvas: 470; --cy: 54%; }
.art-cap {
  margin-top: 4px;
  text-align: center;
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(248,247,244,.38);
}
.hero-status { position: absolute; top: 18px; right: 18px; z-index: 3; }

.tip {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 14px;
  padding: 13px 18px;
  border-radius: var(--r);
  background: var(--tip);
  border: 1px solid var(--tip-line);
  color: var(--on-tip);
  font-size: 14px;
}
.tip p { color: var(--on-tip); }
.tip strong { font-weight: 600; }
.tip a { margin-left: auto; white-space: nowrap; font-weight: 500; text-decoration: none; }
.tip a:hover { text-decoration: underline; }

/* Sections --------------------------------------------------------------- */
.section { padding: 112px 0 0; }
.sec-head { max-width: 760px; margin-bottom: 44px; }
.sec-head h2, .h2 {
  font-size: clamp(34px, 4.4vw, 56px);
  line-height: 1;
  letter-spacing: -0.045em;
}
.sec-head p.sub {
  margin-top: 18px;
  max-width: 62ch;
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--muted);
}
.card {
  background: var(--card);
  border-radius: var(--r-lg);
  box-shadow: var(--rest);
}

/* Open your crate --------------------------------------------------------- */
.opener {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: 14px;
}
.op-stage {
  position: relative;
  border-radius: var(--r-lg);
  background: #1a1a18;
  color: #f8f7f4;
  overflow: hidden;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  min-height: 600px;
}
.op-stage::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(45% 50% at 50% 42%, rgba(248,247,244,.12), rgba(248,247,244,0) 70%),
    linear-gradient(180deg, rgba(0,0,0,0) 66%, rgba(255,255,255,.03) 66.2%, rgba(255,255,255,.012));
}
.op-stage.is-open::before {
  background:
    radial-gradient(45% 50% at 50% 42%, rgba(248,247,244,.17), rgba(248,247,244,0) 70%),
    linear-gradient(180deg, rgba(0,0,0,0) 66%, rgba(255,255,255,.03) 66.2%, rgba(255,255,255,.012));
}
.op-badges { display: flex; flex-wrap: wrap; gap: 8px; padding: 18px 18px 0; position: relative; z-index: 2; }
.op-stage .crate-frame { --frame-ratio: 1.16; --canvas: 640; --cy: 66%; margin-top: -6px; }
.op-controls {
  position: relative;
  z-index: 2;
  margin-top: auto;
  padding: 0 20px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
}
.op-controls .btn-lg { min-width: 220px; }
.op-hint { font-size: 12.5px; color: rgba(248,247,244,.5); }
.reveal {
  width: 100%;
  max-width: 520px;
  border-radius: var(--r);
  border: 1px solid rgba(248,247,244,.14);
  background: rgba(26,26,24,.82);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  padding: 16px 18px;
  text-align: left;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 16px;
  align-items: center;
  animation: rise .5s cubic-bezier(.2,.7,.2,1) both;
}
.reveal[hidden] { display: none; }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.rv-ingot {
  grid-row: span 3;
  width: 58px; height: 58px;
  border-radius: 8px;
  display: grid; place-items: center;
  font-family: var(--font-crt);
  font-size: 22px;
  color: #3a3f45;
}
.rv-k { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: rgba(248,247,244,.5); }
.rv-name { font-size: 22px; font-weight: 500; letter-spacing: -0.03em; line-height: 1.1; }
.rv-line { font-size: 14px; color: rgba(248,247,244,.7); }
.rv-tags { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.rv-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }

.op-panel { padding: 26px 26px 24px; display: flex; flex-direction: column; gap: 22px; }
.op-panel h3 { font-size: 20px; letter-spacing: -0.03em; }
.op-panel > p { color: var(--muted); font-size: 14.5px; }
.spec { border-top: 1px solid var(--line); }
.spec > div { display: flex; justify-content: space-between; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.spec dt { color: var(--muted); }
.spec dd { font-weight: 500; text-align: right; }
.spec dd.ok { color: var(--head); }
.steps-mini { list-style: none; display: grid; gap: 12px; counter-reset: s; }
.steps-mini li { display: grid; grid-template-columns: 22px 1fr; gap: 12px; font-size: 13.5px; color: var(--muted); }
.steps-mini li::before {
  counter-increment: s;
  content: counter(s);
  width: 22px; height: 22px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--ink); color: var(--paper);
  font-size: 11px; font-weight: 600;
}
.steps-mini li[data-done]::before { background: var(--lime); color: #1a1a18; content: "\2713"; }
.steps-mini b { display: block; color: var(--ink); font-weight: 500; }
.fine { font-size: 12.5px; color: var(--muted); line-height: 1.5; }

/* How it works ----------------------------------------------------------- */
.equation {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: stretch;
  gap: 0;
  margin-bottom: 14px;
}
.eq-card {
  position: relative;
  padding: 24px 24px 22px;
  min-height: 168px;
  display: flex; flex-direction: column;
}
.eq-card .label { margin-bottom: auto; }
.eq-card h3 { margin-top: 26px; font-size: 26px; letter-spacing: -0.035em; }
.eq-card p { margin-top: 8px; font-size: 14px; color: var(--muted); max-width: 34ch; }
.eq-card .meter { display: flex; gap: 4px; margin-top: 18px; }
.eq-card .meter i { flex: 1; height: 6px; border-radius: 2px; background: var(--track); }
.eq-card .meter i.on { background: var(--ink); }
.eq-card.res { background: #1a1a18; color: #f8f7f4; box-shadow: 0 0 0 1px rgba(163,230,53,.18); }
.eq-card.res .label { color: rgba(248,247,244,.5); }
.eq-card.res p { color: rgba(248,247,244,.65); }
.eq-card.res .tiers { display: flex; gap: 4px; margin-top: 18px; }
.eq-card.res .tiers i { flex: 1; height: 6px; border-radius: 2px; }
.eq-op {
  display: grid; place-items: center;
  width: 44px;
  font-family: var(--font-crt);
  font-size: 34px;
  color: var(--chrome);
}
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; list-style: none; }
.step { padding: 22px 22px 24px; }
.step-n {
  width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--ink); color: var(--paper);
  font-size: 12px; font-weight: 600;
  margin-bottom: 30px;
}
.step h3 { font-size: 17px; letter-spacing: -0.02em; }
.step p { margin-top: 8px; font-size: 14px; color: var(--muted); }
.note {
  margin-top: 14px;
  padding: 14px 18px;
  border-radius: var(--r);
  background: var(--well);
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: 13.5px;
}
.note strong { color: var(--ink); font-weight: 500; }

/* Tiers / showroom -------------------------------------------------------- */
.showroom {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  overflow: hidden;
}
.sr-stage {
  position: relative;
  background: var(--stage);
  border-right: 1px solid var(--line);
  cursor: grab;
  touch-action: pan-y;
  min-height: 460px;
  display: flex; flex-direction: column; justify-content: center;
}
.sr-stage:active { cursor: grabbing; }
.sr-stage .crate-frame { --frame-ratio: 1.3; --canvas: 500; --cy: 56%; }
.sr-stage .crate { --shadow-o: .55; }
.sr-tools {
  position: absolute;
  left: 14px; right: 14px; bottom: 12px;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  font-size: 12px; color: var(--muted);
}
.sr-tools .grp { display: flex; gap: 6px; }
.sr-tools .icon-btn { width: 34px; height: 34px; background: var(--card); box-shadow: var(--rest); }
.sr-num-badge { position: absolute; top: 14px; left: 14px; }
.sr-info { padding: 28px 28px 24px; display: flex; flex-direction: column; }
.sr-pos { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pips { display: flex; gap: 4px; }
.pips i { width: 22px; height: 6px; border-radius: 2px; background: var(--track); transition: background-color .3s; }
.sr-name { margin-top: 26px; font-size: 34px; letter-spacing: -0.04em; }
.sr-line { margin-top: 10px; font-size: 17px; letter-spacing: -0.015em; }
.sr-sum { margin-top: 10px; font-size: 14px; color: var(--muted); }
.sr-spec { margin-top: 22px; }
.sr-spec > div { padding: 10px 0; font-size: 13px; }
.tier-tabs {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  border-top: 1px solid var(--line);
  grid-column: 1 / -1;
}
.tier-tab {
  position: relative;
  display: flex; align-items: center; gap: 10px;
  min-height: 60px;
  padding: 10px 16px;
  border: 0;
  border-right: 1px solid var(--line);
  background: var(--card);
  cursor: pointer;
  text-align: left;
  transition: background-color .15s;
}
.tier-tab:last-child { border-right: 0; }
.tier-tab:hover { background: var(--well); }
.tier-tab[aria-selected="true"] { background: var(--well); }
.tier-tab[aria-selected="true"]::after {
  content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 2px; background: var(--ink);
}
.tier-tab .n { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.tier-tab .nm { font-size: 14px; font-weight: 500; }
.sw {
  flex: none;
  width: 18px; height: 18px;
  border-radius: 4px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.5);
}
.sw-copper { --sw: linear-gradient(145deg, #ffd7b8, #e0905f 30%, #b8653a 60%, #7a3c1d); }
.sw-bronze { --sw: linear-gradient(145deg, #f7dfb0, #c99c5e 30%, #a07540 60%, #6a4a24); }
.sw-silver { --sw: linear-gradient(145deg, #fbfbfc, #d4d7db 30%, #a9aeb5 60%, #6f757d); }
.sw-gold { --sw: linear-gradient(145deg, #fff4c9, #ecc56a 30%, #c79632 60%, #87600f); }
.sw-platinum { --sw: linear-gradient(145deg, #ffffff, #eef1f5 30%, #c9ced6 60%, #8e96a2); }
.sw-copper, .sw-bronze, .sw-silver, .sw-gold, .sw-platinum,
.pips i[class*="sw-"], .tiers i[class*="sw-"] { background: var(--sw); }

.lineup-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin: 40px 0 14px; }
.lineup-head h3 { font-size: 20px; letter-spacing: -0.03em; }
.lineup-head p { font-size: 13.5px; color: var(--muted); }
.lineup { list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.lu {
  position: relative;
  display: flex; flex-direction: column;
  overflow: hidden;
  transition: box-shadow .2s, transform .2s;
}
.lu:hover { box-shadow: var(--rest), var(--lift); transform: translateY(-2px); }
.lu.is-active { box-shadow: 0 0 0 1.5px var(--ink); }
.lu-art { background: var(--stage); border-bottom: 1px solid var(--line); }
.lu-art .crate-frame { --frame-ratio: 1.2; --canvas: 500; --cy: 57%; }
.lu-art .crate { --shadow-o: .5; }
.lu-body { padding: 14px 16px 16px; display: flex; flex-direction: column; flex: 1; }
.lu-n { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; display: flex; align-items: center; gap: 8px; }
.lu-n .sw { width: 12px; height: 12px; border-radius: 3px; }
.lu h3 { margin-top: 10px; font-size: 18px; letter-spacing: -0.025em; }
.lu p { margin-top: 6px; font-size: 13.5px; color: var(--muted); line-height: 1.45; }
.lu button {
  margin-top: auto;
  padding-top: 14px;
  align-self: flex-start;
  background: none; border: 0; cursor: pointer;
  font-size: 13px; font-weight: 500;
  display: inline-flex; align-items: center; gap: 6px;
}
.lu button::after { content: ""; position: absolute; inset: 0; }
.lu button svg { width: 13px; height: 13px; }

/* Progression ------------------------------------------------------------ */
.prog { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); overflow: hidden; }
.prog-stage {
  position: relative;
  background: var(--stage);
  border-right: 1px solid var(--line);
  min-height: 480px;
  display: flex; flex-direction: column;
}
.prog-badges { display: flex; flex-wrap: wrap; gap: 8px; padding: 16px 16px 0; position: relative; z-index: 2; }
.prog-stage .crate-frame { --frame-ratio: 1.3; --canvas: 500; --cy: 54%; margin: auto 0; }
.prog-stage .crate { --shadow-o: .55; }
.prog-read {
  position: relative; z-index: 2;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 12px;
  padding: 0 18px 18px;
}
.prog-read .label { display: block; margin-bottom: 4px; }
.prog-tier { font-size: 28px; font-weight: 500; letter-spacing: -0.04em; line-height: 1; display: flex; align-items: center; gap: 10px; }
.prog-tier .sw { width: 22px; height: 22px; border-radius: 5px; }
.prog-ctrl { padding: 28px; display: flex; flex-direction: column; gap: 28px; }
.ctrl-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.ctrl-top label { font-size: 15px; font-weight: 500; letter-spacing: -0.015em; }
.ctrl-val { font-size: 13px; font-weight: 500; color: var(--head); }
.range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 32px;
  background: transparent;
  cursor: pointer;
  --pct: 50%;
  margin: 0;
}
.range::-webkit-slider-runnable-track {
  height: 6px; border-radius: 3px;
  background: linear-gradient(90deg, var(--ink) 0 var(--pct), var(--track) var(--pct) 100%);
}
.range::-moz-range-track { height: 6px; border-radius: 3px; background: var(--track); }
.range::-moz-range-progress { height: 6px; border-radius: 3px; background: var(--ink); }
.range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 26px; height: 26px; margin-top: -10px;
  border-radius: 50%;
  background: var(--card);
  border: 1.5px solid var(--ink);
  box-shadow: 0 2px 6px rgba(0,0,0,.18);
  transition: transform .15s;
}
.range::-moz-range-thumb {
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--card);
  border: 1.5px solid var(--ink);
  box-shadow: 0 2px 6px rgba(0,0,0,.18);
}
.range:active::-webkit-slider-thumb { transform: scale(1.08); }
.range:focus-visible { outline: none; }
.range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px var(--paper), 0 0 0 5px var(--ink); }
.range:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 3px var(--paper), 0 0 0 5px var(--ink); }
.ticks { position: relative; height: 36px; margin-top: 4px; }
.ticks button {
  position: absolute;
  top: 0;
  left: calc(13px + (100% - 26px) * var(--i) / 4);
  transform: translateX(-50%);
  background: none; border: 0; cursor: pointer;
  padding: 6px 4px;
  min-height: 36px;
  font-size: 11.5px;
  color: var(--muted);
  white-space: nowrap;
  line-height: 1.2;
}
.ticks button:nth-child(1) { --i: 0; left: 0; transform: none; padding-left: 0; }
.ticks button:nth-child(2) { --i: 1; }
.ticks button:nth-child(3) { --i: 2; }
.ticks button:nth-child(4) { --i: 3; }
.ticks button:nth-child(5) { --i: 4; left: auto; right: 0; transform: none; padding-right: 0; }
.ticks button[aria-pressed="true"] { color: var(--ink); font-weight: 500; }
.ticks button:hover { color: var(--ink); }
.prog-note { font-size: 12.5px; color: var(--muted); line-height: 1.55; border-top: 1px solid var(--line); padding-top: 18px; margin-top: auto; }

/* Program ---------------------------------------------------------------- */
.program { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: start; }
.program .prose { margin-top: 24px; }
.program .prose p { font-size: 16.5px; line-height: 1.65; color: var(--muted); }
.program .prose p + p { margin-top: 16px; }
.program .prose p strong { color: var(--ink); font-weight: 500; }
.asprop { margin-top: 30px; list-style: none; border-top: 1px solid var(--line); }
.asprop li { display: grid; grid-template-columns: 20px 1fr; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--line); font-size: 14.5px; }
.asprop li svg { width: 16px; height: 16px; margin-top: 3px; color: var(--head); }
.status-card { padding: 24px 24px 18px; }
.status-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.status-head h3 { font-size: 18px; letter-spacing: -0.025em; }
.status-tbl { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.status-tbl th, .status-tbl td { text-align: left; padding: 11px 0; border-top: 1px solid var(--line); vertical-align: top; }
.status-tbl th { font-weight: 400; color: var(--muted); width: 46%; padding-right: 14px; }
.status-tbl td { font-weight: 500; }
.status-tbl td.pending { color: var(--muted); font-weight: 400; }
.status-tbl td.pending::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 8px; border-radius: 50%; border: 1px solid var(--chrome); vertical-align: 1px; }
.status-card .fine { margin-top: 12px; }

/* About OTC ---------------------------------------------------------------- */
.products { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; list-style: none; }
.prod { padding: 24px 24px 22px; display: flex; flex-direction: column; }
.prod-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 26px; }
.prod-ic {
  width: 40px; height: 40px; border-radius: 8px;
  display: grid; place-items: center;
  background: var(--well); box-shadow: inset 0 0 0 1px var(--line);
}
.prod-ic svg { width: 19px; height: 19px; }
.prod h3 { font-size: 19px; letter-spacing: -0.025em; }
.prod p { margin-top: 10px; font-size: 14px; color: var(--muted); }
.prod p.label { margin-top: 0; font-size: 10.5px; line-height: 1.4; }
.prod .links { margin-top: auto; padding-top: 20px; display: flex; flex-wrap: wrap; gap: 14px; }
.chip-live { color: var(--head); border-color: color-mix(in srgb, var(--head) 30%, transparent); background: var(--tip); }

.duo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 14px; margin-top: 14px; }
.burns { padding: 24px; }
.burns h3, .compare h3 { font-size: 20px; letter-spacing: -0.03em; }
.burns > p { margin-top: 8px; font-size: 14px; color: var(--muted); }
.burn-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 18px; }
.burn { padding: 16px; border-radius: var(--r); background: var(--well); border: 1px solid var(--line); }
.burn .label { display: flex; align-items: center; gap: 7px; }
.burn h4 { margin-top: 12px; font-size: 15px; letter-spacing: -0.015em; }
.burn p { margin-top: 6px; font-size: 13px; color: var(--muted); line-height: 1.5; }
.burns .fine { margin-top: 14px; }
.compare { padding: 24px 24px 12px; }
.compare > p { margin-top: 8px; font-size: 14px; color: var(--muted); }
.cmp { width: 100%; border-collapse: collapse; margin-top: 16px; font-size: 13.5px; }
.cmp th, .cmp td { text-align: left; vertical-align: top; padding: 11px 10px 11px 0; border-top: 1px solid var(--line); }
.cmp thead th { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 500; border-top: 0; padding-top: 0; }
.cmp tbody th { color: var(--muted); font-weight: 400; width: 24%; }
.cmp td { width: 38%; }
.cmp td b { font-weight: 500; }
.callout {
  margin-top: 14px;
  padding: 16px 20px;
  border-radius: var(--r);
  border: 1px dashed var(--frame);
  font-size: 14px;
  color: var(--muted);
}
.callout strong { color: var(--ink); font-weight: 500; }

/* Token ------------------------------------------------------------------ */
.token { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); overflow: hidden; }
.token-id { padding: 28px; background: #1a1a18; color: #f8f7f4; display: flex; flex-direction: column; gap: 18px; position: relative; isolation: isolate; }
.token-id::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background-image: radial-gradient(rgba(248,247,244,.07) 1px, transparent 1.2px);
  background-size: 14px 14px;
}
.token-id img { width: 56px; height: 56px; }
.token-id .t-sym { font-family: var(--font-crt); font-size: 56px; line-height: .8; color: #5cb26f; text-shadow: 0 0 14px rgba(92,178,111,.45); }
.token-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; margin-top: auto; }
.token-facts dt { font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; color: rgba(248,247,244,.5); }
.token-facts dd { margin-top: 4px; font-size: 14px; font-weight: 500; }
.token-main { padding: 28px; display: flex; flex-direction: column; gap: 16px; }
.mint-box {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 10px 10px 16px;
  border-radius: var(--r);
  background: var(--well);
  border: 1px solid var(--line);
}
.mint-addr {
  flex: 1; min-width: 0;
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
  user-select: all;
}
.mint-box .btn { flex: none; }
.verified { display: flex; gap: 10px; font-size: 13px; color: var(--muted); }
.verified svg { flex: none; width: 16px; height: 16px; color: var(--head); margin-top: 2px; }
.verified strong { color: var(--ink); font-weight: 500; }
.warn { padding: 12px 16px; border-radius: var(--r); background: color-mix(in srgb, var(--alert) 7%, transparent); border: 1px solid color-mix(in srgb, var(--alert) 22%, transparent); color: var(--ink); font-size: 13.5px; }
.warn strong { color: var(--alert); font-weight: 600; }
.token-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; }
.mint-missing { padding: 16px; border-radius: var(--r); background: var(--well); font-size: 14px; color: var(--muted); }

/* FAQ -------------------------------------------------------------------- */
.faq { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.6fr); gap: 56px; align-items: start; }
.faq-side { position: sticky; top: calc(var(--top-h) + 32px); }
.faq-side p.sub { margin-top: 16px; font-size: 15.5px; color: var(--muted); max-width: 40ch; }
.faq-side .links { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin-top: 22px; }
.faq-group + .faq-group { margin-top: 36px; }
.faq-group h3 { font-size: 11px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); padding-bottom: 12px; border-bottom: 1px solid var(--frame); }
.qa { border-bottom: 1px solid var(--line); }
.qa summary {
  list-style: none;
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 17px 0;
  min-height: 56px;
  cursor: pointer;
  font-size: 15.5px;
  font-weight: 500;
  letter-spacing: -0.015em;
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after {
  content: "";
  flex: none;
  width: 18px; height: 18px;
  background:
    linear-gradient(var(--ink), var(--ink)) center / 12px 1.5px no-repeat,
    linear-gradient(var(--ink), var(--ink)) center / 1.5px 12px no-repeat;
  transition: transform .2s;
}
.qa[open] summary::after { transform: rotate(45deg); }
.qa summary:hover { color: color-mix(in srgb, var(--ink) 75%, var(--muted)); }
.qa .ans { padding: 0 34px 20px 0; color: var(--muted); font-size: 14.5px; line-height: 1.65; }
.qa .ans p + p { margin-top: 10px; }
.qa .ans a { color: var(--ink); text-underline-offset: 3px; text-decoration-color: var(--frame); }
.qa .ans code { font-family: var(--font-mono); font-size: 13px; color: var(--ink); overflow-wrap: anywhere; }

/* Final CTA ------------------------------------------------------------- */
.final { padding: 112px 0 0; }
.final-panel {
  position: relative;
  border-radius: var(--r-lg);
  background: #1a1a18;
  color: #f8f7f4;
  padding: 64px 56px;
  overflow: hidden;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 40px;
  align-items: center;
}
.final-panel::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background-image: radial-gradient(rgba(248,247,244,.07) 1px, transparent 1.2px);
  background-size: 16px 16px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 70%);
  mask-image: linear-gradient(90deg, transparent, #000 70%);
}
.final-panel h2 { font-size: clamp(40px, 5.6vw, 76px); line-height: .96; letter-spacing: -0.05em; }
.final-panel p { margin-top: 18px; color: rgba(248,247,244,.66); max-width: 48ch; font-size: 15.5px; }
.final-panel .hero-ctas { margin-top: 30px; }
.bars { display: grid; grid-template-columns: repeat(5, 46px); gap: 8px; }
.bar-ingot {
  height: 168px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 14px 0;
  font-size: 8.5px; font-weight: 600; letter-spacing: .16em;
  color: rgba(0,0,0,.55);
  text-shadow: 0 1px 0 rgba(255,255,255,.35);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7), inset 0 -2px 0 rgba(0,0,0,.25), 0 10px 20px rgba(0,0,0,.4);
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}
.bar-ingot:nth-child(odd) { margin-top: 18px; }

/* Footer ----------------------------------------------------------------- */
.footer { margin-top: 112px; border-top: 1px solid var(--line); padding: 48px 0 40px; font-size: 13.5px; }
.foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; }
.foot-brand p { margin-top: 12px; color: var(--muted); max-width: 34ch; }
.footer h2 { font-size: 10.5px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 12px; }
.footer ul { list-style: none; display: grid; gap: 8px; }
.footer ul a { text-decoration: none; color: var(--ink); }
.footer ul a:hover { text-decoration: underline; text-underline-offset: 3px; }
.disclaimer { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--line); color: var(--muted); font-size: 12.5px; line-height: 1.65; max-width: 110ch; }
.disclaimer p + p { margin-top: 8px; }
.foot-meta { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 8px 18px; color: var(--chrome); font-size: 12px; }

/* Scroll reveal (only when JS runs) ---------------------------------------- */
.js .rv { opacity: 0; transform: translateY(16px); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
.js .rv.is-in { opacity: 1; transform: none; }

/* Toast ----------------------------------------------------------------- */
.toast {
  position: fixed;
  left: 50%; bottom: 24px;
  z-index: 60;
  transform: translate(-50%, 12px);
  opacity: 0;
  pointer-events: none;
  padding: 10px 16px;
  border-radius: 6px;
  background: var(--ink); color: var(--paper);
  font-size: 13.5px; font-weight: 500;
  box-shadow: var(--lift);
  transition: opacity .2s, transform .2s;
}
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* Responsive -------------------------------------------------------------- */
@media (max-width: 1100px) {
  .nav a { padding: 0 8px; font-size: 13px; }
  .crumb { display: none; }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lineup { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .duo { grid-template-columns: 1fr; }
}
@media (max-width: 920px) {
  :root { --top-h: 56px; }
  .nav { display: none; }
  .menu-btn { display: inline-grid; }
  .top-actions { margin-left: auto; }
  .hero-panel { grid-template-columns: 1fr; grid-template-rows: auto; grid-template-areas: "copy" "art" "formula"; min-height: 0; }
  .formula { margin: 0 32px 32px; }
  .hero-copy { padding: 40px 32px 0; }
  .hero-art { padding: 0 20px 18px; }
  .hero-art .crate-frame { --frame-ratio: 1.35; --cy: 55%; max-width: 560px; margin: 0 auto; }
  .opener, .showroom, .prog, .program, .token, .faq { grid-template-columns: 1fr; }
  .sr-stage, .prog-stage { border-right: 0; border-bottom: 1px solid var(--line); }
  .program { gap: 28px; }
  .faq { gap: 28px; }
  .faq-side { position: static; }
  .final-panel { grid-template-columns: 1fr; }
  .equation { grid-template-columns: 1fr; }
  .eq-op { width: auto; height: 34px; }
  .eq-card { min-height: 0; }
  .eq-card h3 { margin-top: 16px; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .foot-brand { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  :root { --gutter: 16px; --strip-h: 0px; }
  body { font-size: 15px; }
  .section, .final { padding-top: 76px; }
  .footer { margin-top: 76px; }
  .sec-head { margin-bottom: 28px; }
  .sec-head p.sub { font-size: 15.5px; }
  .strip { font-size: 12px; }
  .strip .wrap { justify-content: flex-start; padding-right: 44px; }
  .strip .s-long { display: none; }
  .top-cta { display: none; }
  .hero { padding-top: 12px; }
  .hero-panel { border-radius: 10px; }
  .hero-copy { padding: 26px 20px 0; }
  .hero-eyebrow { margin-bottom: 18px; }
  .hero h1 { font-size: clamp(46px, 13.5vw, 64px); }
  .hero-lede { font-size: 15.5px; margin-top: 16px; }
  .hero-ctas { margin-top: 22px; }
  .hero-ctas .btn { flex: 1 1 auto; min-height: 48px; }
  .hero-art { padding: 6px 0 14px; }
  .hero-art .crate-frame { --frame-ratio: 1.12; --canvas: 450; }
  .hero-status { display: none; }
  .formula { margin: 0 20px 22px; padding: 16px 0 0; max-width: none; }
  .formula .f-v { font-size: 13px; }
  .formula .op { width: 22px; font-size: 22px; }
  .hero-m-formula { display: block; }
  .tip { flex-direction: column; align-items: flex-start; gap: 6px; padding: 12px 14px; font-size: 13.5px; }
  .tip a { margin-left: 0; }
  .op-stage { min-height: 0; }
  .op-stage .crate-frame { --frame-ratio: .92; --canvas: 480; --cy: 68%; }
  .op-controls .btn-lg { width: 100%; }
  .op-panel { padding: 20px; }
  .reveal { grid-template-columns: auto 1fr; padding: 14px; }
  .rv-ingot { width: 48px; height: 48px; }
  .rv-name { font-size: 19px; }
  .steps { grid-template-columns: 1fr; }
  .eq-card { padding: 18px 20px; }
  .eq-card h3 { font-size: 22px; margin-top: 10px; }
  .eq-card .meter, .eq-card.res .tiers { margin-top: 14px; }
  .eq-op { height: 28px; font-size: 28px; }
  .step-n { margin-bottom: 18px; }
  .sr-stage { min-height: 0; }
  .sr-stage .crate-frame { --frame-ratio: 1.15; --canvas: 470; }
  .sr-info { padding: 22px 20px; }
  .sr-name { font-size: 28px; margin-top: 18px; }
  .tier-tabs { order: -1; grid-row: 2; }
  .tier-tab { flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 10px 2px; min-height: 64px; text-align: center; }
  .tier-tab .n { display: none; }
  .tier-tab .nm { font-size: 11.5px; }
  .lineup {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 72%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 8px;
    margin: 0 calc(var(--gutter) * -1);
    padding-left: var(--gutter);
    padding-right: var(--gutter);
    scroll-padding: 0 var(--gutter);
    scrollbar-width: none;
  }
  .lineup::-webkit-scrollbar { display: none; }
  .lu { scroll-snap-align: start; }
  .lu:hover { transform: none; }
  .lineup-head { flex-direction: column; gap: 4px; margin-top: 28px; }
  .prog-stage { min-height: 0; }
  .prog-stage .crate-frame { --frame-ratio: 1.2; --canvas: 470; }
  .prog-ctrl { padding: 22px 20px; gap: 22px; }
  .prog-tier { font-size: 24px; }
  .ticks button { font-size: 10.5px; }
  .products { grid-template-columns: 1fr; }
  .burn-grid { grid-template-columns: 1fr; }
  .cmp { font-size: 13px; }
  .cmp thead { display: none; }
  .cmp, .cmp tbody, .cmp tr, .cmp th, .cmp td { display: block; width: auto; }
  .cmp tr { padding: 12px 0; border-top: 1px solid var(--line); }
  .cmp tbody th, .cmp td { border: 0; padding: 3px 0; }
  .cmp tbody th { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; font-weight: 500; margin-bottom: 4px; }
  .cmp td::before { content: attr(data-k); display: inline-block; min-width: 92px; color: var(--muted); font-size: 12px; }
  .token-id, .token-main { padding: 22px 20px; }
  .mint-box { flex-direction: column; align-items: stretch; padding: 14px; }
  .mint-box .btn { width: 100%; }
  .final-panel { padding: 40px 22px; }
  .bars { display: none; }
  .foot-grid { grid-template-columns: 1fr 1fr; gap: 26px; }
  .qa .ans { padding-right: 0; }
}
@media (max-width: 380px) {
  .hero h1 { font-size: 44px; }
  .formula .f-v { font-size: 12px; }
}

/* Reduced motion ---------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    transition-delay: 0s !important;
  }
  .js .rv { opacity: 1; transform: none; }
}
/* ==========================================================================
   CRATE COMPONENT (CSS 3D)
   A crate is a 3D box made of flat faces. The base is open at the top and
   has an interior; the lid hinges on its back edge. All dimensions are in
   "u" units (--u) so a crate scales with its container.
   ========================================================================== */

@property --u { syntax: "<length>"; inherits: true; initial-value: 1px; }
@property --W { syntax: "<number>"; inherits: true; initial-value: 340; }
@property --BH { syntax: "<number>"; inherits: true; initial-value: 148; }
@property --LH { syntax: "<number>"; inherits: true; initial-value: 50; }
@property --D { syntax: "<number>"; inherits: true; initial-value: 206; }
@property --yaw { syntax: "<angle>"; inherits: true; initial-value: -24deg; }
@property --pitch { syntax: "<angle>"; inherits: true; initial-value: -17deg; }
@property --m1 { syntax: "<color>"; inherits: true; initial-value: #f1f2f3; }
@property --m2 { syntax: "<color>"; inherits: true; initial-value: #c3c6c9; }
@property --m3 { syntax: "<color>"; inherits: true; initial-value: #94989c; }
@property --m4 { syntax: "<color>"; inherits: true; initial-value: #5f6367; }
@property --m5 { syntax: "<color>"; inherits: true; initial-value: #2f3236; }
@property --s1 { syntax: "<color>"; inherits: true; initial-value: #303236; }
@property --s2 { syntax: "<color>"; inherits: true; initial-value: #161719; }
@property --ln1 { syntax: "<color>"; inherits: true; initial-value: #2a2b2e; }
@property --ln2 { syntax: "<color>"; inherits: true; initial-value: #18191b; }
@property --o-guard { syntax: "<number>"; inherits: true; initial-value: 1; }
@property --o-rail { syntax: "<number>"; inherits: true; initial-value: 1; }
@property --o-combo { syntax: "<number>"; inherits: true; initial-value: 1; }
@property --o-dial { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --o-l34 { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --o-ribs { syntax: "<number>"; inherits: true; initial-value: 1; }
@property --o-handle { syntax: "<number>"; inherits: true; initial-value: 1; }
@property --o-screen { syntax: "<number>"; inherits: true; initial-value: 1; }
@property --o-logo { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --o-weave { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --o-grain { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --o-marks { syntax: "<number>"; inherits: true; initial-value: 1; }
@property --o-key { syntax: "<number>"; inherits: true; initial-value: 1; }
@property --o-pin { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --o-vrail { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --o-ring { syntax: "<number>"; inherits: true; initial-value: 0; }

.crate-frame {
  position: relative;
  container-type: inline-size;
  width: 100%;
  aspect-ratio: var(--frame-ratio, 1.18);
}

.crate {
  /* scale: the scene is designed on a 480u wide canvas */
  --u: calc(100cqi / var(--canvas, 480));
  --w: calc(var(--W) * var(--u));
  --bh: calc(var(--BH) * var(--u));
  --lh: calc(var(--LH) * var(--u));
  --d: calc(var(--D) * var(--u));
  --t: calc(7 * var(--u));
  --ih: calc(var(--bh) * 0.8);

  /* Default finish: sealed steel */
  --W: 340; --BH: 148; --LH: 50; --D: 206;
  --m1: #f3f4f5; --m2: #c6c9cc; --m3: #979b9f; --m4: #606468; --m5: #2e3135;
  --s1: #34363a; --s2: #17181a;
  --ln1: #2b2c2f; --ln2: #18191b;
  --o-guard: 1; --o-rail: 1; --o-combo: 1; --o-dial: 0; --o-l34: 0; --o-ribs: 1;
  --o-handle: 1; --o-screen: 1; --o-logo: 0; --o-weave: 0; --o-grain: 0; --o-marks: 1;
  --o-key: 1; --o-pin: 0; --o-vrail: 0; --o-ring: 0;

  position: absolute;
  inset: 0;
  transition:
    --W .7s cubic-bezier(.3,.7,.2,1), --BH .7s cubic-bezier(.3,.7,.2,1),
    --LH .7s cubic-bezier(.3,.7,.2,1), --D .7s cubic-bezier(.3,.7,.2,1),
    --m1 .6s, --m2 .6s, --m3 .6s, --m4 .6s, --m5 .6s, --s1 .6s, --s2 .6s,
    --ln1 .6s, --ln2 .6s,
    --o-guard .5s, --o-rail .5s, --o-combo .5s, --o-dial .5s, --o-l34 .5s,
    --o-ribs .5s, --o-handle .5s, --o-screen .5s, --o-logo .5s, --o-weave .5s,
    --o-grain .5s, --o-marks .5s, --o-key .5s, --o-pin .5s, --o-vrail .5s, --o-ring .5s,
    --yaw .6s cubic-bezier(.3,.7,.2,1), --pitch .6s cubic-bezier(.3,.7,.2,1);
  pointer-events: none;
  user-select: none;
}

/* Tier finishes ---------------------------------------------------------- */
.crate.t-copper {
  --W: 272; --BH: 118; --LH: 40; --D: 170;
  --s1: #34302c; --s2: #1b1917;
  --ln1: #2a2623; --ln2: #191614;
  --o-guard: 0; --o-rail: 0; --o-combo: 0; --o-dial: 0; --o-l34: 0; --o-ribs: .55;
  --o-handle: 0; --o-screen: 0; --o-logo: 1; --o-weave: 0; --o-grain: 0; --o-marks: 0;
  --o-key: 0; --o-pin: 0; --o-vrail: 0; --o-ring: 0;
}
.crate.t-bronze {
  --W: 290; --BH: 126; --LH: 42; --D: 178;
  --s1: #332d27; --s2: #1a1613;
  --ln1: #2c2620; --ln2: #1a1612;
  --o-guard: 1; --o-rail: 0; --o-combo: 0; --o-dial: 0; --o-l34: 0; --o-ribs: 1;
  --o-handle: 0; --o-screen: 0; --o-logo: 1; --o-weave: 0; --o-grain: 0; --o-marks: 1;
  --o-key: 1; --o-pin: 0; --o-vrail: 0; --o-ring: 0;
}
.crate.t-silver {
  --W: 310; --BH: 134; --LH: 45; --D: 190;
  --s1: #33363b; --s2: #18191c;
  --ln1: #2a2c30; --ln2: #17181b;
  --o-guard: 1; --o-rail: 1; --o-combo: 1; --o-dial: 0; --o-l34: 0; --o-ribs: 1;
  --o-handle: 1; --o-screen: 0; --o-logo: 1; --o-weave: 0; --o-grain: 0; --o-marks: 1;
  --o-key: 1; --o-pin: 0; --o-vrail: 0; --o-ring: 0;
}
.crate.t-gold {
  --W: 328; --BH: 142; --LH: 48; --D: 198;
  --s1: #26231f; --s2: #100f0d;
  --ln1: #2a1f1a; --ln2: #150f0c;
  --o-guard: 1; --o-rail: 1; --o-combo: 1; --o-dial: 0; --o-l34: 0; --o-ribs: 0;
  --o-handle: 1; --o-screen: 1; --o-logo: 0; --o-weave: 0; --o-grain: 1; --o-marks: 1;
  --o-key: 1; --o-pin: 1; --o-vrail: 0; --o-ring: 1;
}
.crate.t-platinum {
  --W: 350; --BH: 152; --LH: 52; --D: 212;
  --s1: #272a2f; --s2: #0d0e10;
  --ln1: #23262b; --ln2: #121316;
  --o-guard: 1; --o-rail: 1; --o-combo: 0; --o-dial: 1; --o-l34: 1; --o-ribs: 0;
  --o-handle: 1; --o-screen: 1; --o-logo: 0; --o-weave: 1; --o-grain: 0; --o-marks: 1;
  --o-key: 1; --o-pin: 1; --o-vrail: 1; --o-ring: 1;
}


/* Metals (also applied to the revealed tier plate) */
.crate.t-copper, .crate[data-reveal="copper"] .cr-ingot { --m1: #ffd7b8; --m2: #e0905f; --m3: #b8653a; --m4: #7a3c1d; --m5: #3f1d0d; }
.crate.t-bronze, .crate[data-reveal="bronze"] .cr-ingot { --m1: #f7dfb0; --m2: #c99c5e; --m3: #a07540; --m4: #6a4a24; --m5: #382611; }
.crate.t-silver, .crate[data-reveal="silver"] .cr-ingot { --m1: #fbfbfc; --m2: #d4d7db; --m3: #a9aeb5; --m4: #6f757d; --m5: #3a3f45; }
.crate.t-gold, .crate[data-reveal="gold"] .cr-ingot { --m1: #fff4c9; --m2: #ecc56a; --m3: #c79632; --m4: #87600f; --m5: #45300a; }
.crate.t-platinum, .crate[data-reveal="platinum"] .cr-ingot { --m1: #ffffff; --m2: #eef1f5; --m3: #c9ced6; --m4: #8e96a2; --m5: #4b525c; }

/* Scene ------------------------------------------------------------------ */
.cr-scene {
  position: absolute;
  inset: 0;
  perspective: calc(1700 * var(--u));
  perspective-origin: 50% 30%;
}
.cr-obj {
  position: absolute;
  left: 50%;
  top: var(--cy, 57%);
  width: 0;
  height: 0;
  transform-style: preserve-3d;
  transform: rotateX(var(--pitch)) rotateY(var(--yaw));
}
.cr-base,
.cr-lid,
.cr-ingot {
  position: absolute;
  transform-style: preserve-3d;
}
.cr-base {
  width: var(--w);
  height: var(--bh);
  left: calc(var(--w) / -2);
  top: calc((var(--lh) - var(--bh)) / 2);
}
.cr-lid {
  width: var(--w);
  height: var(--lh);
  left: calc(var(--w) / -2);
  top: calc((var(--bh) + var(--lh)) / -2);
  transform-origin: 50% 100% calc(var(--d) / -2);
  transform: rotateX(0deg);
  transition: transform 1.15s cubic-bezier(.45,.05,.2,1);
}

.cf {
  position: absolute;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  overflow: hidden;
}
.cf > *, .lt > i, .dial > i { position: absolute; display: block; }

/* Floor shadow (in 3D so it follows rotation) */
.cr-shadow {
  position: absolute;
  width: calc(var(--w) * 1.5);
  height: calc(var(--d) * 1.6);
  left: calc(var(--w) * -0.75);
  top: calc(var(--d) * -0.8);
  transform: translateY(calc((var(--bh) + var(--lh)) / 2 + 1px)) rotateX(90deg);
  background:
    radial-gradient(closest-side, rgba(0,0,0,.55), rgba(0,0,0,.32) 55%, rgba(0,0,0,0) 100%);
  opacity: var(--shadow-o, .8);
}
.cr-shadow::after {
  content: "";
  position: absolute;
  inset: 22% 18%;
  background: radial-gradient(closest-side, rgba(0,0,0,.6), rgba(0,0,0,0));
}

/* Surface helpers --------------------------------------------------------- */
.crate {
  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --metal-v: linear-gradient(180deg, var(--m1) 0%, var(--m2) 22%, var(--m3) 48%, var(--m4) 72%, var(--m2) 90%, var(--m5) 100%);
  --metal-h: linear-gradient(90deg, var(--m4) 0%, var(--m2) 18%, var(--m1) 34%, var(--m3) 58%, var(--m2) 80%, var(--m4) 100%);
  --metal-d: linear-gradient(145deg, var(--m1) 0%, var(--m2) 26%, var(--m3) 52%, var(--m4) 78%, var(--m3) 100%);
  --brush: repeating-linear-gradient(90deg, rgba(255,255,255,.10) 0 1px, rgba(0,0,0,.04) 1px 2px, rgba(255,255,255,0) 2px 4px);
  --shell: linear-gradient(180deg, var(--s1), var(--s2));
}
.shell {
  background-color: var(--s2);
  background-image: var(--noise), var(--shell);
}
.cr-weave {
  inset: 0;
  opacity: var(--o-weave);
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,.05) 0 calc(2.2 * var(--u)), rgba(255,255,255,0) calc(2.2 * var(--u)) calc(4.4 * var(--u))),
    repeating-linear-gradient(-45deg, rgba(0,0,0,.35) 0 calc(2.2 * var(--u)), rgba(0,0,0,0) calc(2.2 * var(--u)) calc(4.4 * var(--u)));
}
.cr-grain {
  inset: 0;
  opacity: var(--o-grain);
  background:
    radial-gradient(circle at 30% 40%, rgba(255,255,255,.05) 0 .6px, transparent 1px) 0 0 / calc(3 * var(--u)) calc(3 * var(--u)),
    radial-gradient(circle at 70% 60%, rgba(0,0,0,.4) 0 .6px, transparent 1px) 0 0 / calc(2.6 * var(--u)) calc(2.6 * var(--u));
}
/* face lighting overlays */
.shade { inset: 0; pointer-events: none; }
.cb-front .shade, .cl-front .shade {
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,0) 30%, rgba(0,0,0,.22) 100%);
}
.cb-right .shade, .cl-right .shade { background: linear-gradient(90deg, rgba(0,0,0,.36), rgba(0,0,0,.52)); }
.cb-left .shade, .cl-left .shade { background: linear-gradient(90deg, rgba(255,255,255,.04), rgba(0,0,0,.1)); }
.cl-top .shade {
  background:
    radial-gradient(120% 90% at 30% 20%, rgba(255,255,255,.14), rgba(255,255,255,0) 55%),
    linear-gradient(180deg, rgba(0,0,0,.1), rgba(255,255,255,.05));
}

/* Base: outer faces ------------------------------------------------------ */
.cb-front { width: var(--w); height: var(--bh); left: 0; top: 0; transform: translateZ(calc(var(--d) / 2 + .4 * var(--u))); overflow: visible; }
.cb-back  { width: var(--w); height: var(--bh); left: 0; top: 0; transform: translateZ(calc(var(--d) / -2)) rotateY(180deg); }
.cb-right { width: var(--d); height: var(--bh); left: calc((var(--w) - var(--d)) / 2); top: 0; transform: translateX(calc(var(--w) / 2)) rotateY(90deg); }
.cb-left  { width: var(--d); height: var(--bh); left: calc((var(--w) - var(--d)) / 2); top: 0; transform: translateX(calc(var(--w) / -2)) rotateY(-90deg); }
.cb-bottom { width: var(--w); height: var(--d); left: 0; top: calc((var(--bh) - var(--d)) / 2); transform: translateY(calc(var(--bh) / 2)) rotateX(-90deg); background: var(--s2); }

/* Base: interior ---------------------------------------------------------- */
.cb-in { background-color: var(--ln2); }
.cb-in-front { width: calc(var(--w) - 2 * var(--t)); height: var(--ih); left: var(--t); top: 0; transform: translateZ(calc(var(--d) / 2 - var(--t))) rotateY(180deg); }
.cb-in-back  { width: calc(var(--w) - 2 * var(--t)); height: var(--ih); left: var(--t); top: 0; transform: translateZ(calc(var(--d) / -2 + var(--t))); }
.cb-in-left  { width: calc(var(--d) - 2 * var(--t)); height: var(--ih); left: calc((var(--w) - var(--d)) / 2 + var(--t)); top: 0; transform: translateX(calc(var(--w) / -2 + var(--t))) rotateY(90deg); }
.cb-in-right { width: calc(var(--d) - 2 * var(--t)); height: var(--ih); left: calc((var(--w) - var(--d)) / 2 + var(--t)); top: 0; transform: translateX(calc(var(--w) / 2 - var(--t))) rotateY(-90deg); }
.cb-in-back, .cb-in-front, .cb-in-left, .cb-in-right {
  background-image:
    linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.1) 40%, rgba(255,255,255,.03)),
    radial-gradient(circle, rgba(255,255,255,.05) 0 34%, rgba(255,255,255,0) 36%),
    linear-gradient(var(--ln1), var(--ln2));
  background-size: 100% 100%, calc(9 * var(--u)) calc(9 * var(--u)), 100% 100%;
}
.cb-in-right, .cb-in-left { filter: brightness(.8); }
.cb-floor {
  width: calc(var(--w) - 2 * var(--t));
  height: calc(var(--d) - 2 * var(--t));
  left: var(--t);
  top: calc(var(--ih) - (var(--d) - 2 * var(--t)) / 2);
  transform: rotateX(90deg);
  background-color: var(--ln1);
  background-image:
    radial-gradient(70% 70% at 50% 45%, rgba(255,255,255,calc(.04 + var(--glow, 0) * .16)), rgba(255,255,255,0) 70%),
    radial-gradient(circle, rgba(255,255,255,.06) 0 34%, rgba(0,0,0,0) 36%),
    linear-gradient(var(--ln1), var(--ln2));
  background-size: 100% 100%, calc(9 * var(--u)) calc(9 * var(--u)), 100% 100%;
}
.fl-slot {
  left: 23%; right: 23%; top: 30%; bottom: 30%;
  border-radius: calc(4 * var(--u));
  background: rgba(0,0,0,.55);
  box-shadow: inset 0 calc(3 * var(--u)) calc(6 * var(--u)) rgba(0,0,0,.7), 0 0 0 calc(1 * var(--u)) rgba(255,255,255,.05);
}
.cb-rim { background: linear-gradient(90deg, var(--s1), var(--s2)); }
.cb-rim-f { width: var(--w); height: var(--t); left: 0; top: calc(var(--t) / -2); transform: translateZ(calc(var(--d) / 2 - var(--t) / 2)) rotateX(90deg); }
.cb-rim-b { width: var(--w); height: var(--t); left: 0; top: calc(var(--t) / -2); transform: translateZ(calc(var(--d) / -2 + var(--t) / 2)) rotateX(90deg); }
.cb-rim-l { width: var(--t); height: var(--d); left: 0; top: calc(var(--d) / -2); transform: rotateX(90deg); }
.cb-rim-r { width: var(--t); height: var(--d); left: calc(var(--w) - var(--t)); top: calc(var(--d) / -2); transform: rotateX(90deg); }
.cb-rim::after {
  content: ""; position: absolute; inset: 0;
  background: var(--metal-h);
  opacity: calc(var(--o-rail) * .85);
}

/* Lid faces --------------------------------------------------------------- */
.cl-top   { width: var(--w); height: var(--d); left: 0; top: calc((var(--lh) - var(--d)) / 2); transform: translateY(calc(var(--lh) / -2)) rotateX(90deg); border-radius: calc(5 * var(--u)); }
.cl-front { width: var(--w); height: var(--lh); left: 0; top: 0; transform: translateZ(calc(var(--d) / 2)); }
.cl-back  { width: var(--w); height: var(--lh); left: 0; top: 0; transform: translateZ(calc(var(--d) / -2)) rotateY(180deg); }
.cl-right { width: var(--d); height: var(--lh); left: calc((var(--w) - var(--d)) / 2); top: 0; transform: translateX(calc(var(--w) / 2)) rotateY(90deg); }
.cl-left  { width: var(--d); height: var(--lh); left: calc((var(--w) - var(--d)) / 2); top: 0; transform: translateX(calc(var(--w) / -2)) rotateY(-90deg); }
.cl-under {
  width: var(--w); height: var(--d); left: 0; top: calc((var(--lh) - var(--d)) / 2);
  transform: translateY(calc(var(--lh) / 2)) rotateX(-90deg);
  background: linear-gradient(90deg, var(--s2), var(--s1) 50%, var(--s2));
}
.cl-under .lining {
  inset: var(--t);
  border-radius: calc(3 * var(--u));
  background-color: var(--ln1);
  background-image:
    radial-gradient(circle, rgba(255,255,255,.07) 0 30%, rgba(0,0,0,0) 33%),
    radial-gradient(circle at 50% 50%, rgba(0,0,0,.35), rgba(0,0,0,0) 60%),
    linear-gradient(180deg, var(--ln1), var(--ln2));
  background-size: calc(10 * var(--u)) calc(10 * var(--u)), 100% 100%, 100% 100%;
  box-shadow: inset 0 0 calc(14 * var(--u)) rgba(0,0,0,.7);
}
.cl-under .lining::after {
  /* tier piping around the lid lining */
  content: ""; position: absolute; inset: calc(6 * var(--u));
  border: calc(1.2 * var(--u)) solid var(--m3);
  border-radius: calc(2 * var(--u));
  opacity: calc(.2 + var(--o-pin) * .6);
}
.cl-under .lid-badge {
  left: 50%; top: 50%;
  width: calc(56 * var(--u)); height: calc(14 * var(--u));
  transform: translate(-50%, -50%);
  border-radius: calc(2 * var(--u));
  background: var(--metal-v);
  box-shadow: 0 calc(1 * var(--u)) calc(2 * var(--u)) rgba(0,0,0,.6);
  font: 600 calc(6.5 * var(--u)) / calc(14 * var(--u)) var(--font-sans);
  letter-spacing: .22em;
  text-align: center;
  color: var(--m5);
  text-indent: .22em;
}

/* Rails, guards, ribs ---------------------------------------------------- */
.rail {
  left: 0; right: 0;
  height: calc(10 * var(--u));
  background-image: var(--brush), var(--metal-v);
  opacity: var(--o-rail);
  box-shadow: 0 calc(1 * var(--u)) calc(2 * var(--u)) rgba(0,0,0,.45);
}
.rail::after {
  content: ""; position: absolute; left: 0; right: 0; top: 46%;
  height: calc(1 * var(--u));
  background: rgba(0,0,0,.35);
  box-shadow: 0 calc(1 * var(--u)) 0 rgba(255,255,255,.35);
}
.rail-top { top: 0; }
.rail-bot { bottom: 0; }
.gasket {
  left: 0; right: 0; height: calc(3 * var(--u));
  background: linear-gradient(180deg, #000, #222 60%, #000);
  opacity: calc(1 - var(--o-rail));
}
.gasket.g-top { top: 0; }
.gasket.g-bot { bottom: 0; }
.vrail {
  top: 0; bottom: 0;
  width: calc(8 * var(--u));
  background-image: var(--brush), var(--metal-h);
  opacity: var(--o-vrail);
  box-shadow: 0 0 calc(2 * var(--u)) rgba(0,0,0,.5);
}
.vrail.v-l { left: 0; }
.vrail.v-r { right: 0; }

.guard {
  width: calc(26 * var(--u));
  height: calc(26 * var(--u));
  background: var(--metal-d);
  opacity: var(--o-guard);
  clip-path: polygon(0 0, 40% 0, 40% 60%, 100% 60%, 100% 100%, 0 100%);
  border-bottom-left-radius: calc(6 * var(--u));
  filter: drop-shadow(0 0 1px rgba(0,0,0,.6));
}
.guard::after {
  content: ""; position: absolute;
  left: 13%; bottom: 13%;
  width: calc(4 * var(--u)); height: calc(4 * var(--u));
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, var(--m1), var(--m4) 70%);
  box-shadow: 0 0 0 calc(.6 * var(--u)) rgba(0,0,0,.35);
}
.guard.g-bl { left: 0; bottom: 0; }
.guard.g-br { right: 0; bottom: 0; transform: scaleX(-1); }
.guard.g-tl { left: 0; top: 0; transform: scaleY(-1); }
.guard.g-tr { right: 0; top: 0; transform: scale(-1, -1); }

.ribs {
  left: calc(10 * var(--u)); right: calc(10 * var(--u));
  bottom: calc(14 * var(--u));
  height: calc(22 * var(--u));
  opacity: var(--o-ribs);
  background: repeating-linear-gradient(180deg,
    rgba(255,255,255,.09) 0 calc(1 * var(--u)),
    rgba(0,0,0,.45) calc(1 * var(--u)) calc(2.4 * var(--u)),
    rgba(0,0,0,0) calc(2.4 * var(--u)) calc(7.5 * var(--u)));
}
.pin {
  inset: calc(9 * var(--u)) calc(9 * var(--u)) calc(9 * var(--u)) calc(9 * var(--u));
  border: calc(1 * var(--u)) solid var(--m3);
  border-radius: calc(3 * var(--u));
  opacity: calc(var(--o-pin) * .75);
}
.cb-front .pin { top: calc(16 * var(--u)); }

/* Latches ---------------------------------------------------------------- */
.lt {
  top: calc(-14 * var(--u));
  left: var(--x);
  width: calc(24 * var(--u));
  height: calc(46 * var(--u));
  margin-left: calc(-12 * var(--u));
  z-index: 3;
}
.lt.l3, .lt.l4 { opacity: var(--o-l34); }
.lt-base {
  left: calc(1 * var(--u)); right: calc(1 * var(--u));
  top: calc(16 * var(--u)); bottom: 0;
  border-radius: calc(3 * var(--u)) calc(3 * var(--u)) calc(5 * var(--u)) calc(5 * var(--u));
  background: var(--metal-d);
  box-shadow: 0 calc(1.5 * var(--u)) calc(3 * var(--u)) rgba(0,0,0,.6), inset 0 0 0 calc(.6 * var(--u)) rgba(255,255,255,.25);
}
.lt-base::after {
  /* hinge pin */
  content: ""; position: absolute; left: 12%; right: 12%; bottom: calc(5 * var(--u));
  height: calc(4 * var(--u));
  border-radius: calc(2 * var(--u));
  background: linear-gradient(180deg, var(--m1), var(--m4));
  box-shadow: 0 calc(.6 * var(--u)) 0 rgba(0,0,0,.4);
}
.lt-lever {
  left: calc(3 * var(--u)); right: calc(3 * var(--u));
  top: 0; bottom: calc(7 * var(--u));
  border-radius: calc(4 * var(--u)) calc(4 * var(--u)) calc(2 * var(--u)) calc(2 * var(--u));
  background-image: var(--brush), var(--metal-v);
  box-shadow: 0 calc(2 * var(--u)) calc(3 * var(--u)) rgba(0,0,0,.55), inset 0 calc(.8 * var(--u)) 0 rgba(255,255,255,.55), inset 0 calc(-.8 * var(--u)) 0 rgba(0,0,0,.3);
  transform-origin: 50% 100%;
  transition: transform .45s cubic-bezier(.5,0,.2,1), filter .45s;
}
.lt-lever::before {
  /* hook lip */
  content: ""; position: absolute; left: 18%; right: 18%; top: calc(3 * var(--u));
  height: calc(3 * var(--u));
  border-radius: calc(1.5 * var(--u));
  background: rgba(0,0,0,.35);
  box-shadow: 0 calc(.7 * var(--u)) 0 rgba(255,255,255,.4);
}
.lt-lever::after {
  /* keyhole */
  content: ""; position: absolute; left: 50%; top: 52%;
  width: calc(3.4 * var(--u)); height: calc(6 * var(--u));
  margin-left: calc(-1.7 * var(--u));
  border-radius: calc(1.7 * var(--u)) calc(1.7 * var(--u)) calc(.6 * var(--u)) calc(.6 * var(--u));
  background: radial-gradient(circle at 50% 30%, #000 0 40%, #111 41%);
  opacity: var(--o-key);
  box-shadow: 0 0 0 calc(.8 * var(--u)) rgba(255,255,255,.25);
}
.catch {
  bottom: calc(-1 * var(--u));
  left: var(--x);
  width: calc(20 * var(--u));
  margin-left: calc(-10 * var(--u));
  height: calc(10 * var(--u));
  border-radius: calc(2 * var(--u)) calc(2 * var(--u)) 0 0;
  background: var(--metal-v);
  box-shadow: 0 0 calc(2 * var(--u)) rgba(0,0,0,.6);
}
.catch.l3, .catch.l4 { opacity: var(--o-l34); }

/* Combination wheels */
.combo {
  top: calc(9 * var(--u));
  left: var(--x);
  width: calc(28 * var(--u));
  height: calc(17 * var(--u));
  margin-left: calc(-14 * var(--u));
  border-radius: calc(3 * var(--u));
  background: linear-gradient(180deg, #060606, #1b1b1b);
  box-shadow:
    0 0 0 calc(1.4 * var(--u)) var(--m3),
    0 0 0 calc(2 * var(--u)) var(--m5),
    0 calc(2 * var(--u)) calc(3 * var(--u)) rgba(0,0,0,.6),
    inset 0 calc(1.5 * var(--u)) calc(2 * var(--u)) rgba(0,0,0,.8);
  opacity: var(--o-combo);
  display: flex;
  gap: calc(1.2 * var(--u));
  padding: calc(2.2 * var(--u)) calc(2.6 * var(--u));
}
.combo i {
  position: relative;
  flex: 1;
  border-radius: calc(1 * var(--u));
  background:
    linear-gradient(180deg, rgba(0,0,0,.75), rgba(0,0,0,0) 30%, rgba(0,0,0,0) 70%, rgba(0,0,0,.75)),
    repeating-linear-gradient(180deg, var(--m2) 0 calc(.9 * var(--u)), var(--m4) calc(.9 * var(--u)) calc(1.8 * var(--u)));
  background-size: 100% 100%, 100% calc(14 * var(--u));
  transition: background-position .7s cubic-bezier(.4,0,.2,1);
}
.combo i::after {
  content: "0";
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font: 700 calc(7 * var(--u)) / 1 var(--font-sans);
  color: #111;
  text-shadow: 0 0 calc(1 * var(--u)) rgba(255,255,255,.6);
}
.combo i:nth-child(2)::after { content: "7"; }
.combo i:nth-child(3)::after { content: "3"; }

/* ID plate --------------------------------------------------------------- */
.plate {
  left: 50%;
  top: calc(var(--bh) * .2);
  min-width: calc(108 * var(--u));
  height: calc(40 * var(--u));
  transform: translateX(-50%);
  border-radius: calc(3.5 * var(--u));
  background-image: var(--brush), var(--metal-d);
  box-shadow:
    0 calc(1.5 * var(--u)) calc(3 * var(--u)) rgba(0,0,0,.6),
    inset 0 calc(.8 * var(--u)) 0 rgba(255,255,255,.6),
    inset 0 calc(-.8 * var(--u)) 0 rgba(0,0,0,.35);
  display: flex;
  align-items: center;
  gap: calc(6 * var(--u));
  padding: 0 calc(15 * var(--u)) 0 calc(8 * var(--u));
  white-space: nowrap;
}
.plate::before, .plate::after {
  content: ""; position: absolute; top: 50%;
  width: calc(3 * var(--u)); height: calc(3 * var(--u)); margin-top: calc(-1.5 * var(--u));
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, var(--m1), var(--m5));
}
.plate::before { left: calc(2.5 * var(--u)); }
.plate::after { right: calc(2.5 * var(--u)); }
.pl-mark {
  position: relative;
  flex: none;
  width: calc(24 * var(--u));
  height: calc(24 * var(--u));
  border-radius: calc(2.5 * var(--u));
  background: #141617;
  box-shadow: inset 0 0 0 calc(1 * var(--u)) rgba(0,0,0,.6), 0 calc(.7 * var(--u)) 0 rgba(255,255,255,.4);
  overflow: hidden;
}
.pl-mark img {
  position: absolute; inset: calc(2.5 * var(--u));
  width: calc(100% - 5 * var(--u)); height: auto;
  opacity: var(--o-logo);
}
.pl-mark b {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font: 400 calc(13 * var(--u)) / 1 var(--font-crt);
  color: #5cb26f;
  text-shadow: 0 0 calc(4 * var(--u)) rgba(92,178,111,.75);
  letter-spacing: .02em;
  opacity: var(--o-screen);
  background:
    repeating-linear-gradient(180deg, rgba(255,255,255,.04) 0 1px, rgba(0,0,0,0) 1px 3px),
    radial-gradient(circle at 50% 40%, #1c2a20, #0b0f0c);
}
.pl-text { position: relative; display: flex; flex-direction: column; gap: calc(2 * var(--u)); min-width: 0; }
.pl-k {
  font: 600 calc(5.6 * var(--u)) / 1 var(--font-sans);
  letter-spacing: .2em;
  color: var(--m5);
  text-shadow: 0 calc(.6 * var(--u)) 0 rgba(255,255,255,.45);
  white-space: nowrap;
}
.pl-tier {
  font: 650 calc(13 * var(--u)) / 1 var(--font-sans);
  letter-spacing: .12em;
  color: var(--m5);
  text-shadow: 0 calc(.8 * var(--u)) 0 rgba(255,255,255,.55), 0 calc(-.5 * var(--u)) 0 rgba(0,0,0,.25);
  white-space: nowrap;
}

/* status lamp: a single square pixel, like the power light in the OTC mark */
.lamp-px {
  left: 50%;
  top: calc(var(--bh) * .2 + 46 * var(--u));
  width: calc(5 * var(--u));
  height: calc(5 * var(--u));
  margin-left: calc(-2.5 * var(--u));
  background: #bc0108;
  box-shadow: 0 0 calc(4 * var(--u)) rgba(188,1,8,.7), inset 0 0 0 calc(.6 * var(--u)) rgba(0,0,0,.3);
  transition: background .3s, box-shadow .3s;
}

/* Vault dial (platinum) */
.dial {
  left: 50%;
  bottom: calc(14 * var(--u));
  width: calc(44 * var(--u));
  height: calc(44 * var(--u));
  margin-left: calc(-22 * var(--u));
  border-radius: 50%;
  opacity: var(--o-dial);
  background:
    repeating-conic-gradient(from 0deg, rgba(0,0,0,.55) 0 1.4deg, rgba(0,0,0,0) 1.4deg 9deg),
    radial-gradient(circle, var(--m2) 0 58%, var(--m4) 60%, var(--m1) 66%, var(--m3) 74%, var(--m5) 100%);
  box-shadow: 0 calc(2 * var(--u)) calc(4 * var(--u)) rgba(0,0,0,.7), inset 0 0 0 calc(1 * var(--u)) rgba(255,255,255,.3);
}
.dial-knob {
  inset: 22%;
  border-radius: 50%;
  background:
    repeating-conic-gradient(from 0deg, var(--m1) 0 6deg, var(--m4) 6deg 12deg);
  box-shadow: 0 calc(1.5 * var(--u)) calc(3 * var(--u)) rgba(0,0,0,.7), inset 0 0 0 calc(1.2 * var(--u)) rgba(0,0,0,.25);
  transition: transform 1.1s cubic-bezier(.4,0,.2,1);
}
.dial-knob::after {
  content: ""; position: absolute; inset: 24%;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, var(--m1), var(--m3) 60%, var(--m4));
}
.dial-idx {
  left: 50%; top: calc(-2.5 * var(--u));
  width: 0; height: 0;
  margin-left: calc(-2.5 * var(--u));
  border-left: calc(2.5 * var(--u)) solid transparent;
  border-right: calc(2.5 * var(--u)) solid transparent;
  border-top: calc(4 * var(--u)) solid #a3e635;
}

.marks {
  left: calc(14 * var(--u));
  bottom: calc(5 * var(--u));
  font: 600 calc(4.6 * var(--u)) / 1 var(--font-sans);
  letter-spacing: .28em;
  color: rgba(255,255,255,.28);
  opacity: var(--o-marks);
  white-space: nowrap;
}
.marks.m-r { left: auto; right: calc(14 * var(--u)); }

/* Lid top details */
.emblem {
  left: 50%; top: 50%;
  width: calc(46 * var(--u)); height: calc(46 * var(--u));
  margin: calc(-23 * var(--u)) 0 0 calc(-23 * var(--u));
  border-radius: calc(7 * var(--u));
  background: linear-gradient(145deg, rgba(0,0,0,.35), rgba(255,255,255,.04));
  box-shadow: inset 0 calc(1.5 * var(--u)) calc(3 * var(--u)) rgba(0,0,0,.6), 0 calc(1 * var(--u)) 0 rgba(255,255,255,.06);
}
.emblem::before {
  content: ""; position: absolute; inset: calc(-5 * var(--u));
  border-radius: calc(10 * var(--u));
  border: calc(1.6 * var(--u)) solid var(--m2);
  opacity: var(--o-ring);
}
.emblem img { position: absolute; inset: calc(8 * var(--u)); width: calc(100% - 16 * var(--u)); height: auto; filter: saturate(.9); }
.lid-panel {
  inset: calc(12 * var(--u));
  border-radius: calc(5 * var(--u));
  box-shadow: inset 0 0 0 calc(1 * var(--u)) rgba(255,255,255,.05), inset 0 calc(2 * var(--u)) calc(5 * var(--u)) rgba(0,0,0,.35);
}
.handle {
  left: 50%;
  bottom: calc(14 * var(--u));
  width: calc(96 * var(--u));
  height: calc(12 * var(--u));
  margin-left: calc(-48 * var(--u));
  opacity: var(--o-handle);
}
.handle::before {
  content: ""; position: absolute; inset: calc(3 * var(--u)) calc(8 * var(--u));
  border-radius: calc(3 * var(--u));
  background-image: var(--brush), var(--metal-v);
  box-shadow: 0 calc(2 * var(--u)) calc(3 * var(--u)) rgba(0,0,0,.6);
}
.handle i {
  position: absolute; top: 0; bottom: 0; width: calc(14 * var(--u));
  border-radius: calc(3 * var(--u));
  background: var(--metal-d);
  box-shadow: 0 calc(1 * var(--u)) calc(2 * var(--u)) rgba(0,0,0,.6);
}
.handle i:first-child { left: 0; }
.handle i:last-child { right: 0; }
.top-mark {
  left: 50%; top: calc(16 * var(--u));
  transform: translateX(-50%);
  font: 600 calc(5 * var(--u)) / 1 var(--font-sans);
  letter-spacing: .34em;
  color: rgba(255,255,255,.22);
  white-space: nowrap;
}

/* Ingot: the tier plate revealed inside -------------------------------- */
.cr-ingot {
  width: calc(var(--w) * .46);
  height: calc(var(--d) * .34);
  left: calc(var(--w) * .27);
  top: calc(var(--ih) - var(--d) * .17 - 4 * var(--u));
  transform: translate3d(0, 0, 0) rotateX(90deg);
  transition: transform 1s cubic-bezier(.25,.8,.25,1);
}
.ig-face {
  inset: 0;
  border-radius: calc(4 * var(--u));
  background-image: var(--brush), var(--metal-d);
  box-shadow: inset 0 calc(1 * var(--u)) 0 rgba(255,255,255,.7), inset 0 calc(-1 * var(--u)) 0 rgba(0,0,0,.3);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: calc(4 * var(--u));
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.ig-face > span { position: static; }
.ig-face .ig-k {
  font: 600 calc(6 * var(--u)) / 1 var(--font-sans);
  letter-spacing: .3em; color: var(--m5);
  text-shadow: 0 calc(.6 * var(--u)) 0 rgba(255,255,255,.5);
}
.ig-face .ig-t {
  font: 650 calc(17 * var(--u)) / 1 var(--font-sans);
  letter-spacing: .14em; color: var(--m5);
  text-shadow: 0 calc(1 * var(--u)) 0 rgba(255,255,255,.6);
}
.ig-face .ig-n {
  font: 600 calc(4.6 * var(--u)) / 1 var(--font-sans);
  letter-spacing: .32em; color: var(--m4);
  margin-top: calc(2 * var(--u));
  padding: calc(2 * var(--u)) calc(4 * var(--u));
  border-top: calc(.6 * var(--u)) solid var(--m3);
}
.ig-edge {
  left: 0; right: 0; bottom: 0;
  height: calc(6 * var(--u));
  transform-origin: 50% 100%;
  transform: rotateX(-90deg);
  background: linear-gradient(180deg, var(--m3), var(--m5));
  border-radius: 0 0 calc(2 * var(--u)) calc(2 * var(--u));
}

/* Interior glow (2D, above the scene) */
.cr-glow {
  position: absolute;
  left: 50%; top: var(--cy, 57%);
  width: calc(var(--w) * 1.2);
  height: calc(var(--d) * 1.1);
  margin: calc(var(--d) * -0.9) 0 0 calc(var(--w) * -0.6);
  border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--m2) 55%, transparent), transparent);
  mix-blend-mode: screen;
  opacity: 0;
  transition: opacity .9s ease;
  pointer-events: none;
}

/* States ------------------------------------------------------------------ */
.crate.is-unlatched .lt-lever { transform: perspective(calc(60 * var(--u))) rotateX(-68deg); filter: brightness(.82); }
.crate.is-unlatched .lamp-px { background: #a3e635; box-shadow: 0 0 calc(5 * var(--u)) rgba(163,230,53,.85), inset 0 0 0 calc(.6 * var(--u)) rgba(0,0,0,.2); }
.crate.is-unlatched .dial-knob { transform: rotate(-260deg); }
.crate.is-unlatched .combo i { background-position: 0 0, 0 calc(9 * var(--u)); }
.crate.is-unlatched .combo i:nth-child(2) { background-position: 0 0, 0 calc(-5 * var(--u)); }
.crate.is-open .cr-lid { transform: rotateX(106deg); }
.crate.is-open .cr-glow { opacity: .55; }
.crate.is-open { --glow: 1; }
.crate.is-revealed .cr-ingot {
  transform: translate3d(0, calc(-1 * (var(--ih) + var(--d) * .2 + 12 * var(--u))), calc(var(--d) * .14)) rotateX(8deg);
}
.crate.is-revealed .cr-ingot { transition-delay: .05s; }

/* Hide interior while closed so nothing can peek through seams */
.crate:not(.is-open):not(.is-opening) .cb-in,
.crate:not(.is-open):not(.is-opening) .cb-floor,
.crate:not(.is-open):not(.is-opening) .cr-ingot { visibility: hidden; }

/* Interaction states ------------------------------------------------------ */
.crate.no-ease { transition: none !important; }
.crate.bump .cr-scene { animation: crate-bump .55s cubic-bezier(.3,.7,.2,1); }
@keyframes crate-bump {
  0% { transform: scale(.975) translateY(2px); }
  100% { transform: none; }
}

/* Idle motion for the hero crate: a slow, small turn on the compositor */
[data-idle] .cr-obj { animation: crate-idle 10s ease-in-out infinite alternate; }
[data-idle] .crate.is-paused .cr-obj { animation-play-state: paused; }
@keyframes crate-idle {
  0% { transform: rotateX(-17deg) rotateY(-29deg); }
  100% { transform: rotateX(-15deg) rotateY(-17deg); }
}
@media (prefers-reduced-motion: reduce) {
  [data-idle] .cr-obj { animation: none; }
}

/* Static fallback image inside a frame, replaced once the live crate mounts */
.crate-frame > img.crate-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
}
.crate-frame.is-live > img.crate-img { display: none; }