:root {
    color-scheme: light;
    --canvas: #d6d6d6;
    --surface: #fafafa;
    --chrome: #ededed;
    --line: #b8b8b8;
    --line-strong: #8b8b8b;
    --text: #242424;
    --muted: #666666;
    --action: #353535;
    --action-hover: #1d1d1d;
    --action-text: #f7f7f7;
    --error: #9b2525;
    --warning-background: #e5e5e5;
    --selection: #c8c8c8;
    --ansi-black: #1f1f1f;
    --ansi-red: #a33131;
    --ansi-green: #3d7137;
    --ansi-yellow: #856714;
    --ansi-blue: #3b5f86;
    --ansi-magenta: #7a4985;
    --ansi-cyan: #287274;
    --ansi-white: #d9d9d9;
    --ansi-bright-black: #707070;
    --ansi-bright-red: #d04444;
    --ansi-bright-green: #58a550;
    --ansi-bright-yellow: #b38a1e;
    --ansi-bright-blue: #527fb0;
    --ansi-bright-magenta: #a365b0;
    --ansi-bright-cyan: #3b9a9d;
    --ansi-bright-white: #ffffff;
    --font-mono:
        "Berkeley Mono", "Commit Mono", "Iosevka Fixed", "SFMono-Regular",
        Consolas, "Liberation Mono", monospace;
    font-family: var(--font-mono);
    font-size: 13px;
}

:root[data-theme="dark"] {
    color-scheme: dark;
    --canvas: #333333;
    --surface: #171717;
    --chrome: #222222;
    --line: #464646;
    --line-strong: #5d5d5d;
    --text: #dddddd;
    --muted: #9b9b9b;
    --action: #d6d6d6;
    --action-hover: #f2f2f2;
    --action-text: #181818;
    --error: #ef7777;
    --warning-background: #2a2a2a;
    --selection: #505050;
    --ansi-black: #202020;
    --ansi-red: #d35f5f;
    --ansi-green: #7fb879;
    --ansi-yellow: #d0ad55;
    --ansi-blue: #7ca4ca;
    --ansi-magenta: #bb86c7;
    --ansi-cyan: #63b9bb;
    --ansi-white: #d4d4d4;
    --ansi-bright-black: #858585;
    --ansi-bright-red: #f07878;
    --ansi-bright-green: #9bd294;
    --ansi-bright-yellow: #e8c86d;
    --ansi-bright-blue: #98bde1;
    --ansi-bright-magenta: #d7a1e1;
    --ansi-bright-cyan: #80d3d5;
    --ansi-bright-white: #ffffff;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) {
        color-scheme: dark;
        --canvas: #333333;
        --surface: #171717;
        --chrome: #222222;
        --line: #464646;
        --line-strong: #5d5d5d;
        --text: #dddddd;
        --muted: #9b9b9b;
        --action: #d6d6d6;
        --action-hover: #f2f2f2;
        --action-text: #181818;
        --error: #ef7777;
        --warning-background: #2a2a2a;
        --selection: #505050;
        --ansi-black: #202020;
        --ansi-red: #d35f5f;
        --ansi-green: #7fb879;
        --ansi-yellow: #d0ad55;
        --ansi-blue: #7ca4ca;
        --ansi-magenta: #bb86c7;
        --ansi-cyan: #63b9bb;
        --ansi-white: #d4d4d4;
        --ansi-bright-black: #858585;
        --ansi-bright-red: #f07878;
        --ansi-bright-green: #9bd294;
        --ansi-bright-yellow: #e8c86d;
        --ansi-bright-blue: #98bde1;
        --ansi-bright-magenta: #d7a1e1;
        --ansi-bright-cyan: #80d3d5;
        --ansi-bright-white: #ffffff;
    }
}

* {
    box-sizing: border-box;
}

html,
body {
    width: 100%;
    min-width: 320px;
    height: 100%;
}

body {
    display: grid;
    grid-template-rows: 48px minmax(0, 1fr);
    margin: 0;
    overflow: hidden;
    color: var(--text);
    background: var(--canvas);
    font-family: var(--font-mono);
    font-weight: 400;
}

button,
select,
textarea {
    color: inherit;
    font: inherit;
}

button {
    appearance: none;
    border-radius: 0;
}

::selection {
    background: var(--selection);
}

.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 18px;
    border-bottom: 1px solid var(--line-strong);
    background: var(--chrome);
}

.brand {
    display: flex;
    align-items: baseline;
    color: var(--text);
    text-decoration: none;
    letter-spacing: -0.02em;
}

.brand strong {
    font-weight: 550;
}

.brand span {
    color: var(--muted);
    font-weight: 400;
}

.topbar-status {
    display: flex;
    align-items: center;
    gap: 18px;
}

.topbar-links {
    display: flex;
    align-items: center;
    gap: 14px;
}

.topbar-links a,
.runtime,
.theme-toggle {
    color: var(--muted);
    font-size: 12px;
    font-weight: 400;
    white-space: nowrap;
}

.topbar-links a {
    text-decoration: none;
}

.topbar-links a:hover {
    color: var(--text);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.theme-toggle {
    min-height: 30px;
    padding: 0 9px;
    border: 1px solid var(--line);
    background: var(--surface);
    cursor: pointer;
}

.theme-toggle:hover {
    border-color: var(--line-strong);
    color: var(--text);
}

main {
    display: flex;
    min-height: 0;
    padding: 14px 18px 12px;
    flex-direction: column;
    gap: 10px;
}

.version-warning {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr) max-content;
    align-items: center;
    min-height: 40px;
    border: 1px solid var(--line-strong);
    background: var(--warning-background);
}

.version-warning strong,
.version-warning span {
    padding: 7px 11px;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.4;
}

.version-warning strong {
    align-self: stretch;
    display: flex;
    align-items: center;
    border-right: 1px solid var(--line);
    color: var(--text);
    font-weight: 550;
}

.version-warning .button {
    align-self: stretch;
    border-top: 0;
    border-right: 0;
    border-bottom: 0;
}

.toolbar {
    display: flex;
    flex: 0 0 34px;
    align-items: stretch;
    justify-content: space-between;
}

.toolbar-actions {
    display: flex;
    align-items: stretch;
    gap: 7px;
}

.toolbar-secondary {
    display: flex;
    min-width: 0;
    align-items: stretch;
}

.example-select {
    width: 178px;
    min-height: 34px;
    padding: 0 30px 0 10px;
    border: 1px solid var(--line-strong);
    border-radius: 0;
    color: var(--text);
    background-color: var(--surface);
    cursor: pointer;
    font-size: 12px;
}

.example-select:hover:not(:disabled) {
    border-color: var(--text);
    background-color: var(--chrome);
}

.example-select:disabled {
    cursor: wait;
    opacity: 0.45;
}

.button {
    min-width: 76px;
    padding: 0 12px;
    border: 1px solid var(--line-strong);
    color: var(--text);
    background: var(--surface);
    cursor: pointer;
    font-size: 12px;
    font-weight: 450;
}

.button:hover:not(:disabled) {
    border-color: var(--text);
    background: var(--chrome);
}

.button.primary {
    border-color: var(--action);
    color: var(--action-text);
    background: var(--action);
}

.button.primary:hover:not(:disabled) {
    border-color: var(--action-hover);
    background: var(--action-hover);
}

.button:focus-visible,
.example-select:focus-visible,
.topbar-links a:focus-visible,
.theme-toggle:focus-visible,
.pane-resizer:focus-visible,
.output-tab:focus-visible,
.output:focus-visible {
    outline: 1px solid var(--text);
    outline-offset: 2px;
}

.button:disabled {
    cursor: wait;
    opacity: 0.45;
}

.notice {
    display: flex;
    align-items: center;
    min-width: 0;
    margin: 0;
    padding-right: 12px;
    overflow: hidden;
    color: var(--muted);
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.notice.error {
    color: var(--error);
}

.workbench {
    display: flex;
    min-height: 0;
    flex: 1 1 auto;
    flex-direction: column;
    border: 1px solid var(--line-strong);
    background: var(--surface);
}

.workspace {
    --editor-width: 1fr;
    display: grid;
    min-height: 0;
    flex: 1 1 auto;
    grid-template-columns:
        minmax(180px, var(--editor-width)) 12px
        minmax(180px, 1fr);
}

.pane {
    display: grid;
    min-width: 0;
    min-height: 0;
    grid-template-rows: 34px minmax(0, 1fr);
}

.output-pane {
    grid-template-rows: 34px minmax(0, 1fr);
}

.pane-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 11px;
    border-bottom: 1px solid var(--line);
    background: var(--chrome);
}

.pane-header h1,
.pane-header span {
    margin: 0;
    font-size: 12px;
    font-weight: 400;
    line-height: 1;
}

.pane-header h1 {
    color: var(--text);
    font-weight: 500;
}

.pane-header span {
    color: var(--muted);
}

.pane-resizer {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-right: 1px solid var(--line-strong);
    border-left: 1px solid var(--line-strong);
    color: var(--muted);
    background: var(--chrome);
    cursor: col-resize;
    touch-action: none;
    user-select: none;
}

.pane-resizer:hover,
.pane-resizer:focus-visible,
.resizing .pane-resizer {
    color: var(--text);
    background: var(--canvas);
}

.pane-resizer span {
    font-size: 15px;
    line-height: 1;
}

.resizing,
.resizing * {
    cursor: col-resize !important;
    user-select: none !important;
}

textarea,
.output {
    width: 100%;
    min-height: 0;
    margin: 0;
    border: 0;
    border-radius: 0;
    color: var(--text);
    background: var(--surface);
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 400;
    line-height: 1.58;
    tab-size: 2;
}

.editor-input {
    display: grid;
    min-width: 0;
    min-height: 0;
    grid-template-columns: 46px minmax(0, 1fr);
    background: var(--surface);
}

.line-numbers {
    min-height: 0;
    margin: 0;
    padding: 15px 9px 15px 4px;
    overflow: hidden;
    border-right: 1px solid var(--line);
    color: var(--muted);
    background: var(--chrome);
    font: inherit;
    font-size: 13px;
    line-height: 1.58;
    text-align: right;
    user-select: none;
}

textarea {
    padding: 15px 16px;
    overflow: auto;
    resize: none;
    caret-color: var(--text);
    white-space: pre;
}

textarea:focus {
    outline: 0;
    box-shadow: none;
}

textarea:disabled {
    cursor: wait;
    opacity: 0.72;
}

.output {
    overflow: auto;
    padding: 15px 16px;
}

.output-toolbar {
    display: flex;
    min-width: 0;
    min-height: 34px;
    align-items: stretch;
    border-bottom: 1px solid var(--line);
    background: var(--chrome);
}

.output-tabs {
    display: flex;
    min-width: 0;
    flex: 1 1 auto;
    align-items: stretch;
    overflow-x: auto;
}

.output-toolbar > span {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    padding: 0 11px;
    color: var(--muted);
    font-size: 11px;
    line-height: 1;
    white-space: nowrap;
}

.output-tab {
    flex: 0 0 auto;
    padding: 0 11px;
    border: 0;
    border-right: 1px solid var(--line);
    border-bottom: 2px solid transparent;
    color: var(--muted);
    background: transparent;
    cursor: pointer;
    font-size: 11px;
    font-weight: 400;
}

.output-tab:hover {
    color: var(--text);
    background: var(--surface);
}

.output-tab[aria-selected="true"] {
    border-bottom-color: var(--text);
    color: var(--text);
    background: var(--surface);
}

.output-tab:focus-visible {
    position: relative;
    z-index: 1;
    outline-offset: -3px;
}

.output-view[hidden] {
    display: none;
}

.output pre {
    margin: 0;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    font: inherit;
}

.output pre::before {
    display: block;
    margin-bottom: 7px;
    color: var(--muted);
    content: attr(data-stream);
    font-size: 11px;
}

.output .stderr {
    margin-top: 19px;
}

.output .bytecode {
    white-space: pre;
    overflow-wrap: normal;
}

.ansi-bold {
    font-weight: 700;
}

.ansi-dim {
    opacity: 0.67;
}

.ansi-italic {
    font-style: italic;
}

.ansi-underline {
    text-decoration-line: underline;
    text-underline-offset: 0.16em;
}

.ansi-double-underline {
    text-decoration-line: underline;
    text-decoration-style: double;
    text-underline-offset: 0.16em;
}

.ansi-strike {
    text-decoration-line: line-through;
}

.ansi-underline.ansi-strike,
.ansi-double-underline.ansi-strike {
    text-decoration-line: underline line-through;
}

.ansi-hidden {
    visibility: hidden;
}

.ansi-overline {
    text-decoration-line: overline;
}

.ansi-fg-0 {
    color: var(--ansi-black);
}
.ansi-fg-1 {
    color: var(--ansi-red);
}
.ansi-fg-2 {
    color: var(--ansi-green);
}
.ansi-fg-3 {
    color: var(--ansi-yellow);
}
.ansi-fg-4 {
    color: var(--ansi-blue);
}
.ansi-fg-5 {
    color: var(--ansi-magenta);
}
.ansi-fg-6 {
    color: var(--ansi-cyan);
}
.ansi-fg-7 {
    color: var(--ansi-white);
}
.ansi-fg-8 {
    color: var(--ansi-bright-black);
}
.ansi-fg-9 {
    color: var(--ansi-bright-red);
}
.ansi-fg-10 {
    color: var(--ansi-bright-green);
}
.ansi-fg-11 {
    color: var(--ansi-bright-yellow);
}
.ansi-fg-12 {
    color: var(--ansi-bright-blue);
}
.ansi-fg-13 {
    color: var(--ansi-bright-magenta);
}
.ansi-fg-14 {
    color: var(--ansi-bright-cyan);
}
.ansi-fg-15 {
    color: var(--ansi-bright-white);
}
.ansi-bg-0 {
    background-color: var(--ansi-black);
}
.ansi-bg-1 {
    background-color: var(--ansi-red);
}
.ansi-bg-2 {
    background-color: var(--ansi-green);
}
.ansi-bg-3 {
    background-color: var(--ansi-yellow);
}
.ansi-bg-4 {
    background-color: var(--ansi-blue);
}
.ansi-bg-5 {
    background-color: var(--ansi-magenta);
}
.ansi-bg-6 {
    background-color: var(--ansi-cyan);
}
.ansi-bg-7 {
    background-color: var(--ansi-white);
}
.ansi-bg-8 {
    background-color: var(--ansi-bright-black);
}
.ansi-bg-9 {
    background-color: var(--ansi-bright-red);
}
.ansi-bg-10 {
    background-color: var(--ansi-bright-green);
}
.ansi-bg-11 {
    background-color: var(--ansi-bright-yellow);
}
.ansi-bg-12 {
    background-color: var(--ansi-bright-blue);
}
.ansi-bg-13 {
    background-color: var(--ansi-bright-magenta);
}
.ansi-bg-14 {
    background-color: var(--ansi-bright-cyan);
}
.ansi-bg-15 {
    background-color: var(--ansi-bright-white);
}
.ansi-fg-default-background {
    color: var(--surface);
}
.ansi-bg-default-foreground {
    background-color: var(--text);
}

.statusbar {
    display: flex;
    flex: 0 0 27px;
    align-items: stretch;
    border-top: 1px solid var(--line-strong);
    background: var(--chrome);
    color: var(--muted);
    font-size: 11px;
    font-weight: 400;
}

.statusbar span {
    display: flex;
    align-items: center;
    padding: 0 10px;
    border-right: 1px solid var(--line);
    white-space: nowrap;
}

.statusbar .statusbar-shortcut {
    margin-left: auto;
    border-right: 0;
    border-left: 1px solid var(--line);
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

@media (max-width: 760px) {
    body {
        display: block;
        height: auto;
        min-height: 100%;
        overflow: auto;
    }

    .topbar {
        height: 48px;
        padding: 0 12px;
    }

    .topbar-status {
        gap: 10px;
    }

    main {
        min-height: calc(100vh - 48px);
        padding: 10px;
    }

    .version-warning {
        grid-template-columns: 1fr;
    }

    .version-warning strong,
    .version-warning .button {
        min-height: 34px;
        border-right: 0;
        border-bottom: 1px solid var(--line);
    }

    .toolbar {
        flex-basis: auto;
        min-height: 34px;
        flex-wrap: wrap;
    }

    .toolbar-actions {
        min-width: 0;
        flex: 1 1 auto;
        flex-wrap: wrap;
    }

    .toolbar-actions .button {
        min-height: 34px;
    }

    .example-select {
        flex: 1 1 160px;
    }

    .toolbar-secondary {
        margin-left: 7px;
    }

    .notice:not(:empty) {
        min-height: 30px;
    }

    .workspace {
        grid-template-columns: 1fr;
    }

    .pane {
        min-height: 44vh;
    }

    .pane + .pane {
        border-top: 1px solid var(--line-strong);
    }

    .pane-resizer {
        display: none;
    }

    .statusbar {
        min-height: 27px;
        height: auto;
        flex-wrap: wrap;
    }

    .statusbar .statusbar-shortcut {
        display: none;
    }
}

@media (max-width: 480px) {
    .runtime {
        display: none;
    }

    .statusbar span:nth-child(3) {
        display: none;
    }

    .toolbar-secondary {
        width: 100%;
        margin-top: 7px;
        margin-left: 0;
    }

    .toolbar-secondary .notice {
        flex: 1 1 auto;
    }
}