.playground-shell{background:var(--bg);overflow:hidden}.playground-workspace{grid-template-columns:minmax(300px, var(--editor-width)) var(--workspace-splitter-size) minmax(320px, 1fr);height:calc(100svh - var(--header-height));min-height:var(--workspace-min-height);background:var(--bg);display:grid;position:relative}.playground-workspace[data-resizing=true]{cursor:col-resize;user-select:none}.editor-panel,.preview-panel{min-width:0;min-height:var(--workspace-min-height);position:relative;overflow:hidden}.editor-panel{border-right:1px solid var(--border);background:var(--surface)}.preview-panel{background:var(--scene-surface)}.editor-panel .monaco-editor,.editor-panel .monaco-editor-background,.editor-panel .inputarea.ime-input{font-family:var(--font-mono)}.editor-loading{z-index:2;color:var(--text-muted);background:var(--surface);place-items:center;display:grid;position:absolute;inset:0}.playground-editor-dock{z-index:6;border:1px solid var(--glass-border);border-radius:var(--radius-sm);background:var(--glass-bg);max-width:calc(100% - 32px);box-shadow:var(--shadow-glass);backdrop-filter:blur(14px);justify-content:flex-end;align-items:center;gap:4px;padding:4px;display:inline-flex;position:absolute;bottom:16px;right:16px}.dock-button{border-radius:var(--radius-sm);min-height:36px;box-shadow:none;color:var(--text-muted);cursor:pointer;text-align:center;white-space:nowrap;background:0 0;border:1px solid #0000;justify-content:center;align-items:center;padding:0 12px;font-size:.9rem;font-weight:680;display:inline-flex}.dock-button:hover,.dock-button[aria-expanded=true]{background:var(--surface-muted);color:var(--text)}.dock-button.run{border-color:var(--primary-strong);background:var(--primary-strong);min-width:74px;color:var(--primary-contrast);box-shadow:var(--control-primary-shadow);gap:8px;padding:0 13px 0 10px}.dock-button.run:before{content:"";border-radius:var(--radius-pill);width:7px;height:7px;box-shadow:0 0 0 3px color-mix(in srgb, currentColor 18%, transparent);background:currentColor;flex:none}.dock-button.run:hover{border-color:var(--primary-hover);background:var(--primary-hover)}.dock-button.run[data-state=loading]{border-color:color-mix(in srgb, var(--primary-strong) 72%, var(--border));background:color-mix(in srgb, var(--primary-strong) 94%, var(--surface))}.dock-button.run[data-state=loading]:before{animation:1s ease-in-out infinite playground-status-pulse}.dock-button.run[data-state=error]{border-color:var(--danger);background:var(--danger);color:var(--color-white);box-shadow:0 10px 24px color-mix(in srgb, var(--danger) 20%, transparent)}.dock-button.run[data-state=error]:hover{background:var(--danger-strong)}@keyframes playground-status-pulse{0%,to{opacity:.62;transform:scale(.86)}50%{opacity:1;transform:scale(1)}}.playground-preset-menu{min-width:0;position:relative}.preset-trigger{grid-template-columns:minmax(72px,130px) auto;align-items:center;gap:7px;max-width:168px;min-height:34px;padding:0 10px;display:grid}.preset-trigger strong{color:var(--text);text-overflow:ellipsis;white-space:nowrap;font-size:.9rem;font-weight:760;overflow:hidden}.preset-trigger:after{content:"";border-bottom:1.5px solid;border-right:1.5px solid;width:7px;height:7px;margin-left:2px;transform:translateY(-2px)rotate(45deg)}.preset-popover{border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);width:min(380px,100vw - 32px);max-height:min(420px,100vh - 160px);box-shadow:var(--shadow);padding:6px;display:grid;position:absolute;bottom:calc(100% + 10px);right:0;overflow:auto}.preset-popover[hidden]{display:none}.preset-option{border-radius:var(--radius-sm);width:100%;min-height:78px;box-shadow:none;color:var(--text);cursor:pointer;font:inherit;text-align:left;background:0 0;border:1px solid #0000;grid-template-columns:10px minmax(0,1fr);align-items:stretch;gap:10px;padding:10px;display:grid}.preset-option:hover,.preset-option:focus-visible,.preset-option[data-active=true]{background:var(--surface-muted)}.preset-option[data-active=true]{border-color:color-mix(in srgb, var(--preset-accent) 44%, var(--border))}.preset-option-marker{border-radius:var(--radius-pill);background:var(--preset-accent)}.preset-option-content{gap:3px;min-width:0;display:grid}.preset-option-content strong,.preset-option-content span{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.preset-option-content strong{color:var(--text);font-size:.95rem;font-weight:780}.preset-option-content span{color:var(--text-muted);font-size:.86rem;line-height:1.35}.preset-option-content .preset-option-tags{color:var(--text-soft);font-family:var(--font-mono);text-transform:uppercase;font-size:.75rem}.preview-panel canvas{background:var(--scene-surface);width:100%;height:100%;min-height:0;display:block}.preview-status{z-index:7;border:1px solid color-mix(in srgb, var(--primary) 38%, var(--scene-panel-border));border-radius:var(--radius-sm);background:var(--scene-panel-bg);max-width:min(360px,100% - 40px);color:var(--scene-text);text-align:center;box-shadow:var(--shadow-scene);backdrop-filter:blur(12px);padding:9px 12px;font-size:.82rem;font-weight:720;line-height:1.35;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.preview-status[hidden]{display:none}.inspector-window{z-index:8;--tool-panel-label-width:84px;width:min(248px,100% - 24px);max-width:calc(100% - 24px);position:absolute;top:12px;left:12px}.inspector-window .tp-grlv_g{shape-rendering:geometricprecision;min-height:48px}.inspector-window .tp-grlv_g polyline{stroke-linecap:round;stroke-linejoin:round;stroke-width:1.5px;vector-effect:non-scaling-stroke}.config-panel-window{z-index:8;width:min(300px,100% - 24px);max-width:calc(100% - 24px);max-height:calc(100% - 24px);position:absolute;top:12px;right:12px;overflow:auto}@media (width<=980px){.playground-page{overflow:auto}.playground-shell{border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-soft);margin:14px 12px 36px}.playground-workspace{grid-template-columns:1fr;height:auto;min-height:auto}.playground-workspace[data-pane-collapsed=true]{grid-template-columns:1fr}.workspace-splitter.workspace-resizer{display:none}.playground-workspace[data-pane-collapsed=true] .editor-panel{visibility:visible;opacity:1;pointer-events:auto;overflow:visible}.editor-panel,.preview-panel{min-height:420px}.editor-panel{border-right:0;border-bottom:1px solid var(--border)}.playground-editor-dock{scrollbar-width:none;flex-wrap:nowrap;justify-content:stretch;max-width:none;bottom:10px;left:10px;right:10px;overflow-x:auto}.playground-editor-dock::-webkit-scrollbar{display:none}.playground-preset-menu{flex:auto}.preset-trigger{grid-template-columns:minmax(0,1fr) auto;width:100%;max-width:none}.dock-button:not(.preset-trigger){flex:none;padding:0 9px}.preset-popover{width:auto;max-height:min(56vh,420px);position:fixed;bottom:128px;left:22px;right:22px}.config-panel-window{max-height:min(46vh,360px);top:auto;bottom:12px}}:root[data-workspace-fullscreen=true] .playground-shell{box-shadow:none;border:0;border-radius:0;margin:0}:root[data-workspace-fullscreen=true] .playground-workspace{grid-template-rows:minmax(0,1fr);grid-template-columns:minmax(0,1fr);height:100dvh;min-height:100dvh}:root[data-workspace-fullscreen=true] .editor-panel,:root[data-workspace-fullscreen=true] .workspace-splitter.workspace-resizer,:root[data-workspace-fullscreen=true] .inspector-window,:root[data-workspace-fullscreen=true] .config-panel-window,:root[data-workspace-fullscreen=true] .viewer-interaction-guide{display:none}:root[data-workspace-fullscreen=true] .preview-panel{min-height:100dvh}