@layer base, layout, ui, components;

@layer base {
  :root {
    --font-latin: "Times New Roman", Times, serif;
    --font-cjk-body: SimSun, "宋体", STSong, "Songti SC", serif;
    --font-cjk-heading: SimHei, "黑体", "Microsoft YaHei", "Heiti SC", sans-serif;
    --font-body: var(--font-latin), var(--font-cjk-body);
    --font-heading: var(--font-latin), var(--font-cjk-heading);
    --font-ui: "Courier New", Courier, monospace;
    --paper: #fff;
    --paper-deep: #e6e6e6;
    --ink: #000;
    --muted: #555;
    --rule: #000;
    --accent: #000;
    --kicker: #000;
    --status: #000;
    --surface: #fff;
    --surface-soft: #fafafa;
    --surface-muted: #f2f2f2;
    --inverse: #000;
    --inverse-ink: #fff;
    --shell-max: 96rem;
  }

  * {
    box-sizing: border-box;
  }

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

  body {
    margin: 0;
    padding: 0 1rem;
    font-family: var(--font-body);
    font-size: 17px;
    line-height: 1.45;
    letter-spacing: 0;
    background: var(--paper);
  }

  a {
    color: var(--accent);
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
  }

  h1,
  h2,
  h3 {
    font-family: var(--font-heading);
    margin: 0 0 .5rem;
    line-height: 1.05;
    letter-spacing: 0;
  }

  h1 {
    font-size: clamp(2.2rem, 8vw, 4.6rem);
    font-weight: 700;
  }

  code,
  pre,
  input,
  textarea,
  button,
  .site-nav,
  .section-nav,
  .edition-line,
  .post-meta,
  .kicker,
  .tag-list,
  .post-list time,
  .right-rail,
  .site-footer {
    font-family: var(--font-ui);
  }

  img {
    max-width: 100%;
    height: auto;
  }
}

@layer layout {
  .site-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 15rem;
    grid-template-rows: auto auto auto auto auto;
    grid-template-areas:
      "header header"
      "hero hero"
      "nav nav"
      "main side"
      "footer footer";
    width: min(100%, var(--shell-max));
    margin-inline: auto;
    align-content: start;
    border: 1px solid var(--rule);
    border-bottom: 0;
    background: var(--surface);
  }

  .right-rail {
    padding: 1rem;
    border-color: var(--rule);
    background: var(--surface);
  }

  .right-rail {
    grid-area: side;
    border-left: 1px solid var(--rule);
  }

  .site-footer {
    grid-area: footer;
  }

  .main-column {
    grid-area: main;
    padding: 1rem 1.25rem 4rem;
    max-width: none;
    width: 100%;
  }

  @media (max-width: 920px) {
    body {
      padding: 0;
    }

    .site-shell {
      display: block;
      border: 0;
    }

    .right-rail {
      border: 0;
      border-bottom: 1px solid var(--rule);
    }

    .right-rail {
      border-top: 1px solid var(--rule);
    }
  }
}

@layer ui {
  .ui-button,
  .ui-button:visited,
  .ui-status {
    min-height: 2rem;
    border: 1px solid var(--rule);
    background: var(--surface);
    color: var(--ink);
    font-family: var(--font-ui);
    font-size: .8rem;
    line-height: 1.2;
  }

  .ui-button {
    display: inline-flex;
    gap: .35rem;
    align-items: center;
    justify-content: center;
    padding: .42rem .7rem;
    border-radius: 0;
    cursor: pointer;
    text-decoration: none;
  }

  .ui-button.is-disabled {
    opacity: .42;
    cursor: default;
    pointer-events: none;
  }

  .ui-button--primary {
    background: var(--inverse);
    color: var(--inverse-ink);
  }

  .ui-button--ghost {
    background: var(--surface-muted);
  }

  .ui-button--danger {
    background: var(--surface);
    color: var(--ink);
    text-decoration: underline;
    text-underline-offset: 2px;
  }

  .ui-status {
    display: inline-flex;
    align-items: center;
    padding: .35rem .55rem;
    white-space: nowrap;
  }

  .ui-status:empty {
    display: none;
  }

  .ui-panel {
    min-width: 0;
    border: 1px solid var(--rule);
    background: var(--surface-soft);
  }

  .ui-panel__head {
    display: flex;
    justify-content: space-between;
    gap: .5rem;
    align-items: center;
    padding: .5rem;
    border-bottom: 1px solid var(--rule);
    font-family: var(--font-ui);
  }

  .ui-panel__head h2 {
    margin: 0;
    color: var(--muted);
    font-size: .8rem;
    text-transform: uppercase;
  }

  .ui-field {
    display: grid;
    gap: .2rem;
    padding: .45rem .5rem;
    border-bottom: 1px solid rgba(0, 0, 0, .22);
    font-family: var(--font-ui);
    font-size: .78rem;
  }

  .ui-field span,
  .ui-check span {
    color: var(--muted);
  }

  .ui-check {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: .45rem;
    align-items: center;
    padding: .45rem .5rem;
    border-bottom: 1px solid rgba(0, 0, 0, .22);
    font-family: var(--font-ui);
    font-size: .78rem;
  }

  .ui-input,
  .ui-textarea {
    border: 1px solid var(--rule);
    border-radius: 0;
    background: var(--surface);
    color: var(--ink);
    font: inherit;
  }

  .ui-input:not([type="checkbox"]),
  .ui-textarea {
    width: 100%;
    padding: .45rem;
  }

  .ui-textarea {
    resize: vertical;
  }

  .ui-file-drop {
    position: relative;
    display: grid;
    width: 100%;
    min-height: 5.25rem;
    align-content: center;
    gap: .35rem;
    padding: .85rem 1rem;
    border: 1px dashed var(--rule);
    background: var(--surface);
    color: var(--ink);
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease, box-shadow .15s ease;
  }

  .ui-file-drop:hover,
  .ui-file-drop:focus-within,
  .ui-file-drop.is-dragover {
    background: var(--inverse);
    color: var(--inverse-ink);
    box-shadow: inset 0 0 0 1px var(--inverse);
  }

  .ui-file-drop__input {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .ui-file-drop__title,
  .ui-file-drop__meta,
  .ui-file-drop__name {
    display: block;
    color: inherit;
    font-family: var(--font-ui);
  }

  .ui-file-drop__title {
    font-size: .86rem;
    font-weight: 700;
    line-height: 1.25;
    text-transform: uppercase;
  }

  .ui-file-drop__meta,
  .ui-file-drop__name {
    font-size: .72rem;
    line-height: 1.35;
    opacity: .72;
  }

  .ui-file-drop__name:empty {
    display: none;
  }

  .ui-file-drop--compact {
    min-height: 4rem;
    padding: .65rem .75rem;
  }

  .ui-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem;
    align-items: center;
    padding: .4rem;
    border-bottom: 1px solid var(--rule);
    background: var(--surface-muted);
  }

  .ui-toolbar .ui-button {
    min-width: 2rem;
    min-height: 2rem;
    padding: .25rem .45rem;
    font-size: .78rem;
  }

  .ui-toolbar .ui-button.is-active {
    background: var(--inverse);
    color: var(--inverse-ink);
  }

  .ui-separator {
    width: 1px;
    height: 1.6rem;
    margin-inline: .2rem;
    background: var(--rule);
  }

  .ui-list-button {
    display: grid;
    gap: .15rem;
    width: 100%;
    padding: .55rem .5rem;
    border: 0;
    border-bottom: 1px solid rgba(0, 0, 0, .35);
    background: transparent;
    text-align: left;
  }

  .ui-list-button:hover,
  .ui-list-button.is-active {
    background: rgba(0, 0, 0, .08);
  }

  .ui-list-button strong {
    overflow: hidden;
    font-family: var(--font-body);
    font-size: .95rem;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .ui-list-button span {
    color: var(--muted);
    font-size: .72rem;
  }

  .ui-media-button {
    aspect-ratio: 1;
    padding: 0;
    overflow: hidden;
    background: var(--surface);
  }

  .ui-media-button img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .ui-media-button__file {
    display: grid;
    width: 100%;
    height: 100%;
    place-items: center;
    padding: .35rem;
    color: var(--ink);
    font-family: var(--font-ui);
    font-size: .72rem;
    font-weight: 700;
    overflow-wrap: anywhere;
    text-align: center;
  }
}

@layer components {
  .login-page {
    display: grid;
    min-height: 100vh;
    place-items: center;
    padding: 1rem;
  }

  .login-card {
    display: grid;
    gap: .75rem;
    width: min(100%, 24rem);
    border: 1px solid var(--rule);
    padding: 1rem;
    background: var(--surface);
  }

  .login-card h1 {
    margin: 0;
    font-size: 2rem;
  }

  .login-error {
    margin: 0;
    border: 1px solid var(--rule);
    padding: .45rem .55rem;
    background: var(--surface-muted);
    font-family: var(--font-ui);
    font-size: .82rem;
  }

  .admin-shell {
    display: grid;
    grid-template-columns: 13rem minmax(0, 1fr);
    min-height: 100vh;
    width: min(100%, var(--shell-max));
    margin-inline: auto;
    border-inline: 1px solid var(--rule);
    background: var(--surface);
  }

  .admin-sidebar {
    display: grid;
    grid-template-rows: auto 1fr auto;
    border-right: 1px solid var(--rule);
    background: var(--surface-muted);
  }

  .admin-brand {
    display: block;
    padding: .8rem .75rem;
    border-bottom: 3px double var(--rule);
    color: var(--ink);
    font-family: var(--font-heading);
    font-size: 1.35rem;
    font-weight: 700;
    text-decoration: none;
  }

  .admin-nav,
  .admin-sidebar-footer {
    display: grid;
    align-content: start;
    font-family: var(--font-ui);
    font-size: .82rem;
    text-transform: uppercase;
  }

  .admin-nav a,
  .admin-sidebar-footer a {
    padding: .62rem .75rem;
    border-bottom: 1px solid rgba(0, 0, 0, .35);
    color: var(--ink);
    text-decoration: none;
  }

  .admin-nav a.is-active {
    background: var(--inverse);
    color: var(--inverse-ink);
  }

  .admin-nav-sub {
    display: grid;
    margin-left: .75rem;
    border-left: 1px solid rgba(0, 0, 0, .28);
  }

  .admin-nav .admin-nav-sub a {
    padding: .48rem .75rem;
    font-size: .72rem;
  }

  .admin-sidebar-footer {
    border-top: 1px solid var(--rule);
  }

  .admin-main {
    min-width: 0;
    padding: 1rem;
  }

  .admin-main:has(.editor-shell) {
    min-height: calc(100vh - 2rem);
  }

  .admin-page-header {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: end;
    margin-bottom: 1rem;
    padding-bottom: .75rem;
    border-bottom: 3px double var(--rule);
  }

  .admin-page-header h1 {
    margin: 0;
    font-size: 2.2rem;
  }

  .admin-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .75rem;
    margin-bottom: .75rem;
  }

  .stat-card strong {
    display: block;
    padding: .75rem;
    font-size: 2rem;
    line-height: 1;
  }

  .admin-panel {
    margin-bottom: .75rem;
  }

  .admin-login-notice {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem;
    margin-bottom: .75rem;
    padding: .75rem;
    font-family: var(--font-ui);
  }

  .admin-login-notice div {
    display: grid;
    gap: .25rem;
    min-width: 0;
  }

  .admin-login-notice span {
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
  }

  .admin-login-notice strong {
    overflow-wrap: anywhere;
    font-size: .95rem;
  }

  .admin-panel-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    align-items: center;
    justify-content: end;
  }

  .admin-table-list {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .admin-table-list li {
    display: grid;
    grid-template-columns: minmax(12rem, 1fr) minmax(8rem, .7fr) 7rem 6rem;
    gap: .75rem;
    align-items: baseline;
    padding: .5rem .6rem;
    border-bottom: 1px solid rgba(0, 0, 0, .35);
    font-family: var(--font-ui);
    font-size: .82rem;
  }

  .admin-table-list a {
    color: var(--ink);
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 700;
  }

  .admin-table-scroll {
    width: 100%;
    overflow-x: auto;
  }

  .admin-data-table {
    width: 100%;
    min-width: 58rem;
    border-collapse: collapse;
    table-layout: fixed;
    font-family: var(--font-ui);
    font-size: .82rem;
    line-height: 1.25;
  }

  .admin-data-table th,
  .admin-data-table td {
    padding: .55rem .65rem;
    border-bottom: 1px solid rgba(0, 0, 0, .35);
    text-align: left;
    vertical-align: baseline;
  }

  .admin-data-table th {
    border-bottom: 2px solid var(--rule);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    white-space: nowrap;
  }

  .admin-data-table tbody tr:hover {
    background: var(--surface-soft);
  }

  .admin-post-table__title a {
    color: var(--ink);
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 700;
  }

  .admin-post-col-title {
    width: 32%;
  }

  .admin-post-col-slug {
    width: 22%;
  }

  .admin-post-col-date,
  .admin-post-col-updated {
    width: 10.5rem;
  }

  .admin-post-col-status {
    width: 7.25rem;
  }

  .admin-post-col-actions {
    width: 9.5rem;
  }

  .admin-post-table__title,
  .admin-post-table__slug {
    overflow-wrap: anywhere;
  }

  .admin-post-table__slug code {
    font-family: var(--font-ui);
    font-size: .78rem;
  }

  .admin-post-table__date,
  .admin-post-table__updated,
  .admin-post-table__date time,
  .admin-post-table__updated time {
    white-space: nowrap;
  }

  .admin-status-pill {
    display: inline-block;
    min-width: 5.5rem;
    padding: .12rem .45rem;
    border: 1px solid var(--rule);
    text-align: center;
    white-space: nowrap;
  }

  .admin-status-pill--published {
    background: var(--inverse);
    color: var(--inverse-ink);
  }

  .admin-table-actions {
    white-space: nowrap;
  }

  .admin-table-actions a,
  .admin-inline-delete__button {
    color: var(--ink);
    font-family: var(--font-ui);
    font-size: .76rem;
    font-weight: 400;
    line-height: 1;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
  }

  .admin-inline-delete {
    display: inline;
    margin: 0;
  }

  .admin-inline-delete__button {
    all: unset;
    display: inline;
    color: var(--ink);
    font-family: var(--font-ui);
    font-size: .76rem;
    font-weight: 400;
    line-height: 1;
    cursor: pointer;
    text-decoration-line: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
  }

  .admin-table-actions > * + * {
    margin-left: .45rem;
  }

  .admin-table-muted {
    color: var(--muted);
  }

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

  .admin-error {
    margin: 0;
    padding: .75rem;
    color: var(--ink);
    font-family: var(--font-ui);
    font-size: .82rem;
  }

  .admin-comment-list {
    display: grid;
    gap: .75rem;
    padding: .75rem;
  }

  .admin-comment-card {
    display: grid;
    gap: .55rem;
    border: 1px solid var(--rule);
    background: var(--surface);
  }

  .admin-comment-card__head {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    align-items: baseline;
    justify-content: space-between;
    padding: .55rem .65rem;
    border-bottom: 1px solid var(--rule);
    font-family: var(--font-ui);
    font-size: .8rem;
  }

  .admin-comment-card__head div {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .admin-comment-card__head time,
  .admin-comment-card__post {
    color: var(--muted);
  }

  .admin-comment-card__post,
  .admin-comment-card__body,
  .admin-comment-card__reply,
  .admin-comment-reply-form {
    margin: 0;
    padding: 0 .65rem .65rem;
  }

  .admin-comment-card__post {
    font-family: var(--font-ui);
    font-size: .78rem;
  }

  .admin-comment-card__body,
  .admin-comment-card__reply p {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
  }

  .admin-comment-card__reply {
    display: grid;
    gap: .25rem;
    margin-inline: .65rem;
    padding: .55rem .65rem;
    border: 1px solid rgba(0, 0, 0, .35);
    background: var(--surface-muted);
    font-family: var(--font-ui);
    font-size: .8rem;
  }

  .admin-comment-card__reply p {
    margin: 0;
    font-family: var(--font-body);
    font-size: .94rem;
  }

  .admin-comment-card__reply time {
    color: var(--muted);
    font-size: .72rem;
  }

  .admin-comment-reply-form {
    display: grid;
    gap: .55rem;
  }

  .admin-comment-reply-form .ui-field {
    padding: 0;
    border-bottom: 0;
  }

  .admin-pagination {
    display: flex;
    flex-wrap: wrap;
    gap: .65rem;
    align-items: center;
    justify-content: space-between;
    padding: .65rem;
    border-top: 1px solid var(--rule);
    background: var(--surface-muted);
    font-family: var(--font-ui);
    font-size: .78rem;
  }

  .admin-pagination__summary {
    color: var(--muted);
    white-space: nowrap;
  }

  .admin-pagination__links {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem;
    align-items: center;
    justify-content: flex-end;
  }

  .admin-pagination__links .ui-button {
    min-width: 2.1rem;
    min-height: 1.9rem;
    padding: .25rem .5rem;
  }

  .settings-form {
    display: grid;
    gap: .75rem;
    padding: .75rem;
  }

  .settings-form-note {
    margin: 0;
    color: var(--muted);
    font-family: var(--font-ui);
    font-size: .78rem;
    line-height: 1.35;
  }

  .settings-readonly-row {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem .75rem;
    align-items: center;
    justify-content: space-between;
    padding: .65rem .75rem;
    border: 1px solid var(--rule);
    background: var(--surface-muted);
    font-family: var(--font-ui);
    font-size: .86rem;
  }

  .settings-readonly-row span {
    color: var(--muted);
  }

  .settings-readonly-row strong {
    color: var(--ink);
    font-family: var(--font-mono);
    font-size: .9rem;
  }

  .changelog-list {
    display: grid;
    gap: .75rem;
  }

  .changelog-release {
    border: 1px solid var(--rule);
    background: var(--surface);
  }

  .changelog-release__head {
    display: flex;
    gap: .75rem;
    align-items: center;
    justify-content: space-between;
    padding: .7rem .75rem;
    border-bottom: 1px solid var(--rule);
    font-family: var(--font-ui);
  }

  .changelog-release__head h3 {
    margin: 0;
    font-size: .95rem;
    line-height: 1.2;
  }

  .changelog-release__head span {
    display: block;
    margin-top: .15rem;
    color: var(--muted);
    font-size: .76rem;
  }

  .changelog-release__head strong {
    color: var(--accent);
    font-size: .76rem;
    text-transform: uppercase;
  }

  .changelog-items {
    display: grid;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .changelog-items li {
    display: grid;
    grid-template-columns: 5rem minmax(0, 1fr) auto;
    gap: .65rem;
    align-items: start;
    padding: .6rem .75rem;
    border-top: 1px solid var(--rule-soft);
    font-size: .86rem;
    line-height: 1.35;
  }

  .changelog-items li:first-child {
    border-top: 0;
  }

  .changelog-items code {
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: .78rem;
  }

  .changelog-items time {
    color: var(--muted);
    font-family: var(--font-ui);
    font-size: .76rem;
    white-space: nowrap;
  }

  .settings-range-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 5.25rem;
    gap: .6rem;
    align-items: center;
  }

  .ui-range {
    width: 100%;
    accent-color: var(--ink);
  }

  .settings-number-input {
    text-align: right;
  }

  .settings-home-image {
    display: block;
    width: 100%;
    max-height: 12rem;
    object-fit: cover;
    border: 1px solid var(--rule);
  }

  .settings-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    align-items: center;
  }

  .permalink-settings-list {
    display: grid;
    gap: 1rem;
  }

  .permalink-preset-list {
    display: grid;
    gap: .65rem;
    margin: 0;
    padding: 0;
    border: 0;
  }

  .permalink-preset-list legend {
    margin-bottom: .15rem;
    font-family: var(--font-ui);
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
  }

  .permalink-preset {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: .55rem;
    align-items: start;
    font-family: var(--font-ui);
  }

  .permalink-preset input {
    margin-top: .15rem;
  }

  .permalink-preset span {
    display: grid;
    gap: .22rem;
    min-width: 0;
  }

  .permalink-preset code {
    width: fit-content;
    max-width: 100%;
    padding: .18rem .35rem;
    background: var(--surface-soft);
    font-family: var(--font-mono);
    font-size: .78rem;
    font-weight: 400;
    overflow-wrap: anywhere;
  }

  .permalink-preview {
    display: inline-block;
    width: fit-content;
    max-width: 100%;
    margin-top: .4rem;
    padding: .22rem .38rem;
    background: var(--surface-soft);
    color: var(--ink);
    font-family: var(--font-mono);
    font-size: .78rem;
    overflow-wrap: anywhere;
  }

  .permalink-token-list {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
  }

  .permalink-token {
    font-family: var(--font-mono);
  }

  .theme-settings-panel {
    padding: .75rem;
  }

  .theme-settings-panel h2,
  .theme-settings-panel h3 {
    font-family: var(--font-ui);
    font-size: .9rem;
    text-transform: uppercase;
  }

  .theme-settings-copy p {
    margin: 0 0 .75rem;
    color: var(--muted);
    font-family: var(--font-ui);
    font-size: .78rem;
  }

  .theme-settings-layout {
    display: grid;
    grid-template-columns: minmax(14rem, .7fr) minmax(0, 1fr);
    gap: .75rem;
    align-items: start;
  }

  .theme-settings-section {
    min-width: 0;
    border: 1px solid var(--rule);
    background: var(--surface);
  }

  .theme-settings-section h3 {
    margin: 0;
    padding: .55rem .65rem;
    border-bottom: 1px solid var(--rule);
  }

  .theme-settings-section__head {
    display: flex;
    gap: .5rem;
    align-items: center;
    justify-content: space-between;
    min-height: 3.2rem;
    padding: .55rem .65rem;
    border-bottom: 1px solid var(--rule);
  }

  .theme-settings-section__head h3 {
    border-bottom: 0;
    padding: 0;
  }

  .theme-settings-section__head .ui-button {
    min-height: 2.35rem;
    margin: 0;
    padding: .55rem .85rem;
  }

  .theme-location-list,
  .theme-menu-list,
  .theme-menu-items {
    display: grid;
  }

  .theme-location-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(9rem, .55fr);
    gap: .6rem;
    align-items: center;
    padding: .6rem .65rem;
    border-bottom: 1px solid rgba(0, 0, 0, .28);
  }

  .theme-location-row:last-child,
  .theme-menu-card:last-child {
    border-bottom: 0;
  }

  .theme-location-row__copy,
  .theme-location-row__copy span {
    display: grid;
    gap: .12rem;
    min-width: 0;
  }

  .theme-location-row__copy {
    font-family: var(--font-ui);
    font-size: .82rem;
  }

  .theme-location-row__copy span {
    color: var(--muted);
    font-size: .75rem;
  }

  .theme-settings-empty {
    margin: 0;
    padding: .7rem .65rem;
    color: var(--muted);
    font-family: var(--font-ui);
    font-size: .8rem;
  }

  .theme-menu-card {
    display: grid;
    gap: .55rem;
    padding: .65rem;
    border-bottom: 1px solid var(--rule);
  }

  .theme-menu-card__head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: .5rem;
    align-items: center;
  }

  .theme-menu-items {
    gap: .4rem;
  }

  .theme-menu-item {
    display: grid;
    grid-template-columns: 8rem minmax(7rem, 1fr) minmax(9rem, 1.2fr) auto;
    gap: .4rem;
    align-items: center;
  }

  .theme-settings-actions {
    margin-top: .75rem;
  }

  .menu-builder-panel {
    padding: 0;
  }

  .menu-selector-bar {
    display: grid;
    grid-template-columns: auto minmax(12rem, 22rem) auto auto minmax(12rem, 1fr);
    gap: .55rem;
    align-items: center;
    padding: .75rem;
    border-bottom: 1px solid var(--rule);
    background: var(--surface);
    font-family: var(--font-ui);
    font-size: .82rem;
  }

  .menu-builder-layout {
    display: grid;
    grid-template-columns: minmax(14rem, 22rem) minmax(0, 1fr);
    gap: 1rem;
    padding: 1rem;
    align-items: start;
  }

  .menu-add-panel h2,
  .menu-structure-panel h2 {
    margin: 0 0 .8rem;
    font-family: var(--font-heading);
    font-size: 1.25rem;
    text-transform: none;
  }

  .menu-source-panels {
    display: grid;
    border: 1px solid var(--rule);
    background: var(--surface);
  }

  .menu-source-panel {
    border-bottom: 1px solid rgba(0, 0, 0, .3);
  }

  .menu-source-panel:last-child {
    border-bottom: 0;
  }

  .menu-source-panel__head {
    all: unset;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    gap: .75rem;
    align-items: center;
    width: 100%;
    padding: .75rem .85rem;
    cursor: pointer;
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 700;
  }

  .menu-source-panel__indicator {
    width: 0;
    height: 0;
    border-right: .28rem solid transparent;
    border-left: .28rem solid transparent;
    border-bottom: .42rem solid var(--muted);
  }

  .menu-source-panel.is-collapsed .menu-source-panel__indicator {
    border-top: .42rem solid var(--muted);
    border-bottom: 0;
  }

  .menu-source-panel__body {
    display: grid;
    gap: .6rem;
    padding: .75rem;
    border-top: 1px solid rgba(0, 0, 0, .2);
    background: var(--surface-soft);
  }

  .menu-source-panel.is-collapsed .menu-source-panel__body {
    display: none;
  }

  .menu-source-list {
    display: grid;
    max-height: 10rem;
    overflow: auto;
    border: 1px solid rgba(0, 0, 0, .28);
    background: var(--surface);
  }

  .menu-source-option {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: .45rem;
    align-items: center;
    padding: .45rem .55rem;
    border-bottom: 1px solid rgba(0, 0, 0, .16);
    font-family: var(--font-ui);
    font-size: .82rem;
  }

  .menu-source-option:last-child {
    border-bottom: 0;
  }

  .menu-structure-panel {
    border: 1px solid var(--rule);
    background: var(--surface);
  }

  .menu-structure-head {
    display: flex;
    justify-content: space-between;
    gap: .75rem;
    align-items: center;
    padding: .75rem;
    border-bottom: 1px solid rgba(0, 0, 0, .25);
  }

  .menu-structure-head h2 {
    margin: 0;
  }

  .menu-name-row {
    display: grid;
    grid-template-columns: auto minmax(12rem, 22rem);
    gap: .6rem;
    align-items: center;
    padding: .75rem;
    border-bottom: 1px solid rgba(0, 0, 0, .22);
    font-family: var(--font-ui);
    font-size: .82rem;
  }

  .menu-structure-list {
    display: grid;
    gap: .55rem;
    min-height: 8rem;
    padding: .75rem;
    background: var(--surface-soft);
  }

  .menu-structure-item {
    border: 1px solid rgba(0, 0, 0, .3);
    background: var(--surface);
  }

  .menu-structure-item__head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: .65rem;
    align-items: center;
    padding: .65rem .75rem;
    font-family: var(--font-ui);
    font-size: .82rem;
  }

  .menu-structure-item__head strong {
    overflow-wrap: anywhere;
    font-family: var(--font-heading);
    font-size: 1rem;
  }

  .menu-structure-item__head span {
    color: var(--muted);
  }

  .menu-structure-item__tools {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    justify-content: end;
  }

  .menu-structure-item__fields {
    display: grid;
    grid-template-columns: minmax(8rem, 1fr) minmax(10rem, 1.2fr);
    gap: .55rem;
    padding: .65rem .75rem;
    border-top: 1px solid rgba(0, 0, 0, .18);
    background: var(--surface-soft);
  }

  .menu-structure-panel .theme-settings-actions {
    padding: .75rem;
    border-top: 1px solid rgba(0, 0, 0, .22);
  }

  .home-image-tools {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    align-items: center;
  }

  .media-picker-modal {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: grid;
    place-items: center;
    padding: 1rem;
    background: rgba(255, 255, 255, .86);
  }

  .has-open-modal {
    overflow: hidden;
  }

  .media-picker-panel {
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    width: min(100%, 62rem);
    max-height: min(44rem, calc(100vh - 2rem));
    border: 2px solid var(--rule);
    background: var(--surface);
    box-shadow: 0 0 0 1px #fff, 0 0 0 4px var(--rule);
  }

  .media-picker-header,
  .media-picker-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    align-items: center;
    justify-content: space-between;
    padding: .65rem .75rem;
    border-bottom: 1px solid var(--rule);
  }

  .media-picker-header h2 {
    margin: 0;
    font-size: 1.25rem;
  }

  .media-picker-status {
    min-height: 2rem;
    margin: 0;
    padding: .45rem .75rem;
    border-bottom: 1px solid rgba(0, 0, 0, .22);
    color: var(--muted);
    font-family: var(--font-ui);
    font-size: .78rem;
  }

  .media-picker-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
    gap: .5rem;
    min-height: 12rem;
    padding: .75rem;
    overflow: auto;
  }

  .media-picker-item {
    position: relative;
    display: grid;
    gap: .4rem;
    min-width: 0;
    padding: .35rem;
    border-width: 1px;
    text-align: left;
  }

  .media-picker-item:hover {
    background: var(--surface-muted);
  }

  .media-picker-item.is-selected {
    border-width: 2px;
    background: var(--inverse);
    color: var(--inverse-ink);
    box-shadow: inset 0 0 0 2px var(--surface);
  }

  .media-picker-item__mark {
    position: absolute;
    top: .55rem;
    right: .55rem;
    z-index: 1;
    display: none;
    max-width: calc(100% - 1.1rem);
    padding: .12rem .35rem;
    border: 1px solid currentColor;
    background: var(--surface);
    color: var(--ink);
    font-family: var(--font-ui);
    font-size: .62rem;
    font-weight: 700;
    line-height: 1.2;
    text-transform: uppercase;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .media-picker-item.is-selected .media-picker-item__mark {
    display: block;
  }

  .media-picker-item img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border: 1px solid currentColor;
    background: var(--surface-muted);
  }

  .media-picker-item__text {
    display: grid;
    gap: .1rem;
    min-width: 0;
    color: inherit;
    font-family: var(--font-ui);
  }

  .media-picker-item__text strong,
  .media-picker-item__text span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .media-picker-item__text strong {
    font-size: .78rem;
  }

  .media-picker-item__text span {
    font-size: .68rem;
    opacity: .74;
  }

  .media-picker-actions {
    justify-content: flex-end;
    border-top: 1px solid var(--rule);
    border-bottom: 0;
  }

  .media-picker-selected {
    flex: 1 1 12rem;
    min-width: 0;
    color: var(--muted);
    font-family: var(--font-ui);
    font-size: .78rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .appearance-panel {
    display: grid;
    gap: 1rem;
  }

  .appearance-settings-stack {
    display: grid;
    gap: 1rem;
  }

  .appearance-copy {
    margin: 0;
    padding: 0 .75rem;
    color: var(--muted);
    font-size: .92rem;
    line-height: 1.7;
  }

  .appearance-form,
  .pack-upload-panel {
    display: grid;
    gap: 1rem;
    padding: 0 .75rem .75rem;
  }

  .pack-section {
    display: grid;
    gap: .75rem;
  }

  .pack-section__head {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: .75rem;
    align-items: center;
  }

  .pack-section__head h3 {
    margin: 0;
    font-size: 1.2rem;
  }

  .pack-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
  }

  .pack-card {
    position: relative;
    display: block;
    min-height: 13rem;
    border: 1px solid rgba(0, 0, 0, .28);
    background: #f8f8f6;
    color: var(--ink);
    cursor: pointer;
    transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease, color .18s ease, transform .18s ease;
  }

  .pack-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .08);
  }

  .pack-card:focus-visible {
    outline: 2px solid var(--ink);
    outline-offset: 2px;
  }

  .pack-card.is-selected {
    border-color: #000;
    border-width: 2px;
    background: #f8f8f6;
    color: var(--ink);
    box-shadow: 0 0 0 1px #000 inset;
  }

  .pack-card__radio {
    display: none;
  }

  .pack-card__content {
    display: grid;
    gap: .75rem;
    height: 100%;
    padding: 1rem 1rem 1.1rem;
  }

  .pack-card__top {
    display: grid;
    gap: .5rem;
    align-items: start;
  }

  .pack-card__title-row {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    align-items: baseline;
  }

  .pack-card__title-row strong {
    min-width: 0;
    font-size: 1.7rem;
    line-height: 1.15;
    overflow-wrap: anywhere;
  }

  /* 下划线只标记当前已经应用到站点的主题，区别于临时点选的卡片边框。 */
  .pack-card.is-current .pack-card__title-row strong {
    text-decoration-line: underline;
    text-decoration-thickness: 1px;
    text-decoration-color: #000;
    text-underline-offset: .24rem;
  }

  .pack-version-badge {
    display: inline-flex;
    align-items: center;
    translate: 0 -.08rem;
    padding: .08rem .35rem;
    border: 1px solid rgba(0, 0, 0, .34);
    background: #fff;
    font-family: var(--font-ui);
    font-size: .64rem;
    line-height: 1.2;
    white-space: nowrap;
  }

  .pack-card__badges {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
  }

  .pack-badge {
    display: inline-flex;
    align-items: center;
    padding: .12rem .4rem;
    border: 1px solid var(--rule);
    background: #fff;
    font-family: var(--font-ui);
    font-size: .7rem;
    letter-spacing: .04em;
    text-transform: uppercase;
  }

  .pack-card__description {
    min-height: 3.8rem;
    color: var(--muted);
    font-size: 1rem;
    line-height: 1.65;
  }

  .pack-card__meta {
    display: block;
    padding-top: .65rem;
    border-top: 1px solid rgba(0, 0, 0, .15);
    font-family: var(--font-ui);
    font-size: .82rem;
    line-height: 1.65;
  }

  .pack-card.is-selected .pack-card__description,
  .pack-card.is-selected .pack-card__meta {
    color: var(--muted);
  }

  .pack-card.is-selected .pack-card__meta {
    border-top-color: rgba(0, 0, 0, .18);
  }

  .pack-card.is-selected .pack-badge {
    border-color: #000;
    background: #fff;
    color: #000;
  }

  .pack-card.is-selected .pack-version-badge {
    border-color: #000;
  }

  .pack-upload-row {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    align-items: center;
  }

  .pack-upload-row .ui-file-drop {
    flex: 1 1 18rem;
  }

  .local-pack-box {
    display: grid;
    gap: .65rem;
    padding: .75rem;
    border: 1px solid rgba(0, 0, 0, .38);
    background: #fff;
  }

  .local-pack-box__head {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: .5rem .75rem;
    align-items: baseline;
    padding-bottom: .55rem;
    border-bottom: 1px solid rgba(0, 0, 0, .22);
  }

  .local-pack-box__head h4 {
    margin: 0;
    font-size: 1.05rem;
    line-height: 1.2;
  }

  .local-pack-list {
    display: grid;
    gap: .5rem;
  }

  .local-pack-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: .75rem;
    align-items: center;
    min-height: 3rem;
    padding: .55rem .65rem;
    border: 1px solid rgba(0, 0, 0, .2);
    background: #f8f8f6;
  }

  .local-pack-item__copy {
    display: grid;
    gap: .18rem;
    min-width: 0;
  }

  .local-pack-item__copy strong {
    font-size: 1rem;
    line-height: 1.2;
    overflow-wrap: anywhere;
  }

  .local-pack-item__copy span,
  .local-pack-empty {
    color: var(--muted);
    font-family: var(--font-ui);
    font-size: .8rem;
    line-height: 1.45;
  }

  .local-pack-empty {
    margin: 0;
    padding: .45rem 0;
  }

  .local-pack-delete {
    min-width: 4rem;
    white-space: nowrap;
  }

  .locale-grid {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
  }

  .locale-card {
    position: relative;
    min-width: 10rem;
    border: 1px solid rgba(0, 0, 0, .28);
    background: #f8f8f6;
    cursor: pointer;
  }

  .locale-card:focus-visible {
    outline: 2px solid var(--ink);
    outline-offset: 2px;
  }

  .locale-card.is-selected {
    border-color: #000;
    border-width: 2px;
    box-shadow: 0 0 0 1px #000 inset;
  }

  .locale-card__radio {
    display: none;
  }

  .locale-card__content {
    display: grid;
    gap: .3rem;
    padding: .9rem 1rem;
  }

  .locale-card__content strong {
    font-size: 1.05rem;
    line-height: 1.15;
  }

  /* 下划线只标记当前已经应用到站点的语言，区别于临时点选的卡片边框。 */
  .locale-card.is-current .locale-card__content strong {
    text-decoration-line: underline;
    text-decoration-thickness: 1px;
    text-decoration-color: #000;
    text-underline-offset: .18rem;
  }

  .locale-card__meta {
    color: var(--muted);
    font-family: var(--font-ui);
    font-size: .76rem;
  }

  .plugin-panel {
    --plugin-list-height: max(18.5rem, calc(100dvh - 16rem));
    display: grid;
    gap: 1rem;
  }

  .plugin-workbench {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 3.5rem minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
  }

  .plugin-pane {
    display: grid;
    gap: .75rem;
    min-width: 0;
  }

  .plugin-pane__head h3 {
    margin: 0;
    font-size: 1.1rem;
  }

  .plugin-transfer-controls,
  .plugin-sort-controls {
    display: grid;
    gap: .6rem;
    align-content: center;
    justify-items: center;
  }

  .plugin-transfer-controls {
    height: var(--plugin-list-height);
    padding-top: .35rem;
    padding-bottom: .35rem;
  }

  .plugin-sort-index {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 3.1rem;
    min-height: 2rem;
    padding: .2rem .55rem;
    border: 1px solid rgba(0, 0, 0, .38);
    background: #fff;
    font-family: var(--font-ui);
    font-size: .76rem;
    line-height: 1;
  }

  .plugin-arrow-button {
    --arrow-stroke: #000;
    --arrow-fill: #fff;
    position: relative;
    width: 2.7rem;
    height: 2.7rem;
    min-width: 2.7rem;
    min-height: 2.7rem;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    font-size: 0;
    line-height: 0;
    transition: transform .16s ease, opacity .16s ease;
  }

  .plugin-arrow-button::before,
  .plugin-arrow-button::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    transform: translate(-50%, -50%);
  }

  .plugin-arrow-button:hover:not(:disabled),
  .plugin-arrow-button:focus-visible:not(:disabled) {
    transform: translateY(-1px);
  }

  .plugin-arrow-button:disabled {
    --arrow-stroke: rgba(0, 0, 0, .28);
    --arrow-fill: rgba(255, 255, 255, .92);
    opacity: .36;
    cursor: not-allowed;
  }

  .plugin-arrow-button--right::before {
    border-top: .82rem solid transparent;
    border-bottom: .82rem solid transparent;
    border-left: 1.18rem solid var(--arrow-stroke);
  }

  .plugin-arrow-button--right::after {
    left: calc(50% - .14rem);
    border-top: .62rem solid transparent;
    border-bottom: .62rem solid transparent;
    border-left: .92rem solid var(--arrow-fill);
  }

  .plugin-arrow-button--left::before {
    border-top: .82rem solid transparent;
    border-bottom: .82rem solid transparent;
    border-right: 1.18rem solid var(--arrow-stroke);
  }

  .plugin-arrow-button--left::after {
    left: calc(50% + .14rem);
    border-top: .62rem solid transparent;
    border-bottom: .62rem solid transparent;
    border-right: .92rem solid var(--arrow-fill);
  }

  .plugin-arrow-button--up::before {
    border-left: .82rem solid transparent;
    border-right: .82rem solid transparent;
    border-bottom: 1.18rem solid var(--arrow-stroke);
  }

  .plugin-arrow-button--up::after {
    top: calc(50% + .14rem);
    border-left: .62rem solid transparent;
    border-right: .62rem solid transparent;
    border-bottom: .92rem solid var(--arrow-fill);
  }

  .plugin-arrow-button--down::before {
    border-left: .82rem solid transparent;
    border-right: .82rem solid transparent;
    border-top: 1.18rem solid var(--arrow-stroke);
  }

  .plugin-arrow-button--down::after {
    top: calc(50% - .14rem);
    border-left: .62rem solid transparent;
    border-right: .62rem solid transparent;
    border-top: .92rem solid var(--arrow-fill);
  }

  .plugin-grid {
    /* 插件目录是单列可选列表，用 Flex 纵向排列可以避免固定高度 Grid 把空余空间分配到卡片之间。 */
    display: flex;
    flex-direction: column;
    gap: .75rem;
    align-items: stretch;
  }

  .plugin-grid,
  .plugin-queue-shell {
    height: var(--plugin-list-height);
    padding: .35rem;
    border: 1px solid rgba(0, 0, 0, .38);
    background: #fff;
    overflow-x: hidden;
    overflow-y: auto;
  }

  .plugin-card {
    min-height: 8.25rem;
    cursor: default;
  }

  .plugin-card:hover {
    transform: none;
    box-shadow: none;
  }

  .plugin-card.is-active {
    border-color: #000;
    border-width: 2px;
    box-shadow: 0 0 0 1px #000 inset;
  }

  .plugin-card.is-selected,
  .plugin-queue-item.is-selected {
    border-color: #000;
    box-shadow: 0 0 0 1px #000 inset;
    background: #f1efe9;
  }

  .plugin-catalog-card {
    --plugin-sort-rail-offset: .75rem;
    --plugin-sort-rail-width: 1.55rem;
    --plugin-sort-rail-gutter: .75rem;
    padding: 1rem calc(var(--plugin-sort-rail-offset) + var(--plugin-sort-rail-width) + var(--plugin-sort-rail-gutter)) 1.05rem 1rem;
  }

  .plugin-catalog-card .plugin-queue-item__body {
    grid-template-columns: 1fr;
  }

  .plugin-queue-item__copy {
    display: grid;
    gap: .55rem;
    min-width: 0;
  }

  .plugin-queue-item__copy .plugin-queue-item__main {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  .plugin-card__head {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: .85rem;
    align-items: start;
  }

  .plugin-card__titleblock {
    display: grid;
    gap: .55rem;
    min-width: 0;
  }

  .plugin-card__titleblock strong {
    font-size: 1.12rem;
    line-height: 1.2;
    overflow-wrap: anywhere;
  }

  .plugin-catalog-card .plugin-queue-item__text strong {
    font-size: 1.12rem;
    line-height: 1.2;
  }

  .plugin-queue-item__description {
    margin: 0;
    min-height: 0;
    color: var(--muted);
    font-size: .95rem;
    line-height: 1.5;
  }

  .plugin-card__footer {
    display: block;
    margin-top: auto;
    padding-top: .75rem;
    border-top: 1px solid rgba(0, 0, 0, .15);
  }

  .plugin-order-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 3rem;
    min-height: 1.8rem;
    padding: .2rem .55rem;
    border: 1px solid var(--rule);
    background: #fff;
    font-family: var(--font-ui);
    font-size: .78rem;
  }

  .plugin-order-badge:empty {
    display: none;
  }

  .plugin-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    align-items: center;
  }

  .plugin-queue-list {
    display: grid;
    gap: .75rem;
    align-content: start;
  }

  .plugin-queue-shell {
    display: block;
  }

  .plugin-queue-item {
    display: grid;
    gap: .8rem;
    min-height: 8.25rem;
    padding: 1rem 1rem 1.05rem;
    border: 1px solid rgba(0, 0, 0, .28);
    background: #f8f8f6;
  }

  .plugin-catalog-card.plugin-queue-item {
    padding: 1rem calc(var(--plugin-sort-rail-offset) + var(--plugin-sort-rail-width) + var(--plugin-sort-rail-gutter)) 1.05rem 1rem;
  }

  .plugin-queue-item__body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 3.5rem;
    gap: .85rem;
    align-items: start;
  }

  /* 排序按钮是右侧队列项的附加操作，不参与正文布局计算，避免把卡片高度撑得比左侧目录卡更高。 */
  .plugin-queue-list .plugin-queue-item {
    position: relative;
  }

  .plugin-queue-list .plugin-queue-item.has-settings {
    padding-bottom: 3.35rem;
  }

  .plugin-queue-list .plugin-queue-item__body {
    grid-template-columns: 1fr;
  }

  .plugin-queue-list .plugin-sort-controls {
    position: absolute;
    top: 1rem;
    right: var(--plugin-sort-rail-offset);
    width: var(--plugin-sort-rail-width);
    gap: .12rem;
  }

  .plugin-queue-list .plugin-sort-index {
    min-width: 0;
    min-height: 1.2rem;
    padding: 0;
    border: 0;
    background: transparent;
    font-size: .96rem;
    font-weight: 700;
    line-height: 1.15;
  }

  .plugin-queue-list .plugin-arrow-button {
    width: var(--plugin-sort-rail-width);
    height: var(--plugin-sort-rail-width);
    min-width: var(--plugin-sort-rail-width);
    min-height: var(--plugin-sort-rail-width);
  }

  .plugin-queue-list .plugin-arrow-button--up::before {
    border-left-width: .46rem;
    border-right-width: .46rem;
    border-bottom-width: .68rem;
  }

  .plugin-queue-list .plugin-arrow-button--up::after {
    top: calc(50% + .08rem);
    border-left-width: .32rem;
    border-right-width: .32rem;
    border-bottom-width: .5rem;
  }

  .plugin-queue-list .plugin-arrow-button--down::before {
    border-left-width: .46rem;
    border-right-width: .46rem;
    border-top-width: .68rem;
  }

  .plugin-queue-list .plugin-arrow-button--down::after {
    top: calc(50% - .08rem);
    border-left-width: .32rem;
    border-right-width: .32rem;
    border-top-width: .5rem;
  }

  .plugin-settings-link {
    position: absolute;
    left: 1rem;
    bottom: 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.05rem;
    height: 2.05rem;
    border: 1px solid var(--rule);
    background: var(--surface);
    color: var(--ink);
    text-decoration: none;
    transition: background-color .15s ease, color .15s ease, box-shadow .15s ease;
  }

  .plugin-settings-link:hover,
  .plugin-settings-link:focus-visible {
    background: var(--surface-muted);
    box-shadow: inset 0 0 0 1px var(--rule);
    outline: 0;
  }

  .plugin-settings-link:hover .plugin-settings-link__icon::before,
  .plugin-settings-link:hover .plugin-settings-link__icon::after,
  .plugin-settings-link:focus-visible .plugin-settings-link__icon::before,
  .plugin-settings-link:focus-visible .plugin-settings-link__icon::after {
    background: var(--surface-muted);
  }

  .plugin-settings-link__icon {
    position: relative;
    display: block;
    width: 1.15rem;
    height: .9rem;
    background:
      linear-gradient(currentColor, currentColor) 0 .08rem / 100% 2px no-repeat,
      linear-gradient(currentColor, currentColor) 0 calc(50% - 1px) / 100% 2px no-repeat,
      linear-gradient(currentColor, currentColor) 0 calc(100% - .08rem) / 100% 2px no-repeat;
  }

  .plugin-settings-link__icon::before,
  .plugin-settings-link__icon::after {
    content: "";
    position: absolute;
    width: .34rem;
    height: .34rem;
    border: 2px solid currentColor;
    background: var(--surface);
  }

  .plugin-settings-link__icon::before {
    top: -.03rem;
    left: .18rem;
  }

  .plugin-settings-link__icon::after {
    right: .2rem;
    bottom: -.02rem;
  }

  .plugin-queue-item__main {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: .8rem;
    align-items: start;
  }

  .plugin-queue-item__text {
    display: grid;
    gap: .28rem;
    min-width: 0;
  }

  .plugin-queue-item__text strong {
    font-size: 1.12rem;
    line-height: 1.2;
    overflow-wrap: anywhere;
  }

  .plugin-queue-item__text span {
    color: var(--muted);
    font-size: .95rem;
    line-height: 1.5;
  }

  .plugin-empty {
    margin: 0;
    padding: 1rem 1.1rem;
    border: 1px dashed rgba(0, 0, 0, .24);
    color: var(--muted);
    font-size: .95rem;
  }

  .plugin-grid .plugin-empty {
    grid-column: 1 / -1;
  }

  .plugin-tools {
    margin-top: 1rem;
  }

  .plugin-tools-list {
    display: grid;
    gap: .75rem;
  }

  .plugin-tool-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
  }

  .plugin-settings-header {
    align-items: center;
  }

  .plugin-settings-header > div {
    min-width: 0;
  }

  .plugin-settings-header h1 {
    overflow-wrap: anywhere;
  }

  .plugin-settings-panel {
    display: grid;
    gap: 0;
    overflow: hidden;
  }

  .plugin-settings-panel__head {
    align-items: start;
  }

  .plugin-settings-panel__head > div {
    display: grid;
    gap: .15rem;
  }

  .plugin-settings-panel__head span {
    color: var(--muted);
    font-family: var(--font-ui);
    font-size: .72rem;
  }

  .plugin-settings-copy {
    margin: 0;
    padding: .8rem .9rem;
    border-bottom: 1px solid rgba(0, 0, 0, .24);
    color: var(--muted);
    font-family: var(--font-ui);
    font-size: .8rem;
    line-height: 1.45;
  }

  .plugin-admin-page {
    display: grid;
    gap: .75rem;
    padding: .9rem;
    border-bottom: 1px solid var(--rule);
    background: var(--surface);
  }

  .plugin-admin-page__head {
    display: grid;
    gap: .25rem;
  }

  .plugin-admin-page__head h3 {
    margin: 0;
    font-size: 1.45rem;
  }

  .plugin-admin-page__head p,
  .plugin-action-panel__head p,
  .plugin-result-empty p,
  .plugin-result-header p,
  .plugin-result-section p {
    margin: 0;
    color: var(--muted);
    font-family: var(--font-ui);
    font-size: .82rem;
    line-height: 1.45;
  }

  .plugin-action-list {
    display: grid;
    gap: .75rem;
  }

  .plugin-action-panel {
    display: grid;
    border: 1px solid var(--rule);
    background: var(--surface-soft);
  }

  .plugin-action-panel__head {
    padding: .7rem .75rem;
    border-bottom: 1px solid var(--rule);
    background: var(--surface-muted);
  }

  .plugin-action-panel__head h4 {
    margin: 0 0 .2rem;
    font-family: var(--font-ui);
    font-size: .86rem;
    text-transform: uppercase;
  }

  .plugin-action-form {
    display: grid;
    gap: .75rem;
    padding: .75rem;
  }

  .plugin-action-form.is-working {
    opacity: .72;
  }

  .plugin-file-drop {
    min-height: 7rem;
  }

  .plugin-action-field {
    padding: 0;
    border-bottom: 0;
  }

  .plugin-action-field small {
    color: var(--muted);
  }

  .plugin-action-footer {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    align-items: center;
    justify-content: space-between;
  }

  .plugin-action-footer .ui-button {
    min-width: 8rem;
  }

  .plugin-action-status {
    margin-left: auto;
  }

  .ui-status--error,
  .ui-status.is-error {
    border-color: var(--rule);
    background: var(--surface);
    color: var(--ink);
    text-decoration: underline;
    text-underline-offset: 2px;
  }

  .plugin-action-result {
    display: grid;
    gap: .9rem;
    padding: .9rem;
    background: var(--surface-soft);
  }

  .plugin-result-empty,
  .plugin-result-header,
  .plugin-result-section,
  .plugin-job {
    display: grid;
    gap: .55rem;
    padding: .75rem;
    border: 1px solid var(--rule);
    background: var(--surface);
  }

  .plugin-result-header[data-level="error"] {
    background: var(--surface-muted);
  }

  .plugin-result-empty h3,
  .plugin-result-header h3,
  .plugin-result-section h4,
  .plugin-job__top h4 {
    margin: 0;
    font-family: var(--font-ui);
    font-size: .86rem;
    text-transform: uppercase;
  }

  .plugin-job__top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
  }

  .plugin-job__top span {
    color: var(--muted);
    font-family: var(--font-ui);
    font-size: .78rem;
  }

  .plugin-job progress {
    width: 100%;
    height: .85rem;
    border: 1px solid var(--rule);
    border-radius: 0;
    background: var(--surface);
    accent-color: var(--ink);
  }

  .plugin-job progress::-webkit-progress-bar {
    background: var(--surface);
  }

  .plugin-job progress::-webkit-progress-value {
    background: var(--ink);
  }

  .plugin-job progress::-moz-progress-bar {
    background: var(--ink);
  }

  .plugin-job-log {
    max-height: 18rem;
    overflow: auto;
    margin: 0;
    padding: .75rem .75rem .75rem 2rem;
    border: 1px solid var(--rule);
    background: var(--surface-muted);
    font-family: var(--font-ui);
    font-size: .78rem;
    line-height: 1.55;
  }

  .plugin-result-list,
  .plugin-result-section dl {
    display: grid;
    grid-template-columns: minmax(8rem, 14rem) 1fr;
    gap: .35rem .8rem;
    margin: 0;
    font-family: var(--font-ui);
    font-size: .82rem;
  }

  .plugin-result-section dt {
    color: var(--muted);
  }

  .plugin-result-section dd {
    margin: 0;
    word-break: break-word;
  }

  .newspaper-header {
    grid-area: header;
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: baseline;
    padding: .45rem 1rem;
    border-bottom: 1px solid var(--rule);
  }

  .edition-line {
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
    color: var(--muted);
    font-size: .72rem;
    text-transform: uppercase;
  }

  .brand {
    display: block;
    margin: 0;
    color: var(--ink);
    font-family: var(--font-heading);
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    text-transform: none;
  }

  .section-nav {
    grid-area: nav;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0;
    border-bottom: 1px solid var(--rule);
    background: var(--surface);
    font-size: .78rem;
    text-transform: uppercase;
  }

  .section-nav a {
    padding: .38rem .65rem;
    border-right: 1px solid var(--rule);
    color: var(--ink);
    text-decoration: none;
  }

  .section-nav a:first-child {
    border-left: 1px solid var(--rule);
  }

  .site-nav,
  .rail-section {
    display: grid;
    gap: .35rem;
    margin-bottom: 1.2rem;
    font-size: .86rem;
  }

  .rail-section h2 {
    margin-top: 0;
    border-bottom: 1px solid var(--rule);
    color: var(--muted);
    font-size: .8rem;
    text-transform: uppercase;
  }

  .site-footer {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: .65rem 1rem;
    align-items: center;
    padding: .75rem 1rem;
    border-top: 1px solid var(--rule);
    background: var(--surface);
    font-size: .78rem;
    text-transform: uppercase;
  }

  .site-footer__meta {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem .75rem;
    align-items: center;
    min-width: 0;
  }

  .site-footer__brand {
    color: var(--ink);
    font-family: var(--font-heading);
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
  }

  .site-footer__powered {
    color: var(--muted);
  }

  .site-footer__nav {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem .75rem;
    align-items: center;
    justify-content: center;
  }

  .site-footer__nav a {
    color: var(--ink);
    text-decoration-thickness: 1px;
  }

  @media (max-width: 920px) {
    .site-footer {
      grid-template-columns: 1fr;
    }

    .site-footer__nav {
      justify-content: flex-start;
    }
  }

  .page-header,
  .article-header {
    margin-bottom: 1rem;
    padding-bottom: .75rem;
    border-bottom: 3px double var(--rule);
  }

  .article-header__top {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    align-items: center;
    justify-content: space-between;
    margin-bottom: .35rem;
  }

  .article-header__top .kicker {
    margin: 0;
  }

  .post-edit-button {
    flex: 0 0 auto;
  }

  .front-page {
    display: grid;
    gap: 1rem;
  }

  .home-image-band {
    grid-area: hero;
    margin: 0;
    border-bottom: 1px solid var(--rule);
  }

  .home-image-band img {
    display: block;
    width: 100%;
    height: clamp(6rem, 14vw, 10rem);
    object-fit: cover;
    object-position: center;
  }

  .front-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
  }

  .front-grid:has(.front-briefs) {
    grid-template-columns: minmax(0, 1fr);
  }

  .lead-story {
    min-height: 22rem;
  }

  .front-grid:has(.front-briefs) .lead-story {
    padding-right: 0;
    padding-bottom: 1rem;
    border-right: 0;
    border-bottom: 1px solid var(--rule);
  }

  .lead-story h2 {
    margin: 0 0 .5rem;
    font-family: var(--font-heading);
    font-size: clamp(2.1rem, 5.8vw, 4.5rem);
    line-height: .92;
  }

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

  .lead-story p {
    font-size: 1.18rem;
    line-height: 1.35;
  }

  .section-heading {
    display: flex;
    justify-content: space-between;
    gap: .75rem;
    align-items: baseline;
    margin-bottom: .35rem;
    border-bottom: 2px solid var(--rule);
    font-family: var(--font-ui);
    text-transform: uppercase;
  }

  .section-heading h2 {
    margin: 0;
    font-size: .86rem;
  }

  .section-heading span {
    color: var(--muted);
    font-size: .72rem;
  }

  .brief-list {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .brief-list li {
    display: grid;
    gap: .2rem;
    padding: .5rem 0;
    border-bottom: 1px solid rgba(0, 0, 0, .45);
  }

  .brief-list time {
    color: var(--muted);
    font-family: var(--font-ui);
    font-size: .72rem;
  }

  .brief-list a {
    color: var(--ink);
    font-family: var(--font-heading);
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1.08;
    text-decoration: none;
  }

  .brief-list span {
    color: var(--muted);
    font-size: .88rem;
    line-height: 1.25;
  }

  .front-list .post-meta {
    margin-top: .15rem;
    gap: .55rem;
    font-size: .72rem;
  }

  .site-pagination {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    align-items: center;
    justify-content: space-between;
    padding-top: .75rem;
    border-top: 2px solid var(--rule);
    font-family: var(--font-ui);
    font-size: .78rem;
  }

  .site-pagination__pages {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem;
    align-items: center;
    justify-content: center;
  }

  .site-pagination__link,
  .site-pagination__page {
    display: inline-flex;
    min-width: 2rem;
    min-height: 2rem;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--rule);
    color: var(--ink);
    text-decoration: none;
  }

  .site-pagination__link {
    min-width: 4.25rem;
    padding: .25rem .55rem;
    background: var(--surface-muted);
  }

  .site-pagination__page {
    background: var(--surface);
  }

  .site-pagination__page.is-current {
    background: var(--inverse);
    color: var(--inverse-ink);
  }

  .site-pagination__link.is-disabled {
    opacity: .42;
    pointer-events: none;
  }

  .front-empty {
    padding: 1rem 0;
    border-bottom: 1px solid rgba(0, 0, 0, .45);
  }

  .front-empty h2 {
    margin: 0 0 .35rem;
    font-size: 1.45rem;
  }

  .page-header.compact h1 {
    font-size: 2.3rem;
  }

  .kicker {
    margin: 0 0 .25rem;
    color: var(--kicker);
    font-size: .82rem;
    text-transform: uppercase;
  }

  .post-meta,
  .post-list-tags,
  .post-list-summary {
    color: var(--muted);
    font-size: .82rem;
  }

  .post-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .7rem;
    align-items: center;
  }

  .post-list,
  .dense-list {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .post-list li,
  .dense-list li {
    display: grid;
    grid-template-columns: 7rem minmax(10rem, 1.2fr) minmax(12rem, 2fr) minmax(8rem, .9fr);
    gap: .55rem;
    align-items: baseline;
    padding: .42rem 0;
    border-bottom: 1px solid rgba(0, 0, 0, .45);
  }

  .dense-list li {
    grid-template-columns: minmax(10rem, 1fr) 6rem minmax(10rem, 2fr);
  }

  .post-list-title {
    font-weight: 700;
  }

  .comments-section {
    display: grid;
    gap: .75rem;
    margin-top: 2rem;
    padding-top: .75rem;
    border-top: 3px double var(--rule);
  }

  .comments-section__head {
    display: flex;
    justify-content: space-between;
    gap: .75rem;
    align-items: baseline;
    border-bottom: 2px solid var(--rule);
    font-family: var(--font-ui);
    text-transform: uppercase;
  }

  .comments-section__head h2 {
    margin: 0;
    font-size: .86rem;
  }

  .comments-section__head span,
  .comments-empty,
  .comments-disabled {
    color: var(--muted);
    font-family: var(--font-ui);
    font-size: .78rem;
  }

  .comment-list {
    display: grid;
    gap: .65rem;
  }

  .comment-card {
    display: grid;
    gap: .45rem;
    padding-bottom: .65rem;
    border-bottom: 1px solid rgba(0, 0, 0, .35);
  }

  .comment-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    align-items: baseline;
    font-family: var(--font-ui);
    font-size: .8rem;
  }

  .comment-card__meta time {
    color: var(--muted);
  }

  .comment-card__body,
  .comment-card__reply p {
    margin: 0;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
  }

  .comment-card__reply {
    display: grid;
    gap: .25rem;
    margin-top: .1rem;
    padding: .55rem .65rem;
    border-left: 3px double var(--rule);
    background: var(--surface-muted);
  }

  .comment-card__reply strong {
    font-family: var(--font-ui);
    font-size: .78rem;
  }

  .comment-form {
    display: grid;
    gap: .65rem;
    padding: .75rem;
    border: 1px solid var(--rule);
    background: var(--surface-soft);
  }

  .comment-form h3 {
    margin: 0;
    font-family: var(--font-ui);
    font-size: .86rem;
    text-transform: uppercase;
  }

  .comment-form .ui-field {
    padding: 0;
    border-bottom: 0;
  }

  .comment-form__actions {
    display: flex;
    justify-content: flex-start;
  }

  .comment-honeypot {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
  }

  .article-body {
    width: 100%;
    max-width: none;
    --heading-number-gap: .6rem;
    font-family: var(--font-body);
    font-size: 12pt;
    line-height: 1.35;
  }

  .article-body h1,
  .article-body h2,
  .article-body h3,
  .article-body h4,
  .article-body h5,
  .article-body h6 {
    break-after: avoid;
    break-inside: avoid;
    font-family: var(--font-heading);
    line-height: 1.2;
    letter-spacing: 0;
    text-transform: none;
    clear: both;
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    column-gap: var(--heading-number-gap);
    align-items: baseline;
    font-style: normal;
    font-weight: 700;
  }

  .article-body h1 {
    margin: 1.15rem 0 .5rem;
    font-size: 22pt;
    line-height: 1.08;
  }

  .article-body h2 {
    margin: .95rem 0 .38rem;
    font-size: 17pt;
    line-height: 1.12;
  }

  .article-body h3 {
    margin: .82rem 0 .28rem;
    font-size: 14pt;
    line-height: 1.16;
  }

  .article-body h4 {
    margin: .72rem 0 .24rem;
    font-size: 12.5pt;
    line-height: 1.18;
  }

  .article-body h5 {
    margin: .64rem 0 .22rem;
    font-size: 12pt;
    line-height: 1.2;
  }

  .article-body h6 {
    margin: .58rem 0 .18rem;
    font-size: 12pt;
    font-style: italic;
    line-height: 1.2;
  }

  .article-body .has-heading-number::before {
    content: attr(data-heading-number);
    grid-column: 1;
    justify-self: start;
    white-space: nowrap;
  }

  .article-body .has-heading-number {
    grid-template-areas: "number title";
  }

  .article-body h1:not(.has-heading-number),
  .article-body h2:not(.has-heading-number),
  .article-body h3:not(.has-heading-number),
  .article-body h4:not(.has-heading-number),
  .article-body h5:not(.has-heading-number),
  .article-body h6:not(.has-heading-number) {
    display: block;
  }

  .article-body h1 + p,
  .article-body h2 + p,
  .article-body h3 + p,
  .article-body h4 + p,
  .article-body h5 + p,
  .article-body h6 + p {
    margin-top: .08rem;
  }

  .article-body h1 + h2,
  .article-body h2 + h3,
  .article-body h3 + h4,
  .article-body h4 + h5,
  .article-body h5 + h6 {
    margin-top: .35rem;
  }

  .article-body p {
    margin: 0 0 .55rem;
  }

  .article-body ul,
  .article-body ol {
    margin-top: .25rem;
    margin-bottom: .55rem;
  }

  .article-body li + li {
    margin-top: .12rem;
  }

  .article-body pre {
    overflow: auto;
    padding: .75rem;
    border: 1px solid var(--rule);
    background: var(--inverse);
    color: var(--inverse-ink);
  }

  .article-body code {
    font-size: .9em;
  }

  .article-body blockquote {
    margin-left: 0;
    padding-left: 1rem;
    border-left: 3px double var(--accent);
    color: #222;
  }

  .article-body .equation-anchor {
    display: block;
    scroll-margin-top: 2rem;
  }

  .article-body a[href^="#eq-"] {
    border-bottom: 1px dotted var(--rule);
    color: var(--ink);
    text-decoration: none;
  }

  .article-body a[href^="#eq-"]:hover {
    border-bottom-style: solid;
  }

  .article-body .katex-display {
    margin: .7rem 0;
    overflow-x: auto;
    overflow-y: hidden;
  }

  .article-body .article-figure {
    margin: .85rem 0 1rem;
    break-inside: avoid;
  }

  .article-body .article-figure img {
    display: block;
    width: 60%;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
    border: 1px solid var(--rule);
    cursor: zoom-in;
  }

  .article-body .article-figure figcaption {
    max-width: 60%;
    margin: .32rem auto 0;
    font-family: var(--font-body);
    font-size: 11pt;
    line-height: 1.28;
    text-align: center;
  }

  .article-body .figure-number {
    font-weight: 700;
  }

  .article-body a[href^="#fig-"] {
    border-bottom: 1px dotted var(--rule);
    color: var(--ink);
    text-decoration: none;
  }

  .article-body a[href^="#fig-"]:hover {
    border-bottom-style: solid;
  }

  .image-lightbox {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: none;
    grid-template-rows: auto minmax(0, 1fr) auto;
    gap: .65rem;
    padding: 1rem;
    background: rgba(255, 255, 255, .96);
  }

  .image-lightbox.is-open {
    display: grid;
  }

  body.has-open-lightbox {
    overflow: hidden;
  }

  .image-lightbox__close {
    justify-self: end;
    min-width: 4.5rem;
    border: 1px solid var(--rule);
    background: var(--surface);
    color: var(--ink);
    font-family: var(--font-ui);
    font-size: .82rem;
    cursor: pointer;
  }

  .image-lightbox__image {
    align-self: center;
    justify-self: center;
    max-width: 96vw;
    max-height: 84vh;
    border: 1px solid var(--rule);
    object-fit: contain;
  }

  .image-lightbox__caption {
    max-width: 70rem;
    margin: 0 auto;
    font-family: var(--font-body);
    font-size: 11pt;
    line-height: 1.3;
    text-align: center;
  }

  .tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
  }

  .tag-list a {
    padding: .1rem .25rem;
    border: 1px solid var(--rule);
    color: var(--ink);
    text-decoration: none;
  }

  .search-box,
  .editor-label {
    display: grid;
    gap: .35rem;
    font-family: var(--font-ui);
  }

  input:not(.ui-input),
  textarea:not(.ui-textarea),
  button:not(.ui-button):not(.ui-media-button):not(.admin-inline-delete__button) {
    border: 1px solid var(--rule);
    border-radius: 0;
    background: var(--surface);
    color: var(--ink);
    font: inherit;
  }

  input:not(.ui-input):not([type="checkbox"]),
  textarea:not(.ui-textarea) {
    width: 100%;
    padding: .45rem;
  }

  button:not(.ui-button):not(.ui-media-button):not(.admin-inline-delete__button) {
    padding: .42rem .7rem;
    cursor: pointer;
  }

  .admin-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 18rem;
    gap: 1rem;
  }

  .markdown-editor {
    min-height: 28rem;
    resize: vertical;
    line-height: 1.4;
  }

  .upload-box {
    display: grid;
    gap: .5rem;
    padding: .75rem;
    border: 1px solid var(--rule);
  }

  .status-line {
    min-height: 1.2rem;
    color: var(--status);
    font-family: var(--font-ui);
    font-size: .86rem;
  }

  .media-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
    gap: .75rem;
  }

  .media-manager {
    display: grid;
    gap: .75rem;
  }

  .media-library-panel {
    display: grid;
    gap: 0;
  }

  .media-library-panel .media-grid {
    padding: .75rem;
  }

  .media-type-filter {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    padding: .5rem;
    border-bottom: 1px solid var(--rule);
    background: var(--surface);
    font-family: var(--font-ui);
  }

  .media-type-filter__item,
  .media-type-filter__item:visited {
    display: inline-flex;
    min-height: 2rem;
    align-items: center;
    gap: .45rem;
    padding: .35rem .55rem;
    border: 1px solid var(--rule);
    background: var(--surface-muted);
    color: var(--ink);
    font-size: .78rem;
    line-height: 1.1;
    text-decoration: none;
  }

  .media-type-filter__item.is-active {
    background: var(--inverse);
    color: var(--inverse-ink);
  }

  .media-type-filter__count {
    min-width: 1.35rem;
    padding: .1rem .25rem;
    border: 1px solid currentColor;
    text-align: center;
    font-size: .72rem;
  }

  .media-empty {
    margin: 0;
    padding: .9rem;
    color: var(--muted);
    font-family: var(--font-ui);
  }

  .media-upload-row {
    display: grid;
    gap: .5rem;
    padding: .65rem;
  }

  .media-item {
    margin: 0;
    border: 1px solid var(--rule);
    background: var(--surface-soft);
  }

  .media-item img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: contain;
    border-bottom: 1px solid var(--rule);
    background: var(--surface);
  }

  .media-file-preview {
    display: grid;
    width: 100%;
    aspect-ratio: 4 / 3;
    place-items: center;
    gap: .45rem;
    padding: 1rem;
    border-bottom: 1px solid var(--rule);
    background: var(--surface);
    color: var(--ink);
    text-align: center;
  }

  .media-file-preview span {
    display: inline-grid;
    min-width: 3.5rem;
    min-height: 3.5rem;
    place-items: center;
    border: 1px solid var(--rule);
    background: var(--surface-soft);
    font-family: var(--font-ui);
    font-size: .82rem;
    font-weight: 700;
  }

  .media-file-preview strong {
    max-width: 100%;
    font-family: var(--font-ui);
    font-size: .82rem;
    font-weight: 600;
    overflow-wrap: anywhere;
  }

  .media-item figcaption {
    display: grid;
    gap: .35rem;
    font-family: var(--font-ui);
    font-size: .78rem;
  }

  .media-edit-form {
    display: grid;
    gap: 0;
  }

  .media-meta {
    margin: 0;
    padding: .4rem .5rem;
    border-bottom: 1px solid rgba(0, 0, 0, .22);
    color: var(--muted);
  }

  .media-snippet {
    min-height: 6rem;
    border-width: 0 0 1px;
    font-family: var(--font-ui);
    font-size: .72rem;
    line-height: 1.35;
    resize: vertical;
  }

  .media-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    padding: .5rem;
  }

  .media-actions .ui-button.is-complete {
    background: var(--inverse);
    color: var(--inverse-ink);
  }

  .site-shell:has(.editor-shell) {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "header"
      "hero"
      "nav"
      "main";
    width: min(100%, 94rem);
  }

  .site-shell:has(.editor-shell) .right-rail {
    display: none;
  }

  .main-column:has(.editor-shell) {
    max-width: none;
    padding: .75rem;
  }

  .editor-shell {
    --editor-library-width: 12rem;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: .75rem;
    height: calc(100vh - 2rem);
    min-height: 0;
  }

  .editor-shell[data-library="collapsed"] {
    --editor-library-width: 2.35rem;
  }

  .editor-topbar {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: end;
    padding-bottom: .65rem;
    border-bottom: 3px double var(--rule);
  }

  .editor-topbar h1 {
    margin: 0;
    font-size: 2.2rem;
  }

  .editor-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: .35rem;
    align-items: center;
    font-family: var(--font-ui);
  }

  .editor-workbench {
    display: grid;
    grid-template-columns: var(--editor-library-width) minmax(0, 1fr) 15rem;
    min-height: 0;
    overflow: hidden;
    border: 1px solid var(--rule);
    background: var(--surface);
  }

  .editor-library,
  .editor-sidebar {
    min-width: 0;
    background: var(--surface-muted);
  }

  .editor-library {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    height: 100%;
    border-right: 1px solid var(--rule);
    overflow: hidden;
  }

  .editor-library.ui-panel {
    border-width: 0 1px 0 0;
  }

  .editor-library-title {
    display: flex;
    min-width: 0;
    gap: .35rem;
    align-items: center;
  }

  .editor-library-title h2,
  .editor-library-title span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .editor-collapse-button {
    width: 1.55rem;
    height: 1.55rem;
    flex: 0 0 auto;
    padding: 0;
    font-family: var(--font-ui);
    font-size: .85rem;
    line-height: 1;
  }

  .editor-shell[data-library="collapsed"] .editor-library .ui-panel__head {
    justify-content: center;
    padding: .35rem .25rem;
    border-bottom: 0;
  }

  .editor-shell[data-library="collapsed"] .editor-library-title,
  .editor-shell[data-library="collapsed"] .editor-post-list {
    display: none;
  }

  .editor-sidebar {
    border-left: 1px solid var(--rule);
    overflow-y: auto;
  }

  .editor-post-list {
    margin: 0;
    padding: 0;
    list-style: none;
    min-height: 0;
    height: 100%;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .editor-main {
    display: grid;
    grid-template-rows: auto auto auto minmax(0, 1fr) auto;
    min-width: 0;
    min-height: 0;
  }

  .title-field {
    border: 0;
    border-bottom: 1px solid var(--rule);
    background: var(--surface);
    font-family: var(--font-heading);
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 1.05;
  }

  .permalink-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: .25rem;
    align-items: center;
    padding: .35rem .45rem;
    border-bottom: 1px solid rgba(0, 0, 0, .35);
    color: var(--muted);
    font-family: var(--font-ui);
    font-size: .78rem;
  }

  .permalink-row code {
    display: block;
    min-width: 0;
    min-height: 1.6rem;
    padding: .18rem .35rem;
    border: 1px solid rgba(0, 0, 0, .35);
    background: var(--surface-soft);
    color: var(--ink);
    font-size: .78rem;
    line-height: 1.2;
    overflow-wrap: anywhere;
  }

  .editor-stage {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    min-height: 0;
  }

  .markdown-editor,
  .preview-pane {
    min-height: 0;
    max-height: none;
    overflow: auto;
  }

  .markdown-editor {
    resize: none;
    border: 0;
    border-right: 1px solid var(--rule);
    background: var(--surface);
    font-size: .92rem;
    line-height: 1.5;
  }

  .preview-pane {
    max-width: none;
    padding: .8rem 1rem 3rem;
    background: var(--surface-soft);
  }

  .editor-shell[data-mode="edit"] .editor-stage {
    grid-template-columns: 1fr;
  }

  .editor-shell[data-mode="edit"] .preview-pane,
  .editor-shell[data-mode="preview"] .markdown-editor {
    display: none;
  }

  .editor-shell[data-mode="preview"] .editor-stage {
    grid-template-columns: 1fr;
  }

  .editor-shell[data-mode="preview"] .preview-pane {
    background: var(--surface);
  }

  .editor-footer {
    display: flex;
    justify-content: space-between;
    gap: .75rem;
    padding: .35rem .5rem;
    border-top: 1px solid var(--rule);
    color: var(--muted);
    font-family: var(--font-ui);
    font-size: .78rem;
  }

  .settings-panel {
    border-bottom: 1px solid var(--rule);
  }

  .editor-media-panel {
    min-height: 0;
  }

  .settings-panel textarea {
    min-height: 5rem;
  }

  .compact-upload {
    display: grid;
    gap: .35rem;
    padding: .5rem;
    border-bottom: 1px solid rgba(0, 0, 0, .35);
  }

  .compact-label {
    color: var(--muted);
    font-family: var(--font-ui);
    font-size: .78rem;
    text-transform: uppercase;
  }

  .home-image-thumb {
    display: block;
    width: 100%;
    aspect-ratio: 5 / 2;
    object-fit: cover;
    border: 1px solid var(--rule);
  }

  .media-strip {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .35rem;
    max-height: clamp(12rem, 34vh, 20rem);
    align-content: start;
    overflow-y: auto;
    padding: .5rem;
  }

  .media-strip-empty {
    grid-column: 1 / -1;
    margin: 0;
    color: var(--muted);
    font-family: var(--font-ui);
    font-size: .78rem;
  }

  .media-pager {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: .35rem;
    align-items: center;
    padding: .45rem .5rem;
    border-top: 1px solid rgba(0, 0, 0, .35);
    font-family: var(--font-ui);
    font-size: .72rem;
  }

  .media-pager[hidden] {
    display: none;
  }

  .media-pager .ui-button {
    min-height: 1.75rem;
    padding: .22rem .45rem;
    font-size: .72rem;
  }

  .media-pager__info {
    color: var(--muted);
    text-align: center;
    white-space: nowrap;
  }

  @media (max-width: 680px) {
    .post-list li,
    .dense-list li,
    .admin-grid {
      grid-template-columns: 1fr;
    }

    h1 {
      font-size: 2.2rem;
    }

    .edition-line {
      display: grid;
      gap: .15rem;
    }

    .front-grid {
      grid-template-columns: 1fr;
    }

    .lead-story {
      min-height: auto;
      padding-right: 0;
      border-right: 0;
      border-bottom: 1px solid var(--rule);
      padding-bottom: 1rem;
    }

    .admin-shell {
      display: block;
      border-inline: 0;
    }

    .admin-sidebar {
      display: block;
      border-right: 0;
      border-bottom: 1px solid var(--rule);
    }

    .admin-nav,
    .admin-sidebar-footer {
      display: flex;
      flex-wrap: wrap;
    }

    .admin-stats {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .admin-login-notice {
      grid-template-columns: 1fr;
    }

    .admin-table-list li {
      grid-template-columns: 1fr;
    }

    .changelog-items li {
      grid-template-columns: 1fr;
      gap: .25rem;
    }

    .changelog-items time {
      white-space: normal;
    }

    .pack-grid {
      grid-template-columns: 1fr;
    }

    .pack-card {
      min-height: auto;
    }

    .local-pack-item {
      grid-template-columns: 1fr;
      align-items: stretch;
    }

    .local-pack-delete {
      justify-self: start;
    }

    .plugin-workbench {
      grid-template-columns: 1fr;
    }

    .plugin-transfer-controls,
    .plugin-sort-controls {
      grid-auto-flow: column;
      justify-content: start;
    }

    .plugin-queue-shell {
      grid-template-columns: 1fr;
    }

    .plugin-settings-header,
    .plugin-action-footer {
      align-items: stretch;
    }

    .plugin-settings-header {
      display: grid;
    }

    .plugin-settings-header .ui-button,
    .plugin-action-footer .ui-button {
      justify-self: start;
    }

    .plugin-action-status {
      margin-left: 0;
    }

    .plugin-result-list,
    .plugin-result-section dl {
      grid-template-columns: 1fr;
    }

    .theme-settings-layout,
    .menu-selector-bar,
    .menu-builder-layout,
    .menu-name-row,
    .menu-structure-item__fields,
    .theme-location-row,
    .theme-menu-item {
      grid-template-columns: 1fr;
    }

    .theme-settings-section__head,
    .theme-menu-card__head {
      align-items: stretch;
    }

    .theme-settings-section__head {
      display: grid;
    }

    .theme-settings-section__head .ui-button {
      margin: 0;
      justify-self: start;
    }
  }

  @media (max-width: 1080px) {
    .admin-main:has(.editor-shell) {
      min-height: 0;
    }

    .site-shell:has(.editor-shell) {
      display: block;
    }

    .site-shell:has(.editor-shell) .right-rail {
      display: block;
    }

    .editor-workbench {
      grid-template-columns: 1fr;
      overflow: visible;
    }

    .editor-shell {
      height: auto;
      min-height: 0;
    }

    .editor-library {
      height: auto;
      max-height: 18rem;
    }

    .editor-post-list {
      height: auto;
      max-height: 15rem;
    }

    .editor-sidebar {
      overflow: visible;
    }

    .editor-library,
    .editor-sidebar,
    .markdown-editor {
      border-right: 0;
      border-left: 0;
    }

    .editor-stage {
      grid-template-columns: 1fr;
    }

    .article-body .article-figure img,
    .article-body .article-figure figcaption {
      width: 100%;
      max-width: 100%;
    }
  }
}