#media {scroll-margin-top:92px;} .media-stage {display:grid;grid-template-columns:minmax(0,1.2fr) minmax(340px,0.8fr);gap:20px;align-items:start;} .media-card {position:relative;overflow:hidden;border:1px solid var(--line);border-radius:8px;background:linear-gradient(145deg,rgba(255,214,110,0.06),transparent 36%),var(--panel);box-shadow:var(--shadow);} .media-card::before {content:"";position:absolute;inset:0 0 auto;height:2px;background:linear-gradient(90deg,var(--gold),var(--cyan),transparent 82%);pointer-events:none;} .media-card-head {display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:22px 22px 16px;} .media-card-head h3 {margin:5px 0 7px;font-size:clamp(1.18rem,2vw,1.52rem);line-height:1.25;} .media-card-head p {margin:0;color:var(--muted);line-height:1.65;} .media-kicker,.media-runtime {color:var(--cyan);font-size:0.72rem;font-weight:800;letter-spacing:0.14em;text-transform:uppercase;} .media-runtime {flex:0 0 auto;margin-top:3px;color:var(--gold);white-space:nowrap;} .video-shell {padding:0 22px 22px;} .video-frame {position:relative;overflow:hidden;aspect-ratio:16 / 9;border:1px solid rgba(95,232,255,0.28);border-radius:8px;background:#020306;box-shadow:0 14px 34px rgba(0,0,0,0.34);} .promo-video {display:block;width:100%;height:100%;object-fit:contain;background:#000;} .media-footnote {display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px;color:var(--muted);font-size:0.82rem;line-height:1.5;} .media-direct-link {color:var(--gold);font-weight:750;text-decoration:none;white-space:nowrap;} .media-direct-link:hover,.media-direct-link:focus-visible {color:var(--cyan);text-decoration:underline;} .soundtrack-panel {display:flex;min-height:0;flex-direction:column;} .soundtrack-player {margin:0 22px 14px;padding:17px;border:1px solid rgba(95,232,255,0.22);border-radius:8px;background:rgba(2,5,11,0.66);} .now-playing-label {display:block;margin-bottom:6px;color:var(--cyan);font-size:0.68rem;font-weight:850;letter-spacing:0.16em;} .now-playing-title {display:block;min-height:1.45em;margin-bottom:12px;color:#fff;font-size:1.08rem;font-weight:850;} .bgm-player {display:block;width:100%;min-height:42px;color-scheme:dark;} .player-status {min-height:1.4em;margin:9px 0 0;color:var(--muted);font-size:0.78rem;} .track-list {display:grid;gap:7px;max-height:500px;margin:0 14px 16px;padding:0 8px 0 0;overflow-y:auto;list-style:none;overscroll-behavior:contain;scrollbar-color:rgba(95,232,255,0.46) rgba(255,255,255,0.04);scrollbar-width:thin;} .track-list::-webkit-scrollbar {width:7px;} .track-list::-webkit-scrollbar-track {background:rgba(255,255,255,0.04);border-radius:999px;} .track-list::-webkit-scrollbar-thumb {background:rgba(95,232,255,0.4);border-radius:999px;} .track-button {display:grid;width:100%;grid-template-columns:34px minmax(0,1fr) auto auto;gap:10px;align-items:center;min-height:54px;padding:8px 12px;border:1px solid var(--line-soft);border-radius:7px;background:rgba(255,255,255,0.025);color:#fff;font:inherit;text-align:left;cursor:pointer;transition:border-color 160ms ease,background 160ms ease,transform 160ms ease;} .track-button:hover {transform:translateY(-1px);border-color:rgba(255,214,110,0.5);background:rgba(255,214,110,0.055);} .track-button:focus-visible {outline:2px solid var(--cyan);outline-offset:2px;} .track-button.is-active {border-color:rgba(95,232,255,0.7);background:linear-gradient(90deg,rgba(95,232,255,0.13),rgba(255,214,110,0.055));box-shadow:inset 3px 0 0 var(--cyan);} .track-index {color:var(--gold);font-size:0.78rem;font-weight:850;letter-spacing:0.08em;} .track-copy {min-width:0;} .track-title,.track-subtitle {display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .track-title {font-size:0.91rem;font-weight:800;} .track-subtitle {margin-top:2px;color:var(--muted);font-size:0.72rem;} .track-duration {color:var(--muted);font-size:0.72rem;font-variant-numeric:tabular-nums;} .track-bars {display:inline-flex;width:18px;height:18px;align-items:center;justify-content:center;gap:2px;opacity:0.3;} .track-bars i {display:block;width:2px;height:5px;border-radius:999px;background:var(--cyan);transform-origin:center bottom;} .track-button.is-active .track-bars {opacity:1;} .track-button.is-playing .track-bars i {animation:soundtrack-bars 680ms ease-in-out infinite alternate;} .track-button.is-playing .track-bars i:nth-child(2) {animation-delay:-310ms;} .track-button.is-playing .track-bars i:nth-child(3) {animation-delay:-520ms;} @keyframes soundtrack-bars {from {transform:scaleY(0.65);} to {transform:scaleY(2.7);}} @media (prefers-reduced-motion:reduce) {.track-button,.track-button.is-playing .track-bars i {animation:none;transition:none;}} @media (max-width:920px) {.media-stage {grid-template-columns:1fr;} .track-list {max-height:420px;}} @media (max-width:620px) {.media-card-head {display:block;padding:18px 16px 13px;} .media-runtime {display:inline-block;margin-top:10px;} .video-shell {padding:0 12px 16px;} .media-footnote {align-items:flex-start;flex-direction:column;gap:5px;} .soundtrack-player {margin:0 12px 12px;padding:14px;} .track-list {max-height:360px;margin:0 8px 12px;padding-right:4px;} .track-button {grid-template-columns:29px minmax(0,1fr) auto auto;gap:7px;min-height:49px;padding:7px 9px;} .track-subtitle {display:none;}}