body.runner{background:var(--ct-surface);margin:0}body.runner .demo-host{height:100vh}.runner-errors{z-index:10;flex-direction:column;gap:6px;max-height:50vh;display:flex;position:fixed;bottom:12px;left:12px;right:12px;overflow:auto}.runner-errors .demo-error{white-space:pre-wrap;font-family:var(--ct-font-mono);font-size:12px}.runner-frame{background:var(--ct-surface);border:0;flex:auto;width:100%;height:100%;min-height:0;display:block}main.playground{gap:12px;max-width:none;padding:16px 24px 24px}.pg-bar{flex-wrap:wrap;align-items:center;gap:8px 10px;display:flex}.pg-bar h1{letter-spacing:-.3px;margin:0 8px 0 0;font-size:20px;font-weight:600}.pg-field{color:var(--ct-muted);align-items:center;gap:8px;font-size:13px;display:flex}.pg-bar select,.pg-bar button,.demo-source-actions :is(button,a){font:inherit;color:var(--ct-text);background:var(--ct-surface-2);border:1px solid var(--ct-border);border-radius:var(--ct-radius-sm);min-height:32px;padding:4px 10px;font-size:13px}.pg-bar select{max-width:min(420px,100%)}.pg-bar button,.demo-source-actions :is(button,a){cursor:pointer;text-decoration:none}.pg-bar button:hover,.demo-source-actions :is(button,a):hover{border-color:var(--ct-border-strong)}.pg-bar .pg-run,.demo-source-actions .pg-run{color:var(--ct-on-accent);background:var(--ct-accent-fill);border-color:#0000;font-weight:600}.pg-bar .pg-run:hover,.demo-source-actions .pg-run:hover{background:var(--ct-accent-fill-hover)}.pg-bar :is(select,button):focus-visible,.demo-source-actions :is(button,a):focus-visible{outline:2px solid var(--ct-accent);outline-offset:2px}.pg-hint,.pg-status{color:var(--ct-muted);font-size:12px}.pg-status{text-align:right;text-overflow:ellipsis;white-space:nowrap;flex:200px;overflow:hidden}.pg-status[data-state=ok]{color:var(--ct-accent)}.pg-status[data-state=error]{color:var(--ct-danger-text)}.pg-split{background:var(--ct-surface);border:1px solid var(--ct-border);border-radius:var(--ct-radius);grid-template-columns:minmax(0,1fr) minmax(0,1fr);height:max(520px,100vh - 170px);display:grid;overflow:hidden}.pg-editor{border-right:1px solid var(--ct-border);min-width:0;min-height:0}.pg-preview{flex-direction:column;min-width:0;min-height:0;padding:16px;display:flex}.pg-placeholder{text-align:center;max-width:360px;color:var(--ct-muted);margin:auto;font-size:13px;line-height:1.6}@media (width<=1000px){main.playground{padding:12px}.pg-split{grid-template-rows:55vh 60vh;grid-template-columns:minmax(0,1fr);height:auto}.pg-editor{border-right:none;border-bottom:1px solid var(--ct-border)}.pg-status{text-align:left}}.demo-source-actions{border-bottom:1px solid var(--ct-border);flex-wrap:wrap;align-items:center;gap:6px;padding:8px 14px;display:flex}.demo-source-actions :is(button,a){min-height:28px;padding:3px 10px;font-size:12px}.demo-source-actions .pg-hint{margin-left:auto}.demo-editor{height:520px}