/* ===== TH-VAULT: the vault device, shared (2026-09-08). Cut out of
   quantum.html so /quantum's Head Start tab 02 and the landing's Three
   Problems panel style ONE drawing (the SVG itself is generated by
   tools/vault-gen.js and lifted into the landing by
   scripts/build-vault-svg.js). quantum.html links this sheet at the
   position the inline block held. All choreography lives in .vt-on
   transition-delays; reduced motion zeroes every transition. */
/* the vault (th-vt): the account is a vault the user owns. The claim:
   signature logic lives in the account contract, not the protocol, so
   upgrading to post-quantum signatures is one transaction. The assets
   never move, the STARKNET plinth is emerald FROM THE START because
   STARK proofs are hash-based and post-quantum by construction, and
   the only weak part is the shell's verifier.
   THE LATTICE IS NOT DECORATION: Falcon-512 is a lattice-based
   signature scheme, so the mesh woven across the shell is literally
   what replaces the elliptic curve. Do not remove it as ornament.
   Color carries the argument: gray assets never change, the emerald
   plinth never changes; only the blue shell and its red weak parts
   (fractures, withdrawn bolts, the ECDSA card) turn emerald. SETTLED
   2026-08-22, do not reopen: the STRK token uses the official Starknet
   mark's exact geometry rendered in the neutral asset gray, not its
   navy-and-coral brand colors, because one exception for our own logo
   would break the neutral-assets rule that makes the color argument
   legible (same colorway rule as Xanadu's color-delegating logo). Line
   weights: silhouette 2.6 / structure 1.7 / detail 1.05 / hairline
   0.6, one hierarchy for the whole drawing.
   Sequencing lives entirely in .vt-on transition-delays: card out at
   0s, card in .3s, plate snaps back .75s, fractures close .9s, bolts
   throw 1.35-1.71s, gauge sweeps 1.9s, shell recolors 2.0s, lattice
   weaves stroke by stroke 2.4-4.6s, the slowest beat because it is
   the payoff. Transitions are declared ONLY under .vt-on, so removing
   the class resets instantly with no reverse animation. */
.th-vt{font-family:'IBM Plex Mono',monospace;}
.th-vt svg{display:block;width:100%;height:auto;}
.th-vt svg text{font-family:'IBM Plex Mono',monospace;}
/* weights */
.vtSil{fill:none;stroke-width:2.6;}
.vtS{fill:none;stroke-width:1.7;}
.vtD{fill:none;stroke-width:1.05;}
.vtH{fill:none;stroke-width:.6;opacity:.75;}
/* shell: blue before, emerald after */
.vtShell .vtSil,.vtShell .vtS,.vtShell .vtD,.vtShell .vtH,.vtGf{stroke:var(--th-q);}
.vt-on .vtShell .vtSil,.vt-on .vtShell .vtS,.vt-on .vtShell .vtD,.vt-on .vtShell .vtH,.vt-on .vtGf{
  stroke:var(--th-green);transition:stroke .6s ease 2s;}
/* plinth: emerald from the start, never was the problem */
.vtP1{fill:color-mix(in srgb,var(--th-green) 7%,transparent);stroke:var(--th-green);stroke-width:1.7;}
.vtP2{fill:color-mix(in srgb,var(--th-green) 3%,transparent);stroke:var(--th-green);stroke-width:1.05;}
.vtPh{stroke:var(--th-green);stroke-width:.6;opacity:.4;}
.vtPlab{fill:var(--th-green);font-size:13px;font-weight:600;letter-spacing:.3em;text-anchor:middle;}
.vtPnote{fill:var(--th-green);opacity:.8;font-size:8px;letter-spacing:.13em;text-anchor:middle;}
/* assets: neutral gray, unchanged throughout */
.vtGf{fill:rgba(250, 250, 250,.02);stroke-width:1.7;}
.vtGl{stroke:rgba(250, 250, 250,.16);stroke-width:.6;}
.vtMk{fill:none;stroke:rgba(250, 250, 250,.66);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;}
.vtMkh{fill:none;stroke:rgba(250, 250, 250,.4);stroke-width:.7;}
/* the three marks are official geometry in the neutral gray colorway
   (see the generator's notes for each one's source and licence). Stroke
   widths are pre-transform, so each is set to render at ~1.4px after
   its own scale: Starknet 1.7 x 0.825, Bitcoin 2.7 x 0.5157. */
.vtStrkDisc{fill:none;stroke:rgba(250, 250, 250,.5);stroke-width:1.93;}
.vtBtcDisc{fill:none;stroke:rgba(250, 250, 250,.5);stroke-width:3.09;}
.vtBtcB{fill:rgba(250, 250, 250,.66);}
/* the hoard: unmarked coins carrying the mass behind the three marked
   ones. Opaque dark fill so near coins genuinely occlude far ones, and
   three weights so the eye lands on the heroes first and reads the bank
   as depth rather than as competing detail. Gray throughout, hero and
   generic alike: the assets are the one thing that never changes color.
   Nothing here animates, in either direction. */
.vtCoin1,.vtCoin2,.vtCoin3,.vtHeroDisc{fill:rgba(11,13,19,.94);}
.vtCoin1{stroke:rgba(250, 250, 250,.5);stroke-width:1.05;}
.vtCoin2{stroke:rgba(250, 250, 250,.30);stroke-width:.85;}
.vtCoin3{stroke:rgba(250, 250, 250,.20);stroke-width:.6;}
.vtEthRing{fill:none;stroke:rgba(250, 250, 250,.5);stroke-width:1.4;}
.vtFloor{fill:none;stroke:rgba(250, 250, 250,.13);stroke-width:.6;}
.vtStrkInk{fill:rgba(250, 250, 250,.66);}
.vtStrkSw{fill:rgba(250, 250, 250,.34);}
.vtNote{fill:rgba(250, 250, 250,.42);font-size:7.5px;letter-spacing:.14em;text-anchor:middle;}
.vtNoteL{text-anchor:start;}
/* the drawing's title: the largest type in the visual, centered above the
   object. Neutral ink on purpose, because the shell recolors on send
   and a blue or emerald title would join an argument it is not part of. */
/* the drawing's heading. HTML, not SVG: the labels inside the drawing
   scale with it because they annotate it, but a heading sits above it
   and has to hold its size, and at 375 the drawing scales by 0.546,
   which turned a 16px SVG title into 8.7px. Same mono, same
   letter-spacing, same neutral ink as the annotation it replaces. */
.th-vt-title{margin:0 0 14px;text-align:center;font-family:'IBM Plex Mono',monospace;
  font-size:13px;font-weight:500;letter-spacing:.18em;color:rgba(250, 250, 250,.6);}
/* bolts: withdrawn and red before; thrown into their sockets, emerald */
.vtSock{fill:none;stroke:rgba(250, 250, 250,.35);stroke-width:.6;}
.vtBolt{fill:color-mix(in srgb,var(--th-red) 16%,transparent);stroke:var(--th-red);stroke-width:1.05;
  transform:translateX(-16px);}
.vt-on .vtBolt{transform:none;fill:color-mix(in srgb,var(--th-green) 14%,transparent);stroke:var(--th-green);
  transition:transform .18s cubic-bezier(.34,1.56,.64,1),stroke .18s ease,fill .18s ease;}
.vt-on .vtBolt0{transition-delay:1.35s;}
.vt-on .vtBolt1{transition-delay:1.47s;}
.vt-on .vtBolt2{transition-delay:1.59s;}
.vt-on .vtBolt3{transition-delay:1.71s;}
/* gauge: real graduations; the needle is the state */
.vtGr{fill:none;stroke:var(--th-red);stroke-width:2;opacity:.85;}
.vtGg{fill:none;stroke:var(--th-green);stroke-width:2;opacity:.85;}
.vtGauge .vtD,.vtGauge .vtH{stroke:var(--th-q);}
.vt-on .vtGauge .vtD,.vt-on .vtGauge .vtH{stroke:var(--th-green);transition:stroke .6s ease 2s;}
.vtNeedle{stroke:rgba(250, 250, 250,.9);stroke-width:1.6;stroke-linecap:round;
  transform-origin:150px 430px;transform:rotate(-97deg);}
.vt-on .vtNeedle{transform:rotate(97deg);transition:transform .55s cubic-bezier(.34,1.56,.64,1) 1.9s;}
/* verifier cards: the one module that swaps */
.vtCr{fill:color-mix(in srgb,var(--th-red) 9%,transparent);stroke:var(--th-red);stroke-width:1.05;}
.vtCrH{fill:none;stroke:var(--th-red);stroke-width:.7;opacity:.8;}
.vtCg{fill:color-mix(in srgb,var(--th-green) 9%,transparent);stroke:var(--th-green);stroke-width:1.05;}
.vtCgH{fill:none;stroke:var(--th-green);stroke-width:.7;opacity:.8;}
.vtCwho{fill:rgba(250, 250, 250,.5);font-size:5.8px;letter-spacing:.12em;}
.vtCname{font-size:13px;font-weight:700;}
.vtCnameR{fill:var(--th-red);}
.vtCnameG{fill:var(--th-green);}
.vtCtag{font-size:5.8px;letter-spacing:.1em;text-anchor:end;opacity:.85;}
.vtCtagR{fill:var(--th-red);}
.vtCtagG{fill:var(--th-green);}
.vtSlotG .vtD{stroke:var(--th-q);}
.vt-on .vtSlotG .vtD{stroke:var(--th-green);transition:stroke .6s ease 2s;}
.vtCardNew{transform:translateX(150px);opacity:0;}
.vt-on .vtCardOld{transform:translateX(-150px);opacity:0;transition:transform .38s cubic-bezier(.4,0,.2,1),opacity .38s ease;}
.vt-on .vtCardNew{transform:none;opacity:1;transition:transform .42s cubic-bezier(.22,1,.36,1) .3s,opacity .42s ease .3s;}
/* the weak parts: red, and the only things that visibly change */
.vtCrack{fill:none;stroke:var(--th-red);stroke-width:1.05;stroke-linejoin:round;
  stroke-dasharray:1;stroke-dashoffset:0;}
.vtCrackH{stroke-width:.6;opacity:.85;}
.vt-on .vtCrack{stroke-dashoffset:1;transition:stroke-dashoffset .45s ease .9s;}
/* capillaries close a beat before the mains they branch off */
.vt-on .vtCrackH{transition-delay:.82s;}
.vtSeat{fill:none;stroke:var(--th-red);stroke-width:.6;stroke-dasharray:3 3;opacity:.85;}
.vt-on .vtSeat{opacity:0;transition:opacity .3s ease 1s;}
.vtPlate{transform:translate(6px,-5px) rotate(2deg);transform-origin:280px 238px;}
.vt-on .vtPlate{transform:none;transition:transform .28s cubic-bezier(.34,1.56,.64,1) .75s;}
.vtPlateP{fill:rgba(11,13,19,.94);stroke:var(--th-q);stroke-width:1.05;}
.vt-on .vtPlateP{stroke:var(--th-green);transition:stroke .6s ease 2s;}
/* the lattice: woven stroke by stroke, the slowest beat */
.vtLat{stroke:var(--th-green);stroke-width:.9;opacity:.5;stroke-dasharray:1;stroke-dashoffset:1;}
.vt-on .vtLat{stroke-dashoffset:0;transition:stroke-dashoffset .5s ease;}
.vt-on .vtLat0{transition-delay:2.40s;}
.vt-on .vtLat1{transition-delay:2.49s;}
.vt-on .vtLat2{transition-delay:2.58s;}
.vt-on .vtLat3{transition-delay:2.67s;}
.vt-on .vtLat4{transition-delay:2.76s;}
.vt-on .vtLat5{transition-delay:2.85s;}
.vt-on .vtLat6{transition-delay:2.94s;}
.vt-on .vtLat7{transition-delay:3.03s;}
.vt-on .vtLat8{transition-delay:3.12s;}
.vt-on .vtLat9{transition-delay:3.21s;}
.vt-on .vtLat10{transition-delay:3.30s;}
.vt-on .vtLat11{transition-delay:3.39s;}
.vt-on .vtLat12{transition-delay:3.48s;}
.vt-on .vtLat13{transition-delay:3.57s;}
.vt-on .vtLat14{transition-delay:3.66s;}
.vt-on .vtLat15{transition-delay:3.75s;}
.vt-on .vtLat16{transition-delay:3.84s;}
.vt-on .vtLat17{transition-delay:3.93s;}
.vt-on .vtLat18{transition-delay:4.02s;}
.vt-on .vtLat19{transition-delay:4.11s;}
/* caption, status, controls */
.th-vt-tx{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 12px;margin-top:12px;
  font-size:10px;letter-spacing:.14em;color:rgba(250, 250, 250,.6);}
.th-vt-tx b{font-weight:500;color:rgba(250, 250, 250,.75);}
#vtState.run{color:#c53400;}
#vtState.ok{color:var(--th-green);}
.th-vt-btn{margin-top:12px;width:100%;font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:#c53400;background:rgba(197, 52, 0,.07);
  border:1px solid rgba(197, 52, 0,.35);border-radius:9px;padding:11px 16px;cursor:pointer;
  transition:background .2s ease,border-color .2s ease;}
.th-vt-btn:hover{background:rgba(197, 52, 0,.14);}
.th-vt-btn:focus-visible{outline:2px solid #c53400;outline-offset:3px;}
@media (prefers-reduced-motion: reduce){
  .th-vt svg *{transition:none !important;}
}