*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font-family: var(--font-body, system-ui, -apple-system, sans-serif); line-height: 1.6; color: var(--color-text, #1a1a2e); background: var(--color-bg, #fff); min-height: 100vh; display: flex; flex-direction: column; position: relative; }
main { flex: 1; }
a { color: var(--color-accent, #6366f1); }
.aup-skip-link {
position: absolute;
inset-inline-start: 1rem;
inset-block-start: -3.5rem;
z-index: 1000;
padding: 0.5rem 1rem;
border-radius: 4px;
background: var(--color-text, #1a1a2e);
color: var(--color-bg, #fff);
font-weight: 600;
text-decoration: none;
transition: inset-block-start 0.15s;
}
.aup-skip-link:focus {
inset-block-start: 1rem;
outline: 2px solid var(--color-accent, #6366f1);
outline-offset: 2px;
}
:root {
--page-max: var(--container-max, 1280px);
}
body > main {
width: 100%;
max-width: var(--aup-content-max, none);
margin-left: auto;
margin-right: auto;
box-sizing: border-box;
}
body > .aup-app-footer,
body > header.aup-app-header > .aup-app-header-bar,
body > header.aup-app-header > .aup-app-header-strip {
width: 100%;
max-width: var(--page-max);
margin-left: auto;
margin-right: auto;
padding-left: var(--page-gutter);
padding-right: var(--page-gutter);
box-sizing: border-box;
}
.container { max-width: var(--page-max); margin: 0 auto; padding: 0 var(--page-gutter); width: 100%; }
.page-header { padding: 3rem 0 2rem; }
.page-header h1 { margin: 0 0 0.5rem; font-size: 2rem; font-weight: 700; }
.page-header-desc { margin: 0; color: var(--color-text-muted, #64748b); font-size: 1.1rem; }
.section-header { padding: 2rem 0 1rem; }
.section-label { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0; color: var(--color-accent, #6366f1); margin-bottom: 0.25rem; }
.section-title { margin: 0 0 0.5rem; font-size: 1.5rem; font-weight: 600; }
.section-desc { margin: 0; color: var(--color-text-muted, #64748b); }
.aup-input-field,
.aup-editor {
display: grid;
gap: 0.45rem;
width: 100%;
}
.aup-input-label,
.aup-editor-label {
color: color-mix(in srgb, var(--color-text, #111827) 82%, var(--color-dim, #64748b));
font-size: 0.86rem;
font-weight: 720;
}
.aup-input-control,
.aup-editor-control {
width: 100%;
min-height: 2.65rem;
padding: 0.62rem 0.75rem;
border: 1px solid color-mix(in srgb, var(--color-border, #e2e8f0) 82%, transparent);
border-radius: var(--radius-lg, 8px);
color: var(--color-text, #111827);
background: color-mix(in srgb, var(--color-surface, #f8fafc) 92%, var(--color-bg, #fff));
font: inherit;
}
.aup-input-control:focus,
.aup-editor-control:focus {
outline: 2px solid color-mix(in srgb, var(--color-accent, #6366f1) 34%, transparent);
outline-offset: 1px;
border-color: color-mix(in srgb, var(--color-accent, #6366f1) 62%, var(--color-border, #e2e8f0));
}
.aup-input-control[role="switch"] {
width: 2.6rem;
min-height: 1.35rem;
accent-color: var(--color-accent, #6366f1);
}
.aup-input-control[type="range"] {
padding-inline: 0;
accent-color: var(--color-accent, #6366f1);
}
progress.aup-input-control {
padding: 0;
overflow: hidden;
accent-color: var(--color-accent, #6366f1);
}
.aup-editor-control {
min-height: 12rem;
font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
font-size: 0.92rem;
line-height: 1.55;
resize: vertical;
}
.aup-action[data-exec][data-exec-state="running"] {
cursor: wait;
opacity: 0.72;
}
.aup-action[data-exec][data-exec-state="error"] {
border-color: color-mix(in srgb, var(--color-error, #dc2626) 68%, var(--color-border, #e2e8f0));
}
.aup-exec-result {
margin-top: 0.55rem;
padding: 0.62rem 0.75rem;
border: 1px solid color-mix(in srgb, var(--color-border, #e2e8f0) 82%, transparent);
border-radius: var(--radius-lg, 8px);
background: color-mix(in srgb, var(--color-surface, #f8fafc) 94%, var(--color-bg, #fff));
color: color-mix(in srgb, var(--color-text, #111827) 84%, var(--color-dim, #64748b));
font-size: 0.86rem;
line-height: 1.45;
}
.aup-exec-result:empty {
display: none;
}
.aup-exec-result[data-state="success"] {
border-color: color-mix(in srgb, var(--color-success, #16a34a) 52%, var(--color-border, #e2e8f0));
color: var(--color-text, #111827);
}
.aup-exec-result[data-state="error"] {
border-color: color-mix(in srgb, var(--color-error, #dc2626) 58%, var(--color-border, #e2e8f0));
color: var(--color-error, #dc2626);
}
main .aup-view[data-variant="settings-sidebar"] {
position: sticky;
top: 88px;
max-height: calc(100vh - 112px);
overflow: auto;
padding: 1rem;
border: 1px solid color-mix(in srgb, var(--color-border, #e2e8f0) 78%, transparent);
border-radius: var(--radius-lg, 8px);
background:
linear-gradient(180deg, color-mix(in srgb, var(--color-accent, #6366f1) 9%, transparent), transparent 42%),
color-mix(in srgb, var(--color-surface, #f8fafc) 94%, var(--color-bg, #fff));
box-shadow: 0 20px 56px color-mix(in srgb, #000 10%, transparent);
}
main .aup-view[data-variant="settings-sidebar"] > .aup-text:first-child {
margin: 0 0 0.65rem;
padding: 0 0 0.8rem;
border-bottom: 1px solid color-mix(in srgb, var(--color-border, #e2e8f0) 70%, transparent);
color: var(--color-text, #111827);
font-size: 0.86rem;
font-weight: 800;
letter-spacing: 0;
text-transform: none;
}
main .aup-view[data-variant="settings-sidebar"] .aup-action {
min-height: 2.35rem;
margin: 0.12rem 0;
padding: 0.45rem 0.65rem;
border: 1px solid transparent;
border-radius: var(--radius-lg, 8px);
color: color-mix(in srgb, var(--color-text, #111827) 76%, var(--color-dim, #64748b));
font-weight: 700;
text-decoration: none;
}
main .aup-view[data-variant="settings-sidebar"] .aup-action:hover {
color: var(--color-text, #111827);
background: color-mix(in srgb, var(--color-accent, #6366f1) 8%, transparent);
}
main .aup-view[data-variant="settings-sidebar"] .aup-action[data-variant="primary"] {
width: 100%;
margin: 0.12rem 0;
border-color: color-mix(in srgb, var(--color-accent, #6366f1) 36%, transparent);
color: var(--color-text, #111827);
background:
linear-gradient(90deg, color-mix(in srgb, var(--color-accent, #6366f1) 16%, transparent), transparent),
color-mix(in srgb, var(--color-surface, #f8fafc) 86%, var(--color-accent, #6366f1));
box-shadow: none;
}
main .aup-view[data-variant="settings-content"] {
width: min(100%, 860px);
padding: 0.5rem 0 4rem;
}
main .aup-view[data-variant="settings-content"] > .aup-text[data-variant="badge"]:first-child {
width: fit-content;
margin: 0 0 1rem;
padding: 0.32rem 0.58rem;
border: 1px solid color-mix(in srgb, var(--color-accent, #6366f1) 34%, var(--color-border, #e2e8f0));
border-radius: 999px;
color: var(--color-accent, #6366f1);
background: color-mix(in srgb, var(--color-accent, #6366f1) 8%, transparent);
font-size: 0.78rem;
font-weight: 800;
letter-spacing: 0;
}
main .aup-view[data-variant="settings-content"] > .aup-text[data-level="1"] {
max-width: 780px;
margin: 0 0 1rem;
color: var(--color-text, #111827);
font-family: var(--font-heading, var(--font-body, system-ui, sans-serif));
font-size: clamp(2.4rem, 6vw, 4.8rem);
font-weight: 820;
line-height: 0.98;
letter-spacing: 0;
}
main .aup-view[data-variant="settings-content"] > .aup-text:not([data-level]):not([data-mode]) {
max-width: 760px;
margin: 0 0 1.05rem;
color: color-mix(in srgb, var(--color-text, #111827) 82%, var(--color-dim, #64748b));
font-size: 1.02rem;
line-height: 1.82;
}
main .aup-view[data-variant="settings-content"] > .aup-text[data-level="2"] {
margin: 2.5rem 0 0.75rem;
padding-top: 1.25rem;
border-top: 1px solid color-mix(in srgb, var(--color-border, #e2e8f0) 68%, transparent);
color: var(--color-text, #111827);
font-family: var(--font-heading, var(--font-body, system-ui, sans-serif));
font-size: clamp(1.45rem, 3vw, 2rem);
font-weight: 760;
line-height: 1.16;
letter-spacing: 0;
}
main .aup-view[data-variant="settings-content"] > .aup-view[data-layout="row"] {
gap: 0.75rem;
margin-top: 1.4rem;
}
main .aup-view[data-variant="settings-content"] > .aup-view[data-layout="row"] .aup-action {
min-height: 2.55rem;
padding: 0.55rem 0.9rem;
border: 1px solid color-mix(in srgb, var(--color-border, #e2e8f0) 72%, transparent);
border-radius: 999px;
color: var(--color-text, #111827);
background: color-mix(in srgb, var(--color-surface, #f8fafc) 86%, transparent);
font-weight: 800;
text-decoration: none;
box-shadow: none;
}
main .aup-view[data-variant="settings-content"] > .aup-view[data-layout="row"] .aup-action[data-variant="primary"] {
border-color: color-mix(in srgb, var(--color-accent, #6366f1) 52%, transparent);
color: var(--color-on-accent, #fff);
background: linear-gradient(
135deg,
var(--color-accent, #6366f1),
var(--color-accent-secondary, var(--color-accent, #6366f1))
);
}
main .aup-view[data-variant="settings-content"] > .aup-view[data-layout="row"] .aup-action:hover {
transform: translateY(-1px);
}
@media (max-width: 860px) {
main .aup-view[data-variant="settings-sidebar"] {
position: static;
width: 100% !important;
max-height: none;
}
main .aup-view[data-variant="settings-content"] {
width: 100%;
}
}
.aup-deck-frame .aup-overlay-shell.open,
.aup-overlay-shell.open {
display: block;
position: relative;
min-height: 160px;
width: 100%;
}
.aup-overlay-shell.open > .aup-overlay-backdrop {
position: absolute;
border-radius: var(--radius-lg, 12px);
}
.aup-overlay-shell.open > .aup-overlay-dialog,
.aup-overlay-shell.open > .aup-overlay-drawer {
position: absolute;
max-width: min(92%, 420px);
max-height: 70%;
}
.aup-overlay-shell[data-mode="toast"].open {
min-height: auto;
}
.aup-overlay-toast {
display: inline-flex;
gap: 0.5rem;
padding: 0.75rem 1rem;
border-radius: var(--radius-md, 8px);
background: var(--color-surface, #f8fafc);
border: 1px solid var(--color-border, #e2e8f0);
box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}
.aup-explorer-shell,
.aup-surface-shell,
.aup-wm-shell,
.aup-chat-shell,
.aup-cmt-shell,
.aup-entity-overview-shell,
.aup-terminal-shell {
background: var(--card-bg, var(--color-surface, #fff));
border: var(--card-border, 1px solid var(--color-border, #e2e8f0));
border-radius: var(--radius-lg, 12px);
overflow: hidden;
}
.aup-explorer-header,
.aup-surface-chrome,
.aup-wm-titlebar,
.aup-chat-header,
.aup-cmt-header,
.aup-entity-overview-header,
.aup-terminal-titlebar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
padding: 0.55rem 0.85rem;
border-bottom: 1px solid var(--color-border, #e2e8f0);
font-weight: 600;
font-size: 0.9rem;
}
.aup-surface-badge,
.aup-wm-badge,
.aup-chat-badge,
.aup-cmt-badge {
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--color-dim, #64748b);
}
.aup-explorer-list { list-style: none; margin: 0; padding: 0.35rem 0; }
.aup-explorer-item {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.35rem 0.85rem;
font-size: 0.9rem;
}
.aup-explorer-path { margin-left: auto; color: var(--color-dim, #64748b); font-size: 0.75rem; font-family: ui-monospace, monospace; }
.aup-explorer-root { font-size: 0.75rem; color: var(--color-dim, #64748b); }
.aup-surface-content,
.aup-wm-body { padding: 0.85rem; }
.aup-chat-shell { min-height: 220px; max-height: 360px; }
.aup-cb-history { flex: 1; overflow: auto; padding: 0.75rem; display: flex; flex-direction: column; gap: 0.55rem; }
.aup-cb-msg { border-radius: 8px; padding: 0.5rem 0.7rem; background: color-mix(in srgb, var(--color-surface, #f8fafc) 90%, transparent); }
.aup-cb-msg-user { align-self: flex-end; background: color-mix(in srgb, var(--color-accent, #6366f1) 14%, transparent); }
.aup-cb-role { display: block; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; color: var(--color-dim, #64748b); margin-bottom: 0.2rem; }
.aup-cb-bar { display: flex; gap: 0.4rem; padding: 0.55rem; border-top: 1px solid var(--color-border, #e2e8f0); }
.aup-cb-input { flex: 1; min-width: 0; padding: 0.4rem 0.55rem; border-radius: 6px; border: 1px solid var(--color-border, #e2e8f0); }
.aup-cb-send { padding: 0.4rem 0.75rem; border-radius: 6px; border: 1px solid var(--color-border, #e2e8f0); }
.aup-cb-bar--disabled { opacity: 0.65; }
.aup-chip-shell {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.2rem 0.65rem;
border-radius: 999px;
background: color-mix(in srgb, var(--color-accent, #6366f1) 10%, transparent);
color: var(--color-text, #111);
font-size: 0.85rem;
font-weight: 600;
margin-inline-end: 0.35rem;
}
.aup-chip-shell[data-color="success"] { background: color-mix(in srgb, #34a853 14%, transparent); color: #1e7e34; }
.aup-chip-shell[data-color="warning"] { background: color-mix(in srgb, #f9ab00 16%, transparent); color: #a66a00; }
.aup-chip-shell[data-color="error"] { background: color-mix(in srgb, #ea4335 14%, transparent); color: #c5221f; }
.aup-chip-shell[data-color="info"] { background: color-mix(in srgb, #1a73e8 12%, transparent); color: #1a73e8; }
.aup-chip-count {
min-width: 1.1rem;
padding: 0 0.3rem;
border-radius: 999px;
background: color-mix(in srgb, currentColor 12%, transparent);
font-size: 0.75rem;
text-align: center;
}
.aup-breadcrumb-shell .aup-breadcrumb-list {
display: flex;
flex-wrap: wrap;
gap: 0.25rem 0.35rem;
list-style: none;
margin: 0;
padding: 0;
font-size: 0.9rem;
}
.aup-breadcrumb-sep { margin: 0 0.15rem; color: var(--color-dim, #64748b); }
.aup-breadcrumb-current { font-weight: 600; }
.aup-kv-shell,
.aup-entity-card .aup-kv {
display: grid;
gap: 0.35rem;
padding: 0.65rem 0.85rem;
}
.aup-kv-row {
display: grid;
grid-template-columns: minmax(6rem, 34%) 1fr;
gap: 0.5rem;
padding: 0.25rem 0;
border-bottom: 1px solid color-mix(in srgb, var(--color-border, #e2e8f0) 70%, transparent);
font-size: 0.9rem;
}
.aup-kv-label { color: var(--color-dim, #64748b); font-weight: 600; }
.aup-kv-title,
.aup-entity-card-title {
margin: 0;
padding: 0.55rem 0.85rem 0;
font-size: 0.95rem;
font-weight: 700;
}
.aup-entity-cards { display: grid; gap: 0.65rem; padding: 0.65rem; }
.aup-entity-card {
border: 1px solid var(--color-border, #e2e8f0);
border-radius: var(--radius-md, 8px);
overflow: hidden;
}
.aup-pagination-shell {
display: inline-flex;
align-items: center;
gap: 0.65rem;
padding: 0.4rem 0.55rem;
border: 1px solid var(--color-border, #e2e8f0);
border-radius: 999px;
font-size: 0.85rem;
}
.aup-pagination-btn {
border: 0;
background: transparent;
color: var(--color-dim, #64748b);
cursor: not-allowed;
}
.aup-tooltip-shell {
position: relative;
display: inline-flex;
flex-direction: column;
align-items: flex-start;
gap: 0.35rem;
}
.aup-tooltip-content {
display: inline-block;
padding: 0.35rem 0.55rem;
border-radius: 6px;
background: var(--color-text, #111);
color: var(--color-bg, #fff);
font-size: 0.78rem;
max-width: 16rem;
}
.aup-terminal-shell { background: #0c0c0c; color: #e2e8f0; }
.aup-terminal-titlebar { border-bottom-color: #222; color: #94a3b8; }
.aup-terminal-body {
margin: 0;
padding: 0.75rem 0.9rem;
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 0.82rem;
line-height: 1.45;
white-space: pre-wrap;
min-height: 120px;
}
.aup-terminal-line { margin: 0; }
.aup-canvas-toolbar--static {
display: flex;
justify-content: space-between;
gap: 0.5rem;
padding: 0.4rem 0.65rem;
border-bottom: 1px solid var(--color-border, #e2e8f0);
font-size: 0.8rem;
color: var(--color-dim, #64748b);
}
.aup-canvas-area { padding: 0.5rem; }
.aup-cmt-list { padding: 0.65rem 0.85rem; display: grid; gap: 0.65rem; }
.aup-cmt-item {
border: 1px solid var(--color-border, #e2e8f0);
border-radius: 8px;
padding: 0.55rem 0.7rem;
}
.aup-cmt-meta {
display: flex;
justify-content: space-between;
gap: 0.5rem;
font-size: 0.8rem;
margin-bottom: 0.25rem;
}
.aup-cmt-body { margin: 0; font-size: 0.9rem; }
.aup-cmt-empty { padding: 0.85rem; color: var(--color-dim, #64748b); font-size: 0.9rem; }
.aup-calendar-agenda { display: grid; gap: 0.4rem; }
.aup-calendar-agenda-row { display: flex; gap: 0.75rem; font-size: 0.85rem; }
.aup-calendar-agenda-date { color: var(--color-dim, #64748b); min-width: 6rem; font-variant-numeric: tabular-nums; }
.aup-deck-widget-shell {
border: 1px solid var(--color-border, #e2e8f0);
border-radius: var(--radius-md, 8px);
overflow: hidden;
background: var(--color-surface, #fff);
}
.aup-deck-widget-chrome {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
padding: 0.55rem 0.85rem;
border-bottom: 1px solid var(--color-border, #e2e8f0);
font-weight: 600;
font-size: 0.9rem;
}
.aup-deck-widget-badge {
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--color-dim, #64748b);
}
.aup-deck-widget-body { padding: 0.85rem; }
.aup-deck-widget-note { margin: 0.5rem 0 0; font-size: 0.85rem; color: var(--color-dim, #64748b); }
.aup-afs-stat-value { font-size: 2rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.aup-afs-stat-label { color: var(--color-dim, #64748b); font-size: 0.9rem; }
.aup-dropzone-area {
display: grid;
gap: 0.35rem;
place-items: center;
min-height: 8rem;
padding: 1.25rem;
border: 2px dashed var(--color-border, #e2e8f0);
border-radius: 8px;
text-align: center;
}
.aup-finance-table, .aup-natal-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.aup-finance-table th, .aup-finance-table td,
.aup-natal-table th, .aup-natal-table td {
text-align: left;
padding: 0.35rem 0.5rem;
border-bottom: 1px solid var(--color-border, #e2e8f0);
}
.aup-progress-track {
height: 0.85rem;
border-radius: 999px;
background: color-mix(in srgb, var(--color-border, #e2e8f0) 80%, transparent);
overflow: hidden;
}
.aup-progress-fill {
height: 100%;
background: var(--color-accent, #6366f1);
}
.aup-searchable-dropdown-current {
padding: 0.45rem 0.65rem;
border: 1px solid var(--color-border, #e2e8f0);
border-radius: 6px;
margin-bottom: 0.5rem;
}
.aup-searchable-dropdown-list { list-style: none; margin: 0; padding: 0; }
.aup-searchable-dropdown-item { padding: 0.3rem 0.5rem; }
.aup-searchable-dropdown-item.selected { font-weight: 700; }
.aup-webgl-placeholder {
display: grid;
place-items: center;
min-height: 10rem;
background: color-mix(in srgb, var(--color-accent, #6366f1) 8%, transparent);
border-radius: 8px;
font-weight: 700;
}
.aup-post-editor-body { width: 100%; min-height: 8rem; font-family: inherit; }
.aup-type-block-body { white-space: pre-wrap; font-size: 0.9rem; }
.aup-xeyes-shell { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; padding: 16px 20px 8px; }
:root,
[data-tone][data-palette] {
  --ds-bg: var(--color-bg);
  --ds-surface: var(--color-surface);
  --ds-text: var(--color-text);
  --ds-dim: var(--color-dim);
  --ds-accent: var(--color-accent);
  --ds-accent-bg: var(--color-accent-bg);
  --ds-border: var(--color-border);
  --ds-error: var(--color-error);
  --ds-success: var(--color-success);
  --ds-radius: var(--radius-md);
  --ds-radius-sm: var(--radius-sm);
  --ds-radius-lg: var(--radius-lg);
  --ds-spacing: var(--space-element);
  --ds-spacing-block: var(--space-block);
  --ds-spacing-section: var(--space-section);
  --ds-font-body: var(--font-body);
  --ds-font-heading: var(--font-heading);
  --font-body: "Inter", "Noto Sans SC", "IBM Plex Sans JP", "Noto Sans JP", "PingFang SC", "Hiragino Kaku Gothic ProN", "Microsoft YaHei", system-ui, sans-serif;
  --color-dim: #52635d;
  --content-max: 44rem;
  --color-accent: #007b6a;
  --color-surface: #f4f7f5;
  --font-heading: "Sora", "Noto Sans SC", "IBM Plex Sans JP", "Noto Sans JP", "PingFang SC", "Hiragino Kaku Gothic ProN", "Microsoft YaHei", system-ui, sans-serif;
  --color-bg: #fcfdfc;
  --color-border: #d7e0dc;
  --container-max: 1120px;
  --font-mono: "JetBrains Mono", monospace;
  --color-text: #111a17;
  --card-bg: rgba(255, 255, 255, 0.9);
  --card-border: 1px solid rgba(29, 95, 84, 0.14);
  --color-accent-secondary: #1f7a6e;
  --color-hero-ink: #163b34;
  --color-hero-accent: #007b6a;
  --color-on-accent: #ffffff;
  --color-trace: #008f7a;
  --color-trace-soft: #d9f1eb;
  --font-display: "Sora", "Noto Sans SC", "IBM Plex Sans JP", "Noto Sans JP", "PingFang SC", "Hiragino Kaku Gothic ProN", "Microsoft YaHei", system-ui, sans-serif;
  --font-utility: "JetBrains Mono", "Noto Sans SC", "IBM Plex Sans JP", "Noto Sans JP", "PingFang SC", "Hiragino Kaku Gothic ProN", "Microsoft YaHei", ui-monospace, monospace;
  --grid-min-width: 250px;
  --heading-gradient: linear-gradient(135deg, #17211e, #008f7a 58%, #3152a3);
  --radius-lg: 6px;
  --shadow-card: 0 12px 34px rgba(25, 54, 48, 0.08);
  --shadow-hover: 0 18px 44px rgba(25, 54, 48, 0.11);
  --space-block: 20px;
  --space-section: 6rem;
  --type-display: clamp(4rem, 7.6vw, 8.2rem);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-mode="light"]),
  [data-tone][data-palette]:not([data-mode="light"]) {
    --color-dim: #98a8a3;
    --color-accent: #2ec8ae;
    --color-surface: #101d1a;
    --color-bg: #061211;
    --color-border: #20302b;
    --color-text: #e8f2ee;
    --card-bg: rgba(14, 27, 25, 0.94);
    --card-border: 1px solid rgba(79, 217, 192, 0.16);
    --color-accent-secondary: #4fd9c0;
    --color-hero-ink: #d8e7e2;
    --color-hero-accent: #55d8c1;
    --color-on-accent: #06120f;
    --color-trace: #2ec8ae;
    --color-trace-soft: #163f38;
    --heading-gradient: linear-gradient(135deg, #ffffff, #33d8bf 58%, #7aa7ff);
    --shadow-card: 0 12px 34px rgba(0, 0, 0, 0.24);
    --shadow-hover: 0 18px 44px rgba(0, 0, 0, 0.32);
  }
}
[data-tone][data-palette][data-mode="dark"] {
  --color-dim: #98a8a3;
  --color-accent: #2ec8ae;
  --color-surface: #101d1a;
  --color-bg: #061211;
  --color-border: #20302b;
  --color-text: #e8f2ee;
  --card-bg: rgba(14, 27, 25, 0.94);
  --card-border: 1px solid rgba(79, 217, 192, 0.16);
  --color-accent-secondary: #4fd9c0;
  --color-hero-ink: #d8e7e2;
  --color-hero-accent: #55d8c1;
  --color-on-accent: #06120f;
  --color-trace: #2ec8ae;
  --color-trace-soft: #163f38;
  --heading-gradient: linear-gradient(135deg, #ffffff, #33d8bf 58%, #7aa7ff);
  --shadow-card: 0 12px 34px rgba(0, 0, 0, 0.24);
  --shadow-hover: 0 18px 44px rgba(0, 0, 0, 0.32);

}
.portal-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: color-mix(in srgb, var(--color-bg, #fff) 82%, transparent);
  border-bottom: 1px solid transparent;
  padding: 0;
  backdrop-filter: blur(20px) saturate(1.1);
  transition:
    background 0.3s ease,
    border-color 0.3s ease;
}

.portal-header.scrolled {
  background: color-mix(in srgb, var(--color-bg, #fff) 92%, transparent);
  border-bottom-color: color-mix(in srgb, var(--color-border, #e5e7eb) 50%, transparent);
}

.portal-header .container {
  /* The header rides the shared content column (document-css --page-max /
     --page-gutter). Because it centers in the viewport on the SAME column as
     each section's content, brand/actions align with the body at every width
     with no reserve hack and no separate --header-content-max token. The
     .portal-header element keeps its full-bleed sticky background; only this
     container is bounded. */
  width: 100%;
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 0 var(--page-gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 76px;
  gap: 1.5rem;
  transition:
    min-height 0.2s ease,
    padding-block 0.2s ease;
}

/* Scroll-compact sticky state (arc#2390): toggled by script.js past a small
   scroll offset so the header doesn't permanently occupy its full height
   while reading long content. Desktop already fits one row, so this is a
   subtle height trim there; on mobile — where the compact layout below still
   spends real vertical space on a single row — it matters more. */
.portal-header.scrolled .container {
  min-height: 60px;
}

/* Header grammar: left group holds logo + main nav; right group holds
   language picker, mode toggle, and a reserved user-menu slot. */
.portal-header .header-left {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: clamp(1.5rem, 3vw, 2.6rem);
}

.portal-header .logo {
  min-width: max-content;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--font-display, "Sora", system-ui, sans-serif);
  font-weight: 460;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
  color: var(--color-text, #0f172a);
  text-decoration: none;
}

.portal-header .logo .logo-mark {
  display: inline-block;
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 2px;
  background: linear-gradient(
    135deg,
    var(--color-accent, #2563eb),
    var(--color-accent-secondary, var(--color-accent, #2563eb))
  );
}

/* When the site provides an inline SVG logo, hide the textual site name —
   the SVG is the brand mark — and size the SVG to header height. */
.portal-header .logo .logo-svg {
  display: inline-flex;
  align-items: center;
}

.portal-header .logo img.logo-svg,
.portal-header .logo .logo-svg svg {
  height: 1.65rem;
  width: auto;
  display: block;
  /* The wordmark uses currentColor so it follows light/dark mode; the
     branded gradient mark inside the SVG keeps its own colors. */
  color: var(--color-text, #0f172a);
}

.portal-header.has-logo-svg .logo {
  gap: 0;
}

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

.portal-header .main-nav {
  display: flex;
  align-items: center;
  gap: 1.4rem;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.portal-header .main-nav a {
  font-family: var(--font-mono, "JetBrains Mono", ui-monospace, monospace);
  display: inline-flex;
  align-items: center;
  padding: 0.4rem 0;
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--color-dim, #6b7280);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  transition: color 0.2s ease;
  position: relative;
}

.portal-header .main-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--color-accent, #2563eb);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.2s ease;
}

.portal-header .main-nav a:hover {
  color: var(--color-text, #0f172a);
}

.portal-header .main-nav a:hover::after {
  transform: scaleX(1);
}

/* Header controls: optional CTA + locale picker + mode toggle + user slot. */
.portal-header .header-controls {
  display: flex;
  align-items: center;
  gap: 0.42rem;
}

/* Primary CTA (nav item with variant:"cta") — a filled accent pill sized to
   the 32px control row so it reads as the header's main action rather than a
   stray label. Marketing sites opt in per nav item; default nav links are
   unaffected. */
.portal-header .nav-cta {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 0.95rem;
  margin-right: 0.25rem;
  border-radius: 999px;
  background: var(--color-accent, #2563eb);
  color: var(--accent-fg, #fff);
  font-family: var(--font-body, "Inter", system-ui, sans-serif);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  white-space: nowrap;
  transition:
    background 0.2s ease,
    transform 0.2s ease;
}

.portal-header .nav-cta:hover {
  background: color-mix(in srgb, var(--color-accent, #2563eb) 88%, #000);
  transform: translateY(-1px);
}

.portal-header .user-slot:empty {
  display: none;
}

.portal-header .user-slot {
  display: flex;
  align-items: center;
  gap: 0.42rem;
  margin-left: 0;
}

/* Align the runtime-rendered header-actions strip (.web/template/header-actions
   → .aup-app-header-action buttons, e.g. the anonymous Login trigger) with the
   portal control pills above: same 32px round pill, transparent fill, dim
   stroke/glyph, and accent hover. Only presentation — markup stays owned by
   the shared SSR renderer. */
.portal-header .user-slot .aup-app-header-action {
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: 999px;
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--color-border, #e5e7eb) 60%, transparent);
  color: var(--color-dim, #6b7280);
}

.portal-header .user-slot .aup-app-header-action:hover {
  color: var(--color-text, #0f172a);
  background: transparent;
  border-color: color-mix(in srgb, var(--color-accent, #2563eb) 40%, var(--color-border, #e5e7eb));
}

.portal-header .user-slot .aup-app-header-action svg {
  width: 16px;
  height: 16px;
}

/* Post-hydration authenticated state: keep the avatar trigger on the same
   32px control row. */
.portal-header .user-slot .aup-app-header-user-menu-trigger {
  height: 32px;
  box-sizing: border-box;
}

/* Mobile section-nav menu toggle (arc#2390) — hidden above the compact
   breakpoint (desktop keeps the inline nav; this button doesn't exist there
   visually), sized/shown by the compact-layout media query below. */
.portal-header-menu-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  border: 1px solid color-mix(in srgb, var(--color-border, #e5e7eb) 60%, transparent);
  border-radius: 999px;
  background: transparent;
  color: var(--color-dim, #6b7280);
  cursor: pointer;
  padding: 0;
  transition:
    background 0.2s,
    color 0.2s,
    border-color 0.2s;
}

.portal-header-menu-toggle:hover {
  color: var(--color-text, #0f172a);
  border-color: color-mix(in srgb, var(--color-accent, #2563eb) 40%, var(--color-border, #e5e7eb));
}

.portal-header-menu-toggle .icon-menu-close {
  display: none;
}

.portal-header.nav-open .portal-header-menu-toggle .icon-menu-open {
  display: none;
}

.portal-header.nav-open .portal-header-menu-toggle .icon-menu-close {
  display: block;
}

/* Click-outside-to-close backdrop for the mobile nav drawer. Sits below the
   sticky header (same stacking context) and above page content. */
.portal-header-backdrop {
  position: fixed;
  inset: 0;
  z-index: 998;
  background: color-mix(in srgb, #000 32%, transparent);
  border: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

.portal-header-backdrop[hidden] {
  display: none;
}

.portal-header .locale-picker {
  position: relative;
}

.portal-header .locale-picker-btn,
.portal-header .mode-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  height: 32px;
  padding: 0 0.65rem;
  border: 1px solid color-mix(in srgb, var(--color-border, #e5e7eb) 60%, transparent);
  border-radius: 999px;
  background: transparent;
  color: var(--color-dim, #6b7280);
  cursor: pointer;
  transition:
    background 0.2s,
    color 0.2s,
    border-color 0.2s;
  font-family: var(--font-mono, "JetBrains Mono", ui-monospace, monospace);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* Both are icon-only square pills (the locale picker is now a globe-only
   trigger aligned with the AUP app-header locale-switcher). */
.portal-header .locale-picker-btn,
.portal-header .mode-toggle {
  width: 32px;
  padding: 0;
}

.portal-header .locale-picker-btn:hover,
.portal-header .mode-toggle:hover {
  color: var(--color-text, #0f172a);
  border-color: color-mix(in srgb, var(--color-accent, #2563eb) 40%, var(--color-border, #e5e7eb));
}

.portal-header .locale-picker-btn .icon-globe {
  transition: transform 0.2s;
}

.portal-header .locale-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 152px;
  background: color-mix(in srgb, var(--color-bg, #fff) 96%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-border, #e5e7eb) 70%, transparent);
  border-radius: 12px;
  box-shadow: 0 22px 48px color-mix(in srgb, var(--color-text, #0f172a) 12%, transparent);
  padding: 6px;
  z-index: 100;
  backdrop-filter: blur(18px);
  display: flex;
  flex-direction: column;
}

.portal-header .locale-dropdown[hidden] {
  display: none;
}

.portal-header .locale-option {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.5rem 0.8rem;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--color-dim, #6b7280);
  font-family: var(--font-body, "Inter", system-ui, sans-serif);
  font-size: 0.86rem;
  font-weight: 460;
  text-align: left;
  cursor: pointer;
  transition:
    background 0.15s,
    color 0.15s;
}

.portal-header .locale-option:hover {
  background: color-mix(in srgb, var(--color-accent, #2563eb) 6%, transparent);
  color: var(--color-text, #0f172a);
}

.portal-header .locale-option.active {
  color: var(--color-accent, #2563eb);
  font-weight: 540;
}

.portal-header .locale-option.active::before {
  content: "•";
  color: var(--color-accent, #2563eb);
  font-weight: 700;
}

/* Show sun by default, moon when dark */
.portal-header .mode-toggle .icon-moon {
  display: none;
}
.portal-header .mode-toggle .icon-sun {
  display: block;
}
.portal-header .mode-toggle.is-dark .icon-moon {
  display: block;
}
.portal-header .mode-toggle.is-dark .icon-sun {
  display: none;
}

@media (max-width: 860px) {
  .portal-header .container {
    min-height: auto;
    /* Horizontal gutter stays var(--page-gutter) (shared column); only add
       vertical breathing room now that the row can wrap. */
    padding-block: 0.5rem;
    flex-wrap: wrap;
    gap: 0.75rem;
  }

  /* Only let the left group grow when it actually holds a nav (which needs the
     room / scrolls). A logo-only left group must stay its natural width, or it
     expands to fill the row and pushes the controls onto a second line — the
     stray line-break on minimal headers like aside. */
  .portal-header .container:has(.main-nav a) .header-left {
    flex: 1 1 auto;
    min-width: 0;
    gap: 1.25rem;
  }

  .portal-header .header-controls {
    flex-shrink: 0;
  }

  .portal-header .main-nav {
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
    gap: 1rem;
  }

  .portal-header .main-nav::-webkit-scrollbar {
    display: none;
  }

  .portal-header .main-nav a {
    white-space: nowrap;
  }
}

/* Compact mobile layout (arc#2390) — replaces the old behavior of stacking
   logo / section-nav / controls into three permanent rows (the actual bug
   reported: a sticky header eating a third of a 390×844 viewport). Brand +
   every essential action (nav entry point, language, theme, account) now
   stay on ONE row; the section nav moves into an expandable panel that
   overlays the page instead of pushing it down. Breakpoint matches the
   shared primitives-css.ts mobile cutoff (640px) for consistency across the
   fleet's header surfaces. */
@media (max-width: 640px) {
  .portal-header .container {
    flex-wrap: nowrap;
    min-height: 56px;
    padding-block: 0.4rem;
    gap: 0.5rem;
    /* .main-nav becomes an absolutely-positioned drawer below; .portal-header
       (position: sticky) is its containing block, so this only needs to stay
       a normal (non-positioned) flex row — no layout shift when the drawer
       opens/closes. */
  }

  /* The scrolled state's height floor is bounded below by the 44px touch
     targets themselves (criterion: every control stays >=44x44 in every
     state, scrolled included — so icons/pills never shrink here). The
     available lever is vertical padding: trimming it still yields a real,
     visible compaction (~58px -> ~49px) without an accessibility trade-off. */
  .portal-header.scrolled .container {
    min-height: 48px;
    padding-block: 0.15rem;
  }

  /* Matches (and overrides) the 860px block's `:has(.main-nav a) .header-left`
     rule at equal specificity + later source order — the nav no longer shares
     this row at all (it's an absolutely-positioned drawer, see .main-nav
     below), so the left group is just [logo, menu-toggle] and must stay
     content-sized instead of growing to fill the row. */
  .portal-header .container:has(.main-nav a) .header-left,
  .portal-header .header-left {
    flex: 0 1 auto;
    min-width: 0;
    gap: 0.35rem;
  }

  /* The nav no longer shares the row (it moved into the drawer below), so the
     left group is just the logo — never let it grow/shrink oddly. */
  .portal-header .logo {
    min-width: 0;
    overflow: hidden;
  }

  .portal-header .header-controls {
    flex-shrink: 0;
    gap: 0.25rem;
  }

  .portal-header .nav-cta {
    padding: 0 0.65rem;
    margin-right: 0;
    height: 44px;
  }

  /* Section-nav drawer: taken out of the row entirely and overlaid full-width
     below the header. Hidden (zero height, non-interactive) until
     .portal-header.nav-open is set by script.js's menu-toggle handler. */
  .portal-header .main-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    max-width: none;
    max-height: 0;
    overflow: hidden;
    overflow-x: visible;
    visibility: hidden;
    opacity: 0;
    background: var(--color-bg, #fff);
    border-bottom: 1px solid color-mix(in srgb, var(--color-border, #e5e7eb) 60%, transparent);
    box-shadow: 0 16px 32px color-mix(in srgb, var(--color-text, #0f172a) 10%, transparent);
    padding: 0 var(--page-gutter);
    transition:
      max-height 0.25s ease,
      opacity 0.2s ease,
      visibility 0.25s;
  }

  .portal-header.nav-open .main-nav {
    /* Bounded rather than unlimited, so a site with a long section list
       scrolls internally instead of pushing content below the viewport. */
    max-height: min(70vh, 420px);
    overflow-y: auto;
    visibility: visible;
    opacity: 1;
  }

  .portal-header .main-nav a {
    white-space: normal;
    width: 100%;
    min-height: 44px;
    padding: 0.7rem 0;
    font-size: 0.92rem;
    font-weight: 500;
    text-transform: none;
    letter-spacing: normal;
    border-bottom: 1px solid color-mix(in srgb, var(--color-border, #e5e7eb) 40%, transparent);
  }

  .portal-header .main-nav a:last-child {
    border-bottom: 0;
  }

  .portal-header .main-nav a::after {
    display: none;
  }

  .portal-header-menu-toggle {
    display: inline-flex;
  }

  /* Touch targets: every icon/control button must be at least 44×44 CSS px
     on touch-sized viewports (WCAG 2.5.5 / Apple & Material HIG), even though
     the desktop control row uses a tighter 32px pill. */
  .portal-header-menu-toggle,
  .portal-header .locale-picker-btn,
  .portal-header .mode-toggle {
    width: 44px;
    height: 44px;
  }

  .portal-header .user-slot .aup-app-header-action,
  .portal-header .user-slot .aup-app-header-user-menu-trigger {
    width: 44px;
    height: 44px;
  }
}

.site-footer {
  background: color-mix(in srgb, var(--color-bg, #fff) 94%, var(--color-accent, #008f7a) 6%);
  border-top: 1px solid color-mix(in srgb, var(--color-border, #d7dfdc) 72%, transparent);
  margin-top: 0;
  padding: clamp(2.5rem, 5vw, 4.25rem) 0 1.5rem;
}

.site-footer .container {
  margin: 0 auto;
  max-width: var(--page-max);
  padding: 0 var(--page-gutter);
}

.site-footer .footer-top {
  align-items: start;
  display: grid;
  gap: clamp(1.25rem, 3vw, 3rem);
  /* Two children today: the brand block and the link nav. The connection slot
     is optional and currently absent, so declaring its track unconditionally
     left an empty 0px column whose `gap` still applied, pushing the links one
     whole gap (48px at 1920, 3vw below that) short of the right edge. The
     track count has to follow the children that actually render. */
  grid-template-columns: minmax(0, 1fr) auto;
  padding-bottom: clamp(1.5rem, 3vw, 2.2rem);
}

.site-footer .footer-top.has-connection {
  grid-template-columns: minmax(0, 1fr) auto auto;
}

.site-footer .footer-brand-block {
  display: grid;
  gap: 0.8rem;
  max-width: 34rem;
}

.site-footer .footer-brand {
  align-items: center;
  display: inline-flex;
  text-decoration: none;
  width: fit-content;
}

.site-footer .footer-logo-svg,
.site-footer .footer-logo-svg svg,
.site-footer img.footer-logo-svg {
  color: var(--color-hero-ink, #163b34);
  display: block;
  height: 1.9rem;
  width: auto;
}

.site-footer .footer-logo-name {
  color: var(--color-hero-ink, #163b34);
  font-family: var(--font-display, "Sora", sans-serif);
  font-size: 1.08rem;
  font-weight: 650;
}

.site-footer .footer-tagline {
  word-break: keep-all;
  overflow-wrap: anywhere;
  color: var(--color-dim, #5d706b);
  font-family: var(--font-body, "Inter", sans-serif);
  font-size: 0.9rem;
  line-height: 1.65;
  margin: 0;
}

.site-footer .footer-social {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.15rem;
}

.site-footer .footer-social-link {
  align-items: center;
  border: 1px solid transparent;
  border-radius: 999px;
  color: var(--color-dim, #5d706b);
  display: inline-flex;
  height: 2rem;
  justify-content: center;
  transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease;
  width: 2rem;
}

.site-footer .footer-social-link:hover {
  background: color-mix(in srgb, var(--color-accent, #008f7a) 9%, transparent);
  border-color: color-mix(in srgb, var(--color-accent, #008f7a) 22%, transparent);
  color: var(--color-accent, #008f7a);
}

.site-footer .footer-social-link svg {
  display: block;
  height: 1rem;
  width: 1rem;
}

.site-footer .footer-grid,
.site-footer .footer-grid[data-count="1"],
.site-footer .footer-grid[data-count="2"],
.site-footer .footer-grid[data-count="3"] {
  align-self: center;
  display: block;
}

.site-footer .footer-col ul,
.site-footer .footer-legal {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-footer .footer-col li {
  margin: 0;
}

.site-footer .footer-col a,
.site-footer .footer-legal a,
.site-footer .footer-connection a {
  color: var(--color-dim, #5d706b);
  font-family: var(--font-body, "Inter", sans-serif);
  font-size: 0.88rem;
  line-height: 1.5;
  text-decoration: none;
  text-underline-offset: 0.2em;
}

.site-footer .footer-col a:hover,
.site-footer .footer-legal a:hover,
.site-footer .footer-connection a:hover {
  color: var(--color-accent, #008f7a);
  text-decoration: underline;
}

.site-footer .footer-connection {
  border-left: 1px solid color-mix(in srgb, var(--color-border, #d7dfdc) 74%, transparent);
  display: grid;
  gap: 0.35rem;
  max-width: 18rem;
  padding-left: clamp(1rem, 2vw, 1.75rem);
}

.site-footer .footer-connection h2 {
  color: var(--color-hero-ink, #163b34);
  font-family: var(--font-body, "Inter", sans-serif);
  font-size: 0.92rem;
  font-weight: 650;
  margin: 0;
}

.site-footer .footer-connection p {
  color: var(--color-dim, #5d706b);
  font-size: 0.84rem;
  line-height: 1.55;
  margin: 0;
}

.site-footer .footer-bottom {
  align-items: center;
  border-top: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  justify-content: space-between;
  padding-top: 0;
}

.site-footer .footer-bottom p {
  color: var(--color-dim, #5d706b);
  font-family: var(--font-body, "Inter", sans-serif);
  font-size: 0.79rem;
  line-height: 1.5;
  margin: 0;
}

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

/* The global chrome stays quiet: enlarge only the formal mark, never the menu. */
.portal-header .container {
  min-height: clamp(4.45rem, 5.2vw, 5.05rem);
}

/* Inline SVG keeps width="199" height="56". Size the mark from height +
   viewBox aspect ratio; do not let the wrapper take the intrinsic 199px or
   the compact header overflow:hidden clips "ArcBlock" to "ArcBloc". */
.portal-header .logo .logo-svg {
  display: inline-flex;
  align-items: center;
  height: auto;
  max-width: 100%;
  width: auto;
}

.portal-header .logo .logo-svg svg,
.portal-header .logo .logo-svg img {
  aspect-ratio: 199 / 56;
  display: block;
  height: clamp(2rem, 2.55vw, 2.45rem);
  max-width: 100%;
  width: auto;
}

.portal-header .main-nav a,
.portal-header .header-controls,
.portal-header .header-controls button,
.portal-header .header-controls a {
  font-size: 0.84rem;
}

.site-footer a:focus-visible,
.portal-header a:focus-visible,
.portal-header button:focus-visible {
  outline: 2px solid var(--color-accent, #008f7a);
  outline-offset: 3px;
}

@media (max-width: 760px) {
  .site-footer {
    padding-top: 2.6rem;
  }

  .site-footer .footer-top {
    gap: 1.15rem;
    grid-template-columns: 1fr;
  }

  .site-footer .footer-grid {
    border-top: 0;
    padding-top: 1rem;
  }

  .site-footer .footer-connection {
    border-left: 0;
    border-top: 0;
    max-width: none;
    padding: 1rem 0 0;
  }

  .site-footer .footer-bottom {
    align-items: flex-start;
    flex-direction: column;
  }

  .portal-header .container {
    min-height: 4.25rem;
  }

  .portal-header .logo .logo-svg svg,
  .portal-header .logo .logo-svg img {
    height: 1.95rem;
    max-width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-footer *,
  .portal-header * {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}

/* Shared site Hero system; emitted once by the common site chrome. */
/* The content object supplies the signature; shared type and tokens tie them together. */
.object-hero{position:relative;isolation:isolate;overflow:clip;color:var(--color-text);background:var(--color-bg);border-bottom:1px solid var(--color-border)}
.object-hero *{box-sizing:border-box}.oh-inner{max-width:var(--page-max,1120px);margin:auto;padding:64px var(--page-gutter,24px) 60px;display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:60px;align-items:center;min-height:430px}.oh-copy{position:relative;z-index:1;min-width:0}.oh-eyebrow{display:flex;align-items:center;gap:18px;font:12px/1.5 var(--font-utility);letter-spacing:.07em;color:var(--color-accent);margin-bottom:22px}.oh-status{letter-spacing:0;color:var(--color-dim);border-left:1px solid var(--color-border);padding-left:18px}.object-hero h1{margin:0;font:600 clamp(40px,4.7vw,66px)/1.08 var(--font-display);letter-spacing:-.055em;text-wrap:balance;overflow-wrap:anywhere}.object-hero:lang(zh) h1,.object-hero:lang(zh-TW) h1,.object-hero:lang(ja) h1{line-height:1.22;letter-spacing:-.025em;word-break:normal}.oh-description{max-width:37em;margin:24px 0 0;font:400 17px/1.8 var(--font-body);color:var(--color-dim);text-wrap:pretty}.oh-actions{display:flex;flex-wrap:wrap;gap:12px 24px;margin-top:30px}.oh-action{display:inline-flex;align-items:center;justify-content:space-between;gap:24px;padding:12px 18px;background:var(--color-accent);color:var(--color-on-accent);border:1px solid transparent;border-radius:5px;font:500 14px/1.5 var(--font-body);text-decoration:none}.oh-action:hover{filter:brightness(.93)}.oh-action--quiet{color:var(--color-text);background:transparent;border-color:var(--color-border)}.oh-action:focus-visible{outline:3px solid var(--color-accent);outline-offset:4px}.oh-visual{min-width:0;position:relative}.oh-small{font:12px/1.7 var(--font-utility);color:var(--color-dim)}
.oh--products{background:radial-gradient(ellipse at 82% 40%,color-mix(in srgb,var(--color-accent) 12%,transparent),transparent 60%),var(--color-bg)}.oh-products{position:relative;height:285px}.oh-products figure{margin:0;overflow:hidden;border:1px solid var(--color-border);background:var(--color-surface);box-shadow:0 20px 42px #002d211c}.oh-browser{width:90%;position:absolute;top:25px;left:0;transform:rotate(-5deg);border-radius:10px}.oh-browser img{display:block;width:100%;height:200px;object-fit:cover;object-position:top}.oh-products figcaption{display:flex;justify-content:space-between;padding:11px 14px;font:11px var(--font-utility)}.oh-products figcaption span{color:var(--color-dim)}.oh-phone{position:absolute;right:-8px;top:0;width:119px;transform:rotate(8deg);border-radius:21px;border:5px solid var(--color-text)!important}.oh-phone img{display:block;width:100%;height:235px;object-fit:cover;object-position:top}.oh-phone figcaption{padding:9px 6px;font-size:9px}
.oh-form-board{padding:28px 32px;background:linear-gradient(140deg,color-mix(in srgb,var(--color-accent) 9%,var(--color-bg)),var(--color-surface));border:1px solid var(--color-border);border-radius:14px}.oh-form-board ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));list-style:none;margin:24px 0 0;padding:0;gap:20px}.oh-form-board li{font:500 13px/1.5 var(--font-body);display:flex;align-items:center;gap:10px;overflow-wrap:anywhere}.oh-form-board li:only-child{grid-column:1/-1;font-size:27px}.oh-form-icon{color:var(--color-accent);font:32px/1.2 var(--font-display)}
.oh--event .oh-inner{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)}.oh-date-board{border-top:3px solid var(--color-accent);padding:24px 0}.oh-date-board strong{display:block;margin:24px 0;font:500 clamp(28px,3.3vw,45px)/1.25 var(--font-display);letter-spacing:-.045em;text-wrap:balance}.oh-date-board p{margin:12px 0 0;color:var(--color-dim);font-size:15px}.oh-event-lines{border-left:1px solid var(--color-border);padding:12px 0 12px 40px}.oh-event-lines>span{font:12px var(--font-utility);color:var(--color-dim)}.oh-event-lines strong{display:block;margin-top:28px;font:500 46px/1.05 var(--font-display);letter-spacing:-.06em;color:var(--color-accent)}.oh-event-lines strong span{display:block;color:var(--color-text)}.oh-event-lines i{display:block;margin-top:30px;height:12px;background:repeating-linear-gradient(90deg,var(--color-border) 0 1px,transparent 1px 18px)}
.oh--docs .oh-inner,.oh--glossary .oh-inner{min-height:375px;padding-block:50px}.oh-books{height:225px;display:flex;gap:10px;align-items:flex-end;justify-content:center;transform:rotate(-6deg)}.oh-books>div{height:205px;width:75px;border:1px solid var(--color-border);border-top:4px solid var(--color-accent);background:var(--color-surface);padding:16px;display:flex;align-items:center;justify-content:space-between;writing-mode:vertical-rl;border-radius:3px 5px 5px 3px;font:500 20px var(--font-display)}.oh-books>div:first-child{height:225px;width:125px;background:color-mix(in srgb,var(--color-accent) 10%,var(--color-bg));align-items:flex-start}.oh-books small{font:10px var(--font-utility);color:var(--color-dim)}.oh-type{display:flex;align-items:baseline;justify-content:center;gap:12px;font:500 130px/1 var(--font-display);letter-spacing:-.1em;color:var(--color-accent)}.oh-type span+span{font-size:90px;opacity:.45}.oh--text .oh-inner{display:block;min-height:0;max-width:var(--page-max,1120px)}.oh--term .oh-copy{max-width:850px}.oh--term h1{font-size:clamp(48px,6vw,80px)}.oh--term .oh-description{font-size:20px;line-height:1.85;max-width:42em;color:var(--color-text)}.oh-alias{font:14px/1.6 var(--font-utility);color:var(--color-accent);margin:18px 0 0}
@media(max-width:760px){.oh-inner,.oh--event .oh-inner{grid-template-columns:1fr;gap:28px;padding:34px var(--page-gutter,16px) 36px;min-height:0}.object-hero h1{font-size:clamp(34px,8vw,48px)}.oh-eyebrow{margin-bottom:16px}.oh-description{font-size:16px;margin-top:18px}.oh-actions{margin-top:24px}.oh--docs .oh-inner,.oh--glossary .oh-inner{min-height:0;padding-block:34px}.oh--docs .oh-visual,.oh--glossary .oh-visual,.oh--events .oh-visual{display:none}.oh-products{height:225px;max-width:370px;margin:0 auto}.oh-browser img{height:155px}.oh-phone{width:94px;right:8px}.oh-phone img{height:185px}.oh-products figcaption{font-size:10px}.oh-phone figcaption{font-size:8px}.oh-form-board{padding:22px}.oh-form-board ul{margin-top:14px;gap:12px}.oh-form-board li{font-size:12px}.oh-date-board{padding:18px 0 0}.oh-date-board strong{font-size:30px;margin:12px 0}.oh--term .oh-description{font-size:18px}.oh--term h1{font-size:52px}}
.oh-date-board--calendar strong{font-size:clamp(66px,7.5vw,104px);line-height:1;letter-spacing:-.065em;color:var(--color-accent);font-variant-numeric:tabular-nums}.oh-date-board--calendar>.oh-small{font-size:16px;color:var(--color-text)}
@media(max-width:760px){.oh-date-board--calendar strong{font-size:64px}}
.oh-products figcaption a{color:inherit;text-decoration:none}.oh-products figcaption a:hover{text-decoration:underline}.oh-products figcaption a:focus-visible{outline:2px solid var(--color-accent);outline-offset:3px}.oh-preview-note{position:absolute;top:100%;left:0;right:0;margin:16px 0 0;font:10px/1.5 var(--font-utility);color:var(--color-dim)}
@media(max-width:760px){.oh--products .oh-inner{padding-bottom:58px}.oh-preview-note{margin-top:6px}}

/* One brand atmosphere across three Hero families. The cube is the exact official vector,
   cropped as a quiet background imprint; type and content always sit above it. */
html :is(.object-hero,.realm-hero,.arc-product-hero,.landing-hero,.post-hero,.docs-heading){
  position:relative;isolation:isolate;
  background:radial-gradient(ellipse at 78% 32%,color-mix(in srgb,var(--color-accent) 10%,transparent),transparent 58%),linear-gradient(150deg,color-mix(in srgb,var(--color-accent) 3%,var(--color-bg)),var(--color-bg));
}
html :is(.object-hero,.realm-hero,.arc-product-hero,.landing-hero,.post-hero,.docs-heading)::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0OC4wMDM4IiBoZWlnaHQ9IjU1LjQzIiB2aWV3Qm94PSIwIDAgNDguMDAzOCA1NS40MyI+CjxwYXRoIG9wYWNpdHk9IjAuNiIgZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0yMy4yNTE5IDI2LjQxNTlWMjcuMjgyTDIyLjUwMTkgMjcuNzE1TDAuODkxOTY4IDQwLjE5MTVMMS42NDIwMyA0MS40OTA2TDI0LjAwMiAyOC41ODExTDQ2LjM2MTkgNDEuNDkwNkw0Ny4xMTIgNDAuMTkxNUwyNS41MDIxIDI3LjcxNUwyNC43NTIxIDI3LjI4MlYyNi40MTU5VjEuNDYyODlIMjMuMjUxOVYyNi40MTU5WiIgZmlsbD0idXJsKCNwYWludDBfbGluZWFyXzU3XzMpIj48L3BhdGg+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMjQuMDAxOSAwTDQ4LjAwMzggMTMuODU3NVY0MS41NzI1TDI0LjAwMTkgNTUuNDNMMCA0MS41NzI1VjEzLjg1NzVMMjQuMDAxOSAwWk0yLjI1MDE4IDE0LjI5MDVMMTcuMTc2NCAyMi45MDgyTDI0LjAwMTkgMTEuMDg2TDMwLjgyNzQgMjIuOTA4Mkw0NS43NTM2IDE0LjI5MDVMMjQuMDAxOSAxLjczMjE5TDIuMjUwMTggMTQuMjkwNVpNNDYuNTAzNyAxNS41ODk3TDMxLjU3NzUgMjQuMjA3M0wzOC40MDMgMzYuMDI5NUwyNC43NTIgNDMuOTExVjUzLjI2NDhMNDYuNTAzNyA0MC43MDY0VjE1LjU4OTdaTTIzLjI1MTggNTMuMjY0OFY0My45MTFMOS42MDA3NiAzNi4wMjk1TDE2LjQyNjMgMjQuMjA3M0wxLjUwMDEyIDE1LjU4OTdWNDAuNzA2NEwyMy4yNTE4IDUzLjI2NDhaTTE3LjcyNTQgMjQuOTU3NEwxMS42NSAzNS40ODA0TDIzLjI1MTggNDIuMTc4OFYyOS4wMTQxVjI4LjE0OEwyMi41MDE4IDI3LjcxNUwxNy43MjU0IDI0Ljk1NzRaTTI0Ljc1MiA0Mi4xNzg4TDM2LjM1MzggMzUuNDgwNEwzMC4yNzg0IDI0Ljk1NzRMMjUuNTAyIDI3LjcxNUwyNC43NTIgMjguMTQ4VjI5LjAxNDFWNDIuMTc4OFpNMjkuNTI4MyAyMy42NTgyTDI0LjAwMTkgMTQuMDg2MkwxOC40NzU1IDIzLjY1ODJMMjQuMDAxOSAyNi44NDg5TDI5LjUyODMgMjMuNjU4MloiIGZpbGw9InVybCgjcGFpbnQxX2xpbmVhcl81N18zKSI+PC9wYXRoPgo8ZGVmcz4KPGxpbmVhckdyYWRpZW50IGlkPSJwYWludDBfbGluZWFyXzU3XzMiIHgxPSI4MC4zMzgxIiB5MT0iMjAuNjE1NCIgeDI9IjQwLjYxODMiIHkyPSI4MS44MzY4IiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+CjxzdG9wIHN0b3AtY29sb3I9IiM0RUYxQkEiPjwvc3RvcD4KPHN0b3Agb2Zmc2V0PSIwLjUwMTkwNCIgc3RvcC1jb2xvcj0iIzE2Q0VEMSI+PC9zdG9wPgo8c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiMzNzczRjIiPjwvc3RvcD4KPC9saW5lYXJHcmFkaWVudD4KPGxpbmVhckdyYWRpZW50IGlkPSJwYWludDFfbGluZWFyXzU3XzMiIHgxPSIyNC4wMDE5IiB5MT0iLTI3LjcxNSIgeDI9Ii0zMC44NTk2IiB5Mj0iMTkuNzk2NCIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiPgo8c3RvcCBzdG9wLWNvbG9yPSIjNEVGMUJBIj48L3N0b3A+CjxzdG9wIG9mZnNldD0iMC41MDE5MDQiIHN0b3AtY29sb3I9IiMxNkNFRDEiPjwvc3RvcD4KPHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSIjMzc3M0YyIj48L3N0b3A+CjwvbGluZWFyR3JhZGllbnQ+CjxjbGlwUGF0aCBpZD0iY2xpcDBfNTdfMyI+CjxyZWN0IHdpZHRoPSIxOTkiIGhlaWdodD0iNTYiIGZpbGw9IndoaXRlIj48L3JlY3Q+CjwvY2xpcFBhdGg+CjwvZGVmcz4KPC9zdmc+Cg==') no-repeat right -65px center / 480px auto;opacity:.055;
}
.realm-page .realm-orbit{background:none}.realm-page .realm-orbit::before{display:none}
/* Presentation family: generous space, consistent action treatment, native artwork retained. */
:is(.realm-hero,.arc-product-hero,.landing-hero,.oh--product){border-radius:0;border-bottom:1px solid var(--color-border)}
.oh--product .oh-inner{min-height:510px;padding-block:72px}
:is(.landing-hero-title,.oh--product h1){color:var(--color-text);font-family:var(--font-display);font-weight:600}
:is(.landing-hero-action,.realm-action,.oh-action){border-radius:5px}
/* Collection family: one measure, two framed images, unchanged content below. */
.oh--index .oh-inner{min-height:430px;padding-block:56px;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:60px}
.oh--index h1{font-size:clamp(40px,4.7vw,66px)}
.oh-photo-stack{position:relative;height:285px;max-width:425px;margin:auto}
.oh-photo-stack figure{position:absolute;margin:0;width:83%;border:1px solid var(--color-border);border-radius:10px;background:var(--color-surface);box-shadow:0 18px 36px #002d211a;overflow:hidden}
.oh-photo-stack figure:first-child{left:0;top:8px;transform:rotate(-5deg)}
.oh-photo-stack figure:last-child{right:0;top:100px;width:67%;transform:rotate(7deg)}
.oh-photo-stack a{display:block;color:var(--color-text);text-decoration:none}
.oh-photo-stack img{display:block;width:100%;height:176px;object-fit:cover}
.oh-photo-stack figure:last-child img{height:133px}
.oh-photo-stack figcaption{display:flex;justify-content:space-between;gap:10px;padding:10px 12px;font:11px/1.5 var(--font-body)}
.oh-photo-stack a:hover figcaption{color:var(--color-accent)}
.oh-photo-stack a:focus-visible{outline:3px solid var(--color-accent);outline-offset:-4px}
#main>.content-cards-wrap--article-index{width:100%;max-width:none;padding-top:0}
.content-cards-wrap--article-index>.content-cards{width:min(100% - 36px,820px);margin:40px auto 0}
@media(max-width:760px){
  .oh--index .oh-inner{grid-template-columns:1fr;min-height:0;padding:34px var(--page-gutter,16px) 48px;gap:28px}
  .oh--index h1{font-size:clamp(34px,8vw,48px)}
  .oh--index .oh-visual{display:block;width:100%}
  .oh-photo-stack{height:225px;max-width:330px;width:100%}
  .oh-photo-stack img{height:140px}.oh-photo-stack figure:last-child{top:75px}.oh-photo-stack figure:last-child img{height:107px}
  .oh-photo-stack figcaption{font-size:10px;padding:8px 10px}
  .oh--product .oh-inner{min-height:0;padding-block:40px}
  html :is(.object-hero,.realm-hero,.arc-product-hero,.landing-hero,.post-hero,.docs-heading)::after{background-size:330px auto;background-position:right -130px top -35px;opacity:.04}
}
/* Match collection silhouettes even when a title wraps to two CJK lines. */
@media(min-width:761px){
 .oh--index .oh-inner{min-height:460px;padding-block:48px}
 .oh--index h1{font-size:clamp(40px,4.3vw,60px)}
 .landing-hero .landing-hero-inner{min-height:580px;padding-block:76px;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:60px}
 .landing-hero .landing-hero-title{max-width:none;font-size:clamp(calc(46px * var(--landing-hero-scale,1)),calc(5.4vw * var(--landing-hero-scale,1)),calc(78px * var(--landing-hero-scale,1)));line-height:1.16;letter-spacing:-.045em}
 .landing-hero:lang(zh) .landing-hero-title,.landing-hero:lang(zh-TW) .landing-hero-title,.landing-hero:lang(ja) .landing-hero-title{line-height:1.22;letter-spacing:0}
 .landing-hero-subtitle{font-size:17px;line-height:1.85;margin-top:24px}
}

/* Product destinations follow ARC's centered introduction, with their own source metadata. */
.oh--product .oh-inner{display:block;text-align:center;max-width:var(--page-max,1120px);padding:68px var(--page-gutter,24px) 52px}
.oh--product .oh-copy{max-width:940px;margin:auto}
.oh--product .oh-eyebrow,.oh--product .oh-actions{justify-content:center}
.oh--product h1{font-size:clamp(52px,6.6vw,94px)}
.oh--product .oh-description{max-width:650px;margin:24px auto 0}
.oh--product .oh-visual{max-width:920px;margin:48px auto 0;text-align:left}
.oh--product .oh-form-board{background:transparent;border:0;border-top:1px solid var(--color-border);border-radius:0;padding:26px 0 0}
.oh--product .oh-form-board ul{display:flex;flex-wrap:wrap;gap:24px 36px;margin-top:22px}
.oh--product .oh-form-board li:only-child{font-size:20px}
.landing-hero .landing-hero-inner{display:block;text-align:center;min-height:520px;padding-block:72px}
.landing-hero .landing-hero-copy{max-width:940px;margin:auto}
.landing-hero .landing-hero-title{max-width:none}
.landing-hero .landing-hero-subtitle{max-width:680px;margin:24px auto 0}
.landing-hero .landing-hero-actions{justify-content:center}
.landing-hero .landing-hero-trace{max-width:920px;margin:48px auto 0;min-height:180px;border-left:0;border-top:1px solid var(--color-border)}
.landing-hero .landing-hero-trace::before,.landing-hero .landing-trace-origin,.landing-hero .landing-trace-line{display:none}
@media(max-width:760px){
 .oh--product .oh-inner,.landing-hero .landing-hero-inner{padding:42px var(--page-gutter,16px) 40px;min-height:0}
 .oh--product h1{font-size:clamp(42px,11vw,58px)}
 .oh--product .oh-visual{margin-top:34px}
 .oh--product .oh-form-board ul{gap:18px 22px}
 .landing-hero .landing-hero-title{font-size:clamp(calc(36px * var(--landing-hero-scale,1)),calc(10vw * var(--landing-hero-scale,1)),calc(48px * var(--landing-hero-scale,1)));line-height:1.22;letter-spacing:0}
 .landing-hero .landing-hero-trace{margin-top:30px}
}

.landing-hero img.landing-hero-geometry{height:auto;object-fit:contain;aspect-ratio:48.0038 / 55.43}
.landing-hero img.landing-hero-geometry{width:120px;right:24px;bottom:16px}
/* At the top, chrome and Hero meet without a border or frosted slab. The existing
   header controller restores a solid navigation surface after scrolling. */
html body:has(:is(.object-hero,.realm-hero,.arc-product-hero,.landing-hero,.post-hero,.docs-heading)) .portal-header:not(.scrolled){background:var(--color-bg);border-bottom-color:transparent;box-shadow:none;backdrop-filter:none}
html body .portal-header{transition:background-color .22s ease,box-shadow .22s ease,border-color .22s ease}
html body .portal-header.scrolled{background:color-mix(in srgb,var(--color-bg) 94%,transparent);border-bottom-color:var(--color-border);box-shadow:0 6px 24px #001b1208;backdrop-filter:blur(16px)}
html :is(.object-hero,.realm-hero,.arc-product-hero,.landing-hero,.post-hero,.docs-heading){
 background:linear-gradient(var(--color-bg),transparent 120px),radial-gradient(ellipse at 78% 32%,color-mix(in srgb,var(--color-accent) 10%,transparent),transparent 58%),linear-gradient(150deg,color-mix(in srgb,var(--color-accent) 3%,var(--color-bg)),var(--color-bg));
}
html :is(.object-hero,.realm-hero,.arc-product-hero,.landing-hero,.post-hero,.docs-heading)::after{
 transform:translate3d(0,var(--hero-drift,0px),0);mask-image:linear-gradient(transparent,#000 100px,#000 calc(100% - 30px),transparent);
}
@keyframes arc-hero-enter{from{opacity:.72;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:no-preference){
 :is(.oh-copy,.landing-hero-copy,.arc-product-heading,.post-hero-content){animation:arc-hero-enter .55s cubic-bezier(.2,.7,.2,1) both}
 .oh-photo-stack{animation:arc-hero-enter .7s cubic-bezier(.2,.7,.2,1) both}
 .oh-photo-stack figure{transition:box-shadow .22s ease}
 .oh-photo-stack figure:hover{box-shadow:0 22px 44px #002d2129}
}
@media(prefers-reduced-motion:reduce){
 html :is(.object-hero,.realm-hero,.arc-product-hero,.landing-hero,.post-hero,.docs-heading)::after{transform:none}
 html body .portal-header{transition:none}
}
/* Authored source labels stay a compact fact strip; the complete brand mark
   already appears in the background, so do not duplicate it over those labels. */
.landing-hero .landing-hero-trace{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:76px;padding:22px 24px;text-align:left}
.landing-hero .landing-hero-trace::after,.landing-hero .landing-hero-trace .landing-hero-geometry{display:none}
.landing-hero .landing-trace-kicker,.landing-hero .landing-trace-text{position:static;max-width:none;margin:0}

/* A quiet forward-emerging deck. Fixed stage preserves the collection Hero measure. */
.oh-photo-stack.oh-deck{height:285px;max-width:425px;perspective:1000px}
.oh-deck figure,.oh-deck figure:first-child,.oh-deck figure:last-child{left:5%;right:auto;top:22px;width:90%;height:226px;transform:translate3d(0,0,0);border-radius:12px;transform-origin:center;opacity:0;z-index:0;pointer-events:none;transition:transform 1200ms cubic-bezier(.22,.65,.25,1),opacity 900ms ease,box-shadow 1200ms ease;will-change:auto}
.oh-deck figure[data-position="0"]{transform:translate3d(0,18px,0);opacity:1;z-index:3;pointer-events:auto;box-shadow:0 16px 32px #002d2120}
.oh-deck figure[data-position="1"]{transform:translate3d(10px,-3px,-55px) rotate(3deg);opacity:.8;z-index:2}
.oh-deck figure[data-position="2"]{transform:translate3d(-8px,-23px,-110px) rotate(-3deg);opacity:.5;z-index:1}
.oh-deck figure[data-position="3"]{transform:translate3d(0,-35px,-165px);opacity:0;z-index:0}
.oh-deck figure[data-position="leaving"]{transform:translate3d(0,35px,45px);opacity:0;z-index:4}
.oh-deck figure img,.oh-deck figure:last-child img{height:174px;object-fit:cover}
.oh--products .oh-deck figure img,.oh--docs .oh-deck figure img{object-fit:contain;background:var(--color-bg)}
.oh-deck figure figcaption{height:52px;align-items:center;font:12px/1.45 var(--font-body);padding:9px 14px}
.oh-deck figcaption>span:first-child{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
@media(max-width:760px){
 .oh-photo-stack.oh-deck{height:245px;max-width:330px}
 .oh-deck figure,.oh-deck figure:first-child,.oh-deck figure:last-child{height:192px;top:15px}
 .oh-deck figure img,.oh-deck figure:last-child img{height:140px}
 .oh-deck figure figcaption{font-size:11px}
}
@media(prefers-reduced-motion:reduce){.oh-photo-stack.oh-deck figure{transition:none}}

/* Film-frame variant: one unbroken image surface, captions appear only on intent. */
.oh-deck figure,.oh-deck figure:first-child,.oh-deck figure:last-child{background:var(--color-bg);border-radius:9px;border:1px solid color-mix(in srgb,var(--color-border) 75%,transparent)}
.oh-deck figure a{position:relative;width:100%;height:100%;display:block;overflow:hidden}
.oh-deck figure img,.oh-deck figure:last-child img{width:100%;height:100%;object-fit:contain;background:var(--color-bg)}
.oh-deck figure::before{content:"";position:absolute;inset:5px 8px auto;height:3px;z-index:2;pointer-events:none;opacity:.28;background:radial-gradient(circle at 2px 1.5px,var(--color-dim) 1.3px,transparent 1.5px) left top/9px 3px repeat-x;mask-image:linear-gradient(90deg,#000 0 26px,transparent 26px calc(100% - 26px),#000 calc(100% - 26px))}
.oh-deck figure::after{content:"";position:absolute;inset:5px;border:1px solid color-mix(in srgb,var(--color-border) 35%,transparent);border-radius:5px;pointer-events:none}
.oh-deck figure figcaption{position:absolute;left:0;right:0;bottom:0;height:auto;min-height:64px;align-items:flex-end;padding:30px 16px 13px;background:linear-gradient(transparent,rgba(3,16,14,.86));color:#fff;opacity:0;transform:translateY(5px);transition:opacity .25s ease,transform .25s ease;pointer-events:none;font-size:12px;line-height:1.5}
.oh-deck figure a:hover figcaption,.oh-deck figure a:focus-visible figcaption{opacity:1;transform:none;color:#fff}
.oh-deck figure a:focus-visible{outline:3px solid var(--color-accent);outline-offset:-3px}
@media(hover:none){.oh-deck figure[data-position="0"] figcaption{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.oh-photo-stack.oh-deck figure figcaption{transition:none;transform:none}}

/* Shared motion, distinct material: vocabulary cards, document folders, product film. */
.oh--glossary .oh-deck figure{background:var(--color-surface);border-radius:7px;border-color:color-mix(in srgb,var(--color-accent) 22%,var(--color-border))}
.oh--glossary .oh-deck figure::before{display:none}
.oh--glossary .oh-deck figure::after{inset:13px;border:0;border-left:1px solid color-mix(in srgb,var(--color-accent) 22%,transparent);border-radius:0}
.oh-flash-face{height:100%;padding:24px 28px 22px;display:flex;flex-direction:column;justify-content:center;color:var(--color-text);background:linear-gradient(145deg,var(--color-bg),var(--color-surface))}
.oh-flash-label{font:10px/1.4 var(--font-utility);color:var(--color-accent);letter-spacing:.08em;margin-bottom:12px}
.oh-flash-face strong{font:500 clamp(23px,2.2vw,30px)/1.2 var(--font-display);overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.oh-flash-face p{font:12px/1.7 var(--font-body);color:var(--color-dim);margin:14px 0 0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.oh-flash-arrow{position:absolute;right:18px;top:18px;color:var(--color-accent);opacity:0;transition:opacity .2s}
.oh--glossary .oh-deck a:hover .oh-flash-arrow,.oh--glossary .oh-deck a:focus-visible .oh-flash-arrow{opacity:1}
.oh--docs .oh-deck figure{border-radius:5px 12px 5px 5px;background:var(--color-surface)}
.oh--docs .oh-deck figure::before{inset:0 auto auto 16px;width:62px;height:7px;opacity:1;background:var(--color-accent);border-radius:0 0 3px 3px;mask-image:none}
.oh--docs .oh-deck figure::after{inset:9px;border-radius:2px;border-color:color-mix(in srgb,var(--color-border) 55%,transparent)}
.oh--docs .oh-deck figure img{padding:10px;background:var(--color-surface)}
.oh--products .oh-deck figure::after{inset:5px;border-radius:4px;border-color:color-mix(in srgb,var(--color-accent) 18%,transparent)}
.oh--events .oh-deck figure::before,.oh--articles .oh-deck figure::before{display:none}
.oh--events .oh-deck figure,.oh--articles .oh-deck figure{border-radius:7px}
@media(max-width:760px){.oh-flash-face{padding:19px 24px}.oh-flash-label{margin-bottom:8px}.oh-flash-face strong{font-size:24px}.oh-flash-face p{font-size:11px;line-height:1.6;margin-top:10px}}
@media(prefers-reduced-motion:reduce){.oh-flash-arrow{transition:none}}
/* Desktop has room for the content itself to be more legible; mobile stays compact. */
@media(min-width:1024px){
 .oh--index .oh-inner{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:40px}
 .oh-photo-stack.oh-deck{height:325px;max-width:480px;width:100%}
 .oh-deck figure,.oh-deck figure:first-child,.oh-deck figure:last-child{left:3%;width:94%;height:270px;top:22px}
 .oh-flash-face{padding:30px 34px}
 .oh-flash-face strong{font-size:32px}
 .oh-flash-face p{font-size:14px;line-height:1.7}
}
.oh--index:lang(zh) h1,.oh--index:lang(zh-TW) h1,.oh--index:lang(ja) h1{word-break:keep-all;overflow-wrap:anywhere}

/* Study-card marginalia: deterministic variation, decorative strokes rather than invented notes. */
.oh-flash-face strong span{padding-inline:3px;box-decoration-break:clone;-webkit-box-decoration-break:clone;background:linear-gradient(177deg,transparent 58%,color-mix(in srgb,var(--color-accent) 16%,transparent) 60% 89%,transparent 92%)}
.oh-deck figure[data-doodle="1"] .oh-flash-face strong span{background:linear-gradient(3deg,transparent 10%,color-mix(in srgb,var(--color-accent) 12%,transparent) 12% 39%,transparent 42%)}
.oh-deck figure[data-doodle="2"] .oh-flash-face strong span{background:linear-gradient(178deg,transparent 84%,color-mix(in srgb,var(--color-accent) 34%,transparent) 86% 92%,transparent 95%)}
.oh-deck figure[data-doodle="3"] .oh-flash-face strong span{background:linear-gradient(1deg,transparent 6%,color-mix(in srgb,var(--color-accent) 13%,transparent) 9% 76%,transparent 79%)}
.oh-flash-doodle{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;color:var(--color-dim);opacity:.26;fill:none;stroke:currentColor;stroke-width:1.25;stroke-linecap:round;stroke-linejoin:round}
.oh-flash-face p,.oh-flash-face strong,.oh-flash-label{position:relative}

/* Article reading space follows whether a real sidebar exists. */
.content-cards-wrap--article-index>.content-cards{width:min(calc(100% - 2 * var(--page-gutter,24px)),calc(var(--page-max,1120px) - 2 * var(--page-gutter,24px)))}
.post-hero ~ .detail-content-layout:not(.detail-content-layout--has-toc){--content-max:960px;--detail-prose-max:100%}
@media(min-width:769px){
 .post-hero ~ .detail-content-layout:not(.detail-content-layout--has-toc) .detail-content-area p.aup-text{font-size:18px;line-height:1.8}
 .content-cards-wrap--article-index.content-cards-wrap--fleet .card-cover{width:200px;aspect-ratio:3/2}
}
/* A quiet editorial change of pace, using the article's own cover and copy. */
.content-cards-wrap--article-index.content-cards-wrap--fleet .content-card--visual{grid-template-columns:minmax(0,320px) minmax(0,1fr);gap:36px;align-items:center;padding:30px 0;margin:8px 0 16px;background:transparent;border:0;border-block:1px solid var(--color-border);border-radius:0}
.content-cards-wrap--article-index.content-cards-wrap--fleet .content-card--visual .card-cover{width:100%;aspect-ratio:16/10;border-radius:5px;grid-column:1;grid-row:1}
.content-cards-wrap--article-index.content-cards-wrap--fleet .content-card--visual .card-title{font-size:clamp(25px,2.5vw,34px);line-height:1.3}
.content-cards-wrap--article-index.content-cards-wrap--fleet .content-card--visual .card-excerpt{-webkit-line-clamp:3}
@media(max-width:768px){
 .content-cards-wrap--article-index>.content-cards{width:calc(100% - 2 * var(--page-gutter,16px))}
 .content-cards-wrap--article-index.content-cards-wrap--fleet .content-card--visual{grid-template-columns:1fr;padding:24px 0;gap:20px;margin:8px 0 16px}
 .content-cards-wrap--article-index.content-cards-wrap--fleet .content-card--visual .card-cover{grid-row:1}
 .content-cards-wrap--article-index.content-cards-wrap--fleet .content-card--visual .card-title{font-size:25px}
}
/* Event location is atmosphere, using actual geographic tiles. Text stays above it. */
.oh--event{isolation:isolate}.oh--event .oh-inner{position:relative;z-index:1;padding-bottom:64px}
.oh-event-map{position:absolute;inset:0 0 0 22%;overflow:hidden;pointer-events:none;z-index:0;opacity:.32;mask-image:linear-gradient(90deg,transparent,#000 42%,#000 85%,transparent),linear-gradient(0deg,transparent,#000 30%,#000 75%,transparent);mask-composite:intersect}
.oh-map-sheet{position:absolute;width:768px;height:768px;left:50%;top:50%;transform:translate(-50%,-50%) scale(1.55);filter:grayscale(1) contrast(.8);mask-image:radial-gradient(ellipse 250px 250px at center,#000 24%,transparent 100%)}
.oh-map-sheet img{position:absolute;width:256px!important;height:256px!important;max-width:none!important;display:block}
.oh-map-credit{position:absolute;bottom:12px;right:24px;z-index:2;font:10px/1.5 var(--font-body);color:var(--color-dim)}
.oh-map-credit a{color:inherit;text-decoration:none}.oh-map-credit a:hover{text-decoration:underline}
.oh-map-link{display:inline-flex;gap:7px;margin-top:18px;color:var(--color-accent);font:12px/1.5 var(--font-body);text-decoration:none}
.oh--event .oh-date-board{padding:26px 30px;border:1px solid var(--color-border);border-top:3px solid var(--color-accent);border-radius:5px;background:color-mix(in srgb,var(--color-bg) 85%,transparent);box-shadow:0 14px 38px #092c2310;transform:rotate(2deg);position:relative}
.oh--event .oh-date-board::after{content:"";display:block;margin-top:24px;border-top:1px dashed var(--color-border)}
.oh-event-ticket{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;gap:16px;padding:30px;background:linear-gradient(130deg,color-mix(in srgb,var(--color-accent) 9%,var(--color-bg)),var(--color-bg));border:1px solid var(--color-border)}
.oh-event-ticket>span{font:12px var(--font-utility);color:var(--color-dim)}.oh-event-ticket strong{font:500 clamp(20px,2.5vw,30px)/1.25 var(--font-display);letter-spacing:-.02em;color:var(--color-text)}.oh-event-ticket small{font:12px var(--font-body);color:var(--color-dim)}
.oh-event-phase{position:absolute;right:12px;top:12px;z-index:2;padding:4px 8px;background:var(--color-bg);color:var(--color-accent);border:1px solid var(--color-border);border-radius:3px;font:10px/1.3 var(--font-body)}
.oh-event-phase[data-phase=past]{color:var(--color-dim)}
@media(prefers-color-scheme:dark){html:not([data-mode=light]) .oh-event-map{opacity:.16}}
[data-mode=dark] .oh-event-map{opacity:.16}
@media(max-width:760px){.oh-event-map{inset:30% -20% 0 0;opacity:.22}.oh--event .oh-inner{padding-bottom:56px}.oh--event .oh-date-board{transform:none;padding:20px 24px}.oh--event .oh-date-board strong{font-size:40px}.oh-event-ticket{padding:25px}.oh-event-ticket strong{font-size:23px}}

.content-cards-wrap--article-index.content-cards-wrap--fleet .content-card--visual .card-body{grid-column:2;grid-row:1}
.content-cards-wrap--fleet .content-card--text{grid-template-columns:minmax(0,1fr)}
@media(max-width:768px){
 .content-cards-wrap--article-index.content-cards-wrap--fleet .content-card{grid-template-columns:minmax(0,1fr);gap:16px}
 .content-cards-wrap--article-index.content-cards-wrap--fleet .card-cover{width:100%;grid-column:1;grid-row:1;aspect-ratio:16/9}
 .content-cards-wrap--article-index.content-cards-wrap--fleet .content-card--visual .card-body{grid-column:1;grid-row:2}
}
/* Event facts sit on the page, rather than inside nested presentation boxes. */
.oh--event .oh-date-board{padding:20px 0 20px 36px;border:0;border-left:1px solid color-mix(in srgb,var(--color-accent) 28%,transparent);border-radius:0;background:transparent;box-shadow:none;transform:none}
.oh--event .oh-date-board::after{display:none}
@media(max-width:760px){.oh--event .oh-date-board{padding:16px 0;border:0;border-top:1px solid var(--color-border)}}
.content-cards-wrap--article-index.content-cards-wrap--fleet .content-card--text{grid-template-columns:minmax(0,1fr)}
.content-cards-wrap--fleet .card-link:focus-visible{outline:none}

/* Terminal panels keep a dark canvas in both site themes. */
.product-frame__terminal .hljs-section { color: #79c0ff; }

/* Off-stack slides need neither painting nor eager image downloads.
   The existing deck controller reveals the next card two turns before it leads. */
.oh-deck figure[data-position="3"] { display: none; }

.site-footer .footer-translation-note { margin: 16px 0 0; max-width: 90ch; color: var(--color-dim, #5d706b); font-size: 12px; line-height: 1.65; word-break: keep-all; overflow-wrap: anywhere; }

.site-footer .footer-attribution { margin-top: 1rem; display: flex; align-items: center; flex-wrap: wrap; gap: .25rem .6rem; }
.site-footer .footer-attribution-dot { color: var(--color-dim, #5d706b); font-size: 12px; }
.site-footer .footer-built-with { display: inline-flex; vertical-align: middle; border-radius: 2px; transition: opacity 140ms ease; }
.site-footer .footer-built-with:hover { opacity: .72; }
.site-footer .footer-built-with:focus-visible { outline: 2px solid var(--color-accent, #008f7a); outline-offset: 5px; }
.site-footer .footer-built-with img { display: block; width: 140px; height: auto; }
.site-footer .footer-built-with .footer-built-dark { display: none; }
html[data-mode=dark] .site-footer .footer-built-light { display: none; }
html[data-mode=dark] .site-footer .footer-built-dark { display: block; }
@media (prefers-reduced-motion: reduce) { .site-footer .footer-built-with { transition: none; } }

.site-footer .footer-built-caption { margin: 0; color: var(--color-dim, #5d706b); font-size: 12px; line-height: 1.65; word-break: keep-all; overflow-wrap: anywhere; }

/* One footer surface: policies sit with navigation; attribution closes the footer. */
.site-footer .footer-grid{align-self:start;padding-top:.4rem}
.site-footer .footer-legal{margin-top:1rem}
.site-footer .footer-legal a{font-size:.78rem}
.site-footer .footer-bottom{align-items:flex-start;flex-direction:column;justify-content:flex-start;text-align:left;gap:.7rem}
.site-footer .footer-bottom .footer-translation-note{margin:0;max-width:none;flex:none;font-size:.73rem}
.site-footer .footer-built-caption a{color:inherit;text-decoration:underline;text-decoration-color:color-mix(in srgb,currentColor 40%,transparent);text-underline-offset:.2em}
.site-footer .footer-built-caption a:hover{color:var(--color-accent)}
@media(max-width:760px){.site-footer .footer-top.has-connection{grid-template-columns:1fr}.site-footer .footer-bottom .footer-translation-note{flex-basis:auto}.site-footer .footer-grid{padding-top:0}}

.post-hero {
  position: relative;
  background:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--color-accent, #1e6fd9) 16%, transparent),
      transparent 38%
    ),
    linear-gradient(
      315deg,
      color-mix(in srgb, var(--color-accent-secondary, #14b8a6) 16%, transparent),
      transparent 42%
    ),
    var(--color-bg);
  color: var(--color-text, #171717);
  overflow: hidden;
  border-bottom: 1px solid var(--color-border, #e8e8e8);
}

.post-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      color-mix(in srgb, var(--color-border, #e8e8e8) 36%, transparent) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      color-mix(in srgb, var(--color-border, #e8e8e8) 32%, transparent) 1px,
      transparent 1px
    );
  background-size: 42px 42px;
  opacity: 0.16;
  pointer-events: none;
}

.post-hero-inner {
  position: relative;
  max-width: var(--page-max);
  margin: 0 auto;
  padding: clamp(2.75rem, 5vw, 4.75rem) var(--page-gutter);
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(280px, 0.88fr);
  align-items: center;
  gap: clamp(2.5rem, 6vw, 6rem);
}

/* arc#2920: without a cover image the hero drops to a single, narrower
   column, but it must stay pinned to the same left edge as the has-cover
   two-column layout — `justify-content: center` here centered that column
   inside `.post-hero-inner` instead, floating the title toward the page
   middle. `start` (the grid default) keeps the narrower column left-aligned. */
.post-hero--no-cover .post-hero-inner {
  grid-template-columns: minmax(0, 920px);
  justify-content: start;
  padding-block: clamp(2.5rem, 4.5vw, 4rem);
}

.post-hero-content {
  min-width: 0;
}

.post-hero-media {
  margin: 0;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--color-border, #e8e8e8) 80%, transparent);
  border-radius: clamp(10px, 1.5vw, 18px);
  background: var(--color-surface, #fafafa);
  box-shadow: 0 22px 60px color-mix(in srgb, var(--color-text, #171717) 14%, transparent);
}

.post-hero-cover {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Long titles compete less with the background grid decoration, so the
   title stays the clear read. */
.post-hero--long::before,
.post-hero--xlong::before {
  opacity: 0.14;
}

.post-breadcrumb {
  font-family: var(--font-sans, "Inter", sans-serif);
  font-size: 0.75rem;
  margin-bottom: 1rem;
  display: flex;
  gap: 0.5rem;
  align-items: center;
  color: var(--color-dim, #737373);
  letter-spacing: 0;
}

.post-breadcrumb a {
  color: var(--color-dim, #737373);
  text-decoration: none;
  transition: color 0.2s;
}

.post-breadcrumb a:hover {
  color: var(--color-text, #171717);
}

/* arc#3416 — the optional "what this belongs to" line. Same layer as the
   .post-breadcrumb above it (sans stack, dim, no background/border/padding of
   its own) so it reads as part of a header that was always there. A separate
   band above the hero was tried first on a live site and rejected on sight: it
   made series articles look unlike every other article. */
.post-hero-eyebrow {
  font-family: var(--font-sans, "Inter", sans-serif);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--color-dim, #737373);
  margin: 0 0 0.85rem;
}

.post-hero-eyebrow a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s;
}

.post-hero-eyebrow a:hover {
  color: var(--color-text, #171717);
}

/* With an eyebrow present the two dim lines are ONE stack, so the breadcrumb's
   1rem gap (tuned for sitting directly on the title) collapses. Without :has()
   support the gap just stays wide — never a broken layout. */
.post-breadcrumb:has(+ .post-hero-eyebrow) {
  margin-bottom: 0.3rem;
}

.post-hero-title {
  font-family: var(--font-heading, var(--font-serif, "Newsreader", Georgia, serif));
  /* Responsive clamp: min/max bound the short-title look at both ends of the
     viewport range; --long/--xlong below ramp the same clamp down further
     for long titles instead of keeping one size for every length. */
  font-size: clamp(2.4rem, 5vw, 4.65rem);
  font-weight: 780;
  line-height: 1.01;
  letter-spacing: 0;
  margin: 0 0 1rem;
  max-width: 18ch;
  color: var(--color-text, #171717);
  /* Balances line lengths on the last line for both Latin and CJK titles,
     which is also what avoids a short/orphan tail line for Chinese titles —
     one mechanism serves both acceptance criteria. Unsupported browsers just
     keep normal wrapping (progressive enhancement, no fallback needed). */
  text-wrap: balance;
  overflow-wrap: break-word;
}

.post-hero-title--long {
  font-size: clamp(2rem, 3.6vw, 3.25rem);
  line-height: 1.08;
  /* Long/xlong titles need the full container width, not the 980px reading
     measure tuned for short titles — otherwise a long title wraps to more
     lines than its font-size alone would need. */
  max-width: 100%;
}

.post-hero-title--xlong {
  font-size: clamp(1.65rem, 2.55vw, 2.35rem);
  line-height: 1.14;
  max-width: 100%;
}

.post-hero-meta {
  display: flex;
  gap: 1rem;
  align-items: center;
  font-family: var(--font-sans, "Inter", sans-serif);
  font-size: 0.875rem;
  color: var(--color-dim, #737373);
  flex-wrap: wrap;
}

.post-hero-author {
  font-weight: 600;
  color: var(--color-text, #171717);
}

.post-hero-tags {
  display: flex;
  gap: 0.375rem;
}

.post-hero-tags .tag {
  font-family: var(--font-sans, "Inter", sans-serif);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--color-text, #171717);
  background: color-mix(in srgb, var(--color-accent, #1e6fd9) 10%, transparent);
  padding: 0.2rem 0.45rem;
  border-radius: 999px;
  letter-spacing: 0;
}

html[data-tone="technical"] .post-hero {
  background:
    linear-gradient(
      90deg,
      color-mix(in srgb, var(--color-accent, #1e6fd9) 20%, transparent),
      transparent 52%
    ),
    color-mix(in srgb, var(--color-bg, #fff) 88%, #000);
}

html[data-tone="technical"] .post-hero::before {
  background:
    linear-gradient(
      color-mix(in srgb, var(--color-accent, #1e6fd9) 18%, transparent) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      color-mix(in srgb, var(--color-accent, #1e6fd9) 18%, transparent) 1px,
      transparent 1px
    );
  background-size: 24px 24px;
}

html[data-tone="product"] .post-hero {
  background:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--color-accent-secondary, #14b8a6) 20%, transparent),
      transparent 44%
    ),
    linear-gradient(
      90deg,
      color-mix(in srgb, var(--color-accent, #1e6fd9) 12%, transparent),
      transparent 60%
    ),
    var(--color-bg);
}

@media (max-width: 768px) {
  .post-hero-inner,
  .post-hero--no-cover .post-hero-inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
    padding: 1.75rem 1.15rem 2.25rem;
  }

  .post-hero-media {
    aspect-ratio: 16 / 9;
    border-radius: 10px;
    box-shadow: 0 14px 36px color-mix(in srgb, var(--color-text, #171717) 12%, transparent);
  }

  .post-hero-title {
    font-size: clamp(2.1rem, 10.5vw, 3.1rem);
    max-width: none;
  }

  .post-hero-title--long {
    font-size: clamp(1.75rem, 8.5vw, 2.35rem);
  }

  .post-hero-title--xlong {
    font-size: clamp(1.5rem, 7.1vw, 1.95rem);
  }

  .post-breadcrumb {
    flex-wrap: wrap;
  }
}

/* ArcBlock editorial masthead. Native cover and title tiers remain intact. */
.post-hero{background:var(--color-bg);border-bottom:1px solid var(--color-border)}.post-hero::before{display:none}.post-hero-inner{gap:clamp(28px,5vw,64px);padding-block:48px}.post-hero--has-cover .post-hero-inner{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}.post-hero--no-cover .post-hero-inner{padding-block:44px;max-width:var(--page-max)}.post-hero-title{color:var(--color-text);background:none;-webkit-text-fill-color:currentColor;letter-spacing:-.045em;text-wrap:balance}.post-hero-title:lang(zh),.post-hero-title:lang(zh-TW),.post-hero-title:lang(ja){line-height:1.25;letter-spacing:-.025em;max-width:none}.post-hero-media{border-radius:8px;transform:rotate(1.3deg);box-shadow:0 16px 34px #00251a14;aspect-ratio:16/10}.post-hero-cover{object-position:center}.post-hero-meta{padding-top:22px;border-top:1px solid var(--color-border);margin-top:28px}.post-breadcrumb{font-size:12px}.post-hero-eyebrow{color:var(--color-accent)}
@media(max-width:760px){.post-hero--has-cover .post-hero-inner{grid-template-columns:1fr}.post-hero-inner,.post-hero--no-cover .post-hero-inner{padding-block:30px}.post-hero-media{transform:none;max-height:250px}.post-hero-title{font-size:36px}.post-hero-title--long{font-size:32px}.post-hero-title--xlong{font-size:29px}.post-hero-meta{margin-top:22px;padding-top:18px}}

/* Docs owns its grid placement; these rules give article detail pages the same
   TOC disclosure and active-link vocabulary without coupling either layout. */
.detail-content-sidebar .in-page-toc {
  position: sticky;
  top: 6rem;
  max-height: calc(100vh - 8rem);
  overflow-y: auto;
  padding-left: 1.25rem;
  border-left: 1px solid var(--color-border, #e8e8e8);
}

.detail-content-sidebar .docs-toc-title {
  margin: 0 0 0.8rem;
  color: var(--color-text, #171717);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.detail-content-sidebar .docs-toc-toggle {
  display: none;
}

.detail-content-sidebar .docs-toc-list {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.detail-content-sidebar .docs-toc-link {
  display: block;
  padding: 0.32rem 0;
  color: var(--color-dim, #737373);
  font-size: 0.82rem;
  line-height: 1.45;
  text-decoration: none;
  transition: color 0.15s ease;
}

.detail-content-sidebar .docs-toc-item--h3 .docs-toc-link {
  padding-left: 0.85rem;
  font-size: 0.77rem;
}

.detail-content-sidebar .docs-toc-link:hover,
.detail-content-sidebar .docs-toc-link.is-active {
  color: var(--color-accent, #1e6fd9);
}

.detail-content-sidebar .docs-toc-link.is-active {
  font-weight: 650;
}

@media (max-width: 1100px) {
  .detail-content-sidebar .in-page-toc {
    position: static;
    max-height: none;
    overflow: visible;
    padding: 0;
    border: 1px solid var(--color-border, #e8e8e8);
    border-radius: var(--radius-lg, 8px);
    background: var(--color-surface, #fafafa);
  }

  .detail-content-sidebar .docs-toc-title {
    display: none;
  }

  .detail-content-sidebar .docs-toc-toggle {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.85rem 1rem;
    border: 0;
    background: transparent;
    color: var(--color-text, #171717);
    font: inherit;
    font-size: 0.86rem;
    font-weight: 650;
    text-align: left;
    cursor: pointer;
  }

  .detail-content-sidebar .docs-toc-toggle-icon::before {
    content: "+";
  }

  .detail-content-sidebar .docs-toc-toggle[aria-expanded="true"] .docs-toc-toggle-icon::before {
    content: "−";
  }

  .detail-content-sidebar .docs-toc-list {
    display: none;
    padding: 0 1rem 0.85rem;
  }

  .detail-content-sidebar .in-page-toc.is-open .docs-toc-list {
    display: flex;
  }
}


  /* ── comments-surface widget (issue #1006 Phase 1 + Phase 2) ──
     Flat comment list + composer + per-item edit/delete/react. All
     sizing/color/spacing consumes canonical AUP tokens (styles.ts) so
     theme swaps reach it, same discipline as .aup-list-item / .aup-cb-*. */
  .aup-comments-surface { display: flex; flex-direction: column; gap: var(--space-block); }
  /* arc#2935 item 2: was --type-heading (this widget's mount context has no
     idea what level the host page's own headings sit at) — a live doc page's
     own <h2> renders at 24px (docs-page/style.css .docs-content h2:
     clamp(1.35rem, 1.9vw, 1.5rem)), while --type-heading resolved to 28px in
     that same theme, so this section heading visually OUTRANKED the page's
     real section headings despite now (see the <h2> tag change above) being
     one level below them in the outline. --type-subheading is this token
     family's next tier down (styles.ts) — reliably smaller than
     --type-heading in every density preset, not a hardcoded px guess tied to
     one page's own clamp(). */
  .aup-comments-surface-title {
    font-family: var(--font-heading);
    font-size: var(--type-subheading);
    font-weight: var(--heading-weight);
    color: var(--color-text);
  }
  /* Sort-order toggle (arc#2231) — right-aligned, above the list. */
  .aup-comments-surface-toolbar { display: flex; justify-content: flex-end; }
  .aup-comments-surface-list { display: flex; flex-direction: column; gap: var(--space-element); }
  .aup-comments-surface-empty {
    color: var(--color-dim);
    font-size: var(--type-body);
    padding: var(--space-block) 0;
    text-align: center;
  }
  /* Inline error banner for a failed post/edit/delete/react — hidden by
     default (JS toggles display), shown with a plain error-tinted text
     row (no dialog, matches the low-ceremony feel of an inline form error). */
  .aup-comments-surface-error {
    color: var(--color-error);
    font-size: var(--type-caption);
    padding: 0 0 var(--space-element);
  }
  .aup-comment-item {
    display: flex;
    flex-direction: column;
    gap: var(--space-element);
    padding: var(--space-block);
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-md);
  }
  /* arc#2935 item 1: the card's own horizontal padding (--space-block, 18px
     in the measured live theme) pushed the VISIBLE comment text/Reply button
     18px inward from the page's document-content edge on both sides — the
     surrounding page content (and this widget's own unpadded sort toggle,
     which already lands flush) has no such inset, so the comment column
     visibly "broke" out of alignment. Compensating with an equal negative
     horizontal margin cancels the padding for anything measured from the
     card's OUTER edge (so the card border/background still bleeds out to
     the full column width, matching the sort toggle) while the padding
     itself keeps the INNER text sitting exactly where it was — now aligned
     with the page's content edge instead of offset from it.
     Scoped to .aup-comments-surface-list > .aup-comment-item (root-level
     items only, direct children of the list) rather than the bare class:
     a NESTED reply's .aup-comment-item lives inside
     .aup-comment-item-children (module doc "Nested reply-tree
     rendering"), whose own padding-left is the intentional per-depth
     indent — an unscoped negative margin here would cancel that indent too
     and collapse every reply back to the root's left edge. */
  .aup-comments-surface-list > .aup-comment-item {
    margin-left: calc(-1 * var(--space-block));
    margin-right: calc(-1 * var(--space-block));
  }
  .aup-comment-item-header { display: flex; align-items: center; gap: var(--space-element); flex-wrap: wrap; }
  .aup-comment-item-author { font-family: var(--font-body); font-size: var(--type-body); font-weight: var(--heading-weight); color: var(--color-text); }
  .aup-comment-item-time { font-size: var(--type-caption); color: var(--color-dim); }
  .aup-comment-item-edited { font-style: italic; }
  /* Optimistic preview row (arc#2226) — same reduced-opacity "in flight"
     treatment as .aup-comment-item-collect-btn._aup-collect-pending below,
     applied to the whole card instead of one button since this row has no
     server-assigned id yet for any per-affordance state. */
  .aup-comment-item--pending { opacity: 0.6; }
  /* Tombstone (issue #6608) — grey placeholder, no author, no reaction entry.
     The card stays in the tree so replies keep their nested depth. */
  .aup-comment-item--deleted { opacity: 0.85; }
  .aup-comment-item-text--deleted { color: var(--color-dim); font-style: italic; }
  /* Pushes the kebab menu button to the row's trailing edge without a
     dedicated flex-justify rule on the header (which also needs to wrap
     author + timestamp on narrow widths). */
  .aup-comment-item-spacer { flex: 1 1 auto; }
  .aup-comment-item-text { font-family: var(--font-body); font-size: var(--type-body); line-height: var(--leading-normal); color: var(--color-text); white-space: normal; word-break: break-word; }
  /* Markdown comment bodies (issue #6609). The same element family css.ts
     styles for post bodies under .aup-text[data-format="markdown"], restated
     here (not imported) because web-device loads ONLY this sheet — the
     bundle's DOM is identical on both hosts, so its baseline styling must
     travel with it. Kept to what would otherwise render bare: block spacing,
     code, media bounds, links, quotes, lists. All values are canonical tokens. */
  .aup-comment-item-text[data-comment-format="markdown"] p { margin: 0 0 var(--space-element); }
  .aup-comment-item-text[data-comment-format="markdown"] > :last-child { margin-bottom: 0; }
  .aup-comment-item-text[data-comment-format="markdown"] code { font-family: var(--font-mono); font-size: var(--type-caption); background: var(--color-bg); color: var(--color-accent); padding: 0 4px; border-radius: var(--radius-sm); }
  .aup-comment-item-text[data-comment-format="markdown"] pre { background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-element) var(--space-block); margin: var(--space-element) 0; overflow-x: auto; font-family: var(--font-mono); font-size: var(--type-caption); line-height: var(--leading-normal); }
  .aup-comment-item-text[data-comment-format="markdown"] pre code { background: none; color: var(--color-text); padding: 0; font-size: inherit; }
  .aup-comment-item-text[data-comment-format="markdown"] img,
  .aup-comment-item-text[data-comment-format="markdown"] video { display: block; max-width: 100%; height: auto; border-radius: var(--radius-md); margin: var(--space-element) 0; }
  .aup-comment-item-text[data-comment-format="markdown"] a { color: var(--color-accent); text-decoration: underline; text-underline-offset: 2px; }
  .aup-comment-item-text[data-comment-format="markdown"] a:hover { opacity: 0.8; }
  .aup-comment-item-text[data-comment-format="markdown"] blockquote { margin: var(--space-element) 0; padding: 0 var(--space-block); border-left: 3px solid var(--color-accent); color: var(--color-dim); }
  .aup-comment-item-text[data-comment-format="markdown"] ul,
  .aup-comment-item-text[data-comment-format="markdown"] ol { margin: var(--space-element) 0; padding-left: var(--space-block); }
  .aup-comment-item-text[data-comment-format="markdown"] h1,
  .aup-comment-item-text[data-comment-format="markdown"] h2,
  .aup-comment-item-text[data-comment-format="markdown"] h3,
  .aup-comment-item-text[data-comment-format="markdown"] h4 { font-size: var(--type-body); font-weight: var(--heading-weight); margin: var(--space-element) 0 0; }
  .aup-comment-item-footer { display: flex; align-items: center; gap: var(--space-element); }
  /* Both children are conditional (reactions opt-in, Reply hidden past
     maxDepth/guest-blocked) — an empty footer would otherwise still eat a
     --space-element gap slot in .aup-comment-item's column flex. */
  .aup-comment-item-footer:empty { display: none; }
  /* Kebab/collect buttons reuse list.ts's .aup-list-row-action square
     icon-button chrome — that rule (and its --collect variant tint, plus
     the Edit/Delete popup below) normally comes from css.ts, which is only
     loaded on AUP-hosted pages. A non-AUP host (web-device, issue #2676)
     loads ONLY this COMMENTS_SURFACE_CSS + AUP_PRIMITIVES_CSS, neither of
     which defines them — so on that host these rendered unstyled with the
     browser's default button chrome (arc#2933). Self-contained here (same
     values as css.ts's copy — safe to duplicate, an AUP host loads both and
     the second occurrence is a no-op) so the bundle never depends on a host
     also having loaded css.ts's full AUP-page stylesheet. */
  .aup-comment-item .aup-list-row-action { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; margin-left: 4px; background: transparent; border: 1px solid transparent; border-radius: var(--radius-sm); color: var(--color-dim); cursor: pointer; opacity: 0; transition: opacity var(--transition), background var(--transition), color var(--transition), border-color var(--transition); flex-shrink: 0; }
  .aup-comment-item .aup-list-row-action svg { width: 14px; height: 14px; }
  .aup-comment-item .aup-list-row-action:hover { background: color-mix(in srgb, var(--color-text) 6%, transparent); color: var(--color-text); }
  .aup-comment-item .aup-list-row-action--collect:hover { background: var(--color-accent-bg); border-color: color-mix(in srgb, var(--color-accent) 30%, transparent); color: var(--color-accent); }
  .aup-comment-item:hover .aup-list-row-action,
  .aup-comment-item-menu-btn:focus-visible,
  .aup-comment-item-collect-btn:focus-visible { opacity: 1; }
  .aup-comment-item-menu-btn { margin-left: 0; }
  /* Edit/Delete popup (_commentsSurfaceOpenItemMenu) — same duplication
     rationale as .aup-list-row-action above; css.ts's copy (shared with
     list.ts's own item menu) never reaches a non-AUP host. */
  .aup-list-item-menu-popup { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-card); min-width: 160px; overflow: hidden; padding: 4px 0; }
  .aup-list-item-menu-item { display: block; width: 100%; padding: var(--space-element) var(--space-block); text-align: left; background: transparent; border: none; color: var(--color-text); font-family: var(--font-body); font-size: var(--type-body); line-height: var(--leading-normal); cursor: pointer; white-space: nowrap; transition: background var(--transition), color var(--transition); }
  .aup-list-item-menu-item:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
  .aup-list-item-menu-item:has(svg) { display: flex; align-items: center; gap: var(--space-element); }
  .aup-list-item-menu-item svg { width: 14px; height: 14px; flex-shrink: 0; }
  /* Collect button (issue #1576) — .aup-list-row-action--collect's hover
     tint already comes from this file's own rule above (arc#2933); the two
     rules below only cover its two extra per-comment states that button
     family doesn't otherwise need: a subtle pulse while the collect
     aup_event is in flight (same idea as reaction.ts's JS-injected
     _aup-reaction-pending keyframes, redeclared here as a plain CSS
     keyframe since this file — not JS — is comments-surface's only style
     source), and staying visibly marked (not fading back to opacity:0 on
     mouseleave) once collected — same "persistent highlight" treatment
     reaction chips give an own-reaction, applied here to a single terminal
     state instead of a toggle. */
  @keyframes aup-comment-collect-pulse { 0%, 100% { box-shadow: 0 0 0 2px transparent; } 50% { box-shadow: 0 0 0 2px var(--color-accent); } }
  .aup-comment-item-collect-btn._aup-collect-pending { animation: aup-comment-collect-pulse 0.9s ease-in-out infinite; opacity: 0.75; }
  .aup-comment-item-collect-btn.is-collected { opacity: 1; color: var(--color-accent); }
  /* Reaction picker placeholder (issue #1626, opt-in via props.reactions —
     see comments-surface-bundle.ts module doc "Reaction picker"). The picker
     element mounted inside it (reaction.ts's _buildReactionPickerEl,
     class .aup-reaction) carries its own inline layout styles already;
     this rule only keeps an empty placeholder from adding stray footer
     gap before the async reaction-data fetch populates it. */
  .aup-comment-item-reactions:empty { display: none; }
  /* Composer — top-level "post a new comment" form. Bordered container in
     the same card-token family as .aup-comment-item so it reads as part
     of the same surface, not a foreign form. */
  .aup-comments-surface-composer {
    display: flex; flex-direction: column; gap: var(--space-element);
    padding: var(--space-block);
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-md);
  }
  /* arc#2935 item 1 (composer half): same padding-not-compensated fix as
     .aup-comment-item above, scoped to the top-level "new comment" composer
     only (a direct child of .aup-comments-surface — see _commentsSurfaceBuild)
     — a REPLY composer reuses this same class but is appended inside its
     parent .aup-comment-item (_commentsSurfaceToggleReplyComposer), where it
     is correctly meant to stay inset within the parent card's own padding,
     not bleed to the page edge. */
  .aup-comments-surface > .aup-comments-surface-composer {
    margin-left: calc(-1 * var(--space-block));
    margin-right: calc(-1 * var(--space-block));
  }
  .aup-comments-surface-composer-input,
  .aup-comment-edit-textarea {
    width: 100%; box-sizing: border-box;
    padding: 8px 12px;
    background: var(--color-bg);
    color: var(--color-text);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-family: var(--font-body); font-size: var(--type-body); line-height: var(--leading-normal);
    outline: none;
    resize: vertical;
    transition: border-color var(--transition);
  }
  .aup-comments-surface-composer-input::placeholder,
  .aup-comment-edit-textarea::placeholder { color: var(--color-dim); }
  .aup-comments-surface-composer-input:focus,
  .aup-comment-edit-textarea:focus {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 12%, transparent);
  }
  .aup-comments-surface-composer-row { display: flex; justify-content: flex-end; gap: var(--space-element); }
  /* post-editor (issue #1623 round 2): create/edit now mount their form inside
     the shared form-dialog modal (_aupShowFormOverlay, action.ts) instead of an
     always-open inline card, so .aup-post-editor's own composer needs none of
     the card padding/elevation the page-embedded version used to add — the
     dialog body (.aup-view[data-variant="form-dialog-body"]) already supplies
     that chrome. Selector kept (not deleted) so a future non-dialog placement
     of this widget doesn't silently inherit unstyled comment-reply spacing. */
  .aup-post-editor .aup-comments-surface-composer { padding: 0; }
  /* post-editor body Write/Preview toggle (issue #4057 P1 composer 预览
     sub-capability). Reuses the generic .aup-tab-bar/.aup-tab primitive for
     the toggle and .aup-text[data-format="markdown"] for the rendered
     preview's prose styling — no new tab or typography tokens. */
  .aup-post-editor-body-tabs { margin-bottom: var(--space-element); padding: 0; }
  .aup-post-editor-body-preview {
    box-sizing: border-box;
    /* Approximates the textarea's rows=8 height (em-based, not a magic px)
       so toggling Write/Preview doesn't visibly resize the dialog. */
    min-height: 10em;
    padding: 8px 12px;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
  }
  .aup-post-editor-body-preview-empty { color: var(--color-dim); font-size: var(--type-body); }
  /* media-insert (arc#6621): the upload toolbar button + status strip shared
     by the post editor and (#6622) the comments composer — lives in this
     sheet for the same reason the composer rules do: it is the one stylesheet
     both the AUP page and web-device's comments runtime embed. Tokens only.
     The toolbar row holds the tab bar + the right-aligned upload button. */
  .aup-post-editor-body-toolbar { display: flex; align-items: center; gap: var(--space-element); margin-bottom: var(--space-element); }
  .aup-post-editor-body-toolbar > .aup-post-editor-body-tabs { flex: 1 1 auto; margin-bottom: 0; }
  /* Tag chips (arc#6627): free-text input + whitelist suggestion row. */
  .aup-post-editor-tags { display: flex; flex-direction: column; gap: var(--space-element); }
  .aup-post-editor-tag-chips { display: flex; flex-wrap: wrap; gap: 4px; }
  .aup-post-editor-tag-chips:empty { display: none; }
  .aup-post-editor-tag-input {
    box-sizing: border-box; width: 100%;
    padding: 8px 12px;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-text);
    font: inherit;
  }
  .aup-post-editor-tag-input:focus {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 12%, transparent);
    outline: none;
  }
  .aup-post-editor-tag-suggestions { display: flex; flex-wrap: wrap; gap: 4px; }
  .aup-post-editor-tag-suggestions:empty { display: none; }
  .aup-post-editor-tag-suggestion {
    padding: 2px 8px;
    background: var(--color-surface);
    border: 1px dashed var(--color-border);
    border-radius: 999px;
    color: var(--color-dim);
    font-size: var(--type-caption);
    cursor: pointer;
  }
  .aup-post-editor-tag-suggestion:hover { border-color: var(--color-accent); color: var(--color-accent); }
  .aup-media-insert-btn { margin-left: auto; flex-shrink: 0; }
  .aup-media-insert-strip {
    display: flex; flex-direction: column; gap: 4px;
    margin-top: var(--space-element);
    font-size: var(--type-small);
    line-height: var(--leading-normal);
    color: var(--color-dim);
  }
  .aup-media-insert-status[data-kind="busy"] { color: var(--color-dim); }
  .aup-media-insert-login-prompt { color: var(--color-accent); }
  .aup-media-insert-items { display: flex; flex-direction: column; gap: 4px; }
  .aup-media-insert-items:empty { display: none; }
  .aup-media-insert-item {
    display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-element);
    padding: 4px var(--space-element);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    color: var(--color-text);
  }
  .aup-media-insert-item[data-kind="error"] { border-color: color-mix(in srgb, var(--color-error) 45%, var(--color-border)); }
  .aup-media-insert-item-name { color: var(--color-text); overflow-wrap: anywhere; }
  /* 12em flex-basis: the smallest message column that keeps name / message /
     actions on ONE row at desktop width; no canonical width token covers a
     text-column minimum (the --space-* scale is spacing, not measure). */
  .aup-media-insert-item-msg { flex: 1 1 12em; min-width: 0; color: var(--color-dim); overflow-wrap: anywhere; }
  .aup-media-insert-item[data-kind="error"] .aup-media-insert-item-msg { color: var(--color-error); }
  .aup-media-insert-action {
    padding: 2px var(--space-element);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    color: var(--color-text);
    font-family: var(--font-body); font-size: var(--type-small);
    cursor: pointer;
    transition: border-color var(--transition), color var(--transition);
  }
  .aup-media-insert-action:hover { border-color: var(--color-accent); color: var(--color-accent); }
  .aup-comments-surface-composer-input[data-media-drop="true"] { border-color: var(--color-accent); border-style: dashed; }
  /* Comments composer upload toolbar (arc#6622): one row above the textarea
     holding the shared upload button, right-aligned by the button's own
     margin-left:auto rule above — so the action row below still starts with
     Post/Reply (every host and test keys on that). Only built for a session
     that may upload. */
  .aup-comments-surface-composer-toolbar { display: flex; align-items: center; gap: var(--space-element); }
  /* Per-composer refusal line (arc#6622): same tint/size as the widget-level
     .aup-comments-surface-error, placed under the composer's own strip so a
     reply deep in a thread sees why its Reply click did nothing. */
  .aup-comments-surface-composer-note { color: var(--color-error); font-size: var(--type-caption); }
  .aup-comment-item-edit { display: flex; flex-direction: column; gap: var(--space-element); }
  .aup-comment-item-edit-actions { display: flex; justify-content: flex-end; gap: var(--space-element); }
  /* ── Nested reply-tree (issue #1006 Phase 3) ──
     Indentation compounds purely from DOM nesting: each level wraps the
     next inside another .aup-comment-item-children, so a single
     padding-left naturally produces increasing indent with depth — see
     comments-surface-bundle.ts module doc "Nested reply-tree rendering". */
  .aup-comment-item-children {
    display: flex; flex-direction: column; gap: var(--space-element);
    margin-top: var(--space-element);
    padding-left: var(--space-block);
    border-left: 1px solid var(--card-border);
  }
  /* arc#2933 follow-up (issuecomment-5163252813): no own margin-left here —
     .aup-comment-item-footer already spaces its children via its flex gap
     (same pattern .aup-comment-item-header uses above). A redundant
     margin-left on this button double-spaced it when a reactions picker
     precedes it, and — worse — pushed Reply off the card's own left edge
     whenever it's the footer's ONLY child (reactions disabled, or the
     reaction placeholder collapsed via :empty). Left-alignment must come
     from the footer's own flex layout, not a per-button margin assuming a
     preceding sibling always exists. */
  .aup-comment-reply-btn {
    display: inline-flex; align-items: center;
    padding: 2px var(--space-element);
    background: transparent;
    border: 1px solid var(--card-border);
    border-radius: var(--radius-sm);
    color: var(--color-dim);
    /* A <button> does not inherit the page font by default (browser UA
       stylesheet), so without this it renders in the platform's default
       UI font (observed as Arial on arc#2933) instead of the site's
       Inter/Noto Sans SC — every other text in this widget already goes
       through _escapeHtml'd content inside a font-family: var(--font-body)
       ancestor (.aup-comment-item-text etc.), only this <button> was left
       on the UA default. */
    font-family: var(--font-body);
    font-size: var(--type-caption);
    cursor: pointer;
    transition: background var(--transition), border-color var(--transition), color var(--transition);
  }
  .aup-comment-reply-btn:hover { background: var(--hover-bg); color: var(--color-text); }
  .aup-comment-reply-composer { padding-top: var(--space-element); }
  /* Guest display-name field (Phase 3 anonymous posting) — same input
     chrome as the composer textarea, single line. */
  .aup-comments-surface-composer-name {
    width: 100%; box-sizing: border-box;
    padding: 8px 12px;
    background: var(--color-bg);
    color: var(--color-text);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-family: var(--font-body); font-size: var(--type-body);
    outline: none;
    transition: border-color var(--transition);
  }
  .aup-comments-surface-composer-name::placeholder { color: var(--color-dim); }
  .aup-comments-surface-composer-name:focus {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 12%, transparent);
  }
  /* Guest gating (issue #1514) — same card chrome as the composer it
     replaces, so the surface doesn't visually jump when requireAuth flips
     the guest UX from a full form to a read-only prompt. */
  .aup-comments-surface-login-prompt {
    margin-left: 0;
    margin-right: 0;
    max-width: 100%;
    box-sizing: border-box;
    overflow-wrap: anywhere;
    padding: var(--space-block);
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-md);
    color: var(--color-dim);
    font-size: var(--type-body);
  }

/* comments-surface — host-side layout only (arc#2676).
 *
 * The thread's OWN styling ships with the renderer, in the shared
 * COMMENTS_SURFACE_CSS the `comments-surface-runtime` enhancement injects
 * (issue #2675 extracted it out of css.ts so AUP pages and this page consume
 * one source). Nothing in that sheet is restated here — this file only
 * positions the mount point in the page flow and styles the one state the
 * shared renderer has no concept of: a host transport failure.
 *
 * Every value is a canonical AUP token (providers/runtime/ui/CLAUDE.md rule 1).
 * Pre-rendered pages already embed the full primitives sheet (EPIC #2672 fact
 * 7), so the tokens resolve here exactly as they do inside /app.
 */

.comments-surface {
  margin-top: var(--space-section);
  /* A real layout box before the thread loads. The section is emitted EMPTY
     and, deliberately, NOT `hidden` — `display:none` has no box, and an
     element with no box never intersects, so the IntersectionObserver that
     triggers the lazy fetch would never fire. 1px is invisible to a reader
     and is also what a JS-disabled visitor is left with: an empty band, no
     skeleton residue. */
  min-height: 1px;
}

.comments-surface-error {
  display: flex;
  align-items: center;
  gap: var(--space-element);
  padding: var(--space-block);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-dim);
  font-size: var(--type-caption);
  line-height: var(--leading-normal);
}

.comments-surface-retry {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text);
  font: inherit;
  /* No canonical token for a control's own height/padding — see rule 4's
     "touch-target heights" carve-out; kept on the spacing scale where it can
     be. */
  padding: 0.25rem var(--space-element);
  cursor: pointer;
  transition: var(--transition);
}

.comments-surface-retry:hover {
  background: var(--hover-bg);
}

/* Place card — name / category / address + outbound links. One accent, no panels. */

.place-cards {
  margin: 0 auto;
  max-width: var(--page-max, 1120px);
  padding: 0.5rem var(--page-gutter, 24px) 2.5rem;
}
.place-cards--strip {
  padding-top: 2.5rem;
  padding-bottom: 1.5rem;
}
.place-cards-heading {
  font-size: 1.125rem;
  margin: 0 0 1.25rem;
}
.place-cards-list {
  display: grid;
  gap: 0.75rem;
}
.place-cards--strip .place-cards-list {
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}
.place-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 1rem 1.125rem;
  background: var(--color-surface, transparent);
}
.place-card--detail {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1.5rem;
  align-items: start;
  max-width: 40rem;
  border: 0;
  padding: 0;
  background: transparent;
}
.place-card-category {
  margin: 0 0 0.35rem;
  font-family: var(--font-heading);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-dim);
}
.place-card-title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.01em;
  text-decoration: none;
}
a.place-card-title:hover { color: var(--color-accent); }
.place-card-address,
.place-card-excerpt {
  margin: 0.35rem 0 0;
  color: var(--color-dim);
  font-size: 0.9375rem;
  line-height: 1.45;
}
.place-card-links {
  list-style: none;
  margin: 0.75rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.85rem;
}
.place-card-link {
  font-size: 0.875rem;
  font-weight: 600;
}
.place-card-map {
  position: relative;
  display: block;
  width: 10rem;
  height: 10rem;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--color-border);
  flex-shrink: 0;
}
.place-card-map img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.place-card-map-pin {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0.7rem;
  height: 0.7rem;
  margin: -0.35rem 0 0 -0.35rem;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  background: var(--color-accent);
  box-shadow: 0 0 0 2px var(--color-bg, #fff);
}
@media (max-width: 48rem) {
  .place-cards { padding: 2rem var(--page-gutter, 24px); }
  .place-card--detail {
    grid-template-columns: minmax(0, 1fr);
  }
  .place-card-map {
    width: 100%;
    height: 10rem;
  }
}

.rel { margin: 0 auto; max-width: var(--page-max, 1120px); padding: 3rem var(--page-gutter, 24px); }
.rel-heading { font-size: 1.125rem; margin: 0 0 1.25rem; }
.rel-groups { display: grid; gap: 2rem; }
.rel-group-title { font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-dim); margin: 0 0 0.625rem; }
.rel-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.875rem; }
.rel-row { display: grid; gap: 0.2rem; padding-bottom: 0.875rem; border-bottom: 1px solid var(--color-border); }
.rel-row:last-child { border-bottom: 0; }
.rel-link { font-weight: 600; text-decoration: none; }
.rel-row p { margin: 0; color: var(--color-dim); font-size: 0.9375rem; }
.rel-row time { font-size: 0.8125rem; color: var(--color-dim); }
.rel-state { display: inline-block; justify-self: start; font-family: var(--font-heading); font-size: 0.6875rem; letter-spacing: 0.02em; padding: 0.05rem 0.4rem; border-radius: var(--radius-lg); border: 1px solid var(--color-border); color: var(--color-dim); margin-left: 0.4rem; }
.rel-state--active { border-color: var(--color-accent); color: var(--color-accent); }
.rel-state--preview,
.rel-state--superseded, .rel-state--sunset, .rel-state--abandoned { border-style: dashed; }
.rel-empty { color: var(--color-dim); }
@media (max-width: 48rem) { .rel { padding: 2.5rem var(--page-gutter, 24px); } }

.detail-content-layout {
  --detail-content-top: clamp(2.5rem, 5vw, 4.5rem);

  width: min(100%, var(--page-max, 1280px));
  margin: 0 auto;
}

.detail-content-layout--has-toc {
  --detail-main-max: 820px;
  --detail-prose-max: var(--content-max, 640px);
  --detail-wide-max: 820px;
  --detail-sidebar-min: 220px;
  --detail-sidebar-max: 260px;
  --detail-layout-gap: clamp(2.5rem, 5vw, 5rem);
  --detail-main-available: min(
    var(--detail-main-max),
    calc(
      min(100vw, var(--page-max, 1280px)) -
      var(--page-gutter, 2rem) -
      var(--page-gutter, 2rem) -
      var(--detail-sidebar-max) -
      var(--detail-layout-gap)
    )
  );

  display: grid;
  grid-template-columns:
    minmax(0, var(--detail-main-max))
    minmax(var(--detail-sidebar-min), var(--detail-sidebar-max));
  justify-content: center;
  gap: var(--detail-layout-gap);
  padding: 0 var(--page-gutter, 2rem);
}

.detail-content-sidebar {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
  padding-top: var(--detail-content-top);
}

/* `after-content` (arc#2677's first real consumer: the comment-thread
   component that mounts here when a site turns commenting on) — default box
   matches `.detail-content-area` below exactly: same width/margin/padding,
   so with no sidebar (plain block layout, no grid) its left/right edges land
   on the article's own edges instead of stretching full-bleed. This is also
   the correct rule for the HAS-TOC layout once it collapses to a single flex
   column below 1101px (see the `max-width: 1100px` block further down) — the
   `min-width: 1101px` override right after this claims the desktop grid case
   instead. This stylesheet ships on EVERY article page whether commenting is
   on or off, so it must never spell out that component's name literally. */
.detail-content-after {
  width: min(100%, var(--content-max, 820px));
  min-width: 0;
  max-width: 100%;
  margin: 0 auto;
  padding-inline: 2rem;
}

.detail-content-area {
  width: min(100%, var(--content-max, 820px));
  min-width: 0;
  max-width: 100%;
  margin: 0 auto;
  padding: var(--detail-content-top) 2rem;
  color: var(--color-text, #171717);
}

/* Markdown content arrives through the shared section renderer as
   `.container > .aup-view`. The page component already owns the outer gutter,
   so retaining the generic container gutter here creates a second inset and
   disconnects the article's reading edge from the Hero. */
.detail-content-area > .container {
  width: 100%;
  max-width: none;
  padding-inline: 0;
}

.detail-content-area > .container > .aup-view {
  width: min(100%, var(--detail-prose-max, var(--content-max, 640px)));
}

.detail-content-area .aup-markdown-table-wrap {
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
  margin: 1.6rem 0;
  border-radius: var(--radius-lg, 8px);
}

/* Article bodies share the Markdown table primitive; force cell reflow so long
   code / URLs wrap inside the reading column (arcblock-site#361). */
.detail-content-area .aup-markdown-table {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  table-layout: auto;
}

.detail-content-area .aup-markdown-table th,
.detail-content-area .aup-markdown-table td {
  overflow-wrap: anywhere;
  word-break: break-word;
}

.detail-content-area .aup-markdown-table code {
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.detail-content-area::before {
  content: "";
  display: block;
  width: 3.5rem;
  height: 0.16rem;
  margin-bottom: 1.5rem;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    var(--color-accent, #1e6fd9),
    var(--color-accent-secondary, var(--color-accent, #1e6fd9))
  );
}

.detail-content-area .aup-text {
  max-width: 100%;
  margin: 0 0 1rem;
  overflow-wrap: anywhere;
}

.detail-content-area p.aup-text {
  color: color-mix(in srgb, var(--color-text, #171717) 82%, var(--color-dim, #737373));
  font-family: var(--font-sans, "Inter", sans-serif);
  font-size: 1.0625rem;
  line-height: 1.62;
}

.detail-content-area h2.aup-text,
.detail-content-area h3.aup-text,
.detail-content-area h4.aup-text {
  scroll-margin-top: 96px;
  color: var(--color-text, #171717);
  font-family: var(--font-heading, var(--font-serif, "Newsreader", Georgia, serif));
  line-height: 1.18;
  letter-spacing: 0;
}

.detail-content-area h2.aup-text {
  position: relative;
  margin-top: 2.75rem;
  margin-bottom: 0.9rem;
  padding-left: 1rem;
  font-size: clamp(1.65rem, 2.2vw, 2rem);
  font-weight: 760;
}

.detail-content-area h2.aup-text::before,
.detail-content-area h3.aup-text::before {
  position: absolute;
  top: 0.08em;
  bottom: 0.08em;
  left: 0;
  width: 3px;
  border-radius: 999px;
  background: var(--color-accent, #1e6fd9);
  content: "";
}

.detail-content-area h3.aup-text {
  position: relative;
  margin-top: 2rem;
  padding-left: 0.85rem;
  font-size: clamp(1.25rem, 1.8vw, 1.45rem);
  font-weight: 720;
}

.detail-content-area a {
  color: var(--color-accent, #1e6fd9);
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.18em;
}

.detail-content-area strong {
  color: var(--color-text, #171717);
  font-weight: 760;
}

.detail-content-area code {
  padding: 0.12rem 0.32rem;
  border: 1px solid color-mix(in srgb, var(--color-border, #e8e8e8) 78%, transparent);
  border-radius: 5px;
  color: var(--color-accent, #1e6fd9);
  background: color-mix(in srgb, var(--color-accent, #1e6fd9) 8%, transparent);
  font-size: 0.9em;
}

/* arc#2392: fenced code blocks get a toolbar (language label + copy button)
   wrapping the <pre> — inline code above is untouched. */
.detail-content-area .aup-code-block {
  margin: 1.5rem 0;
}

.detail-content-area pre.aup-text {
  margin: 0;
  overflow-x: auto;
  padding: 1rem;
  border: 1px solid color-mix(in srgb, var(--color-border, #e8e8e8) 78%, transparent);
  border-radius: var(--radius-lg, 8px);
  background: color-mix(in srgb, var(--color-text, #171717) 8%, var(--color-surface, #fafafa));
}

.detail-content-area .aup-code-toolbar + pre.aup-text {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.detail-content-area pre.aup-text code {
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
}

.detail-content-area .aup-code-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.45rem 1rem;
  border: 1px solid color-mix(in srgb, var(--color-border, #e8e8e8) 78%, transparent);
  border-bottom: 0;
  border-top-left-radius: var(--radius-lg, 8px);
  border-top-right-radius: var(--radius-lg, 8px);
  background: color-mix(in srgb, var(--color-text, #171717) 5%, var(--color-surface, #fafafa));
}

.detail-content-area .aup-code-lang {
  color: color-mix(in srgb, var(--color-text, #171717) 55%, transparent);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.detail-content-area .aup-code-copy-btn {
  margin-left: auto;
  padding: 0.3rem 0.65rem;
  border: 1px solid color-mix(in srgb, var(--color-border, #e8e8e8) 78%, transparent);
  border-radius: 6px;
  background: var(--color-surface, #fafafa);
  color: color-mix(in srgb, var(--color-text, #171717) 55%, transparent);
  font-size: 0.76rem;
  cursor: pointer;
  transition:
    color 0.15s ease,
    border-color 0.15s ease;
}

.detail-content-area .aup-code-copy-btn:hover {
  color: var(--color-text, #171717);
  border-color: var(--color-accent, #1e6fd9);
}

.detail-content-area .aup-code-copy-btn:focus-visible {
  outline: 2px solid var(--color-accent, #1e6fd9);
  outline-offset: 2px;
}

.detail-content-area .aup-code-copy-btn.is-success {
  color: #16a34a;
  border-color: #16a34a;
}

.detail-content-area .aup-code-copy-btn.is-error {
  color: #dc2626;
  border-color: #dc2626;
}

.detail-content-area blockquote.aup-text {
  margin: 1.7rem 0;
  padding: 1.1rem 1.25rem;
  border-left: 4px solid var(--color-accent, #1e6fd9);
  border-radius: 0 var(--radius-lg, 8px) var(--radius-lg, 8px) 0;
  background: color-mix(in srgb, var(--color-accent, #1e6fd9) 9%, transparent);
  color: var(--color-text, #171717);
}

.detail-content-area .aup-text[data-format="html"] ul,
.detail-content-area .aup-text[data-format="html"] ol {
  margin: 1rem 0 1.4rem;
  padding-left: 1.4rem;
}

.detail-content-area .aup-text[data-format="html"] li {
  margin: 0.45rem 0;
  line-height: 1.62;
}

.detail-content-area .aup-media {
  margin: 2rem 0;
}

.detail-content-area .aup-media img {
  width: 100%;
  border-radius: var(--radius-lg, 8px);
  border: 1px solid color-mix(in srgb, var(--color-border, #e8e8e8) 78%, transparent);
}

/* Inline markdown images/videos render inside `.aup-text` (format:"html"), not
   `.aup-media`, so the rule above doesn't reach them. Without a cap they render
   at their intrinsic width (e.g. a 1600px webp overflows the ~640px reading
   column ~3x) — same for a raw <video> embed (arc#2301). Constrain to the
   column; don't upscale smaller media. */
.detail-content-area .aup-text img,
.detail-content-area .aup-text video {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-lg, 8px);
}

html[data-tone="technical"] .detail-content-area {
  --content-max: 880px;
}

html[data-tone="technical"] .detail-content-area::before {
  background: repeating-linear-gradient(
    90deg,
    var(--color-accent, #1e6fd9) 0 0.7rem,
    var(--color-accent-secondary, var(--color-accent, #1e6fd9)) 0.7rem 1.4rem
  );
}

html[data-tone="product"] .detail-content-area h2.aup-text {
  --color-accent: var(--color-accent-secondary, #1e6fd9);
}

@media (min-width: 1101px) {
  .detail-content-layout--has-toc .detail-content-area {
    width: 100%;
    margin: 0;
    padding-inline: 0;

    /* The shared lightbox enhancement defaults to a page-wide breakout. When a
       desktop TOC occupies the second track, expose the first track's actual
       available width so media cannot paint over the navigation. */
    --media-breakout-max: var(--detail-main-available);
  }

  /* Prose keeps a stable reading measure while technical material can use the
     whole main track. Tables retain local scrolling for intrinsically wider
     data, and neither tier enters the TOC track. */
  .detail-content-layout--has-toc .detail-content-area
    :where(.aup-markdown-table-wrap, .aup-code-block) {
    width: min(var(--detail-wide-max), var(--detail-main-available));
    max-width: none;
    align-self: flex-start;
  }

  /* arc#2677: share the SAME grid column as `.detail-content-area` (a second
     row in the main track, below the article) instead of re-deriving its
     left/right edges — the grid's own `justify-content`/gap math is the only
     source of truth for where that column actually sits, and duplicating it
     here would drift the moment either changes. `.detail-content-after`'s
     base rule (width/margin/padding, above) is for the no-sidebar case only;
     here it steps aside so the grid placement wins. */
  .detail-content-layout--has-toc .detail-content-after {
    grid-column: 1;
    grid-row: 2;
    width: 100%;
    max-width: none;
    margin: 0;
    padding-inline: 0;
  }
}

@media (max-width: 768px) {
  .detail-content-area {
    padding: 2rem 1.15rem 2.5rem;
  }

  .detail-content-after {
    padding-inline: 1.15rem;
  }
}

@media (max-width: 1100px) {
  .detail-content-layout--has-toc {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0;
  }

  .detail-content-sidebar {
    order: 0;
    width: min(100% - 2.3rem, var(--content-max, 820px));
    margin: clamp(1rem, 3vw, 2rem) auto 0;
    padding: 0;
  }

  .detail-content-area {
    order: 1;
  }

  /* Collapsed has-toc stacks sidebar/content/after-content as a flex column
     — an explicit order is needed so after-content lands below the article
     body, not between the (order: 0) sidebar and (order: 1) content by
     DOM-order tie-break (it has no order of its own otherwise, and DOM order
     places it right after the sidebar). The base `.detail-content-after`
     width/margin/padding rule already applies here unchanged (this query is
     narrower than the `min-width: 1101px` grid override above, so that one
     never fires at these widths). */
  .detail-content-after {
    order: 2;
  }
}