@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;450;500;550;600;650;700&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{--paper:#eeece5;--ink:#262723;--muted:#77786f;--line:#d3d2c8;--orange:#e85d2a;--mono:'IBM Plex Mono',monospace;--sans:'DM Sans',Arial,sans-serif;color-scheme:light}
*{box-sizing:border-box}
html{overflow-x:clip}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);transition:background .7s,color .7s;min-width:320px;overflow-x:clip}
button{font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
button:focus-visible{outline:2px solid var(--orange);outline-offset:6px}
button:disabled{cursor:default;opacity:.4}
::selection{color:var(--paper);background:var(--orange)}
.grain{position:fixed;inset:0;z-index:20;pointer-events:none;opacity:.07;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.92' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23000' filter='url(%23n)' opacity='.75' d='M0 0h180v180H0z'/%3E%3C/svg%3E")}
.header{height:108px;margin:0 4.2%;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);position:relative;z-index:5}
.wordmark{display:flex;align-items:center;gap:12px;font-size:28px;letter-spacing:-1.4px;font-weight:650}
.wordmark svg{width:31px;height:31px;stroke:var(--orange);stroke-width:3;transition:transform 1s}.wordmark:hover svg{transform:rotate(180deg)}
.wordmark>span{font-size:12px;align-self:flex-start;margin-top:7px;letter-spacing:0;margin-left:-7px}
.header-note,.status,.eyebrow,.intro-footnote,.object-label,.coordinates,.scene-hint,.control-label,.footer-signature,.bottom-line{font-family:var(--mono);font-size:10px;letter-spacing:1.1px;font-weight:400}
.header-note{color:var(--muted);margin-left:35px}.header-actions{display:flex;align-items:center;gap:27px}.status{display:flex;align-items:center;gap:9px;font-size:9px}
.status i,.hint-dot{width:5px;height:5px;border-radius:50%;background:var(--orange);box-shadow:0 0 0 4px #e85d2a10}
.icon-button{display:grid;place-items:center;width:34px;height:34px;background:none;border:1px solid var(--line);border-radius:50%;transition:transform .3s}.icon-button:hover{transform:rotate(35deg)}.icon-button svg{width:18px;fill:none;stroke:currentColor;stroke-width:1.3}
.playground{height:calc(100svh - 243px);min-height:580px;max-height:960px;position:relative;margin:0 4.2%;isolation:isolate}
.scene{position:fixed;inset:0;z-index:0;touch-action:pan-y;cursor:crosshair}.scene canvas{width:100%;height:100%;display:block;opacity:0;transition:opacity 1.5s}.scene.ready canvas{opacity:1}
.intro{padding-top:clamp(55px,8.2vh,110px);pointer-events:none;width:60%;position:relative;z-index:2}
.eyebrow{display:flex;align-items:center;gap:13px;color:var(--muted);font-size:9px;margin-bottom:34px}.tiny-star{font-size:19px;color:var(--orange);line-height:1}.eyebrow-line{width:42px;height:1px;background:var(--line);margin-left:3px}
h1{margin:0;font-size:clamp(62px,7.5vw,118px);line-height:.99;letter-spacing:-.075em;font-weight:500}
h1 em{font-family:Georgia,'Times New Roman',serif;font-weight:400;color:var(--orange);letter-spacing:-.085em;position:relative}h1 .title-dot{display:inline-block;font-size:43px;vertical-align:top;margin:9px 0 0 12px;color:var(--orange);font-weight:400;animation:asterisk-turn 30s linear infinite}
.intro p{font-size:13px;line-height:1.8;color:var(--muted);margin-top:29px;letter-spacing:-.15px}
.explore-button{pointer-events:auto;display:flex;align-items:center;gap:27px;border:0;border-bottom:1px solid var(--ink);padding:9px 0 12px;background:none;font-size:12px;font-weight:500;margin-top:24px;transition:color .2s,gap .3s}.explore-button:hover{color:var(--orange);gap:36px}.explore-button span{font-size:21px;line-height:14px}
.intro-footnote{margin-top:41px;display:flex;gap:9px;color:var(--muted);font-size:8px;letter-spacing:.65px}.intro-footnote>span{color:var(--orange);font-size:15px;line-height:13px}
.object-label{position:absolute;top:18%;right:1.8%;display:flex;gap:13px;align-items:center;font-size:9px}.object-label div span{display:block;color:var(--muted);font-size:7px;letter-spacing:.7px;margin-top:6px}.label-cross{font-size:27px;font-weight:400;color:var(--orange)}
.coordinates{position:absolute;right:0;top:57%;display:flex;writing-mode:vertical-rl;gap:23px;color:var(--muted);font-size:7px}
.scene-hint{position:absolute;bottom:31px;left:66%;transform:translateX(-50%);white-space:nowrap;display:flex;align-items:center;gap:10px;font-size:8px;color:var(--muted)}
.orbit-decoration{position:absolute;width:65%;aspect-ratio:1;right:-3%;top:50%;transform:translateY(-50%) rotate(-28deg);border:1px solid var(--line);border-radius:50%;opacity:.45;z-index:-2;pointer-events:none}.orbit-decoration:after{content:'';position:absolute;inset:8%;border:1px dashed var(--line);border-radius:50%}.orbit-decoration span{position:absolute;bottom:11%;left:12%;font-family:var(--mono);font-size:7px;letter-spacing:3px;transform:rotate(28deg);color:var(--muted)}
.footer{position:relative;z-index:5;margin:0 4.2%;height:94px;display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--line);gap:20px}
.footer-signature{display:flex;align-items:center;gap:14px;font-size:9px;letter-spacing:.65px}.footer-signature div>span{display:block;font-size:7px;margin-top:7px;color:var(--muted)}.footer-star{font-size:36px;color:var(--orange);animation:asterisk-turn 35s linear infinite}
.controls{display:flex;align-items:center;gap:17px}.control-label{font-size:8px;color:var(--muted)}.mode-switch{border:1px solid var(--line);border-radius:25px;padding:4px;display:flex;gap:2px}.mode-switch button{border:0;border-radius:20px;background:transparent;font-size:10px;padding:9px 16px;transition:background .25s,color .25s}.mode-switch button.active{background:var(--ink);color:var(--paper)}.mode-switch button:hover:not(.active){background:var(--line)}.mode-switch button span{color:var(--orange);margin-left:3px}
.effect-actions{display:flex;align-items:center;gap:13px}.sound-button{border:0;background:none;display:grid;place-items:center;padding:4px;color:var(--muted)}.sound-button svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round}.sound-button[aria-pressed=true]{color:var(--orange)}.play-icon{display:none}body.paused .play-icon{display:block}body.paused .pause-icon{display:none}
.warp-button{border:0;background:var(--ink);color:var(--paper);border-radius:26px;padding:14px 19px;display:flex;gap:30px;align-items:center;font-size:10px;white-space:nowrap;user-select:none;touch-action:none;transition:background .3s,transform .3s}.warp-button:hover{background:var(--orange)}.warp-button:active{transform:scale(.96)}.warp-icon{font-size:19px;line-height:13px}
.bottom-line{display:flex;justify-content:space-between;padding:0 4.2% 19px;color:var(--muted);font-size:7px;letter-spacing:.65px}.orange-star{color:var(--orange);margin-left:6px}
.cursor{position:fixed;left:0;top:0;width:30px;height:30px;border:1px solid var(--orange);border-radius:50%;pointer-events:none;z-index:50;opacity:0;transition:width .2s,height .2s,border-color .2s;transform:translate(-50%,-50%)}.cursor.visible{opacity:.55}.cursor.hover{width:50px;height:50px}
.warp-vignette{position:fixed;inset:0;pointer-events:none;z-index:15;box-shadow:inset 0 0 170px 55px #e85d2a;opacity:0;transition:opacity .7s}body.warping .warp-vignette{opacity:.2}body.warping .warp-button{background:var(--orange)}body.warping .wordmark svg{animation:asterisk-turn .7s linear infinite}
.scene-fallback{display:none;position:absolute;right:13%;top:24%;width:32%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 30% 25%,#faa066,#b34013 36%,#451b10 67%,#211f1a 90%);box-shadow:20px 30px 70px #943f1825;z-index:-1}.scene-fallback:before{content:'';position:absolute;inset:-15%;border:2px solid var(--orange);border-radius:50%;transform:rotate(-30deg) scaleY(.42)}body.no-webgl .scene-fallback{display:block}
.scene-status{position:absolute;right:7%;bottom:55px;font-family:var(--mono);font-size:8px;color:var(--muted);max-width:250px;text-align:center}
body.dark{--paper:#171915;--ink:#eeece5;--muted:#9a9b8e;--line:#393c32;color-scheme:dark}
@keyframes asterisk-turn{to{transform:rotate(360deg)}}
@media(min-width:1600px){.header,.footer,.playground{margin-left:auto;margin-right:auto;max-width:1600px}.intro{padding-top:100px}}
@media(max-width:1100px){.header-note{display:none}.header{height:90px}h1{font-size:8.3vw}.playground{min-height:590px;height:calc(100svh - 225px)}.controls{gap:9px}.control-label{display:none}.footer-signature{font-size:8px}.footer-signature div>span{font-size:6px}.effect-actions{gap:8px}.scene-hint{left:70%;font-size:7px}}
@media(max-width:760px){.header{height:82px;margin:0 6%}.wordmark{font-size:24px}.wordmark svg{width:25px}.status{font-size:7px;letter-spacing:.5px}.header-actions{gap:15px}.playground{margin:0 6%;height:auto;min-height:830px;max-height:none}.intro{padding-top:40px;width:100%}.eyebrow{font-size:8px;margin-bottom:25px}h1{font-size:clamp(54px,11vw,79px);letter-spacing:-.07em}h1 .title-dot{font-size:29px;margin-left:9px}.intro p{font-size:12px;margin-top:20px}.explore-button{margin-top:14px}.intro-footnote{margin-top:22px;font-size:7px}.orbit-decoration{width:100%;top:590px;right:-4%}.object-label{top:490px;right:1%;font-size:8px}.object-label div span{font-size:6px}.coordinates{top:640px;font-size:6px}.scene-hint{left:50%;bottom:24px;font-size:7px}.scene-status{right:15%;bottom:44px}.footer{margin:0 6%;height:auto;min-height:134px;flex-wrap:wrap;padding:20px 0;gap:20px}.footer-signature{width:100%;justify-content:center;font-size:8px}.footer-star{font-size:26px}.controls{flex:1}.mode-switch{width:100%;justify-content:space-between}.mode-switch button{padding:9px 12px;font-size:9px}.effect-actions{gap:7px}.warp-button{gap:12px;padding:13px;font-size:9px}.sound-button svg{width:16px}.bottom-line{padding:8px 6% 20px;font-size:6px}.bottom-line>span:nth-child(2){display:none}.scene-fallback{top:470px;right:16%;width:65%}.cursor{display:none}}
@media(max-width:390px){.status{display:none}.playground{min-height:800px}.effect-actions{gap:4px}.warp-button{padding:11px;gap:7px}.mode-switch button{padding:9px 9px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}.cursor{display:none}}
body.paused .footer-star,body.paused .title-dot{animation-play-state:paused}

/* The scroll journey keeps the sculpture and its controls in view. */
.header{position:sticky;top:0;background:var(--paper);height:90px;z-index:10}
.wordmark .name-wordmark{font-family:var(--mono);font-size:10px;letter-spacing:-.15px;line-height:1.6;max-width:235px;align-self:center;margin:0;font-weight:500}
.playground{height:calc(100svh - 165px);min-height:650px;margin-right:6%}

.playground{z-index:1;pointer-events:none}
.playground button{pointer-events:auto}
.intro{padding-top:clamp(60px,9vh,120px)}
.footer{position:fixed;left:4.2%;right:4.2%;bottom:0;margin:0;height:75px;background:var(--paper);z-index:12}
.bottom-line{padding-bottom:100px}
.name-rail{position:fixed;top:110px;bottom:95px;right:8px;z-index:8;width:105px;pointer-events:none;overflow:hidden;mask-image:linear-gradient(to bottom,transparent,#000 6%,#000 92%,transparent)}
.rail-track{display:flex;flex-direction:column;align-items:center;gap:0;width:100%;padding:25px 0;will-change:transform}
.name-fragment{font-family:var(--sans);font-weight:550;font-size:70px;line-height:78px;flex-shrink:0;color:var(--orange);opacity:0;transform:translateX(calc(var(--scatter-x) + 45px)) rotate(calc(var(--scatter-turn) + 30deg));transition:opacity .45s,transform .65s cubic-bezier(.2,.7,.2,1);will-change:transform;letter-spacing:-4px}
.name-fragment.revealed{opacity:.72;transform:translateX(var(--scatter-x)) rotate(var(--scatter-turn))}
.name-fragment:nth-child(5n){font-family:Georgia,serif;font-style:italic}.rail-counter{position:fixed;right:20px;bottom:86px;font-family:var(--mono);font-size:7px;color:var(--muted);white-space:nowrap;letter-spacing:1px}
.object-label{right:9%}.coordinates{right:9%}
.scroll-progress{position:fixed;right:0;top:0;height:100%;width:2px;background:var(--line);z-index:30}.scroll-progress>div{width:100%;height:100%;background:var(--orange);transform:scaleY(0);transform-origin:top}
.story-section{position:relative;min-height:110svh;margin:0 6% 0 4.2%;display:flex;align-items:center;border-top:1px solid var(--line);z-index:1;pointer-events:none}
.story-copy{width:55%;padding:110px 0 140px}.story-copy h2{font-size:clamp(70px,8vw,128px);font-weight:500;line-height:1;letter-spacing:-.075em;margin:0}.story-copy h2 em{font-family:Georgia,'Times New Roman',serif;font-weight:400;color:var(--orange)}
.story-copy p{font-size:13px;line-height:1.8;color:var(--muted);margin-top:30px}.story-copy .full-name{color:var(--ink);font-family:var(--mono);font-size:clamp(10px,1.2vw,18px);max-width:400px;overflow-wrap:anywhere;letter-spacing:-.4px}.chapter-note{font-family:var(--mono);font-size:8px;letter-spacing:1px;color:var(--muted);display:block;margin-top:40px}.story-copy button{pointer-events:auto}
.chapter-index{position:absolute;left:0;bottom:110px;font-family:var(--mono);font-size:9px;letter-spacing:2px;color:var(--muted)}.identity-section{min-height:105svh}
.scroll-arrow{animation:scroll-nudge 2s ease-in-out infinite}@keyframes scroll-nudge{50%{transform:translateY(5px)}}
@media(max-width:1100px){.header-note{display:none}.wordmark .name-wordmark{font-size:9px;max-width:205px}}
@media(max-width:760px){.header{height:75px;margin:0 8% 0 6%}.wordmark .name-wordmark{font-size:7px;max-width:168px}.wordmark{gap:9px}.wordmark svg{width:25px;height:25px}.status{display:none}.playground{margin:0 8% 0 6%;height:calc(100svh - 75px);min-height:760px}.intro{padding-top:35px}.name-rail{right:0;top:92px;bottom:105px;width:52px}.name-fragment{font-size:43px;line-height:53px;letter-spacing:-2px}.name-fragment.revealed{opacity:.5;transform:translateX(calc(var(--scatter-x) * .45)) rotate(var(--scatter-turn))}.rail-counter{font-size:5px;right:7px;bottom:89px}.story-section{min-height:110svh;margin:0 8% 0 6%;align-items:flex-start}.story-copy{padding-top:95px;width:100%}.story-copy h2{font-size:clamp(62px,12vw,86px)}.story-copy p{font-size:12px;margin-top:20px}.story-copy .full-name{font-size:10px;max-width:245px}.chapter-note{font-size:6px;margin-top:20px}.giant-index{font-size:60px;bottom:100px}.scene-hint{bottom:100px;font-size:6px}.footer{left:6%;right:8%;height:70px;min-height:0;padding:10px 0;flex-wrap:nowrap;gap:10px}.footer-signature{display:none}.mode-switch button{padding:9px 11px}.footer .controls{min-width:0}.effect-actions{gap:4px}.footer .sound-button{padding:3px}.warp-button{font-size:8px;padding:12px 10px;gap:8px}.bottom-line{padding-bottom:90px}.orbit-decoration{top:550px}.object-label{top:415px;right:11%}.coordinates{top:570px;right:11%}.scene-fallback{position:fixed;top:auto;bottom:180px;right:23%;width:54%}}
@media(max-width:760px){.intro{width:calc(100% - 19px)}h1{font-size:clamp(50px,10.5vw,74px)}.object-label{top:450px;font-size:6px;right:15%}.object-label div span{font-size:5px}.scene-hint{font-size:5px;bottom:94px;left:43%}.coordinates{right:15%;top:600px;font-size:5px}.story-copy{width:calc(100% - 24px)}.story-copy h2{font-size:clamp(56px,11.5vw,82px)}.chapter-index{font-size:7px;bottom:100px}}
@media(max-width:360px){h1{font-size:10.8vw}.footer{gap:6px}.footer .mode-switch button{padding:8px 7px;font-size:8px;white-space:nowrap}.footer .warp-button{padding:11px 8px;font-size:7px;gap:5px}.effect-actions{gap:2px}.object-label{top:415px}}
@media(min-width:761px) and (max-width:1100px){h1{font-size:7.7vw}.intro{width:56%}.story-copy h2{font-size:7.7vw}.story-copy{width:55%}.control-label{display:none}}

/* Liquid glass: transparent surfaces, soft diffusion, and curved edge highlights. */
:root{--glass-fill:rgba(255,255,255,.24);--glass-edge:rgba(255,255,255,.72);--glass-shadow:rgba(65,48,29,.09);--glass-x:50%;--glass-y:35%}
body.dark{--glass-fill:rgba(255,255,255,.055);--glass-edge:rgba(255,255,255,.2);--glass-shadow:rgba(0,0,0,.24)}
.glass-surface{isolation:isolate;background:var(--glass-fill);border:1px solid var(--glass-edge);-webkit-backdrop-filter:blur(16px) saturate(145%);backdrop-filter:blur(16px) saturate(145%);box-shadow:0 10px 32px var(--glass-shadow),inset 0 1px 1px rgba(255,255,255,.7),inset 0 -1px 2px rgba(111,89,64,.08)}
.glass-surface:before{content:'';position:absolute;inset:0;border-radius:inherit;background:radial-gradient(ellipse at var(--glass-x) var(--glass-y),rgba(255,255,255,.24),transparent 65%);pointer-events:none;z-index:-1}
.glass-surface:after{content:'';position:absolute;inset:3px;border-radius:inherit;box-shadow:inset 0 1px 0 rgba(255,255,255,.38);pointer-events:none;z-index:-1}
.header.glass-surface{padding:0 20px;border-radius:0 0 24px 24px;border-top:0;background:linear-gradient(115deg,rgba(255,255,255,.28),var(--glass-fill));box-shadow:0 6px 25px var(--glass-shadow),inset 0 -1px 0 rgba(255,255,255,.48)}
.footer.glass-surface{bottom:12px;padding:0 20px;border-radius:30px;background:linear-gradient(130deg,rgba(255,255,255,.33),var(--glass-fill));-webkit-backdrop-filter:blur(22px) saturate(155%);backdrop-filter:blur(22px) saturate(155%)}
.mode-switch.glass-surface{position:relative;box-shadow:inset 0 1px 2px rgba(255,255,255,.7),0 3px 12px var(--glass-shadow)}
.mode-switch button.active{background:linear-gradient(145deg,#575850,#262723);color:#faf7ef;box-shadow:0 3px 9px rgba(35,30,24,.18),inset 0 1px 1px rgba(255,255,255,.38)}
.mode-switch button:hover:not(.active){background:rgba(255,255,255,.23)}
.warp-button.glass-surface{position:relative;background:linear-gradient(135deg,rgba(64,65,58,.9),rgba(28,31,25,.8));color:#faf7ef;border-color:rgba(255,255,255,.3);box-shadow:0 5px 15px rgba(35,30,24,.13),inset 0 1px 1px rgba(255,255,255,.4)}
.warp-button.glass-surface:hover,body.warping .warp-button.glass-surface{background:linear-gradient(130deg,rgba(244,137,83,.95),rgba(211,78,27,.88))}
.explore-button.glass-surface{position:relative;width:fit-content;padding:13px 18px;border-radius:24px;border-bottom:1px solid var(--glass-edge);box-shadow:0 5px 18px var(--glass-shadow),inset 0 1px 1px rgba(255,255,255,.65);transition:color .2s,transform .3s,box-shadow .3s}
.explore-button.glass-surface:hover{gap:27px;transform:translateY(-2px);box-shadow:0 9px 22px var(--glass-shadow),inset 0 1px 1px rgba(255,255,255,.85)}
.icon-button.glass-surface{position:relative;background:var(--glass-fill);box-shadow:0 4px 12px var(--glass-shadow),inset 0 1px 1px rgba(255,255,255,.8)}
.object-label.glass-surface{padding:10px 15px;border-radius:20px;gap:10px;box-shadow:0 8px 25px var(--glass-shadow),inset 0 1px 1px rgba(255,255,255,.7);-webkit-backdrop-filter:blur(8px) saturate(150%);backdrop-filter:blur(8px) saturate(150%)}
body.dark .header.glass-surface,body.dark .footer.glass-surface{background:linear-gradient(130deg,rgba(255,255,255,.085),rgba(23,25,21,.2))}
body.dark .glass-surface:before{opacity:.3}
body.dark .mode-switch button.active{background:linear-gradient(145deg,rgba(255,255,255,.28),rgba(255,255,255,.12));color:var(--ink)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.glass-surface{background:color-mix(in srgb,var(--paper) 90%,transparent)}}
@media(max-width:1100px){.header.glass-surface{padding:0 14px}.footer.glass-surface{padding:0 14px}.object-label.glass-surface{padding:9px 12px}}
@media(max-width:760px){.header.glass-surface{padding:0 10px;border-radius:0 0 20px 20px}.footer.glass-surface{bottom:10px;padding:0 8px;gap:6px;border-radius:25px}.footer .mode-switch button{padding:9px 8px;white-space:nowrap}.explore-button.glass-surface{padding:11px 15px}.object-label.glass-surface{padding:8px 10px;gap:6px}.object-label .label-cross{font-size:20px}.scene-hint{bottom:110px}}
@media(max-width:360px){.footer.glass-surface{padding:0 6px}.footer .mode-switch button{padding:8px 6px}.footer .warp-button{padding:11px 6px}.header.glass-surface{padding:0 8px}.header .wordmark{gap:7px}}