*{box-sizing:border-box}body{margin:0;font:15px system-ui;color:#222;background:#fafafa}.shell{display:flex;min-height:100vh}aside{width:235px;background:#eee;padding:25px;border-right:1px solid #ccc}aside h2{margin:0}small{color:#777}nav{display:grid;gap:7px;margin-top:35px}button{background:#fff;border:1px solid #ccc;border-radius:8px;padding:10px 14px;cursor:pointer;text-align:left;font:inherit}button:hover{background:#eee}button.active{background:#222;color:#fff}main{padding:35px 45px;flex:1;max-width:1200px}header{border-bottom:1px solid #ddd;margin-bottom:25px}h1{font-size:36px}input{padding:12px;border:1px solid #aaa;border-radius:8px;width:100%;max-width:500px}.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:15px;margin-top:25px}article{background:#fff;border:1px solid #ddd;padding:18px;border-radius:10px;margin:10px 0}.thumbnail{height:135px;background:#e4e4e4;display:grid;place-items:center;color:#888}.player{height:300px;background:#292929;color:#fff;display:grid;place-items:center;text-align:center}.tabs{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0}footer{margin-top:70px;color:#777;font-size:12px}@media(max-width:700px){.shell{display:block}aside{width:100%;padding:15px}nav{display:flex;overflow:auto;margin-top:12px}nav button{white-space:nowrap}main{padding:22px}}