:root{color-scheme:light;--paper:#f5f0df;--ink:#344956;--muted:#687b86;--line:#cdd5d4;--wine:#496b83;--green:#516f82;--white:#fffdf5;font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;font-synthesis:none}
*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink)}button,input,a{-webkit-tap-highlight-color:transparent}button,input{font:inherit}button{cursor:pointer;border:0;background:var(--wine);color:var(--white);padding:13px 20px;border-radius:5px;transition:opacity .2s,transform .2s}button:hover{opacity:.83}button:active{transform:scale(.98)}button:disabled{opacity:.5;cursor:wait}input{border:1px solid var(--line);background:transparent;color:var(--ink);padding:14px;outline:none;min-width:0}input:focus-visible,button:focus-visible,a:focus-visible{outline:2px solid var(--wine);outline-offset:4px}a{color:inherit;text-decoration:none}[hidden]{display:none!important}.topbar{height:94px;border-bottom:1px solid var(--line);margin:0 5.2%;display:flex;justify-content:space-between;align-items:center}.brand{display:flex;align-items:center;gap:10px;font-family:serif;font-size:25px;letter-spacing:4px}.brand-mark{font-size:36px;color:var(--wine);letter-spacing:0}.brand-en{font:9px sans-serif;letter-spacing:2px;margin-left:18px;color:var(--muted)}.connection{font-size:11px;color:var(--muted);display:flex;align-items:center;gap:8px}#connection-dot{width:6px;height:6px;border-radius:100%;background:#bcbab1}#connection-dot.online{background:var(--green)}main{max-width:1440px;margin:auto;padding:0 5.2%}.eyebrow{font-size:9px;letter-spacing:2.3px;color:var(--wine);font-weight:600}.intro{display:flex;justify-content:space-between;align-items:center;margin:44px 0 36px}h1{font-family:Georgia,"Songti SC",serif;font-weight:500;font-size:32px;letter-spacing:1.5px;margin:13px 0 0}.text-button{background:transparent;color:var(--muted);padding:12px 0;font-size:11px}.layout{display:grid;grid-template-columns:300px minmax(0,1fr);gap:45px}.section-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:23px}.section-title h2{font-size:13px;font-weight:500;letter-spacing:1px;margin:0}.section-title>span{font-size:9px;letter-spacing:1px;color:var(--muted)}.library{border-right:1px solid var(--line);padding-right:30px}.search-box{display:flex;border:1px solid #b8cbd1;border-radius:5px;height:46px}.search-box input{border:0;width:100%;font-size:11px;padding:13px 11px}.search-box button{background:none;color:var(--green);font-size:22px;padding:5px 13px}.search-meta{display:flex;justify-content:space-between;color:var(--muted);font-size:9px;letter-spacing:.3px;margin:19px 0 12px}.search-meta span:last-child{font-size:8px}#results{max-height:440px;overflow:auto}.empty-search{text-align:center;padding:65px 0;color:var(--muted);font-size:12px}.empty-search>span{font-family:serif;font-size:45px;color:#a8bcc5}.empty-search small{font-size:10px}.result{display:flex;gap:12px;width:100%;padding:15px 5px;background:none;text-align:left;border-radius:0;border-bottom:1px solid #d9dfdc;color:var(--ink);align-items:center}.result:hover,.result.selected{background:#e4edf0}.result-index{color:var(--muted);font-size:10px;min-width:14px}.result-copy{flex:1;min-width:0}.result-title{display:block;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:500}.result-artist{display:block;margin-top:7px;font-size:10px;color:var(--muted)}.result-arrow{font-size:12px;color:var(--wine)}.library-note{display:flex;gap:14px;align-items:center;border-top:1px solid var(--line);margin-top:35px;padding-top:23px;color:var(--muted);font-family:"Songti SC",serif;font-size:12px;line-height:1.9}.library-note>span{font-size:26px;color:#8aa6b5}.listening{min-width:0}.now-playing{display:grid;grid-template-columns:minmax(180px,1fr) minmax(220px,1fr);gap:35px;align-items:center;min-height:355px;padding:15px 0 25px}.record-wrap{text-align:center;min-width:0}.record{aspect-ratio:1;max-width:285px;margin:0 auto;position:relative;border-radius:50%;background:repeating-radial-gradient(circle at center,#344c5d 0px,#344c5d 1px,#486171 2px,#3b5364 3px);box-shadow:0 15px 25px #344c5d25,inset 0 0 0 6px #344c5d;display:grid;place-items:center}.record:before{content:"";position:absolute;inset:0;border-radius:100%;background:conic-gradient(transparent 0deg,#ffffff10 45deg,transparent 85deg,transparent 170deg,#ffffff12 220deg,transparent 255deg)}.record-label{position:relative;width:39%;aspect-ratio:1;border-radius:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#dfca89;color:#344956;box-shadow:inset 0 0 0 5px #d3bb78}.record-label>span{font-family:"Songti SC",serif;font-size:27px;line-height:1.05;letter-spacing:3px}.record-label small{font-size:5px;letter-spacing:1px;margin-top:6px}.record-label i{position:absolute;top:48%;left:48%;width:5px;height:5px;background:var(--paper);border-radius:100%}.record.playing{animation:spin 20s linear infinite}.record-caption{margin-top:24px;font-size:7px;letter-spacing:1.7px;color:var(--muted)}.track-info>.eyebrow{font-size:8px}.track-info h2{font-family:"Songti SC",Georgia,serif;font-size:27px;font-weight:500;line-height:1.4;margin:12px 0 10px;overflow-wrap:anywhere}.track-info>p{font-size:11px;color:var(--muted);margin:8px 0}.fine{font-size:10px;color:var(--muted);line-height:1.8}.lyrics{height:165px;overflow:auto;scroll-behavior:smooth;margin-top:27px;scrollbar-width:none;mask-image:linear-gradient(transparent,#000 12%,#000 88%,transparent);padding:16px 0}.lyrics p{font-size:14px;line-height:1.7;margin:0;padding:7px 0;color:#7c8d95;transition:color .2s}.lyrics p.active{color:var(--wine);font-weight:500}.lyrics p.active .word.done{color:var(--wine)}.lyrics .word{color:#84939b}.lyrics .lyric-placeholder{font-family:"Songti SC",serif;color:var(--muted);line-height:2.4}.transport{border-top:1px solid var(--line);padding:24px 0 22px}.timeline{display:flex;align-items:center;gap:12px;font-size:9px;color:var(--muted);font-variant-numeric:tabular-nums}.timeline input{flex:1;height:20px;padding:0;accent-color:var(--wine);border:0}.transport-row{display:grid;grid-template-columns:1fr 1fr 1fr;align-items:center;margin-top:14px}.transport-row>.text-button{justify-self:start}.transport-row>.fine{justify-self:end}.main-controls{display:flex;gap:16px;justify-content:center;align-items:center}.round{border-radius:50%;padding:0;width:34px;height:34px;font-size:11px}.round.primary{width:48px;height:48px;font-size:16px}.secondary{background:#dee8eb;color:var(--green)}.context-strip{display:flex;gap:15px;align-items:center;background:#e5edf0;border:1px solid #c9d9df;border-radius:6px;padding:18px}.context-star{color:var(--green);font-size:24px}.context-strip strong{font-size:12px;font-weight:500;letter-spacing:.3px}.context-strip p{font-size:10px;color:var(--muted);margin:7px 0 0;line-height:1.6}.context-strip>.text-button{margin-left:auto;white-space:nowrap}.unlock{display:block;width:100%;margin-top:17px;background:#496b8314;color:var(--wine)}footer{margin:45px 0 25px;padding-top:23px;border-top:1px solid var(--line);display:flex;justify-content:space-between;font-size:9px;letter-spacing:1px;color:var(--muted)}footer i{font-style:normal;color:var(--wine);margin-left:16px;font-size:16px}footer>span:first-child{font-family:"Songti SC",serif;font-size:11px}#message{position:fixed;bottom:calc(25px + env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);background:#344c5d;color:white;padding:15px 23px;font-size:12px;border-radius:7px;max-width:min(90%,550px);box-shadow:0 5px 30px #0002;z-index:10;line-height:1.7}.notice{font-size:11px;background:#eae3cd;padding:13px 17px;line-height:1.7;margin:-12px 0 25px;border-radius:5px}pre{white-space:pre-wrap;overflow-wrap:anywhere;font-size:11px;line-height:1.8;background:#e5edf0;padding:16px;max-height:250px;overflow:auto}.welcome{padding:85px 0 70px;max-width:650px}.welcome h1{font-size:60px;line-height:1.4}.welcome h1 em{font-style:normal;color:var(--wine)}.welcome>p{color:var(--muted);font-size:14px;line-height:2;margin:25px 0 35px}.welcome label{display:block;font-size:11px;color:var(--muted);margin-bottom:12px}.login-fields{display:flex;gap:12px}.login-fields input{width:300px;border-radius:5px;font-size:13px}.consent{max-width:600px;margin:10vh auto;padding:25px}.consent p{font-size:14px;line-height:2}.consent form{display:flex;gap:12px;margin-top:30px}@keyframes spin{to{transform:rotate(360deg)}}@media(min-width:1400px){.layout{gap:60px;grid-template-columns:320px minmax(0,1fr)}.now-playing{gap:60px;min-height:400px}.record{max-width:315px}}@media(max-width:1000px){.layout{grid-template-columns:230px minmax(0,1fr);gap:25px}.library{padding-right:20px}.now-playing{grid-template-columns:1fr;gap:25px}.record{max-width:210px}.record-caption{display:none}.track-info{text-align:center}.track-info h2{font-size:23px}.lyrics{height:125px;margin-top:15px}.context-strip>.text-button{display:none}.transport-row{grid-template-columns:1fr 1fr 1fr}}@media(max-width:650px){.topbar{height:74px;margin:0 6%}.brand{font-size:23px}.brand-mark{font-size:31px}.brand-en{display:none}.connection{font-size:9px}main{padding:0 6%}.intro{margin:30px 0 24px}.intro h1{font-size:25px;letter-spacing:0}.eyebrow{font-size:8px;letter-spacing:1.5px}.intro>.text-button{font-size:9px;align-self:flex-start}.layout{display:flex;flex-direction:column;gap:35px}.listening{order:0}.library{order:1;border-right:0;padding:25px 0 0;border-top:1px solid var(--line)}.section-title{margin-bottom:15px}.now-playing{padding:6px 0 18px;gap:22px}.record{max-width:205px}.record-label>span{font-size:22px}.track-info>.eyebrow{display:none}.track-info h2{margin:0 0 7px;font-size:25px}.track-info>p{font-size:11px}.lyrics{margin-top:16px;height:132px}.lyrics p{font-size:15px}.transport{padding:16px 0}.transport-row{margin-top:12px}.context-strip{padding:14px 12px;gap:12px}.context-strip strong{font-size:11px}.context-strip p{font-size:9px}.library-note{display:none}.empty-search{padding:24px 0}.empty-search>span{font-size:28px}footer{margin:28px 0 25px;line-height:2}footer>span:last-child{font-size:6px;max-width:130px;text-align:right}footer i{margin-left:6px}.welcome{padding:60px 0}.welcome h1{font-size:44px}.welcome>p{font-size:13px}.login-fields{flex-direction:column}.login-fields input,.login-fields button{width:100%}#results{max-height:320px}.notice{margin:0 0 22px}.fine{font-size:9px}.text-button{min-height:44px}.search-box{height:48px}.round.secondary{width:44px;height:44px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}.record.playing{animation:none}}

/* Personal library and shared queue */
.library-tabs{display:flex;flex-wrap:wrap;gap:7px;margin:0 0 16px}.library-tabs button{background:transparent;color:var(--muted);padding:8px 10px;font-size:11px;border:1px solid var(--line);border-radius:20px}.library-tabs button[aria-pressed="true"]{background:var(--green);border-color:var(--green);color:var(--paper)}.library-heading{display:flex;align-items:center;gap:10px;margin:8px 0 14px}.library-heading h3{font-size:14px;font-weight:500;margin:0;flex:1;overflow-wrap:anywhere}.library-heading .text-button{font-size:11px;white-space:nowrap}.library-actions{display:flex;gap:8px;margin-bottom:12px}.library-actions button{font-size:11px;padding:9px 12px;flex:1}.track-row{display:flex;align-items:stretch;border-bottom:1px solid var(--line)}.track-row .result{border:0;min-width:0;flex:1}.add-track{background:transparent;color:var(--green);padding:5px 10px;font-size:20px;min-width:36px}.library-card{display:block;width:100%;text-align:left;background:transparent;color:var(--ink);border-bottom:1px solid var(--line);padding:16px 6px;border-radius:0}.library-card strong{display:block;font-size:13px;font-weight:500;line-height:1.6}.library-card small{display:block;color:var(--muted);margin-top:7px;font-size:10px}.library-empty{padding:24px 4px;color:var(--muted);font-size:12px;line-height:1.9}.library-empty button{display:block;margin-top:12px;font-size:11px}.report-period{display:flex;gap:12px;align-items:center;color:var(--muted);font-size:12px;margin-bottom:15px}select{font:inherit;color:var(--ink);background:var(--paper);border:1px solid var(--line);border-radius:5px;padding:9px;max-width:100%}.report-metrics{display:grid;grid-template-columns:1fr 1fr;gap:8px}.report-metric{background:#e5edf0;padding:13px;border-radius:5px;font-size:11px;color:var(--muted)}.report-metric strong{display:block;color:var(--ink);font-size:18px;font-weight:500;margin-top:7px}.report-section h4{font-size:12px;font-weight:500;letter-spacing:1px;color:var(--wine);margin:22px 0 10px}.report-entry{display:flex;justify-content:space-between;gap:12px;font-size:11px;border-bottom:1px solid var(--line);padding:9px 0}.report-entry span:last-child{color:var(--muted);white-space:nowrap}.queue-panel{border:1px solid var(--line);border-radius:6px;margin:0 0 20px;padding:15px}.queue-panel summary{cursor:pointer;font-size:12px}.queue-panel summary span{color:var(--muted);margin-left:10px}.queue-heading{display:flex;justify-content:space-between;align-items:center;margin:16px 0 8px;font-size:12px}.queue-panel #queue-list{max-height:230px;overflow:auto}.queue-panel .result[aria-current="true"]{background:#dee8eb}.main-controls{gap:8px}#results.report-results{max-height:560px}.filing-footer{text-align:center}
@media(max-width:650px){.library-tabs{gap:8px}.library-tabs button{min-height:40px;font-size:12px;padding:8px 12px}.library-actions button{min-height:42px}.add-track{min-width:44px}.library-card{padding:17px 8px}.library-card strong{font-size:14px}.library-card small{font-size:12px}.transport-row{grid-template-columns:1fr 1fr;gap:8px}.transport-row .main-controls{grid-column:1/-1;grid-row:1;gap:14px}.transport-row>.text-button{grid-column:1;grid-row:2}.transport-row>.fine{grid-column:2;grid-row:2}.queue-panel{padding:13px}.report-entry{font-size:12px}#results.report-results{max-height:520px}}

/* Butter yellow & mist blue, with three quiet listening companions. */
:root{--butter:#dfca89;--blue-wash:#e5edf0;--cream:#fffaf0}
body{background:radial-gradient(ellipse at 95% 0%,#dce7ec85,transparent 52%),var(--paper)}
.topbar{border-bottom-color:#b7c9d0}.brand-mark{color:#ad8b42}
.eyebrow{color:#536f82}.intro h1{color:#344e60}
.library-tabs button[aria-pressed="true"]{background:#496b83;border-color:#496b83;color:#fffdf5}
.library-tabs button:hover{background:#dce7ec;color:#344956;opacity:1}
.search-box{background:#fffaf0;border-radius:12px}
.listening{background:#edf2f1;border:1px solid #d2dfe1;border-radius:26px;padding:24px}
.record{box-shadow:0 18px 30px #344c5d22,inset 0 0 0 6px #344c5d}
.record-label{background:var(--butter);box-shadow:inset 0 0 0 5px #d3bb78}
.record-label>span{color:#3e5869}
.round.primary{background:var(--butter);color:#344956;box-shadow:0 3px 0 #bda76b}
.round.secondary{background:#dce7ec;color:#496579}
.result:hover,.result.selected,.queue-panel .result[aria-current="true"]{background:#dce7ec}
.queue-panel{background:#f8f5e9;border-color:#d6d9cc;border-radius:14px}
.context-strip{background:#e1e9ec;border-radius:14px}.context-star{color:#ad8b42}
.notice{background:#e7e5d5;color:#506574;border-left:3px solid var(--butter);border-radius:8px}
.lyrics p.active{color:#3d647f;font-weight:600}.lyrics p.active .word.done{color:#3d647f}
.login-fields input{background:var(--cream);border-radius:12px}.login-fields button{border-radius:12px}
.welcome{position:relative}.welcome h1 em{color:#54768d}.welcome .eyebrow{display:inline-block;border-bottom:3px solid var(--butter);padding-bottom:9px}
.companion-defs{position:absolute;width:0;height:0;overflow:hidden}
.companions{display:flex;align-items:flex-end;justify-content:center;gap:12px;margin:18px auto 0;width:fit-content;max-width:100%;position:relative}
.companion{position:relative}.companion summary{list-style:none;cursor:pointer;border-radius:50%;width:52px;height:52px;display:grid;place-items:center;transition:transform .2s,background .2s}
.companion summary::-webkit-details-marker{display:none}.companion summary::marker{content:""}
.companion summary:hover,.companion[open] summary{background:#dfca8940;transform:translateY(-3px)}
.companion summary:focus-visible{outline:2px solid #496b83;outline-offset:3px}
.companion svg{width:46px;height:46px;overflow:visible;pointer-events:none}
.companion p{position:absolute;bottom:58px;left:50%;transform:translateX(-50%);width:156px;margin:0;padding:12px;background:#fffaf0;border:1px solid #c4d2d7;border-radius:13px;color:#496579;font-size:11px;line-height:1.8;text-align:center;box-shadow:0 5px 20px #344c5d12;z-index:3;letter-spacing:0}
.companion:first-child p{left:0;transform:none}.companion:last-child p{left:auto;right:0;transform:none}
.welcome .companions{justify-content:flex-start;margin:0 0 24px}.welcome .companion summary{width:56px;height:56px}
.record-caption{margin-top:15px;letter-spacing:1.3px}.record-wrap .companions{margin-top:8px}
@media(max-width:1000px){.listening{padding:18px}.now-playing{gap:18px}}
@media(max-width:650px){.listening{padding:18px 14px;border-radius:22px}.intro h1{font-size:23px}.now-playing{gap:16px}.record{max-width:190px}.record-wrap .companions{gap:8px;margin-top:8px}.companion summary{width:46px;height:46px}.companion svg{width:40px;height:40px}.context-strip{padding:13px 10px}.welcome{padding:40px 0}.welcome h1{font-size:42px}.notice{font-size:11px}.library{padding-top:20px}}

.record-potato{width:80%;height:80%;flex-shrink:0}.record-label .record-potato+small{margin-top:-4px;font-size:4px;letter-spacing:.6px}

.brand-potato{width:78px;height:52px;flex-shrink:0}@media(max-width:650px){.brand-potato{width:66px;height:46px}}

.tiny-potato{display:inline-block;flex-shrink:0;vertical-align:middle}.humming-potato{width:64px;height:64px}.wave-potato{width:44px;height:44px}.heart-potato{width:36px;height:36px;margin-left:8px}footer>span:last-child{display:flex;align-items:center;justify-content:flex-end;gap:6px}@media(max-width:650px){.humming-potato{width:52px;height:52px}.heart-potato{width:30px;height:30px;margin-left:0}}