:root {
    color-scheme: light;
    --color-canvas: #f8fafc;
    --color-surface: #ffffff;
    --color-surface-muted: #f1f5f9;
    --color-surface-accent: #eff6ff;
    --color-text: #172033;
    --color-text-muted: #475569;
    --color-border: #e2e8f0;
    --color-border-strong: #cbd5e1;
    --color-control-border: #cbd5e1;
    --color-accent: #2563eb;
    --color-accent-text: #1d4ed8;
    --color-accent-strong: #1d4ed8;
    --color-on-accent: #ffffff;
    --color-success: #067647;
    --color-success-soft: #ecfdf3;
    --color-danger: #b42318;
    --color-danger-soft: #fef3f2;
    --color-focus: #2563eb;
    --radius-sm: 0.5rem;
    --radius-md: 0.625rem;
    --radius-lg: 0.75rem;
    --content-width: 74rem;
    --header-height: 4rem;
    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
    --font-display: var(--font-sans);
    --font-mono: ui-monospace, "SFMono-Regular", "SF Mono", Consolas, "Liberation Mono", monospace;
  }

  *,
  *::before,
  *::after { box-sizing: border-box; }

  html {
    min-width: 20rem;
    scroll-behavior: smooth;
  }

  body {
    min-height: 100dvh;
    margin: 0;
    background: var(--color-canvas);
    color: var(--color-text);
    font-family: var(--font-sans);
    font-size: 1rem;
    line-height: 1.6;
    overflow-wrap: break-word;
    caret-color: var(--color-accent);
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
  }

  ::selection {
    background: #dbeafe;
    color: var(--color-text);
  }

  * { scrollbar-color: var(--color-border-strong) var(--color-surface-muted); }

  img,
  svg {
    display: block;
    max-width: 100%;
  }

  a {
    color: inherit;
    text-underline-offset: 0.2em;
  }

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

  button,
  input,
  textarea {
    color: inherit;
    font: inherit;
  }

  button,
  .button {
    display: inline-flex;
    min-height: 2.75rem;
    width: fit-content;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.65rem 1rem;
    border: 1px solid var(--color-accent);
    border-radius: var(--radius-sm);
    background: var(--color-accent);
    color: var(--color-on-accent);
    cursor: pointer;
    font-weight: 650;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease;
  }

  button:hover,
  .button:hover {
    border-color: var(--color-accent-strong);
    background: var(--color-accent-strong);
    color: var(--color-on-accent);
  }

  button:disabled,
  .button[aria-disabled="true"] {
    cursor: wait;
    opacity: 0.6;
  }

  .button-secondary,
  .button-quiet {
    border-color: var(--color-control-border);
    background: var(--color-surface);
    color: var(--color-text);
  }

  .button-secondary:hover,
  .button-quiet:hover {
    border-color: var(--color-border-strong);
    background: var(--color-surface-muted);
    color: var(--color-text);
  }

  :where(a, button, input, textarea):focus-visible {
    outline: 3px solid var(--color-focus);
    outline-offset: 3px;
  }

  h1,
  h2,
  h3,
  p { margin-block-start: 0; }

  h1,
  h2,
  h3 {
    font-family: var(--font-display);
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.025em;
  }

  h1 { font-size: clamp(2rem, 4vw, 3.25rem); }
  h2 { font-size: clamp(1.45rem, 2.5vw, 2rem); }
  h3 { font-size: 1.05rem; }

  code {
    padding: 0.18rem 0.38rem;
    border-radius: 0.35rem;
    background: var(--color-surface-muted);
    font-size: 0.9em;
  }

  .skip-link {
    position: fixed;
    top: 0.75rem;
    left: 0.75rem;
    z-index: 20;
    padding: 0.6rem 0.85rem;
    border-radius: var(--radius-sm);
    background: var(--color-text);
    color: var(--color-surface);
    transform: translateY(-160%);
  }

  .skip-link:focus { transform: translateY(0); }

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

  .site-header {
    min-height: var(--header-height);
    border-bottom: 1px solid var(--color-border);
    background: rgb(255 255 255 / 0.96);
  }

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

  .brand-lockup,
  .brand {
    display: flex;
    align-items: center;
  }

  .brand-lockup { gap: 1rem; }

  .brand {
    min-height: 2.75rem;
    gap: 0.55rem;
    color: var(--color-text);
    text-decoration: none;
  }

  .brand-mark {
    font-size: 1.4rem;
    font-weight: 750;
    letter-spacing: -0.05em;
    line-height: 1;
  }

  .brand-byline,
  .current-area {
    color: var(--color-text-muted);
    font-size: 0.75rem;
    line-height: 1.2;
  }

  .brand-byline { max-width: 6ch; }

  .current-area {
    padding-left: 1rem;
    border-left: 1px solid var(--color-border);
  }

  .brand:hover { color: var(--color-accent-text); }

  .nav-actions,
  .logout-control,
  .logout-form {
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }

  .nav-actions > a {
    display: inline-flex;
    min-height: 2.75rem;
    align-items: center;
    padding-inline: 0.75rem;
    color: var(--color-text-muted);
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
  }

  .workbench-tabs {
    display: flex;
    gap: 0.25rem;
  }

  .workbench-tabs a {
    display: grid;
    min-height: 2.75rem;
    min-width: 5.5rem;
    place-items: center;
    padding: 0.6rem 0.85rem;
    border-radius: var(--radius-sm);
    color: var(--color-text-muted);
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
  }

  .workbench-tabs a:hover {
    background: var(--color-surface-muted);
    color: var(--color-text);
  }

  .workbench-tabs a[aria-current="page"] {
    background: var(--color-surface-accent);
    color: var(--color-accent-text);
  }

  .nav-status {
    max-width: 15rem;
    color: var(--color-text-muted);
    font-size: 0.83rem;
  }

  .nav-status[data-error="true"] { color: var(--color-danger); }

  .page-main { min-height: calc(100dvh - var(--header-height)); }

  .surface-app .page-main,
  .surface-auth .page-main {
    width: min(calc(100% - 2rem), var(--content-width));
    margin-inline: auto;
    padding-block: clamp(2rem, 4vw, 3.5rem);
  }

  .landing-spread {
    display: grid;
    min-height: 42rem;
    grid-template-columns: minmax(28rem, 0.95fr) minmax(32rem, 1.05fr);
    align-items: center;
    gap: clamp(2.5rem, 6vw, 5rem);
    padding-block: clamp(4rem, 8vw, 7rem);
  }

  .landing-intro {
    display: flex;
    min-width: 0;
    flex-direction: column;
    align-items: flex-start;
  }

  .landing-intro h1 {
    max-width: 22ch;
    margin-bottom: 1.5rem;
    font-size: clamp(2.25rem, 3.6vw, 3rem);
    text-wrap: balance;
  }

  .lede {
    max-width: 38rem;
    margin-bottom: 0;
    color: var(--color-text-muted);
    font-size: 1.05rem;
    line-height: 1.75;
  }

  .publication-demo {
    display: grid;
    min-width: 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    padding: 1rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface-muted);
  }

  .example-label {
    grid-column: 1 / -1;
    margin: 0;
    color: var(--color-text-muted);
    font-size: 0.78rem;
    font-weight: 650;
  }

  .brief-specimen,
  .result-sheet {
    position: relative;
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    color: var(--color-text);
  }

  .sheet-label {
    display: flex;
    min-height: 2.5rem;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.55rem 0.75rem;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-surface-muted);
    color: var(--color-text-muted);
    font-size: 0.7rem;
    font-weight: 600;
  }

  .issued-mark {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--color-success);
  }

  .issued-mark::before {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--color-success);
    content: "";
  }

  .brief-copy { padding: 1.25rem; }

  .brief-copy h2 {
    margin-bottom: 1rem;
    font-size: 1.5rem;
  }

  .brief-copy p {
    margin-bottom: 0.85rem;
    color: var(--color-text-muted);
    font-size: 0.9rem;
    line-height: 1.7;
  }

  .sheet-note {
    padding: 0.75rem;
    border-top: 1px solid var(--color-border);
    color: var(--color-text-muted);
    font-size: 0.75rem;
  }

  .result-address {
    padding: 0.75rem;
    border-bottom: 1px solid var(--color-border);
    color: var(--color-accent-text);
    font-family: var(--font-mono);
    font-size: 0.72rem;
  }

  .result-preview { padding: 1.25rem; }

  .result-name {
    margin-bottom: 1.5rem;
    color: var(--color-text-muted);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
  }

  .result-preview h2 {
    max-width: 13ch;
    margin-bottom: 0.85rem;
    font-size: 1.5rem;
  }

  .result-preview > p {
    color: var(--color-text-muted);
    font-size: 0.9rem;
  }

  .result-detail {
    display: block;
    margin-top: 1.5rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--color-border);
    color: var(--color-text-muted);
    font-size: 0.72rem;
  }

  .issue-action {
    grid-column: 1 / -1;
    justify-self: start;
  }

  .issue-action-meta { display: none; }

  .workflow-section { padding-block: clamp(3.5rem, 7vw, 6rem); }

  .workflow-section > h2 {
    max-width: 24ch;
    margin-bottom: 2rem;
  }

  .workflow-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    list-style: none;
  }

  .workflow-step { padding: 1.75rem; }

  .workflow-step + .workflow-step { border-inline-start: 1px solid var(--color-border); }

  .workflow-step h3 {
    margin-bottom: 0.75rem;
    font-size: 1.05rem;
  }

  .workflow-step h3 span {
    display: block;
    margin-bottom: 0.35rem;
    color: var(--color-accent-text);
    font-size: 0.75rem;
    font-weight: 700;
  }

  .workflow-step p {
    margin-bottom: 0;
    color: var(--color-text-muted);
  }

  .landing-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    margin-bottom: 4rem;
    padding: 2rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
  }

  .landing-cta h2 {
    max-width: 24ch;
    margin-bottom: 0;
  }

  .landing-footer {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding-block: 2rem;
    border-top: 1px solid var(--color-border);
    color: var(--color-text-muted);
    font-size: 0.85rem;
  }

  .auth-threshold {
    display: grid;
    min-width: 0;
    width: min(100%, 58rem);
    min-height: 34rem;
    grid-template-columns: minmax(14rem, 0.7fr) minmax(22rem, 1.3fr);
    margin-inline: auto;
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
  }

  .auth-index {
    display: grid;
    min-width: 0;
    grid-column: 1;
    grid-row: 1;
    align-content: center;
    gap: 0.75rem;
    padding: 2rem;
    border-inline-end: 1px solid var(--color-border);
    background: var(--color-surface-muted);
  }

  .auth-index p {
    display: flex;
    align-items: center;
    margin: 0;
    color: var(--color-text-muted);
    font-size: 0.88rem;
  }

  .auth-index p::before {
    margin-right: 0.5rem;
    width: 0.4rem;
    height: 0.4rem;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--color-success);
    content: "";
  }

  .auth-sheet {
    display: grid;
    min-width: 0;
    grid-column: 2;
    grid-row: 1;
    align-content: center;
    padding: clamp(2rem, 6vw, 4.5rem);
  }

  .auth-sheet h1 {
    max-width: 18ch;
    margin-bottom: 0.75rem;
    font-size: clamp(1.8rem, 3.5vw, 2.4rem);
  }

  .auth-reassurance {
    max-width: 34rem;
    margin-bottom: 2rem;
    color: var(--color-text-muted);
  }

  form:not(.logout-form) {
    display: grid;
    gap: 1.15rem;
  }

  .auth-sheet form { max-width: 30rem; }

  .field,
  .brief-field {
    display: grid;
    min-width: 0;
    gap: 0.5rem;
  }

  label { font-weight: 650; }

  input,
  textarea {
    width: 100%;
    border: 1px solid var(--color-control-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
  }

  input {
    min-height: 3rem;
    padding: 0.7rem 0.85rem;
  }

  input[aria-invalid="true"] {
    border-color: var(--color-danger);
    box-shadow: 0 0 0 0.2rem rgb(180 35 24 / 0.12);
  }

  textarea {
    min-height: 16rem;
    padding: 0.9rem;
    line-height: 1.65;
    resize: vertical;
  }

  .form-help,
  #brief-help {
    margin-block: -0.15rem 0;
    color: var(--color-text-muted);
    font-size: 0.88rem;
  }

  .error {
    min-height: 1.45em;
    margin-bottom: 0;
    color: var(--color-danger);
    font-size: 0.9rem;
  }

  .dashboard-heading,
  .page-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 2rem;
    margin-bottom: 2rem;
  }

  .dashboard-heading h1,
  .page-heading h1 {
    margin-bottom: 0.35rem;
    font-size: clamp(1.8rem, 3.5vw, 2.4rem);
  }

  .dashboard-heading p,
  .page-heading p {
    margin-bottom: 0;
    color: var(--color-text-muted);
  }

  .publication-index {
    display: grid;
    gap: 0.75rem;
  }

  .publication-row {
    display: grid;
    min-width: 0;
    grid-template-columns: auto minmax(0, 1fr) minmax(10rem, 0.5fr) minmax(22rem, 1fr) auto;
    align-items: center;
    gap: 1.25rem;
    padding: 1rem 1.25rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
  }

  .publication-row h2 {
    min-width: 0;
    margin-bottom: 0;
    font-size: 1rem;
    letter-spacing: -0.015em;
    overflow-wrap: anywhere;
  }

  .row-title {
    display: flex;
    min-height: 2.75rem;
    align-items: center;
    color: var(--color-text);
    text-decoration: none;
  }

  .row-title:hover { color: var(--color-accent-text); }

  .publication-address {
    min-width: 0;
    margin-bottom: 0;
    color: var(--color-text-muted);
    font-family: var(--font-mono);
    font-size: 0.78rem;
    overflow-wrap: anywhere;
  }

  .status-punch {
    width: fit-content;
    margin-bottom: 0;
    padding: 0.3rem 0.6rem;
    border-radius: 999px;
    background: var(--color-surface-muted);
    color: var(--color-text-muted);
    font-size: 0.74rem;
    font-weight: 650;
    line-height: 1.2;
    white-space: nowrap;
  }

  .status-punch[data-state="published"] {
    background: var(--color-success-soft);
    color: var(--color-success);
  }

  .publication-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    flex-wrap: wrap;
  }

  .publication-analytics {
    display: grid;
    grid-template-columns: auto auto minmax(8rem, 1fr) minmax(6rem, 0.7fr);
    align-items: center;
    gap: 0.75rem;
    color: var(--color-text-muted);
    font-size: 0.78rem;
  }

  .publication-analytics > span { display: grid; }
  .publication-analytics strong { color: var(--color-text); font-size: 1rem; }
  .publication-analytics small { font-size: 0.7rem; }
  .analytics-sparkline { width: 100%; min-width: 5rem; color: var(--color-accent); }
  .analytics-disclaimer { margin-top: 1rem; color: var(--color-text-muted); font-size: 0.8rem; }

  .dashboard-empty {
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(18rem, 1.2fr);
    gap: clamp(2rem, 5vw, 4rem);
    padding: clamp(1.5rem, 4vw, 2.5rem);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
  }

  .empty-intro { max-width: 30rem; }
  .dashboard-empty h2 { margin-bottom: 0.75rem; }

  .pagination {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 1rem;
    margin-top: 1.5rem;
  }

  .pagination > :last-child { justify-self: end; }

  .dashboard-empty p {
    margin-bottom: 1.5rem;
    color: var(--color-text-muted);
  }

  .brief-example { margin: 0; }

  .brief-example > div {
    display: grid;
    grid-template-columns: minmax(6.5rem, 0.42fr) minmax(0, 1fr);
    gap: 1rem;
    padding: 0.7rem 0;
    border-bottom: 1px solid var(--color-border);
  }

  .brief-example > div:first-child { border-top: 1px solid var(--color-border); }

  .brief-example dt {
    color: var(--color-text-muted);
    font-size: 0.82rem;
    font-weight: 650;
  }

  .brief-example dd {
    min-width: 0;
    margin: 0;
    overflow-wrap: anywhere;
  }

  .author-workspace,
  .site-workspace { min-width: 0; }

  .author-heading {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(16rem, 0.6fr);
    align-items: end;
    gap: 2rem;
    margin-bottom: 2rem;
  }

  .author-heading h1 {
    max-width: 20ch;
    margin-bottom: 0;
    font-size: clamp(1.9rem, 4vw, 2.6rem);
    text-wrap: balance;
  }

  .author-heading p {
    max-width: 36rem;
    margin-bottom: 0.3rem;
    color: var(--color-text-muted);
  }

  .author-composition {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(18rem, 0.65fr);
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
  }

  .author-sheet {
    min-width: 0;
    padding: clamp(1.5rem, 4vw, 2.5rem);
  }

  .author-workspace form,
  .source-sheet form {
    gap: 1.25rem;
  }

  .brief-field label { width: fit-content; }

  .author-workspace textarea {
    min-height: clamp(23rem, 50vh, 35rem);
    padding: 1rem;
    background: var(--color-surface);
  }

  .brief-guidance {
    display: grid;
    align-content: start;
    gap: 2.5rem;
    padding: clamp(1.5rem, 4vw, 2.25rem);
    border-inline-start: 1px solid var(--color-border);
    background: var(--color-surface-muted);
  }

  .brief-checklist h2,
  .author-example h2 {
    margin-bottom: 0.8rem;
    font-size: 1rem;
    letter-spacing: -0.015em;
  }

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

  .brief-checklist li {
    padding: 0.55rem 0;
    border-bottom: 1px solid var(--color-border);
    color: var(--color-text-muted);
    font-size: 0.9rem;
  }

  .brief-checklist li:first-child { border-top: 1px solid var(--color-border); }

  .author-example {
    padding-top: 1rem;
    border-top: 1px solid var(--color-border);
  }

  .author-example p {
    margin-bottom: 0;
    color: var(--color-text-muted);
    line-height: 1.7;
  }

  .source-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
  }

  .save-context {
    display: grid;
    gap: 0.2rem;
  }

  .save-explainer,
  .publish-explainer {
    max-width: 31rem;
    margin: 0;
    color: var(--color-text-muted);
    font-size: 0.86rem;
  }

  .source-change-state {
    min-height: 1.25em;
    margin: 0;
    color: var(--color-danger);
    font-size: 0.82rem;
    font-weight: 650;
  }

  .site-workspace {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(19rem, 0.42fr);
    align-items: start;
    gap: 1.5rem;
  }

  .source-sheet {
    min-width: 0;
    padding: clamp(1.5rem, 4vw, 2.5rem);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
  }

  .source-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 2rem;
    margin-bottom: 1.75rem;
  }

  .source-heading h1 {
    max-width: 20ch;
    margin-bottom: 0;
    font-size: clamp(1.8rem, 3.5vw, 2.4rem);
  }

  .source-heading p {
    max-width: 24rem;
    margin-bottom: 0.25rem;
    color: var(--color-text-muted);
  }

  .source-sheet textarea {
    min-height: clamp(21rem, 46vh, 31rem);
    padding: 1rem;
  }

  .generated-identity {
    margin-block: 0.75rem 0.5rem;
    border-top: 1px solid var(--color-border);
  }

  .generated-identity h2 {
    margin: 0;
    padding: 0.85rem 0;
    border-bottom: 1px solid var(--color-border);
    font-size: 0.95rem;
  }

  .identity-row {
    display: grid;
    grid-template-columns: minmax(6rem, 0.25fr) minmax(0, 1fr);
    gap: 1rem;
    padding: 0.7rem 0;
    border-bottom: 1px solid var(--color-border);
  }

  .identity-row p,
  .identity-row strong {
    min-width: 0;
    margin: 0;
    overflow-wrap: anywhere;
  }

  .identity-row p {
    color: var(--color-text-muted);
    font-size: 0.82rem;
    font-weight: 650;
  }

  #slug-lock-help {
    margin: 0;
    padding-block: 0.75rem;
    color: var(--color-text-muted);
    font-size: 0.85rem;
  }

  .issue-rail {
    position: sticky;
    top: calc(var(--header-height) + 1.5rem);
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    color: var(--color-text);
  }

  .issue-heading,
  .public-state,
  .publish-action,
  .public-link-row,
  .deployment-log { padding: 1.15rem; }

  .issue-heading,
  .public-state,
  .publish-action,
  .public-link-row { border-bottom: 1px solid var(--color-border); }

  .issue-heading h2 {
    margin-bottom: 0.5rem;
    font-size: 1.25rem;
  }

  .issue-heading p,
  .issue-rail .publish-explainer,
  .deployment-empty {
    margin-bottom: 0;
    color: var(--color-text-muted);
    font-size: 0.86rem;
  }

  .public-state h3,
  .deployment-log h3 {
    margin-bottom: 0.65rem;
    color: var(--color-text-muted);
    font-size: 0.78rem;
    letter-spacing: 0;
  }

  #deployment-state {
    display: flex;
    min-height: 1.6em;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0;
    color: var(--color-text);
    font-weight: 650;
  }

  #deployment-state::before {
    content: "";
    width: 0.65rem;
    height: 0.65rem;
    flex: 0 0 auto;
    border: 1px solid var(--color-border-strong);
    border-radius: 50%;
    background: var(--color-surface);
  }

  #deployment-state[data-state="requesting"]::before,
  #deployment-state[data-state="queued"]::before,
  #deployment-state[data-state="checking"]::before,
  #deployment-state[data-state="generating"]::before,
  #deployment-state[data-state="validating"]::before,
  #deployment-state[data-state="uploading"]::before {
    border-color: var(--color-accent);
    background: var(--color-accent);
  }

  #deployment-state[data-state="published"]::before {
    border-color: var(--color-success);
    background: var(--color-success);
  }

  #deployment-state[data-state="failed"]::before,
  #deployment-state[data-state="stale"]::before,
  #deployment-state[data-state="timeout"]::before {
    border-color: var(--color-danger);
    background: var(--color-danger);
  }

  #deployment-state[data-state="unpublished"]::before,
  #deployment-state[data-state="superseded"]::before {
    border-color: var(--color-border-strong);
    background: var(--color-surface-muted);
  }

  .publish-action {
    display: grid;
    gap: 0.7rem;
  }

  .publish-disabled-reason {
    min-height: 1.25em;
    margin: 0;
    color: var(--color-danger);
    font-size: 0.8rem;
    font-weight: 650;
  }

  .publish-action button,
  .public-link-row .button { width: 100%; }

  .issue-rail .button-secondary {
    border-color: var(--color-control-border);
    background: var(--color-surface);
    color: var(--color-text);
  }

  .issue-rail .button-secondary:hover {
    border-color: var(--color-border-strong);
    background: var(--color-surface-muted);
    color: var(--color-text);
  }

  .issue-rail :where(a, button):focus-visible {
    outline: 3px solid var(--color-focus);
    outline-offset: 3px;
  }

  .public-link-row { margin: 0; }

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

  .deployment-history li {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.75rem;
    padding: 0.7rem 0;
    border-bottom: 1px solid var(--color-border);
    font-size: 0.82rem;
  }

  .deployment-history li:first-child { border-top: 1px solid var(--color-border); }

  .deployment-history li > :last-child {
    color: var(--color-text-muted);
    font-family: var(--font-mono);
    font-size: 0.72rem;
    white-space: nowrap;
  }

  .deployment-status {
    min-width: 0;
    color: var(--color-text);
    font-weight: 650;
    overflow-wrap: anywhere;
  }

  .deployment-status[data-state="published"] { color: var(--color-success); }
  .deployment-status[data-state="failed"] { color: var(--color-danger); }
  .deployment-status[data-state="superseded"] { color: var(--color-text-muted); }

  .surface-app .page-main > form,
  .surface-app .page-main > section { margin-bottom: 1.25rem; }

  .surface-app .page-main > section:not(.dashboard) {
    padding: clamp(1.25rem, 4vw, 2rem);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
  }

  .surface-app .page-main > section h2 { font-size: 1.35rem; }
  .surface-app ul { padding-left: 1.2rem; }

  [hidden] { display: none !important; }

  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  @media (max-width: 1060px) {
    .landing-spread {
      grid-template-columns: minmax(0, 1fr);
      gap: 2.5rem;
    }

    .landing-intro { max-width: 42rem; }
  }

  @media (max-width: 760px) {
    .publication-analytics {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .analytics-sparkline,
    .publication-analytics > span:last-child {
      grid-column: 1 / -1;
    }

    .nav-actions { gap: 0.35rem; }

    .nav-actions .button {
      min-height: 2.75rem;
      padding: 0.55rem 0.7rem;
      font-size: 0.88rem;
    }

    .nav-status {
      position: absolute;
      top: calc(var(--header-height) - 0.1rem);
      right: 1rem;
      max-width: calc(100vw - 2rem);
      padding: 0.35rem 0.55rem;
      border: 1px solid var(--color-border);
      border-radius: var(--radius-sm);
      background: var(--color-surface);
    }

    .workflow-list,
    .auth-threshold,
    .author-heading,
    .author-composition,
    .site-workspace {
      grid-template-columns: minmax(0, 1fr);
    }

    .workflow-step + .workflow-step {
      border-top: 1px solid var(--color-border);
      border-inline-start: 0;
    }

    .landing-cta,
    .landing-footer,
    .dashboard-heading,
    .page-heading,
    .source-heading {
      align-items: flex-start;
      flex-direction: column;
    }

    .auth-threshold { min-height: auto; }

    .auth-index {
      grid-column: auto;
      grid-row: auto;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 0.5rem;
      padding: 1rem 1.5rem;
      border-top: 1px solid var(--color-border);
      border-inline-end: 0;
      order: 2;
    }

    .auth-index p { font-size: 0.78rem; }

    .auth-sheet {
      grid-column: auto;
      grid-row: auto;
      padding: clamp(2rem, 8vw, 3rem);
    }

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

    .publication-actions {
      width: 100%;
      justify-content: flex-start;
    }

    .publication-actions .button { flex: 1; }
    .dashboard-empty { grid-template-columns: minmax(0, 1fr); }

    .brief-guidance {
      border-top: 1px solid var(--color-border);
      border-inline-start: 0;
    }

    .issue-rail {
      position: static;
      top: auto;
    }
  }

  @media (max-width: 480px) {
    .site-nav { gap: 0.35rem; }

    .brand-byline,
    .current-area { display: none; }

    .nav-actions,
    .logout-control { gap: 0.25rem; }

    .workbench-tabs a {
      min-width: auto;
      padding-inline: 0.55rem;
      font-size: 0.78rem;
    }

    .surface-app .page-main,
    .surface-auth .page-main,
    .shell { width: min(calc(100% - 1.25rem), var(--content-width)); }

    .logout-form .button { padding-inline: 0.65rem; }

    .landing-spread {
      min-height: 0;
      padding-block: 3rem;
    }

    .landing-intro h1 { font-size: clamp(2.15rem, 11vw, 2.8rem); }

    .publication-demo {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      padding: 0.75rem;
    }

    .example-label,
    .issue-action { grid-column: 1; }

    .issue-action { width: 100%; }
    .landing-cta .button { width: 100%; }

    .author-heading h1,
    .source-heading h1 { font-size: clamp(1.8rem, 9vw, 2.25rem); }

    .source-heading { gap: 0.75rem; }

    .source-actions {
      align-items: stretch;
      flex-direction: column;
    }

    .source-actions button { width: 100%; }
    .identity-row { grid-template-columns: minmax(0, 1fr); gap: 0.25rem; }
  }

  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }

    *,
    *::before,
    *::after {
      scroll-behavior: auto !important;
      transition-duration: 0.01ms !important;
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
    }
  }