:root {
        --editor-page: #efe4d0;
        --editor-workspace: #e1d0b3;
        --editor-ink: #241b16;
        --editor-muted: #725f48;
        --editor-paper: #fff8eb;
        --editor-paper-edge: #caa877;
        --editor-panel: #fffaf0;
        --editor-modal-panel: #fffaf0;
        --editor-panel-strong: #f4e5c9;
        --editor-panel-ink: #241b16;
        --editor-panel-muted: #6b5f52;
        --editor-input: #fffdfa;
        --editor-input-ink: #241b16;
        --editor-line: #b89054;
        --editor-accent: #8f3d2d;
        --editor-accent-strong: #5f201b;
        --editor-accent-ink: #fff8ec;
        --editor-shadow: rgba(60, 35, 12, 0.18);
        --editor-selection: rgba(143, 61, 45, 0.14);
        --editor-selection-soft: rgba(143, 61, 45, 0.08);
    }

    html[data-theme="dark"] {
        --editor-page: #151310;
        --editor-workspace: #211d18;
        --editor-ink: #f1e5d0;
        --editor-muted: #c1ad8d;
        --editor-paper: #24201a;
        --editor-paper-edge: rgba(184, 144, 84, 0.52);
        --editor-panel: rgba(36, 32, 26, 0.94);
        --editor-modal-panel: #24201a;
        --editor-panel-strong: #332817;
        --editor-panel-ink: #f1e5d0;
        --editor-panel-muted: #c1ad8d;
        --editor-input: #171410;
        --editor-input-ink: #f1e5d0;
        --editor-line: #9d7843;
        --editor-accent: #df9b4f;
        --editor-accent-strong: #f0b76d;
        --editor-accent-ink: #1e1510;
        --editor-shadow: rgba(0, 0, 0, 0.45);
        --editor-selection: rgba(223, 155, 79, 0.18);
        --editor-selection-soft: rgba(223, 155, 79, 0.1);
    }

    .document-editor-page {
        color: var(--editor-ink);
    }

    .document-editor-page button,
    .document-editor-page textarea {
        color-scheme: light;
    }

    html[data-theme="dark"] .document-editor-page button,
    html[data-theme="dark"] .document-editor-page textarea {
        color-scheme: dark;
    }

    .document-editor-page {
        min-height: 100vh;
        padding: 18px;
        background: var(--editor-page);
    }

    .document-editor-workspace {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 360px;
        gap: 18px;
        align-items: start;
        max-width: 1500px;
        margin: 0 auto;
    }

    .document-editor-toolbar,
    .document-editor-panel {
        border: 1px solid var(--editor-paper-edge);
        background: var(--editor-panel);
        color: var(--editor-panel-ink);
        box-shadow: 0 18px 42px var(--editor-shadow);
    }

    .document-editor-toolbar {
        grid-column: 1 / -1;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
        padding: 12px 14px;
        border-radius: 8px;
    }

    .document-editor-title {
        margin: 0;
        font-size: 1.15rem;
        letter-spacing: 0;
    }

    .document-editor-status {
        color: var(--editor-panel-muted);
        font-size: 0.92rem;
    }

    .document-editor-actions {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
        justify-content: flex-end;
    }

    .document-editor-button {
        border: 1px solid var(--editor-paper-edge);
        border-radius: 6px;
        background: var(--editor-panel-strong);
        color: var(--editor-panel-ink);
        cursor: pointer;
        font: inherit;
        min-height: 34px;
        padding: 7px 12px;
    }

    .document-editor-button:hover,
    .document-editor-button:focus-visible {
        background: var(--editor-line);
        color: var(--editor-accent-ink);
        outline: 2px solid var(--editor-accent);
        outline-offset: 2px;
    }

    .document-editor-button.primary {
        background: var(--editor-accent);
        border-color: var(--editor-accent);
        color: var(--editor-accent-ink);
    }

    .document-editor-button.primary:hover,
    .document-editor-button.primary:focus-visible {
        background: var(--editor-accent-strong);
        color: var(--editor-accent-ink);
    }

    .document-editor-shell {
        position: relative;
        overflow: auto;
        max-height: calc(100vh - 112px);
        padding: 20px;
        border-radius: 8px;
        background: var(--editor-workspace);
        box-shadow: inset 0 0 0 1px rgba(184, 144, 84, 0.2);
        user-select: none;
    }

    .document-editor-surface {
        display: grid;
        gap: 18px;
        width: 210mm;
        margin: 0 auto;
    }

    .document-editor-page-sheet {
        position: relative;
        box-sizing: border-box;
        width: 210mm;
        height: 297mm;
        max-height: 297mm;
        overflow: hidden;
        padding: 15px;
        outline: 1px solid var(--editor-paper-edge);
        background: var(--editor-paper);
        color: var(--editor-ink);
        box-shadow: 0 24px 54px var(--editor-shadow);
        column-count: 2;
        column-fill: auto;
        column-gap: 18px;
        font-family: "Fanwood Text", serif;
        font-size: 13px;
        line-height: 1.4;
        orphans: 3;
        widows: 3;
    }

    .document-editor-page-transition {
        display: flex;
        align-items: center;
        gap: 10px;
        width: 210mm;
        color: var(--editor-panel-muted);
        font-family: Georgia, "Times New Roman", serif;
        font-size: 0.84rem;
        font-style: italic;
        text-transform: uppercase;
    }

    .document-editor-page-transition::before,
    .document-editor-page-transition::after {
        content: "";
        flex: 1;
        border-top: 1px dashed var(--editor-line);
    }

    .document-editor-page-sheet h1,
    .document-editor-page-sheet h2,
    .document-editor-page-sheet h3,
    .document-editor-page-sheet h4,
    .document-editor-page-sheet table {
        break-inside: avoid;
    }

    .document-editor-page-sheet h1 {
        column-span: all;
        margin: 0 0 16px;
        border-bottom: 3px solid var(--editor-line);
        padding-bottom: 8px;
        color: var(--editor-ink);
        font-size: 30px;
        line-height: 1.15;
    }

    .document-editor-page-sheet h2 {
        margin: 18px 0 8px;
        border-bottom: 2px solid var(--editor-line);
        padding-bottom: 4px;
        color: var(--editor-ink);
        font-size: 21px;
        line-height: 1.15;
    }

    .document-editor-page-sheet h3,
    .document-editor-page-sheet h4 {
        margin: 14px 0 6px;
        color: var(--editor-accent);
        line-height: 1.15;
    }

    .document-editor-page-sheet h3 {
        font-size: 16px;
    }

    .document-editor-page-sheet [data-block-id="heading-weapon-crits"] {
        padding-top: 14px;
    }

    .document-editor-page-sheet [data-block-id="heading-simple-weapons"] {
        margin-top: 10px;
    }

    .document-editor-page-sheet [data-block-id="heading-martial-weapons"] {
        margin-top: 2px;
    }

    .document-editor-page-sheet h4 {
        margin: 10px 0 4px;
        font-size: 13px;
    }

    .document-editor-page-sheet .inline-header {
        margin: 0 0 6px;
    }

    .document-editor-page-sheet .document-title {
        margin-top: 0;
    }

    .document-editor-page-sheet .span-columns {
        column-span: all;
        break-inside: avoid;
        width: 100%;
        text-align: center;
    }

    .document-editor-page-sheet .indent {
        text-indent: 1.5em;
    }

    .document-editor-page-sheet p.indent {
        margin: 0;
    }

    .document-editor-page-sheet .ol-bottom {
        margin-bottom: 9px;
    }

    .document-editor-page-sheet .no-border-line {
        border-bottom: none;
    }

    .document-editor-page-sheet .section-header {
        font-size: 26px;
    }

    .document-editor-page-sheet .stance-name {
        font-size: 13px;
        font-weight: bold;
    }

    .document-editor-page-sheet p {
        margin: 0;
    }

    .document-editor-page-sheet ul,
    .document-editor-page-sheet ol {
        margin: 0 0 0 20px;
        padding: 0;
    }

    .document-editor-page-sheet li {
        margin-bottom: 0;
    }

    .document-editor-page-sheet table {
        width: 100%;
        margin: 0 0 12px;
        border-collapse: collapse;
        font-size: 11px;
        break-inside: avoid;
        table-layout: auto;
        text-align: left;
    }

    .document-editor-page-sheet table.span-columns {
        column-span: all;
    }

    .document-editor-page-sheet table.no-span-columns {
        column-span: none;
    }

    .document-editor-page-sheet th,
    .document-editor-page-sheet td {
        border: 1px solid var(--editor-line);
        padding: 5px 6px;
        text-align: left;
        vertical-align: top;
    }

    .document-editor-page-sheet th {
        font-weight: bold;
        background: var(--editor-panel-strong);
    }

    .document-editor-page-sheet tbody tr:nth-child(even) {
        background: var(--editor-selection-soft);
    }

    .document-block {
        position: relative;
        border-radius: 4px;
        cursor: pointer;
        outline: 1px solid transparent;
        outline-offset: 2px;
        transition: background 120ms ease, outline-color 120ms ease;
    }

    .document-block:hover {
        background: var(--editor-selection-soft);
        outline-color: var(--editor-accent);
    }

    .document-text-block:hover {
        background: transparent;
        outline-color: transparent;
    }

    .document-text-content {
        border-radius: 4px;
        cursor: pointer;
        user-select: none;
    }

    .document-block.is-selected {
        background: var(--editor-selection);
        outline: 2px solid var(--editor-accent);
    }

    .document-editor-page-sheet ul.document-block.is-selected,
    .document-editor-page-sheet ol.document-block.is-selected {
        background: transparent;
        outline: none;
    }

    .document-editor-page-sheet li.is-selected-list-item {
        position: relative;
        background: var(--editor-selection);
        box-shadow: 0 0 0 2px var(--editor-accent);
        clip-path: inset(-4px -4px -4px -22px);
    }

    .document-editor-page-sheet li.is-selected-list-item::before {
        content: "";
        position: absolute;
        top: -2px;
        bottom: -2px;
        left: -20px;
        width: 20px;
        border: 2px solid var(--editor-accent);
        border-right: 0;
        border-radius: 4px 0 0 4px;
        background: var(--editor-selection);
        pointer-events: none;
    }

    .document-text-block.is-selected {
        background: transparent;
        cursor: text;
        outline: 2px solid var(--editor-accent);
        outline-offset: 2px;
        box-shadow: none;
        padding-top: 2px;
        padding-bottom: 2px;
    }

    .document-text-block.is-selected:hover {
        background: transparent;
        cursor: text;
        outline: 2px solid var(--editor-accent);
        outline-offset: 2px;
        box-shadow: none;
        padding-top: 2px;
        padding-bottom: 2px;
    }

    .document-text-block.is-selected .document-text-content,
    .document-text-block.is-selected .document-text-content:hover,
    .document-editor-page-sheet li.is-selected-list-item,
    .document-editor-page-sheet li.is-selected-list-item:hover {
        cursor: text;
        user-select: text;
    }

    .document-block [contenteditable="true"]:focus {
        outline: 2px solid var(--editor-accent);
        outline-offset: 2px;
    }

    .document-block .document-text-content[contenteditable="true"]:focus {
        outline: none !important;
    }

    .document-layout-break,
    .document-editor-page-transition,
    .document-editor-page-sheet li,
    .document-editor-page-sheet th,
    .document-editor-page-sheet td {
        user-select: none;
    }

    .document-editor-page-sheet table.is-selected th,
    .document-editor-page-sheet table.is-selected td,
    .document-editor-page-sheet ul.document-block.is-selected li,
    .document-editor-page-sheet ol.document-block.is-selected li {
        user-select: text;
    }

    .document-layout-break {
        position: relative;
        display: flex;
        align-items: center;
        gap: 6px;
        width: 100%;
        min-height: 10px;
        margin: 1px 0;
        padding: 0;
        border: 0;
        overflow: hidden;
        color: var(--editor-muted);
        font-size: 8px;
        font-style: italic;
        line-height: 1;
        text-transform: uppercase;
        z-index: 2;
    }

    .document-layout-break.column-break {
        display: flex;
    }

    .document-layout-break.page-break {
        column-span: all;
    }

    .document-editor-page-sheet .column-break-before {
        break-before: column;
        -webkit-column-break-before: always;
    }

    .document-layout-break::before,
    .document-layout-break::after {
        content: "";
        flex: 1;
        border-top: 1px dashed var(--editor-line);
    }

    .document-editor-panel {
        position: sticky;
        top: 18px;
        display: grid;
        gap: 0;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
    }

    .panel-section {
        display: grid;
        gap: 8px;
    }

    .panel-tabs {
        display: flex;
        align-items: end;
        gap: 4px;
        padding: 0 8px;
    }

    .panel-tab-button {
        position: relative;
        z-index: 1;
        min-height: 34px;
        border: 1px solid var(--editor-paper-edge);
        border-radius: 14px 14px 0 0;
        border-bottom-color: rgba(184, 144, 84, 0.36);
        background: var(--editor-modal-panel);
        color: var(--editor-panel-ink);
        box-shadow: 0 4px 14px var(--editor-shadow);
        cursor: pointer;
        font: inherit;
        padding: 7px 14px;
    }

    .panel-tab-button.is-active {
        z-index: 3;
        margin-bottom: -1px;
        border-color: var(--editor-paper-edge);
        border-bottom-color: var(--editor-panel);
        background: var(--editor-modal-panel);
        color: var(--editor-panel-ink);
        box-shadow: none;
    }

    .panel-tab-button:hover,
    .panel-tab-button:focus-visible {
        background: var(--editor-line);
        color: var(--editor-accent-ink);
        outline: 2px solid var(--editor-accent);
        outline-offset: 2px;
    }

    .panel-tab-button.is-active:hover,
    .panel-tab-button.is-active:focus-visible {
        background: var(--editor-panel-strong);
    }

    .panel-tab-panel {
        display: grid;
        gap: 14px;
        border: 1px solid var(--editor-paper-edge);
        border-radius: 8px;
        padding: 16px;
        background: var(--editor-panel);
        color: var(--editor-panel-ink);
        box-shadow: 0 18px 42px var(--editor-shadow);
    }

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

    .format-button-row,
    .table-button-row {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
    }

    .table-column-controls {
        display: grid;
        gap: 7px;
    }

    .table-column-controls:empty {
        display: none;
    }

    .table-column-widths {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
        gap: 7px;
    }

    .format-button,
    .compact-button {
        min-height: 30px;
        border: 1px solid var(--editor-paper-edge);
        border-radius: 6px;
        background: var(--editor-panel-strong);
        color: var(--editor-panel-ink);
        cursor: pointer;
        font: inherit;
        padding: 5px 8px;
    }

    .format-button:hover,
    .format-button:focus-visible,
    .compact-button:hover,
    .compact-button:focus-visible {
        background: var(--editor-line);
        color: var(--editor-accent-ink);
        outline: 2px solid var(--editor-accent);
        outline-offset: 2px;
    }

    .compact-button.danger {
        border-color: #9f3f3f;
        background: rgba(159, 63, 63, 0.16);
        color: var(--editor-panel-ink);
    }

    .compact-button.danger:hover,
    .compact-button.danger:focus-visible {
        background: #9f3f3f;
        color: #fff7ed;
    }

    .block-control-grid {
        display: grid;
        gap: 9px;
    }

    .block-control {
        display: grid;
        gap: 4px;
        color: var(--editor-panel-muted);
        font-size: 0.88rem;
    }

    .block-control.checkbox-control {
        grid-template-columns: auto 1fr;
        align-items: center;
        gap: 8px;
        color: var(--editor-panel-ink);
    }

    .block-control input,
    .block-control select {
        width: 100%;
        box-sizing: border-box;
        min-height: 31px;
        border: 1px solid var(--editor-paper-edge);
        border-radius: 6px;
        background: var(--editor-input);
        color: var(--editor-input-ink);
        font: inherit;
        padding: 5px 7px;
    }

    .block-control input[type="checkbox"] {
        width: auto;
        min-height: auto;
    }

    .block-control input:focus,
    .block-control select:focus {
        outline: 2px solid var(--editor-accent);
        outline-offset: 2px;
    }

    .panel-section h2 {
        margin: 0;
        color: var(--editor-panel-ink);
        font-size: 0.95rem;
        text-transform: uppercase;
    }

    .selected-block-meta {
        display: grid;
        gap: 6px;
        color: var(--editor-panel-muted);
        font-size: 0.9rem;
    }

    .selected-block-meta strong {
        color: var(--editor-panel-ink);
    }

    .selected-text-editor {
        box-sizing: border-box;
        width: 100%;
        min-height: 180px;
        resize: vertical;
        border: 1px solid var(--editor-paper-edge);
        border-radius: 6px;
        background: var(--editor-input);
        color: var(--editor-input-ink);
        font: inherit;
        line-height: 1.35;
        padding: 9px;
    }

    .selected-text-editor:focus {
        outline: 2px solid var(--editor-accent);
        outline-offset: 2px;
    }

    .empty-selection {
        margin: 0;
        color: var(--editor-panel-muted);
    }

    @media (max-width: 1050px) {
        .document-editor-workspace {
            grid-template-columns: 1fr;
        }

        .document-editor-panel {
            position: static;
        }

        .document-editor-shell {
            max-height: none;
        }
    }

    @media (max-width: 760px) {
        .document-editor-page {
            padding: 10px;
        }

        .document-editor-toolbar {
            align-items: flex-start;
            flex-direction: column;
        }

        .document-editor-surface {
            width: 100%;
        }

        .document-editor-page-sheet {
            width: 100%;
            min-height: 297mm;
            height: auto;
            max-height: none;
            padding: 28px 22px;
            column-count: 1;
        }
    }