:root{color-scheme:dark;--ink:#e8f0f7;--muted:#8494a6;--line:#b1d5f51a;--ice:#bce6fa;font-family:'Helvetica Neue',Helvetica,Arial,'Microsoft YaHei',sans-serif;background:#05080c;color:var(--ink)}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:24px}body{margin:0;min-width:320px}button,input,select{font:inherit}button,a,select{-webkit-tap-highlight-color:transparent}button{cursor:pointer}a{color:inherit;text-decoration:none}button{color:inherit}button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible{outline:2px solid #a6e3fa;outline-offset:5px}svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}.symbols{position:absolute;width:0;height:0}.backdrop{position:fixed;inset:0;overflow:hidden;z-index:-1;background:radial-gradient(ellipse at 78% 34%,#101c28 0%,#060b12 50%,#030609 90%);pointer-events:none}.blue-haze{position:absolute;inset:0;background:radial-gradient(ellipse 40% 55% at 64% 30%,#83b9df16,transparent 80%)}.orbit{position:absolute;border:1px solid #a6c8e91c;border-radius:50%;width:690px;height:690px;right:-470px;top:130px}.orbit-two{width:820px;height:820px;right:-535px;top:65px}.orbit-three{width:500px;height:500px;left:-360px;top:330px}.record-edge{position:absolute;left:-380px;bottom:-250px;width:650px;height:650px;border-radius:50%;background:repeating-radial-gradient(circle,transparent 0 4px,#b4d5f908 4.5px 5px);mask-image:radial-gradient(circle,transparent 28%,#000 30%,#000 68%,transparent 71%)}.ambient{position:fixed;inset:0;box-shadow:inset 0 0 2px #bcecff70,inset 0 0 12px #4bb6ec25;pointer-events:none;z-index:12}#field{position:fixed;inset:0;width:100%;height:100%;z-index:100;pointer-events:none}.topbar{height:104px;margin:0 4%;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:20px}.logo{font-family:Impact,'Arial Narrow',sans-serif;font-size:60px;font-weight:900;line-height:.9;letter-spacing:1.5px;color:#f4f6fb;text-shadow:-3px 0 #00e8f0,3px 0 #ff087f}.logo sup{font:11px Arial;vertical-align:top;text-shadow:none;margin-left:3px}.top-context{font-size:10px;letter-spacing:2px;color:#a3b9cb}.top-context span{padding:0 16px;color:#435463}.back-link{display:flex;align-items:center;gap:12px;font-size:11px;padding:11px 17px;border:1px solid #c2e1ff29;border-radius:24px;background:#0c1015}.back-link svg{width:16px}.workspace{display:grid;grid-template-columns:230px minmax(0,1fr);gap:64px;max-width:1520px;padding:45px 4% 0;margin:auto}.sidebar{padding-top:9px}.breadcrumb,.kicker{font-size:9px;letter-spacing:2px;color:#a4bdd3}.sidebar h1{font-size:48px;line-height:1.23;letter-spacing:-2px;margin:23px 0 17px;font-weight:900}.sidebar h1 span{color:#94c8e4}.intro{font-size:11px;color:var(--muted);line-height:2;letter-spacing:.6px}.identity{display:grid;grid-template-columns:40px 1fr 22px;gap:10px;align-items:center;border-top:1px solid var(--line);padding-top:25px;margin-top:37px}.identity h2{font-size:13px;font-weight:500;margin:0 0 6px}.identity p{font-size:9px;line-height:1.6;color:var(--muted);margin:0;overflow-wrap:anywhere}.avatar{width:36px;height:36px;border-radius:50%;border:1px solid #97bac740;background:radial-gradient(circle at 30% 15%,#6895a657,#12212d 65%);display:flex;align-items:center;justify-content:center;gap:3px}.avatar i{width:2px;height:11px;background:#c8eafa;border-radius:2px}.avatar i:nth-child(2){height:20px}.avatar i:nth-child(3){height:15px}.icon-button{border:0;background:none;color:#809caf;padding:0}.icon-button svg{width:15px}.side-nav{margin-top:35px;display:grid;gap:6px}.side-nav a{display:flex;align-items:center;gap:14px;padding:15px 13px;font-size:11px;color:#7d8e9f;border-radius:5px;border:1px solid transparent}.side-nav a span{font-size:8px;color:#5e788d}.side-nav a svg{margin-left:auto;width:15px;opacity:0}.side-nav a.active{color:#d8effc;border-color:#afd8ec18;background:linear-gradient(95deg,#87c6e41a,#10182205)}.side-nav a.active svg,.side-nav a:hover svg{opacity:1}.source-control{margin-top:55px;border-top:1px solid var(--line);padding-top:22px}.source-control label{font-size:10px;color:#8fa4b7}.source-control select{display:block;margin-top:12px;width:100%;padding:10px 12px;border:1px solid #b3d6ec25;background:#0c131c;border-radius:5px;font-size:11px;color:#cde1ef}.source-control p{font-size:9px;line-height:1.8;color:#708193}.export-button{margin-top:20px;font-size:10px;display:flex;gap:10px;align-items:center;background:none;border:0;color:#b8cddd;padding:0}.export-button svg{width:15px}.section-top,.panel-heading{display:flex;align-items:center;justify-content:space-between;gap:16px}.section-top h2{font-size:21px;margin:10px 0 0;font-weight:500;letter-spacing:1px}.periods{display:flex;padding:4px;border-radius:30px;border:1px solid #c5dcf220;background:#080c12}.periods button{border:0;border-radius:25px;background:none;color:#8b9bab;padding:9px 14px;font-size:10px}.periods button[aria-pressed=true]{background:linear-gradient(120deg,#1b2c39,#15202a);color:#d8eaf5;box-shadow:inset 0 1px 0 #c7ecff25}.listening-scene{height:365px;position:relative;margin-top:12px;overflow:hidden}.scene-axis{position:absolute;width:82%;height:1px;left:9%;top:49%;background:linear-gradient(90deg,transparent,#aec7e71a,transparent);transform:rotate(-16deg)}.listening-record{position:absolute;left:49%;top:49%;width:310px;height:310px;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,#101e2d 0 30%,transparent 61%),conic-gradient(from 18deg,#121d26,#7996b222 55deg,#0a1016 108deg,#0e1824 210deg,#b9d1eb16 255deg,#101821 300deg,#121d26);border:1px solid #b9dff535;box-shadow:0 0 65px #70b7e912,inset 0 0 25px #c0dfff06}.record-rings{position:absolute;inset:9px;border-radius:50%;background:repeating-radial-gradient(circle,transparent 0 4px,#b5dbf814 4.4px 5px);mask-image:radial-gradient(circle,transparent 0 47%,#000 48%)}.listening-record:before,.listening-record:after{content:'';position:absolute;inset:-15px;border:1px solid #bdd5ec12;border-radius:50%}.listening-record:after{inset:-29px;border-style:dashed;border-color:#bdd5ec0d;animation:rotate 100s linear infinite}.record-label{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:2;padding-bottom:12px}.record-label>span{font-size:10px;letter-spacing:3px;color:#a2b8c9}.record-label strong{font-size:58px;letter-spacing:-3px;font-weight:300;margin:9px 0 1px;line-height:1.1;font-variant-numeric:tabular-nums}.record-label p{display:flex;align-items:center;gap:8px;font-size:9px;color:#809bad}.live-dot{width:4px;height:4px;border-radius:50%;background:#b4eeff;box-shadow:0 0 8px #8eeaff}.record-wave{position:absolute;inset:0;width:100%;height:100%;opacity:.12;stroke:#aee6ff;stroke-width:.7}.stat{position:absolute;z-index:3;width:175px;padding:16px 19px;border:1px solid #8fc3e333;border-radius:17px;background:linear-gradient(125deg,#0a0d13e8,#14212be8);box-shadow:inset 0 1px 0 #d6eeff0e,0 9px 24px #0004}.stat:after{content:'';position:absolute;width:45px;height:1px;background:#bcdffb44;top:50%;right:-46px;transform:rotate(-16deg);transform-origin:left}.stat-label{font-size:10px;color:#afc3d4}.stat>div{display:flex;align-items:baseline;gap:7px;margin:8px 0}.stat strong{font-size:31px;line-height:1;font-weight:300;letter-spacing:-1px}.stat>div>span{font-size:10px;color:#7890a4}.stat small{font-size:8px;color:#6d8397}.stat-tracks{top:50px;left:1%}.stat-days{top:55px;right:0}.stat-days:after,.stat-saved:after{right:auto;left:-46px;transform:rotate(18deg)}.stat-saved{right:2%;bottom:25px}.scene-caption{position:absolute;left:3%;bottom:26px;font-size:7px;letter-spacing:2px;color:#5f7a91}.lower-grid{display:grid;grid-template-columns:1.35fr 1fr;gap:20px}.panel{min-width:0;border:1px solid #b5dafa1c;background:linear-gradient(135deg,#17253247,#060c125c);border-radius:12px;padding:23px 24px}.panel-heading h2{font-size:15px;font-weight:500;margin:8px 0 0}.panel .kicker,.favorites .kicker{font-size:8px;letter-spacing:1.5px}.muted{font-size:9px;color:#71889d}.panel-heading>svg{color:#86a8be;width:18px}.chart-summary{display:flex;align-items:baseline;gap:12px;margin:25px 0 17px}.chart-summary>strong{font-size:24px;font-weight:300}.chart-summary small{font-size:10px;color:#acc3d4}.chart-summary>span{font-size:9px;color:#728b9f}.chart-summary output{margin-left:auto;font-size:8px;color:#a1bacd}.chart{height:105px;display:flex;align-items:stretch;gap:11px;border-bottom:1px solid #b9daeb18;background:repeating-linear-gradient(to top,transparent 0 30px,#8cc0dd0c 30px 31px)}.bar{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding:0;border:0;background:none;position:relative}.bar i{display:block;width:min(24px,65%);height:var(--height);min-height:2px;background:linear-gradient(to top,#33506740,#a3c8dc);border:1px solid #b4d7e438;border-bottom:0;border-radius:3px 3px 0 0;transition:height .45s ease,filter .2s}.bar:hover i,.bar.selected i{filter:brightness(1.5);background:linear-gradient(to top,#48627766,#d0f1ff)}.bar span{font-size:8px;color:#7a8da0;position:absolute;top:calc(100% + 10px);white-space:nowrap}.chart-foot{display:flex;justify-content:space-between;gap:12px;margin-top:37px;font-size:8px;color:#637d92}.legend{white-space:nowrap}.legend i{display:inline-block;width:5px;height:5px;background:#a3c8dc;margin-right:6px}.dna{display:flex;gap:24px;align-items:center;justify-content:center;margin:28px 0 20px}.donut{position:relative;width:120px;height:120px;flex-shrink:0;border-radius:50%;background:conic-gradient(#badcf0 0 46%,#5c819e 46% 78%,#30485f 78%);box-shadow:0 0 30px #92bfd80d}.donut:before{content:'';position:absolute;inset:9px;border-radius:50%;background:#0c1620;border:1px solid #bce4ff12}.donut>span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;font-size:17px}.donut small{font-size:8px;color:#7e9aaf;margin-top:8px}.genre-list{display:grid;gap:18px;flex:1;max-width:140px}.genre-row{display:flex;align-items:center;gap:7px;font-size:10px}.genre-row i{width:5px;height:5px;border-radius:50%;background:var(--color)}.genre-row b{margin-left:auto;font-size:11px;font-weight:400;color:#b5cbdc}.preference-note{border-top:1px solid var(--line);padding-top:14px;font-size:9px;color:#7a93a7;margin-bottom:0}.favorites{padding-top:32px}.track-list{margin-top:18px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.track-card{border:1px solid #bedbf61a;background:#111b2544;border-radius:9px;padding:13px;display:grid;grid-template-columns:40px 1fr;gap:12px;align-items:center;position:relative}.cover{width:40px;height:45px;overflow:hidden;border-radius:3px;background:radial-gradient(ellipse at 70% 10%,#9aa0c4aa,transparent 50%),repeating-linear-gradient(35deg,#1f3447 0 3px,#31465a 3px 4px);position:relative}.cover:after{content:'';position:absolute;inset:10px 5px;border:1px solid #e0f6ff8a;transform:rotate(-18deg)}.cover-1{background:repeating-radial-gradient(circle at 0 100%,#354d4d 0 5px,#98bbaf66 6px 7px)}.cover-2{background:radial-gradient(circle at 30% 40%,#a8bec2,#203a4d 32%,#0c1420 67%)}.track-card strong{font-size:9px;font-weight:500;letter-spacing:.4px}.track-card p{margin:6px 0 0;font-size:8px;color:#8298a9}.track-card small{font-size:8px;color:#abc3d3;display:block;margin-top:7px}.rank{position:absolute;top:5px;right:7px;font-size:7px;color:#536d82}.empty-state{grid-column:1/-1;padding:25px;text-align:center;font-size:12px;color:#8ca2b5;border:1px dashed #93b5d326;border-radius:8px}.page-footer{display:flex;justify-content:space-between;gap:15px;border-top:1px solid var(--line);padding:20px 0 23px;margin-top:32px;font-size:8px;letter-spacing:1px;color:#5b748b}dialog{width:min(420px,90vw);border:1px solid #8badc84d;border-radius:16px;background:linear-gradient(145deg,#182532,#070c12);color:var(--ink);padding:28px;box-shadow:0 30px 100px #0009}dialog::backdrop{background:#01060bcc;backdrop-filter:blur(8px)}.dialog-title{display:flex;justify-content:space-between;align-items:center}.dialog-title h2{font-size:20px}.close-dialog{background:none;border:0;font-size:25px;color:#a6c1d5}dialog label{display:grid;gap:10px;font-size:11px;color:#a6bacb;margin-top:20px}dialog input{background:#050c14;border:1px solid #719cb940;border-radius:7px;color:#e1f2ff;padding:12px;width:100%}dialog p{font-size:10px;color:#728c9f;margin:18px 0}.save-button{width:100%;border:1px solid #b9dced55;background:linear-gradient(100deg,#23435b,#122532);border-radius:30px;padding:12px}.toast{position:fixed;bottom:30px;left:50%;transform:translate(-50%,15px);opacity:0;pointer-events:none;background:#172b3b;border:1px solid #add3eb44;border-radius:30px;padding:12px 25px;font-size:12px;z-index:110;transition:.25s}.toast.visible{opacity:1;transform:translate(-50%,0)}@keyframes rotate{to{rotate:360deg}}@media(pointer:fine) and (prefers-reduced-motion:no-preference){.stage.custom-cursor,.stage.custom-cursor *{cursor:none!important}}@media(min-width:1600px){.workspace{gap:90px}.listening-scene{height:400px}.listening-record{width:340px;height:340px}.stat-tracks{left:3%}.stat-days{right:3%}.stat-saved{right:5%}}@media(max-width:1150px){.workspace{grid-template-columns:190px minmax(0,1fr);gap:30px}.sidebar h1{font-size:39px}.stat{width:135px;padding:13px}.stat small{font-size:7px}.listening-record{width:260px;height:260px}.record-label strong{font-size:48px}.stat-tracks{top:35px;left:0}.stat-days{right:0;top:35px}.stat-saved{right:0;bottom:35px}.stat:after{width:18px;right:-19px}.stat-days:after,.stat-saved:after{left:-19px}.dna{gap:14px}.donut{width:95px;height:95px}.panel{padding:20px 16px}.periods button{padding:8px 10px}.track-list{grid-template-columns:1fr}.track-card{grid-template-columns:35px 1fr}.track-card small{position:absolute;right:16px;bottom:18px}.cover{width:35px;height:35px}.listening-scene{height:325px}}@media(max-width:850px){.topbar{height:84px}.logo{font-size:47px}.workspace{grid-template-columns:1fr;padding-top:28px;gap:28px}.sidebar{display:grid;grid-template-columns:1fr 1fr;column-gap:20px}.breadcrumb{grid-column:1/-1}.sidebar h1{font-size:34px;margin:14px 0}.sidebar h1 br{display:none}.intro{display:none}.identity{border:0;margin:0;padding:0;grid-column:2;grid-row:2}.side-nav{display:flex;margin-top:12px;grid-column:1/-1;border-bottom:1px solid var(--line)}.side-nav a{flex:1;padding:12px 8px}.source-control{margin:20px 0 0;border:0;padding:0;display:flex;align-items:center;gap:12px;grid-column:1}.source-control select{margin:0;width:115px}.source-control p{display:none}.export-button{grid-column:2;justify-self:end;margin-top:20px}.listening-record{width:290px;height:290px}.listening-scene{height:345px}.stat{width:170px}.stat-tracks{top:45px}.stat-days{top:45px}.stat-saved{bottom:32px}.track-list{grid-template-columns:repeat(3,1fr)}.track-card{grid-template-columns:1fr;gap:10px}.track-card small{position:static}.section-top h2{font-size:19px}}@media(max-width:560px){.topbar{height:77px;margin:0 6%}.logo{font-size:41px}.top-context{display:none}.back-link{font-size:10px;padding:9px 12px}.workspace{padding:25px 6% 0}.sidebar{grid-template-columns:1fr}.sidebar h1{font-size:33px;grid-column:1}.identity{grid-column:1;grid-row:auto;margin-top:8px;grid-template-columns:36px 1fr 22px}.side-nav{grid-column:1;gap:3px;margin-top:24px}.side-nav a{font-size:10px;padding:12px 5px;gap:6px}.side-nav a svg{display:none}.source-control{grid-column:1;max-width:220px}.export-button{grid-column:1;grid-row:5;margin:20px 0 0;font-size:9px}.export-button svg{display:none}.section-top{align-items:flex-start;flex-direction:column;gap:18px}.periods{align-self:flex-end;margin-top:-4px}.listening-scene{height:420px;margin-top:0}.listening-record{width:233px;height:233px;left:50%;top:35%}.record-label strong{font-size:46px}.stat{width:calc((100% - 16px)/3);top:auto!important;bottom:20px!important;padding:12px 9px;border-radius:10px}.stat-tracks{left:0}.stat-days{left:calc((100% - 16px)/3 + 8px);right:auto}.stat-saved{right:0}.stat:after,.stat small,.scene-caption{display:none}.stat-label{font-size:8px}.stat strong{font-size:26px}.stat>div{margin:10px 0 0}.stat>div>span{font-size:8px}.lower-grid{grid-template-columns:1fr;gap:17px}.panel{padding:22px}.dna{gap:32px;margin:25px 0}.donut{width:125px;height:125px}.chart-summary output{font-size:7px}.chart{height:120px}.track-list{grid-template-columns:1fr}.track-card{grid-template-columns:43px 1fr;padding:13px}.cover{width:40px;height:43px}.track-card small{position:absolute;right:13px;bottom:18px}.page-footer{font-size:7px}.page-footer span:nth-child(2){display:none}}@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}html{scroll-behavior:auto}}

.stage.custom-cursor dialog,.stage.custom-cursor dialog *{cursor:auto!important}.stage.custom-cursor dialog button{cursor:pointer!important}
@media(max-width:560px){.source-control{grid-row:5;margin-top:20px}.export-button{grid-row:5;align-self:center}}

/* Sliding segment and navigation surfaces share a single moving highlight. */
.periods,.side-nav{position:relative;isolation:isolate}
.periods:before,.side-nav:before{content:'';position:absolute;left:0;top:0;pointer-events:none;z-index:-1;width:var(--indicator-w,0px);height:var(--indicator-h,0px);transform:translate(var(--indicator-x,0px),var(--indicator-y,0px));transition:transform .48s cubic-bezier(.22,.8,.22,1),width .48s cubic-bezier(.22,.8,.22,1),height .48s ease;box-sizing:border-box}
.periods:before{background:linear-gradient(120deg,#274457,#152631);border:1px solid #c1eaff27;border-radius:25px;box-shadow:inset 0 1px 0 #c7ecff25,0 2px 12px #0005}
.periods button{transition:color .3s;z-index:1}.periods button[aria-pressed=true]{background:transparent;box-shadow:none}
.side-nav:before{border:1px solid #afd8ec28;border-radius:5px;background:linear-gradient(95deg,#87c6e424,#10182205)}
.side-nav a{transition:color .3s,border-color .3s;position:relative}.side-nav a.active{background:transparent;border-color:transparent}.side-nav a svg{transition:opacity .3s,transform .4s;transform:translateX(-5px)}.side-nav a.active svg{transform:translateX(0)}
.listening-scene{perspective:900px}
.listening-record{background:none;border:0;box-shadow:none;transform-style:preserve-3d;transform:translate(-50%,-50%) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg));will-change:transform}
.listening-record:before,.listening-record:after{display:none}
.archive-disc{position:absolute;width:112%;height:112%;inset:-6%;stroke:none;transform:translateZ(8px);filter:drop-shadow(0 15px 19px #0007)}
.record-label{inset:0 10% 10% 0;transform:translateZ(34px);padding:0;pointer-events:none}
.record-label strong{font-size:49px;text-shadow:0 2px 12px #050e16}.record-label>span{font-size:9px}.record-label p{font-size:8px}
.listening-record:after{display:block;content:'';inset:5%;border:0;background:radial-gradient(circle at var(--shine-x,35%) var(--shine-y,25%),#e7fbff22,transparent 55%);transform:translateZ(20px);animation:none;pointer-events:none}
@media(max-width:560px){.record-label strong{font-size:37px}.record-label>span{font-size:8px}.record-label p{font-size:7px}}
@media(prefers-reduced-motion:reduce){.periods:before,.side-nav:before{transition:none}.listening-record{will-change:auto;transform:translate(-50%,-50%)}}

/* A liquid membrane carries the disc; concentric wakes make the sound visible. */
.liquid-echo{position:absolute;left:49%;top:49%;width:350px;height:350px;transform:translate(-50%,-50%);pointer-events:none;z-index:0}
.liquid-membrane{position:absolute;inset:1%;border:1px solid #b9eaff4a;border-radius:44% 56% 60% 40% / 49% 39% 61% 51%;background:radial-gradient(ellipse at 18% 27%,#b5ecff25,transparent 26%),radial-gradient(ellipse at 79% 72%,#76c6ed1a,transparent 35%);box-shadow:inset 3px 1px 12px #c4f4ff15,1px 2px 20px #63bfe70c;animation:liquidBreath 12s ease-in-out infinite alternate}
.membrane-back{inset:-5% 0%;opacity:.52;animation-duration:17s;animation-delay:-5s;rotate:32deg}.membrane-front{inset:4% -5%;animation-delay:-3s}
.echo-pool{position:absolute;inset:50% -25% -10%;perspective:500px}
.echo-pool i{position:absolute;inset:0;border:1px solid #94d9f873;border-radius:50%;box-shadow:0 0 9px #97eaff0a;transform:rotateX(66deg);animation:liquidWake 6s cubic-bezier(.16,.48,.34,1) infinite;opacity:0}
.echo-pool i:nth-child(2){animation-delay:-2s}.echo-pool i:nth-child(3){animation-delay:-4s}
.liquid-bead{position:absolute;width:15px;height:21px;border-radius:49% 51% 57% 43% / 62% 44% 56% 38%;border:1px solid #b1ebff77;background:radial-gradient(circle at 28% 23%,#e4fbffa8 0 3%,#a2e5ff36 15%,#244c6860 44%,#7ed6e918 72%);box-shadow:inset -2px -2px 4px #a8e9ff48,0 2px 13px #8edbff20;animation:liquidDrift 8s ease-in-out infinite alternate}
.bead-one{left:2%;top:27%;rotate:-22deg}.bead-two{right:-5%;top:59%;width:10px;height:14px;animation-delay:-4s;animation-duration:10s;rotate:30deg}.bead-three{left:20%;bottom:1%;width:7px;height:10px;animation-delay:-2s;opacity:.7}
.water-trace{position:absolute;left:-26%;top:79%;width:154%;height:65px;fill:none;stroke:url(#water-light);stroke-width:.65;opacity:.45;animation:waterSway 9s ease-in-out infinite alternate}
.water-trace path:nth-child(2){opacity:.55}.water-trace path:nth-child(3){opacity:.25}
.listening-record{z-index:1}.scene-caption{z-index:2}
.panel.preference{position:relative;overflow:hidden}.panel.preference:after{content:'';position:absolute;pointer-events:none;width:240px;height:100px;border:1px solid #a9e8ff16;border-radius:50%;right:-95px;bottom:-62px;box-shadow:0 0 0 12px #a9e8ff05,0 0 0 27px #a9e8ff04;transform:rotate(-20deg)}
.donut:after{content:'';position:absolute;pointer-events:none;inset:11px;border-radius:50%;background:radial-gradient(ellipse at 20% 20%,#c9f7ff17,transparent 60%);animation:donutLight 12s linear infinite}.donut>span{z-index:1}
@keyframes liquidBreath{0%{border-radius:44% 56% 60% 40% / 49% 39% 61% 51%;transform:rotate(-8deg) scale(.98)}50%{border-radius:58% 42% 43% 57% / 41% 57% 43% 59%;transform:rotate(0) scale(1.02)}100%{border-radius:49% 51% 37% 63% / 60% 44% 56% 40%;transform:rotate(9deg) scale(1)}}
@keyframes liquidWake{0%{transform:rotateX(66deg) scale(.52);opacity:0}18%{opacity:.4}100%{transform:rotateX(66deg) scale(1.5);opacity:0}}
@keyframes liquidDrift{from{translate:0 -5px;transform:rotate(-8deg)}to{translate:4px 7px;transform:rotate(10deg)}}
@keyframes waterSway{from{transform:translateX(-6px) scaleY(.8)}to{transform:translateX(7px) scaleY(1.12)}}
@keyframes donutLight{to{rotate:360deg}}
@media(max-width:1150px){.liquid-echo{width:295px;height:295px}}@media(min-width:1600px){.liquid-echo{width:375px;height:375px}}@media(max-width:850px){.liquid-echo{width:325px;height:325px}}@media(max-width:560px){.liquid-echo{width:260px;height:260px;left:50%;top:35%}.water-trace{left:-12%;width:124%}.echo-pool{left:-12%;right:-12%}}
@media(prefers-reduced-motion:reduce){.liquid-echo *,.donut:after{animation:none!important}.echo-pool i{opacity:.12}.echo-pool i:nth-child(2){transform:rotateX(66deg) scale(1.15)}.echo-pool i:nth-child(3){transform:rotateX(66deg) scale(1.3)}}

/* Silver-white layered terrain, shaded like a liquid plaster model. */
.backdrop{background:#070d13}.backdrop .orbit,.backdrop .record-edge{display:none}
.terrain-relief{position:absolute;inset:-3%;background:url('liquid-topography.svg') center/cover no-repeat;opacity:.48;mask-image:radial-gradient(ellipse 55% 60% at 53% 46%,transparent 10%,#0006 48%,#000 95%);filter:saturate(.25);transform:translateZ(0)}
.terrain-light{position:absolute;inset:0;background:radial-gradient(ellipse 44% 50% at 60% 43%,#050b13c9 5%,#050b135c 68%,transparent),linear-gradient(90deg,#050b136b,transparent 23%,transparent 84%,#07101b38)}
.backdrop .blue-haze{background:radial-gradient(ellipse 50% 45% at 64% 27%,#b4d6e114,transparent 85%);animation:terrainSheen 18s ease-in-out infinite alternate}
@keyframes terrainSheen{from{opacity:.4;transform:translate(-2%,0)}to{opacity:1;transform:translate(3%,2%)}}
.stat:after{display:none}.scene-axis{display:none}
.data-anchor{position:absolute;width:6px;height:6px;transform:translate(-50%,-50%) translateZ(8px);border-radius:50%;pointer-events:none;opacity:0}
.anchor-tracks{left:13%;top:36%}.anchor-days{left:83%;top:28%}.anchor-saved{left:83%;top:76%}
.data-links{position:absolute;inset:0;width:100%;height:100%;overflow:visible;z-index:2;pointer-events:none;fill:none;stroke:none}
.data-link-wire{stroke:#a6deee;stroke-width:.9;opacity:.66;vector-effect:non-scaling-stroke;stroke-linejoin:round}
.data-link-glow{stroke:#80ceec;stroke-width:3;opacity:.09;filter:blur(1px)}
.data-link-node{fill:#d9f7ff;stroke:#86bfd0;stroke-width:.8}.data-link-halo{fill:#101e29;stroke:#b9e9f5;stroke-width:1;opacity:.85}
.data-link-signal{stroke:#e0faff;stroke-width:1.7;stroke-dasharray:7 193;animation:dataSignal 4s linear infinite;opacity:.7}.data-link-group:nth-child(2) .data-link-signal{animation-delay:-1.3s}.data-link-group:nth-child(3) .data-link-signal{animation-delay:-2.6s}
@keyframes dataSignal{from{stroke-dashoffset:200}to{stroke-dashoffset:0}}
@media(max-width:560px){.terrain-relief{background-size:auto 110%;opacity:.30}.data-link-wire{opacity:.55}.data-link-signal{opacity:.4}}
@media(prefers-reduced-motion:reduce){.backdrop .blue-haze,.data-link-signal{animation:none!important}.data-link-signal{display:none}}

/* Deeper chalk relief and slow liquid deformation behind the readable UI plane. */
.liquid-filter-defs{position:absolute;pointer-events:none}
.terrain-relief{inset:-5%;opacity:.52;filter:url(#terrain-fluid) saturate(.2);animation:terrainTide 20s ease-in-out infinite alternate;will-change:transform}
.terrain-light{background:radial-gradient(ellipse 48% 55% at 53% 45%,#050b13c9 5%,#050b135c 68%,transparent),linear-gradient(90deg,#050b1388,transparent 30%,transparent 80%,#07101b38)}
@keyframes terrainTide{0%{transform:translate(-.7%,-.5%) scale(1.015)}50%{transform:translate(.6%,.1%) scale(1.025)}100%{transform:translate(.2%,.8%) scale(1.01)}}
/* Unmarked liquid glass: only the data sits over a translucent water surface. */
.glass-disc-surface{position:absolute;inset:0;transform:translateZ(8px);border-radius:50%;overflow:hidden;background:radial-gradient(ellipse at 25% 12%,#e6faff30,transparent 48%),radial-gradient(ellipse at 66% 86%,#90d9e823,transparent 60%),linear-gradient(140deg,#b4e1ed19,#0a202d66 50%,#9acbd421);border:1px solid #c4f6ff7d;box-shadow:inset 2px 3px 7px #e5fcff6b,inset -3px -4px 11px #adf5ff33,inset 12px 9px 32px #c3e6f211,inset -15px -18px 35px #061a2a80,0 15px 35px #0005,0 0 24px #ade9ff0f;backdrop-filter:blur(7px) saturate(1.2)}
.disc-water{position:absolute;inset:0;width:100%;height:100%;border-radius:50%;opacity:.75}
.glass-specular{position:absolute;inset:2%;border-radius:50%;background:radial-gradient(ellipse 35% 12% at var(--shine-x,35%) 9%,#e8fcff69,transparent 95%),radial-gradient(ellipse 22% 11% at 80% 87%,#baf6ff35,transparent 90%);filter:blur(3px);pointer-events:none}
.glass-rim{position:absolute;inset:5px;border-radius:50%;border:1px solid #dbfaff35;box-shadow:inset 1px 1px 2px #f2feff70,0 1px 2px #01121c70;mask-image:linear-gradient(130deg,#000,transparent 48%,#000)}
.record-label{inset:0;transform:translateZ(34px);text-shadow:0 2px 10px #07121f}.record-label strong{font-weight:300;font-size:52px}.listening-record:after{display:none}
@media(max-width:560px){.terrain-relief{opacity:.34}.record-label strong{font-size:40px}.glass-disc-surface{backdrop-filter:blur(4px)}}
@media(prefers-reduced-motion:reduce){.terrain-relief{animation:none!important;filter:saturate(.2);will-change:auto}}

/* Uneven topographic spacing replaces the stepped relief. */
.terrain-relief{opacity:.62;filter:url(#terrain-fluid);background-size:cover;animation:terrainTide 24s ease-in-out infinite alternate}
.terrain-light{background:radial-gradient(ellipse 47% 58% at 55% 46%,#050b13ba 5%,#050b1333 65%,transparent)}
.disc-water{opacity:.83}.glass-disc-surface{background:linear-gradient(145deg,#102843,#19455a 55%,#628b9440)}
.record-label{z-index:2}.record-label strong{text-shadow:0 2px 18px #001528,0 1px 4px #001528}.record-label>span,.record-label p{color:#ceeaf4;text-shadow:0 1px 5px #001528}
@media(max-width:560px){.terrain-relief{opacity:.42}}

/* Play the supplied fish footage itself inside the glass disc. */
.disc-fish{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 56%;transform:scale(1.12);pointer-events:none}
.glass-disc-surface{isolation:isolate}.glass-specular{opacity:.35}.glass-rim{z-index:2}
.record-label{justify-content:flex-start;padding-top:27px;transform:translateZ(34px)}.record-label strong{font-size:40px;margin:6px 0 0}.record-label>span{font-size:8px;letter-spacing:2px;color:#ecfaff}.record-label p{margin-top:6px;color:#e7f9ff}.record-label strong,.record-label>span,.record-label p{text-shadow:0 2px 7px #001d35,0 0 18px #001d35}
@media(max-width:560px){.record-label{padding-top:19px}.record-label strong{font-size:30px}.record-label p{font-size:7px}}

/* Flat circular video: no tilt, depth, glass lighting or perspective. */
.listening-scene{perspective:none}.listening-record{transform:translate(-50%,-50%)!important;transform-style:flat;will-change:auto}
.glass-disc-surface{transform:none;border:1px solid #b9e7f04a;box-shadow:none;backdrop-filter:none;background:#12394f}
.glass-specular,.glass-rim,.listening-record:before,.listening-record:after{display:none!important}
.record-label{transform:none!important}.data-anchor{transform:translate(-50%,-50%)}
.liquid-echo{display:none}

/* Restore cursor-driven perspective without changing video playback. */
.listening-scene{perspective:900px}
.listening-record{transform:translate(-50%,-50%) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg))!important;transform-style:preserve-3d;will-change:transform}
.glass-disc-surface{transform:translateZ(8px)}.record-label{transform:translateZ(28px)!important}.data-anchor{transform:translate(-50%,-50%) translateZ(8px)}
@media(prefers-reduced-motion:reduce){.listening-record{transform:translate(-50%,-50%)!important;will-change:auto}}

/* Centered translucent glass type; the original video remains visible through the glyphs. */
.record-label{inset:0;justify-content:center;align-items:center;padding:0!important;gap:0;transform:translateZ(22px)!important}
.record-label strong{font-size:54px;font-weight:500;letter-spacing:-2px;line-height:1.15;margin:8px 0 4px;color:rgba(215,247,255,.16);-webkit-text-stroke:.65px rgba(238,253,255,.78);background:linear-gradient(125deg,rgba(255,255,255,.57) 0%,rgba(221,251,255,.12) 25%,rgba(187,233,252,.025) 48%,rgba(241,253,255,.38) 76%,rgba(178,228,246,.06) 100%);-webkit-background-clip:text;background-clip:text;text-shadow:0 1px 0 #eaffff24,0 3px 9px #03263e32;filter:drop-shadow(0 0 5px #c2f6ff16)}
.record-label>span{font-size:10px;letter-spacing:2.5px;color:#e4f9ffb8;text-shadow:0 1px 4px #06355466}
.record-label p{font-size:9px;margin:5px 0 0;color:#e7faffad;text-shadow:0 1px 4px #06355455}
@media(max-width:1150px){.record-label strong{font-size:45px}}
@media(max-width:560px){.record-label strong{font-size:39px;-webkit-text-stroke:.55px rgba(238,253,255,.78)}.record-label>span{font-size:8px}.record-label p{font-size:8px}}

/* Clearer glass typography and expanded personal preferences. */
.record-label strong{font-weight:750;color:rgba(225,249,255,.48);-webkit-text-stroke:.7px #effcffc9;text-shadow:0 2px 8px #03263e75}
.record-label>span{font-weight:700;color:#eefbffe6;font-size:11px}
.record-label p{font-weight:650;color:#eefbffde;font-size:10px}
.taste-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:22px}
.taste-grid .panel{min-width:0;padding:26px;background:linear-gradient(135deg,#0e1b24cf,#081018b8)}
.taste-grid h2{font-size:17px;margin:8px 0}
.taste-row{margin-top:25px}.taste-row>div:first-child{display:flex;align-items:center;gap:12px;font-size:12px}.taste-row strong{font-size:14px}.taste-row span{color:#8da6b6;font-size:11px}.taste-row b{margin-left:auto;color:#cae7f6;font-variant-numeric:tabular-nums}
.taste-meter{height:4px;background:#a9d6ef12;margin-top:13px;border-radius:5px;overflow:hidden}.taste-meter i{display:block;height:100%;background:linear-gradient(90deg,#42677f,#c0e8f8);border-radius:5px;transition:width .6s ease}
.taste-caption{color:#8da6b6;font-size:11px;line-height:1.8;margin:24px 0 0}
.time-buckets{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:24px;text-align:center}.time-bucket{display:flex;align-items:center;flex-direction:column;gap:9px}.time-bucket b{font-size:17px;color:#c9e6f4;font-weight:500}.time-bucket strong{font-size:12px;font-weight:500}.time-bucket small{font-size:9px;color:#7894a7}.time-meter{height:87px;width:100%;max-width:42px;border-bottom:1px solid #8bb4cd45;background:#a9d6ef06;display:flex;align-items:flex-end}.time-meter i{width:100%;background:linear-gradient(#c1e6f1b8,#45677e35);border-radius:3px 3px 0 0;transition:height .6s ease}
.scene-preferences{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:25px}.scene-preferences .taste-caption{margin:7px 0 0}.scene-options{display:flex;flex-wrap:wrap;gap:9px;max-width:340px}.scene-options button{border:1px solid #93b9cc33;background:#09131bbc;color:#a9bdca;padding:10px 15px;border-radius:24px;font:inherit;font-size:12px;cursor:pointer;transition:background .25s,border-color .25s,color .25s}.scene-options button:hover{border-color:#c1e6fa99}.scene-options button[aria-pressed=true]{background:#284556a6;border-color:#b4dded88;color:#ecfaff}.scene-options button:focus-visible{outline:2px solid #d0f0ff;outline-offset:3px}
@media(max-width:700px){.taste-grid{grid-template-columns:1fr}.scene-preferences{align-items:flex-start;flex-direction:column}.scene-options{max-width:none}.taste-grid .panel{padding:20px}}
@media(prefers-reduced-motion:reduce){.taste-meter i,.time-meter i,.scene-options button{transition:none}}

/* Keep the disc dimensions; frame the upward exit inside its circular viewport. */
.disc-fish{object-position:50% 76%}

/* Offset the fish framing below the central numeral and slightly right. */
.disc-fish{transform:translate(8px,5px) scale(1.12)}

/* A quiet layer of glass bubbles inside the two listening panels. */
.lower-grid>.panel{position:relative;isolation:isolate;overflow:hidden}
.panel-bubbles{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden;border-radius:inherit}
.panel-bubbles i{position:absolute;left:var(--bubble-x);bottom:-30px;width:var(--bubble-size);height:var(--bubble-size);border-radius:50%;border:1px solid #bdefff50;background:radial-gradient(circle at 28% 25%,#e8ffff65 0%,#bfeaff12 18%,transparent 48%,#92d9f016 78%,#ddfaff35 100%);box-shadow:inset -2px -2px 4px #8ecce51a,0 0 7px #b3e6ff0a;opacity:0;animation:panel-bubble-rise var(--bubble-duration) var(--bubble-delay) linear infinite;animation-play-state:paused}
.bubbles-visible .panel-bubbles i{animation-play-state:running}
@keyframes panel-bubble-rise{0%{transform:translate(0,0) scale(.8);opacity:0}12%{opacity:.65}40%{transform:translate(var(--bubble-drift),-150px) scale(.96)}75%{opacity:.45}100%{transform:translate(0,-430px) scale(1.12);opacity:0}}
@media(prefers-reduced-motion:reduce){.panel-bubbles{display:none}}

/* Outline bubbles, including joined pairs without specular highlights. */
.panel-bubbles i{background:none;box-shadow:none;border:1px solid #bdefff70}
.panel-bubbles .bubble-pair::after{content:"";position:absolute;width:72%;height:72%;left:76%;top:-30%;border:1px solid #bdefff70;border-radius:50%;background:none;box-shadow:none}

/* Staggered entrance: cards unfold after the disc is visible. */
@media(prefers-reduced-motion:no-preference){
 .listening-scene .stat{animation:archive-stat-appear .85s cubic-bezier(.22,1,.36,1) both;animation-delay:.45s;transform-origin:center}
 .listening-scene .stat-days{animation-delay:.68s}
 .listening-scene .stat-saved{animation-delay:.91s}
 .data-link-group{animation:archive-link-appear .65s ease both;animation-delay:.65s}
 .data-link-group:nth-child(2){animation-delay:.88s}
 .data-link-group:nth-child(3){animation-delay:1.11s}
}
@keyframes archive-stat-appear{0%{opacity:0;translate:0 18px;scale:.91}70%{opacity:1;translate:0 -2px;scale:1.015}100%{opacity:1;translate:0 0;scale:1}}
@keyframes archive-link-appear{from{opacity:0}to{opacity:1}}