:root{font-family:Inter,ui-rounded,SF Pro Rounded,PingFang SC,Microsoft YaHei,system-ui,sans-serif;color:#3d2945;background:#f8f2f7;font-synthesis:none;text-rendering:optimizeLegibility;--ink: #3d2945;--ink-soft: #79677e;--plum: #4c3356;--plum-deep: #291f31;--cream: #fff7df;--cream-deep: #f4dfb4;--pink: #f68ca5;--pink-deep: #cc526f;--red: #e7525f;--red-deep: #9f2f43;--lilac: #d9c5e7;--line: rgba(76, 51, 86, .2);--shadow: 0 24px 70px rgba(76, 51, 86, .18);--focus: 0 0 0 4px rgba(246, 140, 165, .34)}*{box-sizing:border-box}html{min-width:320px;min-height:100%;background:#f8f2f7}body{min-width:320px;min-height:100vh;margin:0;background:radial-gradient(circle at 12% 16%,rgba(246,140,165,.2) 0 3px,transparent 4px),radial-gradient(circle at 88% 24%,rgba(116,79,131,.15) 0 4px,transparent 5px),radial-gradient(circle at 74% 78%,rgba(246,140,165,.14) 0 3px,transparent 4px),linear-gradient(145deg,#fffaf7,#f4edf8 48%,#f9f1ed);background-size:180px 180px,240px 240px,210px 210px,auto}button,input,textarea,select{font:inherit}button{min-width:44px;min-height:44px}button:focus-visible,summary:focus-visible,a:focus-visible{outline:2px solid var(--pink-deep);outline-offset:3px;box-shadow:var(--focus)}.skip-link{position:fixed;z-index:100;top:8px;left:8px;padding:10px 14px;color:#fff;background:var(--plum);border-radius:10px;transform:translateY(-160%)}.skip-link:focus{transform:translateY(0)}.app-shell{width:min(100%,820px);min-height:100dvh;margin:0 auto;padding:clamp(12px,3vw,28px)}.app-header{display:flex;align-items:center;justify-content:center;width:min(100%,700px);margin:0 auto clamp(12px,2.5vw,22px);padding:0 4px;text-align:center}.app-header h1{margin:0;color:var(--plum);font-size:clamp(1.5rem,4vw,2rem);font-weight:800;letter-spacing:.08em;line-height:1.1}.simulator-layout{display:grid;justify-items:center;gap:12px}.machine-shell{position:relative;width:min(100%,700px);padding:clamp(16px,4vw,28px);overflow:hidden;background:linear-gradient(115deg,rgba(255,255,255,.82),transparent 34%),var(--cream);border:2px solid #d9ba83;border-radius:clamp(26px,6vw,42px);box-shadow:var(--shadow),inset 0 -8px #d9ba8333}.machine-shell:before,.machine-shell:after{position:absolute;top:18px;width:8px;height:8px;content:"";background:#c8a971;border-radius:50%;box-shadow:inset 0 1px 2px #4c33565c}.machine-shell:before{left:20px}.machine-shell:after{right:20px}.machine-topline{display:flex;min-height:16px;align-items:center;justify-content:center;margin-bottom:4px}.speaker-slots{display:flex;gap:6px}.speaker-slots i{display:block;width:18px;height:4px;background:#d5b879;border-radius:999px}.machine-screen-panel{padding:clamp(10px,3vw,18px);background:var(--plum-deep);border:3px solid #6a4c73;border-radius:clamp(18px,4vw,28px);box-shadow:inset 0 8px 18px #0000006b,0 6px #5e416929}.device-display{display:grid;gap:8px}.device-screen-toolbar{display:grid;grid-template-columns:auto minmax(0,1fr);width:100%;max-width:560px;min-height:44px;margin:0 auto;align-items:center;gap:8px}.data-reset-button{min-width:68px;min-height:44px;padding:6px 12px;color:#fff8e8;background:#75517f;border:1px solid #b990c4;border-radius:12px;box-shadow:inset 0 -3px #291f3147;cursor:pointer;font-size:.78rem;font-weight:800;touch-action:manipulation;transition:background-color .16s ease,box-shadow .16s ease,transform .1s ease}.data-reset-button:not(:disabled):hover{background:#8b6096}.data-reset-button:not(:disabled):active{box-shadow:inset 0 -1px #291f3133;transform:translateY(2px)}.data-reset-button:disabled{cursor:not-allowed;opacity:.5}.resource-progress-slot{min-width:0;min-height:44px}.device-stage{position:relative;display:grid;width:100%;max-width:560px;min-height:0;aspect-ratio:1;margin:0 auto;place-items:center;overflow:hidden;background:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px),#17131b;background-size:16px 16px;border:1px solid #5f4a66;border-radius:clamp(12px,3vw,20px)}.device-frame{flex:0 0 auto;overflow:hidden;background:#000;border:2px solid #f3a8b8;border-radius:3px;box-shadow:0 16px 46px #0000007a}.device-canvas{display:block;image-rendering:pixelated;image-rendering:crisp-edges;background:#000}.device-loading-backdrop{position:absolute;z-index:1;inset:0;pointer-events:none;background:radial-gradient(circle at 50% 40%,rgba(246,140,165,.2),transparent 38%),#201725}.resource-progress{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto 10px;min-height:44px;padding:5px 10px;align-items:center;gap:4px 8px;color:#fff8e8;background:#291f31c7;border:1px solid rgba(246,140,165,.5);border-radius:12px;font-variant-numeric:tabular-nums;box-shadow:0 4px 12px #0003}.resource-progress strong{min-width:0;overflow:hidden;font-size:clamp(.68rem,2.3vw,.78rem);letter-spacing:.02em;text-overflow:ellipsis;white-space:nowrap}.resource-progress progress{grid-column:1 / -1;grid-row:2;width:100%;height:10px;overflow:hidden;accent-color:var(--pink);background:#ffffff26;border:0;border-radius:999px}.resource-progress progress::-webkit-progress-bar{background:#ffffff26;border-radius:999px}.resource-progress progress::-webkit-progress-value{background:linear-gradient(90deg,#f68ca5,#ffd08a);border-radius:999px;transition:transform .18s ease-out}.resource-progress progress::-moz-progress-bar{background:linear-gradient(90deg,#f68ca5,#ffd08a);border-radius:999px}.resource-progress__count{color:#f9e7cf;font-size:clamp(.68rem,2.3vw,.78rem);white-space:nowrap}.resource-progress--error{grid-template-rows:auto;color:#fff;background:#842339f5;border-color:#ffe1e5bd}.resource-progress--error .resource-progress__count{overflow:hidden;text-overflow:ellipsis}.canvas-status:not(.canvas-status--error){position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.canvas-status--error{position:absolute;right:10px;bottom:10px;left:10px;margin:0;padding:8px;color:#fff;background:#9f2f43f0;border-radius:8px;font-size:.75rem;text-align:center}.device-controls{display:grid;gap:10px;margin-top:clamp(16px,4vw,26px)}.hardware-controls{display:grid;grid-template-columns:minmax(74px,.82fr) minmax(180px,2.2fr);align-items:center;gap:clamp(10px,3vw,24px)}.joystick-control{display:grid;justify-items:center;gap:7px;color:#8f6350;font-size:clamp(.68rem,2.5vw,.82rem);font-weight:750}.shake-control{position:relative;display:grid;width:clamp(70px,17vw,96px);min-width:0;height:clamp(70px,17vw,96px);min-height:0;padding:0;place-items:center;cursor:pointer;touch-action:manipulation;background:#f4c7b2;border:3px solid #be806a;border-radius:50%;box-shadow:inset 0 -7px #8e53462e,0 7px #b57864,0 12px 22px #6f3c412e;transition:transform .1s ease,box-shadow .1s ease}.joystick-stick{position:relative;display:block;width:17%;height:52%;margin-top:4%;background:linear-gradient(90deg,#8d2f42,#d34d5c 55%,#84293b);border-radius:999px;transform:rotate(-8deg);transform-origin:50% 85%;box-shadow:3px 4px 5px #581f2d47}.joystick-stick i{position:absolute;top:-18%;left:50%;width:240%;aspect-ratio:1;background:var(--red);border:3px solid var(--red-deep);border-radius:50%;box-shadow:inset -5px -6px #9f2f433b,0 4px 6px #581f2d38;transform:translate(-50%)}.shake-control:not(:disabled):hover .joystick-stick{transform:rotate(8deg)}.shake-control:not(:disabled):active{box-shadow:inset 0 -4px #8e534629,0 3px #b57864;transform:translateY(4px)}.shake-control:not(:disabled):active .joystick-stick{transform:rotate(13deg) scaleY(.96)}.key-cluster{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:end;gap:clamp(6px,2vw,14px)}.hardware-key{display:grid;width:100%;max-width:82px;aspect-ratio:1;min-width:0;min-height:0;padding:8px 3px 5px;justify-self:center;place-items:center;color:var(--plum);background:#ead9ef;border:3px solid #92749d;border-radius:50%;box-shadow:inset 0 -7px #4c335629,0 7px #765b80,0 11px 18px #4c33562b;cursor:pointer;touch-action:none;-webkit-user-select:none;user-select:none;transition:transform 90ms ease,box-shadow 90ms ease,background-color .12s ease}.hardware-key>span{align-self:end;font-size:clamp(1rem,4vw,1.35rem);line-height:1}.hardware-key small{align-self:start;font-size:clamp(.57rem,2vw,.7rem);font-weight:800}.hardware-key--main{max-width:92px;color:#7d2d45;background:#f7afbf;border-color:#c75875;box-shadow:inset 0 -8px #972d4826,0 8px #a8425e,0 12px 20px #7e2b4333}.hardware-key:not(:disabled):hover{background:#f1e6f4}.hardware-key--main:not(:disabled):hover{background:#ffc2cf}.hardware-key:not(:disabled):active{box-shadow:inset 0 -3px #4c33561f,0 3px #765b80;transform:translateY(5px)}.hardware-key--main:not(:disabled):active{box-shadow:inset 0 -3px #972d481f,0 3px #a8425e}.shake-control:disabled,.hardware-key:disabled,.secondary-action:disabled{cursor:not-allowed;filter:grayscale(.35);opacity:.56}.secondary-action{width:min(100%,240px);min-height:44px;margin:4px auto 0;color:var(--plum);background:#ffffff73;border:1px solid var(--line);border-radius:12px;cursor:pointer}.inline-error,.inline-warning{margin:10px 0 0;padding:9px 12px;color:#8c2d42;background:#ffe1e5;border:1px solid rgba(159,47,67,.24);border-radius:10px;line-height:1.45}.debug-console{width:min(100%,700px);margin-top:8px;background:#ffffffc7;border:1px solid var(--line);border-radius:18px;box-shadow:0 16px 36px #4c33561a}.debug-console>summary{min-height:48px;padding:14px 18px;color:var(--plum);cursor:pointer;font-weight:800}.debug-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;padding:0 18px 18px}.debug-grid h2{margin:0 0 12px;color:var(--plum);font-size:1rem}.debug-grid h3{margin:18px 0 8px;font-size:.9rem}.environment-controls{display:grid;gap:8px}.environment-controls details{background:#faf6fb;border:1px solid var(--line);border-radius:10px}.environment-controls summary{min-height:44px;padding:12px;cursor:pointer;font-weight:700}.settings-group{display:grid;gap:8px;padding:0 12px 12px}.setting-row{display:flex;justify-content:space-between;gap:8px;color:var(--ink-soft);font-size:.78rem}.mono-value-inline,.telemetry-list dd,.empty-log,.ble-log{font-family:ui-monospace,SFMono-Regular,Consolas,monospace}.button-row,.slot-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}.button-row--wrap{grid-template-columns:repeat(auto-fit,minmax(76px,1fr))}.settings-group button{min-height:42px;padding:7px;color:var(--plum);background:#fff;border:1px solid var(--line);border-radius:9px;cursor:pointer}.settings-group button[aria-pressed=true]{color:#fff;background:var(--pink-deep)}.settings-group button:disabled{cursor:not-allowed;opacity:.5}.telemetry-list{display:grid;gap:0;margin:0}.telemetry-list>div{display:grid;grid-template-columns:88px 1fr;gap:8px;padding:9px 0;border-bottom:1px solid var(--line)}.telemetry-list dt{color:var(--ink-soft);font-size:.76rem}.telemetry-list dd{margin:0;overflow-wrap:anywhere;font-size:.76rem}.empty-log,.ble-log{margin:0;padding:10px 12px;color:var(--ink-soft);background:#faf6fb;border:1px solid var(--line);border-radius:9px;font-size:.72rem;line-height:1.55}.ble-log{padding-left:30px}@media(max-width:560px){.machine-shell{padding:14px;border-radius:28px}.machine-screen-panel{padding:10px}.hardware-controls{grid-template-columns:minmax(70px,.78fr) minmax(180px,2.2fr);gap:9px}.debug-grid{grid-template-columns:1fr}}@media(max-width:360px){.app-shell{padding:10px}.machine-shell{padding:12px}.hardware-controls{grid-template-columns:68px minmax(174px,1fr);gap:7px}.key-cluster{gap:5px}.data-reset-button{min-width:62px;padding-inline:8px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}