:root{font-family:Inter,ui-sans-serif,system-ui,sans-serif;color:#e9e3d9;background:#161a24;font-synthesis:none;--room-bg:#161a24;--wall-bg:#20263a;--desk-surface:#4c3830;--device-body:#30384c;--device-edge:#a9b0bd;--screen-glow:#d7c6a0;--ambient-glow:#6274a8;--accent-warm:#d7a878;--accent-cool:#7e9bc3;--text-muted:#aeb2bb;--shadow-soft:rgba(0,0,0,.36)}*{box-sizing:border-box}body{margin:0;min-width:900px;min-height:600px;overflow:hidden}button,select{font:inherit}.app{width:100vw;height:100vh;overflow:hidden;position:relative;background:radial-gradient(ellipse at 50% 24%,#394461 0,var(--wall-bg) 40%,var(--room-bg) 100%);color:#f0eadf}.theme-dark{background:radial-gradient(ellipse at 50% 24%,#394461 0,var(--wall-bg) 40%,var(--room-bg) 100%);color:#f0eadf}@media(prefers-color-scheme:dark){.theme-system{background:radial-gradient(circle at 50% 28%,#30312e 0,#1e1f1d 58%,#131412);color:#f0f0ea}}.topbar{height:54px;display:flex;align-items:center;justify-content:space-between;padding:0 28px;position:relative;z-index:10}.topbar span{font-size:13px;letter-spacing:.01em;opacity:.85}.gear{width:32px;height:32px;border:1px solid currentColor;border-radius:50%;background:transparent;color:inherit;opacity:.48;cursor:pointer;font-size:21px;transform:rotate(45deg)}.scene{position:relative;height:calc(100vh - 54px);min-height:546px;max-width:1540px;margin:0 auto;overflow:hidden}.wall-layer{position:absolute;top:0;right:0;bottom:39%;left:0;background:linear-gradient(120deg,#1d2437,#303852 55%,#20283a);border-radius:20px 20px 0 0;box-shadow:inset 0 -40px 70px #0e111a88}.ambient-light{position:absolute;width:48%;height:50%;left:27%;bottom:-12%;background:radial-gradient(ellipse,#a8a8bd42 0,#737fad20 35%,transparent 72%);filter:blur(18px)}.poster{position:absolute;right:9%;top:14%;padding:12px;border:1px solid #b9a58033;color:#e1d0ad99;font-size:10px;line-height:1.5;letter-spacing:.11em;background:#14192555;transform:rotate(3deg)}.desk-surface{position:absolute;left:4%;right:4%;bottom:0;height:43%;overflow:hidden;border-radius:20px 20px 0 0;background:linear-gradient(150deg,#684a3c,#442f2b 48%,#2f2428);box-shadow:0 -12px 34px #0a0c1388,inset 0 1px #e6bd9655}.desk-grain{position:absolute;top:0;right:0;bottom:0;left:0;opacity:.22;background:repeating-linear-gradient(170deg,transparent 0 20px,#d8b49614 21px 23px,transparent 24px 43px)}.desk-front{position:absolute;height:20px;left:0;right:0;bottom:0;background:linear-gradient(#241b22,#15151d)}.scene-device{position:absolute;border:0;background:transparent;color:var(--device-edge);cursor:pointer;padding:6px;filter:drop-shadow(0 14px 10px var(--shadow-soft));transition:transform .18s ease,filter .18s ease}.scene-device:hover{transform:translateY(-3px);filter:drop-shadow(0 17px 13px #0009) drop-shadow(0 0 10px #b8a87f2d)}.scene-device svg{filter:drop-shadow(0 1px 0 #ffffff26)}.scene-device svg rect:not(.midi-body),.scene-device svg path.screen-glow{fill:#10172477}.scene-device svg .midi-body{fill:#252a37}.scene-device svg{width:100%;height:100%;overflow:visible}.displays{position:absolute;top:7%;left:24%;right:27%;height:35%;display:flex;justify-content:center;align-items:end;gap:clamp(8px,1.7vw,26px)}.slot-display{position:relative;width:min(29vw,260px);height:min(22vw,190px)}.displays-3 .slot-display,.displays-4 .slot-display{width:min(20vw,190px);height:min(15vw,145px)}.slot-computer{right:10%;top:21%;width:clamp(72px,7.8vw,118px);height:clamp(130px,15vw,210px)}.slot-camera{top:3%;left:48%;width:clamp(42px,4.5vw,66px);height:clamp(35px,3.5vw,52px)}.slot-keyboard{left:34%;bottom:22%;width:clamp(220px,26vw,385px);height:clamp(105px,12vw,150px)}.slot-mouse{left:62%;bottom:24%;width:clamp(44px,5vw,74px);height:clamp(74px,8vw,115px)}.slot-headset{left:9%;top:39%;width:clamp(80px,9vw,135px);height:clamp(80px,10vw,145px)}.slot-speaker{top:35%;width:clamp(60px,6.5vw,94px);height:clamp(90px,10vw,140px)}.slot-speaker-0{left:18%}.slot-speaker-1{right:20%}.slot-microphone{left:22%;bottom:16%;width:clamp(46px,5vw,75px);height:clamp(70px,8vw,116px)}.slot-storage{bottom:8%;width:clamp(62px,6.5vw,95px);height:clamp(48px,5vw,75px)}.slot-storage-0{left:11%}.slot-storage-1{left:18%}.slot-storage-2{left:25%}.slot-phone{right:10%;bottom:15%;width:clamp(42px,4.5vw,64px);height:clamp(74px,8vw,115px)}.slot-controller{bottom:12%;width:clamp(78px,9vw,130px);height:clamp(56px,6.5vw,92px)}.slot-controller-0{right:18%}.slot-controller-1{right:28%}.slot-midi-keyboard{left:25%;bottom:5%;width:clamp(290px,35vw,520px);height:clamp(85px,10vw,145px);z-index:3}.slot-midi-controller{bottom:9%;width:clamp(95px,10vw,145px);height:clamp(66px,7vw,100px)}.slot-midi-controller-0{left:8%}.slot-midi-controller-1{left:17%}.slot-midi-interface{right:8%;bottom:9%;width:clamp(85px,9vw,125px);height:clamp(58px,6vw,84px)}.cable{position:absolute;z-index:2;border:2px solid #111622aa;border-left:0;border-bottom:0;border-radius:0 20px 0 0;opacity:.8}.cable-monitor{left:48%;top:41%;width:5%;height:18%}.cable-keyboard{left:49%;bottom:25%;width:9%;height:9%}.cable-midi{left:42%;bottom:12%;width:18%;height:11%}.decoration{position:absolute;z-index:2;opacity:.75}.plant{left:7%;top:17%;width:45px;height:62px;border-radius:4px 4px 12px 12px;background:#6f5748}.plant i{position:absolute;width:22px;height:36px;border-radius:100% 0;background:#697b68;transform-origin:bottom}.plant i:nth-child(1){left:4px;top:-26px;transform:rotate(-28deg)}.plant i:nth-child(2){left:18px;top:-32px;transform:rotate(12deg);background:#819177}.plant i:nth-child(3){left:27px;top:-20px;transform:rotate(39deg)}.mug{right:14%;bottom:31%;width:34px;height:29px;border-radius:4px 4px 12px 12px;background:#b4886b55;border:1px solid #e1b99066}.mug:after{content:"";position:absolute;right:-12px;top:7px;width:11px;height:12px;border:3px solid #e1b99066;border-left:0;border-radius:0 10px 10px 0}.slot-printer{right:5%;top:48%;width:clamp(100px,11vw,160px);height:clamp(75px,9vw,120px)}.slot-usb,.slot-unknown{left:7%;bottom:22%;width:58px;height:58px}.count{position:absolute;right:0;top:0;min-width:19px;padding:2px 5px;border-radius:10px;font-size:10px;background:currentColor;color:Canvas}.device-name{position:absolute;display:block;top:100%;left:50%;transform:translate(-50%);width:160px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:10px;opacity:.55}.with-motion .scene-device{animation:arrive .34s cubic-bezier(.2,.8,.2,1) both}@keyframes arrive{0%{opacity:0;transform:translateY(8px) scale(.88)}}.popover{position:absolute;z-index:9;left:50%;bottom:5%;transform:translate(-50%);min-width:190px;padding:13px 16px;border-radius:15px;display:flex;flex-direction:column;gap:2px;background:color-mix(in srgb,Canvas 92%,transparent);color:CanvasText;box-shadow:0 15px 50px #0002;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);font-size:12px}.popover strong{font-size:14px;margin-bottom:2px}.popover span{opacity:.6}.settings{position:absolute;z-index:20;right:20px;top:56px;width:280px;padding:18px;border-radius:20px;background:color-mix(in srgb,Canvas 93%,transparent);color:CanvasText;box-shadow:0 22px 70px #0003;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)}.settings header,.settings label{display:flex;justify-content:space-between;align-items:center}.settings header{margin-bottom:10px}.settings header button{border:0;background:none;color:inherit;font-size:23px;cursor:pointer}.settings label{padding:6px 0;font-size:13px}.settings input{accent-color:#34342f}.settings select{border:1px solid #9995;border-radius:8px;padding:4px 7px;background:Canvas;color:CanvasText}.refresh{width:100%;border:0;border-radius:10px;padding:9px;margin-top:10px}.mock-panel{position:absolute;z-index:15;bottom:14px;left:16px;right:16px;display:flex;gap:8px;align-items:center;padding:9px 12px;border-radius:15px;background:color-mix(in srgb,Canvas 91%,transparent);color:CanvasText;box-shadow:0 8px 30px #0002;overflow-x:auto}.mock-panel div{display:flex;gap:5px}.mock-panel button{white-space:nowrap;border:1px solid #8885;background:transparent;color:inherit;border-radius:12px;padding:6px 9px;font-size:11px}.mock-panel button.active{background:currentColor;color:Canvas}.offline{min-height:100vh;display:grid;place-content:center;gap:18px;text-align:center;background:#f5f3ee;color:#292924}.offline p{font-size:15px}.offline div{display:flex;justify-content:center;gap:8px}.offline button{border:1px solid #74746b;border-radius:999px;background:transparent;padding:9px 13px;cursor:pointer}@media(max-width:1050px){.scene{transform:scale(.84);transform-origin:top center;width:119%;margin-left:-9.5%}.topbar{padding-inline:18px}}@media(prefers-reduced-motion:reduce){.with-motion .scene-device{animation:none}}