/* === Tron-style typography + hero layering + color palette === */

/* --- Display font swap (Orbitron is the actual Tron Legacy face) --- */
.font-display,
h1.font-display,
h2.font-display,
h3.font-display {
  font-family: "Orbitron", "Unbounded", system-ui, sans-serif !important;
  font-weight: 800;
  letter-spacing: -0.012em;
}

/* === Scrollbar — Tron-themed across the whole site === */
*::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
*::-webkit-scrollbar-track {
  background: rgba(31, 214, 255, 0.04);
  border-left: 1px solid rgba(31, 214, 255, 0.1);
}
*::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(31, 214, 255, 0.6), rgba(31, 214, 255, 0.35));
  border: 1px solid rgba(31, 214, 255, 0.5);
  box-shadow:
    inset 0 0 4px rgba(2, 6, 14, 0.6),
    0 0 6px rgba(31, 214, 255, 0.25);
}
*::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #1FD6FF, rgba(31, 214, 255, 0.6));
  box-shadow:
    inset 0 0 4px rgba(2, 6, 14, 0.4),
    0 0 10px rgba(31, 214, 255, 0.5);
}
*::-webkit-scrollbar-thumb:active { background: #1FD6FF; }
*::-webkit-scrollbar-corner { background: transparent; }
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(31, 214, 255, 0.5) rgba(31, 214, 255, 0.05);
}
.settings-panel::-webkit-scrollbar { width: 8px; }
.settings-panel::-webkit-scrollbar-track {
  background: rgba(31, 214, 255, 0.05);
  border-left: 1px solid rgba(31, 214, 255, 0.15);
}

/* --- Tron palette overrides --- */
/* Cyan-white primary read */
.text-chalk        { color: #E8F4FF !important; }
/* Electric blue (Sam Flynn team blue) — main accent */
.text-ion          { color: #1FD6FF !important; }
.glow-text-ion     { color: #1FD6FF !important; text-shadow: 0 0 22px rgba(31, 214, 255, .55), 0 0 2px rgba(31, 214, 255, .8); }
/* Tron orange (CLU team) — sparing emphasis */
.text-ember        { color: #FF7A1A !important; }
.glow-text-ember   { color: #FF8A2A !important; text-shadow: 0 0 22px rgba(255, 122, 26, .5), 0 0 2px rgba(255, 154, 60, .8); }
/* Was green (#7EFFB2) — repurposed to warm Tron amber */
.text-rune         { color: #FFB347 !important; }
.glow-text-rune    { color: #FFB347 !important; text-shadow: 0 0 22px rgba(255, 179, 71, .45), 0 0 2px rgba(255, 200, 110, .7); }
/* Muted blue-grey for secondary text */
.text-ghost        { color: #6B8AA8 !important; }
.text-smoke        { color: #4A6178 !important; }

/* Backgrounds + borders — deeper cooler grid */
.bg-void           { background-color: #02060E !important; }
/* Milky-Way-tinted deep space: subtle blue + purple nebula over the void. */
body {
  background-color: #02060E !important;
  background-image:
    radial-gradient(ellipse 60% 40% at 22% 28%, rgba(122,  80, 210, 0.14), transparent 70%),
    radial-gradient(ellipse 50% 30% at 70% 78%, rgba( 70, 140, 220, 0.12), transparent 70%),
    radial-gradient(ellipse 100% 100% at 50% 45%, #050B18 0%, #02060E 70%) !important;
  background-repeat: no-repeat !important;
  background-attachment: fixed !important;
}
.border-rift       { border-color: rgba(31, 214, 255, 0.18) !important; }
.border-ember\/40  { border-color: rgba(255, 122, 26, 0.45) !important; }
.border-ion\/40    { border-color: rgba(31, 214, 255, 0.5) !important; }
.border-rune\/40   { border-color: rgba(255, 179, 71, 0.45) !important; }

/* Cyan glow on inputs/buttons */
.focus\:border-ion:focus { border-color: #1FD6FF !important; }

/* Section header glow — subtle scene-bound feel */
section h1.font-display,
section h2.font-display {
  text-shadow:
    0 0 30px rgba(31, 214, 255, 0.18),
    0 0 1px rgba(220, 240, 255, 0.6);
}

/* === Canvas lift so ghost text can sit behind it === */
astro-island[uid="Ndl9T"] > div {
  z-index: 5 !important;
}

/* === Hero ghost text — name in the background, behind crystal === */
#hero .hero-ghost {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1; /* below canvas at 5 */
  pointer-events: none;
  user-select: none;
  font-family: "Orbitron", sans-serif;
  font-weight: 700;
  font-size: clamp(5rem, 17vw, 19rem);
  letter-spacing: 0.02em;
  line-height: 1;
  color: rgba(180, 215, 248, 0.045);
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
}

/* === Hero foreground content === */
#hero .hero-front {
  position: relative;
  z-index: 30;
}

#hero .hero-title {
  font-family: "Orbitron", sans-serif !important;
  font-weight: 800;
  font-size: clamp(2.75rem, 5.8vw, 5rem);
  line-height: 0.95;
  letter-spacing: -0.022em;
  margin-top: 1.5rem;
}

/* === Body copy → terminal/console feel (mono, cyan-grey, NOT green) === */
section .container-page p:not(.section-index),
section .container-page label {
  font-family: "JetBrains Mono", "Fira Code", monospace !important;
  font-size: 0.94rem !important;
  letter-spacing: 0.01em !important;
  color: #B3CFE0 !important;
  line-height: 1.7;
}

/* Section index labels — also mono but cyan-tinted */
.section-index {
  font-family: "JetBrains Mono", monospace !important;
  letter-spacing: 0.3em;
  color: #1FD6FF !important;
}

/* === Panel chrome (form etc.) — Tron HUD vibe === */
.panel {
  background: linear-gradient(180deg, rgba(8, 18, 32, 0.6), rgba(4, 10, 18, 0.5)) !important;
  border: 1px solid rgba(31, 214, 255, 0.15) !important;
  box-shadow:
    inset 0 0 0 1px rgba(31, 214, 255, 0.06),
    0 0 40px rgba(31, 214, 255, 0.04);
}

/* === Loader screen (terminal style) === */
.loader-screen {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background:
    radial-gradient(ellipse at center, #04101B 0%, #02060E 75%);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  opacity: 1;
  transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
              visibility 0s linear 0.9s;
}
/* Scanline overlay for CRT vibe */
.loader-screen::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    0deg,
    rgba(31, 214, 255, 0.03) 0px,
    rgba(31, 214, 255, 0.03) 1px,
    transparent 1px,
    transparent 3px
  );
  mix-blend-mode: screen;
  opacity: 0.6;
}
.loader-screen.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* Terminal — bare screen, no window chrome */
.terminal {
  position: relative;
  width: min(94vw, 940px);
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  text-align: left;
}
.terminal-bar { display: none; }

.terminal-body {
  padding: 0;
  color: #D2EAFF;
  font-size: 0.86rem;
  line-height: 1.55;
}
.terminal-line {
  white-space: pre;
  color: #8BB4D3;
  letter-spacing: 0.02em;
}
.terminal-line .prompt {
  color: #1FD6FF;
  margin-right: 0.5rem;
  font-weight: 700;
}
.term-ok  { color: #6BFFB0; }
.term-dim { color: #6B8AA8; }
.terminal-line .check {
  display: inline-block;
  width: 1.4em;
  text-align: center;
  color: #6BFFB0;
  font-weight: 700;
  text-shadow: 0 0 6px rgba(107, 255, 176, 0.55);
  transform-origin: center;
  animation: check-pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
}
@keyframes check-pop {
  0%   { opacity: 0; transform: scale(0.2) rotate(-30deg); }
  60%  { opacity: 1; transform: scale(1.25) rotate(8deg); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}

/* Boot-sequence fade-in stagger */
.tl { opacity: 0; }
.tl-fade {
  animation: tl-rise 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
}
@keyframes tl-rise {
  from { opacity: 0; transform: translateY(6px); filter: blur(3px); }
  to   { opacity: 1; transform: translateY(0);   filter: blur(0); }
}
/* Typewriter for $ ./boot.sh — clip-path reveal (text-agnostic) */
.tl-type {
  display: inline-block;
  position: relative;
  white-space: nowrap;
  clip-path: inset(0 100% 0 0);
  opacity: 1;
  animation:
    tl-type-clip 0.85s steps(12, end) 0.1s forwards;
}
.tl-type::after {
  content: "█";
  color: #1FD6FF;
  margin-left: 0.2ch;
  animation: tl-type-caret 0.7s steps(2, end) infinite;
}
@keyframes tl-type-clip {
  to { clip-path: inset(0 0 0 0); }
}
@keyframes tl-type-caret {
  50% { opacity: 0; }
}

/* Stagger delays for boot sequence */
.terminal-body .tl-fade:nth-of-type(1)  { animation-delay: 0.85s; }
.terminal-body .tl-fade:nth-of-type(2)  { animation-delay: 1.30s; }
.terminal-body .tl-fade:nth-of-type(3)  { animation-delay: 1.55s; }
.terminal-body .tl-fade:nth-of-type(4)  { animation-delay: 1.80s; }
.terminal-body .tl-fade:nth-of-type(5)  { animation-delay: 2.30s; }
.terminal-body .tl-fade:nth-of-type(6)  { animation-delay: 2.55s; }
.terminal-body .tl-fade:nth-of-type(7)  { animation-delay: 3.00s; }
/* Each check pops in slightly after its line */
.terminal-body .tl-fade:nth-of-type(2) .check { animation-delay: 1.55s; }
.terminal-body .tl-fade:nth-of-type(3) .check { animation-delay: 1.80s; }
.terminal-body .tl-fade:nth-of-type(4) .check { animation-delay: 2.05s; }

.terminal-art {
  margin: 0.9rem 0 1.1rem;
  color: #1FD6FF;
  font-size: clamp(4px, 0.78vw, 9px);
  line-height: 1.0;
  white-space: pre;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  filter: drop-shadow(0 0 8px rgba(31, 214, 255, 0.55));
  overflow: hidden;
  text-shadow: 0 0 2px rgba(31, 214, 255, 0.6);
}

.terminal-prompt-line {
  margin-top: 1rem;
  color: #D2EAFF;
}
.terminal-prompt-line .prompt-q {
  color: #FFC56B;
  margin-right: 0.4rem;
  font-weight: 700;
}
.terminal-cursor {
  display: inline-block;
  color: #1FD6FF;
  margin-left: 0.15rem;
  animation: terminal-cursor-blink 1s steps(2, end) infinite;
}
@keyframes terminal-cursor-blink {
  50% { opacity: 0; }
}

/* Claude-Code-style text selector */
.terminal-select {
  margin-top: 0.5rem;
  margin-left: 1.4rem;
  font-family: "JetBrains Mono", ui-monospace, monospace;
}
.terminal-opt {
  display: grid;
  grid-template-columns: 1.4rem 1fr;
  align-items: center;
  color: #6B8AA8;
  padding: 0.12rem 0;
  cursor: pointer;
  font-size: 0.9rem;
  letter-spacing: 0.02em;
  transition: color 0.12s ease;
}
.terminal-opt .opt-arrow {
  color: transparent;
  font-weight: 700;
  text-align: center;
}
.terminal-opt .opt-text { white-space: pre; }
.terminal-opt.is-selected {
  color: #1FD6FF;
  text-shadow: 0 0 6px rgba(31, 214, 255, 0.4);
}
.terminal-opt.is-selected .opt-arrow {
  color: #1FD6FF;
}
.terminal-opt:hover { color: #D2EAFF; }

.loader-buttons {
  margin-top: 1.1rem;
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: flex-start;
}
.loader-buttons button {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  color: #E8F4FF;
  background: rgba(31, 214, 255, 0.04);
  border: 1px solid rgba(31, 214, 255, 0.42);
  padding: 0.6rem 1.0rem;
  letter-spacing: 0.16em;
  font-size: 0.76rem;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
  outline: none;
}
.loader-buttons button:hover,
.loader-buttons button:focus-visible,
.loader-buttons button.selected {
  background: rgba(31, 214, 255, 0.14);
  border-color: #1FD6FF;
  color: #FFFFFF;
  box-shadow: 0 0 18px rgba(31, 214, 255, 0.35), inset 0 0 14px rgba(31, 214, 255, 0.08);
}
.loader-buttons button .key {
  color: #1FD6FF;
  margin-right: 0.45rem;
  font-weight: 700;
}
.loader-buttons button:hover .key,
.loader-buttons button.selected .key { color: #6BFFB0; }

.terminal-hint {
  margin-top: 0.9rem;
  color: #6B8AA8;
  font-size: 0.7rem;
  letter-spacing: 0.05em;
}
.terminal-hint kbd {
  display: inline-block;
  padding: 0 0.32rem;
  margin: 0 0.05rem;
  border: 1px solid rgba(31, 214, 255, 0.35);
  border-radius: 3px;
  color: #9ABFD8;
  background: rgba(31, 214, 255, 0.06);
  font-size: 0.66rem;
  font-family: inherit;
}

/* === Logo brand (top left) — mini 3D crystal + PhenPedron wordmark === */
.logo-brand {
  position: fixed;
  top: 0.6rem;
  left: 1.2rem;
  z-index: 9999;
  display: inline-flex;
  align-items: center;
  gap: 0.05rem;
  padding: 0;
  background: transparent;
  border: 0;
  text-decoration: none;
  color: #FFFFFF;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  line-height: 1;
  transition: text-shadow 0.25s ease;
}
.logo-brand .logo-text {
  color: #FFFFFF;
  text-shadow: 0 0 6px rgba(31, 214, 255, 0.35);
  transition: text-shadow 0.25s ease;
}
.logo-brand:hover .logo-text {
  text-shadow: 0 0 12px rgba(31, 214, 255, 0.7);
}
.logo-crystal {
  width: 64px;
  height: 84px;
  display: inline-block;
  filter: drop-shadow(0 0 8px rgba(31, 214, 255, 0.5));
  transition: filter 0.3s ease;
  background: transparent;
}
.logo-brand:hover .logo-crystal {
  filter: drop-shadow(0 0 10px rgba(31, 214, 255, 0.85));
}

/* === Audio controls (top right) — speaker icon + volume slider === */
.audio-controls {
  position: fixed;
  top: 1.15rem;
  right: 1.15rem;
  z-index: 9999;
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.45rem 0.75rem;
  background: rgba(2, 6, 14, 0.7);
  border: 1px solid rgba(31, 214, 255, 0.4);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.audio-controls:hover {
  border-color: #1FD6FF;
  box-shadow: 0 0 14px rgba(31, 214, 255, 0.35);
}

.mute-btn {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: #1FD6FF;
  display: inline-flex;
  align-items: center;
  transition: color 0.2s ease;
}
.mute-btn:hover { color: #FFFFFF; }
.mute-btn .ico  { width: 20px; height: 20px; display: none; }
.mute-btn .ico-on  { display: inline-block; }
.mute-btn.muted .ico-on  { display: none; }
.mute-btn.muted .ico-off { display: inline-block; color: #6B8AA8; }

.volume-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 88px;
  height: 4px;
  background: rgba(31, 214, 255, 0.28);
  border-radius: 2px;
  outline: none;
  cursor: pointer;
  transition: opacity 0.2s ease;
}
.volume-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 13px;
  height: 13px;
  background: #1FD6FF;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 0 10px rgba(31, 214, 255, 0.6);
}
.volume-slider::-moz-range-thumb {
  width: 13px;
  height: 13px;
  background: #1FD6FF;
  border-radius: 50%;
  border: 0;
  cursor: pointer;
  box-shadow: 0 0 10px rgba(31, 214, 255, 0.6);
}
.mute-btn.muted ~ .volume-slider { opacity: 0.3; pointer-events: none; }

/* Settings button */
.settings-btn {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: #1FD6FF;
  display: inline-flex;
  align-items: center;
  transition: color 0.2s ease, transform 0.4s ease;
}
.settings-btn:hover { color: #FFFFFF; transform: rotate(60deg); }
.settings-btn svg { width: 20px; height: 20px; display: block; }

/* === Settings modal === */
.settings-modal {
  position: fixed;
  inset: 0;
  z-index: 10001;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}
.settings-modal[hidden] { display: none; }
.settings-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(2, 6, 14, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.settings-panel {
  position: relative;
  z-index: 1;
  width: min(1100px, 100%);
  max-height: 88vh;
  overflow-y: auto;
  background:
    linear-gradient(180deg, rgba(8, 18, 32, 0.92), rgba(4, 10, 18, 0.94));
  border: 1px solid rgba(31, 214, 255, 0.4);
  box-shadow:
    0 0 60px rgba(31, 214, 255, 0.15),
    inset 0 0 0 1px rgba(31, 214, 255, 0.1);
  padding: 1.5rem 1.75rem 1.5rem;
  font-family: "JetBrains Mono", monospace;
  color: #C8E0F0;
}

/* Row of knobs / mixed controls */
.settings-row-flex {
  display: flex;
  gap: 1.25rem;
  align-items: center;
  flex-wrap: wrap;
}
.settings-col-fill { flex: 1; min-width: 220px; }

/* === Knob component === */
.knob {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  cursor: ns-resize;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}
.knob-wrap {
  width: 58px;
  height: 58px;
  position: relative;
}
.knob-track {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 25%, rgba(31, 214, 255, 0.12), transparent 60%),
    radial-gradient(circle, #0a1828 35%, #050a14 100%);
  border: 1px solid rgba(31, 214, 255, 0.4);
  box-shadow:
    inset 0 0 10px rgba(31, 214, 255, 0.18),
    0 3px 10px rgba(0, 0, 0, 0.5);
}
.knob-indicator {
  position: absolute;
  top: 5px;
  left: 50%;
  width: 2px;
  height: 18px;
  background: #1FD6FF;
  box-shadow: 0 0 8px rgba(31, 214, 255, 0.85);
  transform-origin: 50% 24px;
  transform: translateX(-50%) rotate(-135deg);
  pointer-events: none;
  border-radius: 1px;
}
.knob-label {
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  color: #B3CFE0;
  text-transform: uppercase;
  white-space: nowrap;
}
.knob-value {
  font-size: 0.7rem;
  color: #1FD6FF;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.knob:hover .knob-track { border-color: #1FD6FF; }

/* === Mixer (DAW channel strips) === */
.mixer {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0.5rem;
  padding: 0.85rem 0.5rem;
  border: 1px solid rgba(31, 214, 255, 0.18);
  background: rgba(31, 214, 255, 0.04);
}
.channel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}
.channel-name {
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  color: #B3CFE0;
}
.channel-mute {
  width: 30px;
  height: 22px;
  background: rgba(31, 214, 255, 0.06);
  border: 1px solid rgba(31, 214, 255, 0.35);
  color: #1FD6FF;
  font-family: "JetBrains Mono", monospace;
  font-size: 0.6rem;
  cursor: pointer;
  letter-spacing: 0.12em;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.channel-mute:hover { background: rgba(31, 214, 255, 0.18); }
.channel-mute.muted {
  background: rgba(255, 107, 107, 0.85);
  border-color: #FF6B6B;
  color: #02060E;
}
.channel-slider-wrap {
  position: relative;
  width: 100%;
  height: 110px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.channel-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100px;
  height: 4px;
  background: rgba(31, 214, 255, 0.22);
  outline: none;
  transform: rotate(-90deg);
  cursor: pointer;
}
.channel-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  background: #1FD6FF;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 0 8px rgba(31, 214, 255, 0.55);
}
.channel-slider::-moz-range-thumb {
  width: 14px;
  height: 14px;
  background: #1FD6FF;
  border-radius: 50%;
  border: 0;
  cursor: pointer;
  box-shadow: 0 0 8px rgba(31, 214, 255, 0.55);
}
.channel-value {
  font-size: 0.6rem;
  color: #1FD6FF;
  font-variant-numeric: tabular-nums;
  min-height: 10px;
}

/* === Step sequencer === */
.seq-row {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-bottom: 0.4rem;
}
.seq-label {
  width: 56px;
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  color: #B3CFE0;
}
.seq-steps {
  display: grid;
  grid-template-columns: repeat(16, 1fr);
  gap: 3px;
  flex: 1;
}
.seq-steps button {
  background: rgba(31, 214, 255, 0.06);
  border: 1px solid rgba(31, 214, 255, 0.16);
  height: 22px;
  cursor: pointer;
  padding: 0;
  transition: background 0.15s ease, box-shadow 0.15s ease;
}
.seq-steps button:hover { background: rgba(31, 214, 255, 0.18); }
.seq-steps button.on {
  background: #1FD6FF;
  border-color: #1FD6FF;
  box-shadow: 0 0 8px rgba(31, 214, 255, 0.55);
}
.seq-steps button.on:hover { background: #5EE6FF; }
/* Beat markers — accent every 4 steps */
.seq-steps button:nth-child(4n+1) {
  border-left: 2px solid rgba(31, 214, 255, 0.45);
}
.settings-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.25rem;
  border-bottom: 1px solid rgba(31, 214, 255, 0.18);
  padding-bottom: 0.85rem;
}
.settings-head h3 {
  margin: 0;
  font-family: "Orbitron", sans-serif !important;
  font-size: 0.95rem;
  letter-spacing: 0.22em;
  color: #1FD6FF;
  font-weight: 700;
}
.settings-close {
  background: none;
  border: 1px solid rgba(31, 214, 255, 0.4);
  width: 28px;
  height: 28px;
  font-size: 1.1rem;
  color: #1FD6FF;
  cursor: pointer;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}
.settings-close:hover { background: rgba(31, 214, 255, 0.15); color: #FFF; }
.settings-group { margin-bottom: 1.25rem; }
.settings-group:last-child { margin-bottom: 0; }
.settings-title {
  font-size: 0.65rem;
  letter-spacing: 0.32em;
  color: #6B8AA8;
  margin-bottom: 0.6rem;
  border-left: 2px solid rgba(31, 214, 255, 0.5);
  padding-left: 0.55rem;
}
.settings-row { margin-bottom: 0.85rem; }
.settings-row:last-child { margin-bottom: 0; }
.settings-row label {
  display: flex;
  justify-content: space-between;
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  color: #B3CFE0;
  margin-bottom: 0.35rem;
}
.settings-row label .val {
  color: #1FD6FF;
  font-weight: 600;
}
.settings-row input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  background: rgba(31, 214, 255, 0.22);
  border-radius: 2px;
  outline: none;
  cursor: pointer;
}
.settings-row input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  background: #1FD6FF;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 0 10px rgba(31, 214, 255, 0.6);
}
.settings-row input[type="range"]::-moz-range-thumb {
  width: 14px;
  height: 14px;
  background: #1FD6FF;
  border-radius: 50%;
  border: 0;
  cursor: pointer;
  box-shadow: 0 0 10px rgba(31, 214, 255, 0.6);
}

/* Button group (synced rate selectors) */
.btn-group {
  display: inline-flex;
  width: 100%;
  border: 1px solid rgba(31, 214, 255, 0.32);
  margin-top: 0.15rem;
}
.btn-group button {
  flex: 1 1 0;
  background: transparent;
  border: 0;
  border-right: 1px solid rgba(31, 214, 255, 0.18);
  color: #B3CFE0;
  font-family: "JetBrains Mono", monospace;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  padding: 0.5rem 0;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.btn-group button:last-child { border-right: 0; }
.btn-group button:hover { background: rgba(31, 214, 255, 0.08); color: #FFFFFF; }
.btn-group button.active {
  background: rgba(31, 214, 255, 0.2);
  color: #1FD6FF;
  box-shadow: inset 0 0 10px rgba(31, 214, 255, 0.25);
}

/* === Section CTAs (buttons, chips, stats, forms) — hidden until that
   section's typewriters complete; then section gets `.section-typed` and
   these elements fade up into place === */
section .btn-ember,
section .btn-glow,
section .chip,
section .panel form,
section .panel form input,
section .panel form textarea,
section .panel form button,
section .panel form label,
section [data-stage] {
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
section.section-typed .btn-ember,
section.section-typed .btn-glow,
section.section-typed .chip,
section.section-typed .panel form,
section.section-typed .panel form input,
section.section-typed .panel form textarea,
section.section-typed .panel form button,
section.section-typed .panel form label,
section.section-typed [data-stage] {
  opacity: 1;
  transform: translateY(0);
}
/* Stagger child reveals for more cinematic feel */
section.section-typed .chip:nth-child(2)   { transition-delay: 0.08s; }
section.section-typed .chip:nth-child(3)   { transition-delay: 0.16s; }
section.section-typed .btn-ember,
section.section-typed .btn-glow            { transition-delay: 0.25s; }
section.section-typed [data-stage="2"]     { transition-delay: 0.1s; }
section.section-typed [data-stage="3"]     { transition-delay: 0.2s; }

/* === Hero CTA button — fades in after hero typewriter completes === */
.hero-cta {
  display: inline-flex;
  align-items: center;
  margin-top: 2.5rem;
  font-family: "JetBrains Mono", monospace;
  font-size: 0.82rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #1FD6FF;
  background: rgba(31, 214, 255, 0.04);
  border: 1px solid rgba(31, 214, 255, 0.4);
  padding: 0.95rem 1.5rem;
  cursor: pointer;
  opacity: 0 !important; /* override GSAP's inline opacity from data-reveal */
  transform: translateY(10px) !important;
  pointer-events: none;
  transition:
    opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.9s cubic-bezier(0.16, 1, 0.3, 1),
    background 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease,
    box-shadow 0.2s ease;
}
.hero-cta.is-ready {
  opacity: 1 !important;
  transform: translateY(0) !important;
  pointer-events: auto;
}
.hero-cta:hover {
  background: rgba(31, 214, 255, 0.16);
  border-color: #1FD6FF;
  color: #FFFFFF;
  box-shadow: 0 0 24px rgba(31, 214, 255, 0.4);
}
.hero-cta-arrow {
  display: inline-block;
  margin-left: 0.6em;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.hero-cta:hover .hero-cta-arrow { transform: translateY(4px); }
.hero-cta.is-ready .hero-cta-arrow {
  animation: hero-cta-bob 2.4s ease-in-out infinite;
}
@keyframes hero-cta-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(3px); }
}

/* Typewriter targets — opacity 1 so the type-in is the reveal (overrides GSAP) */
[data-typewrite] {
  min-height: 1em;
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
}
/* Each character is pre-rendered as a hidden span; layout is locked from frame 1 */
.tw-char {
  opacity: 0;
}
.tw-char.tw-visible {
  opacity: 1;
}

/* === Reveal initial state — will-change hint for GSAP === */
[data-reveal] > * { will-change: transform, opacity, filter; }

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1 !important; transform: none !important; filter: none !important; }
}

/* === 3D page transitions === */
body {
  transform-origin: 50% 45%;
  backface-visibility: hidden;
}
/* Reveal elements after their section's typewriter has finished.
   !important is used because GSAP's SectionReveals on the homepage will
   otherwise set inline opacity:1 the moment the section scrolls into view,
   defeating the delay until typewriting completes. */
.reveal-after-type {
  opacity: 0 !important;
  transform: translateY(18px) !important;
  filter: none !important;
  transition: opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.65s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.has-typed .reveal-after-type {
  opacity: 1 !important;
  transform: translateY(0) !important;
}
.has-typed .reveal-after-type.delay-1 { transition-delay: 0.10s !important; }
.has-typed .reveal-after-type.delay-2 { transition-delay: 0.30s !important; }
.has-typed .reveal-after-type.delay-3 { transition-delay: 0.50s !important; }
@media (prefers-reduced-motion: reduce) {
  .reveal-after-type { opacity: 1 !important; transform: none !important; }
}

/* Prevent text selection while the user is dragging the crystal */
body.crystal-dragging,
body.crystal-dragging * {
  user-select: none !important;
  -webkit-user-select: none !important;
  cursor: grabbing !important;
}
/* When SPA-navigated to a subpage, hide the homepage 3D scene canvas
   (it stays mounted so music + Scene context survive). */
body.on-subpage astro-island[component-url*="Scene"] { display: none !important; }
body.on-subpage astro-island[component-url*="SectionReveals"] { display: none !important; }

/* /work/ list page: keep the real 3D Scene crystal visible behind content.
   Motion is killed via an inline freeze script in /work/index.html
   (sets window.__crystalLocked and pins window.scrollY at 0 for Scene's
   useFrame readers). Content sits in front via z-index. R3F mounts the
   canvas at the end of the DOM and its wrapper div has z-index:0, so we
   force the Scene's inner div *behind* the body content via z-index:-1
   and lift #page-content into its own stacking context above it. */
body.work-list-page astro-island[component-url*="Scene"] > div {
  z-index: -1 !important;
}
body.work-list-page #page-content { position: relative; z-index: 5; }
body.page-leaving {
  animation: page-leave 0.42s ease-out forwards;
  pointer-events: none;
}
body.page-entering {
  animation: page-enter 0.5s ease-out forwards;
}
@keyframes page-leave {
  from { opacity: 1; }
  to   { opacity: 0; }
}
@keyframes page-enter {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  body.page-leaving, body.page-entering { animation: none !important; opacity: 1 !important; transform: none !important; filter: none !important; }
}

/* === Contact page particle canvas === */
body.contact-page { background: radial-gradient(ellipse at 50% 40%, #04101B 0%, #02060E 75%); }
.contact-particles {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0;
  pointer-events: none;
  display: block;
}
.contact-section { position: relative; z-index: 1; }
.contact-page #page-content { position: relative; z-index: 1; }
.contact-headline {
  text-shadow: 0 0 32px rgba(31, 214, 255, 0.45);
}

/* === Per-section headline + button colors (mirror crystal hue cycle) === */
/* Shared: translucent fill with solid outline + vertical gradient inside */
#hero h1[data-typewrite],
#hero .hero-title,
#about h2[data-typewrite],
#case-1 h2[data-typewrite],
#case-2 h2[data-typewrite],
#case-3 h2[data-typewrite],
#contact h2,
#contact h2[data-typewrite] {
  color: transparent !important;
  -webkit-background-clip: text;
  background-clip: text;
  text-shadow: none !important;
  -webkit-text-fill-color: transparent;
  paint-order: stroke fill;
}
/* Typewriter chars inherit transparent + stroke from parent */
[data-typewrite] .tw-char { color: inherit; -webkit-text-fill-color: inherit; }

/* 1. Hero — blue */
#hero .hero-title,
#hero h1[data-typewrite] {
  -webkit-text-stroke: 0.7px #4FB8E8;
  background-image: linear-gradient(180deg, rgba(79,184,232,0.72) 0%, rgba(79,184,232,0.28) 55%, rgba(255,255,255,0.04) 100%);
  filter: drop-shadow(0 0 18px rgba(79, 184, 232, 0.45));
}
#hero #hero-cta {
  color: #4FB8E8;
  border-color: rgba(79, 184, 232, 0.55);
}
#hero #hero-cta:hover {
  background: rgba(79, 184, 232, 0.12);
  border-color: #4FB8E8;
  box-shadow: 0 0 22px rgba(79, 184, 232, 0.45);
  color: #FFFFFF;
}

/* 2. About — purple */
#about h2[data-typewrite] {
  -webkit-text-stroke: 0.7px #B07FFF;
  background-image: linear-gradient(180deg, rgba(176,127,255,0.72) 0%, rgba(176,127,255,0.28) 55%, rgba(255,255,255,0.04) 100%);
  filter: drop-shadow(0 0 18px rgba(176, 127, 255, 0.45));
}

/* 3. Case-1 — red */
#case-1 h2[data-typewrite] {
  -webkit-text-stroke: 0.7px #FF6B6B;
  background-image: linear-gradient(180deg, rgba(255,107,107,0.72) 0%, rgba(255,107,107,0.28) 55%, rgba(255,255,255,0.04) 100%);
  filter: drop-shadow(0 0 18px rgba(255, 107, 107, 0.5));
}
#case-1 .btn-ember,
#case-1 .btn-glow {
  color: #FF6B6B !important;
  border-color: rgba(255, 107, 107, 0.55) !important;
}
#case-1 .btn-ember:hover,
#case-1 .btn-glow:hover {
  background: rgba(255, 107, 107, 0.14) !important;
  border-color: #FF6B6B !important;
  box-shadow: 0 0 22px rgba(255, 107, 107, 0.5) !important;
  color: #FFFFFF !important;
}

/* 4. Case-2 — yellow */
#case-2 h2[data-typewrite] {
  -webkit-text-stroke: 0.7px #FFC56B;
  background-image: linear-gradient(180deg, rgba(255,197,107,0.72) 0%, rgba(255,197,107,0.28) 55%, rgba(255,255,255,0.04) 100%);
  filter: drop-shadow(0 0 18px rgba(255, 197, 107, 0.5));
}
#case-2 .btn-glow,
#case-2 .btn-ember,
#case-2 .btn-ion {
  color: #FFC56B !important;
  border-color: rgba(255, 197, 107, 0.55) !important;
}
#case-2 .btn-glow:hover,
#case-2 .btn-ember:hover,
#case-2 .btn-ion:hover {
  background: rgba(255, 197, 107, 0.14) !important;
  border-color: #FFC56B !important;
  box-shadow: 0 0 22px rgba(255, 197, 107, 0.5) !important;
  color: #02060E !important;
}

/* 5. Case-3 — green */
#case-3 h2[data-typewrite] {
  -webkit-text-stroke: 0.7px #6BFFB0;
  background-image: linear-gradient(180deg, rgba(107,255,176,0.72) 0%, rgba(107,255,176,0.28) 55%, rgba(255,255,255,0.04) 100%);
  filter: drop-shadow(0 0 18px rgba(107, 255, 176, 0.5));
}
#case-3 .btn-glow,
#case-3 .btn-rune {
  color: #6BFFB0 !important;
  border-color: rgba(107, 255, 176, 0.55) !important;
}
#case-3 .btn-glow:hover,
#case-3 .btn-rune:hover {
  background: rgba(107, 255, 176, 0.14) !important;
  border-color: #6BFFB0 !important;
  box-shadow: 0 0 22px rgba(107, 255, 176, 0.5) !important;
  color: #02060E !important;
}

/* 6. Contact — blue */
#contact h2,
#contact h2[data-typewrite] {
  -webkit-text-stroke: 0.7px #7EC8FF;
  background-image: linear-gradient(180deg, rgba(126,200,255,0.72) 0%, rgba(126,200,255,0.28) 55%, rgba(255,255,255,0.04) 100%);
  filter: drop-shadow(0 0 18px rgba(126, 200, 255, 0.45));
}
#contact .btn-glow {
  color: #7EC8FF !important;
  border-color: rgba(126, 200, 255, 0.55) !important;
}
#contact .btn-glow:hover {
  background: rgba(126, 200, 255, 0.14) !important;
  border-color: #7EC8FF !important;
  box-shadow: 0 0 22px rgba(126, 200, 255, 0.5) !important;
  color: #FFFFFF !important;
}

/* === Snap-sections mobile HUD (next/up button + section dots) ===
   Hidden on tablets+; intentionally desktop-free since wheel/keys are great there. */
.snap-hud {
  position: fixed;
  right: max(0.9rem, env(safe-area-inset-right));
  bottom: max(1.1rem, env(safe-area-inset-bottom));
  z-index: 9998;
  display: none; /* shown via @media below — mobile only */
  flex-direction: column;
  align-items: flex-end;
  gap: 0.6rem;
  pointer-events: none; /* let children opt in so the rest of the screen still scrolls */
}
@media (max-width: 767px) {
  .snap-hud { display: flex; }
}
.snap-dots {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  padding: 0.45rem 0.4rem;
  background: rgba(4, 9, 18, 0.55);
  border: 1px solid rgba(31, 214, 255, 0.28);
  border-radius: 999px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  pointer-events: auto;
}
.snap-dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border-radius: 999px;
  border: 1px solid rgba(159, 232, 255, 0.55);
  background: rgba(31, 214, 255, 0.12);
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.snap-dot:hover { background: rgba(31, 214, 255, 0.35); }
.snap-dot.is-active {
  background: #1FD6FF;
  border-color: #BFF0FF;
  box-shadow: 0 0 8px rgba(31, 214, 255, 0.85), 0 0 16px rgba(31, 214, 255, 0.45);
  transform: scale(1.15);
}
.snap-next-btn {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.65rem 1rem 0.65rem 1.05rem;
  background: linear-gradient(135deg, rgba(31, 214, 255, 0.18), rgba(31, 214, 255, 0.05));
  color: #BFF0FF;
  border: 1px solid rgba(31, 214, 255, 0.55);
  border-radius: 999px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 0 14px rgba(31, 214, 255, 0.28), inset 0 0 12px rgba(31, 214, 255, 0.08);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: transform 0.2s ease, box-shadow 0.2s ease, color 0.2s ease, background 0.2s ease;
  animation: snapBob 2.2s ease-in-out infinite;
}
.snap-next-btn:hover, .snap-next-btn:active {
  color: #FFFFFF;
  background: linear-gradient(135deg, rgba(31, 214, 255, 0.32), rgba(31, 214, 255, 0.1));
  box-shadow: 0 0 22px rgba(31, 214, 255, 0.55), inset 0 0 16px rgba(31, 214, 255, 0.18);
  transform: translateY(-1px);
}
.snap-next-arrow { width: 16px; height: 16px; }
.snap-next-btn.is-top { animation: none; }
.snap-next-btn.is-top .snap-next-arrow { transform: rotate(180deg); }
@keyframes snapBob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(4px); }
}
@media (prefers-reduced-motion: reduce) {
  .snap-next-btn { animation: none; }
  .snap-next-btn:hover, .snap-next-btn:active { transform: none; }
}

/* === Contact page mobile fix ===
   The fixed top-left logo (.logo-brand) is 84px tall + ~10px top offset.
   On phones the contact section uses items-center + min-h-screen so the
   eyebrow + H1 land directly under the logo. Push the centered block down
   on small screens so nothing collides with the brand. */
@media (max-width: 767px) {
  .contact-page .contact-section .container-page {
    padding-top: 6.5rem;       /* clear the 94px-tall fixed logo */
    padding-bottom: 4rem;
    align-items: flex-start;   /* unset md:items-center — top-align instead */
    min-height: auto;
    gap: 2rem;
  }
  .contact-page .contact-headline {
    font-size: clamp(2.25rem, 9.5vw, 3rem);
    line-height: 1.05;
  }
}