: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;
    --lint-error: #9b2525;
    --lint-warning: #725400;
    --lint-info: #245f9b;
    --lint-note: #2f6d3a;
    --lint-help: #176d73;
    --warning-background: #e5e5e5;
    --selection: #c8c8c8;
    --active-line: rgb(0 0 0 / 4%);
    --syntax-comment: #686868;
    --syntax-keyword: #7a3e9d;
    --syntax-operator: #53606d;
    --syntax-string: #287044;
    --syntax-number: #925900;
    --syntax-function: #1f5f9f;
    --syntax-type: #9a3f65;
    --syntax-property: #80521f;
    --syntax-constant: #875200;
    --syntax-embedded: #9b3d3d;
    --indent-1: rgb(29 112 168 / 13%);
    --indent-2: rgb(143 66 151 / 12%);
    --indent-3: rgb(184 112 30 / 12%);
    --indent-4: rgb(42 135 86 / 12%);
    --indent-5: rgb(91 83 170 / 12%);
    --indent-6: rgb(170 67 77 / 12%);
    --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;
    --lint-error: #ef7777;
    --lint-warning: #e8c86d;
    --lint-info: #98bde1;
    --lint-note: #9bd294;
    --lint-help: #80d3d5;
    --warning-background: #2a2a2a;
    --selection: #505050;
    --active-line: rgb(255 255 255 / 5%);
    --syntax-comment: #8b949e;
    --syntax-keyword: #c792ea;
    --syntax-operator: #89a7bd;
    --syntax-string: #a9c77d;
    --syntax-number: #e6a06f;
    --syntax-function: #82aaff;
    --syntax-type: #e4c278;
    --syntax-property: #d7a86e;
    --syntax-constant: #d7ba7d;
    --syntax-embedded: #ef7f88;
    --indent-1: rgb(19 111 178 / 25%);
    --indent-2: rgb(153 63 151 / 22%);
    --indent-3: rgb(177 105 28 / 20%);
    --indent-4: rgb(35 137 80 / 20%);
    --indent-5: rgb(89 77 179 / 22%);
    --indent-6: rgb(177 63 75 / 20%);
    --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;
        --lint-error: #ef7777;
        --lint-warning: #e8c86d;
        --lint-info: #98bde1;
        --lint-note: #9bd294;
        --lint-help: #80d3d5;
        --warning-background: #2a2a2a;
        --selection: #505050;
        --active-line: rgb(255 255 255 / 5%);
        --syntax-comment: #8b949e;
        --syntax-keyword: #c792ea;
        --syntax-operator: #89a7bd;
        --syntax-string: #a9c77d;
        --syntax-number: #e6a06f;
        --syntax-function: #82aaff;
        --syntax-type: #e4c278;
        --syntax-property: #d7a86e;
        --syntax-constant: #d7ba7d;
        --syntax-embedded: #ef7f88;
        --indent-1: rgb(19 111 178 / 25%);
        --indent-2: rgb(153 63 151 / 22%);
        --indent-3: rgb(177 105 28 / 20%);
        --indent-4: rgb(35 137 80 / 20%);
        --indent-5: rgb(89 77 179 / 22%);
        --indent-6: rgb(177 63 75 / 20%);
        --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;
}

.editor-config {
    position: relative;
    display: flex;
    margin-left: 7px;
    align-items: stretch;
}

.editor-config-panel {
    position: absolute;
    z-index: 10;
    top: calc(100% + 6px);
    right: 0;
    width: 240px;
    padding: 11px;
    border: 1px solid var(--line-strong);
    color: var(--text);
    background: var(--surface);
    box-shadow: 4px 4px 0 rgb(0 0 0 / 16%);
}

.editor-config-panel[hidden] {
    display: none;
}

.editor-config-panel strong {
    display: block;
    margin-bottom: 10px;
    font-size: 12px;
    font-weight: 550;
}

.editor-config-panel fieldset {
    display: grid;
    gap: 2px;
    margin: 0;
    padding: 0;
    border: 0;
}

.editor-config-panel fieldset + fieldset {
    margin-top: 10px;
}

.editor-config-panel legend {
    width: 100%;
    margin-bottom: 3px;
    padding: 0 0 4px;
    border-bottom: 1px solid var(--line);
    color: var(--muted);
    font-size: 11px;
}

.editor-config-panel label {
    display: grid;
    min-height: 29px;
    padding: 5px 6px;
    align-items: center;
    grid-template-columns: 16px minmax(0, 1fr);
    gap: 8px;
    cursor: pointer;
    font-size: 12px;
}

.editor-config-panel label:hover {
    background: var(--chrome);
}

.editor-config-panel input {
    width: 14px;
    height: 14px;
    margin: 0;
    accent-color: var(--action);
}

.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,
.editor-config-panel input: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 h2,
.pane-header span {
    margin: 0;
    font-size: 12px;
    font-weight: 400;
    line-height: 1;
}

.pane-header h2 {
    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;
}

.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 {
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    background: var(--surface);
}

.source-seed {
    display: none;
}

.source-editor,
.source-editor .cm-editor,
.source-editor .cm-scroller {
    width: 100%;
    height: 100%;
    min-height: 0;
}

.source-editor .cm-editor {
    color: var(--text);
    background: var(--surface);
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 400;
    line-height: 1.58;
    tab-size: 2;
}

.source-editor .cm-editor.cm-focused {
    outline: 0;
}

.source-editor .cm-scroller {
    overflow: auto;
    font-family: inherit;
}

.source-editor .cm-content {
    padding: 15px 16px;
    caret-color: var(--text);
    min-width: max-content;
}

.source-editor .cm-line {
    padding: 0;
}

.source-editor .cm-gutters {
    border-right: 1px solid var(--line);
    color: var(--muted);
    background: var(--chrome);
}

.source-editor .cm-lineNumbers .cm-gutterElement {
    min-width: 45px;
    padding: 0 9px 0 4px;
    line-height: 1.58;
    text-align: right;
}

.source-editor .cm-foldGutter .cm-gutterElement {
    width: 17px;
    padding: 0 2px;
    color: var(--muted);
    line-height: 1.58;
    text-align: center;
    cursor: pointer;
}

.source-editor .cm-activeLine {
    background: var(--active-line);
}

.source-editor .cm-cursor {
    border-left-color: var(--text);
}

.source-editor .cm-selectionBackground,
.source-editor.cm-focused .cm-selectionBackground {
    background: var(--selection) !important;
}

.source-editor .cm-content[contenteditable="false"] {
    cursor: wait;
    opacity: 0.72;
}

.source-editor [class*="cm-indent-level-"] {
    display: inline-block;
    height: 1lh;
    vertical-align: top;
}

.source-editor .cm-indent-level-1 {
    background: var(--indent-1);
}

.source-editor .cm-indent-level-2 {
    background: var(--indent-2);
}

.source-editor .cm-indent-level-3 {
    background: var(--indent-3);
}

.source-editor .cm-indent-level-4 {
    background: var(--indent-4);
}

.source-editor .cm-indent-level-5 {
    background: var(--indent-5);
}

.source-editor .cm-indent-level-6 {
    background: var(--indent-6);
}

.tok-comment,
.tok-comment-documentation {
    color: var(--syntax-comment);
    font-style: italic;
}

.tok-keyword,
.tok-function-macro {
    color: var(--syntax-keyword);
    font-weight: 500;
}

.tok-operator,
.tok-punctuation-bracket,
.tok-punctuation-delimiter {
    color: var(--syntax-operator);
}

.tok-string,
.tok-string-escape {
    color: var(--syntax-string);
}

.tok-number,
.tok-boolean {
    color: var(--syntax-number);
}

.tok-function,
.tok-function-call,
.tok-function-method,
.tok-function-method-call {
    color: var(--syntax-function);
}

.tok-type,
.tok-type-builtin,
.tok-type-parameter,
.tok-module {
    color: var(--syntax-type);
}

.tok-property,
.tok-variable-parameter {
    color: var(--syntax-property);
}

.tok-constant,
.tok-constant-builtin,
.tok-attribute {
    color: var(--syntax-constant);
}

.tok-embedded {
    color: var(--syntax-embedded);
}

.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;
}

.output.lint-view {
    padding: 0;
}

.lint-results {
    min-height: 100%;
}

.lint-empty {
    margin: 0;
    padding: 15px 16px;
    color: var(--muted);
}

.lint-diagnostic {
    --lint-color: var(--lint-info);
    padding: 11px 16px 12px 13px;
    border-bottom: 1px solid var(--line);
    border-left: 3px solid var(--lint-color);
}

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

.lint-warning {
    --lint-color: var(--lint-warning);
}

.lint-info {
    --lint-color: var(--lint-info);
}

.lint-note {
    --lint-color: var(--lint-note);
}

.lint-help {
    --lint-color: var(--lint-help);
}

.lint-diagnostic-header {
    display: grid;
    grid-template-columns: 7ch minmax(0, 1fr) auto;
    gap: 10px;
    align-items: baseline;
    min-width: 0;
}

.lint-level {
    color: var(--lint-color);
    font-weight: 700;
}

.lint-rule {
    min-width: 0;
    overflow-wrap: anywhere;
    color: var(--text);
    font: inherit;
}

.lint-location {
    color: var(--muted);
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.lint-message {
    margin: 5px 0 0 calc(7ch + 10px);
    color: var(--muted);
    line-height: 1.45;
}

.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;
    }

    .lint-diagnostic-header {
        grid-template-columns: 7ch minmax(0, 1fr);
    }

    .lint-location {
        grid-column: 2;
    }

    .lint-message {
        margin-left: 0;
    }
}