:root{--fg:#e9edf2;--dim:#89929c;--line:#ffffff16;--text-metal:linear-gradient(180deg,#e4e8ed 0%,#c3c9d1 55%,#9aa2ad 100%);--mono:"JetBrains Mono",ui-monospace,monospace;--ease:cubic-bezier(.16,1,.3,1);--gutter:clamp(24px,5vw,100px)}
*{box-sizing:border-box;margin:0}html{scroll-behavior:smooth;scroll-padding-top:24px}body{background:#050607;color:var(--fg);font:300 15px/1.55 Inter,system-ui,sans-serif;overflow-x:hidden}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit}a{color:inherit}button:focus-visible,a:focus-visible{outline:2px solid #c4d9ed;outline-offset:7px}::selection{background:#809d9d55;color:#fff}.skip{position:fixed;top:12px;left:12px;z-index:20;background:#ddd;color:#111;padding:12px;transform:translateY(-160%)}.skip:focus{transform:none}
header{position:absolute;inset:0 0 auto;z-index:6;display:flex;justify-content:space-between;align-items:center;padding:26px var(--gutter);font-size:13px;letter-spacing:.04em}.brand{display:flex;align-items:center;gap:10px;text-decoration:none}.brand img{display:block;width:28px;height:28px}header b{font-weight:400}header nav{display:flex;gap:32px;font:300 10px var(--mono);letter-spacing:.14em;text-transform:uppercase}header nav a{color:var(--dim);text-decoration:none;transition:color .3s}header nav a:hover{color:var(--fg)}
.kick,.idx{font:300 10px var(--mono);letter-spacing:.24em;text-transform:uppercase;color:var(--dim)}.hero{min-height:900px;height:100svh;max-height:1300px;position:relative;display:flex;align-items:center;padding:140px var(--gutter) 190px}.hero-copy{position:relative;z-index:4;pointer-events:none}h1{font-size:clamp(70px,8.8vw,162px);font-weight:200;letter-spacing:-.06em;line-height:.96;margin-top:30px}.hero p{color:var(--dim);max-width:39ch;margin-top:32px;font-size:16px;line-height:1.8}.explore{display:flex;width:fit-content;align-items:center;gap:14px;margin-top:32px;font:300 10px var(--mono);letter-spacing:.18em;text-transform:uppercase;text-decoration:none;padding:12px 0;pointer-events:auto}.explore i{width:30px;height:1px;background:currentColor;transition:width .6s var(--ease)}.explore span{transition:transform .5s var(--ease)}.explore:hover i{width:50px}.explore:hover span{transform:translate(3px,-3px)}
.world{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;background:radial-gradient(ellipse at 75% 50%,#141b2270,transparent 65%)}
.hero-bottom{position:absolute;bottom:34px;left:var(--gutter);right:var(--gutter);display:flex;align-items:flex-end;justify-content:space-between;gap:40px;z-index:4;pointer-events:none}.hero-note{font-size:11px;line-height:1.8;color:var(--dim)}.hero-index{display:flex;gap:50px;pointer-events:auto}.hero-index a{font-size:17px;text-decoration:none;min-width:160px;border-top:1px solid #ffffff25;padding-top:14px}.hero-index small{display:block;font:9px var(--mono);letter-spacing:.17em;color:var(--dim);margin-bottom:10px}.hero-index a>span{float:right;color:var(--dim)}
.tool{min-height:950px;height:112svh;max-height:1350px;position:relative;display:flex;align-items:center;padding:120px var(--gutter) 160px;pointer-events:none}.section-top{position:absolute;top:28px;left:var(--gutter);right:var(--gutter);display:flex;justify-content:space-between;font:9px var(--mono);letter-spacing:.17em;color:var(--dim);z-index:4;border-top:1px solid var(--line);padding-top:24px}.section-top span:nth-child(2){position:absolute;left:50%;transform:translateX(-50%);color:#d0d5d9}.text{position:relative;z-index:4;width:36%;pointer-events:none}.idx{display:flex;gap:14px;align-items:center}.idx i{width:24px;height:1px;background:var(--acc)}h2{font-size:clamp(62px,6.3vw,112px);font-weight:200;letter-spacing:-.055em;line-height:1.03;margin-top:32px}.text>p{font-size:16px;line-height:1.8;color:var(--dim);max-width:32ch;margin-top:24px}.tool-meta{display:flex;flex-direction:column;gap:8px;margin-top:34px;font:9px var(--mono);letter-spacing:.12em;color:var(--dim)}.tool-meta span:first-child{color:#c0c8d0}.vault-section .text{width:43%}.vault-section h2{font-size:clamp(58px,5.8vw,106px)}.scene-caption{position:absolute;bottom:34px;left:var(--gutter);right:var(--gutter);display:flex;justify-content:space-between;gap:30px;font:9px var(--mono);color:var(--dim);letter-spacing:.08em;z-index:4}.scene-caption span:last-child{color:#c1cbd0}
/* One continuous desktop. Objects travel between chapters instead of living in panels. */
.desktop-scene{position:fixed;inset:0;z-index:2;pointer-events:none;overflow:clip}.desktop-file{position:absolute;left:0;top:0;width:280px;border:0;padding:0;background:none;color:inherit;text-align:left;cursor:grab;pointer-events:auto;touch-action:none;user-select:none;-webkit-user-select:none;will-change:transform,opacity;opacity:0;transform-origin:center;outline-offset:10px}.desktop-file.dragging{cursor:grabbing;touch-action:none}.desktop-file:hover .file-surface{border-color:#b7c8d577;box-shadow:0 24px 60px #0007,0 0 28px #7da1af12}.file-surface{display:block;position:relative;border:1px solid #aabfc130;background:#0c141a;box-shadow:0 25px 70px #0007;overflow:hidden;transition:border-color .4s,box-shadow .4s}.file-print .file-surface{aspect-ratio:4/3}.file-surface img,.file-surface video{display:block;width:100%;height:100%;object-fit:cover;pointer-events:none}.file-caption{display:flex;align-items:center;justify-content:space-between;padding-top:12px;font:9px var(--mono);letter-spacing:.06em;color:#a6b1b9;white-space:nowrap}.file-caption small{font-size:8px;color:#778b96}.file-video .file-surface{aspect-ratio:8/5}.video-indicator{position:absolute;bottom:12px;left:14px;right:14px;font:8px var(--mono);color:#d4e0e2;letter-spacing:.06em;display:flex;gap:8px;align-items:center}.video-indicator i{width:4px;height:4px;border-radius:50%;background:#b4d5d1;box-shadow:0 0 8px #e5fff277}.video-indicator span{margin-left:auto}.file-video[aria-pressed=false] .video-indicator i{background:#6e7e87;box-shadow:none}
.note-paper{background:#d9d7ce;color:#303b3c;padding:25px;aspect-ratio:.77;border:0;box-shadow:0 25px 70px #0008;display:flex;flex-direction:column}.note-eyebrow{font:7px var(--mono);letter-spacing:.17em;color:#6b7777}.note-paper strong{font:300 clamp(23px,2.2vw,36px)/1.05 Inter,system-ui,sans-serif;letter-spacing:-.045em;display:block;margin-top:28px}.note-rule{display:block;width:28px;height:1px;background:#85918a;margin:20px 0 14px}.note-copy{font:9px/1.8 Inter,system-ui,sans-serif;color:#61706a}.audio-surface{padding:18px 20px;background:linear-gradient(120deg,#17212b,#0a111a);border-color:#829bac3b}.audio-title{font:8px var(--mono);letter-spacing:.2em;display:flex;justify-content:space-between;color:#b4c5cd}.audio-title i{font-size:14px;line-height:8px;font-style:normal;color:#dfc9a7}.waveform{height:52px;display:flex;gap:2px;align-items:center;margin:14px 0 10px}.waveform i{flex:1;min-width:1px;height:var(--height);background:#7497a5;opacity:.5;transition:background .2s,opacity .2s}.waveform i.played{background:#e0c498;opacity:1}.audio-detail{display:flex;justify-content:space-between;font:6px var(--mono);letter-spacing:.08em;color:#7e939f}.file-audio[aria-pressed=true] .audio-title{color:#dfcfad}.orbit-surface{display:block;aspect-ratio:1;filter:drop-shadow(0 0 25px #7ca0b01c)}.orbit-surface img{width:100%;height:100%;pointer-events:none}.file-orbit .file-caption{border-top:1px solid #8ea8b033;padding-top:8px}
/* The vault is itself the control. The same desktop files are drawn into it. */
.vault-object{position:absolute;left:0;top:0;width:330px;height:410px;display:block;padding:0;border:0;background:none;color:inherit;pointer-events:auto;cursor:pointer;opacity:0;will-change:transform,opacity}.vault-shell{position:absolute;inset:0;display:block;border:1px solid #7c8c9d55;background:#0b1016;box-shadow:25px 35px 100px #000a,inset 0 0 0 10px #080a0d}.vault-interior{position:absolute;inset:12%;display:grid;grid-template-columns:1fr 1fr;gap:20px;align-content:center}.vault-interior>span{display:grid;place-items:center;aspect-ratio:1;font:8px var(--mono);color:#b8c8da;border:1px solid #9daec01a;background:#101a2433;transition:opacity .9s}.vault-door{position:absolute;inset:12px;display:block;transform-origin:left;border:1px solid #93a6be88;background:linear-gradient(125deg,#38414c,#131820 20%,#1b222c 48%,#0e1218 80%,#3a414c);box-shadow:inset 0 0 0 7px #090d12,inset 0 0 0 8px #8292a333,0 20px 60px #0008;transition:transform .7s var(--door),clip-path .7s var(--door)}.door-grain{position:absolute;inset:9px;background:repeating-linear-gradient(0deg,#c3d2e008 0 1px,transparent 1px 4px);opacity:.4}.door-id,.door-state,.door-bottom{position:absolute;left:28px;font:8px var(--mono);letter-spacing:.22em;color:#9ca9ba;transition:opacity .5s}.door-id{top:25px}.door-state{top:68%;left:0;right:0;text-align:center;letter-spacing:.45em;font-size:10px}.door-bottom{bottom:24px;right:28px;letter-spacing:.06em;display:flex;justify-content:space-between}.vault-edge{position:absolute;top:0;bottom:0;right:-17px;width:16px;background:linear-gradient(90deg,#252d37,#090c10);transform:skewY(35deg);transform-origin:left;border-right:1px solid #8999ad44}.vault-object-hint{position:absolute;bottom:-48px;left:-50%;right:-50%;text-align:center;font:8px var(--mono);letter-spacing:.17em;color:#a4b3c0;pointer-events:none}.vault-object[aria-pressed=false] .vault-door{transform:translateX(-100%);clip-path:inset(0 0 0 100%)}.vault-object[aria-pressed=false] .door-id,.vault-object[aria-pressed=false] .door-state,.vault-object[aria-pressed=false] .door-bottom,.vault-object[aria-pressed=false] .vault-dial{opacity:0}.vault-object:active .vault-shell{scale:.985}
.file-preview{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:7vh 8vw;border:0;background:#05080bf2;color:var(--fg);overflow:auto}.file-preview::backdrop{background:#020406dd;backdrop-filter:blur(18px)}.preview-close{position:fixed;right:30px;top:22px;background:none;border:0;font:200 40px Inter,system-ui;color:#a3b2ba;cursor:pointer;padding:8px 16px;z-index:1}.preview-close:hover{color:white}#previewContent{min-height:80vh;display:grid;place-items:center}#previewContent>img{max-width:100%;max-height:78vh;box-shadow:0 30px 100px #0008;cursor:zoom-out}.preview-hint{text-align:center;font:8px var(--mono);letter-spacing:.2em;color:#8799a6;margin-top:24px}.reading-note{width:min(600px,100%);background:#dedcd2;color:#344240;padding:60px;box-shadow:0 30px 100px #0008}.reading-note .note-eyebrow{font-size:9px}.reading-note h3{font-size:44px;font-weight:300;line-height:1.08;letter-spacing:-.05em;margin:30px 0}.reading-note p{font-size:14px;line-height:1.9;margin:20px 0}.reading-note h4{font:10px var(--mono);letter-spacing:.1em;text-transform:uppercase;margin-top:32px}.scene-announcement{position:fixed;width:1px;height:1px;clip-path:inset(50%);overflow:hidden;white-space:nowrap}
.next{position:relative;z-index:4;padding:120px var(--gutter);min-height:520px;display:flex;justify-content:space-between;align-items:flex-end;gap:32px;border-top:1px solid var(--line);overflow:hidden;pointer-events:none}.next h2{margin-top:24px;font-size:clamp(48px,5vw,88px)}.next p{margin-top:30px;color:var(--dim);font-size:13px}.next .explore{margin-bottom:10px;z-index:1}.next-mark{position:absolute;right:16%;top:0;font:200 460px/1 Inter,system-ui;color:#9aa8b707;pointer-events:none}footer{position:relative;z-index:4;border-top:1px solid var(--line);padding:26px var(--gutter);color:var(--dim);font:9px var(--mono);letter-spacing:.06em;display:flex;justify-content:space-between;gap:20px}footer .brand{color:#c5cdd4}.up{opacity:0;transform:translateY(28px);transition:opacity 1.1s var(--ease),transform 1.3s var(--ease);transition-delay:var(--d,0s)}.up.in{opacity:1;transform:none}
/* ---------- text motion ---------- */
/* the animated letters can't be selected: a selection leaves ghost marks on their constantly redrawn layers */
.fx-letters{-webkit-user-select:none;user-select:none}
.ch{display:inline-block;white-space:pre;will-change:transform,filter;
  background:var(--text-metal);-webkit-background-clip:text;background-clip:text;color:transparent;
  transform:translateY(var(--ty,0)) scale(var(--sc,1));filter:brightness(var(--br,1)) blur(var(--bl,0px));transition:transform .5s var(--ease)}
.dimtxt .ch{background:none;color:var(--dim)}
/* letters condense out of a blur when they come into view */
.fx-letters .ch{opacity:0;--bl:14px;--ty:.35em;--sc:1.08}
.fx-letters.lit .ch{opacity:1;--bl:0px;--ty:0;--sc:1;transition:opacity .9s var(--ease) calc(var(--i)*28ms),transform 1.1s var(--ease) calc(var(--i)*28ms),filter 1.1s var(--ease) calc(var(--i)*28ms)}
.fx-letters.lit.settled .ch{transition:transform .45s var(--ease),filter .45s var(--ease)}
/* crumbling: letters fall apart into dust */
.ch.crumb{animation:crumb .9s cubic-bezier(.5,0,.75,0) forwards;animation-delay:calc(var(--j)*35ms)}
@keyframes crumb{to{opacity:0;transform:translate(var(--dx),1.2em) rotate(var(--rot)) scale(.6);filter:blur(6px)}}
.ch.form{animation:form 1s var(--ease) both;animation-delay:calc(var(--j)*35ms)}
@keyframes form{from{opacity:0;transform:translateY(-.5em) scale(1.1);filter:blur(10px)}}
/* words drift in out of focus */
.fx-words .w{display:inline-block;opacity:0;filter:blur(8px);transform:translateY(8px);transition:opacity .8s var(--ease),filter .8s var(--ease),transform .8s var(--ease);transition-delay:calc(var(--i)*35ms)}
.fx-words.lit .w{opacity:1;filter:none;transform:none}
dl div{transform:translateX(-14px);opacity:0;transition:transform .8s var(--ease),opacity .8s;transition-delay:calc(var(--r,0)*90ms + .3s)}
.lit dl div,dl.lit div{transform:none;opacity:1}


/* scroll: each block fades and pulls up into place as it enters */
.up{opacity:0;transform:translateY(56px);transition:opacity 1.1s var(--ease),transform 1.3s var(--ease);transition-delay:var(--d,0s)}
.up.in{opacity:1;transform:none}
.stage .frame-wrap.up{transform:translateY(90px) scale(.96)}.stage .frame-wrap.up.in{transform:none}


/* breathing: the settled headings slowly melt (soften, sag, dim) and come back into focus, ~9s per breath,
   each letter a little behind the one before so the breath rolls through the word */
@property --blr{syntax:"<length>";inherits:false;initial-value:0px}
@property --mlt{syntax:"<number>";inherits:false;initial-value:1}
@property --dimv{syntax:"<number>";inherits:false;initial-value:1}
.fx-letters.settled .ch:not(.crumb):not(.form){animation:breathe 9s cubic-bezier(.45,0,.55,1) infinite;animation-delay:calc(var(--i)*140ms);
  transform-origin:50% 0;transform:scaleY(var(--mlt)) translateY(calc((var(--mlt) - 1)*.4em));
  filter:brightness(calc(var(--br,1)*var(--dimv))) blur(var(--blr));transition:none}
/* Off-screen headings stop breathing (toggled in home.js); it costs style + paint work every frame. */
.fx-letters.settled.asleep .ch:not(.crumb):not(.form){animation-play-state:paused}
@keyframes breathe{
  0%,100%{--blr:0px;--mlt:1;--dimv:1}
  50%{--blr:2.6px;--mlt:1.045;--dimv:.78}}

@media(max-width:1100px){.hero{min-height:800px}.hero-index{gap:25px}.hero-index a{min-width:125px}.tool{min-height:900px}.text{width:38%}.text>p{font-size:15px}.vault-section h2{font-size:60px}.note-paper{padding:20px}.note-paper strong{font-size:26px}}
@media(max-width:760px){:root{--gutter:24px}header{padding-top:22px}header .brand{font-size:11px;gap:8px}header nav{gap:18px;font-size:9px}header nav a:last-child{display:none}.hero{height:auto;min-height:1000px;padding-top:145px;padding-bottom:490px;align-items:flex-start}h1{font-size:clamp(58px,11.5vw,88px);line-height:1.01;letter-spacing:-.065em}.hero p{max-width:34ch;font-size:14px;margin-top:26px}.hero .kick{font-size:8px;letter-spacing:.17em}.hero .explore{margin-top:20px}.hero-bottom{bottom:30px;gap:20px;align-items:flex-end}.hero-note{font-size:9px;max-width:110px}.hero-index{gap:20px}.hero-index a{min-width:85px;font-size:12px}.hero-index small{font-size:7px;letter-spacing:.06em}.hero-index a>span{display:none}.tool{height:auto;min-height:1100px;padding:100px var(--gutter) 650px;align-items:flex-start}.section-top{font-size:8px;letter-spacing:.1em}.section-top span:nth-child(2){display:none}.section-top span:last-child{font-size:7px}.text,.vault-section .text{width:100%;max-width:430px}.prism-section .text{margin-left:0}h2,.vault-section h2{font-size:70px;margin-top:26px}.idx{font-size:8px;letter-spacing:.17em}.text>p{max-width:34ch;font-size:14px;margin-top:18px}.text .explore{margin-top:20px}.tool-meta{flex-direction:row;gap:20px;font-size:8px;margin-top:20px}.scene-caption{font-size:8px;flex-direction:column;gap:10px}.file-caption{font-size:7px;padding-top:8px}.file-caption small{font-size:7px}.note-paper{padding:16px}.note-eyebrow{font-size:5px}.note-paper strong{font-size:24px;margin-top:18px}.note-copy{font-size:7px}.note-rule{margin:12px 0 10px}.audio-surface{padding:12px}.audio-title{font-size:6px}.audio-detail{font-size:5px}.waveform{height:35px;gap:1px;margin-block:8px}.video-indicator{font-size:6px;bottom:8px;left:8px;right:8px;gap:5px}.vault-object-hint{font-size:7px;bottom:-35px}.door-id{left:20px;top:20px;font-size:7px}.door-bottom{left:20px;right:20px;bottom:20px;font-size:7px}.vault-interior{gap:12px}.vault-interior>span{font-size:7px}.next{padding-block:80px;min-height:450px;align-items:flex-start;flex-direction:column;gap:30px}.next h2{font-size:56px}.next .explore{margin:0}.next-mark{right:0;top:40px;font-size:350px}footer{font-size:8px;flex-wrap:wrap;gap:16px}footer>span:nth-child(2){display:none}.reading-note{padding:35px 25px}.reading-note h3{font-size:36px}.reading-note p{font-size:13px}.file-preview{padding:80px 20px 30px}.preview-close{right:12px;top:8px}}
@media(max-width:370px){:root{--gutter:18px}header nav{gap:12px}.hero-index{gap:12px}.hero-note{max-width:90px}.hero-index a{min-width:75px}.tool-meta{gap:12px;font-size:7px}h2,.vault-section h2{font-size:60px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}.up,.fx-letters .ch,.fx-words .w{opacity:1!important;transform:none!important;filter:none!important}}


/* Slide the solid plate aside; keep its surfaces in one plane while it opens. */
/* Open: swung past 90deg so it rests outside the box and every square is clear. */

.vault-object:hover .vault-door{border-color:#bed1e6}
/* Keep the paper's contents proportional when a narrow workspace compacts it. */
.desktop-file{container-type:inline-size}
.note-paper{padding:9cqw}
.note-paper .note-eyebrow{font-size:3cqw}
.note-paper strong{font-size:13cqw;margin-top:11cqw}
.note-paper .note-rule{width:15cqw;margin:8cqw 0 5cqw}
.note-paper .note-copy{font-size:3.6cqw}
/* Reading space follows the actual copy, not an empty full-column rectangle. */
.tool-meta,.idx,.text>h2{width:fit-content}

/* ---------- desk: one column for copy, one stage for files ---------- */
/* Labels and captions stop at the copy column so nothing scrolls across the files. */
.section-top{right:auto;width:min(40%,560px)}
.scene-caption{right:auto}
.hero-bottom{right:auto;justify-content:flex-start;gap:64px}
.world{background:radial-gradient(ellipse 60% 70% at 78% 48%,#16212b66,transparent 70%)}
/* Picked-up files lift: deeper, softer shadow; the tilt and scale come from the spring in world.js. */
.file-surface{transition:border-color .35s,box-shadow .35s}
.desktop-file.dragging .file-surface,.desktop-file.dragging .orbit-surface{box-shadow:0 40px 90px #000b,0 8px 24px #0008}
.desktop-file.dragging .orbit-surface{box-shadow:none;filter:drop-shadow(0 30px 40px #000a)}
.desktop-file:focus-visible{outline:1px solid #c4d9ed;outline-offset:8px}
.note-paper .note-eyebrow{font:500 5.6cqw/1 Inter,system-ui,sans-serif;letter-spacing:0;color:#7a8580}
.note-paper strong{font-size:12.5cqw;line-height:1.02;margin-top:9cqw}
.note-paper .note-copy{font-size:6cqw;line-height:1.5}
@media(max-width:760px){.desktop-file{touch-action:pan-y}.section-top,.scene-caption{width:auto;right:var(--gutter)}.hero-bottom{right:var(--gutter);justify-content:space-between}}
/* Files fly onto the vault face when it locks, so they stack above it. A held file keeps
   its layer: it never jumps over the copy or its neighbours, so release causes no restack. */
.vault-object{z-index:0}.desktop-file{z-index:1}

/* Vault: drawn flat and upright, so files flying in (also flat) land on their squares exactly.
   Each square holds one file. */
.vault-interior>span{position:relative;place-items:end center;padding-bottom:7%;overflow:hidden}
.vault-interior b{font-weight:400;position:relative}
.slot-thumb{position:absolute;inset:9% 9% 26%;display:grid;place-items:center}
/* Each square holds a scaled clone of the real file, so the hand-off from the flying file is
   pixel-identical. The door is a plate that slides out of the frame's left edge: translate and
   clip move together, so it never shows outside the frame. */
.vault-object{--door:cubic-bezier(.65,0,.35,1)}.vault-door{clip-path:inset(0 0 0 0)}
.slot-art{position:absolute;left:50%;top:50%;display:block;container-type:inline-size;opacity:0;transform-origin:center;pointer-events:none}
.vault-object.stored .slot-art{opacity:1}
.slot-art>.file-surface{border-color:#aabfc130}
.slot-art canvas{display:block;width:100%;height:100%;object-fit:cover}
.vault-object[aria-pressed=true] .door-id,.vault-object[aria-pressed=true] .door-state,.vault-object[aria-pressed=true] .door-bottom,.vault-object[aria-pressed=true] .vault-dial{transition:opacity .4s .5s}
.vault-object[aria-pressed=false] .door-id,.vault-object[aria-pressed=false] .door-state,.vault-object[aria-pressed=false] .door-bottom,.vault-object[aria-pressed=false] .vault-dial{transition:opacity .15s}

/* Vault face: a dial with a spoked handle wheel (turned by script, so throws spin it), bolts
   that throw into the frame once the door is home, rivets, and a status light. */
.vault-object{touch-action:none;cursor:grab}
.vault-object.dragging{cursor:grabbing;z-index:2}
.vault-object.dragging .vault-shell{box-shadow:40px 60px 120px #000c,inset 0 0 0 10px #080a0d}
.vault-object:focus{outline:none}.vault-object:focus-visible .vault-shell{outline:1px solid #c4d9ed;outline-offset:8px}
.vault-object:hover .vault-door{border-color:#93a6be88}
.door-grain{background:
  radial-gradient(circle at 0 0,#c9d6e2 0 1.5px,#384350 2px 3px,transparent 3.5px) 6px 6px/calc(100% - 12px) calc(100% - 12px),
  radial-gradient(circle at 100% 0,#c9d6e2 0 1.5px,#384350 2px 3px,transparent 3.5px) 6px 6px/calc(100% - 12px) calc(100% - 12px),
  radial-gradient(circle at 0 100%,#c9d6e2 0 1.5px,#384350 2px 3px,transparent 3.5px) 6px 6px/calc(100% - 12px) calc(100% - 12px),
  radial-gradient(circle at 100% 100%,#c9d6e2 0 1.5px,#384350 2px 3px,transparent 3.5px) 6px 6px/calc(100% - 12px) calc(100% - 12px),
  repeating-linear-gradient(0deg,#c3d2e008 0 1px,transparent 1px 4px);background-repeat:no-repeat;opacity:.9}
.vault-dial{position:absolute;left:50%;top:44%;width:58%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(closest-side,#141a22 0 64%,#3a4552 65% 66.5%,#0c1015 67.5% 92%,#4a5664 93% 94.5%,#11161d 95.5%);
  box-shadow:0 14px 34px #000b,inset 0 1px 0 #ffffff12;transition:opacity .5s}
.dial-ring{position:absolute;inset:0;border-radius:50%;
  background:repeating-conic-gradient(from -.6deg,#aebdcc 0 1.2deg,transparent 1.2deg 7.5deg),repeating-conic-gradient(from -1deg,#dfe8f0 0 2deg,transparent 2deg 45deg);
  -webkit-mask:radial-gradient(closest-side,transparent 81%,#000 82% 89%,transparent 90%);mask:radial-gradient(closest-side,transparent 81%,#000 82% 89%,transparent 90%);opacity:.55}
.dial-ring::after{content:"";position:absolute;left:50%;top:1.5%;width:3%;height:6%;transform:translateX(-50%);background:#e7b56a;border-radius:1px}
.dial-wheel{position:absolute;inset:16%;display:block;will-change:transform}
.dial-wheel>i{position:absolute;left:0;right:0;top:50%;height:7%;margin-top:-3.5%;border-radius:4px;
  background:linear-gradient(#d3dde7,#8796a6 45%,#3d4753);box-shadow:0 4px 8px #000b}
.dial-wheel>i:nth-child(2){transform:rotate(60deg)}.dial-wheel>i:nth-child(3){transform:rotate(120deg)}
.dial-wheel>i::before,.dial-wheel>i::after{content:"";position:absolute;top:50%;width:11%;aspect-ratio:1;transform:translateY(-50%);border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#f1f5f9,#8d9aa8 45%,#2c343e);box-shadow:0 3px 6px #000a}
.dial-wheel>i::before{left:-4%}.dial-wheel>i::after{right:-4%}
.dial-wheel>b{position:absolute;inset:33%;border-radius:50%;background:radial-gradient(circle at 36% 30%,#eef3f8,#8b98a7 40%,#262e38 78%);
  box-shadow:0 6px 14px #000c,inset 0 -2px 4px #0008}
.dial-wheel>b::after{content:"";position:absolute;inset:30%;border-radius:50%;background:radial-gradient(circle at 50% 40%,#1a2029,#05070a);box-shadow:inset 0 1px 2px #000,0 1px 0 #ffffff26}
.door-state{top:auto;bottom:16%}
.door-bottom i{display:block;width:6px;height:6px;border-radius:50%;background:#55606c;align-self:center;transition:background .3s,box-shadow .3s}
.vault-object.bolted .door-bottom i{background:#e7b56a;box-shadow:0 0 6px #e7b56a,0 0 14px #e7b56a88;animation:vault-led 2.4s ease-in-out infinite}
@keyframes vault-led{50%{opacity:.55}}
/* Bolts sit in the door's right edge and shoot into the frame. */
.vault-bolts{position:absolute;right:12px;top:12px;bottom:12px;width:0;display:block;pointer-events:none}
.vault-bolts i{position:absolute;right:0;width:20px;height:9px;margin-top:-4.5px;border-radius:2px;
  background:linear-gradient(#dfe7ef,#8592a1 50%,#3b4450);box-shadow:0 2px 4px #000a;opacity:0;transform:translateX(2px);
  transition:transform .28s cubic-bezier(.5,0,.75,0),opacity .2s}
.vault-bolts i:nth-child(1){top:20%}.vault-bolts i:nth-child(2){top:50%}.vault-bolts i:nth-child(3){top:80%}
.vault-object[aria-pressed=true] .vault-bolts i{opacity:1;transition:transform .28s cubic-bezier(.5,0,.75,0),opacity .2s .6s}
.vault-object.bolted .vault-bolts i{transform:translateX(14px)}
.vault-object.bolted .vault-bolts i:nth-child(2){transition-delay:.04s}.vault-object.bolted .vault-bolts i:nth-child(3){transition-delay:.08s}
@media(max-width:760px){.vault-object{touch-action:pan-y}.vault-bolts i{width:15px;height:7px}.vault-object.bolted .vault-bolts i{transform:translateX(10px)}}