.playground-page { background: #f5faf9; }
.playground-header { width: min(1360px, calc(100% - 3rem)); }
.playground-top-nav { display: flex; align-items: center; gap: 1.7rem; }
.playground-top-nav a { color: var(--color-muted); font-size: 0.9rem; font-weight: 650; text-decoration: none; }
.playground-top-nav a:hover { color: var(--color-accent-strong); }
.playground-main { width: min(1360px, calc(100% - 3rem)); margin: 0 auto; padding: clamp(1.5rem, 3vw, 3rem) 0 2rem; }
.playground-heading { display: flex; align-items: end; justify-content: space-between; gap: 2rem; margin-bottom: 1.6rem; }
.playground-heading h1 { margin: 0; font-size: clamp(2.3rem, 4vw, 3.75rem); line-height: 1.07; letter-spacing: -0.05em; }
.heading-spark { color: var(--color-brand-orange); }
.playground-heading p { margin: 0.65rem 0 0; color: var(--color-muted); }
.playground-heading .playground-note { max-width: 245px; margin: 0 0 0.2rem; font-size: 0.78rem; line-height: 1.5; text-align: right; }
.workspace { overflow: hidden; border: 1px solid var(--color-line); border-radius: 20px; background: var(--color-surface); box-shadow: 0 24px 70px rgba(19, 63, 66, 0.08); }
.workspace-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 64px; padding: 0 1.35rem; border-bottom: 1px solid var(--color-line); }
.language-switch { display: flex; align-self: stretch; align-items: stretch; gap: 1.5rem; }
.language-tab { position: relative; padding: 0 0.1rem; border: 0; background: none; color: var(--color-muted); cursor: pointer; font-weight: 720; }
.language-tab::after { position: absolute; right: 0; bottom: -1px; left: 0; height: 3px; border-radius: 3px 3px 0 0; background: transparent; content: ""; }
.language-tab.is-active { color: var(--color-accent-strong); }
.language-tab.is-active::after { background: var(--color-brand-cyan); }
.workspace-status { display: flex; align-items: center; gap: 0.52rem; color: var(--color-muted); font-size: 0.8rem; }
.status-dot { width: 8px; height: 8px; flex: none; border-radius: 50%; background: #9db7b7; }
.workspace-status[data-state="busy"] .status-dot { background: var(--color-brand-orange); box-shadow: 0 0 0 4px #f49a2227; }
.workspace-status[data-state="ready"] .status-dot { background: #27a565; box-shadow: 0 0 0 4px #27a56525; }
.workspace-status[data-state="error"] .status-dot { background: var(--color-danger); }
.workspace-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.9fr); min-height: min(590px, calc(100vh - 260px)); }
.editor-panel, .output-panel { min-width: 0; display: flex; flex-direction: column; }
.editor-panel { background: var(--ide-bg); color: var(--ide-fg); }
.output-panel { border-left: 1px solid var(--ide-line); background: var(--ide-bg); color: var(--ide-fg); }
.panel-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 58px; padding: 0.8rem 1.25rem; border-bottom: 1px solid var(--ide-line); }
.panel-toolbar > div:first-child { display: flex; align-items: center; gap: 0.6rem; }
.panel-toolbar h2 { margin: 0; font: 700 0.84rem var(--font-mono); letter-spacing: -0.01em; }
.file-icon { color: var(--ide-keyword); font-size: 1.3rem; line-height: 1; }
.editor-panel .panel-toolbar { flex-wrap: wrap; gap: 0.65rem 1rem; }
.editor-toolbar-controls { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 0.55rem 0.8rem; min-width: 0; }
.editor-toolbar-select { display: flex; align-items: center; gap: 0.4rem; color: var(--ide-muted); font-size: 0.75rem; }
.editor-toolbar-select select { max-width: 130px; min-height: 34px; padding: 0.3rem 0.55rem; border: 1px solid var(--ide-border); border-radius: 7px; background: var(--ide-control); color: var(--ide-fg); font-size: 0.76rem; }
.example-picker { display: flex; align-items: center; gap: 0.55rem; color: var(--ide-muted); font-size: 0.75rem; }
.example-picker select { max-width: 175px; min-height: 34px; padding: 0.3rem 0.55rem; border: 1px solid var(--ide-border); border-radius: 7px; background: var(--ide-control); color: var(--ide-fg); font-size: 0.76rem; }
.code-editor { flex: 1; min-height: 300px; overflow: hidden; }
.code-editor .cm-editor { width: 100%; height: 100%; }
.code-editor .cm-editor.cm-focused { outline: 0; }
.code-editor .cm-content { white-space: pre; }
.runtime-input-panel { padding: 1rem 1.25rem; border-bottom: 1px solid var(--ide-line); background: var(--ide-control); color: var(--ide-fg); }
.runtime-input-panel[hidden] { display: none; }
.runtime-input-panel form { display: grid; gap: 0.7rem; }
.runtime-input-panel h3 { margin: 0; font: 700 0.84rem var(--ide-font); }
.runtime-input-panel label { color: var(--ide-muted); font: 0.82rem/1.4 var(--ide-font); white-space: pre-wrap; overflow-wrap: anywhere; }
.runtime-input-panel input { width: 100%; min-height: 42px; padding: 0.6rem 0.75rem; border: 1px solid var(--ide-border); border-radius: 8px; background: var(--ide-bg); color: var(--ide-fg); font: var(--ide-size) var(--ide-font); }
.runtime-input-panel input:focus-visible { outline: 2px solid var(--ide-keyword); outline-offset: 2px; }
.runtime-input-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 0.6rem; }
.editor-bottom { display: flex; align-items: center; justify-content: space-between; gap: 1.1rem; min-height: 79px; padding: 0.85rem 1.25rem; border-top: 1px solid var(--ide-line); }
.package-help { color: var(--ide-muted); font-size: 0.75rem; line-height: 1.4; }
.package-help button { padding: 0; border: 0; background: none; color: var(--ide-keyword); cursor: pointer; font-size: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.editor-actions { display: flex; align-items: center; flex: none; gap: 0.65rem; }
.playground-button { min-height: 40px; padding: 0.55rem 0.9rem; border: 1px solid transparent; border-radius: 9px; cursor: pointer; font-size: 0.8rem; font-weight: 760; white-space: nowrap; }
.playground-button-primary { background: var(--color-brand-cyan); color: #083b42; }
.playground-button-primary:hover { background: #44d9df; }
.playground-button-muted { border-color: var(--ide-border); background: transparent; color: var(--ide-fg); }
.playground-button-muted:hover { border-color: var(--ide-keyword); background: var(--ide-active); }
.playground-button:disabled { opacity: 0.55; cursor: wait; }
.output-toolbar { border-color: var(--ide-line); }
.output-toolbar h2 { font-family: var(--ide-font); }
.output-icon { color: var(--ide-keyword); font: 800 1.1rem var(--ide-font); }
.clear-output { padding: 0.35rem 0.45rem; border: 0; background: none; color: var(--ide-keyword); cursor: pointer; font-size: 0.76rem; font-weight: 700; }
.clear-output:hover { text-decoration: underline; }
.output-content { min-height: 120px; flex: 1; overflow: auto; padding: 1.35rem; color: var(--ide-fg); font: var(--ide-size)/var(--ide-leading) var(--ide-font); white-space: pre-wrap; overflow-wrap: anywhere; }
.output-content pre { margin: 0; font: inherit; white-space: pre-wrap; overflow-wrap: anywhere; }
.output-content .output-empty { margin: 0; color: var(--ide-muted); font: inherit; }
.output-content .output-error { color: var(--ide-error); }
.output-content .output-success { color: var(--ide-success); }
.plot-output { display: grid; gap: 1rem; max-height: 340px; overflow: auto; padding: 0 1.35rem 1.35rem; }
.plot-output:empty { display: none; }
.plot-output img, .plot-output canvas { display: block; max-width: 100%; height: auto; border: 1px solid var(--ide-border); border-radius: 10px; background: white; }
.playground-footnote { display: flex; justify-content: space-between; gap: 1rem; margin-top: 1rem; color: var(--color-muted); font-size: 0.76rem; }
.playground-footnote p { max-width: 920px; margin: 0; }
.playground-footnote a { color: var(--color-accent-strong); font-weight: 700; }
@media (max-width: 900px) {
  .workspace-grid { grid-template-columns: 1fr; }
  .output-panel { min-height: 250px; border-top: 1px solid var(--ide-line); border-left: 0; }
  .code-editor { min-height: 390px; }
  .playground-heading .playground-note { display: none; }
}
@media (max-width: 620px) {
  .playground-header, .playground-main { width: calc(100% - 1.5rem); }
  .playground-top-nav { gap: 0.55rem; }
  .playground-top-nav a { font-size: 0.78rem; }
  .playground-top-nav .theme-toggle { min-height: 38px; gap: 0.35rem; padding: 0.45rem 0.58rem; font-size: 0.74rem; }
  .playground-heading h1 { font-size: 2.35rem; }
  .workspace-toolbar { min-height: 58px; padding: 0 0.95rem; }
  .workspace-status { max-width: 46%; font-size: 0.68rem; }
  .panel-toolbar { flex-wrap: wrap; padding: 0.75rem 0.95rem; }
  .editor-toolbar-controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; justify-content: stretch; }
  .editor-toolbar-select { display: grid; gap: 0.2rem; min-width: 0; }
  .editor-toolbar-select select { width: 100%; max-width: none; }
  .editor-toolbar-controls .example-picker { grid-column: 1 / -1; }
  .example-picker { width: 100%; justify-content: space-between; }
  .example-picker select { max-width: 64%; }
  .code-editor { min-height: 330px; }
  .editor-bottom { flex-wrap: wrap; padding: 0.8rem 0.95rem; }
  .package-help { width: 100%; }
  .editor-actions { width: 100%; justify-content: flex-end; }
}

html[data-theme="dark"] .playground-page { background: var(--color-paper); }

@font-face { font-family: "Fira Code Local"; src: url("/fonts/fira-code-latin-400.woff2") format("woff2"); font-style: normal; font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Mono Local"; src: url("/fonts/ibm-plex-mono-latin-400.woff2") format("woff2"); font-style: normal; font-weight: 400; font-display: swap; }
@font-face { font-family: "JetBrains Mono Local"; src: url("/fonts/jetbrains-mono-latin-400.woff2") format("woff2"); font-style: normal; font-weight: 400; font-display: swap; }
@font-face { font-family: "Source Code Pro Local"; src: url("/fonts/source-code-pro-latin-400.woff2") format("woff2"); font-style: normal; font-weight: 400; font-display: swap; }
@font-face { font-family: "Space Mono Local"; src: url("/fonts/space-mono-latin-400.woff2") format("woff2"); font-style: normal; font-weight: 400; font-display: swap; }
@font-face { font-family: "Inconsolata Local"; src: url("/fonts/inconsolata-latin-400.woff2") format("woff2"); font-style: normal; font-weight: 400; font-display: swap; }
.workspace {
  --ide-bg: #17282e; --ide-fg: #eff9f8; --ide-muted: #bad1cf;
  --ide-line: #ffffff1a; --ide-border: #507077; --ide-control: #213940;
  --ide-active: #ffffff0c; --ide-selection: #20cbd255; --ide-bracket: #20cbd244;
  --ide-caret: #ffd21f; --ide-gutter: #729296; --ide-keyword: #5ce0dc;
  --ide-string: #ffd97b; --ide-number: #ffae70; --ide-comment: #8aabaa;
  --ide-function: #9ddcff; --ide-operator: #f3b8aa; --ide-font: var(--font-mono);
  --ide-size: 14px; --ide-leading: 1.65;
  --ide-error: #ffaaa8; --ide-success: #84e5ad;
}
.workspace[data-ide-theme="aurora"] {
  --ide-bg: #0b2526; --ide-fg: #e7faf3; --ide-muted: #abd2c5;
  --ide-line: #ffffff25; --ide-border: #4e837d; --ide-control: #153b3c;
  --ide-active: #e8ffec12; --ide-selection: #5ce5a855; --ide-bracket: #5ce5a855;
  --ide-caret: #a7f3cf; --ide-gutter: #87b2ab; --ide-keyword: #7ee1cf;
  --ide-string: #e9d47f; --ide-number: #f5aa84; --ide-comment: #88aba4;
  --ide-function: #a4ddea; --ide-operator: #e7a8c7;
}
.workspace[data-ide-theme="nord"] {
  --ide-bg: #2e3440; --ide-fg: #eceff4; --ide-muted: #c3cad4;
  --ide-line: #ffffff23; --ide-border: #657287; --ide-control: #3b4657;
  --ide-active: #ffffff0e; --ide-selection: #81a1c155; --ide-bracket: #88c0d055;
  --ide-caret: #88c0d0; --ide-gutter: #9aa8b8; --ide-keyword: #81a1c1;
  --ide-string: #a3be8c; --ide-number: #b48ead; --ide-comment: #8e9bab;
  --ide-function: #88c0d0; --ide-operator: #d08770;
}
.workspace[data-ide-theme="monokai"] {
  --ide-bg: #272822; --ide-fg: #f8f8f2; --ide-muted: #d1d1c3;
  --ide-line: #ffffff22; --ide-border: #77796a; --ide-control: #3a3b33;
  --ide-active: #ffffff0f; --ide-selection: #75715e88; --ide-bracket: #a6e22e55;
  --ide-caret: #f8f8f0; --ide-gutter: #929487; --ide-keyword: #f92672;
  --ide-string: #e6db74; --ide-number: #ae81ff; --ide-comment: #858476;
  --ide-function: #a6e22e; --ide-operator: #f92672;
}
.workspace[data-ide-theme="paper"] {
  --ide-bg: #faf8f1; --ide-fg: #263238; --ide-muted: #4f6066;
  --ide-line: #d5d1c3; --ide-border: #b4b8ad; --ide-control: #ffffff;
  --ide-active: #315b7112; --ide-selection: #78b7d866; --ide-bracket: #79b49b66;
  --ide-caret: #07596e; --ide-gutter: #748187; --ide-keyword: #005f9e;
  --ide-string: #9a5816; --ide-number: #7b438c; --ide-comment: #667b78;
  --ide-function: #00766c; --ide-operator: #ac5734;
  --ide-error: #b43b46; --ide-success: #08744f;
}
.workspace[data-ide-theme="graphite"] {
  --ide-bg: #303238; --ide-fg: #f0f0ed; --ide-muted: #c9cbd0;
  --ide-line: #ffffff24; --ide-border: #777c85; --ide-control: #3d4149;
  --ide-active: #ffffff10; --ide-selection: #a7b6ca55; --ide-bracket: #ddc7a355;
  --ide-caret: #f5dab0; --ide-gutter: #9ea5ac; --ide-keyword: #c4a7e7;
  --ide-string: #dbc994; --ide-number: #e4a89f; --ide-comment: #aab0b5;
  --ide-function: #9fc5e8; --ide-operator: #eab3c4;
}
.workspace[data-ide-theme="sunrise"] {
  --ide-bg: #fff6ec; --ide-fg: #3b2927; --ide-muted: #665451;
  --ide-line: #e9d4c7; --ide-border: #c7a89a; --ide-control: #fffdf9;
  --ide-active: #d26f3a15; --ide-selection: #f0b88877; --ide-bracket: #e1a06f77;
  --ide-caret: #8b4736; --ide-gutter: #89716a; --ide-keyword: #a44847;
  --ide-string: #9b6617; --ide-number: #8d4f89; --ide-comment: #816d63;
  --ide-function: #147d78; --ide-operator: #9b5231;
  --ide-error: #b43b46; --ide-success: #08744f;
}
.workspace[data-ide-theme="contrast"] {
  --ide-bg: #080a0e; --ide-fg: #ffffff; --ide-muted: #d4dce6;
  --ide-line: #647080; --ide-border: #aebaca; --ide-control: #161c25;
  --ide-active: #ffffff1c; --ide-selection: #57abff88; --ide-bracket: #ffdf5e88;
  --ide-caret: #ffffff; --ide-gutter: #cad3df; --ide-keyword: #80dcff;
  --ide-string: #ffdb72; --ide-number: #ffc0a0; --ide-comment: #bed4c4;
  --ide-function: #b5f0a4; --ide-operator: #ffafd0;
}
.workspace[data-ide-font="fira"] { --ide-font: "Fira Code Local", var(--font-mono); }
.workspace[data-ide-font="ibm"] { --ide-font: "IBM Plex Mono Local", var(--font-mono); }
.workspace[data-ide-font="courier"] { --ide-font: "Courier New", Courier, monospace; }
.workspace[data-ide-font="jetbrains"] { --ide-font: "JetBrains Mono Local", var(--font-mono); }
.workspace[data-ide-font="source"] { --ide-font: "Source Code Pro Local", var(--font-mono); }
.workspace[data-ide-font="space"] { --ide-font: "Space Mono Local", var(--font-mono); }
.workspace[data-ide-font="inconsolata"] { --ide-font: "Inconsolata Local", var(--font-mono); }
.workspace[data-ide-ligatures="off"] .cm-scroller,
.workspace[data-ide-ligatures="off"] .output-content { font-variant-ligatures: none; }
.playground-profile-menu { width: min(320px, calc(100vw - 1.5rem)); max-height: min(75vh, 610px); overflow-y: auto; padding: 0.6rem; }
.playground-profile-menu .profile-email { padding: 0.55rem 0.6rem 0.75rem; }
.playground-menu-group { display: grid; gap: 0.45rem; padding: 0.8rem 0.6rem; border-bottom: 1px solid var(--color-line); }
.playground-menu-heading { color: var(--color-muted); font-size: 0.7rem; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase; }
.playground-menu-group label { margin-top: 0.4rem; color: var(--color-ink); font-size: 0.82rem; font-weight: 700; }
.playground-menu-group select { width: 100%; min-height: 40px; padding: 0.45rem 0.65rem; border: 1px solid var(--color-line); border-radius: 9px; background: var(--color-surface); color: var(--color-ink); cursor: pointer; font-size: 0.86rem; }
.playground-menu-group select:focus-visible, .playground-profile-menu button:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.playground-menu-two-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 0.65rem; }
.playground-menu-two-columns > div { min-width: 0; }
.playground-menu-two-columns label { display: block; margin: 0.4rem 0 0.45rem; }
.playground-ligature-option { display: flex; align-items: center; gap: 0.55rem; cursor: pointer; }
.playground-ligature-option input { width: 16px; height: 16px; margin: 0; accent-color: var(--color-accent); }
.playground-top-nav .playground-menu-theme { width: 100%; min-height: 42px; justify-content: space-between; margin: 0.3rem 0 0; padding: 0.55rem 0.7rem; border-radius: 9px; font-size: 0.82rem; }
.playground-menu-theme strong { color: var(--color-accent-strong); font-size: 0.78rem; }
.playground-account-actions { padding: 0.35rem 0.2rem 0; }
.playground-account-actions a, .playground-account-actions button { display: block; width: 100%; margin-top: 0.2rem; padding: 0.6rem 0.65rem; border: 0; border-radius: 9px; background: transparent; color: var(--color-accent-strong); cursor: pointer; font-size: 0.84rem; font-weight: 700; text-align: left; text-decoration: none; }
.playground-account-actions a:hover, .playground-account-actions button:hover { background: var(--color-accent-soft); }