:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--font-sans:Inter, "SF Pro Text", Roboto, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;--font-mono:"Roboto Mono", "SFMono-Regular", Menlo, "Segoe UI Mono", Consolas, monospace;--gray-20:#edf0f2;--gray-30:#cdcdd6;--gray-40:#979aad;--gray-60:#696b7d;--gray-70:#3c3d4e;--gray-80:#232538;--gray-90:#14162c;--gray-100:#0b0d22;--white:#fff;--fire:#e6484f;--fire-70:#c3373d;--sky-70:#2258c3;--orange:#dd8c1b;--orange-dark:#d59b74;--orange-15:#e0ac0026;--berry-dark-50:#b984db;--water-dark:#637cc1;--turtle-dark:#388b72;--ocean-dark:#8aaec8;--playground-bg:var(--gray-100);--playground-panel:var(--gray-100);--playground-input-bg:var(--gray-90);--playground-divider:#3c3d4e7a;--playground-text-primary:var(--gray-20);--playground-text-secondary:var(--gray-40);--playground-border:var(--gray-60);--playground-border-soft:#696b7d47;--playground-hover:var(--gray-80);--playground-scrollbar-track:var(--gray-100);--playground-scrollbar-thumb:var(--gray-70);--playground-scrollbar-thumb-hover:var(--gray-60);font-family:var(--font-sans);background:var(--playground-bg);color:var(--playground-text-secondary)}*{box-sizing:border-box}body{background:var(--playground-bg);min-width:320px;height:100vh;margin:0;overflow:hidden}button,select,input,textarea{font:inherit}button{cursor:pointer}.app-shell{background:var(--playground-bg);height:100vh;color:var(--playground-text-secondary);grid-template-rows:auto minmax(0,1fr);font-size:14px;display:grid;overflow:hidden}.topbar{background:var(--playground-panel);justify-content:space-between;align-items:center;gap:18px;min-height:56px;padding:12px 44px;display:flex}.topbar h1{color:var(--playground-text-primary);letter-spacing:0;margin:0;font-size:18px;font-weight:700;line-height:1.25}.status{max-width:46vw;min-height:30px;color:var(--turtle-dark);text-overflow:ellipsis;white-space:nowrap;background:#388b721a;border:1px solid #388b7273;border-radius:4px;flex:0 auto;align-items:center;padding:5px 10px;font-size:12px;font-weight:600;display:inline-flex;overflow:hidden}.status-busy{color:var(--orange);background:var(--orange-15);border-color:#dd8c1b73}.status-error{color:var(--fire);background:#e6484f1f;border-color:#e6484f8c}.workspace{grid-template-columns:minmax(360px, var(--pane-first-column,1fr)) 8px minmax(420px, var(--pane-second-column,1fr));min-width:0;min-height:0;display:grid;overflow:hidden}.source-column,.result-column{grid-template-rows:auto minmax(0,1fr);min-width:0;min-height:0;display:grid}.source-column{grid-column:1}.result-column{grid-column:3}.pane-separator{z-index:3;cursor:col-resize;touch-action:none;background:0 0;border:0;outline:none;grid-area:1/2/-1;min-width:8px;min-height:8px;padding:0;transition:background-color .12s;position:relative}.pane-separator:before{content:"";background:var(--playground-divider);opacity:.36;transition:background-color .12s,opacity .12s,box-shadow .12s;position:absolute;inset:0 3px}.pane-separator:hover,.pane-separator:focus-visible,.workspace.is-resizing .pane-separator{background:#e6484f24}.pane-separator:hover:before,.pane-separator:focus-visible:before,.workspace.is-resizing .pane-separator:before{background:var(--fire);opacity:.9;box-shadow:0 0 8px #e6484f6b}.workspace.is-resizing{-webkit-user-select:none;user-select:none}.workspace.workspace-rows{grid-template-columns:1fr;grid-template-rows:minmax(180px, var(--pane-first-row,1fr)) 8px minmax(180px, var(--pane-second-row,1fr))}.workspace-rows .source-column{grid-area:1/1}.workspace-rows .result-column{grid-area:3/1}.workspace-rows .pane-separator{cursor:row-resize;grid-area:2/1}.workspace-rows .pane-separator:before{inset:3px 0}.column-header{border-top:1px solid var(--playground-border-soft);border-bottom:1px solid var(--playground-border-soft);background:var(--playground-panel);justify-content:space-between;align-items:center;gap:14px;min-height:48px;padding:8px 44px;display:flex}.column-header h2{color:var(--playground-text-primary);letter-spacing:0;margin:0;font-size:14px;font-weight:700;line-height:1.25}.actions{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.secondary-action{border:1px solid var(--playground-border);min-height:32px;color:var(--playground-text-primary);background:var(--playground-panel);border-radius:4px;padding:0 12px;font-size:13px;font-weight:600}.secondary-action:hover,.tab-button:hover{background:var(--playground-hover)}.editor-shell{--gutter-width:56px;--editor-padding-y:18px;--editor-padding-x:18px;--editor-line-height:22px;grid-template-columns:var(--gutter-width) minmax(0, 1fr);background:var(--playground-panel);grid-template-rows:minmax(0,1fr);min-width:0;min-height:0;display:grid;position:relative;overflow:hidden}.line-number-gutter{z-index:1;border-right:1px solid var(--playground-border-soft);background:#14162c6b;grid-area:1/1;min-width:0;min-height:0;position:relative;overflow:hidden}.syntax-layer{z-index:1;min-width:0;width:var(--editor-overlay-width,100%);height:max-content;min-height:max-content;padding:var(--editor-padding-y) var(--editor-padding-x);white-space:normal;color:var(--gray-30);font-family:var(--font-mono);font-size:14px;line-height:var(--editor-line-height);tab-size:2;pointer-events:none;transform:translateY(var(--editor-scroll-y,0px));background:0 0;grid-area:1/2;align-self:start;margin:0;position:relative;overflow:visible}.syntax-line{z-index:0;min-width:0;min-height:var(--editor-line-height);white-space:pre-wrap;overflow-wrap:anywhere;word-break:normal;display:block;position:relative}.syntax-line:before{content:attr(data-line);left:calc(0px - var(--gutter-width) - var(--editor-padding-x));width:calc(var(--gutter-width) - 12px);color:var(--gray-60);font-size:13px;line-height:var(--editor-line-height);text-align:right;-webkit-user-select:none;user-select:none;position:absolute}.syntax-line-current:after{content:"";z-index:-1;inset:0 calc(0px - var(--editor-padding-x));background:#ffffff09;border-top:1px solid #ffffff05;border-bottom:1px solid #ffffff05;position:absolute}.source-map-source-active .syntax-line-current:after{background:#dd8c1b1f;border-color:#dd8c1b3d}.syntax-token{color:var(--gray-30)}.syntax-keyword{color:var(--berry-dark-50);font-weight:600}.syntax-builtin{color:var(--orange-dark)}.syntax-constructor{color:var(--orange)}.syntax-string{color:var(--turtle-dark)}.syntax-number{color:var(--ocean-dark)}.syntax-comment{color:var(--gray-60);font-style:italic}.syntax-attribute{color:#bcc9ab}.syntax-operator{color:var(--water-dark)}.editor{z-index:1;resize:none;width:100%;height:100%;min-height:0;padding:var(--editor-padding-y) var(--editor-padding-x);color:#0000;-webkit-text-fill-color:transparent;font-family:var(--font-mono);font-size:14px;line-height:var(--editor-line-height);tab-size:2;caret-color:var(--orange);white-space:pre-wrap;overflow-wrap:anywhere;word-break:normal;scrollbar-width:thin;scrollbar-color:var(--playground-scrollbar-thumb) var(--playground-scrollbar-track);background:0 0;border:0;outline:0;grid-area:1/2;position:relative;overflow:hidden auto}.editor::selection{background:#fff3}.output::selection{background:#fff3}.problems-output::selection{background:#fff3}.tabs{border-top:1px solid var(--playground-border-soft);border-bottom:1px solid var(--playground-border-soft);background:var(--playground-panel);scrollbar-width:thin;scrollbar-color:var(--playground-scrollbar-thumb) var(--playground-scrollbar-track);align-items:stretch;min-height:48px;display:flex;overflow-x:auto}.tab-button{min-width:88px;color:var(--playground-text-secondary);background:var(--playground-panel);letter-spacing:0;border:0;border-top:4px solid #0000;flex:1 0 auto;padding:12px 16px;font-size:14px;font-weight:500}.tab-button-active{color:var(--white);border-top-color:var(--sky-70)}.output-panel{background:var(--playground-panel);grid-template-rows:auto minmax(40px,1fr) minmax(0,max(116px,22vh));min-height:0;display:grid;overflow:hidden}.result-meta{border-bottom:1px solid var(--playground-border-soft);min-height:36px;color:var(--playground-text-secondary);padding:9px 16px;font-size:12px;font-weight:500}.output,.problems-output{white-space:pre-wrap;overflow-wrap:anywhere;word-break:normal;font-family:var(--font-mono);tab-size:2;margin:0;font-size:13px;line-height:1.55}.output-shell{background:var(--playground-panel);scrollbar-width:thin;scrollbar-color:var(--playground-scrollbar-thumb) var(--playground-scrollbar-track);min-width:0;min-height:0;overflow:hidden auto}.output{width:100%;min-width:0;min-height:100%;color:var(--playground-text-primary);background:var(--playground-panel);padding:18px}.source-map-output-link{color:var(--ocean-dark);text-underline-offset:3px;text-decoration-line:underline;text-decoration-style:dotted}.source-map-output-link:hover,.source-map-output-link:focus-visible{color:var(--white);text-decoration-style:solid}.source-map-mapped-segment{cursor:pointer;border-radius:2px;transition:background-color .1s}.source-map-mapped-segment:hover{background:#8aaec829}.source-map-mapped-segment-active{box-shadow:inset 0 -1px var(--orange);background:#dd8c1b2e}.problems{border-top:1px solid var(--playground-border-soft);background:var(--playground-panel);grid-template-rows:auto minmax(0,1fr);min-height:0;display:grid;overflow:hidden}.problems-title{color:var(--playground-text-primary);padding:9px 16px;font-size:12px;font-weight:700}.problems-output{color:var(--playground-text-secondary);scrollbar-width:thin;scrollbar-color:var(--playground-scrollbar-thumb) var(--playground-scrollbar-track);padding:0 16px 16px;overflow:auto}.settings-panel{background:var(--playground-panel);scrollbar-width:thin;scrollbar-color:var(--playground-scrollbar-thumb) var(--playground-scrollbar-track);min-height:0;padding:28px 44px;overflow:auto}.settings-section{border-bottom:1px solid var(--playground-border-soft);grid-template-columns:minmax(150px,210px) minmax(0,1fr) auto;align-items:center;gap:12px;padding:14px 0;display:grid}.setting-row{grid-template-columns:auto minmax(0,1fr);justify-content:start}.setting-label{color:var(--playground-text-primary);font-size:13px;font-weight:700}.setting-value{color:var(--playground-text-primary);font-family:var(--font-mono);overflow-wrap:anywhere;font-size:13px}.source-map-settings{align-items:start}.source-map-controls,.source-map-options{gap:12px;display:grid}.source-map-control{grid-template-columns:minmax(100px,140px) minmax(0,1fr);align-items:center;gap:12px;display:grid}.source-map-control>label{color:var(--playground-text-secondary);font-size:13px}.source-map-options{border-left:2px solid var(--playground-border-soft);margin-left:12px;padding:4px 0 4px 18px;transition:opacity .12s}.source-map-options-disabled{opacity:.45}.source-map-checkbox{color:var(--playground-text-primary);align-items:center;gap:10px;font-size:13px;display:flex}select,input{border:1px solid var(--playground-border);background:var(--playground-input-bg);min-width:0;min-height:34px;color:var(--playground-text-primary);border-radius:4px;outline:0;padding:0 10px}select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8' viewBox='0 0 14 8' fill='none'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%23edf0f2' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-position:right 14px center;background-repeat:no-repeat;background-size:14px 8px;padding-right:40px}select:focus,input:focus,textarea:focus{border-color:var(--playground-text-primary)}input[type=checkbox]{width:17px;height:17px;min-height:17px;accent-color:var(--fire);padding:0}.hidden-panel{display:none}.toast{z-index:20;max-width:min(320px,100vw - 32px);min-height:38px;color:var(--playground-text-primary);opacity:0;pointer-events:none;background:#171a31;border:1px solid #388b7273;border-radius:4px;align-items:center;padding:9px 13px;font-size:13px;font-weight:600;transition:opacity .14s,transform .14s;display:inline-flex;position:fixed;bottom:24px;right:24px;transform:translateY(8px);box-shadow:0 14px 36px #00000052}.toast-visible{opacity:1;transform:translateY(0)}.editor::-webkit-scrollbar{width:.65rem;height:.65rem}.output-shell::-webkit-scrollbar{width:.65rem;height:.65rem}.problems-output::-webkit-scrollbar{width:.65rem;height:.65rem}.settings-panel::-webkit-scrollbar{width:.65rem;height:.65rem}.tabs::-webkit-scrollbar{width:.65rem;height:.65rem}.editor::-webkit-scrollbar-track{background:var(--playground-scrollbar-track)}.output-shell::-webkit-scrollbar-track{background:var(--playground-scrollbar-track)}.problems-output::-webkit-scrollbar-track{background:var(--playground-scrollbar-track)}.settings-panel::-webkit-scrollbar-track{background:var(--playground-scrollbar-track)}.tabs::-webkit-scrollbar-track{background:var(--playground-scrollbar-track)}.editor::-webkit-scrollbar-thumb{background-color:var(--playground-scrollbar-thumb);border:2px solid var(--playground-scrollbar-track);border-radius:9999px}.output-shell::-webkit-scrollbar-thumb{background-color:var(--playground-scrollbar-thumb);border:2px solid var(--playground-scrollbar-track);border-radius:9999px}.problems-output::-webkit-scrollbar-thumb{background-color:var(--playground-scrollbar-thumb);border:2px solid var(--playground-scrollbar-track);border-radius:9999px}.settings-panel::-webkit-scrollbar-thumb{background-color:var(--playground-scrollbar-thumb);border:2px solid var(--playground-scrollbar-track);border-radius:9999px}.tabs::-webkit-scrollbar-thumb{background-color:var(--playground-scrollbar-thumb);border:2px solid var(--playground-scrollbar-track);border-radius:9999px}.editor::-webkit-scrollbar-thumb:hover{background-color:var(--playground-scrollbar-thumb-hover)}.output-shell::-webkit-scrollbar-thumb:hover{background-color:var(--playground-scrollbar-thumb-hover)}.problems-output::-webkit-scrollbar-thumb:hover{background-color:var(--playground-scrollbar-thumb-hover)}.settings-panel::-webkit-scrollbar-thumb:hover{background-color:var(--playground-scrollbar-thumb-hover)}.tabs::-webkit-scrollbar-thumb:hover{background-color:var(--playground-scrollbar-thumb-hover)}@media (width<=900px){.topbar{flex-direction:column;align-items:flex-start;padding:12px 18px}.status{max-width:100%}.column-header,.settings-panel{padding-left:18px;padding-right:18px}.editor-shell{--editor-padding-x:18px;--gutter-width:48px}.settings-section,.source-map-control{grid-template-columns:1fr}.toast{bottom:16px;right:16px}}