:root {
    color-scheme: light;
    --ink: #18201d;
    --muted: #5e6964;
    --paper: #f7f5ef;
    --surface: #fffdf8;
    --line: #d8d5ca;
    --accent: #006c57;
    --accent-dark: #004c3e;
    --code: #edeae0;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", sans-serif;
    font-synthesis: none;
}

* {
    box-sizing: border-box;
}

html {
    background: var(--paper);
    color: var(--ink);
    line-height: 1.6;
}

body {
    margin: 0;
}

a {
    color: var(--accent-dark);
    text-underline-offset: 0.18em;
}

a:hover {
    color: var(--accent);
}

.shell {
    width: min(100% - 2rem, 72rem);
    margin-inline: auto;
}

.site-header {
    border-bottom: 1px solid var(--line);
    background: color-mix(in srgb, var(--paper) 90%, transparent);
}

.site-header nav {
    min-height: 4.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.brand {
    color: var(--ink);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.35rem;
    font-weight: 700;
    text-decoration: none;
}

.site-links,
.post-card-meta,
.site-footer {
    color: var(--muted);
    font-size: 0.9rem;
}

.site-links {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.site-links a {
    color: inherit;
    font-weight: 650;
    text-decoration: none;
}

.site-links a:hover {
    color: var(--accent-dark);
    text-decoration: underline;
}

.hero {
    padding: clamp(4rem, 9vw, 8rem) 0 clamp(3rem, 6vw, 5rem);
    max-width: 50rem;
}

.eyebrow {
    color: var(--accent);
    font-size: 0.78rem;
    font-weight: 750;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

h1,
h2,
h3 {
    font-family: Georgia, "Times New Roman", serif;
    line-height: 1.14;
}

.hero h1,
.post-heading h1,
.message-page h1 {
    max-width: 18ch;
    margin: 0.25rem 0 1rem;
    font-size: clamp(2.65rem, 8vw, 5.75rem);
    letter-spacing: -0.045em;
}

.hero > p:last-child,
.lede {
    max-width: 46rem;
    color: var(--muted);
    font-size: clamp(1.05rem, 2vw, 1.3rem);
}

.post-list {
    display: grid;
    margin:0.80rem;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
    gap: 1rem;
    padding-bottom: 6rem;
}

.post-card,
.empty-state {
    min-height: 18rem;
    padding: clamp(1.4rem, 3vw, 2rem);
    border: 1px solid var(--line);
    background: var(--surface);
    box-shadow: 0 0.5rem 2rem rgb(24 32 29 / 0.04);
}

.post-card {
    display: flex;
    flex-direction: column;
}

.post-card h2 {
    margin-block: 1.5rem 0.65rem;
    font-size: 1.65rem;
}

.post-card h2 a {
    color: var(--ink);
    text-decoration: none;
}

.post-card p {
    color: var(--muted);
}

.post-card .tags {
    margin-top: auto;
}

.post-card-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.draft-badge {
    padding: 0.15rem 0.5rem;
    background: #f5dd98;
    color: #594000;
    font-weight: 700;
}

.tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    padding: 0;
    list-style: none;
}

.tags li {
    padding: 0.18rem 0.55rem;
    border: 1px solid var(--line);
    border-radius: 1000px;
    color: var(--muted);
    font-size: 0.78rem;
}

.post-page {
    width: min(100%, 48rem);
    margin-inline: auto;
    padding: 3rem 0 7rem;
}

.back-link {
    display: inline-block;
    margin-bottom: 4rem;
    font-size: 0.9rem;
    font-weight: 650;
    text-decoration: none;
}

.post-heading {
    padding-bottom: 2.5rem;
    border-bottom: 1px solid var(--line);
}

.post-heading h1 {
    display:flex;
    justify-content:center;
    max-width: none;
    font-size: clamp(2.5rem, 7vw, 5rem);
}

.markdown {
    padding-top: 2.5rem;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.08rem;
}

.markdown h2,
.markdown h3 {
    margin-top: 2.5em;
    scroll-margin-top: 1rem;
}

.markdown a.anchor {
    margin-left: -1em;
    padding-right: 0.35em;
    color: var(--line);
    text-decoration: none;
}

.markdown pre {
    overflow-x: auto;
    padding: 1.2rem;
    border: 1px solid var(--line);
    background: var(--code);
    font-size: 0.88rem;
    line-height: 1.55;
}

.markdown code {
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}

.markdown :not(pre) > code {
    padding: 0.12em 0.3em;
    border-radius: 0.2rem;
    background: var(--code);
    font-size: 0.88em;
}

.markdown blockquote {
    margin-inline: 0;
    padding-left: 1.2rem;
    border-left: 0.25rem solid var(--accent);
    color: var(--muted);
}

.markdown table {
    width: 100%;
    border-collapse: collapse;
}

.markdown th,
.markdown td {
    padding: 0.6rem;
    border: 1px solid var(--line);
    text-align: left;
}

.message-page {
    min-height: 70vh;
    display: grid;
    align-content: center;
    justify-items: start;
    max-width: 48rem;
}

.button-link {
    display: inline-block;
    margin-top: 1rem;
    padding: 0.7rem 1rem;
    background: var(--accent-dark);
    color: white;
    font-weight: 700;
    text-decoration: none;
}

.editor-intro {
    max-width: 55rem;
    padding: clamp(3rem, 7vw, 6rem) 0 2.5rem;
}

.editor-intro h1 {
    max-width: 16ch;
    margin: 0.25rem 0 1rem;
    font-size: clamp(2.5rem, 7vw, 5rem);
    letter-spacing: -0.04em;
}

.editor-intro > p:last-child {
    max-width: 48rem;
    color: var(--muted);
    font-size: clamp(1.05rem, 2vw, 1.25rem);
}

.editor-workspace {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    min-height: 44rem;
    overflow: hidden;
    border: 1px solid var(--line);
    background: var(--surface);
    box-shadow: 0 0.5rem 2rem rgb(24 32 29 / 0.05);
}

.editor-pane,
.phase-pane {
    min-width: 0;
    padding: clamp(1rem, 2.5vw, 1.5rem);
}

.editor-pane {
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--line);
}

.phase-pane {
    max-height: 50rem;
    overflow: auto;
    background: color-mix(in srgb, var(--surface) 80%, var(--code));
}

.pane-heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.8rem;
}

.pane-heading h2 {
    margin: 0;
    font-size: 1.25rem;
}

.source-count {

    color: var(--muted);
    font-size: 0.78rem;
    font-variant-numeric: tabular-nums;
}

#source-editor {
    display: block;
    flex: 1;
    width: 100%;
    min-height: 35rem;
    padding: 1rem;
    resize: vertical;
    border: 1px solid var(--line);
    background: #151b19;
    color: #e7f1ed;
    caret-color: #78d5ba;
    font: 0.92rem/1.6 "SFMono-Regular", Consolas, "Liberation Mono", monospace;
    tab-size: 2;
}

#source-editor:focus {
    border-color: var(--accent);
    outline: 0.2rem solid rgb(0 108 87 / 0.18);
    outline-offset: 0.1rem;
}

#source-editor[aria-invalid="true"] {
    border-color: #a94438;
}

.editor-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-top: 0.9rem;
}

.editor-controls p {
    max-width: 34rem;
    margin: 0;
    color: var(--muted);
    font-size: 0.82rem;
}

.editor-controls button {
    flex: none;
    border: 0;
    background: var(--accent-dark);
    color: white;
    cursor: pointer;
    font: inherit;
    font-size: 0.85rem;
    font-weight: 750;
}

.editor-controls button:hover {
    background: var(--accent);
}

.editor-controls button:focus-visible {
    outline: 0.2rem solid rgb(0 108 87 / 0.3);
    outline-offset: 0.15rem;
}

.editor-status {
    margin: 0 0 1rem;
    padding: 0.55rem 0.75rem;
    border-left: 0.25rem solid;
    font-size: 0.86rem;
    font-weight: 700;
}

.editor-status-ok {
    border-color: var(--accent);
    background: rgb(0 108 87 / 0.08);
    color: var(--accent-dark);
}

.editor-status-error {
    border-color: #a94438;
    background: rgb(169 68 56 / 0.08);
    color: #7c2e25;
}

.editor-diagnostics {
    margin: 0 0 1rem;
    padding: 0.75rem 0.75rem 0.75rem 2rem;
    border: 1px solid #e2bdb7;
    border-radius: 0.4rem;
    background: #fff6f4;
    color: #64281f;
    font: 0.78rem/1.5 "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}

.editor-diagnostic + .editor-diagnostic {
    margin-top: 0.4rem;
}

.ast-tree,
.ast-children {
    min-width: max-content;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ast-children {
    position: relative;
    margin-left: 0.8rem;
    padding-left: 1.8rem;
    border-left: 1px solid #b9c9c2;
}

.ast-branch {
    position: relative;
    padding: 0.25rem 0;
}

.ast-children > .ast-branch::before {
    position: absolute;
    top: 1.25rem;
    left: -1.8rem;
    width: 1.3rem;
    border-top: 1px solid #b9c9c2;
    content: "";
}

.ast-node {
    display: inline-flex;
    align-items: baseline;
    gap: 0.45rem;
    max-width: 28rem;
    padding: 0.35rem 0.55rem;
    border: 1px solid #b9c9c2;
    background: var(--surface);
    box-shadow: 0 0.15rem 0.4rem rgb(24 32 29 / 0.04);
    font: 0.78rem/1.4 "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}

.ast-node-label {
    color: var(--accent-dark);
    font-weight: 750;
}

.ast-node-detail {
    overflow-wrap: anywhere;
    color: var(--muted);
}

.ast-empty {
    color: var(--muted);
    font-style: italic;
}

.language-reference {
    max-width: 52rem;
    padding: 4rem 0 6rem;
}

.language-reference h2 {
    margin-bottom: 0.6rem;
}

.language-reference p {
    color: var(--muted);
}

.site-footer {
    padding-block: 2rem;
    border-top: 1px solid var(--line);
}

@media (max-width: 55rem) {
    .editor-workspace {
        grid-template-columns: 1fr;
    }

    .editor-pane {
        border-right: 0;
        border-bottom: 1px solid var(--line);
    }

    .phase-pane {
        max-height: 42rem;
    }
}

@media (max-width: 40rem) {
    .site-header nav,
    .editor-controls {
        align-items: center;
        flex-direction: column;
    }

    .site-links {
        gap: 0.8rem;
    }

    .back-link {
        margin-bottom: 2.5rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
        *::before,
        *::after {
            animation-duration: 0.01ms !important;
            animation-iteration-count: 1 !important;
            scroll-behavior: auto !important;
            transition-duration: 0.01ms !important;
        }
    }

    /* Project 02 is an application workspace, intentionally separate from the
    editorial visual language used by the blog above. */
    .playground-body {
        --playground-bg: #080b10;
        --playground-panel: #0f141d;
        --playground-panel-raised: #151b26;
        --playground-editor: #0b1017;
        --playground-line: #283142;
        --playground-line-soft: #1d2532;
        --playground-text: #dce5f2;
        --playground-muted: #8995a8;
        --playground-blue: #6da4ff;
        --playground-cyan: #54d3c2;
        --playground-green: #69d391;
        min-height: 100vh;
        background: var(--playground-bg);
        color: var(--playground-text);
        font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
        "Segoe UI", sans-serif;
        line-height: 1.4;
    }

    .playground-header {
        position: relative;
        z-index: 10;
        border-bottom: 1px solid var(--playground-line);
        background: #0c1119;
        box-shadow: 0 0.3rem 1.5rem rgb(0 0 0 / 0.18);
    }

    .playground-header-inner {
        min-height: 3.75rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        padding-inline: clamp(0.9rem, 2vw, 1.5rem);
    }

    .playground-identity,
    .playground-brand,
    .playground-brand > span:last-child,
    .runtime-badge,
    .pane-title,
    .pane-stats,
    .live-mode,
    .playground-reference > div,
    .playground-shortcuts,
    .playground-shortcuts li {
        display: flex;
        align-items: center;
    }

    .playground-identity {
        gap: 1rem;
    }

    .playground-brand {
        gap: 0.65rem;
        color: var(--playground-text);
        text-decoration: none;
    }

    .playground-brand:hover {
        color: white;
    }

    .playground-brand > span:last-child {
        align-items: flex-start;
        flex-direction: column;
        line-height: 1.15;
    }

    .playground-brand strong {
        font-size: 0.9rem;
        letter-spacing: 0.01em;
    }

    .playground-brand small {
        margin-top: 0.16rem;
        color: var(--playground-muted);
        font-size: 0.7rem;
    }

    .runtime-badge {
        gap: 0.4rem;
        padding: 0.3rem 0.55rem;
        border: 1px solid var(--playground-line);
        border-radius: 1000px;
        color: var(--playground-muted);
        font-size: 0.68rem;
        font-weight: 700;
        letter-spacing: 0.04em;
        text-transform: uppercase;
    }

    .runtime-dot,
    .live-dot {
        width: 0.45rem;
        height: 0.45rem;
        flex: none;
        border-radius: 50%;
        background: var(--playground-green);
        box-shadow: 0 0 0.6rem rgb(105 211 145 / 0.7);
    }

    .playground-back-link {
        color: var(--playground-muted);
        font-size: 0.78rem;
        font-weight: 650;
        text-decoration: none;
    }

    .playground-back-link:hover {
        color: white;
    }

    .playground-main {
        width: 100%;
    }

    .playground-toolbar {
        min-height: 7.25rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 2rem;
    }

    .playground-title h1 {
        margin: 0.12rem 0 0.2rem;
        color: #f1f6ff;
        font-family: inherit;
        font-size: clamp(1.35rem, 2.4vw, 1.85rem);
        letter-spacing: -0.025em;
    }

    .playground-title > p:last-child {
        margin: 0;
        color: var(--playground-muted);
        font-size: 0.82rem;
    }

    .playground-kicker {
        margin: 0;
        color: var(--playground-blue);
        font: 750 0.63rem/1.2 "SFMono-Regular", Consolas, monospace;
        letter-spacing: 0.12em;
    }

    .playground-shortcuts {
        flex-wrap: wrap;
        justify-content: flex-start;
        gap: 0.55rem;
        margin: 0;
        list-style: none;
    }

    .playground-shortcuts li {
        gap: 0.45rem;
        color: var(--playground-muted);
        font-size: 0.7rem;
        white-space: nowrap;
    }

    .playground-shortcuts kbd {
        padding: 0.24rem 0.42rem;
        border: 1px solid #39465c;
        border-bottom-width: 2px;
        border-radius: 100px;
        background: var(--playground-panel-raised);
        color: #c6d3e5;
        font: 650 0.65rem/1.2 "SFMono-Regular", Consolas, monospace;
    }

    .phase-selector {
        display: grid;
        grid-template-columns: repeat(5, minmax(8rem, 1fr));
        gap: 0.45rem;
        margin: 0.50rem 0.35rem 0.75rem;
        overflow-x: auto;
        scrollbar-color: #3a465a transparent;
        scrollbar-width: thin;
    }

    .phase-button {
        position: relative;
        min-width: 8rem;
        display: flex;
        align-items: center;
        gap: 0.3rem;
        padding: 0.62rem 0.72rem;
        border: 1px solid var(--playground-line);
        background: #101620;
        color: var(--playground-muted);
        font: 650 0.68rem/1.25 "SFMono-Regular", Consolas, monospace;
        text-decoration: none;
        transition: border-color 140ms ease, background 140ms ease, color 140ms ease,
        transform 140ms ease;
    }

    .phase-button:hover {
        border-color: #475a78;
        background: #151e2c;
        color: #c7d4e6;
    }

    .phase-button:focus-visible {
        outline: 2px solid var(--playground-blue);
        outline-offset: 2px;
    }

    .phase-button-current,
    .phase-button-current:hover {
        border-color: #527fc5;
        background: linear-gradient(135deg, #1a2c48, #162238);
        color: #dceaff;
        box-shadow: inset 0 -2px #6da4ff, 0 0.4rem 1rem rgb(23 66 127 / 0.16);
        transform: none;
    }

    .phase-number {
        display: grid;
        width: 1.55rem;
        height: 1.55rem;
        flex: none;
        place-items: center;
        border: 1px solid #35435a;
        border-radius: 50%;
        color: #708097;
        font-size: 0.59rem;
        font-variant-numeric: tabular-nums;
    }

    .phase-button-current .phase-number {
        border-color: rgb(109 164 255 / 0.6);
        background: rgb(109 164 255 / 0.13);
        color: #a9c8ff;
    }

    .phase-label {
        white-space: nowrap;
    }

    .playground-body .editor-workspace {
        height: calc(100vh - 18rem);
        min-height: 34rem;
        display: grid;
        grid-template-columns: minmax(24rem, 0.95fr) minmax(28rem, 1.05fr);
        overflow: hidden;
        border: 1px solid var(--playground-line);
        background: var(--playground-panel);
        box-shadow: 0 1.2rem 4rem rgb(0 0 0 / 0.28);
    }

    .playground-body .editor-pane,
    .playground-body .phase-pane {
        min-width: 0;
        padding: 0;
    }

    .playground-body .editor-pane {
        display: flex;
        flex-direction: column;
        overflow: hidden;
        border-right: 1px solid var(--playground-line);
        background: var(--playground-editor);
    }

    .playground-body .phase-pane {
        max-height: none;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        background: var(--playground-panel);
    }

    .playground-body .pane-heading {
        min-height: 3.8rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        margin: 0;
        padding: 0.65rem 0.9rem;
        border-bottom: 1px solid var(--playground-line);
        background: var(--playground-panel-raised);
    }

    .pane-title {
        min-width: 0;
        gap: 0.65rem;
    }

    .pane-icon {
        display: grid;
        width: 1.8rem;
        height: 1.8rem;
        flex: none;
        place-items: center;
        border: 1px solid #344158;
        background: #101722;
        color: var(--playground-blue);
        font: 700 0.65rem/1 "SFMono-Regular", Consolas, monospace;
    }

    .playground-body .pane-heading h2 {
        overflow: hidden;
        margin: 0;
        color: var(--playground-text);
        font: 700 0.8rem/1.25 "SFMono-Regular", Consolas, monospace;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .pane-title p {
        margin: 0.12rem 0 0;
        color: var(--playground-muted);
        font-size: 0.67rem;
    }

    .pane-stats {
        min-width: 100%;
        justify-content: flex-end;
        gap: 0.65rem;
    }

    .selection-status {
        overflow: hidden;
        max-width: min(24vw, 22rem);
        color: #9eacc0;
        font: 0.67rem/1.3 "SFMono-Regular", Consolas, monospace;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .playground-body .source-count,
    .pane-mode {
        flex: none;
        padding: 0.22rem 0.4rem;
        border: 1px solid #334057;
        color: var(--playground-muted);
        font: 650 0.62rem/1.2 "SFMono-Regular", Consolas, monospace;
        font-variant-numeric: tabular-nums;
    }

    .pane-mode {
        border-color: rgb(105 211 145 / 0.35);
        color: var(--playground-green);
        letter-spacing: 0.08em;
    }

    .playground-body #source-editor {
        min-height: 0;
        flex: 1;
        width: 100%;
        margin: 0;
        resize: none;
        border: 0;
        outline: 0;
        background: var(--playground-editor);
        color: #d8e2ee;
        caret-color: #8eb8ff;
        font: 0.88rem/1.62 "SFMono-Regular", Consolas, "Liberation Mono", monospace;
        tab-size: 2;
    }

    .playground-body #source-editor:focus {
        border: 0;
        outline: inset 2px solid rgb(109 164 255 / 0.28);
        outline-offset: 0;
    }

    .playground-body #source-editor::selection {
        background: rgb(109 164 255 / 0.35);
        color: white;
    }

    .playground-body #source-editor[aria-invalid="true"] {
        box-shadow: inset 3px 0 #d76969;
    }

    .playground-body .editor-controls {
        min-height: 3.8rem;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 1rem;
        margin: 0;
        border-top: 1px solid var(--playground-line);
        background: #0e141d;
    }

    .live-mode {
        min-width: 0;
        gap: 0.55rem;
    }

    .playground-body .editor-controls p {
        overflow: hidden;
        max-width: none;
        margin: 0;
        color: var(--playground-muted);
        font-size: 0.68rem;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .playground-body .editor-controls strong {
        color: #b8c5d7;
    }

    .playground-body .server-parse-button {
        flex: none;
        margin: 0.50rem;
        padding: 0.48rem 0.7rem;
        border: 1px solid #3d5274;
        background: #19263a;
        border-radius: 0.80rem;
        color: var(--playground-green);
        cursor: pointer;
        font: inherit;
        font-size: 0.80rem;
        font-weight: 700;
        line-height: 1.2;
        box-shadow: 0 0.35rem 1rem rgb(0 0 0 / 0.24);
    }

    .playground-body .server-parse-button:hover {
        border-color: #5e82ba;
        background: #21344f;
    }

    .playground-body .server-parse-button:focus-visible {
        outline: 2px solid var(--playground-blue);
        outline-offset: 2px;
    }

    .phase-instructions {
        margin: 0;
        padding: 0.55rem 0.9rem;
        border-bottom: 1px solid var(--playground-line-soft);
        background: #111721;
        color: var(--playground-muted);
        font-size: 0.68rem;
    }

    .playground-body #phase-result {
        min-height: 0;
        flex: 1;
        overflow: auto;
        padding: 0.9rem;
        scrollbar-color: #3a465a transparent;
        scrollbar-width: thin;
    }

    .playground-body #phase-result.phase-result-pending > * {
        opacity: 0.55;
    }

    .playground-body #phase-result.phase-result-pending .ast-node-interactive,
    .playground-body #phase-result.phase-result-pending .source-link,
    .playground-body #phase-result.phase-result-pending .compiler-node {
        pointer-events: none;
    }

    .playground-body #phase-result[data-graph-engine="d3"] {
        display: flex;
        flex-direction: column;
        overflow: hidden;
        padding: 0;
    }

    .phase-messages {
        position: relative;
        z-index: 2;
        flex: none;
        padding: 0.75rem 0.75rem 0;
    }

    .phase-messages .editor-status,
    .phase-messages .editor-diagnostics {
        margin-bottom: 0.5rem;
    }

    .compiler-graph-host,
    .compiler-graph-shell {
        min-width: 0;
        min-height: 0;
        flex: 1;
    }

    .compiler-graph-shell {
        position: relative;
        width: 100%;
        height: 100%;
        overflow: hidden;
        background:
        radial-gradient(circle at 50% 15%, rgb(62 91 137 / 0.12), transparent 34%),
        #0e141d;
    }

    .compiler-graph {
        display: block;
        width: 100%;
        height: 100%;
        min-height: 26rem;
        touch-action: none;
        cursor: grab;
    }

    .compiler-graph:active {
        cursor: grabbing;
    }

    .compiler-graph-controls {
        position: absolute;
        z-index: 3;
        top: 0.65rem;
        right: 0.65rem;
        display: flex;
        gap: 0.25rem;
        padding: 0.25rem;
        border: 1px solid #344158;
        background: rgb(14 20 29 / 0.9);
        box-shadow: 0 0.35rem 1rem rgb(0 0 0 / 0.24);
    }

    .compiler-graph-control {
        min-width: 1.8rem;
        padding: 0.32rem 0.42rem;
        border: 1px solid transparent;
        border-radius: 0.25rem;
        background: transparent;
        color: #9eacc0;
        cursor: pointer;
        font: 700 0.63rem/1 "SFMono-Regular", Consolas, monospace;
    }

    .compiler-graph-control:hover {
        border-color: #405273;
        background: #1a2536;
        color: #dceaff;
    }

    .compiler-graph-control:focus-visible {
        outline: 2px solid var(--playground-blue);
        outline-offset: 1px;
    }

    .compiler-link {
        vector-effect: non-scaling-stroke;
        stroke-width: 1.35;
    }

    .compiler-node {
        cursor: pointer;
        outline: none;
    }

    .compiler-node rect {
        vector-effect: non-scaling-stroke;
        stroke-width: 1.25;
        filter: drop-shadow(0 0.25rem 0.45rem rgb(0 0 0 / 0.24));
    }

    .compiler-node:hover rect,
    .compiler-node:focus-visible rect {
        stroke: #9ac1ff;
        stroke-width: 2;
    }

    .compiler-node:focus-visible rect {
        filter: drop-shadow(0 0 0.4rem rgb(109 164 255 / 0.65));
    }

    .compiler-node-selected rect,
    .compiler-node-selected:hover rect,
    .compiler-node.source-item-selected rect {
        fill: #29446b;
        stroke: #b8d2ff;
        stroke-width: 2.5;
        filter: drop-shadow(0 0 0.55rem rgb(71 126 211 / 0.72));
    }

    .compiler-node text {
        pointer-events: none;
        font-family: "SFMono-Regular", Consolas, monospace;
    }

    .compiler-node-label {
        font-size: 0.7rem;
        font-weight: 750;
    }

    .compiler-node-detail {
        fill: #9daabe;
        font-size: 0.59rem;
    }

    .compiler-node-fold {
        fill: #718098;
        font-size: 0.80rem;
        text-anchor: middle;
    }

    .playground-body .editor-status {
        margin: 0 0 0.75rem;
        padding: 0.45rem 0.6rem;
        border: 1px solid;
        border-left-width: 3px;
        border-radius: 0.25rem;
        font: 700 0.68rem/1.35 "SFMono-Regular", Consolas, monospace;
    }

    .playground-body .editor-status-ok {
        border-color: rgb(105 211 145 / 0.3);
        border-left-color: var(--playground-green);
        background: rgb(105 211 145 / 0.07);
        color: #8be0a9;
    }

    .playground-body .editor-status-error {
        border-color: rgb(220 105 105 / 0.35);
        border-left-color: #dc6969;
        background: rgb(220 105 105 / 0.08);
        color: #ef9b9b;
    }

    .playground-body .editor-diagnostics {
        margin: 0 0 0.75rem;
        padding: 0.65rem 0.65rem 0.65rem 1.8rem;
        border: 1px solid rgb(220 105 105 / 0.35);
        border-radius: 0.3rem;
        background: rgb(84 29 35 / 0.35);
        color: #efb0b0;
        font: 0.7rem/1.5 "SFMono-Regular", Consolas, monospace;
    }

    .playground-body .ast-tree,
    .playground-body .ast-children {
        position: relative;
        width: max-content;
        min-width: 100%;
        display: flex;
        justify-content: center;
        margin: 0;
        padding: 0;
        border: 0;
        list-style: none;
    }

    .playground-body .ast-children {
        min-width: max-content;
        padding-top: 1.7rem;
    }

    .playground-body .ast-children[hidden] {
        display: none;
    }

    .playground-body .ast-branch {
        position: relative;
        display: flex;
        align-items: center;
        flex-direction: column;
        padding: 1.7rem 0.35rem 0;
    }

    .playground-body .ast-tree > .ast-branch {
        padding-top: 0;
    }

    .playground-body .ast-children > .ast-branch::before,
    .playground-body .ast-children > .ast-branch::after {
        position: absolute;
        top: 0;
        right: 50%;
        width: 50%;
        height: 1.7rem;
        border-top: 1px solid #344158;
        content: "";
    }

    .playground-body .ast-children > .ast-branch::after {
        right: auto;
        left: 50%;
        border-left: 1px solid #344158;
    }

    .playground-body .ast-children > .ast-branch:first-child::before,
    .playground-body .ast-children > .ast-branch:last-child::after {
        border: 0;
    }

    .playground-body .ast-children > .ast-branch:only-child::before,
    .playground-body .ast-children > .ast-branch:only-child::after {
        display: none;
    }

    .playground-body .ast-children > .ast-branch:last-child::before {
        border-right: 1px solid #344158;
        border-radius: 0 0.35rem 0 0;
    }

    .playground-body .ast-children > .ast-branch:first-child::after {
        border-radius: 0.35rem 0 0 0;
    }

    .playground-body .ast-branch > .ast-children::before {
        position: absolute;
        top: 0;
        left: 50%;
        height: 1.7rem;
        border-left: 1px solid #344158;
        content: "";
    }

    .playground-body .ast-node {
        display: inline-flex;
        align-items: center;
        gap: 0.42rem;
        max-width: 30rem;
        padding: 0.38rem 0.58rem;
        border: 1px solid #344158;
        border-radius: 0.3rem;
        background: #151d29;
        color: var(--playground-text);
        box-shadow: 0 0.18rem 0.55rem rgb(0 0 0 / 0.16);
        font: 0.72rem/1.35 "SFMono-Regular", Consolas, monospace;
        text-align: left;
    }

    .playground-body .ast-node-interactive {
        appearance: none;
        cursor: pointer;
    }

    .playground-body .ast-node-interactive:hover {
        border-color: #5675a6;
        background: #1a2638;
    }

    .playground-body .ast-node-interactive:focus-visible {
        border-color: var(--playground-blue);
        outline: 2px solid rgb(109 164 255 / 0.32);
        outline-offset: 2px;
    }

    .playground-body .ast-node-selected,
    .playground-body .ast-node-selected:hover,
    .playground-body .source-item-selected,
    .playground-body .source-item-selected:hover {
        border-color: #75a9ff;
        background: #20395d;
        box-shadow: 0 0 0 1px rgb(117 169 255 / 0.2),
        0 0.25rem 1rem rgb(46 101 181 / 0.22);
    }

    .playground-body .ast-node-caret {
        width: 0.8rem;
        flex: none;
        color: #718098;
        text-align: center;
        transform-origin: center;
        transition: transform 120ms ease;
    }

    .playground-body .ast-node-collapsed .ast-node-caret {
        transform: rotate(-90deg);
    }

    .playground-body .ast-node-label {
        color: #8eb8ff;
    }

    .playground-body .ast-node-detail {
        color: #9daabe;
    }

    .playground-body .ast-empty {
        color: var(--playground-muted);
    }

    .token-stream,
    .execution-trace {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .token-stream li + li,
    .execution-trace li + li {
        margin-top: 0.3rem;
    }

    .source-link {
        width: 100%;
        display: grid;
        align-items: center;
        gap: 0.65rem;
        padding: 0.48rem 0.58rem;
        border: 1px solid #283448;
        border-radius: 0.28rem;
        background: #111823;
        color: var(--playground-text);
        cursor: pointer;
        font: 0.68rem/1.35 "SFMono-Regular", Consolas, monospace;
        text-align: left;
    }

    .source-link:hover {
        border-color: #4a6288;
        background: #172233;
    }

    .source-link:focus-visible {
        border-color: var(--playground-blue);
        outline: 2px solid rgb(109 164 255 / 0.3);
        outline-offset: 1px;
    }

    .token-source-link {
        grid-template-columns: 2rem minmax(9rem, 1fr) auto;
    }

    .token-index,
    .token-location,
    .trace-location,
    .trace-depth-marker {
        color: #718098;
        font-variant-numeric: tabular-nums;
    }

    .token-kind,
    .trace-detail {
        overflow-wrap: anywhere;
        color: #a9c8ff;
    }

    .trace-source-link {
        grid-template-columns: minmax(1rem, auto) minmax(6rem, auto) minmax(7rem, 1fr)
        auto;
    }

    .trace-depth-marker {
        min-width: 1rem;
        color: var(--playground-cyan);
        letter-spacing: -0.18em;
    }

    .trace-label {
        color: #9fdcaf;
    }

    .playground-reference {
        min-height: 3rem;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 1.5rem;
        color: var(--playground-muted);
        font-size: 0.66rem;
    }

    .playground-reference > div {
        gap: 0.55rem;
    }

    .playground-reference strong {
        color: #b6c3d4;
    }

    .playground-reference code {
        padding: 0.18rem 0.35rem;
        border: 1px solid var(--playground-line);
        border-radius: 0.25rem;
        background: #111721;
        color: #9db4d6;
    }

    @media (max-width: 70rem) {
        .playground-toolbar {
            align-items: flex-start;
            flex-direction: column;
            gap: 0.8rem;
        }
        .playground-shortcuts {
            justify-content: flex-start;
        }

        .playground-body .editor-workspace {
            height: calc(100vh - 20.5rem);
            grid-template-columns: minmax(20rem, 1fr) minmax(24rem, 1fr);
        }
    }

    @media (max-width: 55rem) {
        .playground-body .editor-workspace {
            height: auto;
            grid-template-columns: 1fr;
        }

        .phase-button{
            font-size:9px;
        }
        .playground-body .editor-pane {
            min-height: 35rem;
            border-right: 0;
            border-bottom: 1px solid var(--playground-line);
        }

        .playground-body .phase-pane {
            min-height: 38rem;
        }

        .playground-reference {
            align-items: flex-start;
            flex-direction: column;
            gap: 0.55rem;
        }
    }

    @media (max-width: 40rem) {
        .runtime-badge,
        .selection-status,
        .playground-title > p:last-child {
            display: none;
        }

        .playground-header-inner {
            min-height: 3.5rem;
        }

        .phase-selector {
            grid-template-columns: repeat(5, 7.5rem);
        }

        .phase-button {
            min-width: 7.5rem;
            padding-inline: 0.55rem;
        }

        .token-source-link,
        .trace-source-link {
            grid-template-columns: auto 1fr;
        }

        .token-location,
        .trace-location {
            grid-column: 2;
        }

        .playground-body .editor-controls {
            align-items: center;
            flex-direction: column;
        }

        .playground-body .editor-controls p {
            white-space: normal;
        }

        .playground-reference > div {
            align-items: flex-start;
            flex-wrap: wrap;
        }
    }