@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');
:root{color-scheme:dark;--ink:#eaf3ec;--muted:#8e9d96;--bg:#0d1414;--card:#16201f;--line:#2b3a34;--lime:#baf28d;--gold:#ddaa70}
*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 15% -20%,#243b32 0%,transparent 35%),var(--bg);font-family:'DM Sans',Arial,sans-serif;color:var(--ink);-webkit-tap-highlight-color:transparent}button,input{font:inherit}button{cursor:pointer;touch-action:manipulation}button:disabled{opacity:.35;cursor:not-allowed}.app{min-height:100dvh}.masthead{height:85px;border-bottom:1px solid #25322e;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(20px,4vw,64px)}.brand{display:flex;gap:13px;align-items:center}.brand-mark{width:42px;height:42px;background:var(--lime);color:#16221d;border-radius:12px;display:grid;place-items:center;font-weight:800;font-size:26px;letter-spacing:-.08em}.brand-mark span{font-size:24px;color:#455b32}.brand-title{font-family:Manrope,sans-serif;font-size:21px;font-weight:800;letter-spacing:-.08em;line-height:1}.brand-title span{color:var(--lime)}.brand-sub{font-size:9px;letter-spacing:.16em;color:var(--muted);margin-top:7px}.connection{display:flex;align-items:center;gap:10px;color:#c0cec4;font-size:12px;background:#17241f;padding:10px 14px;border:1px solid #2b4438;border-radius:24px}.dot,.room-live i{display:inline-block;background:#b5de77;width:7px;height:7px;border-radius:50%;box-shadow:0 0 13px #76d37e}.dot.off{background:#e28f74;box-shadow:none}.shell{max-width:1510px;margin:0 auto;padding:38px clamp(20px,4vw,64px) 22px}.intro{display:grid;grid-template-columns:1fr 320px;gap:30px;align-items:end;margin-bottom:35px}.eyebrow{color:var(--lime);font-size:10px;letter-spacing:.2em;font-weight:800}h1,h2,p{margin:0}h1{font:800 clamp(30px,3.1vw,47px)/1.14 Manrope,sans-serif;letter-spacing:-.055em;margin-top:11px}h1 em{color:var(--lime);font-style:normal}.intro p{color:var(--muted);font-size:13px;max-width:560px;line-height:1.75;margin-top:11px}.room-panel{padding:19px 20px;background:#17211e;border:1px solid #304135;border-radius:16px}.panel-top,.room-line{display:flex;justify-content:space-between;align-items:center}.panel-top{font-size:10px;color:#91a69b;letter-spacing:.14em;font-weight:800}.room-live{font-size:11px;letter-spacing:0;font-weight:400;display:flex;align-items:center;gap:9px}.room-line{margin:15px 0 9px}.room-line strong{font:800 27px Manrope,sans-serif;letter-spacing:.08em}.small-button{border:1px solid #4d7252;border-radius:9px;color:var(--lime);background:#28382d;font-size:11px;font-weight:700;padding:11px}.room-hint{font-size:10px;color:#87998f}.workspace{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(300px,1fr);gap:18px}.viewport-card,.controls-panel{border:1px solid #2c3934;background:#141d1a;border-radius:19px;overflow:hidden}.stage{position:relative;height:clamp(420px,51vw,625px);background:radial-gradient(ellipse at 45% 45%,#344438 0,#1c2925 48%,#121d1a 86%);overflow:hidden;touch-action:none}#cameraVideo{position:absolute;width:100%;height:100%;object-fit:cover;inset:0;display:none;z-index:0}#renderView{position:absolute;inset:0;z-index:1}#renderView canvas{display:block;width:100%;height:100%;touch-action:none}#handCanvas{position:absolute;width:100%;height:100%;inset:0;z-index:2;pointer-events:none}.stage-top,.stage-bottom{pointer-events:none;position:absolute;z-index:4;left:20px;right:20px;display:flex;justify-content:space-between;align-items:center;gap:10px}.stage-top{top:20px}.stage-bottom{bottom:17px;color:#b1c0b6;font-size:10px;letter-spacing:.01em}.stage-bottom span:last-child{font-size:9px;letter-spacing:.08em;color:#869a8b}.mode-pill{font-size:9px;font-weight:800;color:#d0e8c6;background:#33473c;padding:8px 11px;border-radius:6px;letter-spacing:.1em}.mode-pill.unsafe{color:#ffe0ae;background:#594632}.mode-pill.good{color:#d3ffb3;background:#2a503e}.model-serial{font-size:10px;color:#aabbb0;letter-spacing:.17em}.stage-center{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:20px;pointer-events:none;z-index:3}.stage-center>*{opacity:0;transition:opacity .3s}.stage-camera .stage-center>*{opacity:1}.target-cross{font-size:35px;font-weight:200;color:#d4f4c8;text-shadow:0 2px 12px #243}.stage-center span{font-size:11px;letter-spacing:.02em;color:#e3f1e4;background:#22382d99;padding:7px 12px;border-radius:20px}.view-modes{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:13px 18px;background:#17221e;border-top:1px solid #2b3a34}.mode-label{font-size:10px;color:#91aa9b;letter-spacing:.14em;font-weight:800}.mode-buttons{display:flex;flex-wrap:wrap;gap:7px}.mode-button{color:#a5b5ac;background:transparent;border:1px solid #3a4b40;border-radius:8px;padding:10px 12px;font-size:11px;font-weight:700}.mode-button.active{background:#c0f28f;color:#1c3023;border-color:#c0f28f}.beta{font-size:8px;vertical-align:1px;color:#e9be77;margin-left:4px}.mode-button.active .beta{color:#4c4b35}#toast{position:absolute;z-index:10;bottom:55px;left:50%;transform:translateX(-50%);padding:10px 14px;color:#122016;background:#c7f5a4;border-radius:11px;font-size:12px;max-width:calc(100% - 40px);pointer-events:none;opacity:0;transition:opacity .2s;text-align:center}#toast.visible{opacity:1}.controls-panel{padding:26px 25px;display:flex;flex-direction:column;gap:18px}.control-header{display:flex;justify-content:space-between;gap:12px}.control-header h2{font:800 27px Manrope,sans-serif;letter-spacing:-.05em;margin-top:9px}.control-header p{margin-top:7px;color:var(--muted);font-size:12px}.item-num{color:#677c6e;font-size:11px;letter-spacing:.15em}.material-chip{display:flex;align-items:center;gap:10px;border:1px solid #304239;border-radius:10px;padding:11px 12px;font-size:11px;color:#c9d7cb}.wood-swatch{width:20px;height:20px;border:2px solid #e1bd92;background:repeating-linear-gradient(115deg,#b4824d 0,#bd8e57 4px,#d6a36b 7px);border-radius:50%}.material-arrow{margin-left:auto;font-size:15px;color:#9cb2a2}.section-label{display:flex;justify-content:space-between;font-size:10px;color:#a9bbac;font-weight:800;letter-spacing:.14em}.section-label span:last-child{color:var(--lime);letter-spacing:0}input[type=range]{appearance:none;width:100%;height:5px;border-radius:9px;background:#3d5144;outline:0;margin:0;touch-action:pan-y}input[type=range]::-webkit-slider-thumb{appearance:none;width:18px;height:18px;border-radius:50%;background:var(--lime);border:3px solid #193022;box-shadow:0 0 0 2px #badfa9}input[type=range]::-moz-range-thumb{width:13px;height:13px;border-radius:50%;background:var(--lime);border:3px solid #193022}.button-row{display:flex;gap:8px}.primary-btn{flex:1;display:flex;justify-content:space-between;align-items:center;background:var(--lime);border:1px solid var(--lime);border-radius:10px;padding:14px 18px;color:#1d3023;font-size:12px;font-weight:800}.primary-btn span{font-size:19px}.outline-btn{width:45px;background:#233029;color:#d1ddcf;border:1px solid #435b49;border-radius:9px;font-size:23px}.align-label{margin-top:4px}.adjust-row{display:flex;gap:7px}.adjust-row button{background:#26352b;border:1px solid #344c3b;color:#cce1cd;border-radius:9px;flex:1;font-size:18px;padding:11px 0}.adjust-row button:hover,.mode-button:hover:not(.active),.outline-btn:hover{background:#375044}.separator{height:1px;background:#2e3e35;margin:3px 0}.feature{display:flex;gap:10px;align-items:start}.feature-icon{font-size:19px;color:var(--lime);width:24px;flex:none}.feature>div:nth-child(2){flex:1}.feature strong{font-size:12px}.feature p{margin-top:5px;color:#92a599;font-size:10px;line-height:1.55}.feature-btn{border:1px solid #587552;background:#293e30;color:#d1f3be;border-radius:8px;padding:9px 11px;white-space:nowrap;font-size:10px;font-weight:800}.notice{margin-top:auto;padding:14px;background:#233029;border:1px solid #3c523c;border-radius:9px}.notice strong{color:#baf28d;font-size:10px}.notice p{color:#b1c1b4;font-size:10px;line-height:1.65;margin-top:5px}.footer{display:flex;justify-content:space-between;gap:15px;margin-top:20px;color:#687d70;font-size:9px;letter-spacing:.15em}.footer a{color:#b5d49f;text-decoration:none;letter-spacing:0}
@media(max-width:970px){.workspace{grid-template-columns:1fr}.intro{grid-template-columns:1fr}.room-panel{max-width:520px}.stage{height:clamp(430px,70vw,620px)}.controls-panel{padding:22px}.shell{padding-top:25px}.view-modes{flex-wrap:wrap}}
@media(max-width:610px){.masthead{height:66px;padding:0 14px}.brand-mark{width:35px;height:35px;font-size:21px}.brand-title{font-size:18px}.brand-sub{font-size:8px}.connection{font-size:10px;padding:8px}.shell{padding:22px 10px}.intro{padding:0 8px;margin-bottom:17px;gap:18px}h1{font-size:30px}.intro p{font-size:12px}.room-panel{padding:14px}.workspace{gap:12px}.stage{height:clamp(350px,115vw,560px)}.stage-top,.stage-bottom{left:13px;right:13px}.stage-bottom{font-size:9px}.stage-bottom span:last-child{display:none}.view-modes{align-items:start;padding:12px}.mode-buttons{width:100%;justify-content:space-between;flex-wrap:nowrap}.mode-button{font-size:10px;padding:9px 6px}.mode-label{display:none}.controls-panel{padding:18px 17px}.room-line strong{font-size:24px}.footer{padding:0 5px;line-height:1.4}.footer span{max-width:65%}}

.quest-mode{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;background:#304c35;color:#d5fda9;border-color:#598365;white-space:nowrap}
@media(max-width:610px){.mode-buttons{flex-wrap:wrap}.mode-button{flex:1 1 43%;white-space:normal}}