:root{color-scheme:dark;--bg:#080d12;--cyan:#7ccbd6;--white:#e4eaed;--muted:#a1b0b9}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--white);font-family:Arial,sans-serif}header{display:flex;align-items:center;gap:30px;padding:28px 4vw;border-bottom:1px solid #293c48}header img{width:110px;max-height:90px;object-fit:contain}header .brand{margin-left:auto}header .brand img{width:110px}h1{font-size:clamp(22px,2.2vw,35px);margin:8px 0;font-weight:500;letter-spacing:-.6px}.eyebrow{font-size:13px;letter-spacing:2px;color:var(--cyan);margin:0}nav{display:flex;gap:8px;padding:20px 4vw;overflow:auto}button{font:inherit;color:var(--white);cursor:pointer;border:1px solid #3b505d;border-radius:5px;background:#101b23;padding:11px 16px;white-space:nowrap}button:hover,button:focus-visible,a:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}button.active,button[aria-pressed=true]{border-color:var(--cyan);background:#16313c;color:#bceff4}nav button{font-size:14px}main{display:grid;grid-template-columns:minmax(0,1.8fr) minmax(320px,1fr);min-height:650px;padding:0 4vw 30px;gap:32px}.viewer{position:relative;min-height:640px;border:1px solid #263e4a;overflow:hidden;background:radial-gradient(ellipse at 50% 55%,#14222c 0%,#080d12 65%)}#canvas{position:absolute;inset:0}canvas{display:block;width:100%;height:100%;touch-action:none}.viewer-top{position:absolute;top:22px;left:24px;right:24px;display:flex;justify-content:space-between;pointer-events:none;font-size:13px;letter-spacing:1.2px;color:var(--cyan)}.micro{color:var(--muted)}.controls{position:absolute;bottom:66px;left:20px;right:20px;display:flex;gap:8px;flex-wrap:wrap}.controls button{font-size:13px;padding:9px 11px;background:#10212ce8}.controls label{display:flex;align-items:center;gap:8px;font-size:13px;background:#10212ce8;padding:8px 12px;border-radius:4px}input{accent-color:var(--cyan);width:110px}.gesture{position:absolute;bottom:15px;left:24px;right:24px;color:var(--muted);font-size:12px;line-height:1.5;pointer-events:none}#loading{position:absolute;left:50%;top:45%;transform:translate(-50%,-50%);background:#101f2ee8;border:1px solid var(--cyan);padding:20px;border-radius:8px;max-width:85%;text-align:center}aside{padding-top:12px}h2{font-size:clamp(27px,2.8vw,43px);margin:16px 0 24px;letter-spacing:-1px}.render{position:relative;background:#111b24}.render img{width:100%;display:block;aspect-ratio:1.6;object-fit:contain}.render span{position:absolute;bottom:12px;left:14px;background:#08111ed9;font-size:11px;letter-spacing:1px;padding:7px 9px}#description{font-size:17px;line-height:1.6;color:#bbc7ce;min-height:82px}.facts{border-top:1px solid #293c48;padding:20px 0;display:flex;flex-direction:column;gap:8px}.facts strong{font-size:25px}.facts span{font-size:13px;color:var(--muted)}a{color:var(--cyan);text-decoration:none}.download{display:block;background:#173442;border:1px solid var(--cyan);padding:15px;text-align:center;border-radius:5px;font-size:15px}.secondary{display:block;text-align:center;padding:16px;font-size:14px}footer{display:flex;justify-content:space-between;gap:20px;padding:24px 4vw;border-top:1px solid #293c48;color:var(--muted);font-size:12px}footer div{display:flex;gap:25px}@media(max-width:850px){header{padding:20px;gap:18px}header img{width:75px}header .brand img{width:78px}h1{font-size:23px}header .eyebrow{font-size:11px}nav{padding:18px 20px}main{grid-template-columns:1fr;padding:0 20px 24px;gap:24px}.viewer{min-height:530px}aside{padding:0}.gesture{font-size:11px}.controls{bottom:66px}footer{flex-direction:column;padding:24px 20px}#description{min-height:0}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto}}

@media(min-width:851px){main{height:calc(100dvh - 225px);min-height:560px;grid-template-columns:minmax(0,1fr) 330px;gap:24px}.viewer{min-height:0;height:100%;position:sticky;top:0}aside{height:100%;overflow-y:auto;overscroll-behavior:contain;padding-right:12px;scrollbar-width:thin}h2{font-size:31px}}@media(max-width:850px){.viewer{min-height:620px}.controls{bottom:65px;gap:6px}.controls button{padding:8px}}
#walk-pad{position:absolute;left:24px;top:70px;display:flex;gap:5px}#walk-pad[hidden]{display:none}#walk-pad button{touch-action:none;background:#10212cdd;min-width:44px;min-height:44px}.tour-note,#pad-status{font-size:12px;line-height:1.6;color:var(--muted)}button:disabled{opacity:.45;cursor:not-allowed}.controls{max-height:230px;overflow-y:auto;scrollbar-width:thin}#led-value{min-width:50px}
.walk-entry{position:absolute;top:65px;right:20px;background:#173442;z-index:2;border-color:var(--cyan)}

/* L5: controls belong to the independently scrolling side panel. */
aside .controls{position:static;display:flex;max-height:none;overflow:visible;margin:16px 0 4px;gap:8px}aside .controls label{width:100%;justify-content:space-between}aside .controls label input{flex:1;min-width:60px;max-width:130px}aside .controls button{flex:1;padding:10px;font-size:12px}.panel-section{border:1px solid #293c48;border-radius:8px;padding:14px;margin:0 0 14px;background:#0c161d}.panel-section summary{cursor:pointer;font-size:14px;color:var(--cyan);padding:3px 0}.panel-section summary:focus-visible{outline:2px solid var(--cyan)}.audio-picker{display:block;margin-top:16px;font-size:13px}.audio-picker input{display:block;width:100%;margin:12px 0;font-size:12px}#music-player{width:100%;height:40px}#music-status{font-size:12px;line-height:1.5;color:var(--muted);overflow-wrap:anywhere}#music-clear{margin-top:10px;font-size:12px}.gesture{background:#080d12c9;border-radius:4px;padding:6px 10px;max-width:520px}.walk-entry{padding:9px 12px;font-size:12px}@media(max-width:850px){.viewer{min-height:480px;height:65dvh}.controls{bottom:auto}.walk-entry{top:58px;right:12px}.viewer-top{left:14px;right:14px;font-size:10px}.gesture{left:12px;right:12px;bottom:8px}.panel-section{margin-bottom:12px}}

.walk-settings{position:absolute;right:20px;top:108px;z-index:2;background:#10212cee;font-size:12px;padding:8px 12px}.walk-entry{right:20px}@media(max-width:850px){.walk-settings{right:12px;top:100px}}
/* R64: dual analog controls, independent pointer capture. */
#walk-pad:not([hidden]){position:absolute;bottom:42px;left:22px;right:22px;display:flex;justify-content:space-between;pointer-events:none;width:auto;transform:none;gap:20px;background:none;border:0;padding:0}#walk-pad[hidden]{display:none!important}.stick-unit{display:grid;justify-items:center;gap:7px;color:#c9f7ff;font-size:10px;letter-spacing:2px}.stick{width:112px;height:112px;position:relative;border:1px solid #70d9ef80;border-radius:50%;background:radial-gradient(circle,#1b354570,#07121bc9);box-shadow:inset 0 0 25px #69d9ff18;touch-action:none;pointer-events:auto;user-select:none}.stick:before,.stick:after{content:'';position:absolute;background:#a3dce12b}.stick:before{width:1px;top:15px;bottom:15px;left:50%}.stick:after{height:1px;left:15px;right:15px;top:50%}.stick span{position:absolute;left:50%;top:50%;width:45px;height:45px;border-radius:50%;transform:translate(-50%,-50%);background:radial-gradient(circle at 35% 25%,#71969f,#1a323e);border:1px solid #8ce5fa;box-shadow:0 4px 15px #0008;z-index:1}@media(max-width:600px){.stick{width:90px;height:90px}#walk-pad:not([hidden]){left:12px;right:12px;bottom:48px}.stick span{width:38px;height:38px}}
#walk-pad:not([hidden]){top:auto;height:auto;align-items:end}.stick-unit{grid-template-rows:auto auto;align-content:end}