/* Hakken design-system components (buttons, badges, fields, dot grids). Values come from tokens.css. Loaded by every page. */
body { margin: 0; background: var(--surface-000); color: var(--ink); font-family: var(--font-sans); font-size: 15px; line-height: 24px; -webkit-font-smoothing: antialiased; }
.hk-row { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; padding: var(--space-5); }
.hk-stack { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-5); }
.hk-grid { display: grid; gap: var(--space-4); padding: var(--space-5); }
:where(.hk-btn, .hk-input, .hk-check-input, .hk-switch-track, .hk-tab, .hk-tag-x, .hk-card.is-interactive, .hk-scenario.is-interactive, .hk-layer-btn, .hk-dialog-x, .hk-toast-x):focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .hk-btn, .hk-tab, .hk-switch-thumb, .hk-switch-track, .hk-tooltip, .hk-bar > span { transition: none !important; } }

/* Brand */
.hk-wordmark { display: block; }
.hk-icon { display: inline-block; flex: none; vertical-align: middle; }
.hk-connector { display: inline-flex; align-items: center; }
.hk-connector .hk-node { width: 10px; height: 10px; border-radius: var(--radius-full); border: 2px solid var(--accent); box-sizing: border-box; flex: none; }
.hk-connector .hk-line { height: 2px; width: 120px; background: var(--accent); }
.hk-connector .hk-node-filled { background: var(--accent); border: 0; box-shadow: var(--shadow-node); }
.hk-connector-sm .hk-line { width: 48px; }
.hk-connector-sm .hk-node { width: 8px; height: 8px; }
.hk-connector-slide .hk-node { width: 12px; height: 12px; }
.hk-connector-slide .hk-line { width: 148px; }
.hk-dotfield { position: relative; overflow: hidden; }
.hk-dots { position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(var(--dot) 1.6px, transparent 1.6px); background-size: var(--dot-grid) var(--dot-grid); }
.hk-dots-offset { background-image: radial-gradient(var(--dot) 1.6px, transparent 1.6px), radial-gradient(var(--line-strong) 1.2px, transparent 1.2px); background-size: var(--dot-grid) var(--dot-grid), 56px 56px; background-position: 0 0, 14px 14px; }
.hk-dots-sweep { -webkit-mask-image: linear-gradient(115deg, transparent 10%, black 42%, black 58%, transparent 90%); mask-image: linear-gradient(115deg, transparent 10%, black 42%, black 58%, transparent 90%); }
.hk-dots-grid { -webkit-mask-image: linear-gradient(to bottom, black, transparent 90%); mask-image: linear-gradient(to bottom, black, transparent 90%); }
.hk-dots-arc { position: absolute; inset: 0; width: 100%; height: 100%; }
.hk-dots-arc path { stroke: var(--line-strong); stroke-width: 1; }
.hk-dots-arc circle { fill: var(--decision-lime); }
.hk-dotfield-content { position: relative; }
.hk-eyebrow { font-family: var(--font-mono); font-size: 11px; line-height: 16px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-text); }
.hk-eyebrow-muted { color: var(--ink-muted); }

/* Buttons */
.hk-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); font-family: var(--font-sans); font-weight: 500; border-radius: var(--radius-sm); border: 1px solid transparent; cursor: pointer; white-space: nowrap; transition: background var(--duration-hover) var(--ease-standard), border-color var(--duration-hover) var(--ease-standard), color var(--duration-hover) var(--ease-standard); }
.hk-btn-sm { height: 32px; padding: 0 var(--space-3); font-size: 13px; }
.hk-btn-md { height: 40px; padding: 0 var(--space-4); font-size: 14px; }
.hk-btn-lg { height: 48px; padding: 0 var(--space-5); font-size: 15px; }
.hk-btn-primary { background: var(--accent); color: var(--on-accent); }
.hk-btn-primary:hover { background: var(--accent-hover); }
.hk-btn-secondary { background: transparent; color: var(--ink); border-color: var(--line-control); }
.hk-btn-secondary:hover { background: var(--surface-200); }
.hk-btn-ghost { background: transparent; color: var(--ink-muted); }
.hk-btn-ghost:hover { background: var(--accent-soft); color: var(--ink); }
.hk-btn-danger { background: transparent; color: var(--error-text); border-color: var(--error-text); }
.hk-btn-danger:hover { background: var(--surface-200); }
.hk-btn:active { background: var(--surface-300); }
.hk-btn-primary:active { background: var(--accent); filter: brightness(0.92); }
.hk-btn:disabled { cursor: not-allowed; background: transparent; color: var(--ink-faint); border-color: var(--line); filter: none; }
.hk-iconbtn.hk-btn-sm { width: 32px; padding: 0; }
.hk-iconbtn.hk-btn-md { width: 40px; padding: 0; }
.hk-iconbtn.hk-btn-lg { width: 48px; padding: 0; }

/* Forms */
.hk-field { display: flex; flex-direction: column; gap: 6px; min-width: 220px; }
.hk-label { font-size: 13px; line-height: 16px; font-weight: 500; color: var(--ink); }
.hk-hint { font-size: 12px; line-height: 16px; color: var(--ink-muted); }
.hk-hint-error { color: var(--error-text); }
.hk-control { position: relative; display: flex; align-items: center; }
.hk-input { box-sizing: border-box; width: 100%; height: 40px; padding: 0 var(--space-3); font: inherit; font-size: 14px; color: var(--ink); background: var(--surface-200); border: 1px solid var(--line-control); border-radius: var(--radius-sm); }
.hk-input::placeholder { color: var(--ink-muted); }
.hk-input:hover { border-color: var(--ink-muted); }
.hk-input:disabled { color: var(--ink-faint); border-color: var(--line); cursor: not-allowed; }
.hk-field-error .hk-input { border-color: var(--error-text); }
.hk-unit { position: absolute; right: var(--space-3); font-family: var(--font-mono); font-size: 12px; color: var(--ink-muted); pointer-events: none; }
.hk-control:has(.hk-unit) .hk-input { padding-right: 48px; }
.hk-select { -webkit-appearance: none; appearance: none; padding-right: 36px; cursor: pointer; }
.hk-select option { background: var(--surface-100); color: var(--ink); }
.hk-select-chev { position: absolute; right: var(--space-3); color: var(--ink-muted); pointer-events: none; }
.hk-check { display: flex; align-items: flex-start; gap: 10px; }
.hk-check-label { display: flex; flex-direction: column; gap: 2px; font-size: 14px; line-height: 20px; color: var(--ink); cursor: pointer; }
.hk-check-input { -webkit-appearance: none; appearance: none; flex: none; width: 18px; height: 18px; margin: 1px 0 0; border: 1.5px solid var(--line-control); background: var(--surface-200); display: grid; place-content: center; cursor: pointer; }
.hk-checkbox { border-radius: var(--radius-xs); }
.hk-radio { border-radius: var(--radius-full); }
.hk-check-input:checked { background: var(--accent); border-color: var(--accent); }
.hk-checkbox:checked::after { content: ''; width: 5px; height: 9px; border: solid var(--on-accent); border-width: 0 2px 2px 0; transform: translateY(-1px) rotate(45deg); }
.hk-radio:checked { background: var(--surface-200); }
.hk-radio:checked::after { content: ''; width: 8px; height: 8px; border-radius: var(--radius-full); background: var(--accent); }
.hk-check-input:disabled { border-color: var(--line); cursor: not-allowed; }
.hk-check-input:disabled + .hk-check-label { color: var(--ink-faint); cursor: not-allowed; }
.hk-switch { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; color: var(--ink); cursor: pointer; }
.hk-switch-track { position: relative; width: 36px; height: 20px; padding: 0; border-radius: var(--radius-full); border: 1px solid var(--line-control); background: var(--surface-300); cursor: pointer; transition: background var(--duration-standard) var(--ease-standard); }
.hk-switch-thumb { position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: var(--radius-full); background: var(--ink-muted); transition: transform var(--duration-standard) var(--ease-standard), background var(--duration-standard) var(--ease-standard); }
.hk-switch-track[aria-checked="true"] { background: var(--accent); border-color: var(--accent); }
.hk-switch-track[aria-checked="true"] .hk-switch-thumb { transform: translateX(16px); background: var(--on-accent); }
.hk-switch.is-disabled { color: var(--ink-faint); cursor: not-allowed; }
.hk-switch.is-disabled .hk-switch-track { opacity: 0.5; cursor: not-allowed; }

/* Tabs */
.hk-tablist { display: flex; gap: var(--space-5); border-bottom: 1px solid var(--line); }
.hk-tab { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: var(--space-3) 0; margin-bottom: -1px; background: none; border: 0; border-bottom: 2px solid transparent; font-family: var(--font-sans); font-size: 14px; font-weight: 500; color: var(--ink-muted); cursor: pointer; transition: color var(--duration-hover) var(--ease-standard); }
.hk-tab:hover { color: var(--ink); }
.hk-tab.is-selected { color: var(--ink); border-bottom-color: var(--accent); }
.hk-tab-meta { font-family: var(--font-mono); font-size: 10px; line-height: 14px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-muted); }
.hk-tab.is-selected .hk-tab-meta { color: var(--accent-text); }
.hk-tabpanel { padding-top: var(--space-4); }

/* Badges, tags, evidence */
.hk-badge, .hk-evidence { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 var(--space-2); box-sizing: border-box; font-family: var(--font-mono); font-size: 10px; line-height: 14px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink); border: 1px solid var(--line-strong); border-radius: var(--radius-xs); white-space: nowrap; }
.hk-badge-dot { width: 6px; height: 6px; border-radius: var(--radius-full); background: var(--ink-muted); }
.hk-badge-accent { color: var(--accent-text); border-color: var(--accent); background: var(--accent-soft); }
.hk-badge-accent .hk-badge-dot { background: var(--accent); }
.hk-badge-success .hk-badge-dot { background: var(--success); }
.hk-badge-warning .hk-badge-dot { background: var(--warning); }
.hk-badge-error .hk-badge-dot { background: var(--error); }
.hk-badge-info .hk-badge-dot { background: var(--info); }
.hk-badge-success { color: var(--success-text); }
.hk-badge-warning { color: var(--warning-text); }
.hk-badge-error { color: var(--error-text); }
.hk-badge-info { color: var(--info-text); }
.hk-badge-muted { color: var(--ink-muted); }
.hk-badge-muted .hk-badge-dot { background: transparent; border: 1px solid var(--ink-muted); box-sizing: border-box; }
.hk-evidence { color: var(--ink-muted); border-color: var(--line); }
.hk-evidence svg circle { stroke: currentColor; stroke-width: 1.4; fill: none; }
.hk-evidence-filled svg circle { fill: currentColor; }
.hk-evidence-live { color: var(--accent-text); border-color: var(--accent); }
.hk-evidence-live svg circle { fill: var(--accent); stroke: var(--accent); }
.hk-tag { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; box-sizing: border-box; font-size: 12px; font-weight: 500; color: var(--ink); background: var(--surface-200); border: 1px solid var(--line-strong); border-radius: var(--radius-xs); }
.hk-tag.is-selected { border-color: var(--accent); background: var(--accent-soft); }
.hk-tag-x { display: grid; place-items: center; width: 16px; height: 16px; margin-right: -4px; padding: 0; border: 0; border-radius: var(--radius-xs); background: none; color: var(--ink-muted); cursor: pointer; }
.hk-tag-x:hover { color: var(--ink); background: var(--surface-300); }

/* Card */
.hk-card { display: flex; flex-direction: column; gap: var(--space-4); box-sizing: border-box; padding: var(--space-5); text-align: left; font: inherit; color: var(--ink); background: var(--surface-100); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.hk-card-raised { background: var(--surface-200); border-color: var(--line-strong); }
.hk-card.is-interactive { cursor: pointer; transition: border-color var(--duration-hover) var(--ease-standard); }
.hk-card.is-interactive:hover { border-color: var(--line-control); }
.hk-card.is-selected { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.hk-card-head { display: flex; flex-direction: column; gap: 6px; }
.hk-card-eyebrow { font-family: var(--font-mono); font-size: 11px; line-height: 16px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-muted); }
.hk-card-title { font-family: var(--font-display); font-size: 20px; line-height: 26px; letter-spacing: 0.01em; }
.hk-card-body { font-size: 14px; line-height: 22px; color: var(--ink-muted); }
.hk-card-foot { display: flex; gap: var(--space-2); align-items: center; padding-top: var(--space-4); border-top: 1px solid var(--line); }

/* Dialog */
.hk-dialog-root { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: var(--space-5); }
.hk-dialog-root.is-inline { position: absolute; }
.hk-overlay { position: absolute; inset: 0; background: var(--overlay); }
.hk-dialog { position: relative; box-sizing: border-box; width: 100%; max-width: 480px; padding: var(--space-6); background: var(--surface-100); border: 1px solid var(--line-strong); border-radius: var(--radius-xl); box-shadow: var(--shadow-overlay); }
.hk-dialog-head { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-3); padding-right: var(--space-6); }
.hk-dialog-title { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 24px; line-height: 30px; }
.hk-dialog-body { font-size: 14px; line-height: 22px; color: var(--ink-muted); }
.hk-dialog-actions { display: flex; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-6); }
.hk-dialog-x { position: absolute; top: var(--space-4); right: var(--space-4); display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: var(--radius-sm); background: none; color: var(--ink-muted); cursor: pointer; }
.hk-dialog-x:hover { background: var(--surface-200); color: var(--ink); }

/* Toast */
.hk-toast { display: flex; align-items: flex-start; gap: var(--space-3); box-sizing: border-box; width: 100%; max-width: 420px; padding: var(--space-3) var(--space-4); background: var(--surface-200); border: 1px solid var(--line-strong); border-radius: var(--radius-md); box-shadow: var(--shadow-overlay); }
.hk-toast-mark { flex: none; width: 8px; height: 8px; margin-top: 7px; border-radius: var(--radius-full); background: var(--info); }
.hk-toast-success .hk-toast-mark { background: var(--success); }
.hk-toast-warning .hk-toast-mark { background: var(--warning); }
.hk-toast-error .hk-toast-mark { background: var(--error); }
.hk-toast-text { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.hk-toast-title { font-size: 14px; line-height: 22px; font-weight: 600; color: var(--ink); }
.hk-toast-body { font-size: 13px; line-height: 20px; color: var(--ink-muted); }
.hk-toast-action { flex: none; }
.hk-toast-x { flex: none; display: grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 0; border-radius: var(--radius-xs); background: none; color: var(--ink-muted); cursor: pointer; }
.hk-toast-x:hover { color: var(--ink); background: var(--surface-300); }

/* Tooltip */
.hk-tooltip-wrap { position: relative; display: inline-flex; }
.hk-tooltip { position: absolute; z-index: 40; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%); width: max-content; max-width: 240px; padding: 6px 10px; font-size: 12px; line-height: 16px; color: var(--ink); background: var(--surface-300); border: 1px solid var(--line-strong); border-radius: var(--radius-md); box-shadow: var(--shadow-overlay); opacity: 0; pointer-events: none; transition: opacity var(--duration-hover) var(--ease-standard); }
.hk-tooltip-bottom { bottom: auto; top: calc(100% + 8px); }
.hk-tooltip.is-open { opacity: 1; }

/* Metric tile */
.hk-metric { display: flex; flex-direction: column; gap: 6px; padding-left: 18px; border-left: 2px solid var(--line-strong); min-width: 180px; }
.hk-metric.is-selected { border-left-color: var(--accent); }
.hk-metric-value { font-family: var(--font-display); font-size: 44px; line-height: 48px; color: var(--ink); display: flex; align-items: baseline; gap: 6px; }
.hk-metric-unit { font-family: var(--font-mono); font-size: 13px; line-height: 16px; color: var(--ink-muted); }
.hk-metric-label { font-family: var(--font-mono); font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted); }
.hk-metric-meta { display: flex; align-items: center; gap: var(--space-2); margin-top: 2px; }
.hk-metric-na { font-family: var(--font-mono); font-size: 13px; line-height: 16px; letter-spacing: 0.04em; color: var(--ink-muted); font-style: normal; }
.hk-metric-value .hk-metric-na { font-size: 14px; padding: 16px 0 14px; }
.hk-delta { font-family: var(--font-mono); font-size: 12px; font-weight: 500; }
.hk-delta-up { color: var(--success-text); }
.hk-delta-down { color: var(--error-text); }
.hk-delta-flat { color: var(--ink-muted); }
.hk-metric-parts { display: flex; flex-direction: column; gap: 6px; margin: var(--space-2) 0 0; padding-top: var(--space-3); border-top: 1px solid var(--line); }
.hk-metric-part { display: grid; grid-template-columns: 1fr auto; column-gap: var(--space-3); row-gap: 4px; align-items: center; }
.hk-metric-part dt { font-size: 12px; color: var(--ink-muted); }
.hk-metric-part dd { margin: 0; font-family: var(--font-mono); font-size: 12px; color: var(--ink); text-align: right; }
.hk-metric-part .hk-bar { grid-column: 1 / -1; }
.hk-bar { display: block; height: 3px; background: var(--surface-300); border-radius: var(--radius-full); overflow: hidden; }
.hk-bar > span { display: block; height: 100%; background: var(--accent); transition: width var(--duration-layer) var(--ease-layer); }
.hk-bar-lg { height: 6px; }

/* Scenario card */
.hk-scenario { display: flex; flex-direction: column; gap: var(--space-3); box-sizing: border-box; width: 100%; padding: var(--space-5); text-align: left; font: inherit; color: var(--ink); background: var(--surface-100); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.hk-scenario.is-interactive { cursor: pointer; transition: border-color var(--duration-hover) var(--ease-standard); }
.hk-scenario.is-interactive:hover { border-color: var(--line-control); }
.hk-scenario.is-selected { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.hk-scenario-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.hk-scenario-id { font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: 0.08em; color: var(--ink-muted); }
.hk-scenario-name { font-family: var(--font-display); font-size: 20px; line-height: 26px; letter-spacing: 0.01em; }
.hk-scenario-summary { margin: 0; font-size: 13px; line-height: 20px; color: var(--ink-muted); }
.hk-scenario-metrics { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3) var(--space-4); margin: 0; padding: var(--space-3) 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.hk-scenario-metrics dt { font-family: var(--font-mono); font-size: 10px; line-height: 14px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-muted); }
.hk-scenario-metrics dd { margin: 2px 0 0; font-family: var(--font-mono); font-size: 14px; line-height: 20px; font-weight: 500; color: var(--ink); }
.hk-scenario-notes { display: flex; flex-direction: column; gap: var(--space-2); font-size: 13px; line-height: 20px; color: var(--ink); }
.hk-scenario-notes > div, .hk-switcher-notes > div { display: flex; flex-direction: column; gap: 2px; }
.hk-scenario-k { font-family: var(--font-mono); font-size: 10px; line-height: 14px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-muted); }

/* Scenario switcher */
.hk-switcher { display: flex; flex-direction: column; gap: var(--space-5); padding: var(--space-5); background: var(--surface-100); border: 1px solid var(--line); border-radius: var(--radius-xl); }
.hk-switcher-body { display: grid; grid-template-columns: 1.3fr 1fr; gap: var(--space-6); }
.hk-switcher-score { display: flex; flex-direction: column; gap: var(--space-4); }
.hk-switcher-parts { display: flex; flex-direction: column; gap: var(--space-3); }
.hk-switcher-part { display: grid; grid-template-columns: 140px 1fr 96px; gap: var(--space-3); align-items: center; }
.hk-switcher-plabel { font-size: 13px; color: var(--ink-muted); }
.hk-switcher-pval { font-family: var(--font-mono); font-size: 13px; font-weight: 500; text-align: right; color: var(--ink); }
.hk-switcher-notes { display: flex; flex-direction: column; gap: var(--space-4); padding-left: var(--space-5); border-left: 1px solid var(--line); }
.hk-switcher-notes p { margin: 0; font-size: 14px; line-height: 22px; color: var(--ink); }

/* Decision record */
.hk-record { display: grid; grid-template-columns: 24px 1fr; gap: var(--space-3); }
.hk-record-rail { position: relative; display: flex; justify-content: center; }
.hk-record-rail::after { content: ''; position: absolute; top: 22px; bottom: -6px; width: 2px; background: var(--line-strong); }
.hk-record.is-last .hk-record-rail::after { display: none; }
.hk-record-node { position: relative; z-index: 1; width: 12px; height: 12px; margin-top: 6px; box-sizing: border-box; border-radius: var(--radius-full); border: 2px solid var(--ink-muted); background: var(--surface-000); }
.hk-record-reviewed .hk-record-node { border-color: var(--accent); }
.hk-record-approved .hk-record-node { border: 0; background: var(--accent); box-shadow: var(--shadow-node); }
.hk-record-review .hk-record-node { border-color: var(--warning); }
.hk-record-superseded .hk-record-node { border-style: dashed; border-color: var(--ink-faint); }
.hk-record-main { display: flex; flex-direction: column; gap: var(--space-2); padding-bottom: var(--space-6); }
.hk-record-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.hk-record-id { font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: 0.08em; color: var(--ink-muted); text-transform: uppercase; }
.hk-record-title { font-family: var(--font-display); font-size: 20px; line-height: 26px; }
.hk-record-superseded .hk-record-title { color: var(--ink-muted); text-decoration: line-through; text-decoration-color: var(--ink-faint); }
.hk-record-text { margin: 0; font-size: 14px; line-height: 22px; color: var(--ink-muted); }
.hk-record-fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--space-3) var(--space-5); margin: var(--space-2) 0 0; }
.hk-record-fields dt { font-family: var(--font-mono); font-size: 10px; line-height: 14px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-muted); }
.hk-record-fields dd { margin: 2px 0 0; font-size: 13px; line-height: 20px; color: var(--ink); }

/* Layer rail */
.hk-layers { display: flex; flex-direction: column; gap: var(--space-3); width: 100%; max-width: 340px; padding: var(--space-4); box-sizing: border-box; background: var(--surface-100); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.hk-layers-title { font-family: var(--font-mono); font-size: 11px; line-height: 16px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-muted); }
.hk-layers-list { position: relative; display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.hk-layers-list::before { content: ''; position: absolute; left: 5px; top: 18px; bottom: 18px; width: 2px; background: var(--line-strong); }
.hk-layer { position: relative; display: flex; align-items: center; gap: var(--space-3); }
.hk-layer-node { position: relative; z-index: 1; flex: none; width: 12px; height: 12px; box-sizing: border-box; border-radius: var(--radius-full); border: 2px solid var(--ink-muted); background: var(--surface-100); }
.hk-layer.is-on .hk-layer-node { border-color: var(--accent); background: var(--accent); }
.hk-layer-btn { flex: 1; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--space-3); padding: 10px var(--space-3); text-align: left; font: inherit; color: var(--ink-muted); background: none; border: 1px solid transparent; border-radius: var(--radius-sm); cursor: pointer; }
.hk-layer-btn:hover { background: var(--surface-200); }
.hk-layer.is-on .hk-layer-btn { color: var(--ink); }
.hk-layer-idx { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; color: var(--ink-muted); }
.hk-layer-text { display: flex; flex-direction: column; gap: 2px; }
.hk-layer-name { font-size: 14px; line-height: 18px; font-weight: 500; }
.hk-layer-metric { font-size: 12px; line-height: 16px; color: var(--ink-muted); }
.hk-layer-state { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-muted); }
.hk-layer.is-on .hk-layer-state { color: var(--accent-text); }

/* Slides — a fixed 1920×1080 canvas, scaled by the frame */
.hk-slide-frame { position: relative; overflow: hidden; flex: none; }
.hk-slide { position: absolute; top: 0; left: 0; width: 1920px; height: 1080px; overflow: hidden; transform-origin: 0 0; background: var(--surface-100); color: var(--ink); font-family: var(--font-sans); }
[data-theme="paper"] .hk-slide, .hk-slide[data-theme="paper"] { background: var(--surface-000); }
.hk-slide[data-theme="carbon"] { background: var(--surface-100); }
.hk-slide-dots { position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(var(--dot) 1.6px, transparent 1.6px); background-size: var(--dot-grid) var(--dot-grid); }
.hk-slide-dots-scrim { -webkit-mask-image: linear-gradient(to right, black 0%, black 38%, transparent 66%); mask-image: linear-gradient(to right, black 0%, black 38%, transparent 66%); z-index: 3; }
.hk-slide-vignette { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(1400px 700px at 20% 15%, transparent 0%, var(--surface-100) 120%); opacity: 0.6; }
.hk-slide-content { position: absolute; inset: 0; z-index: 4; display: flex; flex-direction: column; justify-content: center; padding: 0 var(--slide-margin); }
.hk-slide-content.is-bottom { justify-content: flex-end; padding-bottom: 150px; }
.hk-slide .hk-connector { margin-bottom: 46px; }
.hk-slide-quote { margin: 0 0 40px; max-width: 1500px; font-family: var(--font-display); font-size: 56px; line-height: 72px; letter-spacing: -0.01em; }
.hk-slide-headline { margin: 0 0 22px; max-width: 1400px; font-family: var(--font-display); font-weight: 400; font-size: 64px; line-height: 73px; letter-spacing: -0.01em; }
.hk-slide-body { margin: 0 0 40px; max-width: 1100px; font-size: 24px; line-height: 37px; color: var(--ink-muted); }
.hk-slide-eyebrow { margin-bottom: 20px; font-family: var(--font-mono); font-size: 15px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-text); }
.hk-slide-caption { font-family: var(--font-mono); font-size: 18px; line-height: 24px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted); }
.hk-slide-page { position: absolute; z-index: 5; right: 64px; bottom: 56px; font-family: var(--font-mono); font-size: 14px; color: var(--ink-muted); }
.hk-slide-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; margin: 8px 0 48px; max-width: 1400px; }
.hk-slide-stat { border-left: 2px solid var(--accent); padding-left: 22px; }
.hk-slide-num { font-family: var(--font-display); font-size: 64px; line-height: 72px; }
.hk-slide-lbl { margin-top: 8px; font-family: var(--font-mono); font-size: 15px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted); }
.hk-slide-cols { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 80px; align-items: center; }
.hk-slide-diagram { padding: 40px; border: 1px solid var(--line-strong); border-radius: var(--radius-xl); background: var(--surface-000); }
.hk-slide-defdiag rect { fill: none; stroke-width: 3; }
.hk-slide-defdiag .d1 { stroke: var(--signal-04); opacity: 0.6; }
.hk-slide-defdiag .d2 { stroke: var(--signal-07); opacity: 0.8; }
.hk-slide-defdiag .d3 { stroke: var(--signal-11); }
.hk-slide-defdiag .d4 { fill: var(--accent); }
.hk-slide-img, .hk-slide-ph { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hk-slide-ph { display: flex; align-items: center; justify-content: center; background-color: var(--surface-300); background-image: repeating-linear-gradient(45deg, var(--line) 0 2px, transparent 2px 14px); }
.hk-slide-ph span { font-family: var(--font-mono); font-size: 15px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-muted); border: 1px dashed var(--line-control); padding: 10px 18px; border-radius: var(--radius-md); }
.hk-slide-scrim-left { position: absolute; inset: 0; z-index: 2; background: linear-gradient(to right, var(--surface-000) 0%, var(--surface-000) 30%, transparent 68%); opacity: 0.94; }
.hk-slide-scrim-bottom { position: absolute; inset: 0; z-index: 2; background: linear-gradient(to top, var(--surface-000) 0%, transparent 62%); opacity: 0.92; }
.hk-slide-dots-over { position: absolute; inset: 0; z-index: 3; pointer-events: none; background-image: radial-gradient(rgba(255,255,255,0.5) 1.6px, transparent 1.6px); background-size: var(--dot-grid) var(--dot-grid); mix-blend-mode: overlay; opacity: 0.9; }
.hk-slide-dots-over.is-soft { opacity: 0.5; }
.hk-slide-stack { position: relative; width: 640px; height: 520px; }
.hk-slide-stack-line { position: absolute; left: 50%; top: -8px; bottom: -8px; width: 2px; background: var(--accent); opacity: 0.5; }
.hk-slide-plane { position: absolute; left: 40px; width: 560px; height: 220px; overflow: hidden; border-radius: var(--radius-xl); border: 1px solid var(--line-strong); box-shadow: var(--shadow-plane); }
.hk-plane-1 { top: 0; opacity: 0.85; z-index: 1; }
.hk-plane-2 { top: 150px; opacity: 0.92; z-index: 2; }
.hk-plane-3 { top: 300px; z-index: 3; }
.hk-plane-tint { position: absolute; inset: 0; mix-blend-mode: overlay; }
.hk-plane-1 .hk-plane-tint { background: var(--signal-04); opacity: 0.28; }
.hk-plane-2 .hk-plane-tint { background: var(--signal-07); opacity: 0.24; }
.hk-plane-3 .hk-plane-tint { background: var(--signal-11); opacity: 0.18; }
.hk-plane-tag { position: absolute; left: 18px; bottom: 14px; z-index: 2; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: #eeece6; background: rgba(12,14,17,0.7); padding: 4px 10px; border-radius: var(--radius-sm); border: 1px solid rgba(255,255,255,0.18); }
.hk-slide-mosaic { justify-content: flex-start; padding-top: 120px; padding-bottom: 120px; gap: 40px; }
.hk-slide-mosaic-head .hk-slide-headline { margin-bottom: 0; }
.hk-slide-grid { flex: 1; display: grid; grid-template-columns: 1.3fr 1fr; grid-template-rows: 1fr 1fr; gap: 14px; }
.hk-slide-tile { position: relative; overflow: hidden; border-radius: var(--radius-lg); border: 1px solid var(--line); }
.hk-tile-1 { grid-row: 1 / 3; }
.hk-slide-card { position: absolute; z-index: 4; left: var(--slide-margin); bottom: 140px; width: 720px; box-sizing: border-box; padding: 48px; background: var(--surface-000); border: 1px solid var(--line-strong); border-radius: var(--radius-xl); }
.hk-slide-card .hk-connector { margin-bottom: 28px; }
.hk-slide-card-title { font-family: var(--font-display); font-size: 44px; line-height: 52px; }
.hk-slide-card-body { margin: 16px 0 0; font-size: 20px; line-height: 31px; color: var(--ink-muted); }