:root { --bg:#0b0a09; --ink:#efe9dd; --ink2:rgba(239,233,221,.68); --gold:#c9a24a; --gold2:#e3c37a; --hair:rgba(239,233,221,.14); --ease:cubic-bezier(.32,.72,0,1); color-scheme: dark; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--ink); font-family: 'Manrope', system-ui, sans-serif; overflow: hidden; }
em { font-style: italic; color: var(--gold2); }
.ui { position: fixed; z-index: 1000; }
.eyebrow { display: inline-flex; align-items: center; gap: .6em; border: 1px solid var(--hair); border-radius: 999px; padding: .45em 1.1em; font-size: 10px; letter-spacing: .24em; text-transform: uppercase; color: var(--ink2); }
.eyebrow::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--gold); }
.btn { display: inline-flex; align-items: center; gap: 14px; border-radius: 999px; padding: 8px 8px 8px 24px; min-height: 52px; font: 600 12px 'Manrope'; letter-spacing: .12em; text-transform: uppercase; text-decoration: none; cursor: pointer; border: 0; transition: transform .5s var(--ease), background .4s var(--ease); }
.btn:active { transform: scale(.98); }
.btn-gold { background: var(--gold); color: var(--bg); }
.btn-gold:hover { background: var(--gold2); }
.btn-ghost { background: transparent; color: var(--ink); border: 1px solid var(--hair); padding: 8px 24px; }
.btn-ico { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: rgba(11,10,9,.14); font-style: normal; }

#loader { position: fixed; inset: 0; z-index: 2000; background: var(--bg); display: grid; place-items: center; text-align: center; transition: opacity .9s var(--ease), visibility 0s .9s; }
#loader.is-out { opacity: 0; visibility: hidden; }
#loader > div { display: flex; flex-direction: column; gap: 18px; align-items: center; }
.ld-mark { font-family: 'Instrument Serif', serif; font-size: 28px; letter-spacing: .32em; } .ld-mark b { color: var(--gold); font-weight: 400; }
.ld-bar { width: 160px; height: 1px; background: var(--hair); overflow: hidden; } .ld-bar i { display: block; height: 100%; width: 40%; background: var(--gold); animation: ld 1.4s var(--ease) infinite; }
@keyframes ld { from { transform: translateX(-100%); } to { transform: translateX(260%); } }
.ld-t { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink2); }

#intro { inset: 0; display: grid; place-items: center; padding: 16px; background: radial-gradient(80% 80% at 50% 50%, rgba(11,10,9,.55), rgba(11,10,9,.92)); transition: opacity .8s var(--ease), visibility 0s .8s; }
#intro.is-out { opacity: 0; visibility: hidden; }
.intro-card { max-width: 560px; padding: clamp(28px, 5vw, 52px); border-radius: 2rem; background: rgba(19,17,15,.72); border: 1px solid var(--hair); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); box-shadow: inset 0 1px 0 rgba(255,255,255,.06); }
.intro-card h1 { font-family: 'Instrument Serif', serif; font-weight: 400; font-size: clamp(48px, 9vw, 84px); line-height: .95; margin: .35em 0 .3em; }
.intro-card p { color: var(--ink2); font-weight: 300; line-height: 1.6; margin: 0 0 22px; }
.howto { list-style: none; padding: 0; margin: 0 0 28px; display: grid; gap: 10px; font-size: 13px; color: var(--ink2); }
.howto b { display: inline-block; min-width: 72px; color: var(--gold2); font-weight: 600; }
.intro-actions { display: flex; gap: 10px; flex-wrap: wrap; }

.back3d { top: 18px; left: 18px; padding: 12px 18px; border-radius: 999px; background: rgba(19,17,15,.7); border: 1px solid var(--hair); color: var(--ink); text-decoration: none; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
#hud { bottom: 24px; left: 50%; transform: translate(-50%, 20px); opacity: 0; padding: 10px 20px; border-radius: 999px; background: rgba(11,10,9,.72); border: 1px solid rgba(201,162,74,.35); color: var(--gold2); font-size: 12px; letter-spacing: .06em; pointer-events: none; transition: opacity .6s var(--ease), transform .6s var(--ease); white-space: nowrap; }
#hud.is-on { opacity: 1; transform: translate(-50%, 0); }

#panel { top: 16px; right: 16px; bottom: 16px; width: min(440px, calc(100vw - 32px)); overflow-y: auto; padding: 34px 32px; border-radius: 1.6rem; background: rgba(15,13,11,.88); border: 1px solid var(--hair); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); transform: translateX(calc(100% + 24px)); transition: transform .8s var(--ease); }
#panel.is-open { transform: none; }
#panel h2 { font-family: 'Instrument Serif', serif; font-weight: 400; font-size: 44px; line-height: 1; margin: 18px 0 8px; }
.p-sub { font-family: 'Instrument Serif', serif; font-style: italic; color: var(--gold2); font-size: 20px; margin: 0 0 18px; }
#p-body p { color: rgba(239,233,221,.84); font-weight: 300; line-height: 1.65; font-size: 15px; }
#p-body .p-hint { color: var(--gold); font-size: 13px; }
.p-q { font-family: 'Instrument Serif', serif; font-style: italic; font-size: 28px; line-height: 1.15; color: var(--gold2); margin: 22px 0; }
.p-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.panel-x { position: absolute; top: 16px; right: 16px; width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--hair); background: transparent; color: var(--ink); font-size: 22px; cursor: pointer; }

.pad { left: 26px; bottom: 26px; width: 120px; height: 120px; border-radius: 50%; border: 1.5px solid rgba(201,162,74,.7); background: rgba(11,10,9,.4); touch-action: none; }
.pad-knob { position: absolute; left: 35px; top: 35px; width: 50px; height: 50px; border-radius: 50%; background: rgba(227,195,122,.88); box-shadow: 0 0 14px rgba(201,162,74,.5); }
.a-enter-vr { left: 20px !important; right: auto !important; bottom: 20px !important; }
.a-enter-vr-button { background-color: #0b0a09 !important; border: 1px solid var(--gold) !important; border-radius: 12px !important; }
@media (pointer: coarse) { .a-enter-vr { bottom: 170px !important; } #panel { top: auto; height: 62dvh; left: 12px; right: 12px; width: auto; transform: translateY(calc(100% + 24px)); } #panel.is-open { transform: none; } }
@media (prefers-reduced-motion: reduce) { * { transition-duration: .001ms !important; animation-duration: .001ms !important; } }