:root { --deep:#082824; --forest:#0b3b35; --mint:#b9ddc0; --gold:#e9c56a; --cream:#f7f0dc; --mono:"DM Mono",monospace; --soft:"Nunito",sans-serif; }
* { box-sizing:border-box; }
[hidden] { display:none!important; }
html, body { width:100%; min-height:100%; margin:0; overflow:hidden; background:var(--deep); color:var(--cream); font:600 1rem/1.5 var(--soft); }
button, a { font:inherit; }
#ar-stage { position:fixed; inset:0; }
#ar-stage canvas { display:block; width:100%; height:100%; }
.ar-header { position:fixed; z-index:4; top:0; left:0; right:0; min-height:68px; padding:max(1rem,env(safe-area-inset-top)) 1rem 0; display:flex; align-items:center; gap:1rem; pointer-events:none; }
.ar-header a { pointer-events:auto; width:42px; height:42px; display:grid; place-items:center; border:1px solid rgba(247,240,220,.32); border-radius:50%; background:rgba(8,40,36,.8); color:var(--cream); text-decoration:none; backdrop-filter:blur(12px); }
.ar-header span { font:500 .65rem var(--mono); letter-spacing:.11em; text-shadow:0 1px 5px #000; }
.start-panel { position:fixed; z-index:3; inset:0; padding:clamp(6rem,14vh,9rem) 1.25rem 2rem; display:flex; flex-direction:column; align-items:flex-start; background:radial-gradient(circle at 80% 30%,#23685d 0,var(--forest) 35%,var(--deep) 72%); }
.eyebrow { margin:0; color:var(--gold); font:500 .7rem var(--mono); letter-spacing:.16em; }
h1 { margin:1rem 0 1.3rem; font-size:clamp(3.8rem,18vw,6.5rem); line-height:.82; letter-spacing:-.07em; }
h1 em { color:var(--mint); font-family:Georgia,serif; font-weight:400; }
.start-panel > p:not(.eyebrow,.support-note) { max-width:440px; color:rgba(247,240,220,.76); }
#start-ar { margin-top:1.25rem; min-height:54px; width:min(100%,420px); border:0; border-radius:12px; padding:.9rem 1.2rem; background:var(--gold); color:var(--deep); font-weight:800; cursor:pointer; }
#start-ar:disabled { opacity:.5; cursor:not-allowed; }
.support-note { max-width:430px; min-height:1.5rem; color:var(--mint); font-size:.88rem; }
.session-ui { position:fixed; z-index:5; inset:0; pointer-events:none; padding:max(5.5rem,calc(env(safe-area-inset-top) + 4.5rem)) 1rem max(1rem,env(safe-area-inset-bottom)); }
.placement-status { width:max-content; max-width:calc(100vw - 2rem); margin:0 auto; padding:.7rem 1rem; border-radius:99px; background:rgba(8,40,36,.84); color:var(--cream); text-align:center; font-size:.88rem; backdrop-filter:blur(12px); }
#reset-placement { position:absolute; pointer-events:auto; left:50%; bottom:max(1rem,env(safe-area-inset-bottom)); transform:translateX(-50%); min-width:150px; min-height:48px; border:1px solid rgba(247,240,220,.4); border-radius:10px; background:rgba(8,40,36,.88); color:var(--cream); }
.loading-model { position:fixed; z-index:6; left:50%; bottom:2rem; transform:translateX(-50%); color:var(--mint); font:500 .7rem var(--mono); letter-spacing:.08em; }
.loading-model.ready { display:none; }
@media (min-width:700px) { .start-panel { padding-left:8vw; } }
@media (prefers-reduced-motion:reduce) { * { scroll-behavior:auto!important; } }