:root{--ctp-crust: #11111b;--ctp-mantle: #181825;--ctp-base: #1e1e2e;--ctp-surface0: #313244;--ctp-surface1: #45475a;--ctp-overlay0: #6c7086;--ctp-subtext0: #a6adc8;--ctp-text: #cdd6f4;--ctp-blue: #89b4fa;--ctp-green: #a6e3a1;--ctp-teal: #94e2d5;--ctp-red: #f38ba8;--ctp-flamingo: #eba0ac;--ctp-peach: #fab387;--ctp-yellow: #f9e2af;--ctp-mauve: #cba6f7;--border: 1px solid var(--ctp-surface1);--border-subtle: 1px solid var(--ctp-surface0);--gap: .5rem;--pad-v: .4rem;--pad-h-sm: .75rem;--pad-h-btn: .8rem;--pad-h-btn-primary: 1.2rem;--pad-content: 1rem;--pad-dialog: 1.5rem;--font-ui: system-ui, -apple-system, sans-serif;--font-mono: "SF Mono", "Cascadia Code", "Fira Code", monospace;--text-sm: .8rem;--text-base: .9rem;--radius: 4px;--radius-lg: 8px}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body,#app{height:100%}body{font-family:var(--font-ui);background:var(--ctp-base);color:var(--ctp-text)}#app{display:grid;grid-template-rows:auto 1fr;height:100vh;overflow:hidden}#toolbar{display:flex;align-items:center;gap:var(--gap);padding:var(--gap) var(--pad-content);background:var(--ctp-mantle);border-bottom:var(--border-subtle);flex-wrap:wrap}#toolbar-right{margin-left:auto;display:flex;gap:var(--gap);align-items:center}#run-btn{padding:var(--pad-v) var(--pad-h-btn-primary);background:var(--ctp-green);color:var(--ctp-base);border:none;border-radius:var(--radius);font-weight:600;cursor:pointer}#run-btn:hover{background:var(--ctp-teal)}#run-btn:disabled{opacity:.5;cursor:not-allowed}#cancel-btn{padding:var(--pad-v) var(--pad-h-btn-primary);background:var(--ctp-red);color:var(--ctp-base);border:none;border-radius:var(--radius);font-weight:600;cursor:pointer}#cancel-btn:hover{background:var(--ctp-flamingo)}#running-badge{font-size:var(--text-sm);color:var(--ctp-peach)}#args-input{flex:1;max-width:400px;padding:var(--pad-v) var(--pad-h-sm);background:var(--ctp-surface0);color:var(--ctp-text);border:var(--border);border-radius:var(--radius);font-family:var(--font-mono);font-size:var(--text-base)}#example-select{padding:var(--pad-v) 2rem var(--pad-v) var(--pad-h-sm);background:var(--ctp-surface0);color:var(--ctp-text);border:var(--border);border-radius:var(--radius);font-size:var(--text-base);cursor:pointer}#example-select:focus{outline:none;border-color:var(--ctp-blue)}@media(max-width:700px){#args-input,#example-select{font-size:16px}}#share-btn{padding:var(--pad-v) var(--pad-h-btn);background:var(--ctp-surface0);color:var(--ctp-text);border:var(--border);border-radius:var(--radius);font-size:var(--text-base);cursor:pointer}#share-btn:hover{border-color:var(--ctp-blue)}#help-btn{width:1.8rem;height:1.8rem;background:var(--ctp-surface0);color:var(--ctp-text);border:var(--border);border-radius:50%;font-size:var(--text-base);font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center}#help-btn:hover{border-color:var(--ctp-blue)}#workspace{display:grid;grid-template-columns:1fr 1fr;overflow:hidden}#editor-pane{overflow:hidden;border-right:var(--border-subtle)}#editor-pane .cm-editor{height:100%}#output-pane{display:flex;flex-direction:column;overflow:hidden;background:var(--ctp-crust)}#output-tabs{display:flex;gap:0;padding:0 var(--gap);background:var(--ctp-mantle);border-bottom:var(--border-subtle);flex-shrink:0;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}#output-tabs::-webkit-scrollbar{display:none}.output-tab{padding:var(--pad-v) var(--pad-h-btn);background:none;color:var(--ctp-overlay0);border:none;border-bottom:2px solid transparent;font-family:var(--font-ui);font-size:var(--text-sm);cursor:pointer;white-space:nowrap}.output-tab:hover{color:var(--ctp-text)}.output-tab-active{color:var(--ctp-text);border-bottom-color:var(--ctp-blue)}.output-tab-error{color:var(--ctp-red)}.output-tab-error.output-tab-active{border-bottom-color:var(--ctp-red)}#output{flex:1;overflow:auto;padding:var(--pad-content);font-family:var(--font-mono);font-size:var(--text-base);line-height:1.5;white-space:pre-wrap;word-break:break-word}#help-dialog{background:var(--ctp-base);color:var(--ctp-text);border:var(--border-subtle);border-radius:var(--radius-lg);padding:0;max-width:560px;width:90vw;max-height:85vh;overflow-y:auto;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);margin:0}#help-dialog::backdrop{background:#0009}#help-content{padding:var(--pad-dialog)}#help-content h2{font-size:1.1rem;color:var(--ctp-blue);margin-bottom:.75rem}#help-content h3{font-size:var(--text-base);color:var(--ctp-subtext0);margin:var(--pad-content) 0 var(--pad-v);text-transform:uppercase;letter-spacing:.05em}#help-content p{font-size:var(--text-base);line-height:1.5;color:var(--ctp-text)}#help-content p+p{margin-top:var(--gap)}#help-content a{color:var(--ctp-blue)}#help-content table{border-collapse:collapse;font-size:var(--text-sm);font-family:var(--font-mono)}#help-content td{padding:.2rem var(--pad-content) .2rem 0}#help-content ul{font-size:var(--text-sm);padding-left:1.2rem;line-height:1.6}#help-content code{background:var(--ctp-surface0);padding:.1em .3em;border-radius:3px;font-family:var(--font-mono);font-size:.9em}#help-close-btn{margin-top:1.2rem;padding:var(--pad-v) var(--pad-content);background:var(--ctp-surface0);color:var(--ctp-text);border:var(--border);border-radius:var(--radius);cursor:pointer;font-size:var(--text-base)}#help-close-btn:hover{border-color:var(--ctp-blue)}@media(max-width:700px){#workspace{grid-template-columns:1fr;grid-template-rows:3fr 2fr}#editor-pane{border-right:none;border-bottom:var(--border-subtle)}#toolbar button,#toolbar select,#toolbar input{min-height:44px;font-size:1rem}#help-btn{width:44px;height:44px;min-height:44px}#example-select{height:44px}#toolbar{display:grid;grid-template-columns:auto auto 1fr;grid-template-areas:"run cancel right" "args args args" "example example example";align-items:center}#run-btn{grid-area:run}#cancel-btn{grid-area:cancel}#toolbar-right{grid-area:right;justify-self:end}#args-input{grid-area:args;max-width:100%;width:100%}#example-select{grid-area:example;width:100%}#running-badge{grid-area:cancel}}.output-error{color:var(--ctp-red)}.output-binding{color:var(--ctp-subtext0)}.output-binding-type{color:var(--ctp-blue)}.output-print{color:var(--ctp-text)}.output-warning{color:var(--ctp-yellow)}
