/* LUCENT — glass, atmosphere & intentional motion */
:root {
  color-scheme: dark;
  --bg: #080e19;
  --bg-secondary: #0b1321;
  --ink: #eef3f2;
  --muted: #8996a9;
  --soft: #b3beca;
  --line: rgba(204, 231, 239, .11);
  --line-strong: rgba(204, 231, 239, .2);
  --glass: rgba(22, 35, 53, .57);
  --glass-strong: rgba(23, 38, 57, .76);
  --glass-glint: rgba(255, 255, 255, .082);
  --accent: #a4f0e5;
  --accent-rgb: 164,240,229;
  --accent-contrast: #10282c;
  --cream: #edece7;
  --light-spot: rgba(93, 155, 169, .22);
  --orb-highlight: #baf1dc;
  --button-bg: rgba(255,255,255,.045);
  --shadow: 0 30px 90px rgba(0,0,0,.2);
  --ease: cubic-bezier(.22, 1, .36, 1);
  --ease-soft: cubic-bezier(.34,.1,.2,1);
  --beat-duration: .46875s;
  --beat-ms: 468.75ms;
}
html[data-theme='light'] {
  color-scheme: light;
  --bg: #ecf2f1;
  --bg-secondary: #e4eeec;
  --ink: #1c3035;
  --muted: #66797c;
  --soft: #607178;
  --line: rgba(39, 81, 89, .125);
  --line-strong: rgba(39, 81, 89, .22);
  --glass: rgba(255,255,255,.51);
  --glass-strong: rgba(255,255,255,.75);
  --glass-glint: rgba(255,255,255,.75);
  --accent: #166b69;
  --accent-rgb: 36,126,120;
  --accent-contrast: #f4fdfa;
  --cream: #1c3035;
  --light-spot: rgba(78,159,171,.14);
  --orb-highlight: #cffbf0;
  --button-bg: rgba(14,77,81,.035);
  --shadow: 0 25px 80px rgba(41,97,100,.085);
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 100px; }
body { margin: 0; min-width: 320px; min-height: 100vh; color: var(--ink); background: var(--bg); font-family: 'DM Sans', Arial, sans-serif; -webkit-font-smoothing: antialiased; transition: background-color .7s var(--ease), color .5s var(--ease); overflow-x: hidden; text-transform: uppercase; }
button, input, select, textarea, a, p, span, h1, h2, h3, h4, h5, h6, label, output, small, em, strong { text-transform: uppercase; }
button, input, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; cursor: pointer; }
a { color: inherit; text-decoration: none; }
svg { display: block; }
button:focus-visible, a:focus-visible, input:focus-visible { outline: 2px solid var(--accent); outline-offset: 5px; }
::selection { background: rgba(var(--accent-rgb), .3); color: var(--ink); }
.skip-link { position: fixed; top: -100px; left: 20px; z-index: 99; padding: 12px 18px; background: var(--accent); color: var(--accent-contrast); border-radius: 8px; }
.skip-link:focus { top: 12px; }
.sr-only { position: absolute!important; width: 1px!important; height: 1px!important; padding: 0!important; margin: -1px!important; overflow: hidden!important; clip: rect(0,0,0,0)!important; white-space: nowrap!important; border: 0!important; }
.noise-overlay { position: fixed; pointer-events: none; inset: 0; z-index: 10; opacity: .11; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.81' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' opacity='.25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.ambient { position: absolute; z-index: 0; pointer-events: none; border-radius: 50%; filter: blur(95px); }
.ambient-one { top: -280px; left: -270px; width: min(650px, calc(100vw + 270px)); height: 650px; background: radial-gradient(circle,rgba(34,84,105,.24),transparent 65%); }
.ambient-two { top: 520px; right: 0; width: min(730px, 100vw); height: 730px; background: radial-gradient(circle,rgba(26,94,106,.16),transparent 68%); }
html[data-theme='light'] .ambient-one { opacity: .5; }

/* BPM-SYNCHRONIZED EDGE SPECTRUM
   Gradients stay static; only opacity and transform animate (no per-frame gradient painting).
   Everything inherits the rhythm engine's --beat-duration and stops on pause. */
.edge-spectrum {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  contain: paint;
  opacity: 1;
  transition: opacity .8s var(--ease);
}
.edge-corner {
  --edge-primary: 56, 198, 183;
  --edge-secondary: 91, 121, 218;
  position: absolute;
  width: clamp(290px, 44vw, 670px);
  aspect-ratio: 1;
  border-radius: 50%;
  opacity: .38;
  transform: scale(.96);
  background: radial-gradient(ellipse at center,
    rgba(var(--edge-primary), .44) 0%,
    rgba(var(--edge-primary), .21) 26%,
    rgba(var(--edge-primary), .055) 47%,
    transparent 72%);
}
.edge-corner::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  opacity: .2;
  background: radial-gradient(ellipse at center,
    rgba(var(--edge-secondary), .62) 0%,
    rgba(var(--edge-secondary), .24) 28%,
    transparent 69%);
}
.edge-corner--top-left { top: 0; left: 0; translate: -43% -45%; }
.edge-corner--top-right {
  top: 0; right: 0; translate: 43% -45%;
  --edge-primary: 62, 143, 225;
  --edge-secondary: 137, 110, 223;
}
.edge-corner--bottom-left {
  bottom: 0; left: 0; translate: -43% 45%;
  --edge-primary: 112, 106, 207;
  --edge-secondary: 61, 189, 214;
}
.edge-corner--bottom-right {
  bottom: 0; right: 0; translate: 43% 45%;
  --edge-primary: 49, 187, 174;
  --edge-secondary: 97, 128, 228;
}
.edge-rail {
  --rail-primary: 50, 202, 183;
  --rail-secondary: 92, 130, 233;
  position: absolute;
  top: 0;
  bottom: 0;
  width: clamp(45px, 7vw, 110px);
  opacity: .37;
  transform: scaleY(.97);
  background: linear-gradient(90deg,
    rgba(var(--rail-primary), .25) 0%,
    rgba(var(--rail-primary), .085) 29%,
    transparent 100%);
}
.edge-rail::before {
  content: '';
  position: absolute;
  top: 5%;
  bottom: 5%;
  left: 0;
  width: 2px;
  background: linear-gradient(180deg,
    transparent,
    rgba(var(--rail-primary), .82) 26%,
    rgba(var(--rail-secondary), .64) 52%,
    rgba(var(--rail-primary), .72) 77%,
    transparent);
  box-shadow: 0 0 18px rgba(var(--rail-primary), .25);
}
.edge-rail::after {
  content: '';
  position: absolute;
  inset: 0;
  opacity: .12;
  background: linear-gradient(90deg,
    rgba(var(--rail-secondary), .52),
    rgba(var(--rail-secondary), .12) 34%,
    transparent);
}
.edge-rail--left { left: 0; }
.edge-rail--right {
  right: 0;
  --rail-primary: 88, 144, 226;
  --rail-secondary: 77, 209, 189;
  scale: -1 1;
}
/* A coloured glow swells on every beat; a second hue rises and fades inside it. */
.is-playing .edge-corner {
  animation: edgeBreath var(--beat-duration) var(--ease-soft) infinite;
}
.is-playing .edge-corner::after {
  animation: edgeHue var(--beat-duration) var(--ease-soft) infinite;
}
.is-playing .edge-rail {
  animation: edgeRailBreath var(--beat-duration) var(--ease-soft) infinite;
}
.is-playing .edge-rail::after {
  animation: edgeHue var(--beat-duration) var(--ease-soft) infinite;
}
@keyframes edgeBreath {
  0%, 100% { opacity: .38; transform: scale(.96); }
  24% { opacity: .87; transform: scale(1.065); }
  64% { opacity: .47; transform: scale(1.012); }
}
@keyframes edgeHue {
  0%, 100% { opacity: .13; }
  32% { opacity: .76; }
  65% { opacity: .3; }
}
@keyframes edgeRailBreath {
  0%, 100% { opacity: .37; transform: scaleY(.97); }
  24% { opacity: .8; transform: scaleY(1.02); }
  64% { opacity: .48; transform: scaleY(.99); }
}
html[data-theme='light'] .edge-spectrum { opacity: .55; }
@media (max-width: 760px) {
  .edge-corner { width: clamp(220px, 72vw, 390px); }
  .edge-rail { width: 32px; }
  .edge-spectrum { opacity: .74; }
  html[data-theme='light'] .edge-spectrum { opacity: .38; }
}
@media (prefers-reduced-motion: reduce) {
  /* Keep only a soft, static edge tint, even while BPM playback is active. */
  .edge-corner, .edge-rail { opacity: .25!important; transform: none!important; }
  .edge-corner::after, .edge-rail::after { opacity: .15!important; }
}

.site-shell { position: relative; z-index: 1; width: min(100% - 112px, 1512px); margin-inline: auto; }
.top-bar { padding-top: 24px; display: flex; align-items: center; justify-content: flex-start; }
.portfolio-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 18px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--soft);
  background: var(--button-bg);
  border: 1px solid var(--line-strong);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transition: all .35s var(--ease);
  text-decoration: none;
}
.portfolio-back-btn svg {
  width: 15px;
  height: 15px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .3s var(--ease);
}
.portfolio-back-btn:hover {
  color: var(--accent);
  background: rgba(var(--accent-rgb), .1);
  border-color: rgba(var(--accent-rgb), .4);
  transform: translateX(-4px);
  box-shadow: 0 4px 20px rgba(var(--accent-rgb), .18);
}
.portfolio-back-btn:hover svg {
  transform: translateX(-3px);
}
.site-header { height: 95px; display: flex; align-items: center; justify-content: space-between; gap: 30px; border-bottom: 1px solid var(--line); }
.brand { display: inline-flex; align-items: center; gap: 11px; flex: 0 0 auto; }
.brand-mark { width: 39px; height: 39px; display: grid; place-items: center; color: var(--accent); }
.brand-mark svg { width: 37px; height: 37px; }
.brand-word, .footer-brand { font-family: 'Manrope', sans-serif; font-size: 26px; font-weight: 800; letter-spacing: -.03em; line-height: 1; }
.brand-dot, .footer-brand span { color: var(--accent); }
.nav-links { display: flex; gap: 40px; align-items: center; margin-left: auto; margin-right: auto; }
.nav-links a { font-size: 13px; font-weight: 700; color: var(--muted); letter-spacing: .08em; transition: color .3s ease; white-space: nowrap; }
.nav-links a:hover, .nav-links .nav-active { color: var(--ink); }
.header-actions { display: flex; align-items: center; gap: 24px; }
.system-badge { display: inline-flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 700; color: var(--soft); letter-spacing: .12em; white-space: nowrap; }
.system-dot, .status-light { display: inline-block; height: 6px; width: 6px; border-radius: 50%; background: #9cf2d8; box-shadow: 0 0 13px rgba(156,242,216,.65); }
.icon-button { display: grid; place-items: center; color: var(--ink); border: 1px solid var(--line-strong); border-radius: 50%; background: var(--button-bg); transition: transform .35s var(--ease), background-color .4s, border-color .4s; }
.icon-button:hover { transform: translateY(-2px); background: rgba(var(--accent-rgb),.11); border-color: rgba(var(--accent-rgb),.35); }
.theme-toggle { width: 43px; height: 43px; }
.icon-button svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.theme-toggle .icon-sun, html[data-theme='light'] .theme-toggle .icon-moon { display: none; }
html[data-theme='light'] .theme-toggle .icon-sun { display: block; }
/* HERO */
.hero { position: relative; display: grid; grid-template-columns: minmax(0,1.05fr) minmax(0,.95fr); align-items: center; min-height: 688px; padding: 42px 0 58px; }
.hero-copy { z-index: 3; max-width: 770px; padding: 10px 0 0 5px; }
.eyebrow { display: flex; align-items: center; gap: 13px; font-weight: 700; font-size: 12px; letter-spacing: .14em; color: var(--accent); }
.eyebrow-line { display: inline-block; height: 1px; width: 29px; background: var(--accent); }
.eyebrow-number { font-weight: 600; color: var(--muted); margin-left: 6px; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { font-family: 'Manrope', Arial, sans-serif; }
.hero h1 { font-size: clamp(54px, 5.5vw, 84px); line-height: 1.1; letter-spacing: -.02em; font-weight: 700; margin: 34px 0 22px; white-space: nowrap; }
.hero h1 span { color: var(--ink); }
.hero h1 em { color: var(--accent); font-weight: 600; font-style: normal; position: relative; }
.hero h1 em::after { content: ''; position: absolute; left: 1%; right: 0; bottom: -7px; height: 8px; border-radius: 50%; border-top: 1px solid rgba(var(--accent-rgb), .5); transform: rotate(-2deg); }
.hero-description { font-size: 15px; line-height: 1.85; color: var(--soft); max-width: 440px; font-weight: 500; letter-spacing: .03em; }
.hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 24px; margin-top: 35px; }
.primary-link { display: inline-flex; align-items: center; gap: 20px; padding: 16px 24px; border-radius: 100px; background: var(--accent); color: var(--accent-contrast); font-size: 13px; font-weight: 800; letter-spacing: .06em; white-space: nowrap; transition: transform .4s var(--ease), box-shadow .4s ease; }
.primary-link svg { width: 20px; height: 20px; stroke: currentColor; stroke-width: 1.7; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.primary-link:hover { transform: translateY(-3px); box-shadow: 0 10px 35px rgba(var(--accent-rgb), .24); }
.secondary-link { font-size: 13px; font-weight: 700; color: var(--soft); border-bottom: 1px solid var(--line-strong); padding-block: 10px; display: inline-flex; gap: 10px; align-items: center; letter-spacing: .06em; transition: color .3s ease; }
.secondary-link:hover { color: var(--accent); }
.secondary-link span { font-size: 17px; font-weight: 400; }
.hero-footer-detail { display: flex; align-items: center; gap: 13px; margin-top: 98px; font-size: 12px; letter-spacing: .14em; font-weight: 700; color: var(--muted); }
.tiny-sparkle { font-size: 17px; font-weight: 400; color: var(--accent); }
.detail-line { width: 28px; height: 1px; background: var(--line-strong); }
/* ORB ART */
.art-column { width: 100%; min-width: 0; align-self: center; }
.orb-scene { position: relative; isolation: isolate; width: min(100%, 640px); aspect-ratio: 1; margin-inline: auto; display: grid; place-items: center; --orb-size: 55%; }
.scene-aura { position: absolute; inset: 3%; border-radius: 50%; background: radial-gradient(circle,rgba(62,142,158,.22),rgba(36,80,114,.08) 35%,transparent 70%); filter: blur(17px); animation: sceneBreathe 13s var(--ease-soft) infinite alternate; }
.scene-grid { position: absolute; inset: 8%; border-radius: 50%; opacity: .24; background-image: linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px); background-size: 32px 32px; mask-image: radial-gradient(circle,black 12%,transparent 70%); }
.orbit { position: absolute; border-radius: 50%; border: 1px solid rgba(177,226,232,.17); }
.orbit-outer { width: 88%; height: 88%; border-style: dashed; border-color: rgba(175,226,239,.105); animation: orbitSpin 85s ease-in-out infinite alternate; }
.orbit-middle { width: 75%; height: 75%; border-color: rgba(159,222,226,.21); border-left-color: transparent; border-bottom-color: rgba(159,222,226,.055); transform: rotate(-38deg); animation: orbitSpin 52s ease-in-out infinite alternate-reverse; }
.orbit-inner { width: 65%; height: 65%; border-color: rgba(159,222,226,.09); border-top-color: rgba(159,222,226,.4); animation: orbitSpin 38s ease-in-out infinite alternate; }
.orbit-node { position: absolute; border-radius: 50%; width: 6px; height: 6px; background: var(--accent); box-shadow: 0 0 20px rgba(var(--accent-rgb), .65); }
.orbit-node-one { top: 14%; left: 14%; }
.orbit-node-two { bottom: 10%; right: 17%; width: 4px; height: 4px; }
.halo { position: absolute; border-radius: 50%; width: 65%; height: 65%; filter: blur(19px); pointer-events: none; }
.halo-one { background: conic-gradient(from 10deg,transparent,rgba(105,204,199,.27),transparent,rgba(72,126,197,.16),transparent); animation: orbitSpin 34s ease-in-out infinite alternate; }
.halo-two { width: 58%; height: 58%; background: conic-gradient(from 90deg,transparent,rgba(227,250,245,.12),transparent,rgba(28,203,168,.13),transparent); animation: orbitSpin 45s ease-in-out infinite alternate-reverse; }
.core-orb { position: relative; isolation: isolate; height: var(--orb-size); width: var(--orb-size); border-radius: 50%; overflow: hidden; background: radial-gradient(ellipse at 28% 25%,rgba(219,255,251,.8) 0%,rgba(181,231,233,.53) 7%,rgba(62,145,165,.8) 26%,rgba(29,83,113,.91) 49%,rgba(21,52,90,.98) 69%,#081e37 88%,#071726 100%); box-shadow: inset -20px -24px 60px rgba(0,0,0,.55),inset 8px 7px 28px rgba(232,255,255,.38),0 0 1px 1px rgba(183,235,235,.25),0 20px 100px rgba(15,93,111,.36); animation: orbFloat 9s var(--ease-soft) infinite alternate; }
.core-orb::before { content: ''; position: absolute; inset: -11%; z-index: 2; border-radius: 50%; background: conic-gradient(from 118deg,transparent 0 8%,rgba(108,237,214,.11) 12%,transparent 19%,rgba(255,255,255,.19) 24%,transparent 35%,rgba(107,171,255,.15) 44%,transparent 60%,rgba(185,249,232,.21) 75%,transparent 88%); filter: blur(8px); animation: orbitSpin 22s ease-in-out infinite alternate; }
.core-orb::after { content: ''; position: absolute; inset: 2%; z-index: 3; border-radius: 50%; box-shadow: inset 9px 5px 12px rgba(228,255,255,.1), inset -10px -8px 20px rgba(2,17,29,.2); }
.orb-sheen { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(ellipse at 35% 16%,rgba(255,255,255,.72),rgba(255,255,255,.1) 19%,transparent 43%),linear-gradient(132deg,rgba(255,255,255,.2),transparent 39%); opacity: .65; z-index: 5; }
.orb-mist { position: absolute; width: 115%; height: 95%; border-radius: 50%; left: -30%; top: 29%; transform: rotate(-32deg); background: linear-gradient(0deg,transparent 10%,rgba(56,222,191,.07) 30%,rgba(157,253,220,.42) 44%,rgba(106,218,202,.11) 52%,transparent 70%); filter: blur(14px); animation: mistShift 12s var(--ease-soft) infinite alternate; }
.orb-contour { position: absolute; z-index: 1; width: 120%; height: 63%; left: -11%; border: 1px solid rgba(196,255,243,.29); border-radius: 50%; transform: rotate(-26deg); box-shadow: 0 0 10px rgba(146,238,225,.11); }
.contour-one { top: 25%; }
.contour-two { top: 35%; transform: rotate(-25deg); border-color: rgba(217,251,240,.37); }
.contour-three { top: 44%; border-color: rgba(226,255,248,.13); }
.orb-innermost { position: absolute; width: 37%; height: 37%; left: 33%; top: 33%; border-radius: 50%; background: radial-gradient(circle at 35% 25%,rgba(227,255,248,.2),rgba(55,211,194,.08) 35%,rgba(12,37,63,.42) 85%); filter: blur(14px); }
.orb-pulse { position: absolute; z-index: -1; width: 55%; height: 55%; border: 1px solid rgba(var(--accent-rgb),.48); border-radius: 50%; opacity: 0; transform: scale(.96); }
.is-playing .orb-pulse-a { animation: orbPulse var(--beat-duration) var(--ease-soft) infinite; }
.is-playing .orb-pulse-b { animation: orbPulse var(--beat-duration) var(--ease-soft) infinite; animation-delay: calc(var(--beat-duration) * -.5); }
.is-playing .core-orb { animation: orbFloat 9s var(--ease-soft) infinite alternate, orbBeat var(--beat-duration) var(--ease-soft) infinite; }
.star { position: absolute; z-index: 5; color: var(--accent); font-size: 16px; font-weight: 400; }
.star-one { left: 8%; top: 30%; opacity: .7; }
.star-two { right: 8%; top: 27%; font-size: 11px; opacity: .5; }
.star-three { right: 12%; bottom: 18%; opacity: .5; }
.orb-coordinate, .scene-label { position: absolute; font-size: 12px; font-weight: 700; letter-spacing: .12em; white-space: nowrap; }
.orb-coordinate { color: var(--muted); }
.coord-top { top: 9%; right: 7%; }
.coord-symbol { color: var(--accent); font-size: 15px; vertical-align: -2px; }
.coord-bottom { bottom: 13%; left: 5%; font-size: 12px; letter-spacing: .1em; }
.scene-label { z-index: 6; display: inline-flex; align-items: center; gap: 10px; padding: 13px 16px; border: 1px solid rgba(202,244,243,.15); border-radius: 9px; background: rgba(17,36,52,.63); color: #e7f0f0; backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); box-shadow: 0 14px 40px rgba(0,0,0,.18); }
.scene-label-top { left: 0; top: 25%; transform: rotate(-5deg); }
.scene-label-bottom { right: 0; bottom: 23%; transform: rotate(3deg); }
.label-divider { color: rgba(231,240,240,.3); }
.mini-wave { height: 15px; display: flex; align-items: center; gap: 3px; }
.mini-wave i { width: 2px; height: 5px; border-radius: 5px; background: #a4f0e5; }
.mini-wave i:nth-child(2), .mini-wave i:nth-child(4) { height: 11px; }
.mini-wave i:nth-child(3) { height: 15px; }
.is-playing .mini-wave i { animation: waveBar var(--beat-duration) var(--ease-soft) infinite alternate; }
.is-playing .mini-wave i:nth-child(2) { animation-delay: calc(var(--beat-duration)*-.15); }
.is-playing .mini-wave i:nth-child(3) { animation-delay: calc(var(--beat-duration)*-.37); }
.is-playing .mini-wave i:nth-child(4) { animation-delay: calc(var(--beat-duration)*-.24); }
.art-caption { width: 90%; margin: -7px auto 0; display: flex; align-items: center; gap: 9px; color: var(--muted); font-size: 12px; font-weight: 700; letter-spacing: .14em; }
.art-caption-dot { width: 5px; height: 5px; border-radius: 50%; border: 1px solid var(--accent); }
.art-caption-right { margin-left: auto; }
/* CONTROLLER */
.tempo-section { padding-bottom: 112px; scroll-margin-top: 35px; }
.glass-panel { background: linear-gradient(145deg, var(--glass-glint), transparent 37%),var(--glass); border: 1px solid var(--line-strong); box-shadow: var(--shadow); backdrop-filter: blur(28px); -webkit-backdrop-filter: blur(28px); }
.tempo-panel { border-radius: 17px; display: grid; grid-template-columns: .84fr 1.2fr .84fr; min-height: 283px; overflow: hidden; }
.tempo-intro { padding: 39px 36px 35px; border-right: 1px solid var(--line); }
.card-overline { display: flex; align-items: center; gap: 10px; white-space: nowrap; color: var(--muted); font-size: 12px; font-weight: 700; letter-spacing: .12em; }
.small-square { display: inline-block; width: 6px; height: 6px; border: 1px solid var(--accent); transform: rotate(45deg); }
.faint-line { flex: 1; height: 1px; background: var(--line); margin-left: 4px; }
.tempo-intro h2 { font-size: clamp(26px, 2.5vw, 38px); line-height: 1.2; letter-spacing: -.02em; font-weight: 600; margin: 38px 0 12px; }
.tempo-intro h2 i { color: var(--accent); font-style: normal; }
.tempo-intro p { color: var(--muted); font-size: 15px; line-height: 1.85; margin: 0; letter-spacing: .03em; }
.tempo-control { padding: 38px 42px 30px; min-width: 0; border-right: 1px solid var(--line); }
.tempo-topline { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 12px; font-weight: 800; letter-spacing: .12em; color: var(--muted); }
#tempoDescriptor { color: var(--accent); }
.bpm-readout { display: flex; align-items: center; gap: 18px; margin: 7px 0 16px; }
#bpmValue { font-family: 'Manrope', Arial, sans-serif; font-weight: 600; font-size: clamp(66px, 6vw, 96px); letter-spacing: -.03em; line-height: 1.03; font-variant-numeric: tabular-nums; min-width: 146px; }
.bpm-unit { display: flex; flex-direction: column; gap: 6px; margin-top: 16px; color: var(--accent); font-size: 13px; font-weight: 800; letter-spacing: .08em; }
.bpm-unit span { color: var(--muted); font-size: 12px; font-weight: 600; letter-spacing: .08em; white-space: nowrap; }
.range-wrap { position: relative; }
#bpmSlider { width: 100%; height: 22px; display: block; appearance: none; -webkit-appearance: none; margin: 0; background: transparent; cursor: pointer; --percent: 55%; }
#bpmSlider::-webkit-slider-runnable-track { height: 3px; border-radius: 6px; background: linear-gradient(to right,var(--accent) var(--percent),var(--line-strong) var(--percent)); }
#bpmSlider::-moz-range-track { height: 3px; border-radius: 6px; background: var(--line-strong); }
#bpmSlider::-moz-range-progress { height: 3px; background: var(--accent); }
#bpmSlider::-webkit-slider-thumb { appearance: none; -webkit-appearance: none; width: 16px; height: 16px; margin-top: -6.5px; border-radius: 50%; border: 4px solid var(--accent); background: var(--bg); box-shadow: 0 0 0 5px rgba(var(--accent-rgb),.13); transition: box-shadow .25s ease; }
#bpmSlider::-moz-range-thumb { width: 9px; height: 9px; border: 4px solid var(--accent); border-radius: 50%; background: var(--bg); box-shadow: 0 0 0 5px rgba(var(--accent-rgb),.13); }
#bpmSlider:hover::-webkit-slider-thumb { box-shadow: 0 0 0 8px rgba(var(--accent-rgb),.17); }
.range-labels { display: flex; justify-content: space-between; font-size: 13px; font-weight: 700; color: var(--soft); letter-spacing: .05em; }
.range-labels small { margin-left: 5px; font-size: 12px; font-weight: 700; color: var(--muted); letter-spacing: .08em; }
.preset-row { display: flex; gap: 8px; margin-top: 22px; }
.preset { white-space: nowrap; color: var(--soft); padding: 8px 12px; border: 1px solid var(--line); border-radius: 6px; background: transparent; font-size: 13px; font-weight: 800; letter-spacing: .05em; transition: color .3s, background .3s, border-color .3s, transform .3s var(--ease); }
.preset span { font-weight: 600; font-size: 12px; margin-left: 4px; color: var(--muted); letter-spacing: .05em; }
.preset:hover { border-color: rgba(var(--accent-rgb),.35); transform: translateY(-2px); }
.preset.active { color: var(--accent); background: rgba(var(--accent-rgb),.085); border-color: rgba(var(--accent-rgb),.32); }
.preset.active span { color: var(--accent); opacity: .85; }
.tempo-playback { display: flex; flex-direction: column; justify-content: space-between; padding: 40px 33px 32px; }
.playback-top { display: flex; justify-content: space-between; gap: 12px; color: var(--muted); font-size: 12px; font-weight: 700; letter-spacing: .12em; }
.playback-index { opacity: .5; }
.playback-visual { height: 67px; position: relative; overflow: hidden; display: grid; place-items: center; }
.beat-track { position: absolute; top: 50%; left: 0; right: 0; height: 1px; background: var(--line); }
.sound-bars { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 5px; height: 54px; width: 100%; max-width: 240px; }
.sound-bars span { flex: 1; display: block; height: 15%; min-width: 2px; border-radius: 6px; background: linear-gradient(180deg,rgba(var(--accent-rgb),.85),rgba(var(--accent-rgb),.18)); transform-origin: center; opacity: .55; transition: opacity .3s; }
.sound-bars span:nth-child(7n+1) { height: 24%; }
.sound-bars span:nth-child(7n+2) { height: 51%; }
.sound-bars span:nth-child(7n+3) { height: 79%; }
.sound-bars span:nth-child(7n+4) { height: 39%; }
.sound-bars span:nth-child(7n+5) { height: 68%; }
.sound-bars span:nth-child(7n+6) { height: 31%; }
.is-playing .sound-bars span { opacity: .98; animation: soundBar var(--beat-duration) var(--ease-soft) infinite alternate; }
.is-playing .sound-bars span:nth-child(3n) { animation-delay: calc(var(--beat-duration)*-.25); }
.is-playing .sound-bars span:nth-child(4n) { animation-delay: calc(var(--beat-duration)*-.48); }
.is-playing .sound-bars span:nth-child(5n) { animation-delay: calc(var(--beat-duration)*-.15); }
.playback-buttons { display: flex; align-items: center; gap: 13px; }
.play-button { width: 55px; height: 55px; border: 0; border-radius: 50%; background: var(--accent); color: var(--accent-contrast); display: grid; flex: 0 0 auto; place-items: center; transition: transform .4s var(--ease), box-shadow .4s ease; }
.play-button:hover { transform: scale(1.07); box-shadow: 0 0 0 8px rgba(var(--accent-rgb),.1); }
.play-button svg { width: 20px; height: 20px; fill: currentColor; }
.play-icon { margin-left: 2px; }
.pause-icon { display: none; }
.is-playing .play-icon { display: none; }
.is-playing .pause-icon { display: block; }
.playback-text { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.playback-text > span { font-size: 13px; font-weight: 700; letter-spacing: .04em; white-space: nowrap; }
.playback-text small { color: var(--muted); font-size: 12px; letter-spacing: .04em; white-space: nowrap; }
.sound-toggle { width: 36px; height: 36px; margin-left: auto; flex: 0 0 auto; }
.sound-toggle svg { width: 17px; height: 17px; }
.sound-toggle .volume-on, .sound-enabled .volume-off { display: none; }
.sound-enabled .volume-on { display: block; }
.panel-footnotes { display: flex; align-items: center; justify-content: space-between; gap: 15px; color: var(--muted); font-size: 12px; font-weight: 700; letter-spacing: .12em; padding-top: 20px; }
.footnote-star { color: var(--accent); font-size: 16px; vertical-align: -2px; margin-right: 5px; }
.footnote-divider { color: var(--accent); margin: 0 9px; }
/* LOWER SECTIONS */
.details-section { padding: 0 0 138px; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 45px; margin-bottom: 40px; }
.section-kicker, .philosophy-label { font-size: 12px; font-weight: 800; letter-spacing: .14em; color: var(--accent); }
.section-heading h2 { font-size: clamp(38px, 4vw, 60px); line-height: 1.18; font-weight: 600; letter-spacing: -.02em; margin: 24px 0 0; }
.section-heading h2 em, .philosophy-inner h2 em { color: var(--accent); font-style: normal; font-weight: 500; }
.section-heading > p { max-width: 320px; font-size: 15px; line-height: 1.85; color: var(--soft); margin: 0 8px 8px 0; letter-spacing: .03em; }
.feature-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; }
.feature-card { border-radius: 14px; padding: 27px 30px 33px; min-width: 0; transition: transform .5s var(--ease), border-color .5s ease; }
.feature-card:hover { transform: translateY(-5px); border-color: rgba(var(--accent-rgb),.35); }
.feature-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; color: var(--muted); font-size: 12px; font-weight: 800; letter-spacing: .12em; }
.feature-corner { color: var(--accent); font-size: 17px; font-weight: 400; }
.feature-animation { position: relative; width: 100%; height: 180px; margin: 10px 0 15px; display: grid; place-items: center; overflow: hidden; }
.feature-card h3 { margin: 0 0 12px; font-size: 22px; letter-spacing: -.02em; font-weight: 600; }
.feature-card p { color: var(--muted); font-size: 15px; line-height: 1.85; max-width: 310px; margin: 0; letter-spacing: .03em; }
.rhythm-line { width: 85%; height: 1px; background: linear-gradient(90deg,transparent,var(--line-strong),transparent); }
.rhythm-dot { position: absolute; top: calc(50% - 3px); width: 6px; height: 6px; border-radius: 50%; background: var(--accent); opacity: .5; }
.rhythm-dot.dot-1 { left: 10%; }
.rhythm-dot.dot-2 { left: 30%; }
.rhythm-dot.dot-3 { left: 50%; }
.rhythm-dot.dot-4 { left: 70%; }
.rhythm-dot.dot-5 { left: 90%; }
.rhythm-circle { position: absolute; height: 85px; width: 85px; border-radius: 50%; border: 1px solid rgba(var(--accent-rgb), .4); box-shadow: 0 0 0 20px rgba(var(--accent-rgb),.055),0 0 0 45px rgba(var(--accent-rgb),.025),inset 0 0 25px rgba(var(--accent-rgb),.07); background: radial-gradient(circle,rgba(var(--accent-rgb),.13),transparent 70%); animation: orbFloat 7s var(--ease-soft) infinite alternate; }
.is-playing .rhythm-circle { animation: orbBeat var(--beat-duration) var(--ease-soft) infinite; }
.is-playing .rhythm-dot { animation: tinyPulse var(--beat-duration) var(--ease-soft) infinite; }
.is-playing .rhythm-dot:nth-child(3) { animation-delay: calc(var(--beat-duration)*-.25); }
.is-playing .rhythm-dot:nth-child(5) { animation-delay: calc(var(--beat-duration)*-.5); }
.feature-animation-sculpture { perspective: 500px; }
.sculpture-ring { position: absolute; width: 135px; height: 135px; border: 1px solid rgba(var(--accent-rgb), .38); border-radius: 50%; box-shadow: 0 0 14px rgba(var(--accent-rgb), .08); }
.sculpture-ring-one { transform: rotateX(64deg) rotateZ(24deg); animation: sculptureRotateA 17s ease-in-out infinite alternate; }
.sculpture-ring-two { transform: rotateY(65deg) rotateZ(24deg); animation: sculptureRotateB 19s ease-in-out infinite alternate; }
.sculpture-ring-three { transform: rotate(52deg) rotateX(40deg); animation: sculptureRotateC 22s ease-in-out infinite alternate; }
.sculpture-core { position: absolute; height: 31px; width: 31px; border-radius: 50%; background: radial-gradient(circle at 28% 25%,#d8fff6,#5cb0ad 43%,#23475f); box-shadow: 0 0 30px rgba(var(--accent-rgb),.32); }
.dot-matrix { display: grid; grid-template-columns: repeat(12,1fr); gap: 13px; width: 210px; opacity: .9; }
.dot-matrix i { height: 4px; width: 4px; border-radius: 50%; background: var(--accent); opacity: var(--dot-opacity,.2); transform: scale(var(--dot-scale,1)); }
.dots-spotlight { position: absolute; width: 130px; height: 130px; border-radius: 50%; background: radial-gradient(circle,rgba(var(--accent-rgb),.18),transparent 67%); filter: blur(8px); animation: dotsMove 11s var(--ease-soft) infinite alternate; }
.philosophy-section { position: relative; min-height: 452px; border-radius: 16px; overflow: hidden; padding: 38px 43px 45px; margin-bottom: 72px; isolation: isolate; }
.philosophy-section::before { content: ''; z-index: -1; position: absolute; inset: 0; background: radial-gradient(ellipse at 76% 41%,rgba(var(--accent-rgb),.13),transparent 54%); }
.philosophy-inner { position: relative; z-index: 2; margin: 38px auto 0; text-align: center; max-width: 800px; }
.philosophy-glyph { color: var(--accent); font-size: 34px; margin-bottom: 9px; }
.philosophy-inner h2 { font-size: clamp(36px, 4.2vw, 60px); font-weight: 600; letter-spacing: -.02em; line-height: 1.22; margin-bottom: 15px; }
.philosophy-inner p { color: var(--soft); font-size: 15px; line-height: 1.85; margin-bottom: 29px; letter-spacing: .03em; }
.back-top-link { display: inline-flex; align-items: center; gap: 12px; color: var(--accent); font-size: 13px; font-weight: 800; letter-spacing: .1em; border-bottom: 1px solid rgba(var(--accent-rgb),.4); padding-bottom: 10px; transition: gap .3s var(--ease); }
.back-top-link:hover { gap: 20px; }
.back-top-link span { font-size: 16px; font-weight: 400; }
.philosophy-orb { position: absolute; width: 450px; height: 450px; border-radius: 50%; top: -280px; right: -120px; border: 1px solid rgba(var(--accent-rgb),.15); box-shadow: 0 0 0 75px rgba(var(--accent-rgb),.02),0 0 0 145px rgba(var(--accent-rgb),.012); pointer-events: none; }
.site-footer { border-top: 1px solid var(--line); padding: 29px 0 37px; display: flex; align-items: center; justify-content: space-between; gap: 25px; color: var(--muted); font-size: 12px; font-weight: 700; letter-spacing: .12em; }
.footer-brand { font-size: 24px; color: var(--ink); }
/* ease-based atmospheric and tempo motion */
@keyframes sceneBreathe { from { transform: scale(.95); opacity: .6; } to { transform: scale(1.07); opacity: 1; } }
@keyframes orbitSpin { to { transform: rotate(360deg); } }
@keyframes orbFloat { from { translate: 0 -7px; } to { translate: 0 9px; } }
@keyframes mistShift { from { transform: translate(-9px,2px) rotate(-32deg); opacity: .55; } to { transform: translate(13px,-6px) rotate(-22deg); opacity: .95; } }
@keyframes orbPulse { 0% { transform: scale(.94); opacity: .72; } 100% { transform: scale(1.35); opacity: 0; } }
@keyframes orbBeat { 0%, 100% { scale: 1; } 22% { scale: 1.042; } 62% { scale: 1.008; } }
@keyframes waveBar { from { transform: scaleY(.45); } to { transform: scaleY(1.2); } }
@keyframes soundBar { 0%,100% { transform: scaleY(.45); } 30% { transform: scaleY(1.2); } 68% { transform: scaleY(.7); } }
@keyframes tinyPulse { 0%,100% { transform: scale(.9); opacity: .4; } 30% { transform: scale(2); opacity: .9; } }
@keyframes sculptureRotateA { to { transform: rotateX(70deg) rotateZ(135deg); } }
@keyframes sculptureRotateB { to { transform: rotateY(70deg) rotateZ(-115deg); } }
@keyframes sculptureRotateC { to { transform: rotate(-86deg) rotateX(50deg); } }
@keyframes dotsMove { from { transform: translate(-60px, -20px); } to { transform: translate(60px, 20px); } }
@keyframes riseIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: no-preference) {
  .hero-copy > .eyebrow { animation: riseIn .8s .08s var(--ease) both; }
  .hero h1 { animation: riseIn 1s .17s var(--ease) both; }
  .hero-description { animation: riseIn 1s .32s var(--ease) both; }
  .hero-actions { animation: riseIn 1s .48s var(--ease) both; }
  .art-column { animation: riseIn 1.3s .22s var(--ease) both; }
  .tempo-panel { animation: riseIn 1s .65s var(--ease) both; }
}
/* Responsive refinements */
@media (min-width: 1600px) { .hero h1 { font-size: 91px; } .hero { min-height: 740px; } }
@media (max-width: 1230px) {
  .site-shell { width: min(100% - 64px,1512px); }
  .hero { min-height: 630px; }
  .hero h1 { font-size: clamp(52px,5.9vw,76px); }
  .hero-footer-detail { margin-top: 67px; }
  .scene-label { font-size: 12px; padding: 11px 14px; }
  .tempo-panel { grid-template-columns: .8fr 1.2fr .85fr; }
  .tempo-intro { padding-inline: 27px; }
  .tempo-control { padding-inline: 28px; }
  .tempo-playback { padding-inline: 23px; }
  .preset { padding-inline: 10px; }
}
@media (max-width: 1020px) {
  .nav-links { gap: 24px; }
  .system-badge { display: none; }
  .hero { min-height: 560px; }
  .hero h1 { font-size: clamp(49px,6.1vw,66px); }
  .hero-description { font-size: 14px; max-width: 355px; }
  .hero-actions { gap: 16px; }
  .secondary-link { font-size: 13px; }
  .tempo-panel { grid-template-columns: 1fr 1.25fr; }
  .tempo-intro { border-bottom: 1px solid var(--line); }
  .tempo-control { border-right: 0; border-bottom: 1px solid var(--line); }
  .tempo-playback { grid-column: 1 / -1; flex-direction: row; align-items: center; min-height: 122px; gap: 22px; }
  .playback-top { align-self: flex-start; padding-top: 13px; }
  .playback-index { display: none; }
  .playback-visual { flex: 1; max-width: 260px; margin-left: auto; }
  .playback-buttons { min-width: 260px; }
  .feature-card { padding-inline: 22px; }
}
@media (max-width: 760px) {
  .site-shell { width: min(100% - 36px,560px); }
  .top-bar { padding-top: 16px; }
  .portfolio-back-btn { font-size: 11px; padding: 7px 14px; gap: 8px; }
  .site-header { height: 79px; }
  .brand-word { font-size: 25px; }
  .nav-links { display: none; }
  .hero { grid-template-columns: 1fr; padding: 70px 0 36px; min-height: auto; }
  .hero-copy { padding: 0 4px; }
  .hero h1 { font-size: clamp(52px,9.5vw,77px); margin-block: 24px 19px; }
  .hero-description { max-width: 450px; font-size: 14px; line-height: 1.85; }
  .hero-actions { margin-top: 28px; }
  .hero-footer-detail { margin-top: 48px; }
  .art-column { margin-top: 25px; }
  .orb-scene { width: min(100%,550px); }
  .art-caption { margin-top: -14px; }
  .tempo-panel { grid-template-columns: minmax(0,1fr); }
  .tempo-intro { padding: 29px 30px 23px; }
  .tempo-intro h2 { margin: 25px 0 8px; font-size: 34px; }
  .tempo-intro p br { display: none; }
  .tempo-control { padding: 29px 30px; }
  #bpmValue { font-size: 87px; }
  .tempo-playback { grid-column: auto; min-height: 124px; }
  .playback-top { display: none; }
  .playback-visual { max-width: 170px; margin: 0; }
  .playback-buttons { min-width: 0; flex: 1; }
  .panel-footnotes { font-size: 11px; }
  .panel-footnotes > span:last-child { display: none; }
  .tempo-section { padding-bottom: 93px; }
  .section-heading { flex-direction: column; align-items: start; gap: 21px; }
  .section-heading > p { max-width: 460px; }
  .feature-grid { grid-template-columns: 1fr; }
  .feature-card { padding: 27px 29px; }
  .feature-animation { height: 155px; }
  .details-section { padding-bottom: 90px; }
  .philosophy-section { min-height: 420px; padding: 26px 22px 35px; }
  .philosophy-inner { margin-top: 43px; }
  .philosophy-inner h2 { font-size: clamp(34px,6vw,51px); }
  .site-footer { flex-wrap: wrap; gap: 14px; }
  .site-footer span:nth-child(2) { display: none; }
}
@media (max-width: 470px) {
  .site-shell { width: calc(100% - 30px); }
  .site-header { height: 72px; }
  .brand-mark { width: 33px; height: 33px; }
  .brand-mark svg { width: 33px; height: 33px; }
  .brand-word { font-size: 23px; }
  .theme-toggle { width: 38px; height: 38px; }
  .hero { padding-top: 54px; }
  .eyebrow { font-size: 11px; gap: 8px; letter-spacing: .12em; }
  .eyebrow-line { width: 18px; }
  .hero h1 { font-size: clamp(43px,10.4vw,53px); }
  .hero h1 em::after { bottom: -5px; }
  .hero-description { font-size: 14px; }
  .hero-actions { align-items: start; flex-direction: column; gap: 12px; }
  .primary-link { padding: 15px 17px 15px 21px; }
  .hero-footer-detail { font-size: 11px; margin-top: 38px; letter-spacing: .12em; }
  .orb-scene { width: calc(100% + 10px); margin-left: -5px; }
  .scene-label { padding: 10px 12px; font-size: 11px; }
  .scene-label-top { left: 1%; }
  .scene-label-bottom { right: 0; }
  .art-caption { font-size: 11px; letter-spacing: .1em; }
  .art-caption-right { font-size: 11px; }
  .tempo-intro, .tempo-control { padding-inline: 22px; }
  .tempo-intro h2 { font-size: 31px; }
  .bpm-readout { gap: 12px; }
  #bpmValue { font-size: 79px; min-width: 123px; }
  .bpm-unit { font-size: 13px; }
  .preset-row { gap: 6px; flex-wrap: wrap; }
  .preset { padding: 8px 10px; font-size: 12px; }
  .preset span { font-size: 11px; margin-left: 2px; }
  .tempo-playback { gap: 14px; padding: 24px 20px; }
  .playback-visual { width: 78px; flex: 0 0 78px; }
  .play-button { width: 49px; height: 49px; }
  .playback-buttons { gap: 10px; }
  .playback-text > span { font-size: 12px; }
  .playback-text small { font-size: 11px; }
  .sound-toggle { width: 31px; height: 31px; }
  .section-heading h2 { font-size: 38px; }
  .philosophy-inner h2 { font-size: 33px; }
  .site-footer { font-size: 11px; }
}
/* Reduced motion: no ambient, beat or entrance animation; controls remain operational. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms!important; animation-iteration-count: 1!important; scroll-behavior: auto!important; transition-duration: .01ms!important; }
  .orb-pulse, .orb-pulse-a, .orb-pulse-b { opacity: 0!important; }
  .is-playing .orb-pulse-a { opacity: .32!important; transform: scale(1.08)!important; }
  .is-playing .core-orb { box-shadow: inset -20px -24px 60px rgba(0,0,0,.55),inset 8px 7px 28px rgba(232,255,255,.38),0 0 1px 1px rgba(183,235,235,.25),0 0 70px rgba(var(--accent-rgb),.35); }
}

@media (max-width: 350px) {
  .tempo-intro, .tempo-playback { min-width: 0; }
  .card-overline { font-size: 11px; letter-spacing: .06em; gap: 7px; }
  .tempo-playback { flex-direction: column; align-items: stretch; }
  .playback-visual { width: 100%; max-width: none; flex: none; height: 44px; }
  .playback-buttons { width: 100%; }
}