/* VAULT SKIN — loaded after styles.css and overrides the base layout.
   Brass marks what you can touch; engraved capitals label the plates; steel is the ground. */
body::after{opacity:.035}
.label{font-family:var(--display);font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
th{font-family:var(--display);font-size:13px;font-weight:600;letter-spacing:.12em}
.chart text{font-family:var(--body);font-size:11px}

/* ticker */
.tape{background:#101315;border-bottom-color:var(--rule)}
.tape-item{font:500 12px var(--body);border-right-color:var(--rule);align-items:center}
.tape-item b{font:700 13px var(--display);letter-spacing:.06em}

/* header */
.bar-shell{background:color-mix(in srgb,var(--paper) 90%,transparent)}
.logo{font:800 26px var(--display);letter-spacing:.06em;align-items:center;gap:10px}
.logo small{font:600 12px var(--display);letter-spacing:.18em;color:var(--accent)}
.mark{width:22px;height:22px;border-radius:50%;border:2px solid var(--accent);position:relative;flex:none}
.mark::before{content:"";position:absolute;left:50%;top:4px;width:5px;height:5px;border-radius:50%;background:var(--accent);transform:translateX(-50%)}
.mark::after{content:"";position:absolute;left:50%;top:8px;width:2px;height:6px;background:var(--accent);transform:translateX(-50%)}
.nav a{font:600 15px var(--display);letter-spacing:.08em;text-transform:uppercase}
.tool{font:600 12px var(--display);letter-spacing:.1em;text-transform:uppercase}

/* hero */
.hero{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:48px;padding-block:56px 36px;align-items:center}
.hero h1{font-family:var(--display);font-weight:800;font-size:clamp(56px,8.4vw,112px);line-height:.88;letter-spacing:.005em}
.hero h1 em{color:var(--accent)}
.hero p{font-size:17px;line-height:1.6;color:#B4AE9F;max-width:40ch}
.navbox{border-top:1px solid var(--rule);padding-top:20px;gap:14px}
.nav-price{font-family:var(--display);font-weight:800;font-size:clamp(52px,6vw,76px);letter-spacing:.01em}
.nav-row .num{font:600 18px var(--body)}
.chip{font:500 12px var(--body);border-color:var(--rule);color:var(--muted)}
.cta-brass{font:800 16px var(--display);letter-spacing:.14em;text-transform:uppercase;text-decoration:none;color:var(--accent-ink);background:var(--accent);padding:12px 20px;border-radius:4px;border:0;cursor:pointer;display:inline-flex;align-items:center;gap:10px;transition:background .2s}
.cta-brass:hover{background:#E6C984}
.replay-btn{font:700 15px var(--display);letter-spacing:.12em;text-transform:uppercase;border:1.5px solid var(--accent);color:var(--accent);border-radius:4px;padding:10px 16px}
.replay-btn:hover{background:var(--accent);color:var(--accent-ink)}
.pill{font:600 13px var(--display);letter-spacing:.1em;text-transform:uppercase;border-color:var(--rule);color:var(--ink)}
.quick button{font:500 12px var(--body)}

/* the deposit boxes */
.vault-front{position:relative;background:var(--panel);background-image:var(--steel);border:1px solid var(--rule);border-radius:12px;padding:18px;box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 30px 60px -30px #000}
.vault-front::before,.vault-front::after{content:"";position:absolute;width:7px;height:7px;border-radius:50%;background:#3C4248;box-shadow:inset 0 1px 1px rgba(0,0,0,.6)}
.vault-front::before{left:9px;top:9px}
.vault-front::after{right:9px;bottom:9px}
.vault-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.boxes{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;perspective:900px}
.box{position:relative;aspect-ratio:1/1.12;border:0;padding:0;background:#101315;border-radius:6px;cursor:pointer;color:var(--ink);font:inherit;text-align:left}
.box .inside{position:absolute;inset:0;padding:10px;display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start;border-radius:6px;background:radial-gradient(circle at 50% 30%,#1E2328,#0E1012 75%)}
.box .inside img{width:38%;max-width:44px;aspect-ratio:1;border-radius:50%;object-fit:cover;box-shadow:0 0 0 2px var(--accent)}
.box .inside b{font:700 14px var(--display);letter-spacing:.04em}
.box .inside small{font:500 11px var(--body);color:var(--muted);display:block}
.box .door{position:absolute;inset:0;border-radius:6px;padding:9px 10px;display:flex;flex-direction:column;justify-content:space-between;background:var(--cell);background-image:var(--steel);border:1px solid #444B52;box-shadow:inset 0 1px 0 rgba(255,255,255,.06),inset 0 -2px 0 rgba(0,0,0,.25);transform-origin:left center;transition:transform .55s cubic-bezier(.3,.7,.2,1),box-shadow .3s;backface-visibility:hidden;z-index:1}
.box:hover .door,.box:focus-visible .door{transform:rotateY(-78deg);box-shadow:8px 0 18px rgba(0,0,0,.5)}
.door .no{font:600 11px var(--display);letter-spacing:.14em;color:var(--muted);display:flex;justify-content:space-between;align-items:center}
.door .kh{width:9px;height:9px;border-radius:50%;border:1.5px solid var(--brass-2)}
.door b{font:800 clamp(13px,1.35vw,17px) var(--display);letter-spacing:.04em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.door .pct{font:700 13px var(--display);letter-spacing:.06em;color:var(--accent)}
.door .gauge-b{display:block;height:3px;background:#1A1E22;border-radius:2px;overflow:hidden}
.door .gauge-b i{display:block;height:100%;background:var(--accent);transition:width .4s}
.vault-foot2{display:flex;justify-content:space-between;gap:12px;margin-top:14px}

/* basket bar */
.segs{height:84px;border-radius:6px;border:1px solid var(--rule)}
.seg b{font:800 16px var(--display);letter-spacing:.04em}
.seg span{font:600 12px var(--body)}

/* stats */
.stats{border-top:1px solid var(--rule);margin-top:44px}
.stats .big{font-family:var(--display);font-weight:800;color:var(--ink)}
.stats>div:first-child .big{color:var(--accent)}

/* section heads: engraved box plate above a big display title */
section{padding-block:96px 0}
.sec-head{border-bottom:1px solid var(--rule);padding-bottom:14px;align-items:flex-end}
.sec-head h2{font:800 clamp(36px,5vw,58px)/0.95 var(--display);letter-spacing:.01em;flex-direction:column;gap:12px;align-items:flex-start}
.sec-head h2 .idx{font:700 12px var(--display);letter-spacing:.18em;color:var(--accent);border:1px solid var(--brass-2);padding:3px 10px;border-radius:3px}
.sec-head h2 .idx::before{content:"Box "}
.lede{font-size:16px;color:#ADA797}
h3.sub{font:800 22px var(--display);letter-spacing:.04em}

/* controls */
.seg-ctl{border-color:var(--rule);background:#101315}
.seg-ctl button{font:600 13px var(--display);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.seg-ctl button[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink)}
select{background:#101315;font:600 13px var(--body)}
input[type=range]{background:#2C3237}
input[type=range]::-webkit-slider-thumb{background:var(--accent);border-color:var(--paper);box-shadow:0 0 0 1px var(--accent)}
input[type=range]::-moz-range-thumb{background:var(--accent)}

/* numbers: display face for big values, body face in tables */
.metric .v,.verdict .v,.count b,.fact .v,.node .num,.route-sum .v{font-family:var(--display);font-weight:800;letter-spacing:.02em}
.metric .v{font-size:30px}
.verdict .v{font-size:38px}
.count b{font-size:38px}
.fact .v{font-size:22px}
td{font:500 14px var(--body);font-variant-numeric:tabular-nums}
td.tk{font:800 17px var(--display);letter-spacing:.04em}
td.tk small{font:400 12px var(--body);letter-spacing:0}
.tk-in{display:flex;align-items:center;gap:10px}
.lg{width:26px;height:26px;border-radius:50%;object-fit:cover;flex:none;background:var(--cell);box-shadow:0 0 0 1px var(--rule)}
.lg.sm{width:18px;height:18px}
.lg.xl{width:56px;height:56px;box-shadow:0 0 0 2px var(--accent)}
tbody tr:hover{background:#1A1E22}
.status{font:700 11px var(--display);letter-spacing:.12em}
.tag{font:600 12px var(--body)}
.legend{font:500 13px var(--body)}
.tip{background:#101315;font:500 12px var(--body)}
.heat div{font-family:var(--body)}
.heat-read{font-family:var(--body)}

/* brushed steel panels */
.ticket,.sim,.verdict,.formula,.count div{background-color:var(--panel);background-image:var(--steel)}
.node{background-color:#101315;background-image:var(--steel)}

/* deposit slip: perforated top and bottom edges */
.ticket{border-radius:4px;padding:28px 22px;
  -webkit-mask:radial-gradient(circle 6px at 8px 0,#0000 98%,#000) top left/16px 51% repeat-x,radial-gradient(circle 6px at 8px 100%,#0000 98%,#000) bottom left/16px 51% repeat-x;
  mask:radial-gradient(circle 6px at 8px 0,#0000 98%,#000) top left/16px 51% repeat-x,radial-gradient(circle 6px at 8px 100%,#0000 98%,#000) bottom left/16px 51% repeat-x}
.inrow{background:#101315;border-color:var(--rule)}
.inrow input{font:800 30px var(--display);letter-spacing:.02em}
.inrow.sm input{font:600 18px var(--body)}
.inrow.addr-in input{font:500 14px var(--mono)}
.inrow span{font:800 18px var(--display);letter-spacing:.08em;color:var(--accent)}
.cta{font:800 16px var(--display);letter-spacing:.14em;text-transform:uppercase}
.cta[disabled]{background:#3A3427;color:#8E7F57;opacity:1}
.cta-sm{background:var(--accent);color:var(--accent-ink);font:800 15px var(--display);letter-spacing:.12em;text-transform:uppercase}
.cta-sm:hover{background:#E6C984;color:var(--accent-ink)}
.leg b,.vault-tbl b,.mix-row b{font:800 16px var(--display);letter-spacing:.04em}
.leg .num,.vault-tbl .num{font:500 14px var(--body)}
.hop{background:#101315;font:500 12px var(--body)}
.verdict .act{font:800 30px var(--display);letter-spacing:.04em}
.step .n{font-family:var(--display);font-weight:800}
.step h3{font:800 24px var(--display);letter-spacing:.04em;text-transform:uppercase}
.formula code{font-family:var(--mono)}
summary{font:700 19px var(--display);letter-spacing:.06em;text-transform:uppercase}
details[open] summary{color:var(--accent)}

/* drawer, palette, toast, replay deck, modal */
.drawer{background:var(--panel);background-image:var(--steel)}
.dr-head h3{font:800 52px/0.9 var(--display);letter-spacing:.02em}
.dr-grid .v{font:800 20px var(--display);letter-spacing:.02em}
.pal-box,.modal-box{background:var(--panel)}
.pal-item.sel{background:var(--accent);color:var(--accent-ink)}
.pal-item.sel small{color:var(--accent-ink)}
.toast{background:var(--accent);color:var(--accent-ink);font:700 14px var(--display);letter-spacing:.08em}
.deck{background:#0E1012;color:var(--ink);border:1px solid var(--brass-2)}
.deck .label{color:var(--muted)}
.deck-date b,.deck-nav b{font:800 20px var(--display);letter-spacing:.04em}
.deck-play{font:800 14px var(--display);letter-spacing:.12em;text-transform:uppercase}
.deck .seg-ctl button{color:var(--muted)}
.deck .seg-ctl button[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink)}
.deck .x{color:var(--ink);border-color:var(--rule)}
.deck input[type=range]{background:linear-gradient(to right,var(--accent) var(--p,0%),#2C3237 var(--p,0%))}

@media (max-width:900px){
  .hero{grid-template-columns:1fr}
  .boxes{gap:6px}
  .box .door{padding:6px}
  .door .pct{font-size:11px}
  .door .kh{display:none}
}
@media (max-width:520px){ .door b{font-size:11px} .door .gauge-b{display:none} .box .inside{padding:6px} .box .inside small{display:none} }
@media (hover:none){ .box:hover .door{transform:none} }
@media (prefers-reduced-motion:reduce){ .box .door{transition:none} }

/* open box: the door swings fully away so the contents read clearly */
.box .door{transition:transform .55s cubic-bezier(.3,.7,.2,1),opacity .12s,box-shadow .3s}
.box:hover .door,.box:focus-visible .door{transform:rotateY(-100deg);opacity:0;transition:transform .55s cubic-bezier(.3,.7,.2,1),opacity .25s .3s,box-shadow .3s}
.box .inside{padding:10px 10px 9px;background:radial-gradient(circle at 30% 20%,#262C31,#111416 80%);box-shadow:inset 0 0 0 1px var(--brass-2)}
.box .inside img{width:34%;max-width:40px}
.box .inside b{font:800 clamp(15px,1.5vw,20px)/1 var(--display);letter-spacing:.02em;color:var(--ink)}
.box .inside small{font:500 11px/1.3 var(--body);color:#B9B3A4}
.box .inside [data-v]{color:var(--accent)}
@media (max-width:900px){ .box .inside{padding:6px} .box .inside b{font-size:13px} }