*{box-sizing:border-box}body{margin:0;height:100dvh;overflow:hidden;background:#000;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;color:#fff}#preview{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%}#editor-overlay{position:fixed;right:0;top:0;width:45%;height:100dvh;display:flex;flex-direction:column;background:#282c34d9;border-left:1px solid rgba(255,255,255,.1);z-index:10;overflow:hidden;min-width:300px}#editor-titlebar{display:flex;align-items:center;gap:8px;padding:6px 10px;background:#0000004d;border-bottom:1px solid rgba(255,255,255,.08);cursor:move;flex-shrink:0;flex-wrap:wrap}.tabs{display:flex;gap:2px;flex-shrink:0}.tab{padding:4px 12px;background:transparent;color:#888;border:1px solid transparent;border-radius:4px;font-size:12px;font-family:inherit;cursor:pointer;transition:color .15s,background .15s,border-color .15s}.tab:hover{color:#ccc;background:#ffffff14}.tab.active{color:#fff;background:#ffffff26;border-color:#fff3}#presetSelect{padding:4px 8px;background:#0006;color:#ccc;border:1px solid rgba(255,255,255,.15);border-radius:4px;font-size:12px;cursor:pointer;flex:1;min-width:0}#presetSelect:hover{background:#0009;border-color:#ffffff4d}#status{padding:3px 8px;border-radius:3px;font-size:11px;font-family:Monaco,Courier New,monospace;white-space:nowrap;flex-shrink:0;max-width:200px;overflow:hidden;text-overflow:ellipsis}#status.running{background:#1a4d1ab3;color:#4ade80}#status.error{background:#4d1a1ab3;color:#ff6b6b}#closeBtn{padding:2px 8px;background:transparent;color:#888;border:1px solid rgba(255,255,255,.15);border-radius:4px;font-size:16px;cursor:pointer;line-height:1.2;flex-shrink:0}#closeBtn:hover{color:#fff;background:#ffffff1a}#editor-host{flex:1;overflow:hidden;display:flex;flex-direction:column}#editor-host .cm-editor{height:100%}#editor-host .cm-scroller{flex:1;overflow:auto}#values-pane{flex-shrink:0;border-top:1px solid rgba(255,255,255,.08);overflow:hidden;transition:max-height .2s ease;max-height:30px;background:#0003}#values-pane.expanded{max-height:200px}#values-toggle{padding:6px 12px;font-size:11px;color:#888;cursor:pointer;-webkit-user-select:none;user-select:none;white-space:nowrap}#values-toggle:hover{color:#ccc}#values-content{padding:4px 12px 8px;font-family:Monaco,Courier New,monospace;font-size:11px;line-height:1.6;color:#aaa;overflow-y:auto;max-height:170px}.value-line{margin:1px 0}.value-name{color:#66b3ff}.value-equals{color:#888}.value-result{color:#8df88d}#reopenBtn{position:fixed;bottom:20px;right:20px;width:44px;height:44px;background:#282c34d9;color:#ccc;border:1px solid rgba(255,255,255,.2);border-radius:50%;font-size:20px;cursor:pointer;z-index:20;display:flex;align-items:center;justify-content:center;line-height:1}#reopenBtn:hover{background:#3c414be6;color:#fff}#resize-handle{position:absolute;left:0;top:0;width:4px;height:100%;cursor:ew-resize;z-index:11}#resize-handle:hover{background:#ffffff1a}.cm-editor{height:100%;font-size:13px}.cm-editor .cm-content{font-family:Monaco,Courier New,monospace}.cm-editor.cm-focused{outline:none}@media (max-width: 768px) and (min-width: 481px){#editor-overlay{width:50%}}@media (max-width: 480px){#editor-overlay{width:100%;background:#282c34bf;left:0;border-left:none}#editor-titlebar{cursor:default}#resize-handle{display:none}}#dom-preview-layer{position:absolute;top:0;right:0;bottom:0;left:0;display:none;place-items:center;gap:20px;pointer-events:none;z-index:1}#dom-preview-layer.active{display:grid}#demo-card{--glow: .35;--hue: 210;width:280px;padding:20px;border-radius:16px;background:hsl(var(--hue),80%,55%);box-shadow:0 12px 42px hsla(var(--hue),90%,60%,var(--glow));transform-origin:center;text-align:center;color:#0a1022;font-weight:700;display:none}#demo-readout{font-family:ui-monospace,monospace;font-size:13px;margin-top:8px;font-weight:600}#demo-meter{width:320px;display:none}#demo-meter.active{display:block}.demo-track{height:18px;border-radius:999px;background:#1f2937;overflow:hidden;border:1px solid #2b3442}#demo-fill{height:100%;width:0%;background:linear-gradient(90deg,#36cfc9,#5b8cff)}#demo-lamp{margin-top:16px;padding:12px 14px;border-radius:10px;background:#1c2534;border:1px solid #334155;transition:.15s}#demo-lamp.is-hot{background:#4d1f1f;border-color:#f97316;box-shadow:0 0 24px #f9731699;color:#ffd5bd}