@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&family=Manrope:wght@400;500;600;700;800&display=swap');
:root{color-scheme:dark;--bg:#0b101d;--panel:#151d2d;--panel-2:#1c283b;--panel-3:#212e41;--text:#f5f8fe;--muted:#9aa9be;--faint:#6e829d;--border:#293649;--mint:#a2eedb;--blue:#89a7fc;--violet:#a9a0fe;--radius:24px;--font:'DM Sans','Manrope',system-ui,-apple-system,BlinkMacSystemFont,sans-serif;font-family:var(--font);background:#080b12;color:var(--text);font-synthesis:none}
*{box-sizing:border-box}
html{height:100%;-webkit-text-size-adjust:100%}
body{margin:0;min-height:100%;display:grid;place-items:center;background:radial-gradient(ellipse at center,#1a2336 0%,#080b12 68%);overscroll-behavior:none}
button,input{font:inherit}
button{cursor:pointer;-webkit-tap-highlight-color:transparent;color:inherit}
button:focus-visible,input:focus-visible{outline:2px solid var(--mint);outline-offset:3px}
button:disabled{opacity:.5;cursor:not-allowed}
svg.icon{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
svg.icon.tiny{width:13px;height:13px}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.app-shell{width:min(100%,464px);height:min(930px,calc(100dvh - 36px));display:flex;flex-direction:column;overflow:hidden;position:relative;isolation:isolate;background:linear-gradient(180deg,#0f1625 0%,#0b101d 55%,#0b101a 100%);border:1px solid #344154;border-radius:34px;box-shadow:0 36px 90px #0008,0 0 0 8px #121927}
.topbar{height:78px;min-height:78px;padding:14px 22px 10px;display:flex;justify-content:space-between;align-items:center;background:#0e1523e8;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);z-index:5}
.brand-button{background:none;border:0;display:flex;align-items:center;gap:10px;text-align:left;padding:4px 0}
.brand-mark{width:33px;height:33px;display:grid;grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(2,1fr);gap:4px;padding:6px;border-radius:10px;background:#202d40;border:1px solid #2e4558}
.brand-mark span{border-radius:2px;background:var(--mint);box-shadow:0 0 8px #a2eedb77}.brand-mark span:nth-child(2){opacity:.45}.brand-mark span:nth-child(3){opacity:.72}
.brand-word{display:flex;flex-direction:column;line-height:1.22}.brand-word strong{font-size:12px;letter-spacing:.11em;font-weight:800}.brand-word small{color:#91a5c1;letter-spacing:.25em;font-size:9px;font-weight:700;margin-top:3px}
.top-status{display:flex;align-items:center;gap:7px;padding:9px 10px;background:#1b2638;border:1px solid #334052;border-radius:40px;color:#c0ccde;font-size:12px;font-weight:700}
.status-indicator{width:7px;height:7px;border-radius:50%;background:#ffbe75;box-shadow:0 0 9px #ffbe7560}
.screen-area{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;scrollbar-width:none;padding:4px 21px 28px}
.screen-area::-webkit-scrollbar{display:none}
.screen-area > .screen{animation:rise .24s cubic-bezier(.2,.8,.2,1) both}
@keyframes rise{from{opacity:.25;transform:translateY(9px)}to{opacity:1;transform:translateY(0)}}
.tabbar{height:79px;min-height:79px;background:#101827ee;border-top:1px solid #273447;display:flex;align-items:stretch;justify-content:space-around;padding:7px 8px calc(8px + env(safe-area-inset-bottom,0px));z-index:5;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
.tab{flex:1;display:flex;flex-direction:column;gap:5px;justify-content:center;align-items:center;border:0;background:transparent;color:#788ba7;border-radius:15px;padding:5px 0;position:relative;font-size:10px;font-weight:700;transition:color .15s}
.tab .icon{width:23px;height:23px}.tab.active{color:var(--mint)}.tab.active:before{content:"";position:absolute;top:-7px;height:3px;width:26px;background:var(--mint);border-radius:0 0 4px 4px;box-shadow:0 0 16px #a2eedb6d}
.eyebrow{color:var(--mint);font-size:11px;font-weight:800;letter-spacing:.17em;text-transform:uppercase}
.page-title{font-size:29px;letter-spacing:-.045em;font-weight:800;line-height:1.12;margin:7px 0 10px}
.subtitle{font-size:13px;line-height:1.55;color:var(--muted);margin:0}
.top-intro{padding-top:14px;margin-bottom:19px}
.demo-banner{display:flex;align-items:flex-start;gap:11px;padding:11px 13px;color:#c6d1e0;background:#17283a;border:1px solid #2d4758;border-radius:16px;font-size:12px;line-height:1.45;margin-bottom:16px}
.demo-banner .icon{width:18px;height:18px;color:var(--mint);margin-top:2px}
.section-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:23px 1px 13px}
.section-head h2{font-size:17px;letter-spacing:-.022em;margin:0}
.text-action{border:0;background:none;color:var(--mint);font-size:12px;font-weight:700;display:inline-flex;align-items:center;gap:3px;padding:8px 1px}
.text-action .icon{width:15px;height:15px}
.card{border:1px solid var(--border);background:linear-gradient(155deg,#182235,#131d2d);border-radius:var(--radius);padding:17px}
.surface{background:#1a2537;border:1px solid #2b3b50;border-radius:18px}
.hero-stage{height:320px;border-radius:28px;position:relative;overflow:hidden;background:radial-gradient(ellipse at 50% 37%,#273c50 0%,#1a293d 30%,#111b2c 67%,#101827 100%);border:1px solid #35465a;display:flex;flex-direction:column;align-items:center;justify-content:center}
.hero-stage:before{content:"";width:240px;height:240px;background:#6c96ff2b;filter:blur(50px);position:absolute;top:34px;left:50%;transform:translateX(-50%);border-radius:50%}
.hero-stage:after{content:"";height:1px;width:100%;background:linear-gradient(90deg,transparent,#6c9a9f55,transparent);position:absolute;bottom:47px}
.hero-note{position:absolute;top:15px;left:16px;font-size:10px;color:#a6bdd0;letter-spacing:.08em;font-weight:800;z-index:2}
.hero-note .tiny-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--mint);margin-right:5px;vertical-align:1px}
.hero-footer{position:absolute;bottom:16px;width:100%;text-align:center;color:#8fa5bf;font-size:11px;letter-spacing:.03em}
.matrix-device{--matrix-size:175px;position:relative;z-index:1;width:var(--matrix-size);aspect-ratio:36/52;display:flex;background:linear-gradient(145deg,#070b0f,#111923);border:7px solid #283546;border-radius:10px;padding:8px;box-shadow:0 0 0 1px #506071,0 17px 34px #0008,0 4px 12px #8dbff11a;transition:filter .2s}
.matrix-device.large{--matrix-size:198px;margin:auto}
.matrix-device.mini{--matrix-size:77px;border-width:3px;padding:3px;border-radius:5px}
.matrix-grid{width:100%;height:100%;display:grid;grid-template-columns:repeat(16,minmax(0,1fr));grid-template-rows:repeat(16,minmax(0,1fr));gap:0}
.dot-pixel{align-self:center;justify-self:center;width:62%;aspect-ratio:1;border-radius:1px;background:#263241;transition:background .12s}
.dot-pixel.lit{background:#f4fff9;box-shadow:0 0 7px 1px #befcf2c0}
.matrix-device.is-off .dot-pixel.lit{background:#263241;box-shadow:none}
.playing-card{display:flex;align-items:center;gap:12px;margin-top:13px;background:#151f30;border:1px solid #2a3b51;padding:13px;border-radius:19px}
.playing-art{display:grid;place-items:center;width:46px;height:46px;border-radius:14px;background:#2c4652;color:var(--mint)}.playing-art .icon{width:25px;height:25px}
.playing-text{flex:1;min-width:0}.playing-text b{display:block;font-size:14px}.playing-text small{display:block;margin-top:4px;color:#95a8bd;font-size:11px}
.round-button{border:1px solid #466479;color:var(--mint);border-radius:50%;width:42px;height:42px;background:#26394d;display:grid;place-items:center;flex-shrink:0}.round-button .icon{width:20px;height:20px}.round-button.off{color:#9caabd;background:#222c3b}
.mini-label{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:#c7d3e2;margin-top:16px}.mini-label strong{color:var(--text);font-size:12px}
.range{width:100%;height:20px;margin:10px 0 0;accent-color:var(--mint);cursor:pointer}
.shortcut-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.shortcut{background:transparent;border:0;padding:2px 0 8px;color:#cfdded;display:flex;flex-direction:column;align-items:center;gap:9px;font-size:11px;font-weight:700}
.shortcut-icon{height:62px;width:62px;border-radius:20px;background:linear-gradient(135deg,#233d4a,#273e4e);border:1px solid #385669;color:#aeebdf;display:grid;place-items:center}
.shortcut:nth-child(2) .shortcut-icon{background:linear-gradient(135deg,#332d51,#35355a);color:#cbc4ff}
.shortcut:nth-child(3) .shortcut-icon{background:linear-gradient(135deg,#46344a,#4a3654);color:#ffceea}
.shortcut:nth-child(4) .shortcut-icon{background:linear-gradient(135deg,#2d3b55,#2a4871);color:#acd6ff}
.shortcut-icon .icon{width:26px;height:26px}
.small-note{font-size:11px;color:#6f859d;line-height:1.5;margin:13px 3px}
.chipbar{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin:0 -21px;padding:0 21px 12px}.chipbar::-webkit-scrollbar{display:none}
.chip{white-space:nowrap;border:1px solid #344154;background:#182336;border-radius:99px;padding:10px 15px;color:#9aafc5;font-size:12px;font-weight:800}
.chip.active{border-color:var(--mint);background:var(--mint);color:#13232c}
.searchbox{position:relative;display:flex;align-items:center;background:#161f2e;border:1px solid #314056;border-radius:16px;padding:0 14px;height:47px;margin-bottom:17px}
.searchbox .icon{color:#7990a7;width:18px;height:18px;margin-right:8px}
.searchbox input{color:var(--text);outline:none;background:transparent;border:0;width:100%;font-size:13px}
.searchbox input::placeholder{color:#7187a0}
.program-list{display:flex;flex-direction:column;gap:9px}
.program-row{border:1px solid #2e3f53;background:#172131;border-radius:19px;padding:12px;display:flex;align-items:center;gap:13px;text-align:left;width:100%}
.program-row.selected{border-color:#7aa5ae;background:#1a303b}
.program-icon{width:49px;height:52px;border-radius:14px;display:grid;place-items:center;background:linear-gradient(135deg,#2a4358,#24364d);color:var(--mint);flex-shrink:0}
.program-icon .icon{width:25px;height:25px}
.program-icon.violet{background:linear-gradient(135deg,#353450,#282947);color:#cbc4ff}
.program-icon.pink{background:linear-gradient(135deg,#493549,#392b43);color:#f5bbdc}
.program-icon.blue{background:linear-gradient(135deg,#263e59,#263650);color:#9bc5ff}
.program-body{flex:1;min-width:0}.program-body b{display:block;font-size:13px;font-weight:800}.program-body small{display:block;color:#94a8bc;font-size:11px;margin-top:4px;line-height:1.4}.program-row>.icon{width:18px;height:18px;color:#7390aa}
.empty{background:#151d2b;border-radius:20px;padding:22px;color:#96a8bc;text-align:center;font-size:13px}
.game-summary{display:flex;align-items:center;justify-content:space-around;padding:15px 12px;margin-bottom:13px}
.stat{text-align:center}.stat span{display:block;color:#8297b0;font-size:10px;text-transform:uppercase;letter-spacing:.08em;margin-bottom:4px}.stat strong{font-size:21px;letter-spacing:-.04em}
.stat-separator{height:30px;width:1px;background:#314156}
.game-stage{height:312px;display:grid;place-items:center;background:radial-gradient(ellipse at center,#1e3444,#101825 68%);border-radius:24px;border:1px solid #30455a}
.control-note{text-align:center;color:#8da0b7;font-size:12px;margin:12px 0}
.dpad{display:grid;grid-template-columns:repeat(3,66px);gap:7px;justify-content:center;margin:17px auto}
.dpad .control{border:1px solid #38526b;border-radius:17px;display:grid;place-items:center;height:59px;background:linear-gradient(145deg,#2c4158,#1a2b3f);color:#e5f6f4;font-weight:800;font-size:22px;touch-action:manipulation;box-shadow:0 4px 0 #0d1623}
.dpad .control:active{transform:translateY(3px);box-shadow:0 1px 0 #0d1623;background:#31526a}
.dpad .void{visibility:hidden}
.button-row{display:flex;align-items:center;justify-content:center;gap:10px;margin:17px 0}
.primary-btn{border:0;background:var(--mint);color:#0f2831;min-height:46px;padding:12px 19px;border-radius:14px;font-size:13px;font-weight:800;display:inline-flex;align-items:center;justify-content:center;gap:9px}
.primary-btn .icon,.secondary-btn .icon{width:17px;height:17px}
.secondary-btn{border:1px solid #3a5064;background:#1a2a3e;min-height:46px;padding:12px 17px;border-radius:14px;font-size:13px;font-weight:800;display:inline-flex;align-items:center;justify-content:center;gap:9px}
.game-over{font-size:12px;color:#f5bdc4;text-align:center;margin:10px}
.editor-card{padding:17px}
.editor-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;color:#d9e6f1;font-size:13px}
.brush-switch{display:flex;align-items:center;gap:5px;padding:4px;background:#0e192a;border-radius:12px;border:1px solid #293b51}
.brush-switch button{border:0;background:transparent;border-radius:8px;padding:7px 12px;font-weight:800;font-size:11px;color:#9caebe}
.brush-switch button.active{background:#304454;color:var(--mint)}
.paint-stage{display:flex;justify-content:center;background:radial-gradient(ellipse,#223344,#0f1724);border-radius:18px;padding:12px}
.paint-grid{width:min(100%,270px);aspect-ratio:36/52;display:grid;grid-template-columns:repeat(16,minmax(0,1fr));grid-template-rows:repeat(16,minmax(0,1fr));background:#050a0d;border:5px solid #304253;border-radius:8px;padding:6px;touch-action:none;user-select:none}
.paint-cell{padding:0;border:0;align-self:stretch;justify-self:stretch;background:transparent;display:grid;place-items:center;touch-action:none;cursor:crosshair}
.paint-cell:before{content:"";width:59%;aspect-ratio:1;background:#263443;border-radius:1px}
.paint-cell.on:before{background:#eefef7;box-shadow:0 0 6px #c0fff1a6}
.tool-actions{display:flex;gap:9px;flex-wrap:wrap;margin-top:14px}.tool-actions button{flex:1}
.tip-card{display:flex;gap:11px;margin-top:12px;padding:13px 14px;background:#142c34;border:1px solid #295263;border-radius:15px;color:#bddbcc;font-size:12px;line-height:1.5}
.tip-card .icon{flex-shrink:0;color:var(--mint);margin-top:1px}
.settings-group{margin-top:20px}
.settings-heading{font-size:10px;color:#90a5bf;text-transform:uppercase;font-weight:800;letter-spacing:.12em;margin:0 2px 11px}
.settings-list{border:1px solid #304156;border-radius:20px;overflow:hidden;background:#151f2e}
.settings-row{padding:15px 15px;display:flex;align-items:center;gap:12px;border-bottom:1px solid #28384d}
.settings-row:last-child{border-bottom:0}
.setting-icon{background:#253a4c;color:var(--mint);width:39px;height:39px;display:grid;place-items:center;border-radius:13px;flex-shrink:0}
.setting-icon .icon{width:19px;height:19px}
.setting-body{flex:1;min-width:0}.setting-body strong{display:block;font-size:12px}.setting-body small{display:block;color:#8ea2b6;margin-top:4px;line-height:1.45;font-size:11px}
.settings-row>.icon{width:16px;color:#7590a8}
.switch{border:0;background:#304157;border-radius:99px;width:49px;height:29px;padding:3px;display:flex;align-items:center;transition:background .2s;flex-shrink:0}
.switch span{display:block;width:23px;height:23px;background:#dce7f3;border-radius:50%;transition:transform .2s}.switch.active{background:#76cbb9}.switch.active span{background:#0d2530;transform:translateX(20px)}
.system-pill{display:inline-flex;gap:5px;align-items:center;background:#282c3b;border:1px solid #494353;color:#fbc9a6;border-radius:30px;font-size:10px;padding:6px 8px;margin-top:5px}
.app-credit{color:#667b97;font-size:11px;text-align:center;margin-top:24px;line-height:1.5}
.toast{position:fixed;bottom:28px;left:50%;transform:translate(-50%,25px);opacity:0;pointer-events:none;background:#e8f5f0;color:#163332;padding:12px 18px;border-radius:13px;font-size:12px;font-weight:700;z-index:20;box-shadow:0 14px 38px #0005;transition:opacity .2s,transform .2s;max-width:calc(100vw - 30px);text-align:center}.toast.visible{opacity:1;transform:translate(-50%,0)}
@media(max-width:600px){body{background:var(--bg);display:block}.app-shell{width:100%;height:100dvh;border-radius:0;border:none;box-shadow:none}.screen-area{padding:4px 20px 26px}.chipbar{margin:0 -20px;padding:0 20px 12px}.topbar{height:calc(69px + env(safe-area-inset-top,0px));min-height:calc(69px + env(safe-area-inset-top,0px));padding-top:calc(8px + env(safe-area-inset-top,0px))}.tabbar{height:calc(70px + env(safe-area-inset-bottom,0px));min-height:calc(70px + env(safe-area-inset-bottom,0px))}.hero-stage{height:min(320px,40dvh)}.matrix-device{--matrix-size:min(175px,23dvh)}.matrix-device.large{--matrix-size:min(194px,26dvh)}}
@media(max-width:360px){.screen-area{padding-left:15px;padding-right:15px}.chipbar{margin:0 -15px;padding-left:15px;padding-right:15px}.shortcut-icon{width:56px;height:56px}.page-title{font-size:26px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation:none!important;transition:none!important}}


/* Desktop browser interface: left navigation, central workspace, right inspector.
   Mobile PWA keeps its own bottom navigation and full-screen composition. */
.desktop-inspector{display:none}
.rotator{display:flex;align-items:center;justify-content:space-between;gap:9px;flex-wrap:wrap}
.rotator .secondary-btn{min-height:40px;padding:10px 12px}
.rotator strong{font-size:13px;color:var(--mint);font-variant-numeric:tabular-nums}
.field{display:flex;flex-direction:column;gap:6px;margin:13px 0;color:#c9d6e5;font-size:12px}
.field input,.field select,.field textarea{width:100%;min-height:41px;color:var(--text);padding:10px 12px;background:#101a2b;border:1px solid #34475d;border-radius:12px;outline:none;max-width:100%}
.field textarea{min-height:75px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--mint)}
.field input[type="checkbox"]{width:19px;height:19px;min-height:auto;accent-color:var(--mint);padding:0}
.setting-actions{display:flex;flex-wrap:wrap;gap:9px;margin-top:13px}
.setting-actions>*{flex:1 1 auto}
.module-block{border:1px solid #2c4153;background:linear-gradient(160deg,#1a2737,#131e2d);border-radius:18px;padding:17px;margin-top:14px}
.module-block h3{font-size:14px;margin:0 0 5px;color:#ebf6ff}
.module-block p{margin:0;color:#8fa7bc;font-size:12px;line-height:1.5}
.segmented{display:flex;gap:4px;border:1px solid #35475d;background:#0d1728;padding:4px;border-radius:13px}
.segmented button{flex:1;background:none;border:0;color:#90a8bf;padding:9px 12px;border-radius:9px;font-size:12px;font-weight:800}
.segmented button.active{background:#294356;color:var(--mint)}
.schedule-row{display:grid;grid-template-columns:minmax(0,1fr) 89px 30px;gap:9px;align-items:center;margin:10px 0}
.schedule-row input,.schedule-row select{min-width:0;width:100%;height:41px;border:1px solid #35475d;color:#dceaf3;background:#101a29;border-radius:10px;padding:8px}
.schedule-row button{display:grid;place-items:center;border:0;color:#b3c6d6;background:#223448;border-radius:9px;height:34px}
.timeline-strip{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:6px 0 12px}
.frame-thumb{flex:0 0 57px;height:70px;padding:5px;border-radius:9px;background:#0e1927;border:1px solid #3b5267;font-size:11px;color:#afc3d4;text-align:center}
.frame-thumb.active{border-color:var(--mint);background:#19363b;color:var(--mint)}
.frame-thumb .mini-leds{display:grid;grid-template-columns:repeat(16,1fr);gap:0;width:35px;height:40px;margin:auto}
.frame-thumb .mini-leds i{display:block;border-radius:1px;background:#1a2a35}
.frame-thumb .mini-leds i.on{background:#c3efdc}
.notice-soft{font-size:11px;color:#7794a7;line-height:1.55;margin:10px 1px}
.preview-annotation{text-align:center;color:#8fa8b8;font-size:11px;margin:9px auto 0;line-height:1.5}
.detail-badge{font-size:10px;font-weight:800;border:1px solid #354c5f;border-radius:40px;background:#1d3344;color:#a9d4dc;padding:5px 9px}
.desktop-preview{display:flex;justify-content:center;align-items:center;padding:18px 8px 11px;background:radial-gradient(ellipse,#243950 0%,#121f31 66%,#111c2b 100%);border:1px solid #2f4357;border-radius:22px;min-height:340px}
.desktop-inspector .matrix-device{--matrix-size:188px}
.desktop-inspector .section-head{margin-top:0}
.desktop-inspector .module-block{margin-top:12px}
.program-row .program-body small{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.input-hint{font-size:11px;color:#8095aa}
@media(min-width:960px){
  body{display:grid;place-items:center;background:radial-gradient(ellipse at 45% 40%,#1a2a40 0%,#090c13 67%)}
  .app-shell{width:min(97vw,1500px);height:min(95dvh,1040px);max-width:none;display:grid;grid-template-columns:220px minmax(0,1fr) 335px;grid-template-rows:77px minmax(0,1fr);border-radius:24px;box-shadow:0 20px 80px #0008;overflow:hidden}
  .topbar{grid-column:1/-1;grid-row:1;border-bottom:1px solid #2c3c50;height:77px;min-height:77px;padding:13px 27px}
  .topbar .brand-word strong{font-size:14px}
  .tabbar{grid-column:1;grid-row:2;display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch;gap:5px;height:auto;min-height:0;padding:24px 13px;border-top:0;border-right:1px solid #26364a;background:#101829}
  .tab{flex:0 0 auto;min-height:52px;border-radius:13px;padding:12px 15px;display:flex;flex-direction:row;gap:15px;justify-content:flex-start;align-items:center;text-align:left;font-size:13px}
  .tab .icon{width:21px;height:21px}
  .tab.active{color:var(--mint);background:#243844}
  .tab.active:before{content:"";height:26px;width:3px;left:-13px;top:13px;border-radius:0 3px 3px 0}
  .tab:hover:not(.active){background:#1a2637;color:#d5e2ec}
  .screen-area{grid-column:2;grid-row:2;display:block;min-width:0;padding:21px clamp(23px,3.4vw,46px) 48px}
  .screen-area>.screen{max-width:740px;margin:auto}
  .desktop-inspector{grid-column:3;grid-row:2;display:block;overflow-y:auto;scrollbar-width:none;background:#101a2a;border-left:1px solid #2a3a50;padding:23px 19px 30px}
  .desktop-inspector::-webkit-scrollbar{display:none}
  .hero-stage{display:flex;height:410px;max-width:100%}
  .hero-stage .matrix-device{--matrix-size:220px}
  .hero-stage .hero-note{font-size:11px}
  .playing-card{margin-top:14px}
  .screen-area .top-intro{padding-top:6px}
  .page-title{font-size:clamp(30px,3vw,39px)}
  .shortcut-row{gap:13px}
  .shortcut-icon{width:72px;height:72px}
  .section-head{margin:24px 0 14px}
  .program-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}
  .program-row{min-width:0}
  .game-stage{height:390px}
  .matrix-device.large{--matrix-size:220px}
  .paint-stage{min-height:405px}
  .paint-grid{width:272px}
  .settings-group{max-width:740px}
  .tabbar:after{content:"OBEGRÄNSAD • CONTROL";position:absolute;bottom:20px;left:27px;font-size:9px;letter-spacing:.1em;color:#4c6983}
  .desktop-inspector .matrix-grid{filter:none}
}
@media(min-width:960px) and (max-width:1180px){
  .app-shell{grid-template-columns:175px minmax(0,1fr) 290px}
  .tab{font-size:12px;padding:10px}
  .program-list{grid-template-columns:1fr}
  .screen-area{padding:18px 22px 36px}
}


/* ===== V3: two intentional experiences, not a phone mockup on a desktop =====
   Mobile/tablet scroll the full document; desktop is a full-width control room.
   Overrides sit at the end to make previous fixed-card breakpoints harmless. */
html,body{width:100%;min-width:320px}
.app-shell{min-width:0}
.screen-area,.screen-area>.screen{min-width:0}
.desktop-inspector{min-width:0}
.screen-area .screen{padding-bottom:4px}

/* Phone/tablet PWA: natural document scroll and persistent bottom navigation.
   In particular, no overflow:hidden ancestor may trap touch scrolling. */
@media(max-width:959px){
  html{height:auto;min-height:100%;overflow-x:hidden;overscroll-behavior-y:auto}
  body{display:block;width:100%;height:auto;min-height:100dvh;overflow-x:hidden;overflow-y:auto;overscroll-behavior-y:auto;background:#0b101d;-webkit-overflow-scrolling:touch}
  .app-shell{
    position:relative;inset:auto;display:flex;flex-direction:column;
    width:100%;max-width:none;height:auto;min-height:100dvh;max-height:none;
    overflow:visible;isolation:auto;border:0;border-radius:0;box-shadow:none;
    background:linear-gradient(180deg,#111b2a 0%,#0b101d 35%,#0b101b 100%)
  }
  .topbar{
    position:sticky;top:0;left:0;right:0;
    height:calc(68px + env(safe-area-inset-top,0px));
    min-height:calc(68px + env(safe-area-inset-top,0px));
    padding:calc(12px + env(safe-area-inset-top,0px)) 20px 10px;
    z-index:80;background:#0e1726ee;
    border-bottom:1px solid #26394c;
  }
  .screen-area{
    display:block;flex:1 0 auto;position:static;min-height:0;max-height:none;height:auto;
    width:100%;overflow:visible;overscroll-behavior-y:auto;
    padding:18px max(18px,env(safe-area-inset-left,0px)) calc(110px + env(safe-area-inset-bottom,0px));
    scrollbar-width:auto;touch-action:pan-y pinch-zoom;
  }
  .screen-area>.screen{width:100%;max-width:620px;margin:0 auto}
  .desktop-inspector{display:none!important}
  .tabbar{
    position:fixed;inset:auto 0 0 0;display:flex;flex-direction:row;
    width:100%;max-width:none;
    height:calc(72px + env(safe-area-inset-bottom,0px));
    min-height:calc(72px + env(safe-area-inset-bottom,0px));
    padding:7px max(9px,env(safe-area-inset-right,0px)) calc(8px + env(safe-area-inset-bottom,0px)) max(9px,env(safe-area-inset-left,0px));
    background:#111d2df5;border-top:1px solid #2d4355;border-right:0;
    border-radius:0;z-index:100;
    justify-content:space-around;align-items:stretch;gap:1px;
    box-shadow:0 -12px 38px #02070e85;backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);
  }
  .tabbar:after{display:none!important}
  .tab{
    position:relative;display:flex;flex:1 1 0;flex-direction:column;
    align-items:center;justify-content:center;gap:6px;min-width:0;
    border-radius:13px;padding:6px 2px;color:#8da3b9;font-size:11px;
  }
  .tab .icon{width:23px;height:23px}
  .tab.active{color:var(--mint);background:#203b4655}
  .tab.active:before{position:absolute;content:"";top:0;left:50%;transform:translateX(-50%);width:26px;height:3px;border-radius:0 0 4px 4px}
  .screen-area .top-intro{padding-top:1px}
  .screen-area .page-title{font-size:clamp(27px,7vw,35px)}
  .hero-stage{height:clamp(310px,45dvh,425px);border-radius:23px}
  .hero-stage .matrix-device{--matrix-size:clamp(165px,25dvh,200px)}
  .hero-stage .hero-footer{bottom:14px}
  .shortcut-icon{width:clamp(58px,17vw,72px);height:clamp(58px,17vw,72px)}
  .chipbar{margin-left:-18px;margin-right:-18px;padding-left:18px;padding-right:18px}
  .program-list{display:flex;flex-direction:column}
  .program-row{min-height:72px}
  .module-block,.settings-group{scroll-margin-top:90px}
  .settings-row{min-height:65px}
  button,.tab{touch-action:manipulation}
  .paint-grid,.paint-cell{touch-action:none}
  .toast{bottom:calc(92px + env(safe-area-inset-bottom,0px))}
}

/* Browser/desktop: permanent settings panel on the left, broad central
   workspace with large matrix. No device outline or narrow mock-phone. */
@media(min-width:960px){
  html,body{width:100%;height:100%;overflow:hidden}
  body{display:block;position:relative;margin:0;background:#080d15}
  .app-shell{
    position:fixed!important;inset:0!important;margin:0!important;
    width:100vw!important;max-width:none!important;min-width:0!important;
    height:100dvh!important;min-height:0!important;max-height:none!important;
    display:grid!important;grid-template-columns:286px minmax(0,1fr)!important;
    grid-template-rows:72px 288px minmax(0,1fr)!important;
    gap:0;overflow:hidden;border:none;border-radius:0;box-shadow:none;
    background:#090f18;
  }
  .topbar{
    grid-column:1 / -1!important;grid-row:1 / 2!important;
    width:100%;height:72px;min-height:72px;
    padding:13px 28px;background:#111b2a;border-bottom:1px solid #263647;
  }
  .tabbar{
    position:static!important;grid-column:1 / 2!important;grid-row:2 / 3!important;
    display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch;gap:4px;
    width:100%;height:100%;min-height:0;max-height:none;
    padding:19px 15px 12px;background:#101827;border:0;border-right:1px solid #263747;
    box-shadow:none;
  }
  .tabbar:after{display:none}
  .tab{
    flex:0 0 46px;min-height:46px;width:100%;max-width:none;
    display:flex;flex-direction:row;justify-content:flex-start;align-items:center;gap:14px;
    padding:10px 16px;text-align:left;border-radius:12px;font-size:13px;letter-spacing:.005em;
  }
  .tab .icon{width:21px;height:21px}
  .tab.active{background:#203442;color:#b3f4e0}
  .tab.active:before{
    content:"";left:-15px;top:10px;height:26px;width:3px;
    border-radius:0 3px 3px 0;transform:none
  }
  .screen-area{
    grid-column:2 / 3!important;grid-row:2 / 4!important;
    display:block;position:relative;width:100%;height:100%;min-width:0;min-height:0;
    max-width:none;max-height:none;overflow-y:auto;overflow-x:hidden;overscroll-behavior-y:contain;
    padding:32px clamp(35px,5vw,110px) 75px;
    background:radial-gradient(ellipse at 55% 36%,#111e2e 0%,#090f18 50%,#080c14 100%);
    scrollbar-width:thin;scrollbar-color:#374c62 transparent;
  }
  .screen-area>.screen{max-width:1120px;margin:0 auto;min-width:0}
  .desktop-inspector{
    grid-column:1 / 2!important;grid-row:3 / 4!important;
    display:block!important;position:relative;width:100%;height:100%;min-width:0;min-height:0;
    overflow-y:auto;overflow-x:hidden;padding:13px 16px 30px;
    background:#101827;border:0;border-right:1px solid #263747;
    scrollbar-width:thin;scrollbar-color:#33465b transparent;
  }
  .desktop-inspector .section-head{margin:8px 2px 13px}
  .desktop-inspector .section-head h2{font-size:12px;text-transform:uppercase;letter-spacing:.09em;color:#91a6bd}
  .desktop-inspector .desktop-preview,.desktop-inspector .preview-annotation{display:none!important}
  .desktop-inspector .playing-card{margin-top:0;padding:11px 10px;border-radius:14px}
  .desktop-inspector .playing-art{width:38px;height:38px;border-radius:11px}
  .desktop-inspector .playing-text b{font-size:12px}
  .desktop-inspector .playing-text small{font-size:10px}
  .desktop-inspector .round-button{width:36px;height:36px}
  .desktop-inspector .module-block{padding:13px;border-radius:15px;margin-top:11px}
  .desktop-inspector .module-block h3{font-size:12px}
  .desktop-inspector .module-block p{font-size:11px}
  .desktop-inspector .rotator .secondary-btn{min-height:36px;padding:8px 9px;font-size:11px}
  .desktop-inspector .field select{font-size:12px}
  .desktop-inspector .range{height:23px}
  .screen-area .top-intro{margin:0 0 20px;padding-top:3px}
  .screen-area .top-intro .eyebrow{font-size:11px}
  .screen-area .page-title{font-size:clamp(33px,3.2vw,47px)}
  .screen-area .subtitle{font-size:14px;max-width:700px}
  .hero-stage{
    display:flex!important;position:relative;max-width:none;width:100%;
    height:clamp(490px,70dvh,750px);border-radius:25px;
    background:radial-gradient(ellipse at center,#152235 0%,#0c1522 57%,#090e17 100%);
    border:1px solid #263547;box-shadow:inset 0 0 60px #0005;
  }
  .hero-stage:before{background:#79d9c617;width:390px;height:390px;top:19%;filter:blur(80px)}
  .hero-stage .matrix-device{--matrix-size:clamp(235px,21vw,320px)}
  .hero-stage .hero-note{top:20px;left:24px}
  .hero-stage .hero-footer{bottom:20px}
  .program-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(245px,1fr));gap:12px}
  .program-row{min-height:74px}
  .shortcut-row{grid-template-columns:repeat(4,minmax(0,125px));gap:16px}
  .shortcut-icon{width:75px;height:75px}
  .settings-group,.module-block{max-width:940px}
  .paint-stage{min-height:450px}
  .paint-grid{width:min(360px,55vh)}
  .game-stage{height:460px}
  .matrix-device.large{--matrix-size:240px}
  .screen-area .card{max-width:940px}
}
@media(min-width:960px) and (max-width:1199px){
  .app-shell{grid-template-columns:245px minmax(0,1fr)!important}
  .screen-area{padding:26px 33px 65px}
  .tabbar{padding:13px}
  .tab.active:before{left:-13px}
  .desktop-inspector{padding:9px 12px 24px}
  .program-list{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
}


/* Settings on the phone behave like grouped native-app preferences. */
@media(max-width:959px){
  .settings-group{margin-top:20px}
  .settings-heading{margin:0 4px 11px;color:#92aabf}
  .settings-list{border-radius:19px;background:#162336;overflow:hidden}
  .settings-row{gap:12px;padding:14px 13px}
  .setting-icon{width:40px;height:40px;background:#223a4a}
  .settings-fold{
    background:#152234;border:1px solid #2e4354;
    margin-top:12px;border-radius:18px;overflow:hidden;
  }
  .settings-fold>summary{
    min-height:66px;list-style:none;cursor:pointer;padding:13px 16px;
    display:flex;align-items:center;gap:13px;font-size:14px;font-weight:750;color:#e7f5fa;
    -webkit-tap-highlight-color:transparent;touch-action:manipulation
  }
  .settings-fold>summary::-webkit-details-marker{display:none}
  .settings-fold-icon{display:grid;place-items:center;flex:0 0 36px;height:36px;color:var(--mint);background:#244456;border-radius:12px}
  .settings-fold>summary .fold-chevron{width:18px;height:18px;margin-left:auto;color:#a0b5c7;transition:transform .18s ease}
  .settings-fold[open]>summary .fold-chevron{transform:rotate(90deg)}
  .settings-fold>.module-block{
    margin:0!important;border:0;border-top:1px solid #31475b;border-radius:0;
    background:#141f30;padding:17px 15px 19px;
  }
  .settings-fold>.module-block>h3{display:none}
  .settings-fold>.module-block>p:first-of-type{margin-bottom:13px}
  .settings-row button{touch-action:manipulation}
  .screen-area .app-credit{padding-bottom:8px}
}