*{box-sizing:border-box}[hidden]{display:none!important}body{margin:0;background:#111315;color:#e4e7eb;font:13px/1.5 "Segoe UI",Arial,sans-serif}button,input,select,textarea{font:inherit}button,.button{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:1px solid #383d44;border-radius:6px;background:#25292f;color:#e0e4ea;padding:7px 11px;text-decoration:none;cursor:pointer;white-space:nowrap}button:hover,.button:hover{background:#31363d}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:2px solid #9aaac0;outline-offset:3px}.primary{background:#e4e9f0;border-color:#e4e9f0;color:#171b21;font-weight:600}.primary:hover{background:#fff}header{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:14px 24px;border-bottom:1px solid #2b3036;background:#181b1f}nav{display:flex;gap:4px}.tab{border-color:transparent;background:transparent;color:#9ba3af;padding:8px 14px}.tab.active{background:#30353d;border-color:#3a424c;color:#f1f3f6}.header-right{display:flex;align-items:center;gap:10px}#saved{font-size:11px;color:#919aa6;margin-right:8px}.sources-strip{max-width:1450px;margin:auto;padding:16px 24px 0;display:flex;justify-content:space-between;align-items:center;gap:15px}.sources-strip>a{font-size:11px;color:#a1aab7;text-decoration:none}#source-status{display:flex;gap:20px;flex-wrap:wrap}.source{display:flex;gap:7px;align-items:center}.source img{width:15px;height:15px;object-fit:contain}.source>div{display:flex;align-items:baseline;gap:7px}.source strong{font-size:11px;font-weight:500;text-transform:capitalize}.source small{color:#7f8997;font-size:10px}.dot{width:5px;height:5px;background:#59626f;border-radius:50%}.dot.live{background:#8dbd9f}.studio{display:grid;grid-template-columns:minmax(0,1fr) 380px;align-items:start;gap:24px;max-width:1450px;margin:auto;padding:20px 24px 30px}.workbench{position:sticky;top:16px;min-width:0}.preview-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}h1,h2,h3{font-size:14px;font-weight:600;line-height:1.4;margin:0}p{margin:9px 0}.background-picker{display:flex;align-items:center;gap:9px;font-size:11px;color:#9da7b4}select{max-width:100%;padding:6px 8px;border:1px solid #383e47;background:#20242a;color:#dce1e8;border-radius:5px}#preview-stage{height:min(700px,calc(100vh - 210px));min-height:420px;position:relative;overflow:hidden;border:1px solid #343a43;border-radius:7px;background:#20242a}#preview-stage.checker{background-color:#22262c;background-image:linear-gradient(45deg,#282d34 25%,transparent 25%),linear-gradient(-45deg,#282d34 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#282d34 75%),linear-gradient(-45deg,transparent 75%,#282d34 75%);background-size:24px 24px;background-position:0 0,0 12px,12px -12px,-12px 0}#preview-stage.game{background:#142334}#preview-stage.light{background:#d9dee5}iframe{width:100%;height:100%;border:0;position:absolute;inset:0}.empty-note{position:absolute;inset:0;display:flex;justify-content:center;align-items:center;flex-direction:column;gap:5px;pointer-events:none;font-size:12px;color:#a5afbc}.empty-note span+span{font-size:11px;color:#7f8b9a}.preview-actions{display:flex;align-items:center;gap:8px;margin-top:12px}.preview-actions button{font-size:11px}.preview-actions>span{margin-left:auto;color:#828d9b;font-size:11px}.notice{padding:10px 12px;margin-top:12px;font-size:12px;border-left:2px solid #90a1b9;background:#242b35;color:#cbd5e3}.inspector{background:#191c20;border:1px solid #30353d;border-radius:7px;min-width:0;overflow:hidden}.panel{display:none}.panel.active{display:block}.panel-heading{padding:17px 18px 14px;border-bottom:1px solid #30353d}.panel-heading p{font-size:11px;color:#8692a1;margin:4px 0 0}.preset-bar{display:flex;align-items:center;gap:9px;padding:13px 18px;border-bottom:1px solid #30353d;font-size:11px}.preset-bar select{flex:1;min-width:0}.preset-bar button{font-size:11px;padding:6px 8px}.control-group{margin:0;border-bottom:1px solid #30353d;padding:0 18px}.control-group>summary{padding:13px 0;color:#cfd6e0;font-size:12px;cursor:pointer;font-weight:500}.control-group[open]{padding-bottom:9px}.control{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:28px;margin:8px 0;font-size:11px;color:#aeb8c5}.control label{flex:1}.control select{max-width:160px;font-size:11px}.range-field{display:flex;align-items:center;gap:9px;width:158px}.range-field input{width:119px;min-width:0;accent-color:#acbacb;height:15px}.range-field output{font-size:10px;color:#c6d1df;width:30px;text-align:right}.control input[type=color]{width:41px;height:25px;padding:2px;background:#252a31;border:1px solid #414b58;border-radius:4px}.control input[type=checkbox]{appearance:none;width:28px;height:16px;flex-shrink:0;position:relative;border-radius:12px;background:#454d58;cursor:pointer}.control input[type=checkbox]:after{content:'';width:10px;height:10px;left:3px;top:3px;position:absolute;border-radius:50%;background:#dce3ed;transition:translate .1s}.control input[type=checkbox]:checked{background:#6b819c}.control input[type=checkbox]:checked:after{translate:12px 0}.control input[type=text]{width:158px}.control input[type=text],textarea{min-width:0;background:#13161b;border:1px solid #3b4450;color:#e0e7f0;border-radius:5px;padding:7px}#design>details{padding:0 18px;margin:0;border-bottom:1px solid #30353d}#design>details summary{padding:13px 0;cursor:pointer;font-size:12px;color:#cfd6e0}#design>details p{font-size:11px;color:#8e9bab;overflow-wrap:anywhere}textarea{width:100%;height:150px;resize:vertical;font:11px/1.5 Consolas,monospace;margin-bottom:12px}.config-actions{padding:14px 18px;display:flex;gap:8px}.config-actions>*{font-size:11px}.steps{font-size:12px;margin:0;padding:20px 24px 0 36px}.steps li{padding:0 0 22px 4px}.steps strong{font-size:12px;font-weight:500}.steps p{font-size:11px;color:#9eabba}.steps button{font-size:11px;margin-top:8px}code{font:11px/1.6 Consolas,monospace;color:#c3cfdf;overflow-wrap:anywhere}.path{display:block}.platform-link{display:flex;gap:9px;align-items:flex-start;margin-top:16px}.platform-link img{width:17px;height:17px;object-fit:contain;margin-top:3px}.platform-link>div{flex:1;min-width:0}.platform-link label{font-size:11px;display:block;color:#bdc8d8;margin-bottom:5px}.platform-link button{font-size:10px;padding:5px 8px;margin-top:6px}.footnote,.info-box{font-size:11px;line-height:1.7;color:#8f9cac;padding:0 18px 16px;margin:0}@media(max-width:1000px){.source small{display:none}.studio{grid-template-columns:minmax(0,1fr) 340px;gap:18px;padding:20px 18px}.sources-strip{padding-left:18px;padding-right:18px}header{padding:12px 18px}.header-right{gap:7px}#saved{display:none}.tab{padding:7px 11px}.range-field{width:140px}.range-field input{width:102px}.control select{max-width:140px}}@media(max-width:720px){.studio{grid-template-columns:1fr;gap:18px;padding:18px 14px}.workbench{position:static}#preview-stage{height:460px;min-height:0}.sources-strip{padding:13px 14px 0}#source-status{gap:14px}.source strong{display:none}.sources-strip>a{font-size:10px}header{padding:10px 14px;flex-wrap:wrap;gap:10px}header nav{gap:2px}.header-right{margin-left:auto}.header-right>a{display:none}.header-right button{font-size:11px;padding:7px 9px}.tab{padding:7px 10px;font-size:12px}.empty-note span+span{max-width:220px;text-align:center}.preview-actions button{font-size:10px;padding:7px 8px}.preview-actions>span{font-size:10px}.range-field{width:175px}.range-field input{width:135px}}@media(max-width:360px){header{gap:8px}.header-right{margin-left:0;width:100%;justify-content:flex-end}.tab{padding:5px 11px}.range-field{width:145px}.range-field input{width:105px}#preview-stage{height:420px}}

.simulation-controls{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-top:12px;padding:12px 0;border-bottom:1px solid #30353d;font-size:11px}.simulation-controls strong{font-size:12px;font-weight:500}.simulation-controls>span{color:#8f9cac;margin-right:auto}.simulation-controls>span[data-running="true"]{color:#bad3c2}.simulation-controls label{color:#9da7b4}.simulation-controls select,.simulation-controls button{font-size:11px}.simulation-controls button:disabled{opacity:.5;cursor:wait}@media(max-width:1000px){.simulation-controls>span{margin-right:0}.simulation-controls label{margin-left:auto}.simulation-controls select{max-width:190px}}@media(max-width:540px){.simulation-controls label{margin-left:0}.simulation-controls select{max-width:180px}.simulation-controls{gap:8px}}
:root{--conn-border:#30353d;--conn-muted:#9eabba;--conn-input:#13161b;--conn-good:#bad3c2}.connection-intro{padding:16px 18px;font-size:12px;color:var(--conn-muted)}.direct-card{border-top:1px solid var(--conn-border);padding:0 18px}.direct-card summary{display:flex;align-items:center;gap:10px;padding:16px 0;cursor:pointer;list-style:none}.direct-card summary:after{content:'+';color:var(--conn-muted);font-size:16px}.direct-card[open] summary:after{content:'−'}.direct-card summary img{width:18px;height:18px;object-fit:contain}.direct-card summary strong{font-size:13px;font-weight:600}.connection-state{margin-left:auto;color:var(--conn-muted);font-size:10px}.connection-state[data-status=connected]{color:var(--conn-good)}.connection-help,.connection-warning{font-size:11px;color:var(--conn-muted);line-height:1.6;margin:0 0 16px}.connection-field{display:grid;gap:6px;margin-bottom:12px}.connection-field>span{font-size:11px;color:#c2cbd8}.connection-field input{width:100%;min-width:0;background:var(--conn-input);color:#e0e7f0;border:1px solid #3b4450;border-radius:5px;padding:9px 10px;font-size:12px}.connection-field input::placeholder{color:#738092;font-size:11px}.connection-enable{display:flex;align-items:center;gap:8px;font-size:12px;margin:16px 0}.connection-enable input{accent-color:#9aaac0}.connection-actions{display:flex;flex-wrap:wrap;gap:8px}.connection-actions button{font-size:11px;min-height:36px}.connection-result{font-size:11px;color:#c6d2e2;overflow-wrap:anywhere;margin:10px 0}.connection-warning{margin-bottom:12px}.connection-guide,.connection-result a{font-size:11px;color:#c3cfdf}.connection-guide{display:inline-block;margin:0 0 18px}.legacy-connection{padding:0 18px;border-top:1px solid var(--conn-border)}.legacy-connection>summary{padding:16px 0;font-size:12px;cursor:pointer;color:var(--conn-muted)}.legacy-connection .steps{padding-left:18px;padding-right:0}button:disabled{opacity:.5;cursor:wait}
