:root{color:#283e35;font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;background:#ebe9e2;font-family:Inter,Segoe UI,Malgun Gothic,sans-serif;font-weight:400}*{box-sizing:border-box}body{margin:0}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible{outline-offset:5px;outline:3px solid #7c9865}[hidden]{display:none!important}#app{max-width:1600px;padding:0 max(28px,env(safe-area-inset-right)) 0 max(28px,env(safe-area-inset-left));margin:auto}.header{border-bottom:1px solid #283e3524;justify-content:space-between;align-items:center;height:108px;display:flex}.brand{letter-spacing:-1px;align-items:center;gap:12px;font-size:22px;font-weight:600;display:flex}.brand-icon{color:#f2f0df;background:#2b4439;border-radius:12px;place-items:center;width:39px;height:42px;font-size:29px;font-weight:500;display:grid}.brand-ai{vertical-align:super;letter-spacing:.6px;margin-left:5px;font-size:10px}.phase-tag{letter-spacing:1.2px;font-size:11px}.phase-tag span{color:#7b8177}.layout{grid-template-columns:.88fr 1.12fr;align-items:center;gap:7%;min-height:calc(100svh - 177px);padding:44px 5% 48px;display:grid}.intro{padding-bottom:12px}.eyebrow{letter-spacing:2px;align-items:center;gap:10px;margin-bottom:34px;font-size:9px;line-height:1.7;display:flex}.eyebrow span{background:#678167;border-radius:50%;flex-shrink:0;width:6px;height:6px}h1{letter-spacing:-3px;word-break:keep-all;margin:0 0 24px;font-size:clamp(40px,4.5vw,70px);font-weight:500;line-height:1.24}.description{color:#6c766b;letter-spacing:-.4px;margin-bottom:48px;font-size:17px;line-height:1.9}.phase-note{border-top:1px solid #283e3524;gap:16px;padding-top:23px;display:flex}.step-number{border:1px solid #97a28f;border-radius:50%;flex-shrink:0;place-items:center;width:30px;height:30px;font-size:11px;display:grid}h2{margin:5px 0 12px;font-size:14px;font-weight:600}.phase-note p{color:#70766d;word-break:keep-all;font-size:12px;line-height:1.9}.specs{flex-wrap:wrap;gap:8px;margin-top:26px;display:flex}.specs span{border:1px solid #c6cbbd;border-radius:4px;padding:7px 10px;font-size:10px}.scope-note{color:#7b8277;margin-top:17px;font-size:10px;line-height:1.8}.stage{background:#f1f0e9;border:1px solid #b9c1b3;border-radius:18px;min-width:0;overflow:hidden;box-shadow:0 24px 54px #2937280c}.stage-top{letter-spacing:1.6px;justify-content:space-between;gap:10px;padding:19px 22px;font-size:9px;display:flex}.stage-top span:first-child{align-items:center;gap:7px;display:flex}.stage-top i{background:#6d876c;border-radius:50%;width:5px;height:5px}.viewport{background:#d9d9ce;height:clamp(380px,62svh,720px);position:relative;overflow:hidden}.viewport canvas{width:100%;height:100%;display:block}.scene-label{text-align:center;pointer-events:none;position:absolute;bottom:25px;left:0;right:0}.scene-label span{letter-spacing:2px;color:#526450;margin-bottom:9px;font-size:8px;display:block}.scene-label strong{color:#405240;font-size:12px;font-weight:400}.stage-bottom{justify-content:space-between;align-items:center;gap:12px;padding:17px 18px;display:flex}.stage-bottom p{word-break:keep-all;margin:0;font-size:10px;line-height:1.7}.stage-bottom p:before{content:"";background:#7f9470;border-radius:50%;width:5px;height:5px;margin-right:7px;display:inline-block}.stage-bottom p[data-state=error]{color:#953d33}.stage-bottom p[data-state=error]:before{background:#a0463a}button{color:#4c5d46;white-space:nowrap;cursor:pointer;background:0 0;border:1px solid #bec8b6;border-radius:6px;min-height:44px;padding:9px 11px;font-size:10px}button:hover,button[aria-pressed=true]{background:#dfe4d5}.debug-panel{color:#f2f7e8;pointer-events:none;background:#24382de8;border:1px solid #f8fff025;border-radius:8px;max-width:290px;padding:15px;font-size:11px;position:absolute;top:14px;left:14px;right:14px}.debug-title{letter-spacing:1.5px;margin-top:0;font-size:9px}.debug-panel output{white-space:pre-line;font-family:Consolas,monospace;line-height:1.9}.debug-panel p:last-child{color:#bdccb8;margin-bottom:0;font-size:9px}footer{letter-spacing:1.1px;color:#77816f;border-top:1px solid #283e3524;justify-content:space-between;align-items:center;gap:14px;height:69px;font-size:9px;display:flex}footer span:nth-child(2){letter-spacing:0}@media (width>=1200px){#app{padding-left:64px;padding-right:64px}}@media (width<=760px){#app{padding-left:max(20px,env(safe-area-inset-left));padding-right:max(20px,env(safe-area-inset-right));padding-bottom:env(safe-area-inset-bottom)}.header{height:76px}.brand{font-size:19px}.brand-icon{width:33px;height:36px;font-size:25px}.phase-tag{font-size:9px}.layout{flex-direction:column;gap:24px;min-height:0;padding:30px 0;display:flex}.intro{width:100%;padding:0}.eyebrow{letter-spacing:1.4px;margin:0 0 15px;font-size:8px}h1{letter-spacing:-2px;margin-bottom:12px;font-size:37px;line-height:1.2}h1 br{display:none}.description{margin:0;font-size:13px;line-height:1.75}.description br,.phase-note,.specs,.scope-note{display:none}.stage{border-radius:14px;width:100%}.stage-top{padding:16px;font-size:8px}.viewport{height:clamp(320px,54svh,570px)}.stage-bottom{gap:6px;padding:10px 12px}.stage-bottom p{font-size:9px}button{padding:8px;font-size:9px}footer{flex-wrap:wrap;gap:10px;height:auto;min-height:66px;padding:18px 0;font-size:8px}footer span:nth-child(2){display:none}}@media (width<=360px){h1{font-size:32px}#app{padding-left:14px;padding-right:14px}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important}}@media (width<=760px){h1 br{display:block}}.sr-only{clip:rect(0,0,0,0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.experience-controls,.tracking-controls{background:#f5f4ec;border-bottom:1px solid #283e3518;align-items:center;gap:10px;padding:9px 18px;font-size:10px;display:flex}.experience-controls label{align-items:center;gap:8px;font-weight:600;display:flex}.experience-controls span{color:#66725f;flex:1}.experience-controls select{color:#405744;background:#faf9f3;border:1px solid #b8c3b2;border-radius:6px;min-height:36px;padding:0 28px 0 9px}.tracking-controls{background:#eef0e5;justify-content:space-between}.tracking-controls>div{gap:3px;display:grid}.tracking-controls strong{font-size:11px}.tracking-controls span{color:#66725f;font-size:9px}.tracking-controls span[data-tracking=active]{color:#3f7049}.tracking-controls span[data-tracking=denied],.tracking-controls span[data-tracking=error]{color:#92453b}.conversation{background:#f7f6ef;border-bottom:1px solid #283e3518;padding:11px 18px}.conversation-head{align-items:center;gap:12px;margin-bottom:8px;display:flex}.conversation-head strong{font-size:11px}.conversation-head span{color:#68745e;font-size:9px}.conversation-head span[data-ai=listening],.conversation-head span[data-ai=thinking],.conversation-head span[data-ai=speaking]{color:#406c4a}.conversation-head span[data-ai=error]{color:#93483d}.chat-log{gap:6px;max-height:104px;display:grid;overflow:auto}.chat-log:empty{display:none}.chat-log p{background:#ecefe5;border-radius:7px;grid-template-columns:78px 1fr;gap:8px;margin:0;padding:7px 9px;font-size:10px;line-height:1.55;display:grid}.chat-log p[data-role=user]{background:#e7e4da}.chat-log strong{color:#49604e;font-size:9px}.composer{grid-template-columns:1fr auto auto auto;gap:6px;display:grid}.composer input{color:#344a3b;background:#fffef9;border:1px solid #b8c3b2;border-radius:6px;min-width:0;padding:0 10px}.composer input:focus-visible,.experience-controls select:focus-visible{outline-offset:2px;outline:3px solid #7c9865}@media (width<=760px){.viewport{height:clamp(300px,48svh,500px)}.experience-controls,.tracking-controls,.conversation{padding:8px 12px}.composer{grid-template-columns:1fr auto auto}.composer #stop-ai{grid-column:2/4}.chat-log{max-height:88px}.chat-log p{grid-template-columns:64px 1fr;font-size:9px}.experience-controls{flex-wrap:wrap}.tracking-controls{align-items:flex-start}}.room-controls{background:#eef0e5;border-bottom:1px solid #283e3518;padding:12px 18px 10px}.view-heading{align-items:center;gap:12px;font-size:11px;display:flex}.view-heading label{font-weight:600}.view-heading output{color:#68745e;flex:1;font-size:10px}.view-heading button{min-height:44px}.view-range{color:#65735b;align-items:center;gap:12px;font-size:10px;display:flex}.view-range input{accent-color:#45694f;cursor:ew-resize;touch-action:pan-y;flex:1;min-width:0;min-height:44px}.view-range input:focus-visible{outline-offset:2px;outline:3px solid #7c9865}.room-controls p{word-break:keep-all;color:#65705d;margin:2px 0 0;font-size:10px;line-height:1.7}.room-controls button:disabled,.view-range input:disabled{opacity:.45;cursor:not-allowed}@media (width<=760px){.room-controls{padding:8px 12px 10px}.room-controls p{font-size:9px}}.character-chip{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#405744;pointer-events:none;background:#eef2e7e8;border:1px solid #f9fff55e;border-radius:999px;align-items:center;gap:7px;max-width:min(65%,310px);padding:8px 11px;font-size:9px;line-height:1.4;display:flex;position:absolute;top:14px;right:14px}.character-chip i{background:#ad8b42;border-radius:50%;flex:none;width:6px;height:6px}.character-chip[data-character=ready] i{background:#4f7958}.character-chip[data-character=fallback]{color:#773e34}.character-chip[data-character=fallback] i{background:#a45142}@media (width<=760px){.character-chip{max-width:75%;padding:6px 9px;font-size:8px;top:9px;right:9px}}.motion-controls{background:#f5f4ec;border-bottom:1px solid #283e3518;justify-content:space-between;align-items:center;gap:12px;padding:12px 18px;display:flex}.motion-controls>div:first-child{gap:4px;min-width:0;display:grid}.motion-controls strong{font-size:11px}.motion-controls span{color:#68745e;word-break:keep-all;font-size:9px;line-height:1.5}.motion-controls span:before{content:"";background:#71866a;border-radius:50%;width:6px;height:6px;margin-right:7px;display:inline-block}.motion-controls span[data-motion=denied]:before,.motion-controls span[data-motion=error]:before{background:#a45142}.motion-controls span[data-motion=requesting]:before,.motion-controls span[data-motion=waiting]:before{background:#ad8b42}.motion-actions{flex:none;gap:7px;display:flex}.motion-actions button:disabled{opacity:.5;cursor:not-allowed}.touch-layout{grid-template-columns:1fr 72px;align-items:center;gap:14px;display:grid}.touch-pad{--x:50%;--y:50%;touch-action:none;cursor:move;background:linear-gradient(90deg,#0000 calc(50% - .5px),#aebaa650 50%,#0000 calc(50% + .5px)),linear-gradient(0deg,#0000 calc(50% - .5px),#aebaa650 50%,#0000 calc(50% + .5px));border:1px solid #aebaa6;border-radius:8px;height:62px;position:relative}.touch-pad:after{content:"";left:var(--x);top:var(--y);background:#45694f;border-radius:50%;width:12px;height:12px;position:absolute;transform:translate(-50%,-50%);box-shadow:0 0 0 3px #eef0e5}.touch-pad[data-disabled=true]{opacity:.42;pointer-events:none}.debug-panel output{display:block}.debug-panel output+output{border-top:1px solid #f8fff025;margin-top:8px;padding-top:8px}@media (width<=760px){.motion-controls{flex-direction:column;align-items:flex-start;padding:9px 12px}.motion-actions{width:100%}.motion-actions button{flex:1}.touch-layout{grid-template-columns:1fr 64px;gap:9px}.touch-pad{height:58px}}.stage{background:#090e14;border-color:#a990685c;box-shadow:0 28px 80px #0710182e}.stage-top{color:#d6c29c;background:#0b1118}.stage-top span:last-child{color:#8eb8c7}.viewport{background:#070b10}.scene-label span{color:#9ccbd8}.scene-label strong{color:#ecdfc6}.character-chip{color:#e7dcc6;background:#091219c9;border-color:#cfeef044}.character-chip[data-character=ready] i{background:#73d9cf;box-shadow:0 0 10px #73d9cf}@media (width<=760px){.viewport{height:min(68svh,660px)}html.standalone-app,html.standalone-app body,html.standalone-app #app{background:#070b10;width:100%;height:100%;overflow:hidden}html.standalone-app #app{padding:0}html.standalone-app .header,html.standalone-app .intro,html.standalone-app footer,html.standalone-app .experience-controls,html.standalone-app .tracking-controls,html.standalone-app .conversation,html.standalone-app .room-controls,html.standalone-app .stage-bottom{display:none}html.standalone-app .layout{height:100svh;min-height:100svh;padding:0;display:block}html.standalone-app .stage{width:100%;height:100svh;box-shadow:none;border:0;border-radius:0;position:relative}html.standalone-app .stage-top{z-index:4;padding:max(16px,env(safe-area-inset-top)) 18px 12px;background:linear-gradient(#071018e8,#0000);position:absolute;top:0;left:0;right:0}html.standalone-app .viewport{height:100svh}html.standalone-app .scene-label{bottom:max(132px,calc(env(safe-area-inset-bottom) + 122px))}html.standalone-app .motion-controls{z-index:5;left:14px;right:14px;bottom:max(14px,env(safe-area-inset-bottom));-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);color:#f2e8d4;background:#091219d9;border:1px solid #d5eced3d;border-radius:14px;padding:12px;position:absolute}html.standalone-app .motion-controls span{color:#b7c9c7}html.standalone-app .motion-controls button{color:#f2e8d4;background:#101c25cc;border-color:#d5eced55}html.standalone-app .character-chip{top:max(54px,calc(env(safe-area-inset-top) + 45px));max-width:calc(100% - 28px);left:14px;right:auto}}html.immersive-app,html.immersive-app body,html.immersive-app #app{background:#070b10;width:100%;height:100%;margin:0;overflow:hidden}html.immersive-app #app{max-width:none;padding:0}html.immersive-app .header,html.immersive-app .intro,html.immersive-app footer,html.immersive-app .stage-top,html.immersive-app .character-chip,html.immersive-app .scene-label,html.immersive-app .experience-controls,html.immersive-app .motion-controls,html.immersive-app .tracking-controls,html.immersive-app .conversation,html.immersive-app .room-controls,html.immersive-app .stage-bottom{display:none!important}html.immersive-app .layout{width:100%;height:100svh;min-height:100svh;padding:0;display:block}html.immersive-app .stage{width:100%;height:100svh;box-shadow:none;background:#070b10;border:0;border-radius:0}html.immersive-app .viewport{touch-action:none;width:100%;height:100svh;min-height:100svh}html.immersive-app .viewport canvas{width:100%;height:100%;display:block}