:root{color-scheme:light;font-family:Space Grotesk,Avenir Next,Segoe UI,sans-serif;--bg-base: #f1f5fa;--bg-accent: #e8eef7;--bg-rim: #dde6f0;--text-main: #13263e;--text-muted: #4a607a;--panel-bg: rgba(255, 255, 255, .92);--panel-border: rgba(17, 33, 56, .12);--surface-bg: #ffffff;--surface-border: rgba(17, 33, 56, .2);--button-bg: #f6f9fe;--button-border: rgba(17, 33, 56, .2);--button-text: #133055;--button-active-bg: #1f6feb;--button-active-text: #f4f9ff;--tab-bg: rgba(17, 33, 56, .06);--tab-text: #244366;--tab-active-bg: #ffffff;--tab-active-text: #0f2a4d;--status-bg: #e9f5ff;--status-border: #7bb4e7;--status-text: #0f4a80;--error-bg: #ffecec;--error-border: #e15d5d;--error-text: #9d2020;--editor-token-type: #7a44cd;--editor-token-keyword: #275f98;--editor-token-comment: #6a7f95;--editor-token-string: #926100;--editor-token-number: #5f48bf;--editor-token-variable: #9f237f;--editor-token-class: #1a8b74;--editor-token-transition: #0a8146;--editor-token-delimiter: #355a82;--snippet-code-bg: #0d1b2f;--snippet-code-text: #d5e4f8;--focus-ring: 0 0 0 2px rgba(31, 111, 235, .3)}:root[data-theme=dark]{color-scheme:dark;--bg-base: #101826;--bg-accent: #0e1828;--bg-rim: #0b1420;--text-main: #d7e6fa;--text-muted: #9cb5d1;--panel-bg: rgba(14, 26, 42, .94);--panel-border: rgba(140, 171, 208, .2);--surface-bg: rgba(10, 20, 32, .92);--surface-border: rgba(152, 186, 227, .36);--button-bg: rgba(22, 38, 60, .94);--button-border: rgba(132, 169, 216, .36);--button-text: #dceaff;--button-active-bg: #2f85ff;--button-active-text: #f3f8ff;--tab-bg: rgba(132, 169, 216, .16);--tab-text: #c1daf8;--tab-active-bg: rgba(225, 240, 255, .2);--tab-active-text: #f5f9ff;--status-bg: rgba(22, 79, 128, .35);--status-border: rgba(128, 181, 231, .66);--status-text: #d5ecff;--error-bg: rgba(140, 35, 35, .38);--error-border: rgba(240, 132, 132, .65);--error-text: #ffd7d7;--editor-token-type: #b68dff;--editor-token-keyword: #79b8ff;--editor-token-comment: #7f97b3;--editor-token-string: #f0bf6d;--editor-token-number: #b99bff;--editor-token-variable: #f291de;--editor-token-class: #7be3c5;--editor-token-transition: #66dfa5;--editor-token-delimiter: #b8cde5;--snippet-code-bg: #0a1323;--snippet-code-text: #bfd6f4}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:linear-gradient(165deg,var(--bg-base) 0%,var(--bg-accent) 55%,var(--bg-rim) 100%);color:var(--text-main)}.playground{max-width:1200px;margin:0 auto;padding:1.15rem;display:grid;gap:.85rem}.toolbar{border:1px solid var(--panel-border);border-radius:14px;padding:.85rem;background:var(--panel-bg);display:grid;gap:.7rem}.toolbar-title-group{display:flex;align-items:center;justify-content:space-between;gap:.75rem}.toolbar-title-actions{display:inline-flex;align-items:center;margin-left:auto}.toolbar h1{margin:0;font-size:clamp(1.35rem,2.1vw,1.7rem);letter-spacing:-.02em}.toolbar-subtitle{margin:0;color:var(--text-muted);font-size:.95rem}.repo-link{color:var(--text-muted);text-decoration:none;font-size:.62em;margin-left:.55rem;font-weight:500}.repo-link:hover{text-decoration:underline}.toolbar-actions{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem}.toolbar-actions-primary{justify-content:space-between;flex-wrap:nowrap}.toolbar-actions-left,.toolbar-actions-right{display:inline-flex;align-items:center;gap:.5rem}.toolbar-actions-left{min-width:0;flex:1 1 auto;flex-wrap:wrap}.toolbar-actions-right{margin-left:auto;flex:0 0 auto;flex-wrap:nowrap}.example-picker{display:inline-flex;align-items:center;gap:.55rem;border-radius:10px;border:1px solid var(--button-border);background:var(--button-bg);padding:.25rem .5rem}.example-picker span{color:var(--text-muted);font-size:.78rem;font-weight:700}.example-picker select,.render-setting select{border:1px solid var(--surface-border);border-radius:10px;padding:.36rem .55rem;background:var(--surface-bg);color:var(--button-text);font-size:.9rem;min-width:8rem}.example-picker select{border:0;background:transparent;min-width:14rem;max-width:26rem}.example-picker select:focus-visible,.render-setting select:focus-visible,.toolbar-button:focus-visible,.preview-controls-toggle:focus-visible,.preview-toolbar-button:focus-visible,.snippet-action-button:focus-visible,.export-menu button:focus-visible{outline:none;box-shadow:var(--focus-ring)}.format-tabs{display:inline-flex;gap:.25rem;background:var(--tab-bg);padding:.2rem;border-radius:10px}.format-tabs button{border:0;border-radius:8px;padding:.33rem .75rem;font-weight:700;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 3px #0a162333}.toolbar-button{border:1px solid var(--button-border);border-radius:10px;padding:.38rem .75rem;background:var(--button-bg);color:var(--button-text);font-weight:640;cursor:pointer}.toolbar-button.is-active{background:var(--button-active-bg);color:var(--button-active-text);border-color:transparent}.theme-cycler{width:2rem;min-width:2rem;height:2rem;padding:0;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;opacity:.72}.theme-cycler-subtle{border-color:transparent;background:transparent}.theme-cycler:hover{opacity:.95}.theme-cycler-subtle:hover{border-color:color-mix(in srgb,var(--button-border) 45%,transparent);background:color-mix(in srgb,var(--tab-bg) 65%,transparent)}.theme-cycler svg{width:1.05rem;height:1.05rem;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.toolbar-button-toggle:after{content:"▾";display:inline-block;margin-left:.4rem;transform:rotate(0);transition:transform .12s ease-out}.toolbar-button-toggle.is-active:after{transform:rotate(180deg)}.export-control{position:relative}.export-menu{position:absolute;top:calc(100% + .4rem);right:0;z-index:8;border:1px solid var(--surface-border);background:var(--surface-bg);border-radius:12px;min-width:10rem;box-shadow:0 10px 22px #06101e47;overflow:hidden}.export-menu button{width:100%;border:0;background:transparent;text-align:left;color:var(--button-text);padding:.58rem .75rem;cursor:pointer}.export-menu button:hover{background:#2b73ce1a}.advanced-panel{border:1px solid var(--panel-border);border-radius:12px;background:var(--panel-bg);padding:.85rem;display:grid;gap:.75rem}.advanced-panel[hidden]{display:none}.advanced-panel h2{margin:0;font-size:.84rem;text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted)}.render-settings-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.8rem}.render-setting{border:1px solid var(--surface-border);border-radius:12px;background:var(--surface-bg);padding:.7rem;display:grid;gap:.55rem}.render-setting label{color:var(--text-main);font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;font-weight:700}.render-help{margin:0;color:var(--text-muted);font-size:.77rem;line-height:1.35}.render-setting.is-disabled{opacity:.78}.workspace{display:grid;gap:.85rem;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.panel{border:1px solid var(--panel-border);border-radius:12px;background:var(--panel-bg);padding:.85rem}.panel-header{display:flex;align-items:flex-start;justify-content:space-between;gap:.75rem;margin-bottom:.75rem}.panel h2{margin:0;font-size:.9rem;text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted)}.text-preview-toolbar{display:inline-flex;align-items:center;justify-content:flex-end;gap:.5rem;flex-wrap:wrap}.text-preview-toolbar[hidden]{display:none}.preview-mode-tabs{display:inline-flex;gap:.18rem;background:var(--tab-bg);border:1px solid var(--surface-border);border-radius:999px;padding:.18rem}.preview-mode-tabs button,.preview-text-action{border:0;border-radius:999px;background:transparent;color:var(--button-text);cursor:pointer;font-size:.8rem;font-weight:650;line-height:1;min-height:1.95rem}.preview-mode-tabs button{padding:.4rem .72rem}.preview-mode-tabs button.is-active{background:var(--button-active-bg);color:var(--button-active-text)}.preview-text-actions{display:inline-flex;align-items:center;gap:.35rem}.preview-text-action{border:1px solid var(--button-border);background:color-mix(in srgb,var(--button-bg) 88%,transparent);padding:.4rem .72rem}.preview-mode-tabs button:hover,.preview-text-action:hover{background:color-mix(in srgb,var(--button-active-bg) 18%,var(--button-bg))}.preview-mode-tabs button.is-active:hover{background:var(--button-active-bg)}.share-status,.editor-status,.preview-error{margin:0;padding:.58rem .75rem;border-radius:10px;font-size:.84rem}.share-status,.editor-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{margin:0 0 .7rem}.editor-status,.preview-error{margin:.7rem 0 0}.share-status[hidden],.editor-status[hidden],.preview-error[hidden]{display:none}.editor-codemirror,.preview-stage{width:100%;min-height:430px;border:1px solid var(--surface-border);border-radius:12px;background:var(--surface-bg);color:var(--text-main);font:500 .93rem/1.45 IBM Plex Mono,Iosevka,SFMono-Regular,monospace}.preview-stage{position:relative;overflow:hidden;height:430px}.preview-controls-overlay{position:absolute;z-index:5;top:.6rem;right:.6rem;display:inline-flex;align-items:center;justify-content:flex-end;flex-direction:row-reverse;gap:.35rem}.preview-controls-overlay[hidden]{display:none}.preview-controls-toggle{border:1px solid var(--surface-border);background:var(--tab-bg);color:var(--button-text);border-radius:999px;width:2.05rem;min-width:2.05rem;height:2.05rem;display:inline-flex;align-items:center;justify-content:center;cursor:pointer}.preview-controls-toggle-icon{width:1rem;height:1rem;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.preview-controls-overlay.is-expanded .preview-controls-toggle{background:var(--button-active-bg);border-color:transparent;color:var(--button-active-text)}.preview-toolbar{display:inline-flex;align-items:center;gap:.35rem;background:var(--tab-bg);border:1px solid var(--surface-border);border-radius:999px;padding:.18rem;overflow:hidden;transform-origin:right center;transition:max-width .16s ease,opacity .16s ease,transform .16s ease,margin-inline-end .16s ease,border-color .16s ease}.preview-controls-overlay:not(.is-expanded) .preview-toolbar{max-width:0;opacity:0;transform:translate(8px);margin-inline-end:0;border-color:transparent;pointer-events:none;padding-left:0;padding-right:0}.preview-controls-overlay.is-expanded .preview-toolbar{max-width:24rem;opacity:1;transform:translate(0);margin-inline-end:.2rem;pointer-events:auto}.preview-toolbar-button{border:0;background:transparent;border-radius:999px;color:var(--button-text);cursor:pointer;font-weight:650;min-width:2rem;height:1.95rem;padding:0 .6rem}.preview-toolbar-button:hover{background:#2b73ce26}.preview-zoom-label{min-width:3.35rem;text-align:center;color:var(--text-main);font-weight:700;font-size:.82rem}.preview-output{height:100%;min-height:100%;padding:.75rem;overflow:auto;white-space:pre}.preview-output.is-terminal{background:radial-gradient(circle at top right,rgba(56,136,233,.14),transparent 34%),linear-gradient(180deg,#0b1727fa,#070f1cfa);color:#edf5ff}.preview-output.is-svg{overflow:hidden;white-space:normal}.preview-output.is-svg.is-draggable{cursor:grab}.preview-output.is-svg.is-dragging{cursor:grabbing}.preview-output.is-svg.is-draggable *,.preview-output.is-svg.is-draggable svg,.preview-output.is-svg.is-draggable [data-panzoom-viewport]{cursor:grab}.preview-output.is-svg.is-dragging *,.preview-output.is-svg.is-dragging svg,.preview-output.is-svg.is-dragging [data-panzoom-viewport]{cursor:grabbing}.editor-codemirror{overflow:hidden}.editor-codemirror .cm-editor{height:100%;min-height:inherit;background:transparent;color:var(--text-main)}.editor-codemirror .cm-scroller{font:500 .93rem/1.45 IBM Plex Mono,Iosevka,SFMono-Regular,monospace}.editor-codemirror .cm-content{min-height:100%;padding:.86rem}.editor-codemirror .cm-line{padding:0}.editor-codemirror .cm-gutters{border-right:0;background:transparent}.editor-codemirror .cm-cursor,.editor-codemirror .cm-dropCursor{border-left-color:var(--text-main)}.editor-codemirror .cm-lintRange-error{background-image:linear-gradient(to bottom,transparent calc(100% - 2px),var(--error-border) calc(100% - 2px))}.editor-codemirror .cm-tooltip .cm-tooltip-lint{list-style:none;margin:0;padding:0;border:1px solid var(--surface-border);border-radius:10px;background:var(--panel-bg);color:var(--text-main)}.editor-codemirror .cm-tooltip .cm-diagnostic{font-size:.82rem;color:inherit}.editor-codemirror .cm-tooltip .cm-diagnosticText{color:inherit}.editor-codemirror .cm-tooltip .cm-diagnosticSource{color:var(--text-muted)}.editor-codemirror .cm-tooltip .cm-diagnosticAction{border:1px solid var(--button-border);background:var(--button-bg);color:var(--button-text)}.editor-input{resize:vertical;padding:.86rem}.editor-input-sync{position:absolute;width:1px;height:1px;padding:0;margin:-1px;border:0;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);white-space:nowrap}.preview-output svg{display:block;margin:0;max-width:none;max-height:none;transform-origin:top left;touch-action:none}.ansi-preview{margin:0;min-height:100%;white-space:pre;font:inherit}.snippet-gallery{border:1px solid var(--panel-border);border-radius:12px;background:var(--panel-bg);padding:.85rem;display:grid;gap:.7rem}.snippet-gallery-header h2{margin:0;font-size:1.05rem;letter-spacing:-.01em}.snippet-gallery-header p{margin:.3rem 0 0;color:var(--text-muted);font-size:.88rem}.snippet-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem}.snippet-card{border:1px solid var(--surface-border);border-radius:10px;background:var(--surface-bg);padding:.7rem;display:grid;gap:.5rem}.snippet-card-header{display:flex;align-items:center;justify-content:space-between;gap:.7rem}.snippet-title{margin:0;font-size:.92rem}.snippet-category{border-radius:999px;border:1px solid var(--surface-border);background:var(--tab-bg);color:var(--text-muted);font-size:.68rem;text-transform:uppercase;letter-spacing:.06em;font-weight:700;padding:.18rem .5rem}.snippet-description{margin:0;font-size:.8rem;color:var(--text-muted)}.snippet-preview{margin:0;border-radius:10px;border:1px solid rgba(148,184,225,.2);background:var(--snippet-code-bg);color:var(--snippet-code-text);min-height:96px;max-height:132px;overflow:hidden;padding:.64rem;font:500 .77rem/1.4 IBM Plex Mono,Iosevka,SFMono-Regular,monospace}.snippet-token{color:var(--snippet-code-text)}.snippet-token-type{color:var(--editor-token-type);font-weight:700}.snippet-token-keyword{color:var(--editor-token-keyword);font-weight:600}.snippet-token-comment{color:var(--editor-token-comment);font-style:italic}.snippet-token-string{color:var(--editor-token-string)}.snippet-token-number{color:var(--editor-token-number)}.snippet-token-variable{color:var(--editor-token-variable)}.snippet-token-class{color:var(--editor-token-class)}.snippet-token-transition{color:var(--editor-token-transition);font-weight:700}.snippet-token-delimiter{color:var(--editor-token-delimiter)}.snippet-actions{display:flex;gap:.45rem}.snippet-action-button{border:1px solid var(--button-border);border-radius:999px;background:var(--button-bg);color:var(--button-text);font-weight:650;cursor:pointer;padding:.35rem .7rem;font-size:.82rem}.snippet-action-button-primary{background:var(--button-active-bg);border-color:transparent;color:var(--button-active-text)}.benchmark-mode .toolbar{gap:.6rem}.benchmark-mode .toolbar h1{font-size:1.5rem}.benchmark-mode .toolbar-actions{justify-content:flex-end}.benchmark-mode ul{margin:0;padding-left:1rem;color:var(--text-main)}.benchmark-mode .preview-stage{min-height:320px;height:320px}:root[data-theme=dark] .preview-output svg [fill=white]{fill:#1b2734}:root[data-theme=dark] .preview-output svg [fill="#333"]{fill:#e6edf7}:root[data-theme=dark] .preview-output svg [stroke="#333"]{stroke:#96adc8}:root[data-theme=dark] .preview-output svg rect.subgraph{stroke:#5c738d}:root[data-theme=dark] .preview-output svg [fill="#fff5ad"]{fill:#3d3a1e}:root[data-theme=dark] .preview-output svg [stroke="#aaaa33"]{stroke:#8a8a2a}@media(max-width:1120px){.render-settings-grid,.snippet-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:920px){.toolbar-title-group{align-items:baseline}.workspace{grid-template-columns:1fr}.editor-codemirror,.editor-input,.preview-stage{min-height:340px}.preview-stage{height:340px}.toolbar-actions-primary{width:100%;flex-wrap:wrap}.toolbar-actions-left{flex:1 1 100%}.toolbar-actions-right{margin-left:0}.example-picker{width:100%;border-radius:12px;justify-content:space-between}.example-picker select{min-width:0;width:100%}}@media(max-width:760px){.playground{padding:1rem}.toolbar-title-group{align-items:center}.toolbar-actions{gap:.5rem}.toolbar-actions-primary{flex-direction:column;align-items:stretch}.toolbar-actions-left,.toolbar-actions-right{width:100%;margin-left:0}.toolbar-actions-right{justify-content:flex-end}.toolbar-actions-left .toolbar-button,.toolbar-actions-left .format-tabs,.toolbar-actions-left .export-control{width:100%}.toolbar-actions-right .toolbar-button[data-share]{width:auto}.toolbar-actions-left .format-tabs{justify-content:center}.toolbar-actions-left .toolbar-button{border-radius:12px;text-align:center}.toolbar-actions-left .export-control{display:grid}.export-menu{position:static;margin-top:.35rem;width:100%}.render-settings-grid,.snippet-grid{grid-template-columns:1fr}.snippet-actions{flex-wrap:wrap}}