:root{--ice:#dff8ff;--blue:#76d8ff;--muted:#7895a9;--line:#7fd4f526;--deep:#020817;--ease:cubic-bezier(.16,1,.3,1)}
*{box-sizing:border-box}html,body{width:100%;height:100%;min-height:100dvh;margin:0;overflow:hidden;background:var(--deep);color:var(--ice);font-family:"Helvetica Neue","PingFang SC","Hiragino Sans GB",sans-serif}button,a,input{font:inherit}button,a{color:inherit}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
body:before{content:"";position:fixed;inset:0;pointer-events:none;background:radial-gradient(circle at 73% 46%,#174c7c61 0,transparent 28%),radial-gradient(circle at 88% 16%,#16678d20 0,transparent 22%),linear-gradient(145deg,#031127,#020714 66%);}
body:after{content:"";position:fixed;inset:0;pointer-events:none;opacity:.045;mix-blend-mode:screen;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
#source-field,#cosmos-field{position:fixed;inset:0;width:100%;height:100%;pointer-events:none}#source-field{z-index:1}#cosmos-field{z-index:2;mix-blend-mode:screen;filter:saturate(.92)}.product-bar{position:fixed;z-index:5;left:0;right:0;top:0;display:flex;align-items:center;justify-content:space-between;height:72px;padding:0 3vw;border-bottom:1px solid var(--line)}.product-mark{display:flex;align-items:baseline;gap:12px;text-decoration:none}.product-mark b{font-size:15px;font-weight:500;letter-spacing:.06em}.product-mark span{color:#7190a4;font-size:15px;letter-spacing:.18em}.bar-actions{display:flex;gap:20px}.quiet-button,.close-player{min-width:46px;padding:8px 0;border:0;border-bottom:1px solid #82cdea55;background:none;color:#9bb8c9;font-size:15px;letter-spacing:.12em;cursor:pointer}.quiet-button:hover,.close-player:hover{color:white;border-color:#a9ebff}
.experience{position:relative;z-index:3;width:100%;height:100%;pointer-events:none}.launch{position:absolute;left:3vw;bottom:6vh;width:min(540px,43vw);text-align:left;pointer-events:auto;transition:opacity .7s var(--ease),transform .8s var(--ease),visibility .7s}.launch>p{margin:0 0 18px;color:#7e9db0;font-size:15px;letter-spacing:.18em}.mode-grid{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);background:#0411217a;backdrop-filter:blur(16px)}.mode{min-height:58px;padding:10px;border:0;border-right:1px solid var(--line);background:transparent;color:#829cac;cursor:pointer;transition:background .25s,color .25s}.mode:last-child{border-right:0}.mode b,.mode span{display:block}.mode b{font-size:15px;font-weight:500;letter-spacing:.05em}.mode span{margin-top:6px;font-size:15px;letter-spacing:.16em}.mode:hover,.mode.active{color:#effcff;background:#69d2ff10}.mode.active{box-shadow:inset 0 -2px #74dcff}.mode:focus-visible,.start:focus-visible,.play-toggle:focus-visible{outline:2px solid #8ce5ff;outline-offset:3px}
.start{display:inline-flex;align-items:center;gap:22px;margin-top:18px;padding:12px 0;border:0;border-bottom:1px solid #a8e6ff88;background:transparent;color:#e7faff;font-size:15px;letter-spacing:.12em;cursor:pointer}.start i{width:0;height:0;border-top:4px solid transparent;border-bottom:4px solid transparent;border-left:7px solid #92e5ff;filter:drop-shadow(0 0 6px #58ccff)}.launch>small{display:block;margin-top:13px;color:#668294;font-size:15px;letter-spacing:.08em}
.player{position:absolute;left:3vw;bottom:4vh;display:flex;align-items:center;gap:14px;width:min(650px,46vw);padding:12px 16px;border:1px solid var(--line);background:#04111ee0;backdrop-filter:blur(18px);pointer-events:auto;opacity:0;visibility:hidden;transform:translateY(16px);transition:opacity .7s var(--ease),transform .8s var(--ease),visibility .7s}.play-toggle{position:relative;flex:0 0 38px;width:38px;height:38px;border:1px solid #74cae94f;border-radius:50%;background:#5cd1ff0c;cursor:pointer}.play-toggle i:before,.play-toggle i:after{content:"";position:absolute;top:12px;width:2px;height:13px;background:#c7f3ff}.play-toggle i:before{left:15px}.play-toggle i:after{right:15px}.is-paused .play-toggle i:before{left:16px;top:13px;width:0;height:0;border-top:6px solid transparent;border-bottom:6px solid transparent;border-left:9px solid #c7f3ff;background:none}.is-paused .play-toggle i:after{display:none}.transport{position:relative;flex:0 0 24px;width:24px;height:32px;border:0;background:transparent;opacity:.48;cursor:pointer}.transport:hover{opacity:1}.transport i:before{content:"";position:absolute;left:7px;top:11px;width:0;height:0;border-top:5px solid transparent;border-bottom:5px solid transparent;border-left:7px solid #bcefff}.transport i:after{content:"";position:absolute;left:15px;top:10px;width:1px;height:12px;background:#bcefff}.transport.previous{transform:rotate(180deg)}.now-playing{min-width:150px}.now-playing b,.now-playing span{display:block}.now-playing b{font-size:15px;font-weight:500}.now-playing span{margin-top:5px;color:#7190a2;font-size:15px;letter-spacing:.13em}.player time{margin-left:auto;color:#8aa8b8;font-size:15px;letter-spacing:.12em}.volume{display:flex;align-items:center;gap:8px;color:#718c9c;font-size:15px}.volume input{width:74px;accent-color:#77d9ff}.close-player{min-width:34px}.is-playing .launch{opacity:0;visibility:hidden;transform:translateY(20px)}.is-playing .player{opacity:1;visibility:visible;transform:translateY(0)}
.playlist-panel{position:fixed;z-index:8;right:3vw;top:88px;bottom:24px;width:min(390px,calc(100vw - 32px));display:flex;flex-direction:column;padding:24px;border:1px solid #7ed8f63d;background:#03101deb;box-shadow:0 30px 100px #000b;backdrop-filter:blur(22px);opacity:0;visibility:hidden;pointer-events:none;transform:translate3d(18px,0,0);transition:opacity .3s ease,transform .45s var(--ease),visibility .3s}.playlist-panel.open{opacity:1;visibility:visible;pointer-events:auto;transform:none}.playlist-panel header{display:flex;align-items:flex-start;justify-content:space-between;padding-bottom:18px;border-bottom:1px solid var(--line)}.playlist-panel small{display:block;color:#6d91a5;font-size:15px;letter-spacing:.17em}.playlist-panel h2{margin:7px 0 0;font-size:24px;font-weight:400;letter-spacing:-.04em}.playlist-panel header button{width:38px;height:38px;margin:-8px -8px 0 0;border:0;background:transparent;color:#9dbccc;font-size:24px;font-weight:200;cursor:pointer}.track-list{min-height:0;margin-top:8px;overflow:auto;scrollbar-width:thin;scrollbar-color:#6597ad55 transparent}.track-list::-webkit-scrollbar{width:4px}.track-list::-webkit-scrollbar-track{background:transparent}.track-list::-webkit-scrollbar-thumb{border-radius:999px;background:#6597ad55}.track-list::-webkit-scrollbar-thumb:hover{background:#8fcbe277}.album-heading{display:grid;grid-template-columns:1fr auto;align-items:end;gap:3px 12px;padding:24px 4px 10px;border-bottom:1px solid #7ed8f62b;color:#dff8ff}.album-heading:first-child{padding-top:14px}.album-heading>span{grid-column:1/3;color:#567d91;font-size:15px;letter-spacing:.16em}.album-heading>b{font-size:15px;font-weight:500;letter-spacing:.08em}.album-heading>small{color:#6d91a5;font-size:15px;letter-spacing:.12em}.track{display:grid;grid-template-columns:32px 1fr auto;gap:12px;align-items:center;width:100%;padding:16px 4px;border:0;border-bottom:1px solid var(--line);background:transparent;color:#8da8b8;text-align:left;cursor:pointer}.track:hover,.track.active{color:#eefcff}.track.active{background:linear-gradient(90deg,#65d7ff10,transparent)}.track>span{font-size:15px;letter-spacing:.12em}.track b,.track small{display:block}.track b{font-size:15px;font-weight:500}.track small{margin-top:5px;color:#67889a;font-size:15px;letter-spacing:.08em}.track>i{width:5px;height:5px;border-radius:50%;background:#588097}.track.active>i{background:#b6f3ff;box-shadow:0 0 12px #55d7ff}.track[aria-disabled="true"]{opacity:.36;cursor:wait}
.signal-note,.shortcut-note,.form-status{position:fixed;z-index:4;margin:0;color:#506b7d;font-size:15px;letter-spacing:.12em}.signal-note,.shortcut-note{bottom:20px}.signal-note{left:3vw}.shortcut-note{right:3vw}.is-playing .shortcut-note{opacity:.5}.form-status{right:3vw;bottom:39px;display:flex;align-items:baseline;gap:9px;opacity:.34;transition:opacity .3s ease}.form-status:hover{opacity:.72}.form-status span{font-variant-numeric:tabular-nums}.form-status b{color:#7190a4;font-size:15px;font-weight:400;letter-spacing:.08em}
.collection-source-status{position:fixed;z-index:4;left:3vw;top:88px;margin:0;max-width:min(520px,calc(100vw - 32px));padding:10px 14px;border:1px solid #86d9ee55;background:#061827b8;color:#cfeef4;font-size:15px;line-height:1.45;letter-spacing:.04em;backdrop-filter:blur(12px)}
.atlas-panel{position:fixed;z-index:8;right:3vw;top:88px;bottom:24px;width:min(470px,calc(100vw - 32px));display:flex;flex-direction:column;padding:24px;border:1px solid #7ed8f63d;background:#03101df0;box-shadow:0 30px 100px #000b;backdrop-filter:blur(22px);opacity:0;visibility:hidden;pointer-events:none;transform:translate3d(18px,0,0);transition:opacity .3s ease,transform .45s var(--ease),visibility .3s}.atlas-panel.open{opacity:1;visibility:visible;pointer-events:auto;transform:none}.atlas-panel>header{display:flex;align-items:flex-start;justify-content:space-between;padding-bottom:17px;border-bottom:1px solid var(--line)}.atlas-panel>header small{display:block;color:#6d91a5;font-size:15px;letter-spacing:.17em}.atlas-panel h2{margin:7px 0 0;font-size:24px;font-weight:400;letter-spacing:-.04em}.atlas-panel>header p{margin:8px 0 0;color:#6d8798;font-size:15px;line-height:1.55;letter-spacing:.06em}.atlas-panel>header button{flex:0 0 38px;width:38px;height:38px;margin:-8px -8px 0 10px;border:0;background:transparent;color:#9dbccc;font-size:24px;font-weight:200;cursor:pointer}.atlas-filters{display:flex;gap:5px;padding:12px 0;overflow-x:auto;border-bottom:1px solid var(--line);scrollbar-width:none}.atlas-filters::-webkit-scrollbar{display:none}.atlas-filter{flex:0 0 auto;min-height:34px;padding:0 11px;border:1px solid #7ed8f626;background:#06162580;color:#66899c;font-size:15px;letter-spacing:.09em;cursor:pointer}.atlas-filter:hover,.atlas-filter.active{border-color:#83dbf75e;color:#e6faff;background:#69d2ff0d}.atlas-list{min-height:0;overflow:auto;padding-right:4px;scrollbar-width:thin;scrollbar-color:#6597ad55 transparent}.atlas-list::-webkit-scrollbar{width:4px}.atlas-list::-webkit-scrollbar-track{background:transparent}.atlas-list::-webkit-scrollbar-thumb{border-radius:999px;background:#6597ad55}.atlas-group{padding:18px 0 6px}.atlas-group>header{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:9px}.atlas-group>header b{font-size:15px;font-weight:500;letter-spacing:.12em}.atlas-group>header small{color:#547386;font-size:15px;letter-spacing:.11em}.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px}.form-choice{display:grid;grid-template-columns:28px minmax(0,1fr) 5px;align-items:center;gap:8px;min-height:55px;padding:8px 10px;border:1px solid #7ed8f61f;background:#06152269;color:#7896a7;text-align:left;cursor:pointer}.form-choice>span{font-size:15px;font-variant-numeric:tabular-nums;letter-spacing:.08em}.form-choice b{overflow:hidden;color:#a9c3d0;font-size:15px;font-weight:500;text-overflow:ellipsis;white-space:nowrap}.form-choice i{width:4px;height:4px;border-radius:50%;background:#496f84}.form-choice:hover,.form-choice.active{border-color:#7bdcff52;background:linear-gradient(115deg,#67d8ff13,transparent);color:#bcefff}.form-choice.active b{color:#f0fcff}.form-choice.active i{background:#c4f5ff;box-shadow:0 0 11px #60dcff}.atlas-panel>footer{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:13px;margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}.atlas-panel>footer>small{color:#506d7e;font-size:15px;line-height:1.5;letter-spacing:.05em}.atlas-auto{display:flex;align-items:center;gap:9px;min-height:42px;padding:0 11px;border:1px solid #7ed8f62d;background:transparent;color:#7595a6;text-align:left;cursor:pointer}.atlas-auto>i{width:6px;height:6px;border-radius:50%;border:1px solid #7098aa}.atlas-auto span,.atlas-auto b,.atlas-auto small{display:block}.atlas-auto b{font-size:15px;font-weight:500;letter-spacing:.08em}.atlas-auto small{margin-top:3px;color:#557485;font-size:15px;letter-spacing:.06em}.atlas-auto.active{border-color:#78d9f94d;color:#e2f9ff}.atlas-auto.active>i{border:0;background:#a9efff;box-shadow:0 0 10px #63d8ff}.atlas-filter:focus-visible,.form-choice:focus-visible,.atlas-auto:focus-visible,.atlas-panel>header button:focus-visible,.quiet-button:focus-visible{outline:2px solid #8ce5ff;outline-offset:2px}
@media(max-width:900px){body:before{background:radial-gradient(circle at 50% 47%,#174c7c55 0,transparent 36%),linear-gradient(145deg,#031127,#020714 66%)}#cosmos-field{opacity:.72}.product-bar{height:calc(60px + env(safe-area-inset-top));padding:env(safe-area-inset-top) max(16px,env(safe-area-inset-right)) 0 max(16px,env(safe-area-inset-left))}.quiet-button{min-width:48px;min-height:44px;font-size:15px}.bar-actions{gap:8px}.launch{left:50%;bottom:max(24px,calc(16px + env(safe-area-inset-bottom)));width:min(620px,calc(100vw - 32px));transform:translateX(-50%);text-align:center}.player{left:50%;bottom:max(12px,env(safe-area-inset-bottom));width:calc(100% - 24px);transform:translate(-50%,16px)}.is-playing .player{transform:translate(-50%,0)}.is-playing .launch{transform:translate(-50%,20px)}.now-playing{min-width:0;flex:1}.shortcut-note{display:none}.signal-note{left:max(16px,env(safe-area-inset-left));bottom:auto;top:calc(70px + env(safe-area-inset-top))}.form-status{right:max(16px,env(safe-area-inset-right));bottom:auto;top:calc(70px + env(safe-area-inset-top));opacity:.28}.collection-source-status{left:max(16px,env(safe-area-inset-left));top:calc(116px + env(safe-area-inset-top));max-width:calc(100vw - 32px)}.form-status b{display:none}.product-mark span{display:none}.playlist-panel{left:12px;right:12px;top:calc(72px + env(safe-area-inset-top));bottom:max(12px,env(safe-area-inset-bottom));width:auto;padding:18px}}
@media(max-width:767px){body:after{opacity:.032}.product-mark b{font-size:15px}.launch>p{margin-bottom:12px}.mode-grid{grid-template-columns:repeat(4,minmax(0,1fr));background:#0411219c}.mode{min-height:56px;padding:9px 3px;border-right:1px solid var(--line);touch-action:manipulation}.mode:nth-child(2){border-right:1px solid var(--line)}.mode:nth-child(-n+2){border-bottom:0}.mode:last-child{border-right:0}.mode b{font-size:15px}.mode span{margin-top:5px;font-size:15px;letter-spacing:.08em}.start{display:flex;justify-content:space-between;width:100%;min-height:48px;margin-top:12px;padding:0 16px;border:1px solid #83dff15e;background:#07182799;backdrop-filter:blur(14px)}.launch>small{margin-top:10px}.player{display:grid;grid-template-columns:32px 44px 32px minmax(0,1fr) auto;grid-template-rows:46px 32px;gap:6px 8px;padding:10px 12px max(10px,env(safe-area-inset-bottom));background:#04111ef2}.transport{display:block;width:32px;height:44px;opacity:.64;touch-action:manipulation}.transport i:before{left:10px;top:16px}.transport i:after{left:18px;top:15px}.play-toggle{width:44px;height:44px;flex-basis:44px;touch-action:manipulation}.play-toggle i:before{left:17px;top:14px}.play-toggle i:after{right:17px;top:14px}.is-paused .play-toggle i:before{left:18px;top:15px}.previous{grid-column:1;grid-row:1}.play-toggle{grid-column:2;grid-row:1}.next{grid-column:3;grid-row:1}.now-playing{grid-column:4;grid-row:1;align-self:center;overflow:hidden}.now-playing b,.now-playing span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.player time{grid-column:5;grid-row:1;align-self:center;margin:0}.volume{grid-column:1/5;grid-row:2;display:grid;grid-template-columns:auto 1fr;gap:10px;min-width:0}.volume span{display:block}.volume input{width:100%;min-width:0;height:28px;margin:0}.close-player{grid-column:5;grid-row:2;min-width:44px;min-height:32px;padding:0;touch-action:manipulation}.playlist-panel{border-left:0;border-right:0;padding:18px max(18px,env(safe-area-inset-right)) max(18px,env(safe-area-inset-bottom)) max(18px,env(safe-area-inset-left));box-shadow:none}.playlist-panel header button{width:44px;height:44px}.track{min-height:64px;padding:12px 4px;touch-action:manipulation}.signal-note{font-size:15px;letter-spacing:.08em}}
@media(max-width:380px){.product-bar{padding-left:12px;padding-right:12px}.bar-actions{gap:2px}.launch{width:calc(100vw - 24px)}.mode b{font-size:15px}.mode span{font-size:15px}.player{width:calc(100% - 16px);grid-template-columns:30px 42px 30px minmax(0,1fr) auto;gap:5px 6px;padding-left:8px;padding-right:8px}.player time{display:none}.now-playing{grid-column:4/6}.close-player{grid-column:5}.volume{grid-column:1/5}}
@media(max-height:680px) and (max-width:767px){.launch{bottom:max(12px,env(safe-area-inset-bottom))}.launch>p,.launch>small,.signal-note{display:none}.mode{min-height:48px}.start{min-height:44px;margin-top:8px}.player{grid-template-rows:42px 28px;padding-top:7px;padding-bottom:max(7px,env(safe-area-inset-bottom))}.play-toggle{width:40px;height:40px}.transport{height:40px}}
@media(max-width:900px){.atlas-panel{left:12px;right:12px;top:calc(72px + env(safe-area-inset-top));bottom:max(12px,env(safe-area-inset-bottom));width:auto;padding:18px}}
@media(max-width:767px){.atlas-panel{border-left:0;border-right:0;padding:18px max(14px,env(safe-area-inset-right)) max(14px,env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left));box-shadow:none}.atlas-panel>header button{width:44px;height:44px}.atlas-filters{padding:10px 0}.atlas-filter{min-height:44px}.form-choice{min-height:58px;padding:8px}.atlas-panel>footer{grid-template-columns:1fr}.atlas-auto{min-height:46px}.atlas-panel>footer>small{display:none}}
@media(max-width:380px){.form-grid{grid-template-columns:1fr}.atlas-panel h2{font-size:21px}.atlas-panel>header p{display:none}}
/* Readability pass: preserve the quiet hierarchy without using display-size microtype. */
.product-mark b{font-size:15px}.product-mark span{color:#8ca9b9;font-size:15px;letter-spacing:.12em}.quiet-button,.close-player{color:#b2cad6;font-size:15px;letter-spacing:.08em}.launch>p{color:#a0b9c7;font-size:15px;letter-spacing:.12em}.mode b{font-size:15px}.mode span{color:#91aebe;font-size:15px;letter-spacing:.09em}.start{font-size:15px}.launch>small{color:#8ca7b6;font-size:15px;line-height:1.5}.now-playing b{font-size:15px}.now-playing span{color:#8ca8b7;font-size:15px;letter-spacing:.08em}.player time{font-size:15px}.volume{color:#91aab7;font-size:15px}.playlist-panel small{color:#89a6b6;font-size:15px;letter-spacing:.1em}.playlist-panel h2{font-size:26px}.album-heading>span{color:#7697a8;font-size:15px;letter-spacing:.08em}.album-heading>b{font-size:16px}.album-heading>small{font-size:15px}.track>span{font-size:15px;letter-spacing:.08em}.track b{font-size:15px;line-height:1.35}.track small{color:#809eae;font-size:15px;line-height:1.4;letter-spacing:.04em}.signal-note,.shortcut-note,.form-status{color:#7895a6;font-size:15px;letter-spacing:.06em}.form-status{opacity:.68}.form-status b{color:#91acba;font-size:15px}.atlas-panel>header small{color:#89a6b6;font-size:15px;letter-spacing:.08em}.atlas-panel h2{font-size:26px}.atlas-panel>header p{color:#91aab8;font-size:15px;line-height:1.55}.atlas-filter{color:#8facbb;font-size:15px;letter-spacing:.04em}.atlas-group>header{align-items:flex-start}.atlas-group>header b{font-size:15px;line-height:1.4;letter-spacing:.08em}.atlas-group>header small{max-width:62%;color:#7695a6;font-size:15px;line-height:1.4;text-align:right;letter-spacing:.03em}.form-choice>span{font-size:15px}.form-choice b{color:#b7cfda;font-size:15px}.atlas-panel>footer>small{color:#7694a4;font-size:15px;line-height:1.5}.atlas-auto b{font-size:15px}.atlas-auto small{color:#7694a4;font-size:15px;line-height:1.35}.atlas-auto{min-height:50px}.form-choice{min-height:62px}.atlas-filter{min-height:40px}
@media(max-width:900px){.quiet-button{font-size:15px}.signal-note,.form-status{font-size:15px}.form-status{opacity:.72}.product-mark b{font-size:15px}}
@media(max-width:767px){.mode b{font-size:15px}.mode span{font-size:15px}.signal-note{font-size:15px}.track{min-height:72px}.atlas-filter{font-size:15px}.form-choice{min-height:64px}.atlas-panel>footer>small{display:none}}
@media(max-width:380px){.mode b{font-size:15px}.mode span{font-size:15px}.atlas-panel h2{font-size:24px}.form-grid{grid-template-columns:1fr}.form-choice b{font-size:15px}}
@media(prefers-reduced-motion:reduce){.launch,.player,.atlas-panel{transition:none}#cosmos-field{display:none}}
#cosmos-field{cursor:grab;touch-action:none;pointer-events:auto}#cosmos-field:active{cursor:grabbing}#cosmos-field:focus-visible{outline:2px solid #8ce5ff;outline-offset:-4px}