:root{font-family:Inter,Arial,sans-serif;color:#f4f4f7;background:#12131a}*{box-sizing:border-box}body{margin:0;min-width:320px}main{max-width:1100px;margin:auto;padding:24px}header{text-align:center;margin-bottom:24px}header h1{color:#f2b544}header p,small{color:#a6a8b5}.player{padding:28px;border-radius:18px;background:#222431;text-align:center;margin-bottom:24px}.record{display:grid;place-items:center;width:100px;height:100px;margin:auto;border-radius:50%;background:#d89b27;color:#12131a;font-size:54px}.player h2{margin-bottom:4px}.controls{display:flex;justify-content:center;gap:12px;margin-top:20px}button{border:0;padding:10px 14px;border-radius:8px;background:#f2b544;color:#171717;font-weight:700;cursor:pointer}button:disabled{opacity:.4;cursor:not-allowed}button:hover:not(:disabled){filter:brightness(1.1)}.unlock{margin-top:16px;background:#6c73f7;color:#fff}.columns{display:grid;grid-template-columns:2fr 1fr;gap:20px}section:not(.player){background:#222431;border-radius:14px;padding:16px;min-width:0}input{width:100%;padding:13px;margin-bottom:12px;border:1px solid #454758;border-radius:8px;background:#12131a;color:#fff}.tracklist{max-height:420px;overflow-y:auto}.track{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 4px;border-bottom:1px solid #343645}.track div{min-width:0;overflow-wrap:anywhere}.track small{display:block;margin-top:4px}.track button{flex-shrink:0}@media(max-width:700px){.columns{grid-template-columns:1fr}.track{font-size:14px}main{padding:12px}}.volume-control{display:flex;flex-direction:column;align-items:center;gap:12px;margin:20px auto}.volume-control label{font-size:14px;color:#d1d5db}.volume-control input[type=range]{width:250px;max-width:100%;padding:0;accent-color:#f2b544;cursor:pointer}.shell{display:grid;grid-template-columns:190px minmax(0,1fr) 260px;gap:18px;max-width:1600px;padding:18px}.navigation,.session{padding:16px;background:#222431;border-radius:14px;align-self:start;min-width:0}.navigation h1{font-size:20px;color:#f2b544}.navigation nav{display:flex;flex-direction:column;gap:8px;margin:24px 0}.navigation button[aria-current=page]{outline:2px solid #fff;outline-offset:2px}.content{min-width:0}.content section{margin-bottom:18px}.content header{text-align:left}.player{padding:18px}.player video{width:100%;max-height:65vh;background:#000;border-radius:8px}.player video.audio-only{width:0;height:0;position:absolute}.player label{display:block;margin:12px 0 4px}.player input[type=range]{padding:0;margin:0;accent-color:#f2b544}.controls{flex-wrap:wrap}.title{color:#f4f4f7;background:transparent;padding:4px;text-align:left}.tracklist{max-height:360px}.session button{padding:7px;margin:3px}.session label{display:block;margin:10px 0}.session input[type=checkbox]{width:auto;margin:0 8px 0 0}select{width:100%;padding:10px;background:#12131a;color:#fff;border-radius:8px}:focus-visible{outline:3px solid #fff;outline-offset:3px}small,header p{color:#bec0cc}@media(max-width:1150px){.shell{grid-template-columns:160px minmax(0,1fr)}.session{grid-column:1 / -1}}@media(max-width:650px){.shell{display:flex;flex-direction:column;padding:10px}.navigation nav{flex-direction:row;flex-wrap:wrap;margin:10px 0}.navigation,.session{width:100%}}.content section.player.player-expanded,.player:fullscreen{position:fixed;inset:0;z-index:100;width:100%;height:100dvh;margin:0;padding:14px;border-radius:0;background:#0b0b0e;display:flex;flex-direction:column;overflow:auto}.player.player-expanded video,.player:fullscreen video{height:100%;min-height:0;max-height:none;object-fit:contain}.player.player-expanded .player-chrome,.player:fullscreen .player-chrome{position:absolute;left:14px;right:14px;bottom:14px;max-height:65vh;overflow:auto;padding:12px 18px;border-radius:10px;background:linear-gradient(transparent,#101014ed 22%)}.player.player-expanded h2,.player:fullscreen h2{margin:8px 0 0;font-size:20px}.player.player-expanded p,.player:fullscreen p{margin:6px 0}.player.player-expanded .controls,.player:fullscreen .controls{margin-top:8px;flex-shrink:0}.audio-diagnostics{margin-top:12px;font-size:13px;color:#bec0cc}.audio-diagnostics button{font-size:13px}.audio-diagnostics summary{cursor:pointer;padding:6px;color:#f2b544}.artwork{display:grid;place-items:center;overflow:hidden;flex:0 0 48px;width:48px;aspect-ratio:1;border-radius:8px;background:linear-gradient(145deg,#43485f,#171923);color:#f2b544;font-size:24px}.artwork img{display:block;width:100%;height:100%;object-fit:cover}.track>div{flex:1}.movie-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(135px,1fr));gap:18px;padding:4px}.movie-card{display:flex;flex-direction:column;min-width:0;gap:8px;padding-bottom:8px}.movie-card .artwork{width:100%;aspect-ratio:2 / 3;flex:none;font-size:36px}.movie-card .title{width:100%;padding:4px 0;overflow-wrap:anywhere}.movie-card small{display:block}.movie-card>button{margin-top:auto}.movie-filters{display:flex;flex-wrap:wrap;align-items:end;gap:12px;margin:16px 0 24px}.movie-filters .filter-field{flex:1 1 130px;font-size:14px}.movie-filters select{display:block;margin-top:6px}.movie-filters>p{flex-basis:100%}.media-details{width:min(720px,calc(100% - 28px));max-height:calc(100dvh - 28px);overflow:auto;padding:24px;color:#f4f4f7;background:#222431;border:1px solid #454758;border-radius:14px}.media-details::backdrop{background:#000b}.detail-close{display:block;margin:0 0 20px auto}.detail-body{display:grid;grid-template-columns:180px minmax(0,1fr);gap:24px;overflow-wrap:anywhere}.detail-body .artwork{width:100%;font-size:36px}.detail-body .poster{aspect-ratio:2 / 3}.detail-body h2{margin-top:0}@media(max-width:500px){.detail-body{grid-template-columns:1fr}.detail-body .artwork{width:120px}.media-details{padding:16px}}
