:root{color-scheme:dark;--green:#7bdb4e;--background:#171916;--panel:#252723;--text:#f7f8f5;--muted:#b4b8ae;--line:rgba(255,255,255,.12);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-synthesis:none}
*{box-sizing:border-box}
html,body{margin:0;min-width:280px;min-height:100%;background:var(--background);color:var(--text)}
body{height:100svh;overflow:hidden}
button,input,a{-webkit-tap-highlight-color:transparent}
button,input{font:inherit}
button{color:inherit;cursor:pointer}
button:disabled{opacity:.6;cursor:wait}
button,a,input{-webkit-touch-callout:none}
button:focus-visible,a:focus-visible,input:focus-visible,canvas:focus-visible{outline:3px solid var(--green);outline-offset:5px}
button svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
[hidden]{display:none!important}
#experience{position:fixed;inset:0;isolation:isolate;overflow:hidden}
#scene{position:absolute;inset:0;width:100%;height:100%;touch-action:none;cursor:grab;outline-offset:-5px}
#scene:active{cursor:grabbing}
#fallback-image{position:absolute;left:50%;top:43%;transform:translate(-50%,-50%);width:min(78vw,52vh,510px);height:auto;border-radius:28px}
.chrome{transition:opacity .24s,transform .3s}
.topbar{position:absolute;inset:0 0 auto;display:flex;justify-content:space-between;align-items:center;padding:calc(28px + env(safe-area-inset-top)) 36px 22px;pointer-events:none;background:linear-gradient(#171916c9,transparent)}
.topbar>*{pointer-events:auto}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--text);font-size:17px;letter-spacing:-.4px}
.brand img{border-radius:50%;border:1px solid #7bdb4e5c}
.brand strong,.dialog-brand strong{color:var(--green);font-weight:600}
.brand small{display:block;font-size:12px;letter-spacing:1.7px;font-weight:500;color:var(--muted);margin-top:5px}
.icon-button{display:inline-flex;align-items:center;justify-content:center;flex:0 0 46px;width:46px;height:46px;border:1px solid var(--line);border-radius:14px;background:#ffffff06;transition:background .16s,border-color .16s,transform .16s}
.icon-button:hover{background:#ffffff10;border-color:#ffffff30}
.icon-button:active,.button:active{transform:scale(.97)}
.help-button{border-radius:50%;background:#191b1880}
.view-label{position:absolute;top:calc(117px + env(safe-area-inset-top));left:50%;transform:translateX(-50%);display:flex;gap:13px;align-items:center;color:#aeb5a5;font-size:12px;letter-spacing:1.9px;white-space:nowrap;pointer-events:none}
.label-line{width:26px;height:1px;background:#7bdb4e65}
#angle-label{font-variant-numeric:tabular-nums;min-width:28px;color:var(--green);letter-spacing:0}
.bottom-panel{position:absolute;bottom:calc(24px + env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);width:min(620px,calc(100% - 40px));text-align:center}
.bottom-panel::before{content:"";position:absolute;inset:-45px -35px -45px;z-index:-1;background:radial-gradient(ellipse at bottom,#0d130bec 15%,#0d130b99 50%,transparent 75%);pointer-events:none}
.intro h1{font-weight:500;font-size:clamp(1.5rem,2.5vw,2rem);line-height:1.13;letter-spacing:-1.1px;margin:0 0 10px;text-shadow:0 2px 20px #000}
.intro h1 span{color:var(--green)}
.intro p{font-size:1rem;line-height:1.5;color:#c0c5b9;margin:0 0 22px;text-shadow:0 1px 12px #000}
.control-dock{display:inline-flex;flex-direction:column;gap:14px;padding:12px;border-radius:23px;border:1px solid #ffffff1a;background:#252723ed;box-shadow:0 10px 48px #0003;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);max-width:100%}
.button-row{display:flex;align-items:center;justify-content:center;gap:8px}
.button{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:46px;padding:11px 18px;border-radius:14px;border:1px solid var(--line);background:#ffffff08;font-size:14px;font-weight:550;line-height:1.3;white-space:nowrap;transition:background .16s,transform .16s,border-color .16s}
.button:hover{background:#ffffff13}
.primary{background:var(--green);border-color:var(--green);color:#19300e;font-weight:650}
.primary:hover{background:#8de55b;border-color:#8de55b}
.pick-button{padding-inline:17px}
.manual-control{display:flex;align-items:center;gap:15px;padding:1px 5px 3px}
.manual-control label{font-size:14px;color:var(--muted)}
.manual-control output{font-size:14px;width:35px;text-align:right;color:#d3d9cd;font-variant-numeric:tabular-nums}
input[type=range]{appearance:none;-webkit-appearance:none;height:24px;min-width:70px;flex:1;background:transparent;cursor:ew-resize;width:150px}
input[type=range]::-webkit-slider-runnable-track{height:3px;background:#ffffff29;border-radius:3px}
input[type=range]::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:16px;height:16px;background:var(--green);border-radius:50%;margin-top:-6.5px;box-shadow:0 0 0 4px #7bdb4e0d}
input[type=range]::-moz-range-track{height:3px;background:#ffffff29;border-radius:3px}
input[type=range]::-moz-range-thumb{height:16px;width:16px;border:0;background:var(--green);border-radius:50%}
.micro-note{font-size:12px;color:#9da591;margin:14px 0 0;line-height:1.4}
.reopen-button{position:absolute;bottom:calc(22px + env(safe-area-inset-bottom));right:22px;display:flex;align-items:center;gap:8px;border:1px solid #ffffff24;border-radius:100px;min-height:44px;padding:10px 15px;background:#171916b8;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);font-size:14px}
.reopen-button svg{width:19px;height:19px}
body[data-controls=hidden] .chrome{opacity:0;pointer-events:none}
body[data-controls=hidden] .chrome *{pointer-events:none}
body[data-controls=hidden] .topbar{transform:translateY(-20px)}
body[data-controls=hidden] .bottom-panel{transform:translate(-50%,20px)}
.toast{position:absolute;top:calc(100px + env(safe-area-inset-top));left:50%;transform:translateX(-50%);width:max-content;max-width:calc(100% - 32px);padding:13px 18px;border:1px solid #ffffff24;border-radius:14px;background:#30352cf5;box-shadow:0 6px 28px #0004;color:var(--text);font-size:14px;line-height:1.5;text-align:center;z-index:10}
dialog{width:min(440px,calc(100vw - 32px));max-height:calc(100svh - 32px);padding:36px;border:1px solid #ffffff1c;border-radius:28px;background:#232620;color:var(--text);box-shadow:0 28px 130px #0008;overflow-y:auto}
dialog::backdrop{background:#0c100abc;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.dialog-brand{display:flex;align-items:center;gap:11px;margin-bottom:42px;font-size:17px}
.dialog-brand img{border-radius:50%}
.dialog-kicker{font-size:12px;font-weight:600;letter-spacing:1.5px;color:#b7c1af;margin:0 0 19px}
dialog h2{font-weight:550;font-size:2.3rem;letter-spacing:-1.4px;line-height:1.08;margin:0 0 21px}
dialog h2 span{color:var(--green)}
dialog p{font-size:1rem;line-height:1.6;color:#c1c7ba;margin:0 0 20px}
dialog .permission-note{font-size:14px;color:#9ca891;margin-bottom:26px}
.dialog-primary{width:100%;min-height:50px;font-size:16px;justify-content:center}
.dialog-primary span{margin-left:auto;font-size:22px;font-weight:400}
.text-button{width:100%;border:0;background:none;min-height:44px;margin-top:11px;font-size:14px;color:#c1c7ba}
.text-button:hover{color:#fff}
.close-dialog{position:absolute;right:16px;top:16px;width:38px;height:38px;min-height:38px;background:transparent;border:0}
.steps{list-style:none;padding:0;margin:25px 0}
.steps li{display:flex;gap:14px;padding:15px 0;border-top:1px solid #ffffff12}
.steps li>span{font-size:12px;font-variant-numeric:tabular-nums;color:var(--green);padding-top:4px}
.steps strong{font-size:15px;line-height:1.5;font-weight:600}
.steps p{font-size:14px;line-height:1.5;margin:5px 0 0}
dialog .help-footnote{font-size:14px;color:#a8b09f;margin:0 0 25px}
.reference-credit{display:block;margin-top:23px;font-size:12px;text-align:center;color:#adb8a1;text-underline-offset:4px}
.noscript{position:fixed;inset:30%;padding:25px;background:var(--panel);font-size:18px;line-height:1.6}
@media(hover:hover){.button:hover,.icon-button:hover{border-color:#ffffff38}.primary:hover{border-color:var(--green)}}
@media(max-width:600px){.topbar{padding:calc(20px + env(safe-area-inset-top)) 22px 18px}.brand{font-size:16px;gap:10px}.brand img{width:39px;height:39px}.brand small{font-size:12px;letter-spacing:1.05px;margin-top:4px}.help-button{width:40px;height:40px;flex-basis:40px}.view-label{top:calc(107px + env(safe-area-inset-top));font-size:12px;letter-spacing:1.3px}.bottom-panel{bottom:calc(18px + env(safe-area-inset-bottom));width:calc(100% - 32px)}.intro h1{font-size:1.6rem;letter-spacing:-.8px}.intro p{font-size:1rem;margin:0 9px 20px}.control-dock{width:100%;gap:12px;border-radius:21px;padding:10px}.button-row{gap:7px;flex-wrap:wrap}.button{font-size:14px;padding:11px 13px}.pick-button{flex:1}.button-row .primary{flex-basis:100%;min-height:48px}.icon-button{width:44px;height:44px;flex-basis:44px;border-radius:12px}.manual-control{padding:1px 5px 2px}.micro-note{margin-top:12px}dialog{padding:30px 25px;border-radius:24px}dialog h2{font-size:2.2rem}.dialog-brand{margin-bottom:34px}}
@media(max-width:600px) and (max-height:750px){.view-label{display:none}.intro h1{font-size:1.4rem}.intro p{margin-bottom:12px;font-size:14px}.micro-note{margin-top:9px}.bottom-panel{bottom:calc(12px + env(safe-area-inset-bottom))}.button-row .primary{min-height:42px}.control-dock{padding:8px}.button,.icon-button{min-height:42px;height:42px}}
@media(max-height:500px) and (min-width:601px){.topbar{padding:16px 22px}.brand img{width:34px;height:34px}.brand small{display:none}.view-label{top:30px}.intro,.micro-note{display:none}.bottom-panel{bottom:16px;width:auto;max-width:calc(100% - 32px)}.control-dock{padding:8px;gap:6px}.manual-control{display:none}.button-row .primary{flex-basis:auto}.button-row{flex-wrap:nowrap}.button{min-height:42px}.icon-button{height:42px;width:42px;flex-basis:42px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important}}