/* Portfolio experience layer: themes, restrained motion and pointer feedback. */
:root {
  --sans: Inter, "Segoe UI", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  --mono: "Cascadia Code", Consolas, "SFMono-Regular", monospace;
  --experience-bg: #090e18;
  --experience-panel: #111a29;
  --experience-raised: #162235;
  --experience-soft: #0d1624;
  --experience-line: #27364a;
  --experience-ink: #edf3fd;
  --experience-muted: #a1b1c6;
  --experience-faint: #8397b1;
  --experience-accent: #65e0c5;
  --experience-accent-rgb: 101, 224, 197;
  --experience-blue: #80b9ff;
  --experience-header: rgba(9, 14, 24, .88);
  --experience-grid: rgba(130, 157, 191, .075);
  --experience-shadow: 0 24px 70px rgba(0, 0, 0, .16);
  color-scheme: dark;
}
html[data-theme="light"] {
  --experience-bg: #f5f5f2;
  --experience-panel: #ffffff;
  --experience-raised: #edf3ee;
  --experience-soft: #f0f4ef;
  --experience-line: #d9e3dc;
  --experience-ink: #172d2b;
  --experience-muted: #52675f;
  --experience-faint: #657c72;
  --experience-accent: #0f766e;
  --experience-accent-rgb: 15, 118, 110;
  --experience-blue: #286bba;
  --experience-header: rgba(245, 245, 242, .9);
  --experience-grid: rgba(60, 100, 84, .065);
  --experience-shadow: 0 22px 60px rgba(32, 70, 52, .065);
  color-scheme: light;
}
:root {
  --paper: var(--experience-bg);
  --surface: var(--experience-panel);
  --blue: var(--experience-accent);
  --ink: var(--experience-ink);
  --muted: var(--experience-muted);
  --line: var(--experience-line);
}
body, .case-page, .devflow-lab-page {
  background: var(--experience-bg);
  color: var(--experience-ink);
}
body { isolation: isolate; }
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: linear-gradient(var(--experience-grid) 1px, transparent 1px), linear-gradient(90deg, var(--experience-grid) 1px, transparent 1px);
  background-size: 66px 66px;
  mask-image: linear-gradient(#000, transparent 78%);
}
::selection { background: rgba(var(--experience-accent-rgb), .28); color: var(--experience-ink); }
a { color: var(--experience-accent); }
:focus-visible { outline-color: var(--experience-accent); }
.topbar, .case-page .topbar {
  background: var(--experience-header);
  border-color: var(--experience-line);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  z-index: 30;
}
.navwrap { position: relative; gap: 18px; }
.brand { color: var(--experience-ink); }
.brand span, .home-page .brand span { color: var(--experience-faint); }
.topbar nav { margin-left: auto; }
.topbar nav a { color: var(--experience-muted); }
.topbar nav a:hover { color: var(--experience-ink); background: var(--experience-raised); }
.topbar nav a.current { color: var(--experience-accent); background: rgba(var(--experience-accent-rgb), .1); }
.progress-track { position: absolute; height: 2px; left: 0; right: 0; bottom: -1px; overflow: hidden; pointer-events: none; }
.progress-track i { display: block; width: 100%; height: 100%; transform: scaleX(var(--scroll-progress, 0)); transform-origin: left; background: linear-gradient(90deg, var(--experience-accent), var(--experience-blue)); box-shadow: 0 0 12px rgba(var(--experience-accent-rgb), .5); }

/* A compact, accessible native-button theme picker. */
.theme-control { position: relative; flex: none; }
.theme-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: auto; min-height: 36px; margin: 0; padding: 7px 10px; border: 1px solid var(--experience-line); border-radius: 8px; background: var(--experience-panel); color: var(--experience-muted); font: 12px/1.4 var(--sans); cursor: pointer; }
.theme-toggle:hover, .theme-toggle[aria-expanded="true"] { background: var(--experience-raised); border-color: var(--experience-accent); color: var(--experience-accent); }
.theme-toggle svg { display: block; width: 16px; height: 16px; flex: none; }
.theme-menu { position: absolute; top: calc(100% + 10px); right: 0; min-width: 146px; padding: 6px; border: 1px solid var(--experience-line); background: var(--experience-panel); border-radius: 10px; box-shadow: 0 14px 45px rgba(0, 0, 0, .2); z-index: 40; }
.theme-menu[hidden] { display: none; }
.theme-option { display: flex; align-items: center; justify-content: space-between; width: 100%; margin: 0; border: 0; border-radius: 6px; padding: 10px 11px; text-align: left; background: transparent; color: var(--experience-muted); font: 12px/1.5 var(--sans); cursor: pointer; }
.theme-option:hover { color: var(--experience-ink); background: var(--experience-raised); }
.theme-option[aria-checked="true"] { color: var(--experience-accent); background: rgba(var(--experience-accent-rgb), .09); }
.theme-option[aria-checked="true"]::after { content: "✓"; font-size: 13px; }

/* The hero remains readable while a slow orbital field adds depth. */
.hero, .case-page .hero { color: var(--experience-ink); background: transparent; }
.home-hero { position: relative; isolation: isolate; overflow: hidden; min-height: 410px; border-color: var(--experience-line); }
.hero-identity, .hero-about { position: relative; z-index: 1; }
.hero .eyebrow, .hero-identity .eyebrow, .case-page .hero .eyebrow { color: var(--experience-accent); }
.hero-identity h1 { font-weight: 650; }
.hero-identity h1 span { color: var(--experience-accent); background: linear-gradient(100deg, var(--experience-accent) 5%, var(--experience-blue) 85%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.hero-role, .hero-about > p, .hero p, .case-page .hero p { color: var(--experience-muted); }
.hero-about .hero-note, .home-page .hero-about .hero-note { color: var(--experience-faint); }
.hero-atmosphere { position: absolute; inset: -70px -70px -40px; pointer-events: none; z-index: 0; overflow: hidden; background: radial-gradient(ellipse at 15% 42%, rgba(var(--experience-accent-rgb), .11), transparent 47%), radial-gradient(ellipse at 85% 20%, rgba(86, 141, 255, .1), transparent 42%); animation: atmosphere-drift 20s ease-in-out infinite alternate; }
.orbit { position: absolute; width: 440px; height: 440px; border: 1px solid rgba(var(--experience-accent-rgb), .1); border-radius: 50%; top: -200px; right: 8%; transform: rotate(-24deg); }
.orbit-one { width: 680px; height: 680px; top: -410px; right: -15%; }
.orbit-two { border-style: dashed; opacity: .65; top: -260px; right: -5%; animation: orbit-turn 80s linear infinite; }
.orbit-three { width: 820px; height: 820px; top: -490px; right: -21%; opacity: .55; }
.orbit-node { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: var(--experience-accent); box-shadow: 0 0 16px rgba(var(--experience-accent-rgb), .6); animation: node-breathe 5s ease-in-out infinite; }
.node-one { left: 22%; top: 35%; }
.node-two { right: 17%; top: 68%; background: var(--experience-blue); animation-delay: -2s; }
.node-three { right: 42%; top: 17%; width: 3px; height: 3px; animation-delay: -3.5s; }
.hero-signal { margin-top: 26px; margin-bottom: 18px; padding: 15px 17px; border: 1px solid var(--experience-line); border-radius: 9px; background: rgba(var(--experience-accent-rgb), .025); }
.signal-label { display: block; color: var(--experience-faint); font: 9px/1.5 var(--mono); letter-spacing: 1.8px; margin-bottom: 12px; }
.signal-route { display: flex; align-items: center; gap: 9px; color: var(--experience-accent); font: 9px/1.5 var(--mono); letter-spacing: .25px; }
.signal-route span { flex: none; }
.signal-route i { display: block; height: 1px; background: var(--experience-line); flex: 1; min-width: 10px; position: relative; overflow: hidden; }
.signal-route i::after { content: ""; position: absolute; inset: 0; width: 42%; background: linear-gradient(90deg, transparent, var(--experience-accent)); transform: translateX(-120%); animation: signal-travel 3.2s linear infinite; }
.signal-route i:nth-of-type(2)::after { animation-delay: .55s; }
.signal-route i:nth-of-type(3)::after { animation-delay: 1.1s; }
.text-link { border-color: rgba(var(--experience-accent-rgb), .45); }
.text-link:hover { border-color: var(--experience-accent); }
.section-head p, .section-intro { color: var(--experience-muted); }
.section-number, .home-page .section-number, .project-number, .home-page .project-number { color: var(--experience-faint); }

/* Pointer light is applied above the existing illustrations, never over text at full intensity. */
.project-card { background: var(--experience-panel); border-color: var(--experience-line); box-shadow: var(--experience-shadow); border-radius: 12px; }
.interactive-card { position: relative; overflow: hidden; transform: perspective(1200px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)); transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease, background-color .3s ease; }
.interactive-card::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2; border-radius: inherit; background: radial-gradient(480px circle at var(--pointer-x, 50%) var(--pointer-y, 50%), rgba(var(--experience-accent-rgb), .085), transparent 65%); opacity: 0; transition: opacity .4s ease; }
.interactive-card::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 3; border: 1px solid rgba(var(--experience-accent-rgb), .34); border-radius: inherit; opacity: 0; transition: opacity .3s ease; }
.interactive-card[data-pointer-active="true"]::before, .interactive-card:focus-within::before { opacity: 1; }
.interactive-card:hover::after, .interactive-card:focus-within::after { opacity: 1; }
.interactive-card:hover { box-shadow: 0 25px 80px rgba(0, 0, 0, .18), 0 0 28px rgba(var(--experience-accent-rgb), .035); }
.project-card h3, .project-card h3.work-title { color: var(--experience-ink); }
.project-card p, .project-card p.work-summary, .project-card.tool-card > p { color: var(--experience-muted); }
.project-card ul.work-focus, .project-card.tool-card .module-points { color: var(--experience-muted); }
.project-card li::before { background: var(--experience-accent); }
.case-label, .case-link, .case-page a { color: var(--experience-accent); }
.case-link:hover { color: var(--experience-ink); }
.case-link > span { transition: transform .2s ease; }
.case-link:hover > span { transform: translate(3px, -3px); }
.tags span { background: var(--experience-raised); color: var(--experience-muted); }
.tool-card .case-link { border-color: var(--experience-line); }
.badge { color: #dabb83; background: #352e22; }
.badge.implemented { color: #8edfb9; background: #19352e; }
.badge.personal { color: #9fc9ef; background: #1c3048; }
.badge.idea { color: #e5c489; background: #342d23; }
html[data-theme="light"] .badge { color: #806022; background: #f7efdf; }
html[data-theme="light"] .badge.implemented { color: #2c7250; background: #e6f1e9; }
html[data-theme="light"] .badge.personal { color: #46697c; background: #e9eff1; }
html[data-theme="light"] .badge.idea { color: #8c6728; background: #f6efdf; }
.button, .case-page .button, .lab-primary { background: var(--experience-accent); color: #082820; border-color: var(--experience-accent); }
.button:hover, .lab-primary:hover { background: var(--experience-accent); border-color: var(--experience-accent); filter: brightness(1.08); }
html[data-theme="light"] .button, html[data-theme="light"] .lab-primary { color: #fff; }
.button.secondary { background: var(--experience-raised); color: var(--experience-accent); border-color: var(--experience-line); }
.work-visual { background: linear-gradient(130deg, rgba(var(--experience-accent-rgb), .07), transparent), var(--experience-soft); border-color: var(--experience-line); }
.visual-maas { background: linear-gradient(130deg, rgba(85, 145, 231, .085), transparent), var(--experience-soft); }
.visual-nocc { background: linear-gradient(130deg, rgba(155, 169, 96, .07), transparent), var(--experience-soft); }
.work-visual p.visual-eyebrow, .visual-eyebrow { color: var(--experience-faint); }
.work-visual h4, .visual-maas h4, .visual-nocc h4 { color: var(--experience-ink); }
.mini-node, .visual-maas .mini-node, .visual-nocc .mini-node { border-color: var(--experience-line); background: var(--experience-panel); color: var(--experience-muted); }
.mini-node.owned, .mini-node.active { color: var(--experience-accent); background: rgba(var(--experience-accent-rgb), .09); border-color: rgba(var(--experience-accent-rgb), .35); }
.visual-maas .mini-node.owned, .visual-maas .mini-node.active { color: var(--experience-blue); background: rgba(104, 164, 238, .09); border-color: rgba(104, 164, 238, .35); }
.visual-nocc .mini-node.owned, .visual-nocc .mini-node.active { color: var(--experience-accent); background: rgba(var(--experience-accent-rgb), .08); border-color: rgba(var(--experience-accent-rgb), .35); }
.mini-node.external { background: transparent; color: var(--experience-faint); }
.mini-arrow { color: var(--experience-accent); position: relative; }
.mini-arrow::after { content: ""; position: absolute; width: 3px; height: 3px; background: currentColor; border-radius: 50%; left: -4px; top: 50%; box-shadow: 0 0 6px currentColor; opacity: 0; animation: mini-flow 4s ease-in-out infinite; }
.mini-row:nth-child(2) .mini-arrow::after { animation-delay: 1.2s; }
.mini-row:nth-child(3) .mini-arrow::after { animation-delay: 2.4s; }
.project-card .mini-note, .visual-footer { color: var(--experience-faint); }
.visual-footer { border-color: var(--experience-line); }
.site-footer, .home-page .site-footer, .case-page .site-footer { color: var(--experience-faint); border-color: var(--experience-line); }

/* Project diagrams retain their project-specific accent. */
.case-page { --accent: var(--experience-accent); --accent-rgb: var(--experience-accent-rgb); --panel: var(--experience-panel); --border: var(--experience-line); }
html[data-theme="dark"] .case-page[data-project="devflow"] { --accent: #bda5fa; --accent-rgb: 189, 165, 250; }
html[data-theme="dark"] .case-page[data-project="maas"] { --accent: #80b9ff; --accent-rgb: 128, 185, 255; }
html[data-theme="dark"] .case-page[data-project="nocc"] { --accent: #74ddc2; --accent-rgb: 116, 221, 194; }
html[data-theme="light"] .case-page[data-project="devflow"] { --accent: #75548d; --accent-rgb: 117, 84, 141; }
html[data-theme="light"] .case-page[data-project="maas"] { --accent: #326e91; --accent-rgb: 50, 110, 145; }
html[data-theme="light"] .case-page[data-project="nocc"] { --accent: #47744c; --accent-rgb: 71, 116, 76; }
.case-page .article, .article { background: transparent; }
.case-page .hero .tags span, .casehero .tags span { background: var(--experience-raised); border-color: var(--experience-line); color: var(--experience-muted); }
.case-page .reading-nav { border-color: var(--experience-line); }
.case-page .article h2, .case-page .article h3, .case-page .article strong, .article h3 { color: var(--experience-ink); }
.case-page .article p, .case-page .article ul, .article p, .article ul { color: var(--experience-muted); }
.case-page .hero h1 em { color: var(--accent); }
.chapter, .connector, .module summary, .decision .kicker { color: var(--accent); }
.project-thesis, .diagram, .decision, .contract-wrap, .case-page .tool-demo { background: var(--experience-panel); border-color: var(--experience-line); box-shadow: 0 12px 36px rgba(0, 0, 0, .035); }
.project-thesis > div { border-color: var(--experience-line); }
.project-thesis small { color: var(--accent); }
.diagram { background-image: radial-gradient(ellipse at 50% 0%, rgba(var(--accent-rgb), .05), transparent 65%); }
.diagram-head strong, .module b, .path-node b, .branch b, .callout b { color: var(--experience-ink); }
.diagram-head span { color: var(--experience-faint); background: var(--experience-soft); border-color: var(--experience-line); }
.diagram figcaption, .layer-title, .module small, .route-head, .route .module small, .mini-label { color: var(--experience-faint); }
.diagram figcaption, .module details { border-color: var(--experience-line); }
.diagram figcaption code { color: var(--accent); }
.module, .module.external, .path-node, .branch { background: var(--experience-soft); border-color: var(--experience-line); }
.module.owned { background: rgba(var(--accent-rgb), .075); border-color: rgba(var(--accent-rgb), .35); }
.module:hover { border-color: rgba(var(--accent-rgb), .65); }
.module p, .module details p, .path-node p, .branch p { color: var(--experience-muted) !important; }
.module details { color: var(--experience-muted); }
.path-node small, .path-node:not(:last-child)::after, .route > .arrow { color: var(--accent); }
.branch.good { background: rgba(74, 170, 132, .065); border-top-color: #62ba98; }
.branch.warn { background: rgba(199, 157, 78, .065); border-top-color: #cda65e; }
.branch.info { background: rgba(91, 146, 206, .065); border-top-color: #6e9ed4; }
.callout { color: var(--experience-muted); border-color: var(--accent); background: rgba(var(--accent-rgb), .055); }
.decision dt { color: var(--experience-ink); }
.decision dd, .contract td { color: var(--experience-muted); }
.evidence { color: var(--experience-faint); border-color: var(--experience-line); }
.contract th { color: var(--experience-ink); background: var(--experience-raised); }
.contract td { background: var(--experience-panel); }
.contract tr:nth-child(even) td { background: var(--experience-soft); }
.contract td, .contract th { border-color: var(--experience-line); }
.contract td:first-child { color: var(--accent); }
.case-page .evolution { background: rgba(196, 157, 83, .045); border-color: rgba(196, 157, 83, .4); }
.evolution .status-label { color: #dfbd7d; background: #322a20; border-color: #594a32; }
.case-page .evolution > p, .case-page .proposal p { color: var(--experience-muted); }
.proposal { border-color: rgba(196, 157, 83, .22); }
.proposal > span { color: #ccae77; }
.case-page .proposal h3 { color: var(--experience-ink); }
.proposal .accept { color: #c7b593 !important; }
.next-diagram .path-node { background: rgba(196, 157, 83, .055); border-color: rgba(196, 157, 83, .4); }
.next-diagram .path-node small, .next-diagram .path-node::after { color: #d8b578; }
html[data-theme="light"] .evolution .status-label { color: #876527; background: #f4ebd4; border-color: #ddc997; }
html[data-theme="light"] .proposal .accept { color: #7e6b42 !important; }
html[data-theme="light"] .proposal > span, html[data-theme="light"] .next-diagram .path-node small, html[data-theme="light"] .next-diagram .path-node::after { color: #91703b; }
.case-page .demo-link, .demo-link { background: rgba(var(--experience-accent-rgb), .055); border-color: rgba(var(--experience-accent-rgb), .2); }
.case-page .demo-link strong { color: var(--experience-ink); }
.case-page .demo-link p, .case-page .scope, .case-page .source-note, .scope, .source-note { color: var(--experience-faint); }
.scope, .source-note, .case-page .scope, .case-page .source-note { border-color: var(--experience-line); }
.case-page .steps li { border-color: var(--experience-line); }
.case-page .steps li::before { color: var(--experience-accent); background: var(--experience-raised); }
.case-page .steps strong { color: var(--experience-ink); }
.case-page .tool-controls button { background: var(--experience-soft); border-color: var(--experience-line); color: var(--experience-muted); }
.case-page .tool-controls button[aria-pressed="true"] { background: rgba(var(--experience-accent-rgb), .1); border-color: rgba(var(--experience-accent-rgb), .45); color: var(--experience-accent); }
.case-page .article .tool-panels h3 { color: var(--experience-ink); }
.case-page .article .tool-panels p { color: var(--experience-muted); }
.tool-panels pre { color: var(--experience-accent); background: var(--experience-soft); border-color: var(--experience-line); }
.case-page .tool-next { color: var(--experience-accent) !important; border-color: var(--experience-line); }

/* The business lab uses the same surfaces while preserving clear simulation states. */
.lab-eyebrow, .lab-reset, .lab-text-button, .lab-bottom a { color: var(--experience-accent); }
.lab-lead, .lab-description, .lab-disclaimer, .lab-small, .lab-contract p, .lab-source, .lab-code-note p, .runner-timeline p, .runner-identities dd, .book-info span, .shelf-footer, .lab-bottom { color: var(--experience-muted); }
.lab-caption, .lab-simulation, .lab-pill, .lab-code-note > span, .lab-code-note code, .runner-identities dt, .runner-timeline code, .contract-top > span, .apply-digests span, .apply-digests code, .lab-file-label, .lab-controls > span, .lab-tabs button span { color: var(--experience-faint); }
.lab-simulation, .lab-disclaimer, .lab-tabs, .lab-card, .lab-pill, .shelf-metrics, .shelf-metrics > div, .shelf-book, .lab-contract, .lab-source, .runner-counters, .runner-counters > div + div, .lab-bottom { border-color: var(--experience-line); }
.lab-card { background: var(--experience-panel); }
.lab-card-head h3, .contract-top b, .runner-timeline b, .book-info strong, .lab-section-heading h2 { color: var(--experience-ink); }
.lab-tabs { background: var(--experience-soft); }
.lab-tabs button, .runner-scenarios button, .shelf-filters button, .book-toggle { color: var(--experience-muted); }
.lab-tabs button[aria-selected="true"] { color: var(--experience-accent); background: var(--experience-panel); border-color: var(--experience-line); }
.lab-tabs button[aria-selected="true"] span { color: var(--experience-accent); }
.lab-pill, .lab-code-note, .source-preview, .apply-digests { background: var(--experience-soft); border-color: var(--experience-line); }
.lab-code-note code, .source-preview, .runner-identities dd, .runner-timeline code, .apply-digests code { color: var(--experience-accent); }
.shelf-metrics strong, .runner-counters strong { color: var(--experience-accent); }
.shelf-metrics span, .runner-counters span { color: var(--experience-muted); }
.shelf-filters button, .runner-scenarios button { background: var(--experience-panel); border-color: var(--experience-line); }
.shelf-filters button[aria-pressed="true"], .runner-scenarios button[aria-pressed="true"] { color: var(--experience-accent); background: rgba(var(--experience-accent-rgb), .1); border-color: rgba(var(--experience-accent-rgb), .4); }
.book-toggle { background: var(--experience-raised); border-color: var(--experience-line); }
.book-toggle:hover { background: rgba(var(--experience-accent-rgb), .1); }
.book-spine, .shelf-book:nth-child(2) .book-spine, .shelf-book:nth-child(3) .book-spine { background: var(--experience-raised); border-color: var(--experience-accent); color: var(--experience-accent); }
.shelf-empty { color: var(--experience-faint); }
.lab-observation { background: rgba(var(--experience-accent-rgb), .07); border-color: rgba(var(--experience-accent-rgb), .25); border-left-color: var(--experience-accent); color: var(--experience-muted); }
.lab-observation[data-tone="warn"] { background: rgba(209, 163, 78, .075); border-color: rgba(209, 163, 78, .25); border-left-color: #d1a34e; color: #dcbd89; }
.lab-observation[data-tone="error"] { background: rgba(221, 118, 105, .075); border-color: rgba(221, 118, 105, .25); border-left-color: #dd7669; color: #e7aca4; }
.contract-top > span { background: var(--experience-raised); }
.contract-top > span[data-state="passed"] { color: #8edfb9; background: #19352e; }
.contract-top > span[data-state="failed"] { color: #e3b18e; background: #382a23; }
.lab-primary:disabled { background: var(--experience-raised); border-color: var(--experience-line); color: var(--experience-faint); filter: none; }
.runner-timeline li::before { border-color: var(--experience-line); }
.timeline-num { color: var(--experience-faint); background: var(--experience-soft); border-color: var(--experience-line); }
.runner-timeline li[data-active="true"] .timeline-num { color: var(--experience-accent); background: rgba(var(--experience-accent-rgb), .1); border-color: rgba(var(--experience-accent-rgb), .4); }
.candidate-preview { background: rgba(var(--experience-accent-rgb), .05); border-color: rgba(var(--experience-accent-rgb), .3); color: var(--experience-accent); }
.apply-digests > div + div { border-color: var(--experience-line); }
html[data-theme="light"] .lab-observation[data-tone="warn"] { color: #886927; }
html[data-theme="light"] .lab-observation[data-tone="error"] { color: #9a5746; }
html[data-theme="light"] .contract-top > span[data-state="passed"] { color: #2d7250; background: #e5f1e7; }
html[data-theme="light"] .contract-top > span[data-state="failed"] { color: #915b37; background: #f5e9dc; }
.demo-page { --blue: var(--experience-accent); --ink: var(--experience-ink); --muted: var(--experience-muted); --line: var(--experience-line); background: var(--experience-bg); color: var(--experience-ink); }
.demo-page .demo-intro p { color: var(--experience-muted); }
.demo-page .demo-intro a { color: var(--experience-accent); }
.demo-page .topbar { background: var(--experience-header); color: var(--experience-ink); border-color: var(--experience-line); }
.demo-page .brand { color: var(--experience-ink); }
.demo-page .topbar nav a { color: var(--experience-muted); }
.demo-page .topbar nav a:hover { color: var(--experience-ink); background: var(--experience-raised); }
.demo-page .topbar nav a.current { color: var(--experience-accent); background: rgba(var(--experience-accent-rgb), .1); }
.demo-page .site-footer { color: var(--experience-faint); border-color: var(--experience-line); }

/* The password gate is rendered by the server and shares the saved theme. */
.access-page { color: var(--experience-ink); background: var(--experience-bg); }
.access-page .access-nav { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 24px; }
.access-page .access-nav .back { margin-bottom: 0; }
.access-page .back, .access-page label, .access-page .subtitle, .access-page .foot { color: var(--experience-muted); }
.access-page .back:hover, .access-page .brand { color: var(--experience-accent); }
.access-page .brand { font: 600 11px/1.5 var(--mono); letter-spacing: 1.5px; }
.access-page .card { background: var(--experience-panel); border-color: var(--experience-line); box-shadow: var(--experience-shadow), 0 0 70px rgba(var(--experience-accent-rgb), .035); }
.access-page .card h1 { color: var(--experience-ink); }
.access-page .module { color: var(--experience-ink); border: 0; padding: 0; background: transparent; font-size: 15px; }
.access-page input { background: var(--experience-soft); color: var(--experience-ink); border-color: var(--experience-line); }
.access-page input::placeholder { color: var(--experience-faint); }
.access-page input:focus { border-color: var(--experience-accent); box-shadow: 0 0 0 3px rgba(var(--experience-accent-rgb), .1); }
.access-page form > button { background: var(--experience-accent); color: #082820; }
.access-page form > button:hover { filter: brightness(1.08); }
.access-page .message { color: #eb9b8e; }
html[data-theme="light"] .access-page form > button { color: #fff; }
html[data-theme="light"] .access-page .message { color: #a64e40; }

/* JS supplies the circular reveal; cancel the browser's default crossfade. */
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
::view-transition-old(root) { z-index: 1; }
::view-transition-new(root) { z-index: 2; }
html[data-theme-transition="feedback"] body::after { content: ""; position: fixed; z-index: 100; left: var(--theme-origin-x, 50%); top: var(--theme-origin-y, 72px); width: max(300vw, 300vh); aspect-ratio: 1; border-radius: 50%; pointer-events: none; background: radial-gradient(circle, rgba(var(--experience-accent-rgb), .14), transparent 68%); animation: theme-feedback .6s ease-out both; }
@keyframes theme-feedback { from { opacity: .9; transform: translate(-50%, -50%) scale(0); } to { opacity: 0; transform: translate(-50%, -50%) scale(1); } }

/* Reveal only starts after JS has installed an observer; content is visible by default. */
html[data-motion="ready"] [data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s cubic-bezier(.2, .65, .25, 1); }
html[data-motion="ready"] [data-reveal].is-visible { opacity: 1; transform: translateY(0); }
html[data-motion="ready"] .interactive-card[data-reveal].is-visible { transform: perspective(1200px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)); }
html[data-motion="ready"] .home-hero .hero-identity, html[data-motion="ready"] .home-hero .hero-about { animation: hero-arrive .85s cubic-bezier(.2, .65, .25, 1) both; }
html[data-motion="ready"] .home-hero .hero-about { animation-delay: .12s; }
body, .topbar, .case-page .topbar, .project-card, .work-visual, .mini-node, .diagram, .module, .path-node, .branch, .decision, .contract td, .contract th, .theme-toggle, .theme-menu, .lab-card, .lab-tabs, .lab-code-note, .source-preview, .tool-panels pre { transition-property: background-color, border-color, color, box-shadow; transition-duration: .28s; transition-timing-function: ease; }
.interactive-card { transition-property: transform, background-color, border-color, box-shadow; }
.module { transition-property: background-color, border-color, color; }
@keyframes atmosphere-drift { from { transform: translate3d(-7px, 0, 0); opacity: .8; } to { transform: translate3d(8px, 6px, 0); opacity: 1; } }
@keyframes orbit-turn { to { transform: rotate(336deg); } }
@keyframes node-breathe { 0%, 100% { opacity: .4; transform: scale(.8); } 50% { opacity: .9; transform: scale(1.15); } }
@keyframes signal-travel { 0% { transform: translateX(-120%); } 65%, 100% { transform: translateX(350%); } }
@keyframes mini-flow { 0%, 25% { opacity: 0; transform: translateX(0); } 40% { opacity: .8; } 65%, 100% { opacity: 0; transform: translateX(18px); } }
@keyframes hero-arrive { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } }

@media (max-width: 920px) {
  .navwrap { gap: 11px; }
  .topbar nav a { padding-left: 8px; padding-right: 8px; }
  .signal-route { gap: 6px; font-size: 8px; }
  .hero-signal { padding: 13px; }
}
@media (max-width: 720px) {
  .navwrap { flex-wrap: wrap; padding-top: 11px; padding-bottom: 10px; }
  .brand { margin-right: auto; }
  .theme-control { margin-left: 0; }
  .topbar nav { order: 3; flex-basis: 100%; margin: 0; gap: 3px; }
  .topbar nav a { padding: 4px 9px; font-size: 12px; }
  .theme-toggle { min-height: 33px; padding: 6px 9px; font-size: 11px; }
  .home-hero { min-height: 0; }
  .hero-atmosphere { inset: -90px -80px -30px; }
  .orbit { opacity: .45; }
  .hero-signal { max-width: 440px; margin-top: 22px; }
  .signal-route { font-size: 9px; gap: 8px; }
  .work-visual { border-left: 0; border-top: 1px solid var(--experience-line); }
}
@media (max-width: 390px) {
  .brand span { display: none; }
  .signal-route { font-size: 8px; gap: 5px; }
  .hero-signal { padding: 12px; }
}
@media (pointer: coarse) {
  .interactive-card, html[data-motion="ready"] .interactive-card[data-reveal].is-visible { transform: none; }
  .interactive-card::before { display: none; }
  .hero-atmosphere, .orbit, .orbit-node { animation: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  html[data-theme-transition="feedback"] body::after { display: none; }
  .hero-atmosphere, .orbit, .orbit-node, .signal-route i::after, .mini-arrow::after, html[data-motion="ready"] .home-hero .hero-identity, html[data-motion="ready"] .home-hero .hero-about { animation: none; }
  html[data-motion="ready"] [data-reveal], html[data-motion="ready"] [data-reveal].is-visible { opacity: 1; transform: none; transition: none; }
  .interactive-card, html[data-motion="ready"] .interactive-card[data-reveal].is-visible { transform: none; }
  body, .topbar, .case-page .topbar, .project-card, .work-visual, .mini-node, .diagram, .module, .path-node, .branch, .decision, .contract td, .contract th, .theme-toggle, .theme-menu, .lab-card, .lab-tabs, .lab-code-note, .source-preview, .tool-panels pre, .case-link > span { transition: none; }
  .interactive-card::before, .interactive-card::after { transition: none; }
  .mini-arrow::after { display: none; }
}