#sound-toggle{position:fixed;inset-inline-end:22px;bottom:20px;z-index:45;width:46px;height:46px;padding:0;display:grid;place-items:center;background:#0d1b32;border:1px solid #536681;border-radius:50%;color:#c0baff;cursor:pointer;box-shadow:0 3px 12px #02081266;transition:border-color .2s,color .2s,background .2s}
#sound-toggle:hover{border-color:#e6c9ff;color:#e6c9ff;background:#14243e}
#sound-toggle:focus-visible{outline:2px solid #e6c9ff;outline-offset:4px}
#sound-toggle .sound-note{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
#sound-toggle .sound-bars{display:none;height:26px;align-items:center;gap:3px}
#sound-toggle .sound-bars i{display:block;width:3px;height:24px;border-radius:2px;background:currentColor;transform-origin:center}
#sound-toggle.is-playing{color:#e6c9ff;border-color:#b6afff;background:#1b2944}
#sound-toggle.is-playing .sound-note{display:none}#sound-toggle.is-playing .sound-bars{display:flex}
/* Real audio frequency energy controls each bar; no timed CSS loop. */
#sound-toggle .sound-bars i{animation:none!important;transition:none!important;transform:scaleY(.12);will-change:transform}
.particle-world footer{padding-bottom:90px}
@media(max-width:760px){#sound-toggle{inset-inline-end:14px;bottom:calc(14px + env(safe-area-inset-bottom,0px));width:44px;height:44px}}


.particle-world .hero-bottom{padding-inline-end:64px}

#music-panel{position:fixed;inset-inline-end:22px;bottom:80px;width:330px;max-width:calc(100vw - 28px);max-height:calc(100svh - 110px);overflow:auto;z-index:46;padding:22px;background:#0d1b31;border:1px solid #536681;border-radius:12px;box-shadow:0 12px 40px #02081288;color:#edf3ff;text-shadow:none;font-size:13px}
#music-panel[hidden]{display:none}
#music-panel .music-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
#music-panel .music-top strong{font-size:14px;font-weight:500;color:#c0baff}
#music-panel button{display:grid;place-items:center;min-width:42px;min-height:42px;border:1px solid #405578;border-radius:6px;background:#14243e;color:#e6c9ff;padding:6px;font:inherit;cursor:pointer}
#music-panel button:hover{background:#233554;border-color:#b6afff}
#music-panel button:disabled{opacity:.35;cursor:default}
#music-panel #music-close{border:0;background:none;font-size:24px;min-width:32px;min-height:32px;padding:0}
#music-state{font-size:11px;color:#91a3bd;margin:12px 0 5px;min-height:19px}
#music-title{font-size:20px;line-height:1.35;font-weight:500;margin:0 0 4px;overflow-wrap:anywhere}
#music-panel .music-transport{display:flex;align-items:center;justify-content:center;gap:16px;margin:18px 0 15px;direction:ltr}
#music-panel #music-play{width:50px;height:50px;background:#b6afff;color:#122142;border:0;border-radius:50%;font-size:21px}
#music-panel .music-progress input,#music-panel .music-volume input{width:100%;min-width:0;accent-color:#c0baff;cursor:pointer;height:22px;background:transparent;padding:0;border:0}
#music-panel .music-progress{direction:ltr}
#music-panel .music-progress>div{display:flex;justify-content:space-between;color:#91a3bd;font-size:10px;font-variant-numeric:tabular-nums}
#music-panel .music-volume{display:flex;align-items:center;gap:10px;margin:14px 0}
#music-panel #music-mute{min-width:34px;min-height:34px}
#music-level{font-size:11px;min-width:32px;text-align:end;color:#b6c4da}
#music-panel .music-track-label{font-size:11px;color:#91a3bd;display:block;margin:12px 0 6px}
#music-panel select{width:100%;min-height:42px;background:#091323;color:#edf3ff;border:1px solid #405578;border-radius:4px;font-size:12px;padding:8px;direction:inherit}
#music-panel .music-repeat{display:flex;align-items:center;gap:8px;font-size:12px;color:#aabbd7;margin-top:14px;cursor:pointer}
#music-panel .music-repeat input{accent-color:#b6afff;width:16px;height:16px;margin:0}
@media(max-width:760px){#music-panel{inset-inline-end:14px;bottom:calc(70px + env(safe-area-inset-bottom,0px));padding:18px;max-height:calc(100svh - 95px)}}

#music-picker{margin-top:12px;border:1px solid #405578;border-radius:6px;overflow:hidden}
#music-choose{padding:12px;color:#c0baff;cursor:pointer;font-size:12px;min-height:42px;box-sizing:border-box}
#music-choose:hover{background:#14243e;color:#e6c9ff}
#music-choose:focus-visible{outline:2px solid #e6c9ff;outline-offset:-3px}
#music-panel #music-picker select{width:calc(100% - 20px);margin:0 10px 10px}

/* Compact transport; the secondary control opens track and volume settings. */
#sound-toggle{width:32px;height:32px;bottom:20px;border-color:#52617d;background:#0b172a;box-shadow:0 2px 10px #02081244}
#sound-toggle .sound-note{width:15px;height:15px}
#sound-toggle .sound-bars{height:17px;gap:2px}
#sound-toggle .sound-bars i{width:2px;height:16px}
#sound-toggle:disabled{cursor:wait}
#sound-settings{position:fixed;inset-inline-end:60px;bottom:23px;z-index:45;width:26px;height:26px;display:grid;place-items:center;padding:0;border:1px solid #34445e;border-radius:8px;background:#0b172a;color:#9caccc;cursor:pointer;transition:color .2s,border-color .2s}
#sound-settings svg{width:16px;height:16px;fill:currentColor}
#sound-settings:hover,#sound-settings[aria-expanded="true"]{color:#e6c9ff;border-color:#b6afff}
#sound-settings:focus-visible{outline:2px solid #e6c9ff;outline-offset:3px}
#music-panel{width:260px;padding:14px;border-radius:12px;border-color:#40516e;bottom:64px;box-shadow:0 10px 35px #02081277}
#music-panel .music-top strong{font-size:12px}
#music-title{font-size:16px}
#music-state{margin-top:8px;font-size:10px}
#music-panel .music-transport{margin:9px 0;gap:12px}
#music-panel .music-transport>button{min-width:34px;min-height:34px;border-radius:9px}
#music-panel #music-play{width:36px;height:36px;border-radius:50%;font-size:16px}
#music-panel .music-volume{margin:10px 0}
#music-choose{padding:9px 10px;min-height:34px;font-size:11px}
#music-panel select{min-height:36px;font-size:11px}
#music-panel .music-repeat{font-size:11px;margin-top:11px}
@media(max-width:760px){#sound-toggle{bottom:calc(14px + env(safe-area-inset-bottom,0px))}#sound-settings{inset-inline-end:58px;bottom:calc(17px + env(safe-area-inset-bottom,0px))}#music-panel{bottom:calc(58px + env(safe-area-inset-bottom,0px))}}
@media(pointer:coarse){#sound-toggle:after,#sound-settings:after{content:'';position:absolute;top:50%;left:50%;width:44px;height:44px;transform:translate(-50%,-50%)}#sound-settings{inset-inline-end:calc(22px + 44px)}}

/* The shared hover area bridges the gap between playback and settings. */
#sound-dock{position:fixed;inset-inline-end:22px;bottom:20px;width:70px;height:32px;z-index:45;pointer-events:none}
#sound-dock #sound-toggle{position:absolute;inset-inline-end:0;bottom:0;pointer-events:auto}
#sound-dock #sound-settings{position:absolute;inset-inline-end:38px;bottom:3px;pointer-events:auto}
@media(hover:hover) and (pointer:fine){
  #sound-dock #sound-settings{opacity:0;pointer-events:none;transform:translateY(3px);transition:opacity .18s,transform .18s,color .2s,border-color .2s}
  #sound-dock:hover,#sound-dock:focus-within,#sound-dock:has(#sound-settings[aria-expanded="true"]){pointer-events:auto}
  #sound-dock:hover #sound-settings,#sound-dock:focus-within #sound-settings,#sound-dock #sound-settings[aria-expanded="true"]{opacity:1;pointer-events:auto;transform:none}
}
@media(max-width:760px){#sound-dock{inset-inline-end:14px;bottom:calc(14px + env(safe-area-inset-bottom,0px))}}
@media(pointer:coarse){#sound-dock{width:82px}#sound-dock #sound-settings{inset-inline-end:50px}}
@media(prefers-reduced-motion:reduce){#sound-dock #sound-settings{transition:none;transform:none}}