:root{color-scheme:dark;--ink:#f9f3e6;--muted:#b9c4ce;--gold:#f3ca79;--bg:#171e27}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at top right,#283b43,transparent 65%),var(--bg);color:var(--ink);font:18px/1.5 system-ui,sans-serif}main{max-width:760px;margin:auto;padding:30px 22px 50px}.eyebrow{font-size:11px;letter-spacing:2px;color:var(--gold);font-weight:750}h1{font-family:Georgia,serif;font-size:clamp(40px,8vw,66px);line-height:1.05;margin:18px 0}h1 span{display:block;font:italic 21px/1.7 Georgia,serif;color:var(--gold)}header p{color:var(--muted);font-size:16px;max-width:580px}.top,nav{display:flex;align-items:center;justify-content:space-between;gap:12px}.top{margin-top:28px;font-size:14px;color:var(--muted)}progress{width:100%;height:5px;accent-color:var(--gold);margin:12px 0 22px}article{padding:26px;border:1px solid #52616b;border-radius:18px;background:#1d2833;box-shadow:0 12px 35px #0002}.film{font-size:13px;letter-spacing:1px;color:var(--gold);text-transform:uppercase}h2{font-size:clamp(23px,5vw,30px);line-height:1.35;margin:14px 0 24px}button{font:650 16px/1.4 system-ui;border:0;border-radius:10px;background:var(--gold);color:#171e27;padding:13px 18px;min-height:48px;cursor:pointer}button:focus-visible{outline:3px solid white;outline-offset:3px}button:disabled{opacity:.4;cursor:default}.quiet{background:transparent;color:var(--muted);border:1px solid #52616b}.options{display:grid;gap:10px;margin-bottom:22px}.option{text-align:left;background:#283846;color:var(--ink);border:2px solid transparent;width:100%}.option.selected{border-color:var(--gold)}.option.correct{background:#244e40;border-color:#82d2a4}.option.wrong{border-color:#ef9b92}.answer{margin:22px 0 4px;padding-top:18px;border-top:1px solid #52616b}.answer strong{color:var(--gold)}.answer p{font-size:17px}a{color:var(--muted);font-size:13px}.actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}nav{margin:22px 0}#score{color:var(--gold);font-size:13px;text-align:center}footer{text-align:center;font-size:13px;color:var(--muted);margin-top:35px}footer button{margin-top:16px}#filmList{text-align:left;columns:2;margin-top:20px}li{break-inside:avoid}small{color:var(--muted)}@media(max-width:380px){main{padding:22px 14px}article{padding:20px}nav{gap:6px}nav button{padding:12px}#filmList{columns:1}}