*{box-sizing:border-box}html,body{height:100%;margin:0}body{display:grid;grid-template-columns:196px 1fr;grid-template-rows:1fr 90px;background:#111319;color:#e9edf5;font:14px 'Microsoft YaHei UI',sans-serif}button,a,input{font:inherit}button{border:0;border-radius:9px;background:transparent;color:#aeb8c7;min-height:44px;cursor:pointer}button:hover{background:#303743}button:focus-visible,a:focus-visible{outline:2px solid #c0f57a;outline-offset:2px}aside{background:#181b23;padding:28px 18px;display:flex;flex-direction:column;gap:24px;overflow:auto}a{color:#b4c0d1;text-decoration:none}.brand{color:#c0f57a;font-size:38px;text-align:center}nav{display:flex;flex-direction:column;gap:8px}nav button{text-align:left;padding:11px 16px;border-radius:16px;position:relative;overflow:hidden;background:linear-gradient(180deg,#2b323e 0%,#232935 55%,#1b2029 100%);border:1px solid #414a59;border-top-color:#556074;box-shadow:0 1px 0 #0a0c10 inset,0 2px 6px #0000004d,0 1px 0 #ffffff12;color:#c5cddb;font-weight:600;letter-spacing:.03em;transition:transform .22s cubic-bezier(.34,1.56,.64,1),filter .22s ease,box-shadow .28s ease,border-color .28s ease}nav button::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(105deg,transparent 34%,#ffffff33 50%,transparent 66%);transform:translateX(-130%);transition:transform .65s cubic-bezier(.4,0,.2,1)}nav button:hover{filter:brightness(1.14);transform:translateY(-2px);border-color:#58647f;border-top-color:#6e7d9c;box-shadow:0 1px 0 #0a0c10 inset,0 7px 14px #00000066,0 2px 0 #ffffff14}nav button:hover::after{transform:translateX(130%)}nav button:active{transform:translateY(1px) scale(.985);filter:brightness(.92);box-shadow:0 0 0 1px #3a4350 inset,0 1px 3px #0006}@keyframes navGlow{0%,100%{opacity:.5}50%{opacity:1}}nav button[aria-current=page]{background:linear-gradient(180deg,#42562e 0%,#324227 60%,#293521 100%);border-color:#627a3c;border-top-color:#78954a;color:#e0f9b4;text-shadow:0 1px 0 #0000004d;box-shadow:0 1px 0 #0c0f0a inset,0 4px 10px #00000059,0 1px 0 #ffffff1a}nav button[aria-current=page]::before{content:'';position:absolute;left:0;top:22%;bottom:22%;width:4px;border-radius:99px;background:linear-gradient(180deg,#d7ff8e,#9ce052);box-shadow:0 0 8px #c0f57a99;pointer-events:none;animation:navGlow 2.4s ease-in-out infinite}nav button[aria-current=page]::after{opacity:.65}aside>a:last-child{display:block;text-align:center;padding:12px 10px;border-radius:16px;position:relative;overflow:hidden;background:linear-gradient(180deg,#2a3450 0%,#1f2740 60%,#1a2033 100%);border:1px solid #415070;border-top-color:#55679a;box-shadow:0 1px 0 #0a0c12 inset,0 2px 6px #0000004d,0 1px 0 #ffffff12;color:#bcc9e6;font-weight:600;letter-spacing:.03em;transition:transform .22s cubic-bezier(.34,1.56,.64,1),filter .22s ease,box-shadow .28s ease,border-color .28s ease}aside>a:last-child::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(105deg,transparent 34%,#ffffff2a 50%,transparent 66%);transform:translateX(-130%);transition:transform .65s cubic-bezier(.4,0,.2,1)}aside>a:last-child:hover{filter:brightness(1.16);transform:translateY(-2px);border-color:#4d5d85;border-top-color:#61729e;box-shadow:0 1px 0 #0a0c12 inset,0 7px 14px #00000066,0 2px 0 #ffffff14}aside>a:last-child:hover::after{transform:translateX(130%)}main{min-width:0;min-height:0;display:flex;flex-direction:column}header{height:48px;display:flex;align-items:center;justify-content:space-between;padding:0 24px;color:#a1a9ba}#surfaces{position:relative;flex:1;min-height:0}iframe{width:100%;height:100%;border:0;background:#111319}iframe[hidden]{display:none}footer{grid-column:1/-1;display:flex;align-items:center;gap:16px;padding:12px 24px;background:#1c2029;border-top:1px solid #2c313c}#art{width:54px;height:54px;flex:none;background:#353d32;color:#c0f57a;font-size:26px;padding:0;overflow:hidden}#art img{width:100%;height:100%;object-fit:cover}.metadata{width:230px;min-width:0;display:grid;gap:7px}.metadata strong,.metadata small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.metadata small{color:#8794a7}.transport{flex:1;min-width:100px;text-align:center}.transport button{width:48px;font-size:20px}.transport #toggle{color:#c0f57a}.transport input{width:100%}input{accent-color:#c0f57a}.volume{display:flex;align-items:center;gap:8px}.volume input{width:90px}@media(max-width:760px){body{grid-template-columns:86px 1fr;grid-template-rows:1fr 82px}aside{padding:16px 6px;gap:16px}.brand{font-size:30px}nav button{padding:8px 6px;text-align:center;font-size:12px}aside>a:last-child{font-size:11px;text-align:center}footer{padding:10px;gap:10px}.metadata{width:100px;font-size:12px}.volume{display:none}.transport button{width:32px;font-size:16px}#art{width:44px;height:44px}.transport input{min-width:70px}}

.transport>div{display:flex;align-items:center;justify-content:center}.transport button{display:grid;place-items:center;padding:8px;flex-shrink:0}.transport svg{width:22px;height:22px;fill:currentColor;stroke:currentColor;stroke-width:1.5}

footer{position:relative;isolation:isolate;height:90px;min-height:90px;max-height:90px;overflow:hidden}#footerSpectrum{position:absolute;inset:0;width:100%;height:100%;opacity:.16;pointer-events:none;z-index:-1}@media(max-width:760px){footer{height:82px;min-height:82px;max-height:82px}}@media(prefers-reduced-motion:reduce){#footerSpectrum{display:none}}

.mobile-nav{display:none}@media(max-width:760px){body{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) 82px calc(58px + env(safe-area-inset-bottom));height:100dvh}main{grid-column:1;grid-row:1}aside{display:none;position:fixed;inset:0 auto calc(140px + env(safe-area-inset-bottom)) 0;width:220px;z-index:20;box-shadow:15px 0 40px #0009;padding:20px}body.nav-open aside{display:flex}aside nav button{text-align:left;padding:10px 16px}footer{grid-row:2;grid-column:1}.mobile-nav{grid-row:3;display:flex;flex-direction:row;align-items:stretch;justify-content:space-around;gap:6px;background:#181b23;border-top:1px solid #353d4b;padding:6px 8px calc(6px + env(safe-area-inset-bottom))}.mobile-nav button{flex:1;font-size:12px;text-align:center;padding:6px;min-height:46px;border-radius:12px;background:linear-gradient(180deg,#232934 0%,#1b2029 100%);border:1px solid #39424f;border-top-color:#46515f;box-shadow:0 1px 0 #0a0c10 inset,0 2px 5px #00000059,0 1px 0 #ffffff12;color:#c3cbda;font-weight:600}.mobile-nav button:hover{filter:brightness(1.15)}.mobile-nav button[aria-current=page]{background:linear-gradient(180deg,#3a4a2a 0%,#2a3529 100%);border-color:#5a7038;border-top-color:#6d853f;color:#d6f5a2}.metadata{width:100px}header{padding:0 16px}}

#footerSpectrum{opacity:.32;filter:blur(1.4px);mix-blend-mode:screen}footer> :not(#footerSpectrum){position:relative;z-index:1}

#surfaces{background:#111319}.surface-loading #surfaces:after{content:"正在加载…";position:absolute;right:20px;top:12px;z-index:900;padding:7px 12px;border-radius:8px;background:#242b23;color:#c6dfb0;font-size:12px;pointer-events:none}