:root{color-scheme:light;font-family:IBM Plex Sans,Avenir Next,Segoe UI,sans-serif;--bg-start: #f5f7fa;--bg-mid: #eef3f8;--bg-end: #f8fafb;--text-main: #17233a;--text-muted: #46526a;--panel-bg: rgba(255, 255, 255, .84);--panel-border: rgba(23, 35, 58, .14);--surface-border: rgba(23, 35, 58, .2);--surface-bg: #ffffff;--tab-bg: rgba(23, 35, 58, .08);--tab-text: #2f3e5f;--tab-active-bg: #ffffff;--tab-active-text: #0a2540;--button-bg: rgba(255, 255, 255, .76);--button-border: rgba(23, 35, 58, .24);--button-text: #1c2a43;--status-bg: #edf6ff;--status-border: #90b8e6;--status-text: #1b4b80;--error-bg: #fff1f1;--error-border: #d65252;--error-text: #8d1f1f}:root[data-theme=dark]{color-scheme:dark;--bg-start: #10161f;--bg-mid: #0c121a;--bg-end: #111924;--text-main: #d8e2f2;--text-muted: #a9b7cc;--panel-bg: rgba(20, 30, 44, .9);--panel-border: rgba(130, 152, 186, .24);--surface-border: rgba(133, 157, 192, .35);--surface-bg: rgba(14, 24, 37, .94);--tab-bg: rgba(135, 157, 190, .18);--tab-text: #c3d2eb;--tab-active-bg: rgba(214, 228, 255, .22);--tab-active-text: #f0f5ff;--button-bg: rgba(31, 44, 64, .86);--button-border: rgba(152, 175, 213, .46);--button-text: #e3ecff;--status-bg: rgba(24, 64, 110, .28);--status-border: rgba(119, 164, 220, .56);--status-text: #cde5ff;--error-bg: rgba(122, 33, 33, .35);--error-border: rgba(233, 120, 120, .55);--error-text: #ffd2d2}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:linear-gradient(145deg,var(--bg-start) 0%,var(--bg-mid) 50%,var(--bg-end) 100%);color:var(--text-main)}.playground{max-width:1200px;margin:0 auto;padding:1.5rem}.toolbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1rem}.toolbar h1{margin:0;font-size:1.5rem}.toolbar-actions{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem}.example-picker{display:inline-flex;align-items:center;gap:.45rem;padding:.15rem .35rem;border:1px solid var(--button-border);border-radius:999px;background:var(--button-bg)}.example-picker span{font-size:.8rem;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.04em}.example-picker select{border:0;background:transparent;color:var(--button-text);font-size:.9rem;padding:.2rem .4rem;max-width:16rem}.render-control{display:inline-flex;align-items:center;gap:.45rem;padding:.15rem .35rem;border:1px solid var(--button-border);border-radius:999px;background:var(--button-bg)}.render-control span{font-size:.76rem;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.04em}.render-control select{border:0;background:transparent;color:var(--button-text);font-size:.85rem;padding:.2rem .3rem;max-width:10rem}.render-control select:disabled{opacity:.55;cursor:not-allowed}.format-tabs{display:inline-flex;padding:.25rem;border-radius:999px;background:var(--tab-bg);gap:.25rem}.format-tabs button{border:0;border-radius:999px;padding:.4rem .8rem;font-weight:600;color:var(--tab-text);background:transparent;cursor:pointer}.format-tabs button.is-active{background:var(--tab-active-bg);color:var(--tab-active-text);box-shadow:0 1px 2px #091e4233}.toolbar-button{border:1px solid var(--button-border);background:var(--button-bg);color:var(--button-text);border-radius:999px;padding:.4rem .8rem;font-weight:600;cursor:pointer}.workspace{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}.panel{background:var(--panel-bg);border:1px solid var(--panel-border);border-radius:14px;padding:1rem}.panel h2{margin:0 0 .75rem;font-size:.9rem;text-transform:uppercase;letter-spacing:.04em;color:var(--text-muted)}.share-status,.preview-error{margin:0 0 .75rem;padding:.6rem .75rem;border-radius:8px;font-size:.88rem}.share-status{border:1px solid var(--status-border);background:var(--status-bg);color:var(--status-text)}.preview-error{border:1px solid var(--error-border);background:var(--error-bg);color:var(--error-text)}.share-status[hidden],.preview-error[hidden]{display:none}.editor-input{width:100%;min-height:420px;resize:vertical;border:1px solid var(--surface-border);border-radius:10px;padding:.85rem;font:500 .94rem/1.45 JetBrains Mono,Iosevka,SFMono-Regular,monospace;background:var(--surface-bg);color:var(--text-main)}.preview-output{min-height:420px;overflow:auto;border:1px solid var(--surface-border);border-radius:10px;padding:.8rem;background:var(--surface-bg);font:500 .93rem/1.45 JetBrains Mono,Iosevka,SFMono-Regular,monospace;white-space:pre}@media(max-width:900px){.workspace{grid-template-columns:1fr}.toolbar{align-items:flex-start}.toolbar-actions{width:100%}.example-picker{width:100%;justify-content:space-between;border-radius:12px;padding:.4rem .6rem}.example-picker select{max-width:none;width:100%}.format-tabs{width:100%;justify-content:center}.render-control{width:100%;justify-content:space-between;border-radius:12px;padding:.4rem .6rem}.render-control select{max-width:none;width:100%}.editor-input,.preview-output{min-height:320px}}