:root{font-family:Arial,Helvetica,sans-serif;color:#edf2f6;background:#10151c}*{box-sizing:border-box}body{margin:0}main{max-width:1440px;margin:auto;padding:clamp(20px,4vw,64px)}header{display:flex;align-items:baseline;justify-content:space-between;gap:20px;margin-bottom:35px}header strong{font-size:clamp(28px,4vw,52px);letter-spacing:2px}header span{color:#78b89b}small,footer{color:#a7b4bf}nav,.search{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:26px}button,input{font:inherit;border:1px solid #344351;border-radius:12px;background:#1b2630;color:#edf2f6;padding:14px 20px}button{cursor:pointer}button:hover,button:focus-visible,input:focus-visible{outline:3px solid #8ad6af;outline-offset:3px}button[aria-pressed=true]{background:#416c58;border-color:#7bc7a2}.search input{flex:1;min-width:220px}h1{font-size:26px}.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:18px}.tile{text-align:left;display:flex;flex-direction:column;gap:12px;padding:12px}.tile b{font-size:20px}.tile small{line-height:1.5}.art{height:160px;background:linear-gradient(145deg,#365d53,#172a32);display:grid;place-items:center;font-size:52px;border-radius:8px}.panel{padding:16px;border:1px solid #344351;border-radius:12px}footer{margin-top:70px;font-size:13px}.overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#080b0ff5;display:grid;place-items:center;padding:24px}.player{width:min(960px,100%)}.player video{width:100%;max-height:65vh;background:#000}.close{margin-bottom:14px}@media (max-width:600px){header{display:block}header small{display:block;margin-top:8px}}
