:root{--ink:#ebe8e1;--ink2:rgba(235,232,225,.62);--ink3:rgba(235,232,225,.38);--line:rgba(235,232,225,.16);--bg:#040506;--load:0}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink);font-family:Inter,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
#gl{position:fixed;inset:0;width:100%;height:100%;display:block;outline:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

#loader{position:fixed;inset:0;z-index:30;background:var(--bg);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;transition:opacity 1.4s ease .2s,visibility 0s 1.6s}
.ready #loader{opacity:0;visibility:hidden}
.ld-word{font-family:"Bodoni Moda",serif;font-size:clamp(28px,3.2vw,46px);letter-spacing:.02em}
.ld-bar{width:180px;height:1px;background:var(--line);overflow:hidden}
.ld-bar i{display:block;height:100%;width:calc(var(--load)*100%);background:var(--ink);transition:width .4s ease}
.ld-note{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink3)}

.top{position:fixed;z-index:10;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:flex-start;padding:28px 36px;pointer-events:none}
.mark{font-family:"Bodoni Moda",serif;font-size:21px;letter-spacing:.01em}
.mark span{display:block;font-family:Inter,sans-serif;font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink3);margin-top:6px}
.top nav{display:flex;gap:6px;pointer-events:auto}
.top nav button{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink2);padding:9px 14px;border:1px solid transparent;border-radius:999px;transition:color .3s,border-color .3s}
.top nav button:hover,.top nav button.on{color:var(--ink);border-color:var(--line)}

#scroll{position:relative;z-index:5;pointer-events:none}
#scroll section{height:110vh;display:flex;align-items:flex-end;padding:0 36px 9vh}
#scroll section:first-child{height:100vh}
#scroll section:last-child{height:120vh}
.plaque{max-width:390px;opacity:0;transform:translateY(16px);transition:opacity 1s ease,transform 1.2s cubic-bezier(.2,.7,.2,1)}
.plaque.right{margin-left:auto;text-align:left}
.plaque.on{opacity:1;transform:none}
.eyebrow{margin:0 0 14px;font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--ink3)}
h1,h2,h3{font-family:"Bodoni Moda",serif;font-weight:400;margin:0 0 16px;letter-spacing:-.005em}
h1{font-size:clamp(46px,5.4vw,84px);line-height:1}
h2{font-size:clamp(32px,3.2vw,48px);line-height:1.05}
h3{font-size:30px;line-height:1.1}
.body{margin:0;font-size:15px;line-height:1.65;color:var(--ink2);max-width:36ch}
.hint{margin:26px 0 0;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink3);display:flex;align-items:center;gap:12px}
.hint i{width:1px;height:28px;background:linear-gradient(var(--ink),transparent);animation:drip 2.4s ease-in-out infinite}
@keyframes drip{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

#wheel{position:fixed;z-index:12;right:36px;bottom:34px;width:120px;height:120px;opacity:0;transform:scale(.9);transition:opacity .8s,transform .8s cubic-bezier(.2,.7,.2,1);touch-action:none}
#wheel.on{opacity:1;transform:none}
#wheel canvas{width:100%;height:100%;cursor:pointer}
#wheel .knob{position:absolute;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;border:2px solid var(--ink);box-shadow:0 0 0 1px rgba(0,0,0,.4);pointer-events:none;left:50%;top:50%}
#wheel .label{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink2);pointer-events:none}

#specimen{position:fixed;z-index:12;left:36px;bottom:9vh;max-width:360px;transition:opacity .8s,transform 1s cubic-bezier(.2,.7,.2,1)}
#specimen.hidden{opacity:0;transform:translateY(12px);pointer-events:none}
#specimen .close{margin:20px 0 0;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink3)}
.following #scroll .plaque{opacity:0!important}

.foot{position:fixed;z-index:10;left:36px;bottom:20px;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink3);pointer-events:none}
#hud{position:fixed;z-index:20;left:36px;top:96px;font:11px/1.6 ui-monospace,Menlo,monospace;color:var(--ink2);white-space:pre;pointer-events:none}

#hud.hidden,#dev.hidden{display:none}
#fail{position:fixed;inset:0;display:none;align-items:center;justify-content:center;text-align:center;padding:24px;color:var(--ink2)}
.failed #fail{display:flex}.failed #loader{display:none}
#dev{position:fixed;z-index:14;right:36px;top:86px;width:236px;padding:22px;border:1px solid var(--line);border-radius:14px;background:rgba(6,8,10,.72);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
#dev .qr{display:block;width:168px;height:168px;margin:4px 0 14px}
#dev .code{font-family:"Bodoni Moda",serif;font-size:30px;letter-spacing:.06em;margin-bottom:10px}
#dev .body{font-size:13px}
#dev a{color:var(--ink);text-underline-offset:3px}
#dev .status{margin:12px 0 0;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink3)}
#dev .x{position:absolute;top:16px;right:16px;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink3)}
#dev .x:hover{color:var(--ink)}