:root{color-scheme:dark;--bg:#141612;--layer:#1b1e19;--edge:#343930;--ink:#f2f3e9;--soft:#b3b8a9;--mute:#93998b;--acid:#ddf9a0;--mono:"Cascadia Mono","SFMono-Regular",Consolas,monospace;--ease:cubic-bezier(.2,.7,.23,1);font-family:Inter,"Segoe UI","Microsoft YaHei UI","PingFang SC",system-ui,sans-serif}
*{box-sizing:border-box}html{scrollbar-gutter:stable}body{margin:0;background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased}button,input{font:inherit}button,a{touch-action:manipulation;-webkit-tap-highlight-color:transparent}button{background:none;color:inherit;border:0;cursor:pointer}button:disabled{opacity:.43;cursor:default}a{color:inherit;text-decoration:none}h1,h2,p{margin:0}[hidden]{display:none!important}:focus-visible{outline:2px solid var(--acid);outline-offset:4px}.symbols{position:absolute;width:0;height:0;overflow:hidden}.icon{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.65;stroke-linejoin:round;stroke-linecap:round;flex:none}.small{width:14px;height:14px}
.container,.bar-inner,.site-foot{width:min(100% - 112px,1416px);margin-inline:auto}
.topbar{border-bottom:1px solid #2e332a;background:#141612}.bar-inner{height:68px;display:flex;justify-content:space-between;align-items:center}.wordmark{display:flex;align-items:center;gap:11px;font-size:19px;letter-spacing:-1.05px;font-weight:850}.wordmark svg{width:33px;height:33px;color:var(--acid)}.brand-light{font-weight:460}.bar-inner nav{display:flex;align-items:center;gap:24px;font-size:13px}.nav-current{color:var(--acid);position:relative}.nav-current:before{content:"";width:5px;height:5px;border-radius:50%;background:var(--acid);display:inline-block;margin-right:8px;vertical-align:middle}.nav-studio{display:inline-flex;align-items:center;gap:8px;border:1px solid #414739;border-radius:7px;padding:9px 14px}.nav-studio .icon{width:15px;height:15px}.nav-studio:hover,.soft-btn:hover,.back-btn:hover,.cue-btn:hover,.heart-btn:hover{background:#30362a}
.hero{position:relative;isolation:isolate;overflow:hidden;display:grid;grid-template-columns:1.06fr 1fr;min-height:288px;border-bottom:1px solid var(--edge)}.hero-copy{position:relative;z-index:1;padding:46px 0 36px;align-self:center}.eyebrow,.subhead,.index-mark,.hero-index,.art-register,.viewer-foot,.site-foot{font:10px/1.4 var(--mono);letter-spacing:.16em}.eyebrow{display:flex;align-items:center;gap:11px;color:var(--acid)}.eyebrow i,.wave-head i{width:16px;height:2px;background:var(--acid);display:inline-block}.eyebrow span{color:#abb29f}.hero h1{font-size:clamp(52px,5.8vw,90px);line-height:1.12;letter-spacing:-.075em;margin:15px 0 12px;font-weight:720}.hero h1 span{color:var(--acid);letter-spacing:0;margin-left:4px;font-family:Arial,sans-serif}.hero-copy>p{font-size:clamp(13px,1.1vw,16px);color:var(--soft);line-height:1.8;max-width:550px}.hero-bottom{display:flex;align-items:center;gap:18px;margin-top:23px}.hero-play,.primary{display:inline-flex;gap:9px;align-items:center;justify-content:center;background:var(--acid);color:#1b2511;border-radius:6px;padding:11px 17px;font-weight:700;font-size:13px;transition:background .2s,transform .2s}.hero-play:hover,.primary:hover{background:#eeffca;transform:translateY(-1px)}.hero-play .icon{width:12px;height:12px}.hero-index{color:var(--mute);letter-spacing:.1em}
.hero-art{pointer-events:none;position:relative;align-self:stretch;overflow:hidden;min-width:0}.hero-art canvas,.jacket canvas,.sleeve canvas{display:block;width:100%;height:100%}.hero-art canvas{position:absolute;inset:0}.art-register{position:absolute;bottom:23px;right:0;display:flex;align-items:center;gap:13px;font-size:8px;color:#a3ac91}.art-register span:first-child{border:1px solid #5a634c;border-radius:9px;padding:1px 6px;letter-spacing:.03em}
.shelf{padding:36px 0 60px;min-height:42vh}.shelf-title{display:flex;align-items:end;justify-content:space-between;gap:14px}.subhead{color:var(--mute);font-size:9px}.shelf h2{font-size:27px;line-height:1.45;letter-spacing:-.055em;margin-top:3px}.shelf h2 small{font:11px var(--mono);color:#a8ad9f;letter-spacing:.02em;vertical-align:middle}.search{height:35px;background:#1b1e18;border:1px solid var(--edge);border-radius:6px;display:flex;align-items:center;gap:8px;padding:0 10px;color:var(--mute)}.search .icon{width:15px;height:15px}.search input{font-size:12px;min-width:0;width:166px;border:0;outline:none;background:transparent;color:var(--ink)}.search input::placeholder{color:var(--mute)}.search:focus-within{border-color:var(--acid)}
.tabs{display:flex;align-items:center;gap:7px;margin:14px 0 20px;flex-wrap:wrap}.tab{font-size:12px;color:var(--soft);border:1px solid var(--edge);border-radius:32px;display:flex;align-items:center;gap:5px;padding:6px 13px;transition:background .2s}.tab:hover{background:#282d23}.tab[aria-pressed=true]{background:#e5eadc;color:#1d2317;border-color:#e5eadc;font-weight:650}.tab .icon{width:13px;height:13px}.status-line{color:var(--soft);font-size:14px;padding:16px 0 7px}
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px 20px}.work-card{min-width:0;position:relative;isolation:isolate}.cover-link{display:block;width:100%;text-align:left;padding:0;color:inherit}.sleeve{aspect-ratio:2.13;position:relative;overflow:hidden;isolation:isolate;border-radius:9px;background:#2e3930;box-shadow:inset 0 0 0 1px #ffffff12}.sleeve canvas{transition:transform .7s var(--ease),filter .5s}.cover-link:hover canvas,.cover-link:focus-visible canvas{transform:scale(1.035);filter:brightness(1.08)}.sleeve .stamp,.large-cover .stamp{position:absolute;left:15px;top:13px;color:#fffbee;font:10px var(--mono);letter-spacing:.1em;text-shadow:0 1px 4px #0008}.stamp b{font-weight:600}.sleeve .cover-time{position:absolute;right:12px;bottom:11px;color:white;background:#10130ca8;border:1px solid #ffffff24;border-radius:20px;padding:3px 8px;font:10px var(--mono);backdrop-filter:blur(5px)}.turn{position:absolute;left:15px;bottom:13px;width:35px;height:35px;display:grid;place-items:center;border:1px solid #fff8;border-radius:50%;color:white;background:#141a1447;backdrop-filter:blur(3px);transition:background .3s,color .3s}.turn .icon{width:14px;height:14px;margin-left:2px}.cover-link:hover .turn{background:var(--acid);color:#182314;border-color:var(--acid)}.work-card>.heart-btn{position:absolute;right:10px;top:9px;width:31px;height:31px;background:#171b14a9;border-color:#e6f0d55c;backdrop-filter:blur(4px)}.work-card>.heart-btn .icon{width:15px;height:15px}.heart-btn{border:1px solid var(--edge);display:inline-grid;place-items:center;border-radius:50%;width:36px;height:36px;flex:none}.heart-btn[aria-pressed=true]{color:var(--acid);border-color:#8d9b72}.heart-btn[aria-pressed=true] svg{fill:currentColor}
.card-data{padding:11px 1px 0}.card-line{display:flex;align-items:center;gap:7px;color:var(--mute);font-size:11px}.card-line i{width:3px;height:3px;border-radius:50%;background:#737b68}.card-name{margin:0 0 5px;font-size:clamp(16px,1.35vw,21px);line-height:1.38;letter-spacing:-.035em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:620}.site-foot{display:flex;align-items:center;justify-content:space-between;padding:18px 0 24px;border-top:1px solid var(--edge);color:var(--mute);font-size:9px}.site-foot b,.viewer-foot b{color:#657254;font-weight:400}
body.listening{overflow:hidden}#viewer{padding:0;inset:0;width:100%;max-width:none;height:100%;max-height:none;max-block-size:none;overflow:auto;border:none;background:#151914;color:var(--ink);margin:0;overscroll-behavior:contain;scrollbar-color:#53604b #1b2018}#viewer::backdrop{background:rgba(10,13,9,.75)}.listener{position:relative;min-height:100%;display:flex;flex-direction:column;background:radial-gradient(ellipse 87% 70% at 18% 11%,var(--glow,#2d3723),transparent 59%),#151914}.viewer-head,.listen-content{width:min(100% - 112px,1190px);margin:0 auto}.viewer-head{min-height:72px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #68725c40}.soft-btn,.cue-btn{display:inline-flex;align-items:center;gap:7px;border-radius:6px;border:1px solid var(--edge);font-size:12px;padding:8px 12px}.index-mark{color:var(--mute);font-size:10px}.index-mark b{margin-left:12px;font-weight:500;color:var(--ink)}.listen-content{flex:1;display:flex;flex-direction:column;justify-content:center;padding:clamp(20px,5vh,54px) 0 20px;gap:clamp(18px,3.8vh,41px)}.work-intro{display:grid;grid-template-columns:minmax(220px,.78fr) minmax(0,1.25fr);align-items:center;gap:clamp(28px,5vw,78px)}.jacket{width:100%;aspect-ratio:1.17;max-height:43vh;border-radius:8px;overflow:hidden;position:relative;background:#323b2b;box-shadow:0 16px 42px -24px #000d}.large-cover{position:absolute;inset:0}.large-cover .stamp{left:5%;top:6%;font-size:12px}.large-cover .art-register{bottom:6%;right:5%;color:#fffbe2}.large-cover .art-register span:first-child{border-color:#d2d7ca99}
.work-info .eyebrow span{color:var(--acid);font-family:inherit;letter-spacing:.08em}.work-info h2{font-size:clamp(27px,3.3vw,54px);font-weight:630;line-height:1.19;letter-spacing:-.04em;overflow-wrap:anywhere;margin:12px 0 7px}.creator{font-size:13px;color:#c4cbb9}.description{font-size:14px;line-height:1.65;color:var(--soft);margin-top:10px;white-space:pre-line;overflow-wrap:anywhere}.sources{margin:16px 0;display:grid;gap:7px}.sources>div{display:flex;gap:8px;align-items:baseline;font-size:13px;color:#e0e5d6}.sources b{font:10px var(--mono);padding:2px 4px;border:1px solid #66745b;color:var(--acid);border-radius:3px}.sources>div:last-child b{color:#aedcd3;border-color:#526c65}.sources span{overflow-wrap:anywhere}.work-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:17px}.work-actions .primary,.work-actions .soft-btn{min-height:39px}.work-actions .primary .icon:first-child{width:16px;height:16px}.soft-btn .icon{width:14px;height:14px}.work-actions .heart-btn{width:39px;height:39px}.line-link{display:inline-flex;align-items:center;gap:5px;color:var(--soft);font-size:12px;text-decoration:underline;text-decoration-color:#637058;text-underline-offset:3px}.line-link:hover{color:var(--acid)}
.player-panel{background:#1c211bd4;border:1px solid #374131;border-radius:10px;padding:17px 20px 13px}.wave-head,.wave-head>span,.viewer-foot{display:flex;align-items:center}.wave-head,.viewer-foot{justify-content:space-between}.wave-head,.wave-head b{font-size:11px;font-weight:500;color:var(--soft)}.wave-head span{gap:7px}.wave-head em{color:var(--mute);font:8px var(--mono);letter-spacing:.13em}.wave-head i{width:8px}.wave-head s{width:8px;height:8px;background:#a6c779;border-radius:2px}.wave-head #mix-range{font:11px var(--mono);color:#c7d3ba}.wave-strip{position:relative;height:clamp(58px,9vh,94px);margin:8px 0;isolation:isolate}.wave-strip canvas{display:block;width:100%;height:100%;border-radius:3px}.wave-strip input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:crosshair}.wave-strip:focus-within{outline:1px solid var(--acid);outline-offset:3px}.clocks{font:12px var(--mono);color:var(--mute);white-space:nowrap}.clocks b{font-weight:500;color:var(--ink)}.clocks i{font-style:normal;margin:0 5px;color:#627057}.cue-btn .icon{width:14px;height:14px}.player-status{font-size:13px;color:#e5caa3;margin-top:9px}.viewer-foot{border-top:1px solid #45503b80;padding-top:12px;color:var(--mute);font-size:9px}.viewer-foot .line-link{font-family:inherit;letter-spacing:0}.notice{font-size:13px;color:var(--acid);min-height:0}.notice:empty{display:none}.toast{position:fixed;z-index:20;bottom:20px;left:50%;transform:translateX(-50%);border:1px solid #626c56;border-radius:7px;padding:10px 16px;max-width:90vw;color:#e9f2db;background:#252e20;font-size:13px}#copy-fields{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--soft)}#copy-field{min-width:0;flex:1;background:#12170e;border:1px solid var(--edge);color:var(--ink);padding:8px}
@media(min-width:1600px){.grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:980px){.container,.bar-inner,.site-foot,.viewer-head,.listen-content{width:calc(100% - 56px)}.grid{gap:22px 14px}.hero{grid-template-columns:1.18fr .82fr}.work-intro{grid-template-columns:minmax(180px,.75fr) minmax(0,1.35fr);gap:26px}}
@media(max-width:730px){.container,.bar-inner,.site-foot,.viewer-head,.listen-content{width:calc(100% - 34px)}.bar-inner{height:57px}.wordmark{font-size:17px;gap:7px}.wordmark svg{width:27px}.bar-inner nav{gap:13px;font-size:12px}.nav-studio{padding:7px 9px}.hero{min-height:235px;grid-template-columns:1fr}.hero-copy{padding:32px 0 26px;max-width:79%}.hero-art{position:absolute;right:-12%;width:63%;height:100%;top:0;opacity:.47;mask-image:linear-gradient(to right,transparent,#000 41%);z-index:-1}.art-register{display:none}.hero h1{font-size:51px}.hero-copy>p{font-size:13px;max-width:340px}.hero-index{display:none}.shelf{padding:25px 0 39px}.grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 12px}.card-name{font-size:15px}.sleeve{aspect-ratio:1.65}.tabs{gap:5px}.tab{padding:6px 10px}.search input{width:120px}.work-intro{grid-template-columns:minmax(144px,.67fr) minmax(0,1.3fr);gap:18px}.viewer-head{min-height:56px}.listen-content{padding:21px 0 18px;gap:19px}.work-info h2{font-size:25px}.jacket{aspect-ratio:.92;max-height:none}.sources{margin:10px 0}.sources>div{font-size:12px}.work-actions{gap:6px}.description{font-size:13px}.player-panel{padding:14px 13px 10px}}
@media(max-width:540px){.hero-copy{max-width:87%}.hero h1{font-size:45px}.hero-art{opacity:.33}.hero-copy>p{max-width:290px}.eyebrow{font-size:9px;gap:7px}.nav-current:before{display:none}.search input{width:95px;font-size:11px}.shelf h2{font-size:24px}.sleeve{aspect-ratio:1.5}.sleeve .stamp{left:9px;top:10px;font-size:8px}.turn{left:9px;bottom:8px;width:27px;height:27px}.sleeve .cover-time{right:7px;bottom:9px;font-size:9px}.work-card>.heart-btn{right:7px;top:6px;width:27px;height:27px}.card-line{font-size:10px;flex-wrap:wrap;gap:4px}.index-mark{font-size:8px;letter-spacing:.08em}.index-mark b{margin-left:4px}.work-intro{display:flex;flex-direction:column;align-items:stretch;gap:14px}.jacket{aspect-ratio:2.06;max-height:26vh;min-height:110px;flex-shrink:0}.work-info h2{margin:7px 0 4px}.work-info .eyebrow{font-size:9px}.sources{gap:5px}.work-actions{margin-top:12px}.primary{padding:8px 11px}.work-actions .soft-btn{padding:8px 9px}.player-panel{padding:11px 10px 10px}.wave-strip{height:62px}.wave-head em{display:none}.clocks{font-size:11px}.cue-btn{font-size:11px;margin:0;padding:6px 7px}.viewer-foot{margin-top:0}.listen-content{justify-content:flex-start}.large-cover .art-register{display:none}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}

.jacket { touch-action: pan-y pinch-zoom; }
.transport {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  column-gap: 10px;
  margin-top: 11px;
}
.transport .cue-btn {
  justify-self: end;
  border-radius: 999px;
  white-space: nowrap;
  color: var(--soft);
}
.playback-dock, .viewer-back {
  display: inline-flex;
  align-items: center;
  padding: 2px 4px;
  border: 1px solid #eff6e329;
  border-radius: 999px;
  background: linear-gradient(155deg, #edf3e510 0%, #ffffff03 54%, #a6b69c0a), #30362fc9;
  box-shadow: inset 0 1px 0 #ffffff12, inset 0 -1px 0 #0002, 0 3px 10px -5px #0006;
  -webkit-backdrop-filter: blur(16px) saturate(125%);
  backdrop-filter: blur(16px) saturate(125%);
}
.viewer-back {
  min-height: 36px;
  gap: 5px;
  padding: 0 14px 0 10px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 550;
  white-space: nowrap;
  transition: border-color .18s, transform .18s var(--ease);
}
.viewer-back .icon { width: 16px; height: 16px; color: var(--acid); stroke-width: 2; }
.viewer-back:active { transform: scale(.97); }
@media (hover: hover) {
  .viewer-back:hover { border-color: #ddf9a066; }
}
@media (pointer: coarse) {
  .viewer-back { min-height: 44px; }
}
.playback-dock button {
  position: relative;
  display: grid;
  place-items: center;
  width: 46px;
  height: 44px;
  padding: 0;
  border-radius: 50%;
  color: #e9eee2;
  isolation: isolate;
}
.playback-dock button::before {
  content: "";
  position: absolute;
  inset: 4px;
  z-index: -1;
  border-radius: inherit;
  transition: background-color .18s, transform .18s var(--ease);
}
.playback-dock .icon { width: 20px; height: 20px; }
.playback-dock #prev .icon { transform: scaleX(-1); }
.playback-dock #play { width: 44px; color: #1c2617; }
.playback-dock #play::before {
  inset: 2px;
  background: linear-gradient(155deg, #f0fbdc, var(--acid));
  box-shadow: inset 0 1px 0 #ffffff90, 0 1px 5px #0004;
}
.playback-dock #play .icon { width: 17px; height: 17px; }
.playback-dock button:disabled { opacity: .28; }
.playback-dock button:focus-visible { outline-offset: 0; }
@media (hover: hover) {
  .playback-dock button:enabled:hover::before { background-color: #e9efdf18; }
  .playback-dock #play:enabled:hover::before { transform: scale(1.06); }
}
.playback-dock button:enabled:active::before { transform: scale(.92); }
@media (max-width: 360px) {
  .transport { grid-template-columns: minmax(0, 1fr) auto auto; column-gap: 6px; }
  .clocks b, .clocks span { display: block; }
  .clocks i { display: none; }
  .playback-dock button { width: 44px; }
}
@media (prefers-reduced-transparency: reduce) {
  .playback-dock, .viewer-back { background: #343a32; -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (forced-colors: active) {
  .playback-dock, .viewer-back, .playback-dock #play::before { border: 1px solid ButtonText; }
}

.account-line {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: -4px 0 18px;
  color: var(--mute);
  font-size: 12px;
}
.account-line b { color: var(--ink); font-weight: 550; overflow-wrap: anywhere; }
.account-line button { flex: none; }
#favorite-auth, #delete-dialog {
  width: min(375px, calc(100% - 36px));
  max-height: calc(100% - 32px);
  max-height: calc(100dvh - 32px);
  padding: clamp(20px, 4vw, 30px);
  border: 1px solid #515b47;
  border-radius: 14px;
  background: var(--layer);
  color: var(--ink);
  box-shadow: 0 18px 80px #0007;
  overscroll-behavior: contain;
}
#favorite-auth::backdrop, #delete-dialog::backdrop { background: #0d100bc2; }
body:has(#favorite-auth[open]), body:has(#delete-dialog[open]) { overflow: hidden; }
#auth-title, #delete-title { font-size: 25px; margin: 16px 0 6px; letter-spacing: -.04em; }
#auth-context, #delete-description { color: var(--soft); font-size: 13px; line-height: 1.6; margin-bottom: 18px; overflow-wrap: anywhere; }
#auth-form label { display: block; margin: 13px 0 4px; font-size: 13px; }
#auth-form input {
  width: 100%; padding: 10px 12px;
  border: 1px solid #454d3d; border-radius: 6px;
  background: #151813; color: var(--ink); font-size: 16px;
}
.auth-actions { display: flex; gap: 8px; margin: 19px 0 15px; }
.auth-actions button { justify-content: center; min-height: 40px; }
#auth-submit { flex: 1; }
#auth-error, #delete-error { margin: 10px 0 0; font-size: 13px; color: #ffc3ac; }
#auth-switch { padding: 3px 0; }

.account-entry {
  display: inline-flex; align-items: center; gap: 5px;
  min-height: 36px; padding: 4px 2px; color: var(--soft);
}
.account-entry:hover { color: var(--ink); }
.account-entry .icon { width: 17px; height: 17px; }
.work-card > .heart-btn, #detail-fav {
  display: inline-flex; justify-content: center; align-items: center; gap: 5px;
  width: auto; padding: 0 9px; border-radius: 999px;
}
.favorite-count { font: 11px/1 var(--mono); font-variant-numeric: tabular-nums; }
.favorite-count:empty { display: none; }
.viewer-links { display: flex; align-items: center; gap: 16px; }
#delete-work { color: #cba89d; }
#delete-work:hover { color: #ffd4c7; }
#delete-name { color: var(--ink); }
#delete-dialog .auth-actions { justify-content: end; margin-bottom: 0; }
.danger-btn { padding: 8px 16px; border-radius: 6px; background: #eebaa8; color: #31170e; font-size: 13px; font-weight: 650; }
.danger-btn:hover { background: #f8cbbd; }
#parent-work:not([href]) { color: var(--mute); text-decoration: none; }
@media (max-width: 540px) {
  .bar-inner nav { gap: 12px; }
  .nav-current { display: none; }
  .work-card > .heart-btn { padding: 0 7px; gap: 4px; }
  .viewer-foot { flex-wrap: wrap; row-gap: 6px; }
}