/* One identity, two appearances. Product captures keep their original colors. */
:root {
  color-scheme: light;
  --paper: #f3f3ec;
  --ink: #151715;
  --muted: #5d6258;
  --line: #cdd1c4;
  --surface: #fafaf5;
  --signal: #d0ef73;
  --signal-ink: #151715;
  --accent: #486216;
  --focus: #486216;
  --demo-bg: #e3e6dc;
  --demo-line: #c4cabb;
  --portal-bg: #151715;
  --portal-ink: #f3f3ec;
  --portal-muted: #b6bdab;
  --portal-line: #f3f3ec24;
  --footer-bg: #151715;
  --footer-ink: #f3f3ec;
  --footer-muted: #b6bdab;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #151715;
  --ink: #f3f3ec;
  --muted: #adb5a4;
  --line: #41483a;
  --surface: #1e221c;
  --accent: #d0ef73;
  --focus: #d0ef73;
  --demo-bg: #242722;
  --demo-line: #41483a;
  --portal-bg: #283020;
}
body { transition: background-color .25s, color .25s; }
::selection { background: var(--signal); color: var(--signal-ink); }
button:focus-visible, a:focus-visible { outline-color: var(--focus); }
.identity > span:first-child { color: var(--accent); }
.site-header { background: color-mix(in srgb, var(--paper) 94%, transparent); border-color: var(--line); }
.site-header nav { gap: 24px; }
.name-dot, .hero-asterisk { color: var(--accent); }
.hero-asterisk { background: var(--signal); color: var(--signal-ink); border-radius: 50%; width: 1.18em; height: 1.18em; display: grid; place-items: center; }
.portal { background: var(--portal-bg); color: var(--signal); }
.portal-heading > p > span { color: var(--portal-ink); }
.portal-note, .portal-coordinate { color: var(--portal-muted); }
.portal-orbit { border-color: var(--portal-line); }

.in-portal .site-header { background: color-mix(in srgb, var(--portal-bg) 94%, transparent); color: var(--portal-ink); border-color: var(--portal-line); }
.in-portal .identity-note, .in-portal sup { color: var(--portal-muted); }
.in-portal .identity > span:first-child { color: var(--signal); }
.in-portal .language-switch { border-color: var(--portal-line); }
.in-portal .language-switch button[aria-pressed="true"] { background: var(--signal); color: var(--signal-ink); }
.work-intro h2 > span, .about-symbol { color: var(--accent); }
.round-link:hover { background: var(--signal); color: var(--signal-ink); }
.filters button[aria-pressed="true"], .tour-steps button[aria-pressed="true"], .tour-steps button[aria-pressed="true"]:hover { background: var(--signal); color: var(--signal-ink); border-color: var(--signal-ink); }
:root[data-theme="dark"] .filters button[aria-pressed="true"], :root[data-theme="dark"] .tour-steps button[aria-pressed="true"] { border-color: var(--signal); }
.product-tour { --tour-bg: var(--demo-bg); --tour-ink: var(--muted); --tour-line: var(--demo-line); background: var(--surface); }
.tour-story { background: var(--surface); }
.zoom-hint { background: #151715; color: #f3f3ec; border: 1px solid #f3f3ec35; }
.tour-actions button:last-child { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.tour-actions button:hover:not(:disabled), .chapter-open:hover, .primary-button:hover { background: var(--signal); color: var(--signal-ink); border-color: var(--signal-ink); }
.marquee, .project-cursor { background: var(--signal); color: var(--signal-ink); }
.footer { background: var(--footer-bg); color: var(--footer-ink); }
.footer .section-label, .footer-bottom { color: var(--footer-muted); }
.footer-bottom { border-color: var(--portal-line); }
.footer-name > span { color: var(--signal); }
.footer a:focus-visible { outline-color: var(--signal); }
.motion-controls { background: color-mix(in srgb, var(--paper) 94%, transparent); color: var(--muted); border-top: 1px solid var(--line); mix-blend-mode: normal; }
.in-portal .motion-controls { background: color-mix(in srgb, var(--portal-bg) 94%, transparent); color: var(--portal-muted); border-color: var(--portal-line); }
.index-dialog { background: var(--paper); color: var(--ink); }
.index-top, .index-dialog > p { color: var(--muted); }
.index-dialog nav > a { border-color: var(--line); }
.index-dialog nav .mono, .index-dialog nav > a:hover { color: var(--accent); }
.index-dialog::backdrop, .project-dialog::backdrop, .install-dialog::backdrop, .image-dialog::backdrop { background: #10120fb8; }
.theme-toggle { width: 44px; height: 44px; display: grid; place-items: center; flex-shrink: 0; padding: 0; background: transparent; border: 1px solid var(--line); border-radius: 50%; color: var(--ink); transition: background .2s, color .2s; }
.theme-toggle svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.theme-toggle .theme-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .theme-sun { display: block; }
:root[data-theme="dark"] .theme-toggle .theme-moon { display: none; }
.theme-toggle:hover { background: var(--signal); color: var(--signal-ink); }
.in-portal .theme-toggle { color: var(--portal-ink); border-color: var(--portal-line); }
.in-portal .theme-toggle:hover { color: var(--signal-ink); }
.in-portal .theme-toggle:focus-visible { outline-color: var(--signal); }
.detail-bar > .theme-toggle { margin-left: auto; }
.detail-bar > .language-switch { margin-left: 0; }
@media(min-width:901px) {
  .hero-name-wrap { top: 48%; }
  .first-name { font-size: clamp(150px, min(25vw, 43svh), 440px); }
  .last-name { font-size: min(12.25vw, 20svh); }
  .hero-foot { bottom: 60px; }
}
@media(max-width:1100px) {
  .site-header nav { gap: 18px; }
  .identity-note { display: none; }
}
@media(max-width:600px) {
  .site-header nav { gap: 7px; }
  .site-header nav > a { display: none; }
  .site-header .index-trigger { min-width: 64px; gap: 5px; }
  .site-header .index-trigger > span[data-i18n] { display: inline; font-size: 9px; }
  .site-header .index-trigger > span:last-child { font-size: 20px; }
  .hero-asterisk { flex-shrink: 0; }
  .detail-bar { gap: 9px; }
  .detail-bar > .theme-toggle { width: 40px; height: 40px; }
}
@media(max-width:360px) {
  .site-header { gap: 8px; }
  .site-header nav { gap: 5px; }
  .site-header .index-trigger { min-width: 59px; }
  .detail-bar { gap: 7px; }
}
@media(prefers-reduced-motion:reduce) { body { transition: none; } }
.motion-reduced { transition: none; }