@font-face { font-family: Pulsar; src: url('/_nuxt/PulsarClassSolid.CkRX6frH.ttf') format('truetype'); font-display: swap; }
@property --paper { syntax: "<color>"; inherits: true; initial-value: #eef0e6; }
@property --panel { syntax: "<color>"; inherits: true; initial-value: #f4f3e9; }
@property --ink { syntax: "<color>"; inherits: true; initial-value: #233d36; }
@property --muted { syntax: "<color>"; inherits: true; initial-value: #687971; }
@property --accent { syntax: "<color>"; inherits: true; initial-value: #527767; }
@property --line { syntax: "<color>"; inherits: true; initial-value: #233d362d; }
:root { --accent: #527767; --scene-art: url('/assets/chihiro043.jpg'); --startup-art: url('/assets/chihiro042.jpg'); --motion-out: cubic-bezier(.22,1,.36,1); --motion-inout: cubic-bezier(.76,0,.24,1); transition: --paper .9s var(--motion-out),--panel .9s var(--motion-out),--ink .9s var(--motion-out),--muted .9s var(--motion-out),--accent .9s var(--motion-out),--line .9s var(--motion-out); }
:root[data-theme="dark"] { --accent: #c0d3c5; --scene-art: url('/assets/howl043.jpg'); --startup-art: url('/assets/howl043.jpg'); }
:root[data-theme] .landscape { background: linear-gradient(color-mix(in srgb,var(--paper) 60%,transparent),color-mix(in srgb,var(--paper) 60%,transparent)),var(--scene-art) center/cover; }
:root[data-theme="dark"] .landscape { background: linear-gradient(180deg,color-mix(in srgb,var(--paper) 87%,transparent),color-mix(in srgb,var(--paper) 97%,transparent) 55%,color-mix(in srgb,var(--paper) 95%,transparent)),var(--scene-art) center/cover; }
body[data-route] .topbar { border: 0; background: transparent; backdrop-filter: none; pointer-events: none; }
.topbar > *, .topbar-right > * { pointer-events: auto; }
.sound-toggle, .topbar-right > button, .brand-caption { border: 0; }
.topbar .brand { padding: 0 14px; }
.topbar-right > .menu-toggle { clip-path: polygon(0 0,100% 0,100% 100%,12% 100%,0 82%); }
.barcode { display: flex; align-items: center; justify-content: space-between; background: none; }
.barcode i { width: 1px; height: 100%; background: currentColor; animation: nav-wave 1.5s ease-in-out infinite; animation-delay: calc(var(--i) * -.16s); }
.sound-toggle[aria-pressed="false"] .barcode i { animation-play-state: paused; height: 18%; }
body.booting:not(.startup-entering) .topbar, body.booting:not(.startup-entering) #transport { visibility: hidden; }
body.booting { overflow: hidden; }

.view { inset: 0 0 var(--player-height); animation: none; }
.view:focus-visible { box-shadow: none; }
.view-heading { left: 20%; top: 16%; width: clamp(230px,22vw,400px); padding: 0; pointer-events: none; text-shadow: none; z-index: 2; }
.view-heading .view-current { margin: 0 0 20px; display: flex; align-items: center; gap: 15px; color: var(--ink); font: 17px/1.3 Pulsar, Arial, sans-serif; letter-spacing: 0; }
.view-current .work-symbol { font: 21px Arial, sans-serif; }
.view-index-mask { display: block; height: 1.3em; min-width: 2ch; overflow: hidden; margin-left: 10px; }
.view-heading .view-current b { display: block; font: inherit; line-height: 1.3; color: inherit; }
.view-heading #view-work-title { margin: 0; width: 100%; font: 500 clamp(30px,3vw,54px)/1.12 Pulsar, "Microsoft YaHei", sans-serif; color: var(--ink); letter-spacing: -.6px; overflow-wrap: normal; }
.view-heading #view-work-title > .title-line-mask { display: block; font-size: inherit; overflow: hidden; padding-bottom: .09em; margin-bottom: .05em; }
.title-line { display: block; width: fit-content; will-change: transform; }
.view-note { pointer-events: none; }
.record-item { perspective: 900px; }
.record-item button { background: color-mix(in srgb,var(--panel) 75%,var(--accent) 25%); }
.record-item button, .record-item button:hover, .record-item button:active:not(:disabled) { transform: rotate(-45deg) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg)); box-shadow: inset 0 0 0 2px #263f3020; transition: transform 1.1s var(--motion-out), scale .7s var(--motion-out); }
.record-item button:hover { scale: 1.015; }
.record-item button::before { display: none; }
.record-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.record-lines circle { fill: none; stroke: #fafbf4; stroke-width: 11; stroke-dasharray: 0 1800; transform-origin: 300px 300px; transition: stroke-dasharray .8s var(--motion-out); animation: record-halo 14s linear infinite; }
.record-lines circle:nth-child(2) { stroke-width: 8; animation-duration: 12s; transition-delay: .14s; }
.record-lines circle:nth-child(3) { stroke-width: 4; animation-duration: 10s; transition-delay: .28s; }
.record-item.active .record-lines circle:first-child, .record-item button:focus-visible .record-lines circle:first-child { stroke-dasharray: 760 116; }
.record-item.active .record-lines circle:nth-child(2), .record-item button:focus-visible .record-lines circle:nth-child(2) { stroke-dasharray: 340 59; }
.record-item.active .record-lines circle:nth-child(3), .record-item button:focus-visible .record-lines circle:nth-child(3) { stroke-dasharray: 50 10; }
.catalog-state.success { display: none; }
.about.route-page, .contact.route-page { animation: none; }

body[data-route="detail"] .topbar { display: none; }
.detail.route-page { position: relative; padding: 0 0 var(--player-height); animation: none; background: var(--paper); color: var(--ink); }
.immersive-backdrop { filter: blur(80px) saturate(.9); opacity: .22; }
:root[data-theme="dark"] .immersive-backdrop { filter: blur(80px) brightness(.65) saturate(.9); opacity: .35; }
.immersive-backdrop::after { background: linear-gradient(0deg,color-mix(in srgb,var(--paper) 80%,transparent),color-mix(in srgb,var(--paper) 35%,transparent)); }
.immersive-heading { position: absolute; top: 22px; left: 24px; z-index: 3; width: auto; height: 28px; padding: 0; }
.immersive-heading .back-link { display: grid; place-items: center; width: 32px; height: 32px; padding: 4px; }
.immersive-heading svg { width: 23px; height: 23px; fill: none; stroke: var(--ink); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.detail .detail-content { width: min(1460px,84%); height: 100%; margin: 0 auto; padding: 92px 0 26px; grid-template-columns: minmax(0,1fr) minmax(0,1.08fr); gap: clamp(60px,7vw,135px); align-items: stretch; }
.immersive-record { display: grid; place-items: center; min-width: 0; padding-top: 34px; }
.immersive-cover { position: relative; width: min(100%,49dvh,520px); border-radius: 50%; overflow: visible; padding: 0; border: 1px solid #ffffff12; background: repeating-radial-gradient(circle,#14151a 0 1px,#191a1e 1px 3px,#101114 3px 4px); box-shadow: 0 0 0 15px #ffffff05,0 15px 40px #0004,inset 0 0 0 8px #050608; }
.vinyl-art { position: absolute; inset: 16%; overflow: hidden; border-radius: 50%; animation: vinyl-spin 22s linear infinite; animation-play-state: paused; }
.vinyl-art::after { content: ""; width: 10px; height: 10px; border: 3px solid #edeadeb0; background: #171916; position: absolute; left: 50%; top: 50%; border-radius: 50%; transform: translate(-50%,-50%); }
.immersive-cover .vinyl-art img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; animation: none; }
.playing .vinyl-art { animation-play-state: running; }
.immersive-tonearm { position: absolute; top: -32%; left: 46%; width: 50%; height: 66%; overflow: visible; transform-origin: 12.73% 7.69%; transform: rotate(-24deg); transition: transform 1.2s var(--motion-inout); filter: drop-shadow(0 3px 5px #0003); }
.playing .immersive-tonearm { transform: rotate(0); }
.immersive-tonearm path { fill: none; stroke: var(--ink); stroke-width: 8; stroke-linecap: round; }
.immersive-tonearm .tonearm-head { stroke-width: 21; }
.immersive-tonearm circle { fill: var(--panel); }
.immersive-tonearm .tonearm-base { fill: var(--panel); stroke: var(--line); stroke-width: 1; }
.immersive-tonearm .tonearm-pivot { fill: var(--ink); }
.detail .lyrics { grid-template-rows: auto minmax(0,1fr); }
.detail .detail-heading { text-align: left; min-width: 0; padding-bottom: 24px; color: var(--ink); }
.detail .detail-heading h1 { font: 500 clamp(22px,1.7vw,29px)/1.35 Arial,"Microsoft YaHei",sans-serif; letter-spacing: 0; max-height: none; margin: 0 0 10px; }
.detail .detail-heading p { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 0; color: var(--muted); font-size: 12px; line-height: 1.6; letter-spacing: 0; }
#detail-album:not(:empty)::before { content: "专辑："; }
#detail-auth:not(:empty)::before { content: "歌手："; }
#lyrics-status { display: block; font-size: 10px; color: var(--muted); margin-top: 12px; }
#lyrics-status:empty { display: none; }
.detail #lyrics-content { padding: 22dvh 14px 22dvh 0; mask-image: linear-gradient(transparent,#000 13%,#000 82%,transparent); scroll-behavior: smooth; }
.detail .lyric-line, .detail .lyric-line.current { font-size: clamp(16px,1.3vw,21px); line-height: 1.65; padding: 12px 0; }
.detail .lyric-line { color: var(--muted); opacity: .7; }
.detail .lyric-line.current, .detail .lyric-line:hover { color: var(--ink); opacity: 1; }
.detail .lyric-line.current { font-weight: 500; transform: scale(1.035); }
.detail .lyric-line small { color: inherit; opacity: .75; font-size: .8em; }
.detail .lyric-empty { color: var(--muted); font: 17px Arial,"Microsoft YaHei",sans-serif; }
.detail .lyric-empty small, .detail .lyrics-credit, .detail .text-link { color: var(--muted); }
.detail .lyric-empty small:empty { display: none; }
body[data-route="detail"] .transport { background: color-mix(in srgb,var(--panel) 94%,transparent); color: var(--ink); border-color: var(--line); }
body[data-route="detail"] .transport-track small { color: var(--muted); }
body[data-route="detail"] .transport-play { background: var(--ink); color: var(--paper); }
body[data-route="detail"] .transport input { accent-color: var(--accent); }
.about-pane { transition: none; opacity: 1; }
.about-pane > * { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--motion-out),transform .95s var(--motion-out); }
.about-pane.is-visible > * { opacity: 1; transform: translateY(0); }
.about-pane > :nth-child(2) { transition-delay: .08s; }
.about-pane > :nth-child(3) { transition-delay: .16s; }
.about-pane > :nth-child(4) { transition-delay: .24s; }
.about-pane .about-pane-index { transform: none; }
.about-portrait figure { clip-path: inset(0 100% 0 0); transition: clip-path 1.2s var(--motion-out),opacity 1s; }
.about-portrait.is-visible figure { clip-path: inset(0); }
.about-portrait figure img { transform: scale(1.08); transition: transform 1.6s var(--motion-out); }
.about-portrait.is-visible figure img { transform: scale(1); }

.navigation[open] { display: block; position: fixed; left: auto; right: 22px; top: 80px; width: 300px; max-width: calc(100vw - 32px); height: auto; max-height: calc(100dvh - 105px); margin: 0; padding: 0; border: 1px solid var(--line); border-radius: 0; background: var(--panel); color: var(--ink); transform-origin: top right; animation: menu-unfold .55s var(--motion-out); box-shadow: -7px 8px 0 color-mix(in srgb,var(--ink) 10%,transparent); }
.navigation::backdrop { background: #00000008; backdrop-filter: none; }
.navigation .nav-content { width: 100%; padding: 30px 24px 20px; }
.navigation .nav-content > .eyebrow { font-size: 8px; }
.navigation nav { margin: 24px 0; }
.navigation nav a { display: flex; align-items: center; gap: 12px; font: 24px Pulsar,Arial,sans-serif; padding: 12px 0; border-bottom: 1px solid var(--line); }
.navigation nav a small { font: 9px Orbitron,sans-serif; }
.navigation nav a span { margin-left: auto; font: 10px Arial,sans-serif; }
.navigation .text-link { font-size: 9px; }
.navigation .nav-close { right: 7px; top: 5px; width: 25px; height: 25px; background: none; color: var(--ink); font-size: 20px; }
.contact-github { display: inline-flex; align-items: center; gap: 12px; margin-top: 20px; padding: 10px 0; border-bottom: 1px solid var(--line); color: var(--ink); transition: color .3s; }
.contact-github svg { width: 19px; height: 19px; fill: currentColor; }
.contact-github > span { display: flex; align-items: baseline; gap: 9px; font-size: 13px; }
.contact-github small { font-size: 10px; color: var(--muted); }
.contact-github > span:last-child { margin-left: 18px; transition: transform .4s var(--motion-out); }
.contact-github:hover > span:last-child { transform: translate(3px,-3px); }
#contact-result[data-state="warning"], #contact-result[data-state="error"] { color: var(--ink); }

.startup { position: fixed; inset: 0; z-index: 10000; display: grid; place-items: center; overflow: hidden; background: #19313d; color: #fff7e7; touch-action: none; isolation: isolate; }
.startup::before, .startup::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
.startup::before { z-index: 0; background: var(--startup-art) center/cover; transform: scale(1.05); animation: startup-scene 20s ease-in-out infinite alternate; }
.startup::after { z-index: 1; background: radial-gradient(ellipse at center,#10273545,transparent 55%),linear-gradient(180deg,#0b1f3540,#10253625 45%,#08172499); }
.startup > * { z-index: 2; }
.startup-caption { position: absolute; top: 7%; left: 6%; display: grid; gap: 12px; text-shadow: 0 2px 12px #08203150; }
.startup-caption > span { font: 28px "SimSun",serif; letter-spacing: 5px; }
.startup-caption small { font: 8px Arial,sans-serif; letter-spacing: 2px; opacity: .8; }
.startup-footer { position: absolute; left: 6%; right: 6%; bottom: 7%; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding-top: 17px; border-top: 1px solid #fff7e747; font: 11px Arial,"Microsoft YaHei",sans-serif; letter-spacing: 2px; }
.startup-footer > span:first-child { font: italic 19px Georgia,serif; letter-spacing: 0; }
.startup[hidden], .page-transition[hidden] { display: none; }
.startup-circle { position: absolute; width: min(64vmin,600px); height: min(64vmin,600px); overflow: visible; filter: drop-shadow(0 1px 5px #06213a70); }
.startup-ring { fill: none; stroke: currentColor; stroke-width: .8; opacity: 0; transition: opacity .5s var(--motion-out) .2s; }
.startup-waves { fill: none; stroke: currentColor; stroke-width: 1; transition: opacity .6s var(--motion-out); }
.startup-waves line { stroke-dasharray: var(--length); stroke-dashoffset: 0; transition: stroke-opacity .2s,stroke-dashoffset .5s var(--motion-out); animation: startup-wave 1.8s ease-in-out infinite; animation-delay: var(--delay); }
.startup-center { width: 225px; height: 28px; overflow: hidden; font: 17px/28px Pulsar,Arial,sans-serif; text-shadow: 0 1px 8px #071e3670; }
.startup-progress { display: flex; justify-content: space-between; height: 28px; transition: transform .8s var(--motion-inout); }
.startup-progress > span { opacity: .8; }
#startup-progress { font: inherit; font-variant-numeric: tabular-nums; }
.startup #explore { display: flex; gap: 13px; align-items: center; justify-content: center; width: 100%; height: 28px; padding: 0; color: inherit; font: inherit; transition: transform .8s var(--motion-inout); }
.startup #explore i { width: 10px; height: 1px; background: currentColor; opacity: .4; transition: transform .45s var(--motion-out); }
.startup #explore:hover i:first-child { transform: translateX(-7px); }
.startup #explore:hover i:last-child { transform: translateX(7px); }
.startup.ready .startup-ring { opacity: 1; }
.startup.ready .startup-waves { opacity: 0; }
.startup.ready .startup-waves line { stroke-dashoffset: var(--length); animation: none; }
.startup.ready .startup-progress, .startup.ready #explore { transform: translateY(-100%); }
.page-transition { position: fixed; inset: 0; z-index: 9000; pointer-events: auto; touch-action: none; }
.page-transition canvas { display: block; width: 100%; height: 100%; }
.transition-wave { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: min(220px,40vw); height: 54px; display: flex; justify-content: center; align-items: center; gap: 4px; }
.transition-wave i { width: 1px; height: 100%; position: relative; transform: scaleY(0); }
.transition-wave i::after { content: ""; width: 100%; height: var(--height); top: calc((100% - var(--height)) / 2); position: absolute; background: var(--paper); animation: transition-pulse 1.2s ease-in-out infinite; animation-delay: var(--delay); }
body.is-transitioning { overflow: hidden; }
@keyframes vinyl-spin { to { transform: rotate(360deg); } }
@keyframes nav-wave { 0%,100% { transform: scaleY(.25); } 50% { transform: scaleY(1); } }
@keyframes startup-wave { 0%,100% { opacity: .35; } 50% { opacity: 1; } }
@keyframes startup-scene { from { transform: scale(1.05) translateX(-.6%); } to { transform: scale(1.025) translateX(.6%); } }
@keyframes transition-pulse { 0%,100% { transform: scaleY(.45); } 50% { transform: scaleY(1); } }
@keyframes menu-unfold { from { transform: scale(.12); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@media (max-width: 1000px) {
  .view-heading { left: 12%; width: 29vw; }
  .view-heading .view-current { font-size: 14px; gap: 12px; }
  .detail .detail-content { width: 86%; gap: 7%; }
}
@media (max-width: 600px) {
  .view-heading { left: 8%; top: 14%; width: 55vw; }
  .view-heading .view-current { font-size: 11px; gap: 9px; margin-bottom: 13px; }
  .view-current .work-symbol { font-size: 14px; }
  .view-index-mask { margin-left: 3px; }
  .view-heading #view-work-title { font-size: clamp(23px,6vw,31px); margin: 0; max-width: none; }
  .view-note { bottom: 8%; right: 7%; }
  .detail .detail-content { width: 90%; padding: 65px 0 12px; grid-template-columns: 1fr; grid-template-rows: minmax(175px,30dvh) minmax(0,1fr); gap: 24px; }
  .immersive-record { padding-top: 16px; }
  .immersive-cover { width: min(52vw,26dvh); border-radius: 50%; }
  .detail .detail-heading { text-align: center; padding-bottom: 12px; }
  .detail .detail-heading h1 { font-size: 21px; margin-bottom: 6px; }
  .detail .detail-heading p { justify-content: center; font-size: 10px; gap: 5px 12px; }
  .detail .lyrics { grid-template-rows: auto minmax(0,1fr); }
  .detail #lyrics-content { padding: 13dvh 10px 13dvh; }
  .detail .lyric-line, .detail .lyric-line.current { font-size: 16px; text-align: center; }
  #lyrics-status { margin-top: 6px; font-size: 9px; }
  .immersive-heading { top: 16px; left: 14px; }
  .navigation[open] { top: 70px; right: 16px; width: 280px; }
  .startup-caption { top: 8%; left: 8%; }
  .startup-caption > span { font-size: 23px; letter-spacing: 3px; }
  .startup-caption small { font-size: 7px; letter-spacing: 1px; }
  .startup-footer { left: 8%; right: 8%; bottom: 6%; align-items: flex-start; font-size: 9px; letter-spacing: 1px; }
  .startup-footer > span:last-child { max-width: 135px; text-align: right; line-height: 1.7; }
}
@media (max-height: 680px) and (max-width: 600px) {
  .detail .detail-content { grid-template-rows: minmax(120px,23dvh) minmax(0,1fr); gap: 14px; padding-top: 45px; }
  .immersive-cover { width: min(42vw,20dvh); }
  .detail .detail-heading h1 { font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .startup::before, .startup-waves line, .transition-wave i::after, .barcode i, .vinyl-art, .record-lines circle { animation: none; }
  .about-pane > *, .about-portrait figure, .about-portrait figure img, .immersive-tonearm { transition: none; }
}