:root { color-scheme:dark; --night:#141824; --panel:#1c2230; --ink:#f3eee6; --muted:#bbb9b5; --gold:#efb77b; --stroke:#3d4451; }
*, *::before, *::after { box-sizing:border-box; }
html { scroll-behavior:smooth; scrollbar-gutter:stable; }
body { margin:0; overflow-x:hidden; background:var(--night); color:var(--ink); font:16px/1.6 'Segoe UI','Noto Sans SC','Microsoft YaHei',sans-serif; }
[hidden] { display:none!important; }
button, a { -webkit-tap-highlight-color:transparent; touch-action:manipulation; }
button { font:inherit; color:inherit; cursor:pointer; }
a { color:inherit; text-decoration:none; }
button:focus-visible, a:focus-visible { outline:2px solid var(--gold); outline-offset:4px; }
button:disabled { opacity:.3; cursor:default; }
.starfield, .meteor-layer { position:fixed; inset:0; z-index:0; overflow:hidden; pointer-events:none; }
.star { position:absolute; width:2px; height:2px; border-radius:50%; background:var(--ink); opacity:.26; }
.star:nth-child(5n) { opacity:.45; }
.meteor { position:absolute; width:var(--tail); height:1.5px; opacity:0; transform-origin:0 50%; will-change:transform,opacity; }
.meteor::before { content:''; position:absolute; inset:0; background:linear-gradient(90deg,var(--meteor-color),transparent); border-radius:50%; box-shadow:0 0 7px color-mix(in srgb,var(--meteor-color) 52%,transparent); }
.meteor::after { content:''; position:absolute; left:-2px; top:-1px; width:4px; height:4px; border-radius:50%; background:#fff8ed; box-shadow:0 0 5px var(--meteor-color),0 0 13px var(--meteor-color); }
.gallery-shell { position:relative; z-index:1; max-width:1600px; margin:auto; padding:26px 40px 0; }
.gallery-chrome { display:flex; align-items:center; justify-content:space-between; gap:24px; }
.gallery-brand { color:var(--muted); font-size:13px; letter-spacing:.06em; margin-right:auto; min-width:0; }
.back-link { display:inline-flex; gap:8px; align-items:center; min-height:44px; color:var(--muted); font-size:13px; }
.back-link:hover { color:var(--ink); }
.outline-button { min-height:44px; padding:8px 16px; border:1px solid var(--stroke); border-radius:24px; background:var(--night); white-space:nowrap; font-size:13px; }
.outline-button:hover { border-color:var(--gold); }
.gallery-spotlight { min-height:calc(100svh - 70px); display:flex; flex-direction:column; padding-top:30px; }
.gallery-heading { display:flex; justify-content:space-between; align-items:flex-end; gap:24px; }
.chapter-label { margin:0 0 7px; color:var(--gold); font-size:12px; letter-spacing:.1em; }
h1 { font-size:clamp(24px,3vw,34px); line-height:1.25; font-weight:500; margin:0; overflow-wrap:anywhere; }
.event-date { color:var(--muted); font-size:13px; margin:10px 0 0; }
.release-status { color:var(--gold); font-size:12px; max-width:160px; margin:0; text-align:right; }
.load-status { color:var(--gold); }
.load-status:empty { display:none; }
.retry-button { align-self:flex-start; }
.gallery-scene { position:relative; display:grid; grid-template-columns:minmax(0,1fr) 128px minmax(0,1fr); align-items:center; gap:24px; margin:22px 0 32px; flex:1; min-height:430px; overflow:hidden; overflow:clip; overflow-clip-margin:8px; overflow-anchor:none; }
.gallery-card { min-width:0; margin:0; position:relative; }
.gallery-card.is-reveal-pending { opacity:0; }
.card-front { align-self:start; margin-top:22px; }
.card-trained { align-self:end; margin-bottom:28px; }
.picture-button { display:block; width:100%; padding:0; border:0; border-radius:8px; background:var(--panel); }
.picture-button img { width:100%; height:auto; aspect-ratio:16/9; display:block; object-fit:cover; border-radius:8px; }
.picture-button:hover { outline:1px solid var(--gold); outline-offset:3px; }
.card-caption { display:flex; gap:14px; margin-top:12px; color:var(--muted); font-size:12px; }
.card-caption span:first-child { color:var(--gold); flex-shrink:0; letter-spacing:.06em; }
.card-quote { margin:14px 0 0; font-size:16px; line-height:1.65; overflow-wrap:anywhere; }
.music-jacket { position:absolute; bottom:-6px; right:0; width:44px; height:44px; }
.music-jacket img { display:block; width:100%; height:100%; border-radius:50%; border:1px solid var(--stroke); }
.card-trained:has(.music-jacket:not([hidden])) .card-caption { padding-right:54px; min-height:38px; }
.orbit-navigation { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; }
.direction-button { min-height:44px; min-width:44px; display:flex; align-items:center; justify-content:center; gap:5px; border:0; background:transparent; color:var(--muted); font-size:13px; }
.direction-button:hover:not(:disabled) { color:var(--gold); }
.orbit-button { position:relative; width:116px; height:116px; padding:0; border:0; border-radius:50%; background:transparent; }
.orbit-track { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.orbit-line { fill:none; stroke:var(--stroke); stroke-width:.8; }
.orbit-progress { fill:none; stroke:var(--gold); stroke-width:1.4; transform:rotate(-90deg); transform-origin:60px 60px; }
.orbit-node { fill:var(--night); stroke:var(--muted); stroke-width:1; }
.orbit-node.active { fill:var(--gold); stroke:var(--gold); }
.orbit-value { display:block; font-size:21px; font-weight:400; letter-spacing:.03em; font-variant-numeric:tabular-nums; }
.orbit-label { display:block; color:var(--muted); font-size:12px; }
.orbit-hint { margin:0; color:var(--muted); font-size:12px; }
.gallery-footer { display:flex; justify-content:space-between; align-items:center; gap:20px; min-height:76px; padding:12px 0; border-top:1px solid var(--stroke); color:var(--muted); font-size:12px; }
.footer-actions { display:flex; gap:20px; align-items:center; }
.footer-actions a { min-height:44px; display:inline-flex; align-items:center; padding:6px 0; }
.footer-actions a:hover { color:var(--gold); }
.collection-section { padding:64px 0 56px; scroll-margin-top:24px; }
.collection-heading { display:flex; justify-content:space-between; align-items:center; gap:20px; margin-bottom:24px; }
.collection-heading h2 { font-size:22px; line-height:1.4; font-weight:400; margin:0; }
.flow-row-wrap { overflow:hidden; overflow:clip; margin:8px 0; overflow-anchor:none; }
.flow-row { display:flex; width:max-content; animation:gallery-flow var(--flow-duration,120s) linear infinite; }
.flow-row.reverse { animation-direction:reverse; }
.flow-group { display:flex; flex-shrink:0; gap:8px; padding:4px 8px 4px 0; }
.flow-card-button { display:block; flex-shrink:0; width:clamp(150px,18vw,230px); border:0; padding:0; background:var(--panel); border-radius:6px; cursor:pointer; }
.flow-card { display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; border-radius:6px; }
.flow-card-button:hover { outline:1px solid var(--gold); }
.motion-inactive .flow-row { animation-play-state:paused; }
@keyframes gallery-flow { from { transform:translateX(0); } to { transform:translateX(-50%); } }
dialog { color:var(--ink); background:var(--panel); border:1px solid var(--stroke); border-radius:12px; max-height:calc(100svh - 40px); padding:24px; }
dialog::backdrop { background:rgba(8,11,18,.84); }
body:has(dialog[open]) { overflow:hidden; }
.directory-dialog { width:min(440px,calc(100% - 32px)); }
.dialog-heading { display:flex; justify-content:space-between; align-items:center; gap:20px; margin-bottom:18px; }
.dialog-heading h2 { font-size:18px; font-weight:400; line-height:1.4; margin:0; }
.close-button { min-width:44px; min-height:44px; padding:4px 8px; border:0; background:transparent; font-size:26px; line-height:1; }
.directory-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.directory-list a { display:flex; flex-direction:column; justify-content:center; min-height:58px; padding:10px 12px; border:1px solid transparent; border-radius:6px; }
.directory-list a span { display:block; color:var(--muted); font-size:12px; overflow-wrap:anywhere; }
.directory-list a[aria-current='step'] { border-color:var(--gold); color:var(--gold); }
.directory-list a:hover { background:var(--night); }
.detail-dialog { width:min(1100px,calc(100% - 32px)); text-align:center; }
.detail-dialog .dialog-heading { text-align:left; }
.detail-card { display:block; width:100%; height:auto; max-height:65svh; object-fit:contain; border-radius:8px; }
.detail-toggle { margin-top:18px; }
.detail-info { max-width:650px; margin:16px auto 0; color:var(--muted); font-size:14px; }
.detail-info p { margin:6px 0; }
@media (max-width:800px) {
    .gallery-shell { padding:22px 24px 0; }
    .gallery-chrome { gap:16px; }
    .back-link { min-width:44px; justify-content:center; }
    .back-link span { display:none; }
    .gallery-scene { grid-template-columns:minmax(0,1fr) 100px minmax(0,1fr); gap:16px; }
    .orbit-button { width:96px; height:96px; }
    .orbit-value { font-size:18px; }
}
@media (max-width:640px) {
    .gallery-shell { padding:18px 20px 0; }
    .gallery-chrome { gap:12px; }
    .gallery-brand { max-width:145px; font-size:12px; }
    .gallery-chrome .outline-button { padding:8px 12px; }
    .gallery-spotlight { padding-top:28px; min-height:calc(100svh - 62px); }
    .gallery-heading { flex-wrap:wrap; align-items:start; gap:10px; }
    h1 { font-size:25px; }
    .release-status { text-align:left; max-width:none; }
    .gallery-scene { grid-template-columns:minmax(0,1fr); gap:24px; margin:26px 0 28px; min-height:0; flex:0; }
    .gallery-card, .card-trained { margin:0; }
    .orbit-navigation { flex-direction:row; gap:20px; grid-row:2; }
    .orbit-button { width:90px; height:90px; flex-shrink:0; }
    .orbit-value { font-size:17px; }
    .orbit-hint { display:none; }
    .direction-arrow { transform:rotate(-90deg); }
    .gallery-footer { gap:12px; flex-wrap:wrap; margin-top:auto; }
    .footer-actions { gap:16px; }
    .collection-section { padding-top:42px; }
    .collection-heading h2 { font-size:18px; }
    dialog { padding:16px; }
    .detail-card { max-height:55svh; }
}
@media (prefers-reduced-motion:reduce) {
    html { scroll-behavior:auto; }
    .meteor-layer { display:none; }
    .gallery-card.is-reveal-pending { opacity:1; }
    .flow-row { animation:none; }
    .flow-group[aria-hidden='true'] { display:none; }
    .flow-row-wrap { overflow-x:auto; }
}