@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Playfair+Display:ital,wght@0,500;0,700;1,500;1,700&display=swap');

:root { --paper:#fff6dc; --ink:#f7edce; --teal:#80f1e7; --coral:#ff6c67; --wine:#35131d; --dark:#06141a; --line:rgba(255,246,220,.24); }
* { box-sizing:border-box; }
html, body, #experience { width:100%; min-height:100%; margin:0; overflow:hidden; background:var(--dark); }
body { color:var(--ink); font-family:"DM Mono", ui-monospace, monospace; }
button { color:inherit; font:inherit; cursor:pointer; }
#scene { position:fixed; inset:0; display:block; width:100%; height:100%; outline:none; touch-action:none; }
.grain { pointer-events:none; position:fixed; inset:0; opacity:.08; mix-blend-mode:soft-light; z-index:3; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 220 220' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E"); }
.topbar { z-index:4; position:fixed; inset:0 0 auto; padding:25px 32px; display:flex; align-items:center; justify-content:space-between; pointer-events:none; }
.brand, .topbar button { pointer-events:auto; }
.brand { display:inline-flex; align-items:center; gap:11px; color:var(--paper); text-decoration:none; font-size:11px; font-weight:500; letter-spacing:.18em; line-height:1.06; }
.brand-mark { position:relative; width:27px; height:27px; display:inline-block; border:1px solid var(--teal); border-radius:50%; transform:rotate(-17deg); }
.brand-mark::before { content:""; position:absolute; width:5px; height:5px; border-radius:50%; background:var(--coral); left:10px; top:10px; box-shadow:0 0 10px var(--coral); }
.brand-mark i { position:absolute; width:2px; height:2px; border-radius:50%; background:var(--teal); }.brand-mark i:nth-child(1){top:4px;left:10px}.brand-mark i:nth-child(2){right:4px;bottom:7px}.brand-mark i:nth-child(3){left:4px;bottom:6px}
.topbar-note { position:absolute; left:50%; transform:translateX(-50%); font-size:9px; letter-spacing:.16em; opacity:.8; }.topbar-note span { display:inline-block; width:6px;height:6px;border-radius:50%;background:var(--coral); margin-right:8px; box-shadow:0 0 9px var(--coral); }
.icon-button { border:1px solid var(--line); background:rgba(5,20,26,.35); backdrop-filter:blur(8px); padding:10px 12px; display:flex; align-items:center; gap:10px; font-size:9px; letter-spacing:.12em; transition:.25s ease; }.icon-button:hover { background:var(--teal); color:var(--dark); border-color:var(--teal); }.icon-button b { font-size:15px; line-height:0; font-weight:400; }
.intro { position:fixed; z-index:4; pointer-events:none; left:7.7vw; top:50%; width:min(395px, 40vw); transform:translateY(-43%); text-shadow:0 2px 24px #031015; }
.eyebrow { font-size:9px; letter-spacing:.19em; margin:0 0 14px; color:var(--teal); }
h1 { margin:0; font-family:"Playfair Display", Georgia, serif; font-size:clamp(42px,6.2vw,83px); font-weight:700; line-height:.86; letter-spacing:-.065em; } h1 em { color:var(--coral); }
.lede { max-width:305px; font-size:11px; line-height:1.7; margin:23px 0 25px; opacity:.86; }
.intro-actions { pointer-events:auto; display:flex; flex-wrap:wrap; gap:10px; }.primary-control,.secondary-control { min-height:42px; padding:0 13px; border:none; transition:transform .2s ease, background .2s ease; font-size:9px; letter-spacing:.09em; }.primary-control:hover,.secondary-control:hover { transform:translateY(-2px); }.primary-control { background:var(--paper); color:#122126; }.primary-control .spark { color:var(--coral); margin-right:6px; font-size:13px; }.secondary-control { background:rgba(5,20,26,.55); border:1px solid var(--line); }.secondary-control[aria-pressed="true"] { color:var(--dark); background:var(--teal); border-color:var(--teal); }
.model-hud { position:fixed; z-index:4; bottom:28px; left:32px; display:flex; gap:16px; align-items:flex-end; pointer-events:none; }.hud-status { display:flex; align-items:center; gap:8px; position:absolute; left:0; bottom:52px; white-space:nowrap; font-size:9px; letter-spacing:.12em; }.pulse { width:7px;height:7px;border-radius:50%; background:var(--teal); box-shadow:0 0 10px var(--teal); animation:pulse 1.5s infinite; }.control-row{display:flex;gap:6px; pointer-events:auto}.round-control{width:42px;height:42px;border:1px solid var(--line); border-radius:50%; background:rgba(5,20,26,.4); font-size:20px; transition:.2s}.round-control:hover{background:var(--coral); border-color:var(--coral); transform:rotate(-10deg)}.model-hud>p { margin:0; font-size:8px; letter-spacing:.1em; opacity:.58; white-space:nowrap; }
.tap-note { position:fixed; z-index:4; right:8vw; bottom:8vw; max-width:190px; display:flex; align-items:flex-start; gap:10px; opacity:0; transform:translateY(8px); transition:.5s ease; pointer-events:none; }.tap-note.show { opacity:1; transform:translateY(0); }.tap-note span{ color:var(--coral); font-size:18px; }.tap-note p{margin:0;font-size:9px;line-height:1.6}.tap-note b{color:var(--teal)}
.art-panel { z-index:6; position:fixed; top:83px; right:32px; width:min(340px,calc(100vw - 40px)); background:rgba(7,20,26,.94); border:1px solid var(--line); padding:14px; transform:translateX(calc(100% + 46px)); transition:transform .45s cubic-bezier(.2,.9,.2,1); box-shadow:0 30px 80px #0008; }.art-panel.open { transform:translateX(0); }.art-panel button { position:absolute; z-index:1; top:8px;right:8px;width:28px;height:28px;border-radius:50%;border:1px solid #ffffff55;background:#06141acc;font-size:19px;line-height:1; }.art-panel img { width:100%; display:block; aspect-ratio:1.5; object-fit:cover; }.art-panel p:last-child { font-size:10px;line-height:1.6;margin:11px 2px 2px;opacity:.78; }
.loader { z-index:10; position:fixed; inset:0; display:grid; place-content:center; justify-items:center; gap:16px; background:#06141a; transition:opacity .75s ease, visibility .75s ease; }.loader.done{opacity:0;visibility:hidden}.loader p{font-size:9px;letter-spacing:.2em}.loader-orbit{height:38px;width:38px;border:1px solid var(--teal);border-radius:50%;position:relative;animation:spin 1.1s linear infinite}.loader-orbit::before{content:"";position:absolute;width:6px;height:6px;border-radius:50%;background:var(--coral);right:1px;top:4px}.webgl-fallback { position:fixed; inset:0; z-index:11; background:#06141a; text-align:center; padding-top:45vh; }.webgl-fallback p{color:var(--coral);letter-spacing:.12em}.webgl-fallback small{opacity:.7}.noscript { position:fixed; z-index:99; inset:auto 20px 20px; color:#fff; }
@keyframes spin{to{transform:rotate(360deg)}}@keyframes pulse{50%{opacity:.35;transform:scale(.8)}}
@media (max-width:800px){.topbar{padding:18px}.topbar-note{display:none}.intro{left:24px;width:calc(100vw - 48px);top:auto;bottom:102px;transform:none}.intro h1{font-size:clamp(42px,14vw,62px)}.lede{font-size:10px;margin:16px 0}.model-hud{left:19px;bottom:17px}.model-hud>p{display:none}.hud-status{bottom:47px}.tap-note{right:20px;bottom:auto;top:88px;width:145px}.art-panel{top:64px;right:20px}.brand{font-size:9px}.icon-button span{display:none}.icon-button{width:36px;height:36px;padding:0;justify-content:center}.icon-button b{font-size:18px}.primary-control,.secondary-control{min-height:38px;padding:0 10px;font-size:8px}}