*, *::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: "Sora", sans-serif;
  --color-dim: #6b6b78;
  --content-max: 640px;
  --color-accent: #2a6e00;
  --color-surface: #ffffff;
  --font-heading: "DM Serif Display", serif;
  --color-bg: #fafaf8;
  --color-border: rgba(0,0,0,0.08);
  --container-max: 1200px;
  --font-mono: "JetBrains Mono", monospace;
  --color-text: #1a1a1f;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-mode="light"]),
  [data-tone][data-palette]:not([data-mode="light"]) {
    --color-dim: #8b89a0;
    --color-accent: #c4f04d;
    --color-surface: #1a1a25;
    --color-bg: #0a0a0f;
    --color-border: rgba(255,255,255,0.06);
    --color-text: #e8e6f0;
  }
}
[data-tone][data-palette][data-mode="dark"] {
  --color-dim: #8b89a0;
  --color-accent: #c4f04d;
  --color-surface: #1a1a25;
  --color-bg: #0a0a0f;
  --color-border: rgba(255,255,255,0.06);
  --color-text: #e8e6f0;

}
.portal-header {
  --portal-accent: #a86f08;
  --portal-accent-hover: #8f5f07;
  --portal-accent-ink: #fffaf0;
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgba(255, 255, 255, 0.92);
  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: rgba(255, 255, 255, 0.96);
  border-bottom-color: rgba(226, 219, 207, 0.85);
}

[data-mode="dark"] .portal-header {
  --portal-accent: #d99735;
  --portal-accent-hover: #f0ad47;
  --portal-accent-ink: #17110b;
  background: rgba(21, 17, 13, 0.9);
  color: #efe6d5;
}

[data-mode="dark"] .portal-header.scrolled {
  background: rgba(21, 17, 13, 0.96);
  border-bottom-color: rgba(90, 70, 49, 0.82);
}

.portal-header .container {
  /* Match the Aside landing shell: min(1440px, 100% - 32px). */
  width: min(1440px, calc(100% - 32px));
  max-width: none;
  margin: 0 auto;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 76px;
  gap: 1.5rem;
}

/* 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.46rem;
  font-family: var(--font-display, "Sora", system-ui, sans-serif);
  font-weight: 500;
  font-size: 1.9rem;
  letter-spacing: 0;
  color: #3b352e;
  text-decoration: none;
}

[data-mode="dark"] .portal-header .logo,
[data-mode="dark"] .portal-header .logo .logo-svg svg {
  color: #efe6d5;
}

/* 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 .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: #3b352e;
}

.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(--portal-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.2s ease;
}

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

[data-mode="dark"] .portal-header .main-nav a:hover {
  color: #f4ead8;
}

.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(--portal-accent);
  color: var(--portal-accent-ink);
  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: var(--portal-accent-hover);
  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);
}

[data-mode="dark"] .portal-header .user-slot .aup-app-header-action {
  border-color: rgba(112, 89, 61, 0.72);
  color: #b8a993;
}

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

[data-mode="dark"] .portal-header .user-slot .aup-app-header-action:hover {
  color: #f4ead8;
  border-color: color-mix(in srgb, var(--portal-accent) 52%, rgba(112, 89, 61, 0.72));
}

.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;
}

.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;
}

[data-mode="dark"] .portal-header .locale-picker-btn,
[data-mode="dark"] .portal-header .mode-toggle {
  border-color: rgba(112, 89, 61, 0.72);
  color: #b8a993;
}

/* 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(--portal-accent) 40%, var(--color-border, #e5e7eb));
}

[data-mode="dark"] .portal-header .locale-picker-btn:hover,
[data-mode="dark"] .portal-header .mode-toggle:hover {
  color: #f4ead8;
  border-color: color-mix(in srgb, var(--portal-accent) 52%, rgba(112, 89, 61, 0.72));
}

.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;
}

[data-mode="dark"] .portal-header .locale-dropdown {
  background: rgba(27, 22, 17, 0.96);
  border-color: rgba(112, 89, 61, 0.78);
  box-shadow: 0 22px 48px rgba(0, 0, 0, 0.34);
}

.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;
}

[data-mode="dark"] .portal-header .locale-option {
  color: #b8a993;
}

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

[data-mode="dark"] .portal-header .locale-option:hover {
  color: #f4ead8;
}

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

.portal-header .locale-option.active::before {
  content: "•";
  color: var(--portal-accent);
  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;
}

.portal-header :is(a, button):focus-visible {
  outline: 3px solid var(--portal-accent);
  outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
  .portal-header,
  .portal-header *,
  .portal-header *::before,
  .portal-header *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

@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;
  }
}

@media (max-width: 520px) {
  /* Content-fit tightening so a minimal single-row header (logo + CTA + control
     pills) fits a ~375px phone without wrapping. The horizontal gutter stays
     var(--page-gutter) (16px) so the header still aligns with the sections;
     only the inter-item gaps + CTA padding shrink. */
  .portal-header .container {
    gap: 0.5rem;
    padding-inline: 16px;
  }
  .portal-header .header-controls {
    gap: 0.24rem;
  }
  .portal-header .nav-cta {
    padding: 0 0.58rem;
    margin-right: 0;
    font-size: 0.72rem;
  }

  /* Stack into rows ONLY when there's an actual left nav that needs a full row
     to breathe. A minimal header — logo + right-side controls/CTA with an empty
     main-nav (e.g. aside, whose only action is a right-side "Open Web" CTA)
     — fits comfortably on one row, so forcing a second row just looked like a
     stray line-break. :has() keeps the crowded-nav sites stacking as before;
     the container's flex-wrap (from the 860px block) still catches overflow on
     very narrow screens for the single-row case. */
  .portal-header .container:has(.main-nav a) {
    flex-direction: column;
    align-items: flex-start;
  }

  .portal-header .container:has(.main-nav a) .header-left {
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }

  .portal-header .container:has(.main-nav a) .header-controls {
    width: 100%;
    justify-content: space-between;
  }
}

.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;
  }
}

/* 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;
  }
}

[data-media-lightbox] .media-lightbox-figure {
  max-width: 100%;
  margin: 1.4rem 0;
}

[data-media-lightbox] .media-lightbox-trigger {
  display: block;
  max-width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: zoom-in;
}

[data-media-lightbox] .media-lightbox-trigger:focus-visible {
  border-radius: var(--radius-lg, 8px);
  outline: 3px solid var(--color-accent, #1e6fd9);
  outline-offset: 4px;
}

[data-media-lightbox] .media-lightbox-figure img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0;
}

[data-media-lightbox][data-media-breakout] .media-lightbox-figure {
  width: min(var(--media-breakout-max, var(--container-max, 1280px)), calc(100vw - 2rem));
  max-width: min(var(--media-breakout-max, var(--container-max, 1280px)), calc(100vw - 2rem));
  margin: 1.75rem 50%;
  transform: translateX(-50%);
}

[data-media-lightbox][data-media-breakout] .media-lightbox-trigger {
  width: 100%;
}

[data-media-lightbox][data-media-breakout] .media-lightbox-figure img {
  width: auto;
  margin: 0 auto;
  border: 1px solid color-mix(in srgb, var(--color-border, #e8e8e8) 78%, transparent);
}

[data-media-lightbox] .media-lightbox-caption {
  max-width: var(--content-max, 820px);
  margin: 0.75rem auto 0;
  color: var(--color-dim, #737373);
  font-size: 0.88rem;
  line-height: 1.5;
  text-align: center;
}

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

.media-lightbox {
  position: fixed;
  z-index: 1000;
  inset: 0;
  display: grid;
  place-items: center;
  padding: clamp(1rem, 4vw, 3rem);
  border: 0;
  background: color-mix(in srgb, #000 88%, transparent);
  animation: media-lightbox-fade-in 180ms ease-out;
}

.media-lightbox img {
  max-width: 100%;
  max-height: calc(100vh - 6rem);
  object-fit: contain;
  animation: media-lightbox-image-in 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.media-lightbox-close {
  position: fixed;
  top: 1rem;
  right: 1rem;
  display: grid;
  width: 2.75rem;
  height: 2.75rem;
  place-items: center;
  border: 1px solid rgb(255 255 255 / 45%);
  border-radius: 999px;
  background: rgb(0 0 0 / 55%);
  color: #fff;
  font-size: 1.5rem;
  cursor: pointer;
}

.media-lightbox-close:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
}

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

@keyframes media-lightbox-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes media-lightbox-image-in {
  from {
    opacity: 0;
    transform: scale(0.98);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .media-lightbox,
  .media-lightbox img {
    animation: none;
  }
}

@media (max-width: 768px) {
  [data-media-lightbox][data-media-breakout] .media-lightbox-figure {
    width: calc(100vw - 2rem);
    max-width: calc(100vw - 2rem);
  }
}

.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;
  }
}