#fff-harmonic-galaxy.fff-hg{
  --bg:#0a1513;--panel:#0e211d;--text:#f3f0e7;--muted:rgba(243,240,231,.64);--line:rgba(255,255,255,.12);
  width:min(100%,1040px);margin:0 auto;color:var(--text);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif
}
#fff-harmonic-galaxy *{box-sizing:border-box}
#fff-harmonic-galaxy .fff-hg__stage{
  position:relative;overflow:hidden;aspect-ratio:4/3;min-height:440px;max-height:78vh;border-radius:24px 24px 0 0;
  background:radial-gradient(circle at 52% 38%,#334c44 0,#172a25 38%,#091411 74%,#06100e 100%);
  box-shadow:0 28px 80px rgba(0,0,0,.3)
}
#fff-harmonic-galaxy canvas{display:block;width:100%;height:100%;touch-action:none;cursor:grab}
#fff-harmonic-galaxy canvas:active{cursor:grabbing}
#fff-harmonic-galaxy .fff-hg__topbar{position:absolute;inset:0 0 auto;display:flex;justify-content:space-between;gap:16px;padding:18px 20px;pointer-events:none;text-shadow:0 1px 12px rgba(0,0,0,.35)}
#fff-harmonic-galaxy .fff-hg__topbar strong,#fff-harmonic-galaxy .fff-hg__topbar span{display:block}
#fff-harmonic-galaxy .fff-hg__topbar strong{font-size:15px;letter-spacing:.03em}
#fff-harmonic-galaxy .fff-hg__topbar>div:first-child span{font-size:12px;color:var(--muted);margin-top:2px}
#fff-harmonic-galaxy .fff-hg__readout{text-align:right;font-variant-numeric:tabular-nums}
#fff-harmonic-galaxy .fff-hg__readout b{display:block;font-size:12px;font-weight:650}
#fff-harmonic-galaxy .fff-hg__readout span{font-size:12px;color:var(--muted);margin-top:2px}
#fff-harmonic-galaxy .fff-hg__hint{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);white-space:nowrap;padding:7px 11px;border:1px solid rgba(255,255,255,.1);border-radius:999px;background:rgba(3,9,8,.38);backdrop-filter:blur(8px);color:var(--muted);font-size:10px;pointer-events:none}
#fff-harmonic-galaxy .fff-hg__controls{display:grid;grid-template-columns:repeat(3,1fr);gap:17px;padding:20px;background:rgba(10,25,22,.97);border-top:1px solid var(--line);border-radius:0 0 24px 24px;box-shadow:0 26px 70px rgba(0,0,0,.18)}
#fff-harmonic-galaxy .fff-hg__actions{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;grid-column:1/-1}
#fff-harmonic-galaxy .fff-hg__button,#fff-harmonic-galaxy .fff-hg__presets button{appearance:none;border:1px solid rgba(255,255,255,.14);border-radius:12px;color:var(--text);background:rgba(255,255,255,.07);font:inherit;cursor:pointer;transition:background .15s ease,transform .15s ease}
#fff-harmonic-galaxy .fff-hg__button{min-height:46px;padding:10px 13px;font-size:13px;font-weight:650}
#fff-harmonic-galaxy .fff-hg__button:hover,#fff-harmonic-galaxy .fff-hg__presets button:hover{background:rgba(255,255,255,.12)}
#fff-harmonic-galaxy .fff-hg__button:active,#fff-harmonic-galaxy .fff-hg__presets button:active{transform:scale(.98)}
#fff-harmonic-galaxy .fff-hg__control{display:block;min-width:0}
#fff-harmonic-galaxy .fff-hg__control>span{display:flex;justify-content:space-between;gap:10px;align-items:baseline;margin-bottom:10px;font-size:13px}
#fff-harmonic-galaxy output{font-variant-numeric:tabular-nums;color:var(--muted)}
#fff-harmonic-galaxy input[type=range]{width:100%;margin:4px 0 0;accent-color:#e6dec8;cursor:pointer}
#fff-harmonic-galaxy small{display:block;margin-top:7px;color:var(--muted);font-size:11px;line-height:1.4}
#fff-harmonic-galaxy .fff-hg__ticks{display:flex;justify-content:space-between;margin-top:3px;color:var(--muted);font-size:10px}
#fff-harmonic-galaxy .fff-hg__presets{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
#fff-harmonic-galaxy .fff-hg__presets button{min-height:38px;padding:8px;font-size:12px}
#fff-harmonic-galaxy .fff-hg__presets button.is-active{background:rgba(232,221,194,.16);border-color:rgba(232,221,194,.42)}
#fff-harmonic-galaxy .fff-hg__explain{grid-column:1/-1;padding:14px 15px;border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.035)}
#fff-harmonic-galaxy .fff-hg__explain b{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-bottom:4px}
#fff-harmonic-galaxy .fff-hg__explain span{display:block;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;overflow-wrap:anywhere}
@media(max-width:760px){
  #fff-harmonic-galaxy .fff-hg__stage{min-height:0;max-height:none;aspect-ratio:1/1;border-radius:18px 18px 0 0}
  #fff-harmonic-galaxy .fff-hg__controls{grid-template-columns:1fr;gap:15px;padding:16px;border-radius:0 0 18px 18px}
  #fff-harmonic-galaxy .fff-hg__actions,#fff-harmonic-galaxy .fff-hg__presets,#fff-harmonic-galaxy .fff-hg__explain{grid-column:1}
  #fff-harmonic-galaxy .fff-hg__actions{grid-template-columns:1fr 1fr}
  #fff-harmonic-galaxy .fff-hg__camera{grid-column:1/-1}
  #fff-harmonic-galaxy .fff-hg__presets{grid-template-columns:repeat(2,1fr)}
  #fff-harmonic-galaxy .fff-hg__topbar{padding:14px}
  #fff-harmonic-galaxy .fff-hg__hint{bottom:10px;max-width:88%;white-space:normal;text-align:center}
}

/* FFF LAB INTEGRATION LAYER — visual only; audio/3D logic stays unchanged */
#fff-harmonic-galaxy.fff-hg{
  --fff-surface:#ffffff;
  --fff-soft:#f6f4ee;
  --fff-ink:#171b18;
  --fff-muted:#6b726d;
  --fff-border:rgba(23,27,24,.12);
  --fff-accent:#1d4b3e;
  --fff-accent-soft:#dfeae5;
  --text:var(--fff-ink);
  --muted:var(--fff-muted);
  --line:var(--fff-border);
  width:min(100%,1040px);
  color:var(--fff-ink);
  font-family:inherit;
  background:var(--fff-surface);
  border:1px solid var(--fff-border);
  border-radius:22px;
  overflow:hidden;
  box-shadow:0 10px 28px rgba(18,31,26,.07);
}
#fff-harmonic-galaxy .fff-hg__lab-intro{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:24px;
  padding:18px 20px 17px;
  background:var(--fff-surface);
  border-bottom:1px solid var(--fff-border);
}
#fff-harmonic-galaxy .fff-hg__eyebrow{
  flex:0 0 auto;
  color:var(--fff-accent);
  font-size:11px;
  line-height:1.35;
  font-weight:700;
  letter-spacing:.085em;
}
#fff-harmonic-galaxy .fff-hg__lab-intro p{
  width:min(100%,640px);
  margin:0;
  color:var(--fff-muted);
  font-size:13px;
  line-height:1.5;
}
#fff-harmonic-galaxy .fff-hg__stage{border-radius:0;box-shadow:none;max-height:72vh}
#fff-harmonic-galaxy .fff-hg__topbar{color:#f6f4ee}
#fff-harmonic-galaxy .fff-hg__topbar>div:first-child span,
#fff-harmonic-galaxy .fff-hg__readout span,
#fff-harmonic-galaxy .fff-hg__hint{color:rgba(246,244,238,.68)}
#fff-harmonic-galaxy .fff-hg__controls{
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:17px;
  padding:20px;
  color:var(--fff-ink);
  background:var(--fff-soft);
  border-top:1px solid var(--fff-border);
  border-radius:0;
  box-shadow:none;
}
#fff-harmonic-galaxy .fff-hg__button,
#fff-harmonic-galaxy .fff-hg__presets button{
  color:var(--fff-ink);
  background:#fff;
  border-color:var(--fff-border);
  border-radius:11px;
}
#fff-harmonic-galaxy .fff-hg__button:hover,
#fff-harmonic-galaxy .fff-hg__presets button:hover{background:#fbfaf7}
#fff-harmonic-galaxy .fff-hg__play{
  color:#fff;
  background:var(--fff-accent);
  border-color:var(--fff-accent);
}
#fff-harmonic-galaxy .fff-hg__play:hover{background:#163d32}
#fff-harmonic-galaxy output,
#fff-harmonic-galaxy small,
#fff-harmonic-galaxy .fff-hg__ticks{color:var(--fff-muted)}
#fff-harmonic-galaxy input[type=range]{accent-color:var(--fff-accent)}
#fff-harmonic-galaxy .fff-hg__presets button.is-active{
  color:var(--fff-accent);
  background:var(--fff-accent-soft);
  border-color:rgba(29,75,62,.28);
}
#fff-harmonic-galaxy .fff-hg__explain{
  background:#fff;
  border-color:var(--fff-border);
}
#fff-harmonic-galaxy .fff-hg__explain b{color:var(--fff-accent)}
@media(max-width:760px){
  #fff-harmonic-galaxy.fff-hg{border-radius:18px}
  #fff-harmonic-galaxy .fff-hg__lab-intro{display:block;padding:15px 16px 14px}
  #fff-harmonic-galaxy .fff-hg__lab-intro p{margin-top:7px;font-size:12px}
  #fff-harmonic-galaxy .fff-hg__stage{border-radius:0;aspect-ratio:1/1}
  #fff-harmonic-galaxy .fff-hg__controls{padding:16px;border-radius:0}
}