*, *::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}}

.key-pad {
  position: fixed;
  right: var(--page-gutter, 24px);
  bottom: 1.4rem;
  z-index: 30;
  display: grid;
  grid-template-columns: 2rem 2rem 2rem;
  grid-template-rows: 2rem 2rem;
  grid-template-areas:
    ". up ."
    "left down right";
  gap: 0.22rem;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.28s ease,
    visibility 0.28s ease;
}

.key-pad.is-live {
  pointer-events: none;
  opacity: 1;
  visibility: visible;
}

.key-pad button {
  appearance: none;
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--color-border) 80%, transparent);
  border-radius: 5px;
  background: color-mix(in srgb, var(--color-bg) 88%, transparent);
  color: var(--color-dim);
  font-family: var(--font-utility, ui-monospace, monospace);
  font-size: 0.95rem;
  line-height: 1;
  opacity: 0.28;
  pointer-events: none;
  cursor: default;
}

.key-pad button[data-dir="up"] {
  grid-area: up;
}

.key-pad button[data-dir="left"] {
  grid-area: left;
}

.key-pad button[data-dir="right"] {
  grid-area: right;
}

.key-pad button[data-dir="down"] {
  grid-area: down;
}

.key-pad button.is-on {
  border-color: var(--color-accent);
  color: var(--color-accent);
  opacity: 1;
  pointer-events: auto;
  cursor: pointer;
}

.key-pad button.is-on:hover,
.key-pad button.is-on:focus-visible {
  background: color-mix(in srgb, var(--color-accent) 12%, var(--color-bg));
  outline: none;
}

.key-pad button.is-pulse {
  animation: key-pad-pulse 0.28s ease;
}

@keyframes key-pad-pulse {
  0% {
    transform: scale(1);
  }
  40% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}

@media (max-width: 700px) {
  .key-pad {
    right: 0.7rem;
    bottom: 0.9rem;
    gap: 0.18rem;
    grid-template-columns: 1.85rem 1.85rem 1.85rem;
    grid-template-rows: 1.85rem 1.85rem;
  }

  .key-pad button {
    width: 1.85rem;
    height: 1.85rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .key-pad,
  .key-pad button.is-pulse {
    animation: none;
    transition: none;
  }
}

.for-sentence {
  width: 100%;
  max-width: none;
  margin: 0 auto;
  padding: 0;
  color: var(--color-text);
  font-family: var(--font-display, Sora, system-ui, sans-serif);
  text-align: center;
}

.for-sentence-hero {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 1.05rem var(--page-gutter, 24px) 0.7rem;
  container-type: inline-size;
}

.for-sentence-lead {
  margin: 0 0 0.4rem;
  color: var(--color-dim);
  font-size: clamp(1.08rem, 1.4vw, 1.5rem);
  font-weight: 400;
  line-height: 1.3;
}

.for-sentence-brand {
  color: var(--color-text);
  font-weight: 620;
  text-decoration: none;
  pointer-events: none;
}

.for-sentence-verb {
  color: var(--color-dim);
  font-weight: 400;
}

.for-sentence-reel {
  --reel-line: 1.24em;
  box-sizing: border-box;
  width: max-content;
  max-width: 100%;
  height: var(--reel-line);
  margin: 0 auto 0.85rem;
  overflow: hidden;
  color: var(--color-accent);
  /* Longest label is ~24ch; 6.2cqi + role padding keep first-paint ink inside the clip. */
  font-size: clamp(1.15rem, 6.2cqi, 3.9rem);
  pointer-events: none;
  user-select: none;
}

.for-sentence-reel-track {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.for-sentence-role {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: content-box;
  height: var(--reel-line);
  padding-inline: 0.42em;
  color: inherit;
  font-size: 1em;
  font-weight: 560;
  letter-spacing: -0.035em;
  line-height: 1;
  white-space: nowrap;
}

.for-sentence-you-line {
  margin: 0;
}

.for-sentence-you {
  color: var(--color-dim);
  font-size: clamp(1.08rem, 1.4vw, 1.5rem);
  font-weight: 400;
  text-decoration: none;
  cursor: pointer;
}

.for-sentence-you-word {
  font-weight: 620;
  color: var(--color-text);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  text-decoration-color: color-mix(in srgb, currentColor 42%, transparent);
}

.for-sentence-you:hover {
  color: var(--color-accent);
}

.for-sentence-you:hover .for-sentence-you-word {
  color: var(--color-accent);
  text-decoration-color: var(--color-accent);
}

.for-sentence-you:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 4px;
}

#you-hero.landing-page-section,
#you-hero.landing-page-section:nth-child(even) {
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
}

#you-hero .landing-hero-inner {
  min-height: 0;
  padding-top: clamp(1.6rem, 3vw, 2.4rem);
  padding-bottom: clamp(2.4rem, 5vw, 3.6rem);
  grid-template-columns: minmax(0, 1.2fr) minmax(11rem, 0.46fr);
  gap: clamp(1.5rem, 4vw, 4rem);
}

#you-hero .landing-hero-trace {
  min-height: 12rem;
}



@media (max-width: 760px) {
  #you-hero .landing-hero-inner {
    grid-template-columns: 1fr;
    padding-top: 1.35rem;
    padding-bottom: 2.4rem;
    gap: 1.6rem;
  }
}

.for-sentence-preview {
  display: none;
}

body.is-role-preview .for-sentence-preview,
body.is-xy-show .for-sentence-preview {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 0;
  min-height: calc(100svh - var(--lab-xy-first, 14rem));
  padding: 2rem var(--page-gutter, 24px) 0.45rem;
}

.for-sentence-cluster {
  position: relative;
  z-index: 2;
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

html:is(.lab-xy-page, :has(.landing-page--deck)):not(.lab-xy-home) #xy-chrome {
  display: none;
}

.xy-show:not([hidden]) {
  display: block;
}

.for-sentence-stage {
  position: relative;
  z-index: 2;
  display: grid;
  align-content: center;
  flex: 0 0 auto;
  width: min(46rem, 100%);
  min-height: 5.4rem;
}

.for-sentence-spread {
  position: relative;
  z-index: 2;
  display: flex;
  flex: 0 0 auto;
  align-items: flex-end;
  justify-content: center;
  width: 100%;
  min-height: 0;
  margin-top: 1.65rem;
}

.for-sentence-cover {
  grid-area: 1 / 1;
  margin: 0;
  color: var(--color-text);
  font-family: var(--font-display, Sora, system-ui, sans-serif);
  font-size: clamp(2.15rem, 4.2vw, 4.4rem);
  font-weight: 560;
  letter-spacing: -0.04em;
  line-height: 1.08;
  text-wrap: balance;
  opacity: 0;
  transform: translate3d(0, 1.1rem, 0);
  pointer-events: none;
  transition:
    opacity 0.55s ease,
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.for-sentence-cover.is-on {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.for-sentence-stage[data-dir="left"] .for-sentence-cover {
  transform: translate3d(1.4rem, 0, 0);
}

.for-sentence-stage[data-dir="left"] .for-sentence-cover.is-on {
  transform: none;
}

.for-sentence-stage[data-dir="right"] .for-sentence-cover {
  transform: translate3d(-1.4rem, 0, 0);
}

.for-sentence-stage[data-dir="right"] .for-sentence-cover.is-on {
  transform: none;
}

.for-sentence-chooser {
  position: relative;
  z-index: 2;
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  margin-top: auto;
  padding-top: 0.7rem;
  padding-bottom: 0.15rem;
}

.for-sentence-dots {
  display: flex;
  gap: 0.55rem;
}

.for-sentence-dot {
  appearance: none;
  width: 9px;
  height: 9px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: color-mix(in srgb, var(--color-accent) 22%, transparent);
  cursor: pointer;
}

.for-sentence-dot.is-on {
  background: var(--color-accent);
  transform: scale(1.35);
}

.for-sentence-dot[data-kind="egg"],
.for-sentence-dot[data-kind="holiday"],
.for-sentence-dot[data-kind="region"] {
  border-radius: 2px;
}

.for-sentence-role[hidden],
.for-sentence-cover[hidden],
.for-sentence-dot[hidden] {
  display: none !important;
}

body.is-role-preview #featured-reading,
body.is-role-preview #product-collection,
body.is-role-preview #latest-updates,
body.is-role-preview .site-footer,
body.is-xy-show #featured-reading,
body.is-xy-show #product-collection,
body.is-xy-show #latest-updates {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .for-sentence-cover,
  .for-sentence-reel-track {
    transition: none;
  }
}

html[lang^="zh"] .for-sentence-role,
html[lang^="ja"] .for-sentence-role,
html[lang^="zh"] .for-sentence-cover,
html[lang^="ja"] .for-sentence-cover {
  letter-spacing: 0;
}

html[lang^="zh"] .for-sentence-cover,
html[lang^="ja"] .for-sentence-cover {
  font-size: clamp(1.95rem, 3.5vw, 3.5rem);
  line-height: 1.18;
}

@media (max-width: 700px) {
  body.is-role-preview .for-sentence-preview,
  body.is-xy-show .for-sentence-preview {
    padding-top: calc(0.4rem + var(--lab-xy-globe, clamp(16rem, 70vmin, 24rem)) / 2 - 3.2rem);
  }

  .for-sentence-spread {
    margin-top: 1.15rem;
  }
}

#xy-chrome.landing-page-section,
#xy-chrome.landing-page-section:nth-child(even) {
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
}

#xy-spread {
  display: none !important;
}

body:has(.aup-deck) .landing-page-section:nth-child(even) {
  background: var(--color-bg);
}

body:has(.aup-deck) .landing-page #content {
  padding: 0;
}

body:has(.aup-deck) .landing-page #content .detail-content-layout {
  max-width: var(--page-max, 1120px);
  margin: 0 auto;
  padding: 1.25rem var(--page-gutter, 24px) 3rem;
}

.landing-page #you-latest,
.landing-page #you-latest.landing-page-section:nth-child(even) {
  background: var(--color-bg);
}

.landing-page #you-latest .editorial-feed {
  display: block;
  max-width: 42rem;
  padding: 0.4rem var(--page-gutter, 24px) 0.5rem;
}

.landing-page #you-latest .editorial-feed-rail {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.4rem 1rem;
  max-width: none;
  position: static;
  margin-bottom: 0.35rem;
}

.landing-page #you-latest .editorial-feed-rail h2 {
  color: var(--color-dim);
  font-family: var(--font-utility, ui-monospace, monospace);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.landing-page #you-latest .editorial-feed-rail p {
  display: none;
}

.landing-page #you-latest .editorial-feed-all {
  margin-top: 0;
}

.landing-page #you-latest .editorial-feed-row {
  padding: 0.72rem 0;
}

.landing-page #you-latest .editorial-feed-row h3 {
  font-size: 1.02rem;
  font-weight: 560;
  letter-spacing: 0;
}

.landing-page #you-latest .editorial-feed-row p {
  display: none;
}

html[lang^="zh"] .landing-page #you-latest .editorial-feed-rail h2,
html[lang^="ja"] .landing-page #you-latest .editorial-feed-rail h2 {
  letter-spacing: 0.12em;
}

/* The server-rendered landing-page--deck marker applies the same geometry before
   the slideshow script adds lab-xy-page / aup-deck--cards.
   Page mode: each slide is a page. Header/sentence scroll away; footer is the last stop.
   Original player + transcript stay the default on decks without .for-sentence. */
html:is(.lab-xy-page, :has(.landing-page--deck)) {
  scroll-snap-type: y mandatory;
  overscroll-behavior-y: contain;
  overflow-anchor: none;
}

html:is(.lab-xy-page, :has(.landing-page--deck)).lab-xy-paging {
  scroll-snap-type: none;
  scrollbar-width: none;
}

.for-sentence,
html.lab-xy-paging :is(.aup-deck--cards, :where(.landing-page--deck) .aup-deck) {
  touch-action: none;
}

.for-sentence.is-dragging .for-sentence-cluster {
  will-change: transform;
}

.for-sentence.is-dragging .for-sentence-cover,
.for-sentence.is-dragging .for-sentence-reel-track {
  transition: none;
}

.for-sentence.is-quick .for-sentence-cover {
  transition:
    opacity 0.2s ease,
    transform 0.26s cubic-bezier(0.22, 1, 0.36, 1);
}

html:is(.lab-xy-page, :has(.landing-page--deck)).lab-xy-paging::-webkit-scrollbar {
  display: none;
}

html:is(.lab-xy-page, :has(.landing-page--deck)) .portal-header {
  position: relative;
  z-index: 40;
}

html:is(.lab-xy-page, :has(.landing-page--deck)) #xy-chrome {
  position: relative;
  z-index: 1;
}

html:is(.lab-xy-page, :has(.landing-page--deck)):not(.lab-xy-home) .for-sentence {
  max-width: 36rem;
  padding-top: 1.6rem;
  padding-bottom: 1.7rem;
}

html.lab-xy-home .for-sentence-hero,
html.lab-xy-home .for-sentence-preview {
  scroll-snap-align: none;
}

html:is(.lab-xy-page, :has(.landing-page--deck)) .landing-page #content .detail-content-layout,
html:is(.lab-xy-page, :has(.landing-page--deck)) .detail-content-area,
html:is(.lab-xy-page, :has(.landing-page--deck)) .detail-content-area > .container,
html:is(.lab-xy-page, :has(.landing-page--deck)) .detail-content-area > .container > .aup-view {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}

html:is(.lab-xy-page, :has(.landing-page--deck)) .detail-content-toc {
  display: none;
}

html:is(.lab-xy-page, :has(.landing-page--deck)) .aup-deck-player,
html:is(.lab-xy-page, :has(.landing-page--deck)) .aup-deck-card,
html:is(.lab-xy-page, :has(.landing-page--deck)) .aup-deck-commentary,
html:is(.lab-xy-page, :has(.landing-page--deck)) .aup-deck-jump {
  display: none !important;
}

html:is(.lab-xy-page, :has(.landing-page--deck)) :is(.aup-deck--cards, :where(.landing-page--deck) .aup-deck) {
  width: 100%;
  margin: 0;
}

html:is(.lab-xy-page, :has(.landing-page--deck)) :is(.aup-deck--cards, :where(.landing-page--deck) .aup-deck) .aup-deck-segment {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100svh;
  padding: 0;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  box-sizing: border-box;
}

html:is(.lab-xy-page, :has(.landing-page--deck)) .beat-strip-beat {
  justify-content: stretch;
}

html:is(.lab-xy-page, :has(.landing-page--deck)) :is(.aup-deck--cards, :where(.landing-page--deck) .aup-deck) .aup-deck-segment:not(.aup-deck-segment--divider):not(.beat-strip-beat) > .aup-deck-slide {
  position: static !important;
  width: auto !important;
  height: auto !important;
  overflow: visible !important;
  clip: auto !important;
  clip-path: none !important;
  white-space: normal !important;
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1 1 auto;
  min-height: 0;
  max-width: var(--page-max, 1120px);
  margin: 0 auto;
  padding: 2.5rem var(--page-gutter, 24px) 4.5rem;
  box-sizing: border-box;
}

html:is(.lab-xy-page, :has(.landing-page--deck)) .site-footer {
  scroll-snap-align: end;
  scroll-snap-stop: always;
}

html:is(.lab-xy-page, :has(.landing-page--deck)) .aup-deck-slide :is(h1, h2) {
  margin: 0 0 1rem;
  font-family: var(--font-display, Sora, system-ui, sans-serif);
  font-size: clamp(2.1rem, 5.4vw, 4.4rem);
  font-weight: 560;
  line-height: 1.08;
  letter-spacing: -0.04em;
  text-wrap: balance;
}

html:is(.lab-xy-page, :has(.landing-page--deck)) .aup-deck-slide p,
html:is(.lab-xy-page, :has(.landing-page--deck)) .aup-deck-slide li {
  color: var(--color-dim);
  font-family: var(--font-body, Inter, system-ui, sans-serif);
  font-size: clamp(1.05rem, 1.6vw, 1.28rem);
  line-height: 1.55;
}

html:is(.lab-xy-page, :has(.landing-page--deck)) .aup-deck-slide a {
  color: var(--color-accent);
}

html:is(.lab-xy-page, :has(.landing-page--deck))[lang^="zh"] .aup-deck-slide :is(h1, h2),
html:is(.lab-xy-page, :has(.landing-page--deck))[lang^="ja"] .aup-deck-slide :is(h1, h2) {
  letter-spacing: 0;
  line-height: 1.18;
}

.lab-xy-rail {
  position: fixed;
  top: 50%;
  right: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 8.5rem;
  padding: 0.35rem 0;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-50%) translateX(0.7rem);
  transition:
    opacity 0.48s ease,
    transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

.lab-xy-rail.is-on {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(-50%);
}

.lab-xy-rail a {
  position: relative;
  display: block;
  width: 100%;
  min-height: 2rem;
  background: none;
}

.lab-xy-rail a::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 1.25rem;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--color-accent) 22%, transparent);
  transform: translateY(-50%);
  transition: background 0.2s, transform 0.2s;
}

.lab-xy-rail a::after {
  content: attr(data-label);
  position: absolute;
  top: 50%;
  right: 2.35rem;
  transform: translateY(-50%);
  color: var(--color-dim);
  font-family: var(--font-utility, ui-monospace, monospace);
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s, color 0.2s;
}

.lab-xy-rail:hover a::after,
.lab-xy-rail:focus-within a::after {
  opacity: 0.55;
}

.lab-xy-rail:hover a.is-active::after,
.lab-xy-rail:focus-within a.is-active::after,
.lab-xy-rail a:hover::after,
.lab-xy-rail a:focus-visible::after {
  opacity: 1;
  color: var(--color-text);
}

.lab-xy-rail a.is-active::before {
  background: var(--color-accent);
  transform: translateY(-50%) scale(1.35);
}

.lab-xy-rail a.is-active::after {
  font-weight: 600;
}

.lab-xy-rail a.lab-xy-rail-chrome::before {
  width: 8px;
  height: 8px;
  border-radius: 2px;
}

.lab-xy-rail a.lab-xy-rail-chrome::after {
  content: none;
}

@media (max-width: 900px) {
  html:is(.lab-xy-page, :has(.landing-page--deck)) {
    scroll-snap-type: none;
  }
  html:is(.lab-xy-page, :has(.landing-page--deck)) :is(.aup-deck--cards, :where(.landing-page--deck) .aup-deck) .aup-deck-segment {
    scroll-snap-align: none;
    scroll-snap-stop: normal;
  }
  .lab-xy-rail {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  html:is(.lab-xy-page, :has(.landing-page--deck)) {
    scroll-snap-type: none;
  }
  .lab-xy-rail {
    transition: none;
  }
}

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

/* Display mode: a # section's slides page sideways. Same slides, other axis. */

.landing-page #after-content:has(.beat-strip-boot) {
  display: none;
}

html.beat-strip-page {
  scroll-snap-type: y proximity;
  overflow-anchor: none;
}

html.beat-strip-page .aup-deck-player,
html.beat-strip-page .aup-deck-card,
html.beat-strip-page .aup-deck-commentary,
html.beat-strip-page .aup-deck-jump {
  display: none !important;
}

html.beat-strip-page .landing-page #content,
html.beat-strip-page .landing-page #content .detail-content-layout,
html:is(.lab-xy-page, :has(.landing-page--deck)) .landing-page #content .detail-content-layout,
html.beat-strip-page .detail-content-area,
html:is(.lab-xy-page, :has(.landing-page--deck)) .detail-content-area,
html.beat-strip-page .detail-content-area > .container,
html:is(.lab-xy-page, :has(.landing-page--deck)) .detail-content-area > .container,
html.beat-strip-page .detail-content-area > .container > .aup-view,
html:is(.lab-xy-page, :has(.landing-page--deck)) .detail-content-area > .container > .aup-view,
html.beat-strip-page .aup-deck--cards,
html:is(.lab-xy-page, :has(.landing-page--deck)) .aup-deck--strip {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding-inline: 0 !important;
}

html.beat-strip-page .detail-content-toc,
html:is(.lab-xy-page, :has(.landing-page--deck)) .detail-content-toc {
  display: none !important;
}

html.beat-strip-page .aup-deck--cards {
  width: 100%;
  margin: 0;
  touch-action: none;
}

html.beat-strip-page .aup-deck--cards > .aup-deck-segment {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100svh;
  padding: 0;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  box-sizing: border-box;
}

html.beat-strip-page .aup-deck--cards > .aup-deck-segment:not(.beat-strip-beat) > .aup-deck-slide,
html.beat-strip-page .beat-strip > .aup-deck-segment > .aup-deck-slide,
html:is(.lab-xy-page, :has(.landing-page--deck)) .beat-strip > .aup-deck-segment > .aup-deck-slide {
  position: static !important;
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1 1 auto;
  width: auto !important;
  height: auto !important;
  max-width: var(--page-max, 1120px);
  min-height: 0;
  margin: 0 auto;
  padding: 2.5rem var(--page-gutter, 24px) 4.5rem;
  overflow: visible !important;
  clip: auto !important;
  clip-path: none !important;
  box-sizing: border-box;
  white-space: normal !important;
}

html.beat-strip-page .aup-deck-slide :is(h1, h2) {
  margin: 0 0 1rem;
  font-family: var(--font-display, Sora, system-ui, sans-serif);
  font-size: clamp(2.1rem, 5.4vw, 4.4rem);
  font-weight: 560;
  letter-spacing: -0.04em;
  line-height: 1.08;
  text-wrap: balance;
}

html.beat-strip-page .aup-deck-slide p,
html.beat-strip-page .aup-deck-slide li {
  max-width: 34rem;
  color: var(--color-dim);
  font-family: var(--font-body, Inter, system-ui, sans-serif);
  font-size: clamp(1.05rem, 1.6vw, 1.28rem);
  line-height: 1.55;
}

html[lang^="zh"].beat-strip-page .aup-deck-slide :is(h1, h2),
html[lang^="ja"].beat-strip-page .aup-deck-slide :is(h1, h2) {
  letter-spacing: 0;
  line-height: 1.18;
}

.beat-strip-beat {
  position: relative;
  justify-content: stretch !important;
  min-height: 100svh;
  padding: 0;
  overflow: hidden;
}

.beat-strip {
  display: flex;
  align-items: stretch;
  width: 100%;
  height: 100svh;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  touch-action: pan-x;
}

.beat-strip::-webkit-scrollbar {
  display: none;
}

.beat-strip > .aup-deck-segment {
  flex: 0 0 100%;
  width: 100%;
  min-width: 100%;
  max-width: 100%;
  min-height: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  box-sizing: border-box;
}

html:is(.lab-xy-page, :has(.landing-page--deck)) .beat-strip > .aup-deck-segment {
  scroll-snap-align: start;
}

.beat-strip .aup-deck-section-title :is(h1, h2)::before {
  content: none !important;
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
}

.lab-xy-xrail {
  position: fixed;
  left: 0;
  right: 7.2rem;
  bottom: 0;
  z-index: 20;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  height: 6.4rem;
  padding: 0 1rem 1.4rem;
  overflow: visible;
  box-sizing: border-box;
  opacity: 0;
  pointer-events: none;
  transform: translateY(0.55rem);
  transition:
    opacity 0.48s ease,
    transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

.lab-xy-xrail.is-on {
  opacity: 1;
  pointer-events: auto;
  transform: none;
}

.lab-xy-xrail a {
  position: relative;
  display: block;
  width: 2.1rem;
  height: 100%;
  background: none;
}

.lab-xy-xrail a::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--color-accent) 22%, transparent);
  transform: translateX(-50%);
  transition: background 0.2s, transform 0.2s;
}

.lab-xy-xrail a::after {
  content: attr(data-label);
  position: absolute;
  left: 50%;
  bottom: 0.2rem;
  color: var(--color-dim);
  font-family: var(--font-utility, ui-monospace, monospace);
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transform: translate(0.72rem, -0.15rem) rotate(-45deg);
  transform-origin: 0 100%;
  transition: opacity 0.2s, color 0.2s;
}

.lab-xy-xrail:hover a::after,
.lab-xy-xrail:focus-within a::after {
  opacity: 0.55;
}

.lab-xy-xrail:hover a.is-active::after,
.lab-xy-xrail:focus-within a.is-active::after,
.lab-xy-xrail a:hover::after,
.lab-xy-xrail a:focus-visible::after {
  opacity: 1;
  color: var(--color-text);
}

.lab-xy-xrail a.is-active::before {
  background: var(--color-accent);
  transform: translateX(-50%) scale(1.35);
}

.lab-xy-xrail a.is-active::after {
  font-weight: 600;
}

@media (max-width: 700px) {
  .lab-xy-xrail {
    right: 5.6rem;
    padding-bottom: 0.9rem;
    height: 5.4rem;
  }

  .lab-xy-xrail a {
    width: 1.7rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .beat-strip {
    scroll-snap-type: x proximity;
  }

  .lab-xy-xrail {
    transition: none;
  }
}

/* ArcBlock landing pages: scoped so articles and docs keep their own reading surface. */
.landing-page {
  --landing-display: var(--font-display, "Sora", system-ui, sans-serif);
  --landing-body: var(--font-body, "Inter", system-ui, sans-serif);
  --landing-utility: var(--font-utility, "JetBrains Mono", ui-monospace, monospace);
  --landing-trace: var(--color-accent, #008f7a);
  --landing-trace-soft: color-mix(in srgb, var(--landing-trace) 14%, transparent);
  --landing-rule: color-mix(in srgb, var(--color-border) 68%, transparent);
}

.landing-page-section {
  position: relative;
}

/* key-pad mounts on document.body; hide the landing slot that only holds its boot marker.
   Theme package deliberately does not target this site's #xy-keys slot (arc#5414). */
.landing-page #after-content:has(.key-pad-boot):not(:has(.beat-strip-boot)),
#xy-keys {
  display: none !important;
}

/* Keyboard glyphs are a desktop hint. Touch uses swipe. */
@media (max-width: 900px), (hover: none) and (pointer: coarse) {
  .key-pad {
    display: none !important;
  }
}

.landing-page-section:nth-child(even) {
  background: color-mix(in srgb, var(--color-surface) 70%, transparent);
}

/* Page containers use the runtime's own box: max-width --page-max with
   --page-gutter of padding inside it (see .container in the runtime CSS, which
   the site header and footer both use). Hand-rolling `min(--container-max,
   100% - 48px)` made these bands 24px wider per side than the header and the
   footer, and gave phones a gutter that did not track --page-gutter. */
.landing-page .content-cards-wrap {
  width: 100%;
  max-width: var(--page-max, 1120px);
  margin: 0 auto;
  padding: clamp(3rem, 6vw, 5.5rem) var(--page-gutter, 24px);
}

.landing-page .content-cards-header {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(15rem, 0.58fr);
  gap: clamp(1.25rem, 3vw, 3rem);
  align-items: end;
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--landing-rule);
}

.landing-page .content-cards-title {
  margin: 0;
  color: var(--color-text);
  font-family: var(--landing-display);
  font-size: clamp(1.55rem, 2.65vw, 2.7rem);
  font-weight: 560;
  line-height: 1.08;
  letter-spacing: -0.025em;
}

.landing-page .content-cards-description {
  max-width: 34rem;
  margin: 0;
  color: var(--color-dim);
  font-family: var(--landing-body);
  font-size: clamp(0.96rem, 1vw, 1.05rem);
  line-height: 1.78;
}

.landing-page .content-cards-eyebrow,
.landing-page .card-meta,
.landing-page .card-kicker {
  font-family: var(--landing-utility);
  font-size: 0.67rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.landing-page .content-cards-eyebrow {
  color: var(--landing-trace);
}

.landing-page .content-cards-eyebrow::before {
  width: 1.1rem;
  background: currentColor;
}

/* Mechanism and task sections are quiet explanatory blocks, not a card wall. */
.landing-page .content-cards-wrap:not(.content-cards-wrap--fleet) .content-cards {
  gap: 0;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  border-top: 1px solid var(--landing-rule);
}

.landing-page .content-cards-wrap:not(.content-cards-wrap--fleet) .content-card {
  min-height: 0;
  border: 0;
  border-radius: 0;
  border-right: 1px solid var(--landing-rule);
  border-bottom: 1px solid var(--landing-rule);
  background: transparent;
  box-shadow: none;
  transition: background-color 160ms ease;
}

.landing-page .content-cards-wrap:not(.content-cards-wrap--fleet) .content-card:first-child {
  border-left: 1px solid var(--landing-rule);
}

.landing-page .content-cards-wrap:not(.content-cards-wrap--fleet) .content-card:hover {
  transform: none;
  border-color: var(--landing-rule);
  background: color-mix(in srgb, var(--landing-trace) 4%, transparent);
  box-shadow: none;
}

.landing-page .content-cards-wrap:not(.content-cards-wrap--fleet) .card-body {
  min-height: 12.5rem;
  padding: clamp(1.25rem, 2.4vw, 2rem);
}

.landing-page .content-cards-wrap:not(.content-cards-wrap--fleet) .card-title {
  margin: 0 0 0.62rem;
  color: var(--color-text);
  font-family: var(--landing-display);
  font-size: clamp(1.06rem, 1.28vw, 1.25rem);
  font-weight: 560;
  line-height: 1.25;
  letter-spacing: -0.012em;
}

.landing-page .content-cards-wrap:not(.content-cards-wrap--fleet) .card-excerpt {
  margin: 0;
  color: var(--color-dim);
  font-family: var(--landing-body);
  font-size: 0.91rem;
  line-height: 1.72;
}

.landing-page .content-cards-wrap:not(.content-cards-wrap--fleet) .card-kicker {
  margin-bottom: 0.85rem;
  color: var(--landing-trace);
}

.landing-page .content-cards-wrap:not(.content-cards-wrap--fleet) .card-link:hover .card-title,
.landing-page .content-cards-wrap--fleet .card-link:hover .card-title {
  color: var(--landing-trace);
}

/* Evidence and reading links become a deliberately quiet editorial list. */
.landing-page .content-cards-wrap--fleet {
  width: min(760px, calc(100% - 48px));
  padding: clamp(3rem, 6vw, 5rem) 0;
}

.landing-page .content-cards-wrap--fleet .content-cards-header {
  grid-template-columns: 1fr;
  gap: 0.8rem;
  margin-bottom: 1.4rem;
  padding-bottom: 0;
  border-bottom: 0;
}

.landing-page .content-cards-wrap--fleet .content-cards-title {
  font-size: clamp(1.35rem, 2.1vw, 1.95rem);
  max-width: 20ch;
}

.landing-page .content-cards-wrap--fleet .content-card {
  gap: 1.25rem;
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--landing-rule);
}

.landing-page .content-cards-wrap--fleet .card-body {
  gap: 0.38rem;
}

.landing-page .content-cards-wrap--fleet .card-title {
  margin: 0;
  color: var(--color-text);
  font-family: var(--landing-display);
  font-size: clamp(1rem, 1.2vw, 1.16rem);
  font-weight: 560;
  line-height: 1.32;
  letter-spacing: -0.008em;
}

.landing-page .content-cards-wrap--fleet .card-excerpt {
  margin: 0;
  color: var(--color-dim);
  font-family: var(--landing-body);
  font-size: 0.9rem;
  line-height: 1.65;
}

.landing-page .content-cards-wrap--fleet .card-meta {
  gap: 0.4rem;
  font-size: 0.62rem;
  letter-spacing: 0.06em;
}

/* The dynamic related band is wide enough to read, yet quieter than the page's
   main argument. The label and the chronological list deliberately have
   different jobs; the source/filter remains defined in the page source. */
.landing-page #related-articles {
  border-top: 1px solid var(--landing-rule);
  background: transparent;
}

.landing-page #related-articles .content-cards-wrap--fleet {
  width: 100%;
  max-width: var(--page-max, 1120px);
  padding-left: var(--page-gutter, 24px);
  padding-right: var(--page-gutter, 24px);
  display: grid;
  grid-template-columns: minmax(10rem, 0.42fr) minmax(0, 1fr);
  column-gap: clamp(2rem, 6vw, 7rem);
  align-items: start;
  padding-top: clamp(2.5rem, 5vw, 4rem);
  padding-bottom: clamp(3rem, 6vw, 5rem);
}

.landing-page #related-articles .content-cards-header {
  grid-column: 1;
  margin: 0;
}

.landing-page #related-articles .content-cards {
  grid-column: 2;
  min-width: 0;
  border-top: 1px solid var(--landing-rule);
}

.landing-page #related-articles .content-card {
  padding: clamp(1.2rem, 2vw, 1.65rem) 0;
}

.landing-page #related-articles .card-title {
  font-size: clamp(1.08rem, 1.34vw, 1.28rem);
  line-height: 1.36;
}

.landing-page #related-articles .card-excerpt {
  max-width: 52rem;
  font-size: 0.95rem;
  line-height: 1.72;
}

.landing-page #related-articles .card-meta {
  font-size: 0.64rem;
}

.landing-page #related-articles .content-cards-wrap--fleet .content-cards-title {
  font-size: clamp(1.25rem, 1.8vw, 1.55rem);
}

/* A related band is an archive anchor, not empty framing around a narrow list.
   Its localized rail states why the list exists and keeps the all-articles
   action near the reader's choice; the dynamically supplied rows stay primary. */
.landing-page .editorial-feed {
  align-items: start;
  display: grid;
  gap: clamp(2rem, 6vw, 7rem);
  grid-template-columns: minmax(11rem, 0.42fr) minmax(0, 1fr);
  margin: 0 auto;
  padding: clamp(2.7rem, 5vw, 4.2rem) var(--page-gutter, 24px) clamp(3.25rem, 6vw, 5.25rem);
  width: 100%;
  max-width: var(--page-max, 1120px);
}

.landing-page .editorial-feed-rail {
  align-self: start;
  display: grid;
  gap: 0.85rem;
  max-width: 16rem;
  position: sticky;
  top: 6.75rem;
}

.landing-page .editorial-feed-eyebrow {
  color: var(--color-accent);
  font-family: var(--font-utility, "JetBrains Mono", ui-monospace, monospace);
  font-size: 0.67rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  margin: 0;
  text-transform: uppercase;
}

.landing-page .editorial-feed-rail h2 {
  color: var(--color-hero-ink, var(--color-text));
  font-family: var(--font-display, "Sora", sans-serif);
  font-size: clamp(1.22rem, 1.7vw, 1.5rem);
  font-weight: 620;
  letter-spacing: -0.035em;
  line-height: 1.12;
  margin: 0;
}

.landing-page .editorial-feed-rail p {
  color: var(--color-dim);
  font-family: var(--font-body, "Inter", sans-serif);
  font-size: 0.9rem;
  line-height: 1.65;
  margin: 0;
}

.landing-page .editorial-feed-all {
  color: var(--color-accent);
  font-family: var(--font-utility, "JetBrains Mono", ui-monospace, monospace);
  font-size: 0.68rem;
  font-weight: 650;
  letter-spacing: 0.08em;
  margin-top: 0.4rem;
  text-decoration: none;
  text-underline-offset: 0.24em;
  width: fit-content;
}

.landing-page .editorial-feed-all:hover {
  text-decoration: underline;
}

.landing-page .editorial-feed-list {
  border-top: 1px solid var(--landing-rule);
  min-width: 0;
}

.landing-page .editorial-feed-row {
  border-bottom: 1px solid var(--landing-rule);
  padding: clamp(1.2rem, 2vw, 1.65rem) 0;
}

.landing-page .editorial-feed-row a {
  color: inherit;
  display: block;
  text-decoration: none;
}

.landing-page .editorial-feed-row h3 {
  color: var(--color-hero-ink, var(--color-text));
  font-family: var(--font-body, "Inter", sans-serif);
  font-size: clamp(1.08rem, 1.34vw, 1.28rem);
  font-weight: 650;
  line-height: 1.36;
  margin: 0;
}

.landing-page .editorial-feed-row a:hover h3 {
  color: var(--color-accent);
}

.landing-page .editorial-feed-row p {
  color: var(--color-dim);
  font-family: var(--font-body, "Inter", sans-serif);
  font-size: 0.95rem;
  line-height: 1.72;
  margin: 0.5rem 0 0;
  max-width: 52rem;
}

.landing-page .editorial-feed-meta {
  align-items: center;
  color: var(--color-dim);
  display: flex;
  flex-wrap: wrap;
  font-family: var(--font-utility, "JetBrains Mono", ui-monospace, monospace);
  font-size: 0.64rem;
  gap: 0.4rem;
  letter-spacing: 0.06em;
  margin-bottom: 0.5rem;
}

.landing-page .editorial-feed-dot {
  opacity: 0.6;
}

/* Homepage: a selected editorial lead, compact product paths, then an index-like stream. */
.landing-page:has(.landing-hero--home) #featured-reading .content-cards-wrap--fleet {
  width: 100%;
  max-width: var(--page-max, 1120px);
  padding-left: var(--page-gutter, 24px);
  padding-right: var(--page-gutter, 24px);
}

.landing-page:has(.landing-hero--home) #featured-reading .content-cards {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  column-gap: clamp(1.75rem, 4.5vw, 5rem);
  grid-auto-rows: min-content;
  border-top: 1px solid var(--landing-trace);
}

.landing-page:has(.landing-hero--home) #featured-reading .content-card:first-child {
  grid-column: 1;
  grid-row: span 2;
  padding: clamp(1.35rem, 2.7vw, 2.2rem) clamp(1.75rem, 4vw, 4rem) clamp(1.5rem, 3vw, 2.6rem) 0;
  margin: 0;
  border-bottom: 1px solid var(--landing-rule);
  border-right: 1px solid var(--landing-rule);
}

.landing-page:has(.landing-hero--home) #featured-reading .content-card:first-child .card-body {
  max-width: 39rem;
  gap: 0.55rem;
}

.landing-page:has(.landing-hero--home) #featured-reading .content-card:first-child .card-title {
  font-size: clamp(1.45rem, 2.15vw, 2.15rem);
  line-height: 1.14;
  max-width: 21ch;
}

.landing-page:has(.landing-hero--home) #featured-reading .content-card:first-child .card-excerpt {
  max-width: 34rem;
  font-size: 0.97rem;
}

.landing-page:has(.landing-hero--home) #featured-reading .content-card:not(:first-child) {
  padding: clamp(1.2rem, 2vw, 1.7rem) 0 clamp(1.2rem, 2vw, 1.7rem) clamp(1.5rem, 3vw, 2.7rem);
  margin: 0;
  border-bottom: 1px solid var(--landing-rule);
}

.landing-page:has(.landing-hero--home) #featured-reading .content-card:not(:first-child) .card-title {
  font-size: clamp(1.1rem, 1.35vw, 1.32rem);
  line-height: 1.3;
}

.landing-page:has(.landing-hero--home) #featured-reading .content-card:not(:first-child) .card-excerpt {
  font-size: 0.92rem;
}

.landing-page:has(.landing-hero--home) #product-collection .content-cards {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.landing-page:has(.landing-hero--home) #product-collection .content-cards-header {
  grid-template-columns: 1fr;
  gap: 0.55rem;
  max-width: 43rem;
  margin-bottom: 1.35rem;
  padding-bottom: 0;
  border-bottom: 0;
}

.landing-page:has(.landing-hero--home) #product-collection .content-cards-title {
  font-size: clamp(1.5rem, 2.2vw, 2rem);
}

.landing-page:has(.landing-hero--home) #product-collection .content-card {
  min-height: 0;
}

.landing-page:has(.landing-hero--home) #product-collection .card-body {
  min-height: 11rem;
}

.landing-page:has(.landing-hero--home) #latest-updates {
  background: color-mix(in srgb, var(--color-surface) 48%, transparent);
}

.landing-page:has(.landing-hero--home) #latest-updates .content-cards-wrap--fleet {
  width: 100%;
  max-width: var(--page-max, 1120px);
  padding-left: var(--page-gutter, 24px);
  padding-right: var(--page-gutter, 24px);
  display: grid;
  grid-template-columns: minmax(10rem, 0.42fr) minmax(0, 1fr);
  column-gap: clamp(2rem, 6vw, 7rem);
  align-items: start;
  padding-top: clamp(3rem, 6vw, 5rem);
}

.landing-page:has(.landing-hero--home) #latest-updates .content-cards-header {
  grid-column: 1;
  margin: 0;
}

.landing-page:has(.landing-hero--home) #latest-updates .content-cards {
  grid-column: 2;
  min-width: 0;
  border-top: 1px solid var(--landing-rule);
}

.landing-page:has(.landing-hero--home) #latest-updates .content-card {
  padding: clamp(1.2rem, 2vw, 1.65rem) 0;
}

.landing-page:has(.landing-hero--home) #latest-updates .card-title {
  font-size: clamp(1.08rem, 1.34vw, 1.28rem);
  line-height: 1.36;
}

.landing-page:has(.landing-hero--home) #latest-updates .card-excerpt {
  max-width: 52rem;
  font-size: 0.95rem;
  line-height: 1.72;
}

.landing-page:has(.landing-hero--home) #latest-updates .content-cards-wrap--fleet .content-cards-title {
  font-size: clamp(1.35rem, 2.2vw, 1.9rem);
}

.landing-page:has(.landing-hero--home) #latest-updates {
  background: color-mix(in srgb, var(--color-surface) 48%, transparent);
}

.landing-page:has(.landing-hero--home) #latest-updates .editorial-feed {
  padding-top: clamp(3rem, 6vw, 5rem);
}

/* AFS is the technical sample: a compact mechanism strip, then one concrete work surface. */
.landing-page:has(.landing-hero--technical) #working-view .content-cards {
  grid-template-columns: 0.78fr 1.22fr;
}

.landing-page:has(.landing-hero--technical) #local-example .content-cards {
  grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
}

.landing-page:has(.landing-hero--technical) #local-example .content-card:last-child {
  background: color-mix(in srgb, var(--landing-trace) 5%, transparent);
}

/* Research pages retain a reading cadence: citation, principles, material, discussion. */
.landing-page:has(.landing-hero--research) #paper-proposal .content-cards-wrap--fleet {
  width: min(900px, calc(100% - 48px));
}

.landing-page:has(.landing-hero--research) #paper-proposal .content-card {
  padding: 1.5rem 0 2rem;
  border-top: 1px solid var(--landing-trace);
}

.landing-page:has(.landing-hero--research) #key-ideas .content-cards {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.landing-page:has(.landing-hero--research) #ongoing-discussion .content-cards {
  grid-template-columns: 1.05fr 0.95fr 1fr;
}

.landing-page:has(.landing-hero--research) #formal-response {
  background: color-mix(in srgb, var(--landing-trace) 4%, transparent);
}

html[lang^="zh"] .landing-page .content-cards-title,
html[lang^="ja"] .landing-page .content-cards-title,
html[lang^="zh"] .landing-page .card-title,
html[lang^="ja"] .landing-page .card-title {
  letter-spacing: 0;
}

html[lang^="zh"] .landing-page .content-cards-eyebrow,
html[lang^="ja"] .landing-page .content-cards-eyebrow,
html[lang^="zh"] .landing-page .card-meta,
html[lang^="ja"] .landing-page .card-meta,
html[lang^="zh"] .landing-page .card-kicker,
html[lang^="ja"] .landing-page .card-kicker {
  letter-spacing: 0.03em;
  text-transform: none;
}

@media (max-width: 760px) {
  .landing-page .content-cards-wrap,
  .landing-page .content-cards-wrap--fleet {
    padding: 3rem var(--page-gutter, 24px);
  }

  .landing-page #related-articles .content-cards-wrap--fleet,
  .landing-page:has(.landing-hero--home) #latest-updates .content-cards-wrap--fleet {
    display: block;
  }

  .landing-page .editorial-feed {
    display: block;
    padding: 3rem var(--page-gutter, 24px);
  }

  .landing-page .editorial-feed-rail {
    max-width: none;
    position: static;
  }

  .landing-page .editorial-feed-list {
    margin-top: 1.25rem;
  }

  .landing-page #related-articles .content-cards-header,
  .landing-page:has(.landing-hero--home) #latest-updates .content-cards-header {
    margin-bottom: 1.1rem;
  }

  .landing-page #related-articles .content-card,
  .landing-page:has(.landing-hero--home) #latest-updates .content-card {
    padding: 1.2rem 0;
  }

  .landing-page .content-cards-header {
    grid-template-columns: 1fr;
    gap: 0.8rem;
  }

  .landing-page .content-cards-title {
    font-size: clamp(1.75rem, 8vw, 2.45rem);
  }

  .landing-page .content-cards-wrap:not(.content-cards-wrap--fleet) .content-cards,
  .landing-page:has(.landing-hero--home) #featured-reading .content-cards,
  .landing-page:has(.landing-hero--home) #product-collection .content-cards,
  .landing-page:has(.landing-hero--technical) #working-view .content-cards,
  .landing-page:has(.landing-hero--technical) #local-example .content-cards,
  .landing-page:has(.landing-hero--research) #key-ideas .content-cards,
  .landing-page:has(.landing-hero--research) #ongoing-discussion .content-cards {
    grid-template-columns: 1fr;
  }

  .landing-page .content-cards-wrap:not(.content-cards-wrap--fleet) .content-card,
  .landing-page .content-cards-wrap:not(.content-cards-wrap--fleet) .content-card:first-child {
    border-left: 1px solid var(--landing-rule);
  }

  .landing-page .content-cards-wrap:not(.content-cards-wrap--fleet) .card-body {
    min-height: 0;
  }

  .landing-page:has(.landing-hero--home) #featured-reading .content-card:first-child {
    grid-column: auto;
    grid-row: auto;
    padding: 1.35rem 0 1.65rem;
    border-right: 0;
  }

  .landing-page:has(.landing-hero--home) #featured-reading .content-card:first-child .card-title {
    font-size: clamp(1.45rem, 7.5vw, 2rem);
  }

  .landing-page:has(.landing-hero--home) #featured-reading .content-card:not(:first-child) {
    padding: 1.25rem 0;
  }
}