:root{
  --bg:#141210; --panel:#1c1916; --line:#2e2923; --ink:#f3efe6; --mute:#a69f92;
  --gold:#c6a15b; --gold-ink:#1a1408; --err:#ff8a7a;
  --serif:'Cormorant Garamond',Georgia,serif; --sans:'Manrope',system-ui,-apple-system,sans-serif;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:400 16px/1.5 var(--sans);
  padding:0 16px max(24px,env(safe-area-inset-bottom));min-height:100svh}
main{max-width:560px;margin:0 auto}
.top{max-width:560px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:max(14px,env(safe-area-inset-top)) 0 10px}
.brand{font:600 15px var(--sans);letter-spacing:.18em}
.brand span{color:var(--gold)}
.steps{display:flex;gap:6px}
.steps i{width:22px;height:3px;border-radius:2px;background:var(--line)}
.steps i.on{background:var(--gold)}
.screen{display:none;padding-bottom:12px}.screen.on{display:block}
.eyebrow{color:var(--gold);font:600 12px var(--sans);letter-spacing:.16em;text-transform:uppercase;margin:18px 0 8px}
h1,h2{font:500 clamp(34px,9vw,46px)/1.05 var(--serif);margin:0 0 14px}
h2{font-size:clamp(28px,7.5vw,36px)}
.lead{color:var(--mute);margin:0 0 22px}
.tips{list-style:none;padding:0;margin:22px 0;color:var(--mute);font-size:14px}
.tips li{padding:9px 0 9px 22px;border-top:1px solid var(--line);position:relative}
.tips li::before{content:"";position:absolute;left:2px;top:17px;width:8px;height:8px;border:1.5px solid var(--gold);border-radius:50%}
.fine{color:var(--mute);font-size:12px;line-height:1.45;margin:14px 0}
.btn,.ghost{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:0 22px;border-radius:12px;
  font:600 15px var(--sans);cursor:pointer;border:1px solid transparent;text-align:center}
.btn{background:var(--gold);color:var(--gold-ink)}
.btn.big{display:flex;width:100%;min-height:58px;font-size:16px}
.ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.file{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.stage-wrap{margin-top:6px}
.stage{position:relative;margin:0 auto;border-radius:14px;overflow:hidden;background:#000;touch-action:none;
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.thumbs{display:flex;gap:8px;margin-top:10px}
.thumbs button{width:54px;height:54px;border-radius:10px;border:2px solid var(--line);background-size:cover;background-position:center;padding:0}
.thumbs button.on{border-color:var(--gold)}
.hint{color:var(--mute);font-size:12px;text-align:center;margin:10px 0}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:12px 14px 16px}
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:12px}
.tabs button{flex:1;background:none;border:0;color:var(--mute);font:600 14px var(--sans);padding:10px 0;border-bottom:2px solid transparent;cursor:pointer}
.tabs button.on{color:var(--ink);border-bottom-color:var(--gold)}
.tab{display:none}.tab.on{display:block}
.cards{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.card{background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:12px;text-align:left;color:var(--ink);cursor:pointer;font-family:var(--sans)}
.card b{display:block;font-size:14px}.card span{display:block;color:var(--mute);font-size:12px;margin-top:4px;line-height:1.35}
.card.on{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold) inset}
.seg{display:flex;background:var(--bg);border-radius:10px;padding:3px;margin-bottom:12px}
.seg button{flex:1;background:none;border:0;color:var(--mute);font:600 13px var(--sans);padding:10px 0;border-radius:8px;cursor:pointer}
.seg button.on{background:var(--line);color:var(--ink)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips button{background:var(--bg);border:1px solid var(--line);color:var(--ink);border-radius:999px;padding:10px 14px;font:600 13px var(--sans);cursor:pointer}
.chips button.on{border-color:var(--gold);color:var(--gold)}
.swatches{display:flex;gap:12px;margin-bottom:6px;flex-wrap:wrap}
.swatches button{width:44px;height:44px;border-radius:50%;border:2px solid var(--line);cursor:pointer;padding:0}
.swatches button.on{outline:2px solid var(--gold);outline-offset:3px}
.sm{color:var(--mute);font-size:13px;margin:6px 0 12px}
.rng{display:block;font-size:13px;color:var(--mute);margin:10px 0}
.rng b{float:right;color:var(--ink)}
input[type=range]{width:100%;margin:8px 0 0;accent-color:var(--gold);height:28px}
.chk{display:flex;gap:10px;align-items:center;font-size:14px;margin-top:14px}
.chk input{width:20px;height:20px;accent-color:var(--gold)}
.row{display:flex;gap:8px;margin:12px 0}.row .ghost{flex:1;min-height:44px}
.actions{display:flex;gap:10px;margin-top:14px}.actions .btn{flex:1}
.actions .ghost{flex:0 0 auto}
form label{display:block;font-size:13px;color:var(--mute);margin:12px 0}
form input:not([type=checkbox]),form textarea{display:block;width:100%;margin-top:6px;background:var(--panel);border:1px solid var(--line);
  border-radius:10px;color:var(--ink);padding:13px 12px;font:400 16px var(--sans)}
form input:focus,form textarea:focus{outline:2px solid var(--gold);outline-offset:0}
.consent{display:flex!important;gap:10px;align-items:flex-start;font-size:12px!important;line-height:1.45}
.consent input{width:22px;height:22px;flex:none;margin-top:1px;accent-color:var(--gold)}
.hp{position:absolute;left:-9999px;opacity:0}
.err{color:var(--err);font-size:14px;min-height:20px;margin:6px 0}
.summary{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:12px 14px;margin:0 0 6px;font-size:14px;color:var(--mute)}
.summary b{color:var(--ink)}
.results img{width:100%;border-radius:12px;margin:10px 0;display:block}
.loading{position:fixed;inset:0;background:rgba(20,18,16,.85);display:flex;align-items:center;justify-content:center;font-weight:600;z-index:9}
.loading[hidden]{display:none}
@media (prefers-reduced-motion:no-preference){.screen.on{animation:in .35s ease}@keyframes in{from{opacity:0;transform:translateY(8px)}}}
select{width:100%;margin-top:8px;background:var(--bg);color:var(--ink);border:1px solid var(--line);border-radius:10px;padding:12px;font:500 16px var(--sans)}

.stage video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:none}
#reticle{position:absolute;left:50%;top:50%;width:46px;height:46px;margin:-23px 0 0 -23px;border:2px solid var(--gold);border-radius:50%;pointer-events:none;box-shadow:0 0 0 1px rgba(0,0,0,.4)}
#reticle::after{content:"";position:absolute;left:50%;top:50%;width:6px;height:6px;margin:-3px 0 0 -3px;background:var(--gold);border-radius:50%}
#placeBtn{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);z-index:3}
#liveMsg{position:absolute;left:12px;right:12px;top:12px;background:rgba(20,18,16,.8);color:var(--ink);font-size:13px;padding:8px 12px;border-radius:10px;text-align:center;pointer-events:none}

/* Fullscreen live camera: video + 3D fill the whole screen, controls float over it */
body.live-on{overflow:hidden;padding:0}
body.live-on .top{position:fixed;left:0;right:0;top:0;z-index:20;max-width:none;background:rgba(15,14,12,.78);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);padding:max(10px,env(safe-area-inset-top)) 16px 10px}
body.live-on main{max-width:none}
body.live-on .stage-wrap{position:fixed;left:0;top:0;width:100vw;height:100dvh;margin:0;z-index:1}
body.live-on .stage{width:100vw!important;height:100dvh!important;border-radius:0;margin:0}
body.live-on .thumbs,body.live-on .hint{display:none}
body.live-on .sheet{position:fixed;left:0;right:0;bottom:0;z-index:20;max-height:46dvh;overflow-y:auto;background:rgba(15,14,12,.78);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);padding:10px 14px calc(85px + env(safe-area-inset-bottom));border-radius:18px 18px 0 0}
body.live-on .panel{background:transparent;border:0;padding:0}

body.live-on #liveMsg{top:calc(112px + env(safe-area-inset-top))}

/* ===== Light mode (architectural white) ===== */
:root{--bg:#FFFFFF;--panel:#F8FAFC;--line:#E2E8F0;--ink:#111827;--mute:#4B5563;--gold:#B8860B;--gold-ink:#FFFFFF;--err:#B91C1C}
body{background:#FFFFFF}
.btn{background:#111827;color:#FFFFFF;border-color:#111827}
.ghost{color:#111827;border-color:#CBD5E1;background:#FFFFFF}
.stage{background:linear-gradient(180deg,#F1F5F9 0,#F1F5F9 58%,#E2E8F0 58%,#E2E8F0 100%)}
.panel,.card,.summary{background:#FFFFFF;box-shadow:0 4px 20px rgba(0,0,0,.06)}
.card{border:1px solid #CBD5E1}
.card.on{border-color:#111827;box-shadow:0 0 0 1px #111827 inset,0 4px 20px rgba(0,0,0,.06)}
.tabs button{color:#64748B}
.tabs button.on{color:#111827;font-weight:700;border-bottom-color:#111827}
.chips button{background:#F1F5F9;color:#1E293B;border-color:#E2E8F0}
.chips button.on{background:#111827;color:#FFFFFF;border-color:#111827}
.seg{background:#F1F5F9}
.seg button{color:#1E293B}
.seg button.on{background:#111827;color:#FFFFFF}
.thumbs button.on{border-color:#111827}
form input:not([type=checkbox]),form textarea,select{background:#FFFFFF;border:1px solid #CBD5E1;color:#111827;box-shadow:0 4px 20px rgba(0,0,0,.06)}
.swatches button{border-color:#CBD5E1}
.swatches button.on{outline-color:#111827}
.steps i.on{background:#111827}
.loading{background:rgba(255,255,255,.85);color:#111827}
body.live-on .top{background:rgba(255,255,255,.85);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
body.live-on .sheet{background:rgba(255,255,255,.92);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-top:1px solid #E2E8F0;box-shadow:0 -8px 30px rgba(0,0,0,.08);padding-bottom:calc(90px + env(safe-area-inset-bottom))}
#liveMsg{background:rgba(255,255,255,.92);color:#111827;box-shadow:0 4px 20px rgba(0,0,0,.12)}
#reticle{border-color:#FFFFFF;box-shadow:0 0 0 1px rgba(0,0,0,.55),inset 0 0 0 1px rgba(0,0,0,.35)}
#reticle::after{background:#FFFFFF;box-shadow:0 0 0 1px rgba(0,0,0,.5)}

/* ===== Brand colors from the logo ===== */
:root{--gold:#4C78EC;--brand-dark:#2C4C94}
.btn{background:#2C4C94;border-color:#2C4C94}
.ghost{color:#2C4C94;border-color:#2C4C94}
.tabs button.on{border-bottom-color:#2C4C94;color:#2C4C94}
.chips button.on,.seg button.on{background:#2C4C94;border-color:#2C4C94;color:#FFFFFF}
.card.on{border-color:#2C4C94;box-shadow:0 0 0 1px #2C4C94 inset,0 4px 20px rgba(0,0,0,.06)}
.thumbs button.on{border-color:#2C4C94}
.swatches button.on{outline-color:#2C4C94}
.steps i.on{background:#2C4C94}
.eyebrow{color:#2C4C94}
.brand img{display:block;height:38px;width:auto}

/* Live mode: freeze the page and the bottom sheet (no sideways drag on iPhone) */
html.live-on,body.live-on{position:fixed;inset:0;width:100vw;height:100dvh;overflow:hidden!important;overscroll-behavior:none!important}
body.live-on .sheet{width:100vw!important;max-width:100vw!important;overflow-x:hidden!important;overscroll-behavior-x:none!important;touch-action:pan-y!important;box-sizing:border-box!important;}
body.live-on .sheet *{max-width:100%;box-sizing:border-box}
body.live-on .tab,body.live-on .panel,body.live-on .actions{width:100%;overflow-x:hidden;min-width:0}
body.live-on .swatches,body.live-on .chips,body.live-on .cards{flex-wrap:wrap}
body.live-on .rng{overflow:hidden}
body.live-on input[type=range]{width:100%;max-width:100%;margin-left:0;margin-right:0}
body.live-on .actions{flex-wrap:wrap}

/* Collapsible sheet, lock button, quick-angle chips */
.sheet-toggle{display:none;width:100%;margin:0 0 8px;padding:10px;border:0;border-radius:12px;background:#F1F5F9;color:#1E293B;font:600 14px var(--sans);cursor:pointer}
body.live-on .sheet-toggle{display:block}
body.live-on .sheet.min{max-height:52px;overflow:hidden;padding-top:6px;padding-bottom:0;bottom:calc(72px + env(safe-area-inset-bottom));border-radius:14px}
body.live-on .sheet.min > :not(.sheet-toggle){display:none}
body.live-on .sheet.min .sheet-toggle{margin:0}
#liveBtns{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);display:flex;gap:8px;z-index:3}
#liveBtns #placeBtn{position:static;transform:none}
body.live-on #liveBtns{top:calc(64px + env(safe-area-inset-top));bottom:auto}
#lockBtn{background:#FFFFFF}
#yawQuick button{flex:1 1 calc(50% - 8px)}

/* On-screen D-pad (unlocked) and quick view pills (locked) */
#dpad[hidden],#viewPills[hidden]{display:none!important}
body:not(.live-on) #dpad,body:not(.live-on) #viewPills{display:none!important}
#dpad{position:fixed;right:10px;bottom:240px;z-index:15;display:grid;grid-template-columns:repeat(4,46px);gap:6px;padding:6px;background:rgba(255,255,255,.9);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid #E2E8F0;border-radius:14px;box-shadow:0 4px 20px rgba(0,0,0,.12);touch-action:none}
#dpad button{display:flex;flex-direction:column;align-items:center;justify-content:center;width:46px;height:46px;padding:0;border:1px solid #E2E8F0;border-radius:10px;background:#F1F5F9;color:#1E293B;font:600 10px var(--sans);cursor:pointer;-webkit-user-select:none;user-select:none;touch-action:none}
#dpad button span{font-size:17px;line-height:1}
#dpad button i{font-style:normal;margin-top:1px}
#dpad button:active{background:#2C4C94;color:#fff}
#viewPills{position:fixed;left:10px;right:10px;bottom:240px;z-index:15;display:flex;flex-wrap:wrap;justify-content:center;gap:6px}
#viewPills button{padding:9px 12px;border:1px solid #CBD5E1;border-radius:999px;background:rgba(255,255,255,.92);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#1E293B;font:600 12px var(--sans);box-shadow:0 4px 14px rgba(0,0,0,.12);cursor:pointer}
#viewPills button:active{background:#2C4C94;color:#fff}