/* Titanium, glacier light, and a quiet foreground around the kinetic assembly. */
:root[data-scene=liquid] {
  --world-rgb: 3 9 20;
  --chapter-rgb: 8 17 29;
  --liquid-line: #a9efff24;
}
:root[data-scene=liquid][data-theme=night] {
  --fog: #030914;
  --ink: #eaf4fa;
  --muted: #a2b7c7;
  --accent: #a9efff;
  --line: #a9efff29;
  --panel: #0a1725;
}
:root[data-scene=liquid][data-theme=ice] {
  --world-rgb: 191 209 220;
  --chapter-rgb: 211 225 233;
  --liquid-line: #254a622b;
  --fog: #bfd1dc;
}
:root[data-scene=liquid] .world { background: rgb(var(--world-rgb)); }
:root[data-scene=liquid] .grain { opacity: .026; }
:root[data-scene=liquid] .atmosphere {
  background: linear-gradient(90deg, rgb(var(--world-rgb) / .2), transparent 44%), linear-gradient(0deg, rgb(var(--world-rgb) / .36), transparent 22%);
}
:root[data-scene=liquid] .site-header { padding: 28px 38px; }
:root[data-scene=liquid] .wordmark { font-size: 34px; letter-spacing: -3px; }
:root[data-scene=liquid] .wordmark-spark { display: none; }
:root[data-scene=liquid] .header-identity { font-family: var(--display); font-size: 10px; }
:root[data-scene=liquid] .site-header nav { gap: 30px; }
:root[data-scene=liquid] .site-header::before {
  content: ''; position: absolute; z-index: -1; inset: 0;
  background: linear-gradient(rgb(var(--world-rgb)) 0%, rgb(var(--world-rgb)) 62%, transparent);
  pointer-events: none;
}
:root[data-scene=liquid] .world-caption { position: absolute; top: 128px; left: 38px; font-family: var(--display); font-size: 13px; letter-spacing: -.01em; }
:root[data-scene=liquid] .coordinate { font: 9px var(--mono); opacity: .72; margin-top: 7px; }
:root[data-scene=liquid] .world-caption .crosshair { display: none; }
:root[data-scene=liquid] .world-caption { grid-template-columns: 1fr; }
:root[data-scene=liquid] .world-caption .coordinate { grid-column: 1; }
:root[data-scene=liquid] .home-chapter { min-height: 680px; }
:root[data-scene=liquid] .intro-note { left: 38px; right: auto; top: 218px; text-align: left; }
:root[data-scene=liquid] .intro-note .micro-label { color: var(--ink); font-family: var(--display); font-size: 12px; }
:root[data-scene=liquid] .intro-note p { color: var(--muted); font-size: 12px; line-height: 1.8; margin-top: 13px; }
:root[data-scene=liquid] .hero-name-block { left: 38px; bottom: 128px; max-width: 440px; }
:root[data-scene=liquid] .hero-name-block h1 { font-size: clamp(58px, 6.6vw, 98px); font-weight: 500; letter-spacing: -.075em; line-height: .85; }
:root[data-scene=liquid] .hero-name-block > .micro-label { font-size: 9px; margin-bottom: 18px; }
:root[data-scene=liquid] .hero-byline { font-family: var(--display); font-size: 15px; margin-top: 23px; }
:root[data-scene=liquid] .name-period { color: inherit; }
:root[data-scene=liquid] .hero-footnote { display: none; }
:root[data-scene=liquid] .sculpture-control { left: auto; right: 55px; top: auto; bottom: 125px; transform: none; align-items: flex-end; gap: 13px; }
:root[data-scene=liquid] .sculpture-control button {
  background: rgb(var(--world-rgb) / .45); border: 1px solid var(--line);
  padding: 13px 18px; min-height: 44px; font-size: 12px; border-radius: 2px;
}
:root[data-scene=liquid] .sculpture-control button:hover { background: var(--panel); border-color: var(--accent); }
:root[data-scene=liquid] .drag-hint { color: var(--muted); font-size: 11px; max-width: none; }
:root[data-scene=liquid] .scene-comparison { display: none; }
:root[data-scene=liquid] .scroll-invitation { left: 38px; bottom: 65px; font-size: 10px; }
:root[data-scene=liquid] .scroll-line { background: var(--accent); width: 62px; }
:root[data-scene=liquid] .chapter { padding-inline: 9vw; }
:root[data-scene=liquid] .home-chapter { padding: 0; }
:root[data-scene=liquid] .about-chapter { min-height: 118svh; align-items: flex-start; padding-block: 120px 140px; background: linear-gradient(90deg, rgb(var(--world-rgb) / .78), rgb(var(--world-rgb) / .3) 45%, transparent 68%); }
:root[data-scene=liquid] .chapter-copy { max-width: 530px; }
:root[data-scene=liquid] .chapter-label { color: var(--accent); font-size: 11px; }
:root[data-scene=liquid] h2 { font-size: clamp(50px, 6.1vw, 88px); }
:root[data-scene=liquid] .body-copy { max-width: 430px; font-size: 16px; line-height: 1.8; }
:root[data-scene=liquid] .work-chapter,
:root[data-scene=liquid] .journey-chapter {
  background: linear-gradient(90deg, transparent, rgb(var(--world-rgb) / .65) 10%, rgb(var(--world-rgb) / .65) 90%, transparent);
}
:root[data-scene=liquid] .work-topline { border-top: 1px solid var(--liquid-line); padding-top: 24px; }
:root[data-scene=liquid] .project-index { border-top: 1px solid var(--line); background: rgb(var(--world-rgb) / .28); }
:root[data-scene=liquid] .project-select { padding-block: 28px; transition: background .25s, padding .25s; }
:root[data-scene=liquid] .project-select:hover,
:root[data-scene=liquid] .project-select:focus-visible { background: rgb(var(--chapter-rgb) / .75); }
:root[data-scene=liquid] .project-name { font-size: clamp(27px, 3vw, 43px); }
:root[data-scene=liquid] .project-number { color: var(--accent); }
:root[data-scene=liquid] .project-arrow { color: var(--accent); }
:root[data-scene=liquid] .build-stories { background: rgb(var(--world-rgb) / .3); border-top-color: var(--line); }
:root[data-scene=liquid] .build-stories details[open] { background: rgb(var(--chapter-rgb) / .3); }
:root[data-scene=liquid] .build-stories summary { padding-inline: 15px; }
:root[data-scene=liquid] .build-stories summary:focus-visible { outline-offset: 2px; }
:root[data-scene=liquid] .story-notes dd { color: var(--muted); font-size: 16px; }
:root[data-scene=liquid] .story-notes dt { font-size: 11px; }
:root[data-scene=liquid] .project-discipline { font-size: 11px; }
:root[data-scene=liquid] #project-dialog-description { font-size: 16px; }
:root[data-scene=liquid] .project-dialog-header,
:root[data-scene=liquid] .project-dialog-copy > .micro-label,
:root[data-scene=liquid] #project-dialog-tags span,
:root[data-scene=liquid] .perspective-details,
:root[data-scene=liquid] .perspective-details strong,
:root[data-scene=liquid] .story-state,
:root[data-scene=liquid] .build-stories .experience-year { font-size: 11px; }
:root[data-scene=liquid] .project-dialog-header button,
:root[data-scene=liquid] .project-pagination button { font-size: 12px; min-height: 44px; }
:root[data-scene=liquid] .build-stories summary > span:nth-child(2) > span,
:root[data-scene=liquid] .story-footer .inline-link { font-size: 12px; }
:root[data-scene=liquid] .education-line { color: var(--muted); font-size: 12px; }
:root[data-scene=liquid] .contact-chapter { background: linear-gradient(90deg, rgb(var(--world-rgb) / .6), transparent 78%); padding-top: 160px; }
:root[data-scene=liquid] .contact-chapter h2 { font-size: clamp(62px, 7.6vw, 110px); max-width: 720px; }
:root[data-scene=liquid] .world-controls { bottom: 18px; right: 38px; gap: 19px; }
:root[data-scene=liquid] .world-controls button { min-height: 44px; font-size: 11px; }
:root[data-scene=liquid] .chapter-dots { right: 20px; }
:root[data-scene=liquid] .chapter-dots a { height: 30px; }
:root[data-scene=liquid] .chapter-dots a[aria-current] span { background: var(--accent); box-shadow: 0 0 10px #a9efff55; }
:root[data-scene=liquid] .world-controls::before {
  content: ''; position: fixed; bottom: 0; left: 0; right: 0; height: 72px; z-index: -1;
  background: linear-gradient(transparent, rgb(var(--world-rgb) / .9) 78%); pointer-events: none;
}
.sound-controls { position: fixed; left: 38px; bottom: 18px; z-index: 32; display: flex; gap: 22px; align-items: center; }
#sound-toggle { display: flex; align-items: center; gap: 11px; min-height: 44px; padding: 7px 0; font: 11px var(--mono); }
#sound-toggle:hover { color: var(--accent); }
#sound-toggle[aria-busy=true] { opacity: .55; }
.sound-bars { width: 19px; height: 17px; display: flex; align-items: center; gap: 2px; }
.sound-bars i { width: 2px; height: 3px; background: currentColor; transform-origin: center; }
body[data-sound=playing] #sound-toggle .sound-bars i { animation: sound-pulse .9s ease-in-out infinite alternate; height: 13px; }
body[data-sound=playing] #sound-toggle .sound-bars i:nth-child(2) { animation-delay: -.4s; height: 8px; }
body[data-sound=playing] #sound-toggle .sound-bars i:nth-child(3) { animation-delay: -.7s; height: 17px; }
body[data-sound=playing] #sound-toggle .sound-bars i:nth-child(4) { animation-delay: -.2s; height: 10px; }
body[data-sound=playing] #sound-toggle .sound-bars i:nth-child(5) { animation-delay: -.6s; height: 6px; }
.sound-volume { display: flex; align-items: center; gap: 10px; }
.sound-volume label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.sound-volume input { width: 88px; height: 44px; accent-color: var(--accent); cursor: pointer; }
.sound-volume input:focus-visible { outline: 1px solid var(--accent); outline-offset: 3px; }
.sound-credit { color: var(--muted); font: 11px var(--mono); }
:root[data-scene=liquid] .world-fallback { background: radial-gradient(ellipse at 60% 40%, #1e3d53, #091422 45%, #030914 90%); }
:root[data-scene=liquid][data-theme=ice] .world-fallback { background: radial-gradient(ellipse at 60% 40%, #e1edf3, #a8c2d2 70%); }
.kinetic-silhouette { display: none; }
:root[data-scene=liquid] .fallback-core {
  position: absolute; left: 64%; top: 45%; width: min(62vw, 850px);
  transform: translate(-50%, -50%); color: transparent; text-shadow: none;
  filter: drop-shadow(0 30px 30px #0003);
}
:root[data-scene=liquid] .fallback-orbital { display: none; }
:root[data-scene=liquid] .kinetic-silhouette { display: block; width: 100%; height: auto; }
:root[data-scene=liquid] .fallback-halo { display: none; }
:root[data-scene=liquid].scene-unavailable .home-chapter { background: none; }
:root[data-scene=liquid].scene-unavailable .sculpture-control { display: flex; }
:root[data-scene=liquid].scene-unavailable .sculpture-control button,
:root[data-scene=liquid].scene-unavailable .drag-hint { display: none; }
:root.scene-error .world canvas { display: none; }
@keyframes sound-pulse { from { transform: scaleY(.25); } to { transform: scaleY(1); } }
body[data-motion=paused] .sound-bars i { animation-play-state: paused !important; }
@media(min-width:1600px) {
  :root[data-scene=liquid] .hero-name-block { left: 4vw; bottom: 145px; }
  :root[data-scene=liquid] .hero-name-block h1 { font-size: 115px; }
}
@media(max-width:1000px) {
  :root[data-scene=liquid] .header-identity { display: none; }
  :root[data-scene=liquid] .intro-note { display: none; }
  :root[data-scene=liquid] .hero-name-block h1 { font-size: 70px; }
  :root[data-scene=liquid] .chapter { padding-inline: 7vw; }
  :root[data-scene=liquid] .about-chapter .chapter-copy { max-width: 420px; }
  :root[data-scene=liquid] .home-chapter { padding: 0; }
  :root[data-scene=liquid] .sculpture-control { right: 38px; }
  .sound-credit { display: none; }
}
@media(max-width:600px) {
  :root[data-scene=liquid] .site-header { padding: 23px 22px; }
  :root[data-scene=liquid] .header-identity { display: block; font-size: 8px; }
  :root[data-scene=liquid] .wordmark { font-size: 30px; }
  :root[data-scene=liquid] .world-caption { left: 22px; top: 104px; font-size: 11px; }
  :root[data-scene=liquid] .coordinate { font-size: 8px; }
  :root[data-scene=liquid] .home-chapter { min-height: 730px; }
  :root[data-scene=liquid] .hero-name-block { left: 22px; bottom: 151px; }
  :root[data-scene=liquid] .hero-name-block h1 { font-size: clamp(54px, 13.8vw, 76px); }
  :root[data-scene=liquid] .hero-name-block > .micro-label { font-size: 8px; margin-bottom: 13px; }
  :root[data-scene=liquid] .hero-byline { font-size: 15px; max-width: 310px; margin-top: 17px; }
  :root[data-scene=liquid] .sculpture-control { right: 22px; bottom: 331px; gap: 9px; }
  :root[data-scene=liquid] .sculpture-control button { padding: 10px 13px; font-size: 11px; }
  :root[data-scene=liquid] .drag-hint { font-size: 11px; }
  :root[data-scene=liquid] .scroll-invitation { left: 22px; bottom: 95px; font-size: 11px; gap: 13px; }
  :root[data-scene=liquid] .scroll-line { width: 32px; }
  :root[data-scene=liquid] .chapter { padding-inline: 25px; }
  :root[data-scene=liquid] .home-chapter { padding: 0; }
  :root[data-scene=liquid] .about-chapter { padding-top: 260px; min-height: 105svh; background: linear-gradient(180deg, rgb(var(--world-rgb) / .12), rgb(var(--world-rgb) / .62) 340px, rgb(var(--world-rgb) / .85) 480px); }
  :root[data-scene=liquid] h2 { font-size: clamp(42px, 11.4vw, 65px); }
  :root[data-scene=liquid] .work-chapter,
  :root[data-scene=liquid] .journey-chapter { background: rgb(var(--world-rgb) / .55); }
  :root[data-scene=liquid] .project-select { padding-block: 25px; }
  :root[data-scene=liquid] .project-name { font-size: 27px; }
  :root[data-scene=liquid] .project-discipline { font-size: 11px; }
  :root[data-scene=liquid] .project-number { font-size: 11px; }
  :root[data-scene=liquid] .build-stories summary { padding-inline: 0; }
  :root[data-scene=liquid] .contact-chapter { background: rgb(var(--world-rgb) / .5); padding-top: 125px; padding-bottom: 105px; }
  :root[data-scene=liquid] .contact-chapter h2 { font-size: clamp(54px, 14.5vw, 78px); }
  :root[data-scene=liquid] .world-controls { right: 20px; bottom: 12px; gap: 12px; }
  :root[data-scene=liquid] .world-controls button { font-size: 11px; gap: 5px; min-height: 44px; }
  :root[data-scene=liquid] .mobile-menu { min-height: 44px; }
  :root[data-scene=liquid] .world-controls .control-divider { display: none; }
  :root[data-scene=liquid] .chapter-dots { right: 5px; }
  .sound-controls { left: 22px; bottom: 12px; gap: 8px; }
  #sound-toggle { font-size: 11px; gap: 7px; min-height: 44px; }
  .sound-bars { transform: scale(.85); transform-origin: left; width: 15px; }
  .sound-volume { position: absolute; left: -8px; bottom: 43px; padding: 5px 10px; background: var(--panel); border: 1px solid var(--line); }
  :root[data-scene=liquid] .fallback-core { left: 51%; top: 35%; width: 110vw; max-width: 530px; }
}
@media(max-width:360px) {
  .sound-controls { bottom: 56px; }
  :root[data-scene=liquid] .world-controls::before { height: 112px; }
  :root[data-scene=liquid] .scroll-invitation { bottom: 114px; }
}
@media(max-height:700px) and (min-width:601px) {
  :root[data-scene=liquid] .intro-note { top: 190px; }
  :root[data-scene=liquid] .hero-name-block h1 { font-size: 64px; }
  :root[data-scene=liquid] .hero-name-block { bottom: 125px; }
}
@media(prefers-reduced-motion:reduce) {
  .sound-bars i { animation: none !important; }
}
@media print { .sound-controls { display: none; } }