:root{color-scheme:dark;font-family:Arial,sans-serif;background:#101827;color:#edf2ff}*{box-sizing:border-box}body{margin:0;min-height:100vh;display:grid;place-items:center;padding:24px}.card{width:min(780px,100%);background:#182235;border:1px solid #2c3a55;border-radius:20px;padding:clamp(20px,5vw,42px);box-shadow:0 20px 60px #0005}h1{margin:.1em 0;font-size:clamp(1.8rem,4vw,2.7rem)}h2{font-size:1.1rem}.eyebrow{color:#89b4ff;margin:0}.tools{display:flex;gap:8px;flex-wrap:wrap}.tool{padding:8px 11px;border-radius:100px;background:#263650}.tool.bad{background:#5d2930;color:#ffd7da}.url-section{margin-top:28px}.url-row{display:flex;gap:10px}input{min-width:0;width:100%;background:#0e1624;border:1px solid #405170;color:inherit;border-radius:10px;padding:13px;font:inherit}button{border:0;border-radius:10px;background:#76a9ff;color:#081325;padding:12px 18px;font:inherit;font-weight:bold;cursor:pointer;white-space:nowrap}button:disabled{opacity:.55;cursor:not-allowed}.danger{background:#ff8d95}.message{min-height:1.4em;color:#b9c9e8}.message.error{color:#ffacb3}.hidden{display:none}.result,.player{margin-top:22px;padding-top:22px;border-top:1px solid #34435e}.result{display:flex;gap:18px;align-items:center}.result img{width:150px;aspect-ratio:16/9;object-fit:cover;border-radius:12px;background:#24324a}.result h2{margin:0}.result p{color:#bdc9dd}.player-buttons,.seek-row{display:flex;gap:10px;align-items:center}.seek-row{margin-top:20px}.seek-row span{font-variant-numeric:tabular-nums;direction:ltr}.volume{display:flex;gap:12px;align-items:center;margin-top:17px}.volume input{max-width:190px;padding:0}.player input[type=range]{accent-color:#83b3ff}@media(max-width:520px){body{padding:12px}.url-row{flex-direction:column}.url-row button{width:100%}.result{align-items:flex-start}.result img{width:110px}.player-buttons{flex-wrap:wrap}.seek-row{gap:6px}}