:root{--ink:#08080b;--panel:#121218c2;--panel-strong:#1c1d24d1;--line:#e8fff729;--text:#f3f7f2;--muted:#f3f7f2a3;--quiet:#f3f7f26b;--mint:#b0f1dc;--rose:#e99ab0;--amber:#f2c074;--plum:#8a7cf6;--shadow:0 26px 80px #0000006b;color:var(--text);background:var(--ink);font-family:Inter,Noto Sans SC,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}*{box-sizing:border-box}html,body{min-height:100%}body{margin:0;overflow:hidden}button{color:inherit;font:inherit}.sky{z-index:0;position:fixed;inset:0}.shell{z-index:1;place-items:center;min-height:100svh;padding:clamp(18px,4vw,56px);display:grid;position:relative}.deck{border:1px solid var(--line);background:linear-gradient(180deg, #ffffff0f, #ffffff05), var(--panel);width:min(560px,100%);box-shadow:var(--shadow);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);border-radius:28px;padding:clamp(22px,5vw,38px)}.mast,.time-row,.actions,.controls{align-items:center;display:flex}.mast{justify-content:space-between;gap:18px}.eyebrow,.now-label,.track-meta,.time-row,.signal{color:var(--muted);letter-spacing:0}.eyebrow{text-transform:uppercase;margin:0 0 6px;font-size:12px;font-weight:700}h1,h2,p{margin:0}h1{font-family:Noto Serif SC,serif;font-size:clamp(28px,7vw,42px);font-weight:700;line-height:1}.signal{min-width:82px;color:var(--mint);text-align:center;background:#b0f1dc14;border:1px solid #b0f1dc33;border-radius:999px;flex:none;padding:8px 12px;font-size:13px;font-weight:700}.track-zone{grid-template-columns:148px 1fr;align-items:center;gap:clamp(18px,5vw,30px);margin:clamp(34px,7vw,58px) 0 34px;display:grid}.orbit{aspect-ratio:1;width:148px;position:relative}.orbit-ring,.orbit-scan{border-radius:50%;position:absolute;inset:0}.orbit-ring{background:linear-gradient(135deg,#b0f1dc1f,#e99ab014),repeating-radial-gradient(circle,#ffffff0f 0 1px,#0000 1px 13px);border:1px solid #b0f1dc3d}.orbit-ring:before,.orbit-ring:after{content:"";border:1px solid #f2c07447;border-radius:50%;position:absolute;transform:rotate(-18deg)}.orbit-ring:before{inset:22px -9px}.orbit-ring:after{border-color:#8a7cf63d;inset:-10px 28px;transform:rotate(32deg)}.orbit-scan{--scan:0%;background:conic-gradient(from -90deg, #b0f1dce6 var(--scan), transparent 0);-webkit-mask:radial-gradient(circle,#0000 58%,#000 60% 64%,#0000 66%);mask:radial-gradient(circle,#0000 58%,#000 60% 64%,#0000 66%)}.track-copy{min-width:0}.now-label{margin-bottom:10px;font-size:13px;font-weight:700}h2{min-height:86px;color:var(--text);-webkit-line-clamp:2;-webkit-box-orient:vertical;font-family:Noto Serif SC,serif;font-size:clamp(30px,8vw,54px);font-weight:700;line-height:1.05;display:-webkit-box;overflow:hidden}.track-meta{margin-top:14px;font-size:14px;line-height:1.5}.progress-wrap{margin-bottom:28px}.time-row{justify-content:space-between;margin-bottom:10px;font-size:12px;font-weight:700}.progress-track{background:#f3f7f21a;border-radius:999px;height:5px;overflow:hidden}.progress-fill{border-radius:inherit;background:linear-gradient(90deg, var(--mint), var(--amber), var(--rose));transform-origin:0;width:100%;height:100%;transform:scaleX(0)}.controls{justify-content:center;gap:14px}.actions{justify-content:center;gap:12px;margin-top:18px}.icon-button,.action-button,.play-button,.wide-button{border:1px solid var(--line);cursor:pointer;background:#ffffff0f;justify-content:center;align-items:center;transition:border-color .16s,background .16s,color .16s,transform .16s;display:inline-flex}.icon-button,.action-button{border-radius:50%;width:48px;height:48px}.play-button{min-width:146px;height:54px;color:var(--mint);background:#b0f1dc29;border-radius:999px;gap:9px;font-size:15px;font-weight:800}.wide-button{min-width:128px;height:44px;color:var(--muted);border-radius:999px;gap:8px;font-size:13px;font-weight:800}.icon-button:hover,.action-button:hover,.play-button:hover,.wide-button:hover{background:#b0f1dc1f;border-color:#b0f1dc75;transform:translateY(-1px)}.icon-button:focus-visible,.action-button:focus-visible,.play-button:focus-visible,.wide-button:focus-visible{outline-offset:3px;outline:3px solid #f2c07480}.action-button.is-active:first-child{color:var(--rose);background:#e99ab029;border-color:#e99ab099}.action-button.is-active:last-child{color:var(--amber);background:#f2c07424;border-color:#f2c0749e}.wide-button.is-active{color:#dcd7ff;background:#8a7cf629;border-color:#8a7cf694}svg{stroke-width:2px;width:20px;height:20px}.play-button svg{width:21px;height:21px}@media (width<=620px){body{overflow:auto}.shell{align-items:stretch;padding:16px}.deck{border-radius:22px;flex-direction:column;justify-content:flex-start;min-height:calc(100svh - 32px);padding:clamp(34px,8svh,58px) 22px 22px;display:flex}.mast{align-items:flex-start}.signal{min-width:76px;padding-inline:10px}.track-zone{text-align:center;grid-template-columns:1fr;justify-items:center;margin:34px 0 28px}.orbit{width:min(42vw,136px)}h2{min-height:72px}.play-button{min-width:132px}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.001ms!important;animation-duration:.001ms!important}}