body {
    background: var(--bg);
    color: var(--fg);
    font-family: sans-serif;
    margin: 0;
}

a {
    color: var(--link);
}

.topbar {
    display: flex;
    justify-content: space-between;
    padding: 1rem;
    border-bottom: 1px solid var(--border-soft);
    background: var(--bg);
    align-items: center;
    gap: .75rem;
}

.topbar > nav { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.topbar > nav > a { margin: 0; padding: .4rem .6rem; border-radius: .35rem; white-space: nowrap; }
.topbar > nav > a:hover { background: var(--row-hover, var(--border-soft)); }
.topbar > .brand > a { margin: 0; white-space: nowrap; }

.topbar a {
    color: var(--link);
    text-decoration: none;
    margin-right: 1rem;
}

.container {
    padding: 1rem;
}

.card {
    border: 1px solid var(--border-soft);
    background: var(--panel);
    padding: 1rem;
    margin-bottom: 1rem;
}

.editor-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.editor {
    width: 100%;
    min-height: 70vh;
    background: var(--input-bg);
    color: var(--input-fg);
    border: 1px solid var(--input-border);
}

.preview {
    border: 1px solid var(--border-soft);
    padding: 1rem;
    overflow: auto;
    background: var(--panel);
    color: var(--fg);
}

.preview.code-preview {
    white-space: pre;
    font-family: "JetBrains Mono", monospace;
}