body{display:flex;flex-direction:column;justify-content:center;align-items:center;height:100vh;background-color:#2c3e50;margin:0;overflow:hidden;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;color:#fff;transition:background-color .3s ease}#top-bar{position:absolute;top:20px;left:50%;transform:translate(-50%);width:min(860px,calc(100vw - 320px));z-index:20}#ui{text-align:center;background:#000000a6;padding:15px 35px;border-radius:18px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 10px 25px #00000047;transition:background .3s ease,color .3s ease,box-shadow .3s ease}#side-panel{position:absolute;top:20px;left:20px;width:250px;z-index:20;background:#000000ad;border-radius:20px;padding:18px 16px;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 16px 35px #0000004d;display:flex;flex-direction:column;gap:18px;max-height:calc(100vh - 76px);overflow-y:auto;transition:background .3s ease,box-shadow .3s ease}.panel-section{display:flex;flex-direction:column;gap:10px}.panel-label{font-size:.78rem;text-transform:uppercase;letter-spacing:.18em;color:#dfe6e9;font-weight:700}#scene-nav{display:grid;gap:8px}.scene-button,.panel-button{width:100%;border:0;border-radius:14px;padding:10px 12px;background:#ffffff14;color:#ecf0f1;display:flex;align-items:center;gap:10px;font:inherit;cursor:pointer;text-align:left;transition:background .18s ease,transform .18s ease,box-shadow .18s ease}.scene-button:hover,.panel-button:hover,.scene-button:focus-visible,.panel-button:focus-visible{background:#ffffff29;transform:translateY(-1px);outline:none}.scene-button.active{background:#3498db47;box-shadow:inset 0 0 0 1px #ffffff24}h1{margin:0 0 10px;font-size:2.5rem;text-transform:uppercase;letter-spacing:2px;color:#ecf0f1;text-shadow:2px 2px 4px rgba(0,0,0,.5)}#volume-control-container{display:flex;align-items:center;gap:10px;justify-content:center;background:#ffffff14;padding:9px 12px;border-radius:14px}#volume-control-container label{font-size:.9rem;color:#bdc3c7;font-weight:700}#master-volume{cursor:pointer;width:100%}.controls{display:flex;flex-direction:column;gap:8px;align-items:center}p{font-size:1rem;color:#bdc3c7;margin:0;display:flex;align-items:center;gap:10px;justify-content:center;flex-wrap:wrap}.panel-copy{justify-content:flex-start;line-height:1.45;font-size:.95rem}.key-badge{display:inline-block;background:#e74c3c;color:#fff;padding:4px 10px;border-radius:5px;border-bottom:4px solid #c0392b;font-weight:700;transition:transform .05s,border-bottom-width .05s;font-size:.9rem;flex-shrink:0}.key-badge.pressed{transform:translateY(4px);border-bottom-width:0px}.key-badge.blue{background:#3498db;border-color:#2980b9}.key-badge.green{background:#2ecc71;border-color:#27ae60}.key-badge.purple{background:#9b59b6;border-color:#8e44ad}.key-badge.orange{background:#e67e22;border-color:#d35400}.key-badge.pink{background:#e84393;border-color:#d63384}svg{width:100%;max-width:1200px;height:100%;max-height:800px;-webkit-user-select:none;user-select:none;margin-top:110px}body.white-mode{background-color:#fff}body.white-mode #environment,body.white-mode #laundry-environment,body.white-mode #vacuum-environment,body.white-mode #mower-environment,body.white-mode #dish-environment,body.white-mode #birthday-environment,body.white-mode #elevator-outside{opacity:0}body.white-mode #ui,body.white-mode #side-panel{background:#ffffffe6;box-shadow:0 12px 28px #0000001a}body.white-mode h1{color:#2c3e50;text-shadow:none}body.white-mode p,body.white-mode #volume-control-container label,body.white-mode .panel-button,body.white-mode .scene-button{color:#4b5563}body.white-mode #volume-control-container,body.white-mode .scene-button,body.white-mode .panel-button{background:#2c3e5014}body.white-mode .scene-button.active{background:#3498db29}#environment,#laundry-environment,#vacuum-environment,#mower-environment,#dish-environment,#birthday-environment,#elevator-outside{transition:opacity .3s ease}.hidden{display:none!important}body.prickles-mode #top-bar{left:310px;right:20px;width:auto;transform:none}body.prickles-mode #canvas{position:absolute;left:310px;top:170px;width:calc(100vw - 330px);height:calc(100vh - 185px);max-width:none;max-height:none;margin:0}#scene-prickles text{font-family:Segoe UI,sans-serif;font-weight:700;pointer-events:none}#prickles-left,#prickles-right,#prickles-punch{cursor:pointer;outline:none}#prickles-left:focus-visible rect,#prickles-right:focus-visible rect,#prickles-punch:focus-visible rect{stroke:#fff;stroke-width:4px}@media(max-width:820px){body.prickles-mode #top-bar{left:12px;right:12px}body.prickles-mode #canvas{left:0;top:170px;width:100vw;height:calc(60vh - 170px);min-height:160px}body.prickles-mode #side-panel{max-height:30vh}}@media(max-width:1100px){#top-bar{width:min(860px,calc(100vw - 40px))}#side-panel{width:220px}svg{margin-top:145px}}@media(max-width:820px){body{justify-content:flex-start}#top-bar{top:12px;width:calc(100vw - 24px)}#ui{padding:14px 18px}h1{font-size:1.6rem}#side-panel{inset:auto 12px 12px;width:auto;max-height:42vh;overflow:auto}#scene-nav{grid-template-columns:repeat(2,minmax(0,1fr))}.scene-button{justify-content:center}svg{margin-top:180px;max-height:calc(100vh - 230px)}}@keyframes floatTitle{0%,to{transform:translateY(0)}50%{transform:translateY(-15px)}}@keyframes pulseText{0%,to{opacity:.4}50%{opacity:1}}@keyframes twinkle{0%,to{opacity:.2;transform:scale(.8)}50%{opacity:.8;transform:scale(1.2)}}body.vacuum-mode{background:#172e38}body.vacuum-mode #top-bar{left:320px;right:28px;width:auto;top:24px;transform:none}body.vacuum-mode #canvas{position:absolute;left:320px;top:220px;width:calc(100vw - 348px);height:calc(100vh - 244px);max-width:none;max-height:none;margin:0;touch-action:none}#vacuum-controls button{cursor:pointer;border-top:0;border-left:0;border-right:0;font-family:inherit;touch-action:none}#vacuum-controls button:focus-visible{outline:2px solid #ffdc91;outline-offset:3px}#vacuum-controls button.pressed{transform:translateY(2px)}.vac-power-hint{color:#95ada7;margin-left:8px}#scene-vacuum{cursor:crosshair}#scene-vacuum text{font-family:Segoe UI,sans-serif;pointer-events:none}body.vacuum-mode.white-mode{background:#fff}@media(min-width:821px)and (max-width:1100px){body.vacuum-mode #top-bar{left:290px;right:16px}body.vacuum-mode #canvas{left:285px;width:calc(100vw - 301px)}}@media(max-width:820px){body.vacuum-mode #top-bar{left:12px;right:12px;top:16px}body.vacuum-mode #canvas{left:8px;top:220px;width:calc(100vw - 16px);height:calc(100dvh - 410px)}body.vacuum-mode #side-panel{max-height:135px;padding:12px}body.vacuum-mode #scene-nav{grid-template-columns:repeat(3,minmax(0,1fr))}body.vacuum-mode .scene-button{padding:7px 5px;font-size:12px;gap:5px}.vac-power-hint{font-size:11px;margin-left:0}}#vacuum-controls.vac-ultra-ready #v-up-btn{box-shadow:0 0 14px #ffdb7a}#scene-vacuum.vac-ultra-ready #vacuum-chassis,#scene-vacuum.vac-ultra-ready #vacuum-nozzle{filter:url(#vac-ultra-glow)}body.white-mode .vac-power-hint{color:#465969}body.windy-mode{background:#253d36}body.windy-mode #top-bar{left:320px;right:24px;top:22px;width:auto;transform:none}body.windy-mode #ui{background:#19332ddd;border:1px solid #66876c55}body.windy-mode h1{color:#f5e6b7;font-size:clamp(22px,2.6vw,37px)}body.windy-mode #canvas{position:absolute;left:316px;top:174px;width:calc(100vw - 336px);height:calc(100dvh - 184px);max-width:none;max-height:none;margin:0}#scene-windy text{font-family:Segoe UI,sans-serif;pointer-events:none}#windy-controls .windy-action{display:inline-flex;align-items:center;gap:7px;white-space:nowrap}#windy-controls button{cursor:pointer;font:inherit;touch-action:manipulation}#windy-controls .key-badge{min-width:42px;min-height:38px;font-size:22px;background:#76a787;border:0;border-bottom:3px solid #4b7258;color:#102f28}#windy-controls button:disabled{opacity:.35;cursor:default}#windy-controls button:focus-visible{outline:3px solid #f5d185;outline-offset:3px}#windy-power{min-width:160px;color:#f5d58e;font-variant-numeric:tabular-nums}#windy-reset{background:#ffffff0d;color:#e8e4c6;border:1px solid #8a9f7f66;padding:9px 12px;border-radius:9px}#windy-reset span{margin-left:5px;font-size:10px;opacity:.6}body.windy-mode.white-mode{background:#fff}body.white-mode #windy-environment{opacity:0}@media(min-width:821px)and (max-width:1100px){body.windy-mode #top-bar{left:288px;right:16px}body.windy-mode #canvas{left:282px;width:calc(100vw - 298px)}}@media(max-width:820px){body.windy-mode #top-bar{left:10px;right:10px;top:10px}body.windy-mode #ui{padding:12px 8px}body.windy-mode #canvas{left:0;top:174px;width:100vw;height:calc(100dvh - 345px)}body.windy-mode #side-panel{max-height:128px;padding:12px}body.windy-mode #scene-nav{grid-template-columns:repeat(3,minmax(0,1fr))}body.windy-mode .scene-button{padding:6px 4px;font-size:12px;gap:4px}#windy-controls p{gap:7px;font-size:13px}#windy-power{min-width:116px}#windy-reset span{display:none}}body.laundry-mode{background:#213f49}body.laundry-mode #top-bar{left:316px;right:20px;top:20px;width:auto;transform:none}body.laundry-mode #ui{padding:16px 20px;background:#17353ee8;border:1px solid #8ac6b533}body.laundry-mode h1{margin:0 0 10px;color:#fff0cb;font-size:clamp(22px,2.4vw,34px)}body.laundry-mode #canvas{position:absolute;left:316px;top:202px;width:calc(100vw - 336px);height:calc(100dvh - 214px);max-width:none;max-height:none;margin:0}#scene-laundry text{font-family:Segoe UI,sans-serif;pointer-events:none}#laundry-controls p{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px;margin:8px 0;font-size:14px}#laundry-controls button{cursor:pointer;font:inherit;touch-action:manipulation}#laundry-controls .key-badge{min-width:34px;min-height:30px;margin:0}#laundry-controls [aria-pressed=true]{outline:2px solid #ffdf9c;outline-offset:2px}#laundry-controls button:focus-visible{outline:3px solid #ffdf9c;outline-offset:3px}body.laundry-mode.white-mode,body.laundry-mode.white-mode #ui{background:#fff}body.laundry-mode.white-mode h1{color:#28525a}@media(max-width:1100px)and (min-width:821px){body.laundry-mode #top-bar{left:288px;right:12px}body.laundry-mode #canvas{left:288px;width:calc(100vw - 300px);top:246px;height:calc(100dvh - 256px)}}@media(max-width:820px){body.laundry-mode #top-bar{left:10px;right:10px;top:10px}body.laundry-mode #ui{padding:10px 7px}body.laundry-mode #canvas{left:0;top:220px;width:100vw;height:calc(100dvh - 390px)}body.laundry-mode #side-panel{max-height:128px;padding:12px}body.laundry-mode #scene-nav{grid-template-columns:repeat(3,minmax(0,1fr))}body.laundry-mode .scene-button{padding:6px 4px;font-size:12px;gap:4px}#laundry-controls p{gap:6px;font-size:11px}#laundry-controls .key-badge{min-width:29px;min-height:28px}}body.airconditioner-mode{background:#203e3e}body.airconditioner-mode #top-bar{left:316px;right:20px;top:20px;width:auto;transform:none}body.airconditioner-mode #ui{background:#173634;padding:15px 16px;border:1px solid #729b8040}body.airconditioner-mode h1{color:#f1efd4;font-size:clamp(20px,2.5vw,34px)}body.airconditioner-mode #canvas{position:absolute;left:316px;top:190px;width:calc(100vw - 336px);height:calc(100dvh - 205px);max-width:none;max-height:none;margin:0}#airconditioner-controls p{font-size:14px;gap:8px}#airconditioner-controls button{font:inherit;font-weight:700;cursor:pointer;touch-action:manipulation}#airconditioner-controls [aria-pressed=true]{outline:2px solid #e9edbd;outline-offset:2px}#ac-power-status{color:#c5e7c2;font-weight:700}#scene-airconditioner text{font-family:Segoe UI,sans-serif;pointer-events:none;-webkit-user-select:none;user-select:none}.ac-part,.ac-tray-part{cursor:pointer;outline:none}.ac-part:hover,.ac-part:focus-visible{filter:drop-shadow(0 0 5px #dbb451)}.ac-tray-part:hover>rect,.ac-tray-part:focus-visible>rect{fill:#fffacb;stroke:#edcb7b;stroke-width:3px}.ac-part:focus-visible{outline:3px solid #d1a135}.ac-sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}body.airconditioner-mode.white-mode{background:#fff}body.airconditioner-mode.white-mode #ui{background:#f7faf4}body.airconditioner-mode.white-mode h1,body.white-mode #ac-power-status{color:#315c4f}@media(max-width:1100px)and (min-width:821px){body.airconditioner-mode #top-bar{left:304px;right:12px}body.airconditioner-mode #canvas{left:304px;width:calc(100vw - 316px);top:210px;height:calc(100dvh - 222px)}}@media(max-width:820px){body.airconditioner-mode #top-bar{left:10px;right:10px;top:10px}body.airconditioner-mode #ui{padding:10px 7px}body.airconditioner-mode #canvas{left:0;top:190px;width:100vw;height:calc(100dvh - 360px)}body.airconditioner-mode #side-panel{max-height:128px;padding:12px}body.airconditioner-mode #scene-nav{grid-template-columns:repeat(3,minmax(0,1fr))}body.airconditioner-mode .scene-button{padding:6px 4px;font-size:12px;gap:4px}#airconditioner-controls p{gap:5px;font-size:11px}#airconditioner-controls .key-badge{padding:5px 7px}}body.mixer-mode{background:#24453f}body.mixer-mode #top-bar{left:316px;right:20px;top:20px;width:auto;transform:none}body.mixer-mode #ui{padding:17px 16px;background:#193c35;border:1px solid #9eb8a52b;box-shadow:none}body.mixer-mode h1{font-size:clamp(21px,2.3vw,32px);color:#fff0cf;text-transform:none;letter-spacing:-.5px;text-shadow:none;margin-bottom:13px}body.mixer-mode #canvas{position:absolute;left:310px;top:148px;width:calc(100vw - 324px);height:calc(100dvh - 160px);max-width:none;max-height:none;margin:0}#mixer-controls .mixer-keys{gap:8px}#mixer-controls button{border:1px solid #9db7a74d;border-bottom-width:3px;background:#31564b;color:#fff1d0;border-radius:10px;padding:8px 13px;font:inherit;font-weight:800;cursor:pointer;touch-action:none;-webkit-user-select:none;user-select:none}#mixer-controls button span{font-size:12px;font-weight:500;margin-left:5px}#mixer-controls #mixer-space-btn{background:#db856b;border-color:#9e5e4c;color:#281f1a}#mixer-controls [aria-pressed=true]{transform:translateY(2px);background:#789e81;border-bottom-width:1px}#mixer-controls [aria-disabled=true]{opacity:.5;cursor:default}#mixer-controls button:focus-visible{outline:3px solid #f1cb79;outline-offset:3px}.mixer-ingredient{cursor:grab;touch-action:none;outline:none}.mixer-ingredient:hover,.mixer-ingredient:focus-visible,.mixer-ingredient[aria-pressed=true]{filter:drop-shadow(0 0 5px #ffeabc)}.mixer-ingredient[aria-disabled=true]{cursor:default}#scene-mixer text{-webkit-user-select:none;user-select:none;pointer-events:none;font-family:Segoe UI,sans-serif}.mixer-sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}body.mixer-mode.white-mode{background:#fff}body.mixer-mode.white-mode #ui{background:#f4efdf}body.mixer-mode.white-mode h1{color:#31564b}@media(min-width:821px)and (max-width:1100px){body.mixer-mode #top-bar{left:290px;right:12px}body.mixer-mode #canvas{left:284px;top:185px;width:calc(100vw - 292px);height:calc(100dvh - 197px)}#mixer-controls button{padding:7px 9px}}@media(max-width:820px){body.mixer-mode #top-bar{left:10px;right:10px;top:10px}body.mixer-mode #ui{padding:11px 7px}body.mixer-mode h1{margin-bottom:10px}body.mixer-mode #canvas{left:0;top:165px;width:100vw;height:calc(100dvh - 335px)}body.mixer-mode #side-panel{max-height:128px;padding:12px}body.mixer-mode #scene-nav{grid-template-columns:repeat(3,minmax(0,1fr))}body.mixer-mode .scene-button{padding:6px 4px;font-size:12px;gap:4px}#mixer-controls .mixer-keys{gap:5px}#mixer-controls button{padding:7px 8px;font-size:13px;min-height:37px}#mixer-controls button span{font-size:11px;margin-left:2px}}body.dish-mode{background:#244f4e}body.dish-mode #top-bar{left:316px;right:20px;top:18px;width:auto;transform:none}body.dish-mode #ui{padding:16px 12px;background:#1c4142;border:1px solid #86b4a440;box-shadow:none}body.dish-mode h1{color:#fff0d0;font-size:clamp(21px,2.3vw,31px);text-transform:none;letter-spacing:-.5px;text-shadow:none;margin-bottom:12px}body.dish-mode #canvas{position:absolute;left:310px;top:153px;width:calc(100vw - 324px);height:calc(100dvh - 163px);max-width:none;max-height:none;margin:0}#scene-dish{font-family:Trebuchet MS,Segoe UI,sans-serif}.dish-keys{gap:6px}.dish-keys button{display:inline-flex;align-items:center;gap:7px;padding:8px 10px;border:1px solid #9fc3ab66;border-radius:9px;background:#355e59;color:#fff3d6;font:600 13px Segoe UI,sans-serif;cursor:pointer;touch-action:manipulation}.dish-keys kbd{font:700 12px Segoe UI,sans-serif;color:#254f4a;border-radius:4px;background:#f3d49e;padding:3px 5px;min-width:12px}.dish-keys button:hover,.dish-keys button[aria-pressed=true]{background:#507f70;border-color:#e0cf9a}.dish-keys button:active,.dish-keys button.pressed{transform:translateY(2px);background:#689b7d}.dish-keys button:focus-visible{outline:3px solid #ffe3a3;outline-offset:3px}.dish-keys button:disabled{opacity:.45;cursor:default}#dish-reset{background:transparent}.dish-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}body.dish-mode.white-mode{background:#fff}body.dish-mode.white-mode #ui{background:#f4ecda}body.dish-mode.white-mode h1{color:#315c53}@media(min-width:761px)and (max-width:1150px){body.dish-mode #top-bar{left:290px;right:12px}body.dish-mode #canvas{left:284px;top:196px;width:calc(100vw - 292px);height:calc(100dvh - 206px)}}@media(max-width:760px){body.dish-mode #top-bar{left:10px;right:10px;top:10px}body.dish-mode #ui{padding:10px 7px}body.dish-mode h1{margin-bottom:10px}body.dish-mode .dish-keys{gap:5px}body.dish-mode .dish-keys button{padding:6px;font-size:11px;gap:4px}body.dish-mode #canvas{left:0;top:173px;width:100vw;height:calc(100dvh - 343px)}body.dish-mode #side-panel{max-height:128px;padding:12px}body.dish-mode #scene-nav{grid-template-columns:repeat(3,minmax(0,1fr))}body.dish-mode .scene-button{padding:6px 4px;font-size:12px;gap:4px}}body.splash-mode #canvas{visibility:hidden}#scene-splash{position:fixed;inset:0;z-index:100;overflow:auto;box-sizing:border-box;padding:max(24px,env(safe-area-inset-top)) max(20px,env(safe-area-inset-right)) max(24px,env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left));background:radial-gradient(ellipse at 25% 35%,#374578 0,transparent 55%),radial-gradient(ellipse at 80% 85%,#44325f 0,transparent 55%),#141d3a;color:#fff6e5}.splash-content{min-height:100%;max-width:1120px;margin:auto;display:grid;grid-template-columns:1.1fr 1fr;align-items:center;gap:24px}#scene-splash .splash-art svg{display:block;width:100%;height:auto;max-height:none;margin:0;overflow:visible}.splash-world{animation:splash-float 5s ease-in-out infinite}.splash-copy{padding:16px 0}.splash-eyebrow{font-size:12px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:#98e4d8}#splash-title{margin:18px 0;font-size:clamp(44px,6vw,78px);line-height:1.02;letter-spacing:-.045em;font-weight:900;text-shadow:0 5px 0 #10172e}#splash-title span{display:block;color:#ffd68d}#splash-subtitle{font-size:clamp(16px,2vw,20px);line-height:1.6;color:#cbd4e8;margin:22px 0}#splash-play{min-height:60px;width:min(100%,290px);padding:16px 28px;display:inline-flex;justify-content:space-between;align-items:center;gap:28px;border:2px solid #ffdf9c;border-radius:20px;background:#ffd18a;color:#272340;font:inherit;font-size:21px;font-weight:800;box-shadow:0 6px #b57555,0 12px 30px #090f3033;cursor:pointer;touch-action:manipulation;transition:transform .15s,background .15s}#splash-play:hover{background:#ffe2ae;transform:translateY(-2px)}#splash-play:active{transform:translateY(3px)}#splash-play:focus-visible{outline:3px solid #9af5e0;outline-offset:8px}.splash-hint{margin:22px 0 0;color:#b2bed5;font-size:12px}@keyframes splash-float{50%{transform:translateY(-9px)}}@media(max-width:650px){.splash-content{grid-template-columns:1fr;gap:0;align-content:center;text-align:center;max-width:420px}.splash-art{width:min(100%,370px);margin:auto}.splash-copy{padding:0}#splash-title{font-size:clamp(43px,12vw,62px);margin:12px 0}.splash-eyebrow{font-size:10px}#splash-subtitle{margin:16px 0 22px}}@media(pointer:coarse){.splash-hint span{display:none}}@media(max-height:700px)and (max-width:650px){.splash-art{width:240px}}@media(prefers-reduced-motion:reduce){.splash-world{animation:none}#splash-play{transition:none}}
