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

/* Web Device composition, scoped to the two representative pages. */
.realm-page{color:var(--color-text);font-family:var(--font-body);overflow:clip}.realm-page *{box-sizing:border-box}.realm-slot{scroll-margin-top:90px}.realm-page h1,.realm-page h2,.realm-page h3,.realm-page p,.realm-page figure{margin:0}.realm-page a{color:inherit;text-decoration:none}.realm-page button{font:inherit}.realm-page a:focus-visible,.realm-page button:focus-visible{outline:3px solid var(--color-accent);outline-offset:6px}.realm-page h1,.realm-page h2{font-family:var(--font-display);font-weight:600;letter-spacing:-.055em;line-height:1.06}.realm-page h1 span,.realm-page h2 span{display:block}.realm-page:lang(zh) h1,.realm-page:lang(zh-TW) h1,.realm-page:lang(ja) h1,.realm-page:lang(zh) h2,.realm-page:lang(zh-TW) h2,.realm-page:lang(ja) h2{letter-spacing:0;line-height:1.16;word-break:keep-all;overflow-wrap:anywhere}.realm-eyebrow{font:11px/1.5 var(--font-utility);letter-spacing:.15em;text-transform:uppercase}.realm-hero{position:relative;background:#061b19;color:#effff8;isolation:isolate;min-height:750px;overflow:hidden;border-radius:0 0 32px 32px}.realm-hero-grid{max-width:1440px;margin:auto;min-height:670px;padding:95px 64px 70px;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:24px}.realm-hero-copy{position:relative;z-index:3}.realm-hero h1{font-size:clamp(52px,6.5vw,96px);margin:30px 0 27px}.realm-hero h1 span:last-child{color:#84e6c8}.realm-lede{max-width:470px;color:#c3d9d1;font-size:17px;line-height:1.85}.realm-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:32px}.realm-action{display:inline-flex;align-items:center;justify-content:center;gap:26px;padding:16px 23px;background:#86e9c9;color:#08271f;border:1px solid transparent;border-radius:7px;font-size:14px;font-weight:600;min-height:50px;transition:transform .2s,background .2s}.realm-page a.realm-action{color:#08271f}.realm-action:hover{background:#a9f6dc;transform:translateY(-3px)}.realm-page a.realm-action--secondary{background:transparent;color:inherit;border-color:currentColor}.realm-action--secondary:hover{background:#8de9cf18}.realm-action span{font-size:20px;font-weight:400}.realm-stage{position:relative;height:475px;perspective:1300px;isolation:isolate}.realm-window{position:absolute;width:89%;border-radius:9px;overflow:hidden;box-shadow:0 28px 70px #0007;border:1px solid #d8fff936;transform:rotateY(-13deg) rotateX(7deg) rotateZ(-5deg);transition:transform .65s cubic-bezier(.2,.8,.2,1)}.realm-window img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}.realm-window figcaption{background:#09231eef;padding:10px 15px;display:flex;justify-content:space-between;font:11px var(--font-utility);color:#b3d8cc}.realm-window figcaption span{font-size:9px;letter-spacing:.18em}.realm-window--0{left:3%;top:22%;z-index:3}.realm-window--1{width:72%;left:22%;top:0;z-index:2;transform:rotateY(-13deg) rotateX(7deg) rotateZ(7deg)}.realm-window--2{width:77%;left:27%;top:55%;z-index:4;transform:rotateY(-13deg) rotateX(7deg) rotateZ(8deg)}.realm-stage:hover .realm-window--0{transform:translate(-15px,-5px) rotate(-7deg)}.realm-stage:hover .realm-window--1{transform:translateY(-18px) rotate(6deg)}.realm-stage:hover .realm-window--2{transform:translate(14px,12px) rotate(7deg)}.realm-stage-caption{position:absolute;bottom:-33px;left:15%;color:#b1cabf;font:10px/1.6 var(--font-utility);letter-spacing:.06em}.realm-hero-foot{position:relative;z-index:5;max-width:1312px;margin:0 auto;padding:25px 0;display:flex;justify-content:space-between;align-items:center;border-top:1px solid #91b4a82e;font:10px/1.6 var(--font-utility);letter-spacing:.12em;color:#bdd1c9}.realm-hero-foot>a{display:flex;gap:28px}.realm-motion{background:transparent;border:1px solid #b4d7c842;border-radius:30px;color:inherit;padding:8px 14px;cursor:pointer;min-height:36px}.realm-motion:hover{border-color:#a0dcc7}.realm-section{max-width:1250px;margin:auto;padding:112px 48px}.realm-section-heading{display:grid;grid-template-columns:1fr 1fr;column-gap:70px;align-items:end;margin-bottom:44px}.realm-section-heading .realm-eyebrow{grid-column:1/-1;margin-bottom:20px;color:var(--color-accent)}.realm-section-heading h2,.realm-intro h2,.realm-tour h2{font-size:clamp(36px,4.2vw,62px)}.realm-section-heading>p:last-child,.realm-body{font-size:17px;line-height:1.85;color:var(--color-dim);max-width:510px}.realm-project-tabs{display:flex;gap:0;border-bottom:1px solid var(--color-border);margin-bottom:24px}.realm-project-tabs button{background:none;border:0;border-bottom:2px solid transparent;flex:1;padding:19px 0;cursor:pointer;color:var(--color-dim);display:flex;align-items:center;justify-content:flex-start;gap:12px;font-size:19px}.realm-project-tabs button>span:last-child{margin-left:auto;margin-right:25px}.realm-project-tabs button[aria-selected=true]{color:var(--color-text);border-bottom-color:var(--color-accent)}.realm-project-dot{width:9px;height:9px;border-radius:50%;background:#ed9857}.dot-aside{background:#96c8e9}.dot-pixotale{background:#a5a2ef}.realm-project-image{display:block;border:1px solid var(--color-border);border-radius:14px;overflow:hidden;background:var(--color-surface)}.realm-project-image img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;transition:transform .5s}.realm-project-image:hover img{transform:scale(1.015)}.realm-project-caption{display:flex;justify-content:space-between;gap:32px;align-items:center;padding:22px 0}.realm-project-caption p{font-size:17px}.realm-project-caption small{display:block;color:var(--color-dim);font-size:11px;margin-top:9px}.realm-project-caption>a{font-size:13px;white-space:nowrap;border-bottom:1px solid var(--color-accent);padding:8px 0}.realm-intro{border-top:1px solid var(--color-border);display:grid;grid-template-columns:1.1fr 1fr;gap:30px 70px}.realm-intro h2{margin:24px 0}.realm-intro .realm-action{margin-top:28px}.realm-word-object{aspect-ratio:1;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;isolation:isolate;border-radius:50%;background:radial-gradient(ellipse at 30% 25%,#a2f2d4,#d5f6e80a 60%)}.realm-word-object>span{font:600 clamp(100px,11vw,180px)/1 var(--font-display);letter-spacing:-.09em;color:var(--color-hero-ink)}.realm-word-object small{font:9px var(--font-utility);letter-spacing:.17em;margin-top:18px}.realm-word-object i{position:absolute;inset:12% -5%;border:1px solid var(--color-accent);border-radius:50%;transform:rotate(-30deg);z-index:-1;opacity:.5}.realm-foundations{grid-column:1/-1;display:flex;justify-content:space-between;margin-top:35px;padding-top:26px;border-top:1px solid var(--color-border)}.realm-foundations a{display:flex;gap:65px;font-size:14px}.realm-tour{margin:10px 32px 0;background:#0b2c25;color:#f2fff7;border-radius:24px;display:grid;grid-template-columns:1fr 1fr;position:relative;overflow:hidden;min-height:560px}.realm-tour-art{position:relative;display:flex;align-items:center;justify-content:center;isolation:isolate;background:radial-gradient(ellipse,#429d6c44,transparent 65%)}.realm-tour-art span{font:500 clamp(90px,11vw,165px) var(--font-display);letter-spacing:-.07em;color:#a1ebc5}.realm-tour-art i{position:absolute;inset:12% 15%;border:1px solid #a9ffd578;border-radius:50%;transform:rotate(-36deg) scaleY(.6);box-shadow:0 0 30px #a0eec115}.realm-tour-art i:nth-child(2){transform:rotate(36deg) scaleY(.6);inset:10% 10%}.realm-tour-art i:nth-child(3){transform:rotate(90deg) scaleY(.6)}.realm-tour-copy{padding:90px 60px 80px 0;align-self:center}.realm-tour h2{margin:24px 0}.realm-tour-copy>p:not(.realm-eyebrow){font-size:16px;line-height:1.85;color:#bed5cc;max-width:460px}.realm-tour .realm-action{margin-top:30px}.realm-tour small{display:block;margin-top:24px;font-size:11px;color:#a6bfb5}.realm-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:44px}.realm-steps article{border-top:1px solid var(--color-border);padding-top:24px}.realm-step-number{font:12px var(--font-utility);color:var(--color-accent)}.realm-steps h3{font-size:24px;margin:22px 0 16px}.realm-steps p{font-size:15px;line-height:1.85;color:var(--color-dim);min-height:85px}.realm-steps a{display:inline-block;font-size:13px;margin-top:25px;border-bottom:1px solid var(--color-accent);padding-bottom:7px}.realm-start{text-align:center;border-top:1px solid var(--color-border);padding-bottom:36px}.realm-start h2{font-size:clamp(30px,4vw,54px);margin:23px 0}.realm-start .realm-body{margin:auto}.realm-start .realm-actions{justify-content:center}.realm-slot#local-preview{max-width:900px;padding:0 48px 60px;margin:auto}.realm-slot#writing{max-width:1250px;margin:0 auto;padding:90px 48px}.realm-page .editorial-feed{max-width:none;padding:0}.realm-page .editorial-feed-title{font-size:38px}.realm-hero--arc .realm-window--0{top:6%;left:10%;width:92%;transform:rotateY(-10deg) rotateZ(-5deg)}.realm-hero--arc .realm-window--1{top:41%;left:0;width:75%;z-index:4;transform:rotateZ(4deg)}.realm-hero--arc .realm-window--2{top:65%;left:42%;width:58%;transform:rotateZ(-5deg)}
@media(min-width:1600px){.realm-hero{min-height:840px}.realm-hero-grid{min-height:760px}.realm-stage{height:520px}}
@media(max-width:1100px){.realm-hero-grid{padding:70px 40px;min-height:650px}.realm-hero-foot{margin:0 40px}.realm-hero h1{font-size:65px}.realm-stage{height:380px}.realm-stage-caption{bottom:-20px;font-size:9px}.realm-actions{gap:12px}.realm-action{padding:14px 17px;gap:15px}.realm-tour-copy{padding-right:36px}.realm-lede{font-size:16px}}
@media(max-width:760px){.realm-hero{min-height:0;border-radius:0 0 22px 22px}.realm-hero-grid{grid-template-columns:1fr;padding:50px 23px 25px;gap:38px;min-height:0}.realm-hero h1{font-size:clamp(42px,10.5vw,68px);margin:24px 0}.realm-lede{font-size:15px;max-width:520px}.realm-eyebrow{font-size:9px;letter-spacing:.1em}.realm-stage{height:340px;max-width:520px;width:100%;margin:auto}.realm-window--0{width:83%;top:21%;left:0}.realm-window--1{width:65%;left:27%;top:0}.realm-window--2{width:66%;left:30%;top:53%}.realm-window figcaption{padding:7px 10px;font-size:9px}.realm-stage-caption{left:0;bottom:-4px}.realm-hero-foot{margin:10px 23px 0;gap:10px;padding:20px 0;font-size:9px}.realm-hero-foot>span{display:none}.realm-motion{font-size:10px}.realm-actions{margin-top:25px;gap:10px}.realm-action{font-size:12px;min-height:46px;padding:12px 16px;gap:17px}.realm-section{padding:70px 23px}.realm-section-heading{grid-template-columns:1fr;gap:20px;margin-bottom:28px}.realm-section-heading .realm-eyebrow{margin:0}.realm-section-heading h2,.realm-intro h2,.realm-tour h2{font-size:36px}.realm-section-heading>p:last-child,.realm-body{font-size:15px;line-height:1.85}.realm-project-tabs button{font-size:13px;gap:7px;padding:16px 0}.realm-project-tabs button>span:last-child{display:none}.realm-project-dot{width:6px;height:6px}.realm-project-caption{gap:20px;align-items:start}.realm-project-caption p{font-size:13px;line-height:1.7}.realm-project-caption>a{font-size:11px}.realm-project-image{border-radius:8px}.realm-intro{grid-template-columns:1fr;gap:20px}.realm-word-object{max-width:320px;width:100%;margin:auto}.realm-word-object>span{font-size:120px}.realm-foundations{gap:13px;flex-wrap:wrap;margin-top:15px}.realm-foundations a{font-size:12px;gap:12px}.realm-tour{grid-template-columns:1fr;margin:0 12px;border-radius:16px}.realm-tour-art{height:290px}.realm-tour-art span{font-size:100px}.realm-tour-copy{padding:5px 25px 45px}.realm-tour-copy>p:not(.realm-eyebrow){font-size:14px}.realm-steps{grid-template-columns:1fr;gap:32px}.realm-steps article{display:grid;grid-template-columns:30px 1fr;column-gap:15px}.realm-steps h3{font-size:22px;margin:0 0 12px}.realm-steps p,.realm-steps a{grid-column:2}.realm-steps p{min-height:0;font-size:14px}.realm-steps a{justify-self:start;margin-top:15px}.realm-start h2{font-size:31px}.realm-slot#local-preview{padding:0 23px 40px}.realm-slot#writing{padding:60px 23px}.realm-hero--arc .realm-window--2{top:59%}}
@media(prefers-reduced-motion:reduce){.realm-page *,.realm-page *:before{animation:none!important;transition:none!important}}
/* Preserve the runtime header and its menus, with a continuous first-screen backdrop. */



.realm-hero-foot{margin-inline:64px}.realm-stage-caption{bottom:-50px;left:4%;z-index:6;background:#09231ee8;border-radius:4px;padding:5px 9px}
@media(max-width:760px){.realm-hero-foot{margin-inline:23px}.realm-stage-caption{bottom:-5px;left:0;font-size:9px}}

.realm-page .editorial-feed{display:grid;grid-template-columns:1fr 2fr;gap:70px}.realm-page .editorial-feed-rail h2{font-size:36px;margin-bottom:20px}.realm-page .editorial-feed-rail p{color:var(--color-dim);line-height:1.8;margin-bottom:24px}.realm-page .editorial-feed-all{display:inline-block;border-bottom:1px solid;padding-bottom:6px}.realm-page .editorial-feed-row{border-top:1px solid var(--color-border);padding:24px 0}.realm-page .editorial-feed-meta{display:flex;gap:10px;font-size:11px;color:var(--color-dim);margin-bottom:12px}.realm-page .editorial-feed-row h3{font-size:22px;font-weight:500;line-height:1.5;margin-bottom:10px}.realm-page .editorial-feed-row p{color:var(--color-dim);font-size:14px;line-height:1.85}.realm-page .editorial-feed-row a:hover h3{color:var(--color-accent)}@media(max-width:760px){.realm-page .editorial-feed{grid-template-columns:1fr;gap:30px}.realm-page .editorial-feed-rail h2{font-size:32px}.realm-page .editorial-feed-row h3{font-size:20px}}

/* Endless software wall. Two identical groups make each lane seamless at any height. */
.realm-hero-grid{grid-template-columns:minmax(0,.9fr) minmax(0,1.25fr);gap:30px;padding-block:35px 25px;min-height:690px}
.realm-hero-copy{padding-block:50px}.realm-hero h1{font-size:clamp(48px,5.8vw,84px)}
.realm-platforms{display:flex;gap:24px;margin-top:30px!important;color:#9cbdb1;font:10px/1.5 var(--font-utility);letter-spacing:.1em}.realm-platforms span:before{content:'·';color:#80e8c6;margin-right:10px}
.realm-wall-stage{min-width:0;position:relative;height:640px;margin-right:-80px}
.realm-wall{height:100%;overflow:hidden;mask-image:linear-gradient(transparent,#000 13%,#000 84%,transparent);-webkit-mask-image:linear-gradient(transparent,#000 13%,#000 84%,transparent)}
.realm-wall-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;transform:rotate(-9deg) translateY(-85px);transform-origin:50% 0;width:112%;margin-left:0}
.realm-wall-lane{min-width:0}.realm-wall-track{animation:realm-wall-drift 55s linear infinite;will-change:transform;animation-play-state:paused}.realm-wall-group{display:flex;flex-direction:column;gap:16px;padding-bottom:16px}.lane-1 .realm-wall-track{animation-direction:reverse;animation-duration:66s;animation-delay:0s}.lane-2 .realm-wall-track{animation-duration:60s;animation-delay:-30s}
[data-paused=false][data-sleeping=false] .realm-wall-track{animation-play-state:running}.realm-wall:hover .realm-wall-track{animation-play-state:paused}
.realm-work{border:1px solid #acdbca33;border-radius:12px;overflow:hidden;background:#10332d;box-shadow:0 12px 24px #00161155;flex-shrink:0}.realm-work-image{overflow:hidden}.realm-work--web .realm-work-image img{display:block;width:100%;height:auto;aspect-ratio:1.35;object-fit:cover;object-position:50% 20%}.realm-work figcaption{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:13px 11px;font:11px var(--font-utility);color:#e0f5eb}.realm-work small{font-size:8px;color:#9fbdb0;white-space:nowrap}
.realm-work--mobile{background:linear-gradient(155deg,#1a4943,#152e30)}.realm-work--mobile .realm-work-image{width:70%;margin:22px auto 0;border:5px solid #081919;border-radius:22px;box-shadow:0 8px 25px #0006}.realm-work--mobile img{display:block;width:100%;height:auto;aspect-ratio:600/1300;object-fit:cover}.realm-work--mobile figcaption{padding-top:18px}

.realm-wall-caption{position:absolute;bottom:0;left:10px;font:9px/1.5 var(--font-utility);color:#97b6a9;letter-spacing:.03em}
@keyframes realm-wall-drift{from{transform:translateY(0)}to{transform:translateY(-50%)}}



@media(min-width:1600px){.realm-wall-stage{height:710px}.realm-hero-grid{min-height:760px}}
@media(max-width:1100px){.realm-hero-grid{padding-inline:32px;gap:20px}.realm-wall-stage{margin-right:-55px;height:610px}.realm-wall-grid{grid-template-columns:repeat(2,minmax(0,1fr));width:110%}.realm-wall-lane.lane-2{display:none}.realm-hero h1{font-size:58px}}
@media(max-width:760px){.realm-hero-grid{grid-template-columns:1fr;padding:30px 23px 0;gap:15px}.realm-hero-copy{padding:15px 0 0}.realm-hero h1{font-size:clamp(40px,10.5vw,68px)}.realm-platforms{margin-top:24px!important;gap:20px;font-size:9px}.realm-wall-stage{height:395px;margin:0 -23px}.realm-wall-grid{width:112%;margin-left:-6%;gap:12px;grid-template-columns:repeat(3,minmax(0,1fr));transform:rotate(-9deg) translateY(-55px)}.realm-wall-lane.lane-2{display:block}.realm-wall-group{gap:12px;padding-bottom:12px}.realm-work{border-radius:8px}.realm-work figcaption{padding:9px 7px;font-size:8px;gap:3px}.realm-work small{font-size:6px}.realm-work--mobile .realm-work-image{width:78%;border-width:3px;border-radius:14px;margin-top:14px}.realm-wall-caption{left:23px;font-size:8px;bottom:3px}.realm-hero-foot{margin-top:0}}
@media(prefers-reduced-motion:reduce){.realm-wall-track{animation:none!important}.realm-wall-grid{transform:rotate(-5deg) translateY(-55px)}}

/* Theme-aware first screen: use the runtime's live semantic theme tokens. */
body:has(.realm-page) .portal-header{background:color-mix(in srgb,var(--color-bg) 92%,var(--color-accent) 8%);color:var(--color-text);border-bottom-color:var(--color-border);backdrop-filter:blur(16px)}
.realm-hero{background:var(--color-bg);color:var(--color-text)}
.realm-hero h1 span:last-child{color:var(--color-hero-accent)}
.realm-lede,.realm-platforms,.realm-hero-foot,.realm-wall-caption{color:var(--color-dim)}
.realm-hero-foot{border-color:var(--color-border)}
.realm-motion{border-color:var(--color-border)}
.realm-work{background:var(--color-surface);border-color:var(--color-border);box-shadow:var(--shadow-card)}
.realm-work figcaption{color:var(--color-text)}.realm-work small{color:var(--color-dim)}
.realm-work--mobile{background:color-mix(in srgb,var(--color-accent) 12%,var(--color-surface))}
.realm-page a.realm-action:not(.realm-action--secondary){background:var(--color-accent);color:var(--color-on-accent)}
.realm-page a.realm-action:not(.realm-action--secondary):hover{background:var(--color-accent-secondary)}
/* ARC is a product page: centered thesis, followed by a single runtime illustration. */
.arc-product-hero{position:relative;padding:70px 40px 55px;background:radial-gradient(ellipse at 50% 70%,color-mix(in srgb,var(--color-accent) 13%,transparent),transparent 62%),var(--color-bg);color:var(--color-text)}
.arc-product-heading{max-width:1000px;margin:auto;text-align:center}.arc-product-heading>.realm-eyebrow{color:var(--color-accent)}
.arc-product-heading h1{font-size:clamp(54px,6.6vw,94px);margin:25px 0}.arc-product-heading h1 span{display:inline}.arc-product-heading h1 span:last-child{color:var(--color-hero-accent);margin-left:.16em}
.arc-product-heading .realm-lede{max-width:650px;margin:auto}.arc-product-heading .realm-actions{justify-content:center;margin-top:26px}
.arc-runtime-scene{max-width:1120px;margin:60px auto 0!important;border-top:1px solid var(--color-border);padding:30px 0 0}
.arc-scene-heading{display:flex;justify-content:space-between;align-items:center;gap:20px}.arc-scene-heading .realm-eyebrow{color:var(--color-dim)}.arc-scene-heading h2{font-size:23px;letter-spacing:0}
.arc-runtime-flow{display:grid;grid-template-columns:1fr 60px 1.3fr 60px 1fr;align-items:center;gap:12px;padding:35px 0 20px}
.arc-runtime-flow small{display:block;font:11px/1.6 var(--font-utility);color:var(--color-dim);margin-bottom:15px}.arc-package{padding:20px}.arc-package-sheet{position:relative;padding:25px;border:1px solid var(--color-border);border-radius:5px;background:var(--color-bg);box-shadow:8px 8px 0 color-mix(in srgb,var(--color-accent) 12%,var(--color-bg)),16px 16px 0 color-mix(in srgb,var(--color-accent) 6%,var(--color-bg));transform:rotate(-5deg)}
.arc-package-sheet span{font:500 24px var(--font-display);display:block;margin-bottom:20px}.arc-package-sheet i{height:3px;display:block;background:var(--color-border);margin-top:9px;width:85%}.arc-package-sheet i:last-child{width:55%}.arc-package>p{font-size:11px;color:var(--color-dim);margin-top:30px}
.arc-connector{font-size:30px;font-weight:200;color:var(--color-accent);text-align:center}
.arc-runtime-core{aspect-ratio:1.25;display:flex;align-items:center;justify-content:center;flex-direction:column;position:relative;border:1px solid color-mix(in srgb,var(--color-accent) 40%,var(--color-border));border-radius:38%;background:radial-gradient(ellipse at 30% 20%,color-mix(in srgb,var(--color-accent) 25%,var(--color-bg)),var(--color-surface));box-shadow:0 20px 70px color-mix(in srgb,var(--color-accent) 15%,transparent),inset 0 1px 1px color-mix(in srgb,var(--color-bg) 80%,transparent)}
.arc-runtime-core strong{font:600 clamp(60px,6vw,90px)/1 var(--font-display);letter-spacing:-.065em;color:var(--color-hero-ink)}.arc-runtime-core span{font:9px var(--font-utility);margin-top:20px;color:var(--color-dim)}
.arc-access>a{position:relative;display:block;padding:20px 25px 20px 17px;border-bottom:1px solid var(--color-border)}.arc-access b{font-size:18px;font-weight:500;display:block}.arc-access>a span{display:block;color:var(--color-dim);font-size:11px;margin-top:10px}.arc-access i{position:absolute;right:4px;top:22px;color:var(--color-accent)}.arc-access>a:hover{background:var(--color-surface)}
.arc-runtime-scene>figcaption{font:10px/1.6 var(--font-utility);text-align:center;color:var(--color-dim);margin-top:20px}
@media(max-width:760px){.arc-product-hero{padding:45px 23px}.arc-product-heading h1{font-size:46px}.arc-product-heading h1 span{display:block}.arc-product-heading h1 span:last-child{margin-left:0}.arc-product-heading .realm-lede{font-size:15px}.arc-runtime-scene{margin-top:40px!important}.arc-scene-heading{display:block}.arc-scene-heading h2{font-size:21px;margin-top:14px}.arc-runtime-flow{grid-template-columns:1fr;gap:5px;padding-top:15px}.arc-package{max-width:245px;width:100%;margin:auto}.arc-package-sheet{padding:18px}.arc-package-sheet i{margin-top:6px}.arc-package>p{margin-top:22px}.arc-connector{transform:rotate(90deg);font-size:24px}.arc-runtime-core{width:235px;margin:15px auto;aspect-ratio:1.5}.arc-runtime-core strong{font-size:70px}.arc-runtime-core span{margin-top:10px}.arc-runtime-core small{margin-bottom:5px}.arc-access{width:100%;max-width:300px;margin:15px auto 0}.arc-access>a{padding:16px}.arc-access>small{text-align:center}}

/* Let the headline, actions and moving project wall carry the home hero. */
.realm-hero-copy h1{margin-top:0;margin-bottom:0}

/* Each locale owns its sentence rhythm; stacked alternatives reserve the final size. */
.realm-hero .realm-headline .realm-headline-visual{display:block;color:var(--color-text)}
.realm-hero .realm-headline .realm-headline-slot{display:grid;overflow:clip;padding-block:.06em;margin-block:-.06em;color:inherit}
.realm-hero .realm-headline .realm-headline-slot:last-child{color:var(--color-hero-accent)}
.realm-hero .realm-headline .realm-headline-word{grid-area:1/1;display:block;white-space:nowrap;color:inherit;visibility:hidden;opacity:0;transform:translateY(105%);transition:none}
.realm-hero .realm-headline .realm-headline-word.is-current{visibility:visible;opacity:1;transform:translateY(0)}
.realm-hero .realm-headline.is-rolling .realm-headline-word{transition:transform .52s cubic-bezier(.22,.7,.2,1),opacity .36s ease;transition-delay:var(--reel-delay,0ms)}
.realm-hero .realm-headline.is-rolling .realm-headline-word.is-outgoing{visibility:visible;opacity:0;transform:translateY(-105%)}
.realm-hero .realm-headline-slot:nth-child(2){--reel-delay:70ms}.realm-hero .realm-headline-slot:nth-child(3){--reel-delay:140ms}
.realm-page:lang(ja) .realm-headline{font-size:clamp(32px,4.5vw,62px)}
@media(max-width:760px){.realm-page:lang(ja) .realm-headline{font-size:clamp(28px,8vw,50px)}}
@media(prefers-reduced-motion:reduce){.realm-hero .realm-headline.is-rolling .realm-headline-word{transition:none}}
@media(min-width:761px) and (max-width:1100px){.realm-hero .realm-headline{font-size:clamp(38px,5vw,58px)}.realm-page:lang(ja) .realm-headline{font-size:clamp(32px,4.5vw,49px)}}

/* A clean paper-like field: color stays beside the project wall, never over the text. */
html .realm-page .realm-hero{background:radial-gradient(ellipse at 86% 30%,color-mix(in srgb,#16ced1 15%,transparent),transparent 58%),radial-gradient(ellipse at 34% 88%,color-mix(in srgb,#4ef1ba 14%,transparent),transparent 62%),var(--color-bg)}
/* The mask spans the viewport; the grid retains its original measured geometry. */
.realm-wall--wide{position:absolute;left:calc(-1 * var(--wall-left));width:var(--wall-viewport-width);overflow:hidden;pointer-events:none}
.realm-wall--wide .realm-wall-grid{width:var(--wall-grid-width);margin-left:calc(var(--wall-left) + var(--wall-grid-inset));pointer-events:auto}
/* Extend this same Hero background behind the sticky header without moving its contents. */
html body:has(.realm-page){--home-header-height:calc(clamp(4.45rem,5.2vw,5.05rem) + 1px)}
html body:has(.realm-page) .realm-page{margin-top:calc(-1 * var(--home-header-height))}
html .realm-page .realm-hero{padding-top:var(--home-header-height);box-sizing:content-box}
html body:has(.realm-page) .portal-header:not(.scrolled){background:transparent;border-bottom-color:transparent;box-shadow:none;backdrop-filter:none}
@media(max-width:760px){html body:has(.realm-page){--home-header-height:calc(4.25rem + 1px)}}
/* The home Hero is an open canvas, not a bordered panel. */
html .realm-page .realm-hero{border:0;border-radius:0;overflow:visible}
/* End the first screen where the photo wall fades out, with no empty lower band. */
html .realm-page .realm-hero{min-height:0}
.realm-hero .realm-hero-grid{min-height:0;padding-bottom:0}

/* Product captures already include their own device frame; retain the source proportions. */
.realm-work--mobile .realm-work-image{border:0;box-shadow:none}
.realm-work--mobile img{aspect-ratio:auto;object-fit:contain}
.realm-work--desktop .realm-work-image img{display:block;width:100%;height:auto;object-fit:contain}

/* Exact geometry of the supplied 606 × 1252 silver frame, not theme spacing.
   Keep the 1320 × 2868 screenshot intact beneath its transparent screen opening. */
.realm-work--mobile .realm-aside-phone{position:relative;aspect-ratio:606/1252;border-radius:0;overflow:visible}
.realm-aside-phone .realm-aside-screen{position:absolute;left:3.795%;top:1.438%;width:92.079%;height:97.125%;object-fit:cover;border-radius:18.5% / 8.5%}
.realm-aside-phone .realm-aside-frame{position:relative;width:100%;height:auto;pointer-events:none}

.realm-news{max-width:1440px;margin:auto;padding:0 64px}.realm-news-inner{display:flex;align-items:center;gap:24px;min-height:66px;padding:12px 0}.realm-news-label{font-size:11px;letter-spacing:.07em;color:var(--color-dim);white-space:nowrap}.realm-news-items{display:grid;flex:1;min-width:0}.realm-page .realm-news-item{grid-area:1/1;display:flex;align-items:center;gap:16px;justify-content:space-between;font-size:14px;line-height:1.55;opacity:0;visibility:hidden;transition:opacity .5s ease,visibility 0s .5s}.realm-page .realm-news-item.is-active{opacity:1;visibility:visible;transition-delay:0s}.realm-news-item>span:first-child{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.realm-news-item:hover>span:first-child{text-decoration:underline;text-underline-offset:4px}.realm-news-arrow{color:var(--color-dim)}.realm-news-next{border:0;background:transparent;color:var(--color-dim);font-size:22px;width:36px;min-height:44px;cursor:pointer}.realm-news-next:hover{color:var(--color-text)}.realm-news[hidden],.realm-news-next[hidden]{display:none}
@media(max-width:700px){.realm-news{padding:0 23px}.realm-news-inner{gap:12px;min-height:72px}.realm-page .realm-news-item{font-size:12px;gap:8px}.realm-news-label{font-size:10px}.realm-news-next{width:24px;flex-shrink:0}}
@media(prefers-reduced-motion:reduce){.realm-page .realm-news-item{transition:none}}
.realm-news-inner{justify-content:center;max-width:960px;margin-inline:auto}.realm-news-items{flex:0 1 auto}.realm-page .realm-news-item{justify-content:center}.realm-news-item>span:first-child{text-align:center}

.realm-hero-copy .realm-news{padding:0;margin:18px 0 0;max-width:540px}.realm-hero-copy .realm-news-inner{min-height:42px;padding:0;gap:12px;justify-content:flex-start}.realm-hero-copy .realm-news-items{flex:1}.realm-hero-copy .realm-news-item{font-size:12px;justify-content:flex-start;gap:8px}.realm-hero-copy .realm-news-item>span:first-child{text-align:left}.realm-hero-copy .realm-news-label{font-size:10px}.realm-hero-copy .realm-news-next{width:24px;flex-shrink:0}

.realm-worlds .realm-section-heading{align-items:center}
.realm-worlds-explanation>p{font-size:17px;line-height:1.9;color:var(--color-dim);max-width:510px}
.realm-worlds .realm-built-link{display:inline-flex;vertical-align:middle;position:relative;top:-2px;margin:0 5px 0 0;padding:3px 0;transition:opacity .2s}
.realm-built-link>span{font-size:12px;align-self:center;margin-left:4px;color:var(--color-dim)}.realm-built-link:hover{opacity:.7}.realm-built-link img{width:180px;height:28px;display:block}.realm-built-link .built-badge-dark{display:none}
html[data-mode=dark] .realm-built-link .built-badge-light{display:none}html[data-mode=dark] .realm-built-link .built-badge-dark{display:block}
.realm-project-visual{position:relative;isolation:isolate}.realm-worlds .realm-project-image{display:block;border:0;border-radius:0;background:transparent;overflow:visible}
.realm-worlds .realm-project-image img{display:block;width:100%;height:auto;aspect-ratio:8/5;object-fit:contain}
.realm-worlds .realm-project-image:hover img{transform:none}
.realm-project-stamp{position:absolute;bottom:18px;right:18px;padding:10px 12px;background:rgba(8,16,15,.64);backdrop-filter:blur(12px);border-radius:7px;pointer-events:none;box-shadow:0 4px 18px #08271f14}.realm-project-stamp img{display:block;width:156px;height:auto}
.realm-project-panels [hidden],.realm-project-controls [hidden]{display:none}
.realm-worlds[data-ready] .realm-project-panels{display:grid}.realm-worlds[data-ready] .realm-project-panel{grid-area:1/1;opacity:0;visibility:hidden;transition:opacity .75s ease-in-out,visibility 0s .75s}.realm-worlds[data-ready] .realm-project-panel.is-active{opacity:1;visibility:visible;transition-delay:0s;z-index:1}
.realm-worlds .realm-project-caption{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:24px 0 0}
.realm-worlds .realm-project-caption h3{font-size:24px;line-height:1.3;font-weight:550;letter-spacing:-.025em;margin-bottom:6px}
.realm-worlds .realm-project-caption p{font-size:15px;line-height:1.7;max-width:720px;color:var(--color-dim)}
.realm-project-pending,.realm-worlds .realm-project-caption>a{font-size:13px;white-space:nowrap;padding:8px 0;color:var(--color-dim)}
.realm-project-controls{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:22px}
.realm-project-controls button{display:grid;place-items:center;appearance:none;border:0;background:transparent;color:var(--color-dim);padding:0;cursor:pointer;width:44px;height:44px;transition:color .2s,background .2s;border-radius:50%}
.realm-project-controls button[data-step]{font-size:28px;font-weight:300}.realm-project-controls button:hover{color:var(--color-text);background:color-mix(in srgb,var(--color-accent) 10%,transparent)}
.realm-project-dots{display:flex;align-items:center}.realm-project-dots button{width:30px}.realm-project-dots span{width:5px;height:5px;border-radius:50%;background:currentColor;opacity:.35;transition:width .25s,opacity .25s}.realm-project-dots [aria-current] span{width:18px;border-radius:8px;opacity:1}
.realm-metrics{margin-top:84px}.realm-worlds .realm-metrics-heading{font-family:var(--font-body);font-size:26px;font-weight:500;line-height:1.4;letter-spacing:-.025em;text-align:center;margin:0 0 34px}.realm-worlds .realm-metrics-note{color:var(--color-dim);font-size:11px;letter-spacing:.04em;margin-top:24px;text-align:center}
.realm-metrics dl{display:grid;grid-template-columns:repeat(var(--metric-columns,6),minmax(0,1fr));gap:24px;margin:0;text-align:center}.realm-metrics dl>div{display:flex;flex-direction:column-reverse;gap:9px}.realm-metrics dt{font-size:13px;color:var(--color-dim)}.realm-metrics dd{margin:0;font-size:clamp(27px,3.1vw,44px);font-weight:500;letter-spacing:-.055em;line-height:1.15;font-variant-numeric:tabular-nums}
.realm-sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

@media(max-width:700px){.realm-worlds .realm-project-caption{gap:12px;align-items:flex-start;padding-top:18px}.realm-worlds .realm-project-caption h3{font-size:21px}.realm-worlds .realm-project-caption p{font-size:13px}.realm-project-pending{font-size:11px}.realm-project-stamp{right:9px;bottom:9px;padding:7px 9px}.realm-project-stamp img{width:126px}.realm-project-controls{margin-top:14px;gap:8px}.realm-metrics{margin-top:52px}.realm-worlds .realm-metrics-heading{font-size:21px;margin-bottom:28px}.realm-metrics dl{grid-template-columns:repeat(var(--metric-mobile-columns,3),minmax(0,1fr));row-gap:30px}.realm-metrics dt{font-size:12px}.realm-metrics dd{font-size:30px}}
@media(prefers-reduced-motion:reduce){.realm-worlds[data-ready] .realm-project-panel{transition:none}.realm-project-controls *{transition:none}}

.realm-core{align-items:center}.realm-core-art{position:relative;isolation:isolate;aspect-ratio:1;display:grid;place-items:center;color:var(--color-accent)}.realm-core-art>span{font:600 clamp(48px,6.4vw,88px)/1 var(--font-display);letter-spacing:-.06em;z-index:1}.realm-core-art svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}.realm-core-art>span{color:var(--color-hero-ink)}.realm-art-glow{stop-color:#a2f2d4;stop-opacity:1}
@media(min-width:901px){.realm-core--space>div:first-child{grid-column:2;grid-row:1}.realm-core--space .realm-core-art{grid-column:1;grid-row:1}}
@media(max-width:900px){.realm-core-art{width:min(100%,380px);margin:auto}.realm-core-art>span{font-size:clamp(44px,12vw,70px)}}

.realm-word-object>span,.realm-core-art>span{font-size:clamp(76px,8vw,116px);letter-spacing:-.065em}.realm-core-art>small{position:absolute;top:calc(50% + 76px);font:9px var(--font-utility);letter-spacing:.17em;color:var(--color-text);text-align:center}.realm-core-art>span{transform:translateY(-4px)}
@media(max-width:900px){.realm-word-object>span,.realm-core-art>span{font-size:clamp(68px,18vw,100px)}.realm-core-art>small{top:calc(50% + 54px);font-size:8px}}

.realm-core-art>span{text-align:center}.realm-core-art>span>b{display:block;font-size:.38em;font-weight:500;letter-spacing:-.04em;line-height:1.4;margin-bottom:.08em}.realm-core-art>small{top:calc(50% + 98px)}
@media(max-width:900px){.realm-core-art>small{top:calc(50% + 75px)}}

.realm-intro .realm-learn{display:inline-flex;align-items:center;gap:16px;min-height:44px;margin-top:24px;color:var(--color-accent);font-size:15px;font-weight:500}.realm-learn span{transition:transform .2s}.realm-learn:hover span{transform:translateX(4px)}
.realm-intro-links{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 28px}.realm-intro-links .realm-name-guide{display:inline-flex;align-items:center;gap:10px;min-height:44px;margin-top:24px;color:var(--color-dim);font-size:13px}.realm-name-guide span{transition:transform .2s}.realm-name-guide:hover,.realm-name-guide:focus-visible{color:var(--color-accent)}.realm-name-guide:hover span,.realm-name-guide:focus-visible span{transform:translateX(4px)}
.realm-intro .realm-foundations{gap:8px;flex-wrap:wrap}.realm-intro .realm-foundations a{padding:12px 14px;margin-inline:-14px;min-height:44px;transition:background .2s,color .2s;border-radius:4px}.realm-intro .realm-foundations a:hover,.realm-intro .realm-foundations a:focus-visible{background:var(--color-accent);color:var(--color-on-accent)}
@media(prefers-reduced-motion:reduce){.realm-learn span,.realm-name-guide span,.realm-intro .realm-foundations a{transition:none}}

/* Match the ARC artwork footprint and mint wash; scale only the artwork, not its label. */
.realm-core-art svg{transform:scale(1.22);transform-origin:center}.realm-core-art svg>g{stroke-opacity:.5}
@media(max-width:900px){.realm-core-art svg{transform:scale(1.12)}}
/* Product chapters are separated by whitespace; retain the link rail below. */
.realm-intro{border-top:0}

/* Landing-page-scoped presentation lives in landing-shell/style.css so this
   feed stays quiet when it is used as the bottom archive band. */
.editorial-feed-categories{display:flex;flex-direction:column;gap:4px;margin:24px 0 12px}.editorial-feed-categories a{display:flex;justify-content:space-between;gap:20px;align-items:center;min-height:40px;max-width:240px;font-size:14px;color:var(--color-dim)}.editorial-feed-categories a:hover{color:var(--color-accent)}

/* Standalone page-sections also host this feed. The landing-shell keeps its
   more specific presentation; the feed no longer needs that shell for layout. */
.page-section .editorial-feed {
  box-sizing: border-box;
  display: grid;
  grid-template-columns: minmax(12rem, 0.42fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 5rem);
  max-width: var(--container-max, 1120px);
  margin-inline: auto;
  padding: var(--space-section, 64px) var(--space-page-x, 24px);
  color: var(--color-text);
}
.page-section .editorial-feed-rail h2 { font-size: var(--type-heading, 1.5rem); line-height: 1.3; margin: 0 0 1rem; }
.page-section .editorial-feed-rail p, .page-section .editorial-feed-row p { color: var(--color-dim); line-height: 1.7; }
.page-section .editorial-feed-all { color: var(--color-accent); text-underline-offset: 0.2em; }
.page-section .editorial-feed-list { min-width: 0; border-top: 1px solid var(--color-border); }
.page-section .editorial-feed-row { padding-block: 1.5rem; border-bottom: 1px solid var(--color-border); }
.page-section .editorial-feed-row a { display: block; color: inherit; text-decoration: none; }
.page-section .editorial-feed-row a:hover h3 { color: var(--color-accent); }
.page-section .editorial-feed-row h3 { font-size: 1.25rem; line-height: 1.4; margin: 0; }
.page-section .editorial-feed-meta { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.75rem; color: var(--color-dim); font-size: 0.8rem; }
.page-section .editorial-feed a:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 4px; }
@media (max-width: 720px) {
  .page-section .editorial-feed { grid-template-columns: minmax(0, 1fr); }
}

.realm-concepts{border-top:1px solid var(--color-border)}.realm-concepts header{display:flex;align-items:baseline;justify-content:space-between;gap:24px;margin-bottom:36px}.realm-concepts h2{font-size:clamp(30px,3.6vw,48px)}.realm-concept-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 32px}.realm-concept-grid>a{position:relative;padding:28px 28px 28px 0;border-top:1px solid var(--color-border);transition:color .2s}.realm-concept-mark{display:block;color:var(--color-accent);font:500 22px/1.4 var(--font-utility);margin-bottom:20px}.realm-concept-grid h3{font:500 15px/1.5 var(--font-body);margin-bottom:8px}.realm-concept-grid p{color:var(--color-dim);font-size:14px;line-height:1.7}.realm-concept-arrow{position:absolute;top:30px;right:4px;color:var(--color-dim)}.realm-concept-grid a:hover .realm-concept-arrow{color:var(--color-accent);transform:translate(2px,-2px)}
@media(max-width:700px){.realm-concepts header{display:block}.realm-concepts header p{margin-top:18px}.realm-concept-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 20px}.realm-concept-mark{font-size:18px}.realm-concept-grid>a{padding-right:12px}.realm-concept-arrow{right:0;font-size:12px}}

/* Representative-page composition is shared in realm-hero/style.css. */