:root {
  --ink: #f4f1ff;
  --ink-dim: rgba(244, 241, 255, 0.62);
  --ink-faint: rgba(244, 241, 255, 0.38);
  --glass: rgba(255, 255, 255, 0.07);
  --glass-edge: rgba(255, 255, 255, 0.16);
  --track: rgba(255, 255, 255, 0.16);
  --fill: #ffffff;
  --led: #ff3b4e;
  --bg: #0b0a16;
  --sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --serif: 'Instrument Serif', Georgia, serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--bg); color: var(--ink); font-family: var(--sans); -webkit-font-smoothing: antialiased; }
canvas#stage { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; outline: none; }
canvas#stage.hovering { cursor: grab; }
canvas#stage.dragging { cursor: grabbing; }


/* chord readout */
.chord { position: fixed; top: 94px; left: 50%; transform: translateX(-50%); display: flex; gap: 10px; align-items: baseline; opacity: 0; transition: opacity 0.5s ease; pointer-events: none; }
.chord.show { opacity: 1; }
.chord .roman { font: italic 400 30px/1 var(--serif); }
.chord .name { font-size: 13px; font-weight: 500; letter-spacing: 0.08em; color: var(--ink-dim); }

.hint { position: fixed; left: 50%; bottom: 116px; transform: translateX(-50%); margin: 0; font-size: 12.5px; color: var(--ink-faint); white-space: nowrap; transition: opacity 0.8s ease; pointer-events: none; }
.hint b { font-weight: 500; color: var(--ink-dim); }
.hint.gone, body:not(.awake) .hint, body.tune-open .hint { opacity: 0; }

/* glass control bar */
.panel {
  position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%);
  display: flex; align-items: center; gap: 22px;
  padding: 14px 24px 14px 16px;
  background: linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.04)), var(--glass);
  border: 1px solid var(--glass-edge);
  border-radius: 22px;
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  box-shadow: 0 1px 0 rgba(255,255,255,0.18) inset, 0 20px 50px -12px rgba(0,0,0,0.6);
  opacity: 0; translate: 0 16px; transition: opacity 0.7s ease 0.3s, translate 0.7s cubic-bezier(.2,.8,.2,1) 0.3s;
}
body.awake .panel { opacity: 1; translate: 0 0; }
.sep { width: 1px; align-self: stretch; background: var(--glass-edge); margin: 2px 0; }

.icon-btn {
  position: relative; flex: none; width: 44px; height: 44px; border-radius: 14px;
  display: grid; place-items: center; cursor: pointer;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); color: var(--ink);
  transition: background 0.2s, transform 0.15s;
}
.icon-btn:hover { background: rgba(255,255,255,0.12); }
.icon-btn:active { transform: scale(0.94); }
.icon-btn:focus-visible, .tune input:focus-visible, .vol input:focus-visible { outline: 2px solid #9ec5ff; outline-offset: 3px; }
.icon-btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.mic svg rect { fill: currentColor; fill-opacity: 0.12; }
.led { position: absolute; top: 6px; right: 6px; width: 7px; height: 7px; border-radius: 50%; background: #4a2a32; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.3); transition: background 0.2s, box-shadow 0.2s; }
.mic[aria-pressed='true'] .led { background: var(--led); box-shadow: 0 0 4px var(--led), 0 0 calc(8px + var(--lvl, 0) * 18px) var(--led); }
.mic[aria-pressed='true'] { background: rgba(255, 59, 78, 0.12); border-color: rgba(255, 59, 78, 0.35); }
.spk .fillme { fill: currentColor; fill-opacity: 0.12; }
.spk .x { display: none; }
.spk[aria-pressed='true'] .x { display: block; }
.spk[aria-pressed='true'] .w1, .spk[aria-pressed='true'] .w2 { display: none; }
.spk.quiet .w2 { opacity: 0.25; }

/* Song / Follow me segmented toggle */
.seg { position: relative; display: flex; gap: 2px; padding: 6px; border-radius: 16px; background: rgba(0,0,0,0.25); border: 1px solid rgba(255,255,255,0.08); }
.seg button { position: relative; z-index: 1; display: flex; align-items: center; gap: 8px; justify-content: center; padding: 9px 18px; border: 0; background: none; color: var(--ink-dim); font: 500 13px var(--sans); cursor: pointer; white-space: nowrap; transition: color 0.25s; border-radius: 10px; }
.seg button[aria-checked='true'] { color: #160d1c; }
.seg button svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.seg-thumb { position: absolute; top: 6px; bottom: 6px; left: var(--x, 6px); width: var(--w, 0); border-radius: 10px; background: linear-gradient(180deg, #fff, #ebe6fb); box-shadow: 0 4px 14px rgba(0,0,0,0.35); transition: left 0.35s cubic-bezier(.3,1.3,.5,1), width 0.35s cubic-bezier(.3,1.3,.5,1); }
.seg button:focus-visible { outline: 2px solid #9ec5ff; outline-offset: 2px; }

/* singer dots */
.singers { display: flex; gap: 9px; align-items: center; }
.dot { position: relative; width: 26px; height: 26px; border-radius: 50%; border: 0; padding: 0; cursor: pointer;
  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--c) 40%, #fff), var(--c) 60%, color-mix(in srgb, var(--c) 70%, #000));
  box-shadow: 0 0 0 2px rgba(255,255,255,0.0), 0 0 14px -2px var(--c);
  transition: transform 0.25s cubic-bezier(.3,1.6,.5,1), box-shadow 0.25s, opacity 0.25s, filter 0.25s; }
.dot:hover { transform: scale(1.15); }
.dot:active { transform: scale(0.9); }
.dot[aria-pressed='false'] { background: transparent; box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--c) 70%, transparent); opacity: 0.55; }
.dot.singing { box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 35%, transparent), 0 0 20px 0 var(--c); }
.dot:focus-visible { outline: 2px solid #9ec5ff; outline-offset: 3px; }
.tip { position: absolute; left: 50%; bottom: calc(100% + 12px); translate: -50% 4px; padding: 5px 9px; border-radius: 8px; background: rgba(20,16,34,0.92); border: 1px solid var(--glass-edge); font: 500 11px var(--sans); letter-spacing: 0.04em; color: var(--ink); white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 0.18s, translate 0.18s; }
.dot:hover .tip, .dot:focus-visible .tip, .dot.flash .tip { opacity: 1; translate: -50% 0; }

/* material swatches: rounded squares, so they read differently from the singer dots */
.mats { display: flex; gap: 8px; }
.mat { position: relative; width: 28px; height: 28px; border-radius: 9px; border: 0; padding: 0; cursor: pointer; transition: transform 0.25s cubic-bezier(.3,1.6,.5,1), box-shadow 0.2s; }
.mat:hover { transform: scale(1.12); }
.mat:active { transform: scale(0.9); }
.mat[aria-checked='true'] { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px rgba(255,255,255,0.85); }
.mat:focus-visible { outline: 2px solid #9ec5ff; outline-offset: 4px; }
.mat:hover .tip, .mat:focus-visible .tip { opacity: 1; translate: -50% 0; }
.mat[data-mat='jelly'] {
  background: radial-gradient(circle at 32% 28%, rgba(255,255,255,0.95) 0 9%, transparent 22%),
              radial-gradient(circle at 60% 70%, #ff5f9c, #c41f5a 70%);
  box-shadow: inset 0 -4px 8px rgba(80,0,30,0.45), inset 0 2px 3px rgba(255,255,255,0.4);
}
.mat[data-mat='gelato'] {
  background: radial-gradient(circle at 30% 35%, #fff 0 6%, transparent 7%),
              radial-gradient(circle at 70% 40%, #ff9fb8 0 6%, transparent 7%),
              radial-gradient(circle at 45% 72%, #8fd3ff 0 6%, transparent 7%),
              radial-gradient(circle at 50% 30%, #fff3e4, #f7d6b8 80%);
  box-shadow: inset 0 -3px 6px rgba(120,70,30,0.25);
}
.mat[data-mat='glass'] {
  background: radial-gradient(circle at 30% 26%, rgba(255,255,255,0.95) 0 8%, transparent 20%),
              conic-gradient(from 200deg, rgba(120,200,255,0.35), rgba(255,140,220,0.35), rgba(255,240,140,0.3), rgba(120,200,255,0.35)),
              rgba(255,255,255,0.06);
  box-shadow: inset 0 0 0 1.5px rgba(255,255,255,0.55), inset 0 -4px 8px rgba(255,255,255,0.12);
}
.mat[aria-checked='true'][data-mat] { box-shadow: 0 0 0 2px #15121f, 0 0 0 4px rgba(255,255,255,0.85); }

/* tune popover: a small tooltip that rises from its button */
.tune-wrap { position: relative; }
#tuneBtn[aria-expanded='true'] { background: rgba(255,255,255,0.16); }
.tune {
  position: absolute; left: 50%; bottom: calc(100% + 18px); width: 268px; padding: 14px 16px 10px;
  translate: -50% 8px; scale: 0.96; transform-origin: 50% 100%; opacity: 0; visibility: hidden;
  background: rgba(24, 20, 40, 0.95); border: 1px solid var(--glass-edge); border-radius: 16px;
  backdrop-filter: blur(16px) saturate(160%); -webkit-backdrop-filter: blur(16px) saturate(160%);
  box-shadow: 0 18px 44px -10px rgba(0,0,0,0.7);
  transition: opacity 0.2s, translate 0.25s cubic-bezier(.2,.9,.3,1.2), scale 0.25s, visibility 0.2s;
}
.tune::after { content: ''; position: absolute; left: 50%; top: 100%; width: 12px; height: 12px; translate: -50% -6px; rotate: 45deg; background: rgb(26, 22, 42); border-right: 1px solid var(--glass-edge); border-bottom: 1px solid var(--glass-edge); }
.tune.open { opacity: 1; visibility: visible; translate: -50% 0; scale: 1; }
.tune-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.reset { display: flex; align-items: center; gap: 5px; padding: 4px 9px 4px 7px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.05); color: var(--ink-dim); font: 500 11.5px var(--sans); cursor: pointer; transition: background 0.2s, color 0.2s; }
.reset:hover { background: rgba(255,255,255,0.12); color: var(--ink); }
.reset:focus-visible { outline: 2px solid #9ec5ff; outline-offset: 2px; }
.reset svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.reset.spin svg { animation: spin 0.6s cubic-bezier(.3,.9,.4,1); }
@keyframes spin { from { rotate: 0deg; } to { rotate: -360deg; } }
.tune-title { margin: 0; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint); }
.tune .row { display: grid; grid-template-columns: 58px 1fr 30px; align-items: center; gap: 10px; padding: 6px 0; cursor: pointer; }
.tune .row + .row { border-top: 1px solid rgba(255,255,255,0.06); }
.tune .lbl { font-size: 13px; color: var(--ink); }
.tune output { font-size: 12px; text-align: right; font-variant-numeric: tabular-nums; color: var(--ink-dim); }
.tune input[type='range'] { width: 100%; }

.vol { display: flex; align-items: center; gap: 10px; }
.vol input[type='range'] { width: 88px; }

input[type='range'] {
  --p: 50%;
  -webkit-appearance: none; appearance: none; width: 112px; height: 18px; margin: 0; background: transparent; cursor: pointer;
}
input[type='range']::-webkit-slider-runnable-track {
  height: 4px; border-radius: 4px;
  background: linear-gradient(90deg, var(--fill) var(--p), var(--track) var(--p));
}
input[type='range']::-moz-range-track { height: 4px; border-radius: 4px; background: var(--track); }
input[type='range']::-moz-range-progress { height: 4px; border-radius: 4px; background: var(--fill); }
input[type='range']::-webkit-slider-thumb {
  -webkit-appearance: none; width: 16px; height: 16px; margin-top: -6px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff, #e7e3f5);
  box-shadow: 0 2px 8px rgba(0,0,0,0.45), 0 0 0 4px rgba(255,255,255,0.08);
  transition: transform 0.15s;
}
input[type='range']:active::-webkit-slider-thumb { transform: scale(1.18); }
input[type='range']::-moz-range-thumb { width: 16px; height: 16px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,0.45); }

/* intro */
.intro {
  position: fixed; inset: 0; display: grid; place-items: center; text-align: center;
  background: radial-gradient(ellipse at 50% 45%, rgba(11,10,22,0.35), rgba(11,10,22,0.82) 70%);
  transition: opacity 0.9s ease, visibility 0.9s;
}
.intro.gone { opacity: 0; visibility: hidden; }
.intro-inner { translate: 0 -12vh; padding: 0 16px; }
.eyebrow { margin: 0 0 14px; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-faint); }
.intro h2 { margin: 0; font: 400 clamp(44px, 8vw, 92px)/0.95 var(--serif); letter-spacing: -0.01em; }
.intro h2 em { font-style: italic; color: #ffd0dc; }
.lede { margin: 16px auto 28px; max-width: 30em; font-size: 15px; color: var(--ink-dim); }
.wake {
  font: 500 15px var(--sans); color: #160d1c; padding: 15px 30px; border: 0; border-radius: 999px; cursor: pointer;
  background: linear-gradient(180deg, #fff, #ece6ff);
  box-shadow: 0 10px 40px -6px rgba(255, 120, 170, 0.55), 0 0 0 6px rgba(255,255,255,0.07);
  transition: transform 0.2s, box-shadow 0.2s;
}
.wake:hover { transform: translateY(-2px) scale(1.02); box-shadow: 0 16px 48px -6px rgba(255, 120, 170, 0.7), 0 0 0 8px rgba(255,255,255,0.09); }
.small { margin-top: 16px; font-size: 12px; color: var(--ink-faint); }


/* ---------- site header, matching mikdam.com ---------- */
.site-header { position: fixed; inset: 0 0 auto; z-index: 50; font-family: 'Sora', var(--sans); background: rgba(250, 249, 247, 0.97); border-bottom: 1px solid rgba(0, 0, 0, 0.06); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.sh-inner { max-width: 1200px; height: 72px; margin: 0 auto; padding: 0 15px; display: flex; align-items: center; gap: 24px; }
.sh-logo { display: flex; flex: none; }
.sh-logo img { width: 140px; height: auto; display: block; }
.sh-nav { margin-left: auto; }
.sh-nav > ul { display: flex; align-items: center; list-style: none; margin: 0; padding: 0; }
.sh-nav a, .sub-toggle { display: inline-flex; align-items: center; gap: 8px; padding: 0 20px; height: 72px; font: 400 14px/1 'Sora', var(--sans); color: #21232a; text-decoration: none; background: none; border: 0; cursor: pointer; transition: color 0.2s; }
.sh-nav a:hover, .sub-toggle:hover, .has-sub:focus-within .sub-toggle { color: #ff2d33; }
.badge { position: relative; display: inline-block; padding: 6px 9.5px; border-radius: 21px; font: 400 10.5px/1 'Sora', var(--sans); color: #ff2d33; }
.badge::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: #ff2d33; opacity: 0.125; }
.chev { width: 9px; height: 13px; margin-left: -2px; transition: rotate 0.2s; }
.has-sub { position: relative; }
.sub { position: absolute; top: calc(100% - 10px); left: 0; min-width: 240px; margin: 0; padding: 14px 0; list-style: none; background: #fff; border-radius: 5px; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12); opacity: 0; visibility: hidden; translate: 0 6px; transition: opacity 0.2s, translate 0.2s, visibility 0.2s; }
.has-sub:hover .sub, .has-sub:focus-within .sub, .has-sub.open .sub { opacity: 1; visibility: visible; translate: 0 0; }
.has-sub:hover .chev, .has-sub.open .chev { rotate: 180deg; }
.sub a { display: block; height: auto; padding: 11px 28px; font-size: 14px; color: rgba(0, 0, 0, 0.6); }
.sub a:hover, .sub a[aria-current='page'] { color: #ff2d33; }
.sh-ctas { display: flex; align-items: center; gap: 10px; }
.leaf { display: inline-flex; align-items: center; justify-content: center; border-radius: 100px 0; color: #fff; text-decoration: none; font: 600 13px/1 'Sora', var(--sans); letter-spacing: 0.02em; text-transform: uppercase; transition: filter 0.2s, translate 0.2s; }
.leaf:hover { filter: brightness(1.06); translate: 0 -1px; }
.leaf:focus-visible, .sh-nav a:focus-visible, .sub-toggle:focus-visible, .sh-burger:focus-visible { outline: 2px solid #ff2d33; outline-offset: 3px; }
.leaf.wa { width: 84px; height: 44px; background: #25d366; }
.leaf.wa svg { width: 20px; height: 20px; }
.leaf.book { height: 48px; padding: 0 32px; background: #ff2d33; }
.sh-burger { display: none; width: 56px; height: 56px; border: 0; border-radius: 6px; background: rgba(0, 0, 0, 0.04); cursor: pointer; position: relative; }
.sh-burger span { position: absolute; left: 50%; height: 1.5px; background: #000; transition: translate 0.25s, rotate 0.25s, opacity 0.2s, width 0.25s; }
.sh-burger span:nth-child(1) { width: 16px; translate: -3px -6px; }
.sh-burger span:nth-child(2) { width: 25px; translate: -12px 0; }
.sh-burger span:nth-child(3) { width: 16px; translate: -8px 6px; }
.sh-burger[aria-expanded='true'] span:nth-child(1) { width: 22px; translate: -11px 0; rotate: 45deg; }
.sh-burger[aria-expanded='true'] span:nth-child(2) { opacity: 0; }
.sh-burger[aria-expanded='true'] span:nth-child(3) { width: 22px; translate: -11px 0; rotate: -45deg; }
.sh-mobile { display: none; }
.exp-title { position: fixed; top: 96px; left: max(28px, calc((100vw - 1200px) / 2 + 15px)); pointer-events: none; }
.exp-title h1 { margin: 0; font: 400 26px/1 var(--serif); letter-spacing: 0.01em; }
.exp-title p { margin: 4px 0 0; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint); }
.intro { z-index: 40; }

@media (max-width: 1024px) {
  .sh-inner { height: 64px; }
  .sh-nav, .leaf.book { display: none; }
  .sh-ctas { margin-left: auto; gap: 14px; }
  .leaf.wa { width: auto; height: auto; background: none; color: #25d366; border-radius: 0; }
  .leaf.wa svg { width: 24px; height: 24px; }
  .sh-burger { display: block; }
  .sh-mobile { display: flex; flex-direction: column; max-height: 0; overflow: hidden; padding: 0 20px; transition: max-height 0.35s ease, padding 0.35s ease; }
  .sh-mobile.open { max-height: 80vh; padding: 6px 20px 22px; overflow-y: auto; }
  .sh-mobile a, .sh-group { padding: 13px 0; font: 400 16px/1.2 'Sora', var(--sans); color: #21232a; text-decoration: none; border-bottom: 1px solid rgba(0, 0, 0, 0.06); margin: 0; }
  .sh-mobile .indent { padding-left: 18px; font-size: 15px; color: rgba(0, 0, 0, 0.6); }
  .sh-mobile a[aria-current='page'] { color: #ff2d33; }
  .sh-mobile .leaf.book { display: inline-flex; align-self: flex-start; margin-top: 18px; border: 0; color: #fff; padding: 0 32px; font: 600 13px/1 'Sora', var(--sans); }
  .exp-title { top: 82px; left: 16px; }
  .exp-title h1 { font-size: 21px; }
}

@media (max-width: 760px) {
  .chord { top: 128px; }
  .panel { left: 12px; right: 12px; transform: none; bottom: 12px; flex-wrap: wrap; justify-content: center; gap: 14px 14px; padding: 14px 16px; }
  .sep { display: none; }
  /* own row, centred, with equal breathing room on both sides */
  .seg { order: -1; flex: 0 0 auto; width: min(100%, 340px); margin-inline: calc((100% - min(100%, 340px)) / 2); }
  .seg button { flex: 1; padding: 10px 12px; }
  .vol input[type='range'] { width: 70px; }
  .tune { left: auto; right: -60px; translate: 0 8px; }
  .tune.open { translate: 0 0; }
  .tune::after { left: auto; right: 72px; translate: 0 -6px; }
  .hint { bottom: 170px; white-space: normal; text-align: center; width: calc(100% - 32px); }
}
@media (prefers-reduced-motion: reduce) {
  .panel, .intro, .chord, .hint { transition: none; }
}