body.interpreter-page {
    --int-bg: #fff;
    --int-panel: #fff;
    --int-border: #e3e8f1;
    --int-text: #1d293b;
    --int-muted: #68758a;
    --int-soft: #f7f9fc;
    --int-accent: #f37763;
    min-height: 100vh;
    width: 100%;
    display: flex;
    flex-direction: column;
    background: var(--int-bg);
    color: var(--int-text);
}

.shared-code { margin: 0 0 22px; padding: 16px 20px; border: 1px solid var(--int-border); border-radius: 18px; background: var(--int-soft); font-family: system-ui, sans-serif; }
.shared-code [hidden] { display: none !important; }
.shared-code__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; font-size: 13px; color: var(--int-muted); }
.shared-code__people { display: flex; flex-wrap: wrap; gap: 6px; }
.shared-code-person { padding: 5px 9px; border-radius: 30px; background: var(--shared-color); color: #1d293b; font-size: 12px; }
.shared-code-color-0 { --shared-color: #bfdbfe; }
.shared-code-color-1 { --shared-color: #bbf7d0; }
.shared-code-color-2 { --shared-color: #fbcfe8; }
.shared-code-color-3 { --shared-color: #fde68a; }
.shared-code-color-4 { --shared-color: #ddd6fe; }
.shared-code-color-5 { --shared-color: #a5f3fc; }
.shared-code-cursor { position: absolute; background: var(--shared-color); opacity: .55; border-left: 2px solid #475569; }
.shared-code summary { cursor: pointer; font-size: 13px; margin-top: 12px; }
.shared-code__manage p { font-size: 12px; color: var(--int-muted); }
#shared-code-members { display: grid; gap: 8px; margin: 12px 0; }
#shared-code-members label { display: flex; justify-content: space-between; gap: 12px; max-width: 380px; font-size: 14px; }
.shared-code__save { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.shared-code__save input { width: 190px; padding: 8px 12px; border: 1px solid var(--int-border); border-radius: 10px; background: var(--int-panel); color: var(--int-text); font: inherit; font-size: 13px; }
.shared-code__save select { flex: 1; min-width: 0; max-width: 100%; padding: 9px 12px; border: 1px solid var(--int-border); border-radius: 10px; background: var(--int-panel); color: var(--int-text); font: 13px system-ui, sans-serif; }
.shared-code__publish p { margin: 10px 0; font-size: 12px; color: var(--int-muted); }
.shared-code__publish summary { font-weight: 600; }
@media (max-width: 600px) { .shared-code__save select { flex-basis: 100%; width: 100%; } }
.shared-code__error { color: #d04f45; margin: 10px 0; font-size: 13px; }
.shared-code__versions ul { padding-left: 18px; font-size: 13px; }
.shared-code__versions a { color: var(--int-accent); }
body.interpreter-embedded { margin: 0; }
.interpreter-embedded .interpreter { width: calc(100% - 32px); padding: 16px 0 24px; }
.interpreter-embedded .interpreter__hero { margin-bottom: 16px; gap: 12px; }
.interpreter-embedded .interpreter__hero h1 { font-size: 24px; }
.interpreter-embedded .interpreter__hero p { font-size: 13px; line-height: 1.5; margin-bottom: 0; }
.interpreter-embedded .interpreter__workspace { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
.interpreter-embedded #python-editor, .interpreter-embedded #python-code, .interpreter-embedded .interpreter__terminal { min-height: 280px; height: 44vh; }
@media (max-width: 700px) { .interpreter-embedded .interpreter__workspace { grid-template-columns: minmax(0, 1fr); } .interpreter-embedded .interpreter__hero { align-items: flex-start; } }

body.interpreter-page.black {
    --int-bg: #171b24;
    --int-panel: #202735;
    --int-border: #354052;
    --int-text: #f7f8fc;
    --int-muted: #aeb8c9;
    --int-soft: #1a2230;
    --int-accent: #ff927b;
}

body.interpreter-page header {
    position: relative;
    top: 0;
    padding: 24px 0;
    background: var(--int-bg);
}

.interpreter {
    width: min(1320px, calc(100% - 48px));
    margin: 0 auto;
    padding: 70px 0 96px;
    flex: 1 0 auto;
}

.interpreter__hero {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 32px;
    margin-bottom: 38px;
}

.interpreter__source-note {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 28px;
    padding: 18px 22px;
    border: 1px solid var(--int-border);
    border-radius: 16px;
    background: var(--int-soft);
}

.interpreter__source-note strong,
.interpreter__source-note span {
    display: block;
    overflow-wrap: anywhere;
}

.interpreter__source-note span,
.interpreter__source-note p { color: var(--int-muted); }
.interpreter__source-note p { margin: 8px 0 0; }
.interpreter__source-links { display: flex; flex-wrap: wrap; gap: 14px; }
.interpreter__source-links a { color: var(--int-accent); font-weight: 700; }
.interpreter__code-panel h2 { overflow-wrap: anywhere; }

.interpreter__eyebrow,
.interpreter__panel-kicker {
    display: block;
    margin-bottom: 10px;
    color: var(--int-accent);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.interpreter__hero h1 {
    margin: 0 0 12px;
    color: var(--int-text);
    font-size: clamp(36px, 4vw, 58px);
    font-weight: 800;
    line-height: 1.12;
}

.interpreter__hero p {
    max-width: 730px;
    color: var(--int-muted);
    font-size: 16px;
    line-height: 1.7;
}

.interpreter__status {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    border: 1px solid var(--int-border);
    border-radius: 999px;
    background: var(--int-soft);
    color: var(--int-muted);
    font-size: 13px;
    font-weight: 700;
}

.interpreter__status::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #e5a449;
}

.interpreter__status.ready::before { background: #33ba84; }
.interpreter__status.error::before { background: #ef6969; }

.interpreter__workspace {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
    gap: 20px;
    align-items: stretch;
}

.interpreter__panel {
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--int-border);
    border-radius: 22px;
    background: var(--int-panel);
    box-shadow: 0 18px 50px rgba(21, 33, 55, .06);
}

.interpreter__panel-heading {
    min-height: 86px;
    padding: 21px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.interpreter__panel-kicker {
    margin-bottom: 4px;
    font-size: 10px;
}

.interpreter__panel-heading h2 {
    color: var(--int-text);
    font-size: 19px;
    line-height: 1.3;
    font-weight: 750;
}

.interpreter__language {
    padding: 7px 10px;
    border-radius: 9px;
    background: var(--int-soft);
    color: var(--int-muted);
    font-size: 12px;
    font-weight: 700;
}

.interpreter__toolbar,
.interpreter__console-tools {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.interpreter__toolbar {
    padding: 0 18px 14px;
}

.interpreter__tool,
.interpreter__retry {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 11px;
    border: 1px solid transparent;
    border-radius: 9px;
    background: transparent;
    color: var(--int-muted);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.25;
    white-space: nowrap;
    transition: background .2s, color .2s;
}

.interpreter__tool:hover,
.interpreter__retry:hover {
    transform: none;
    background: var(--int-soft);
    color: var(--int-text);
}

.interpreter__editor-shell {
    position: relative;
    height: 495px;
    border-top: 1px solid var(--int-border);
    border-bottom: 1px solid var(--int-border);
    background: var(--int-soft);
}

#python-code,
#python-editor {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: 0;
    background: var(--int-soft);
    color: var(--int-text);
    font: 15px/1.65 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

/* The site's universal selector sets Montserrat on every element. Ace measures
   cursor and tab positions using the editor font, so its inner text must match. */
#python-editor *,
.ace_autocomplete,
.ace_autocomplete * {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace !important;
}

#python-code {
    padding: 20px 24px;
    resize: none;
    tab-size: 4;
}

#python-code[hidden],
#python-editor[hidden],
#retry-python[hidden] { display: none; }

#python-editor .ace_gutter {
    background: var(--int-soft);
    color: var(--int-muted);
}

#python-editor.ace_editor {
    background: var(--int-soft);
    color: var(--int-text);
}

#python-editor .ace_scroller {
    background: var(--int-soft);
}

#python-editor .ace_marker-layer .ace_bracket {
    border: 0;
    border-radius: 3px;
    background: rgba(111, 123, 240, .20);
}

.interpreter__editor-footer {
    min-height: 45px;
    padding: 12px 23px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px 16px;
    color: var(--int-muted);
    font-size: 11px;
    font-weight: 600;
}

.interpreter__terminal {
    width: calc(100% - 36px);
    height: 438px;
    margin: 0 18px;
    padding: 18px 19px 24px;
    overflow: auto;
    border: 1px solid #344154;
    border-radius: 14px;
    background: #121b2a;
    color: #edf4ff;
    font: 14px/1.65 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

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

.interpreter__input-line {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-top: 3px;
}

.interpreter__input-line[hidden] {
    display: none;
}

.interpreter__input-line label {
    flex: 0 0 auto;
    max-width: 50%;
    color: #a9b8d1;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

#python-stdin {
    flex: 1 1 90px;
    min-width: 0;
    padding: 5px 0;
    border: 0;
    border-bottom: 1px solid #687a98;
    border-radius: 0;
    outline: 0;
    background: transparent;
    color: #fff;
    font: inherit;
}

#python-stdin:focus {
    border-bottom-color: #ff927b;
}

.interpreter__input-line button {
    flex: 0 0 auto;
    padding: 5px 8px;
    border: 1px solid #53627c;
    border-radius: 7px;
    background: #263650;
    color: #edf4ff;
    font: 12px/1.4 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.interpreter__actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 20px;
}

.interpreter__run,
.interpreter__stop {
    min-height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 20px;
    border-radius: 11px;
    font-size: 14px;
    font-weight: 750;
    transition: opacity .2s, background .2s;
}

.interpreter__run { background: #f37763; color: #fff; }
.interpreter__run:hover { background: #df6350; transform: none; }
.interpreter__stop { background: var(--int-soft); color: var(--int-text); border: 1px solid var(--int-border); }
.interpreter__stop:hover { transform: none; background: var(--int-border); }
.interpreter__actions button:disabled { opacity: .48; cursor: not-allowed; }
.interpreter__actions button:disabled:hover { transform: none; }
.interpreter__shortcut { margin-left: auto; color: var(--int-muted); font-size: 12px; }

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

.interpreter button:focus-visible,
.interpreter input:focus-visible,
.interpreter textarea:focus-visible,
#python-output:focus-visible {
    outline: 2px solid #6f7bf0;
    outline-offset: 2px;
}

body.interpreter-page footer { flex: 0 0 auto; }

@media (max-width: 1000px) {
    .interpreter__workspace { grid-template-columns: 1fr; }
    .interpreter__editor-shell { height: 430px; }
    .interpreter__terminal { height: 320px; }
}

@media (max-width: 600px) {
    .interpreter { width: min(100% - 28px, 1320px); padding: 43px 0 70px; }
    .interpreter__source-note { align-items: flex-start; flex-direction: column; padding: 16px; }
    .interpreter__hero { display: block; margin-bottom: 26px; }
    .interpreter__hero h1 { font-size: 34px; }
    .interpreter__hero p { font-size: 14px; }
    .interpreter__status { margin-top: 17px; }
    .interpreter__panel { border-radius: 16px; }
    .interpreter__panel-heading { min-height: 74px; padding: 17px; }
    .interpreter__panel-heading h2 { font-size: 17px; }
    .interpreter__toolbar { padding: 0 10px 12px; }
    .interpreter__console-tools { justify-content: flex-end; }
    .interpreter__tool { padding: 7px; font-size: 11px; }
    .interpreter__editor-shell { height: 360px; }
    .interpreter__terminal { height: 285px; width: calc(100% - 24px); margin: 0 12px; }
    .interpreter__editor-footer { padding: 11px 15px; }
    .interpreter__actions { align-items: stretch; }
    .interpreter__shortcut { width: 100%; margin: 2px 0 0; }
}