:root { color-scheme: dark; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: #090807; color: #fff; display: grid; place-items: center; }
.short { width: min(100vw, 56.25vh); height: min(100vh, 177.78vw); aspect-ratio: 9 / 16; position: relative; overflow: hidden; padding: 5.5% 6%; background: radial-gradient(circle at 90% 5%, rgba(217,119,87,.3), transparent 28%), linear-gradient(155deg, #211b17 0%, #100e0c 55%, #17100d 100%); display: flex; flex-direction: column; }
.short::before { content: ""; position: absolute; inset: 0; opacity: .13; background-image: linear-gradient(rgba(255,255,255,.2) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.2) 1px, transparent 1px); background-size: 8% 4.5%; pointer-events: none; }
header, footer, .topic, .question-number, h1, .options, .answer { position: relative; z-index: 1; }
header { display: flex; align-items: center; justify-content: space-between; gap: 4%; border-bottom: 1px solid rgba(255,255,255,.2); padding-bottom: 4%; }
.brand img { display: block; width: 36%; min-width: 145px; height: auto; }
.series { text-align: right; font-size: clamp(9px, 1.5vh, 18px); line-height: 1.35; letter-spacing: .12em; color: #d7c8bd; }
.series b { color: #f2a27e; }
.topic { margin-top: 6%; color: #f2a27e; text-transform: uppercase; letter-spacing: .13em; font-size: clamp(10px, 1.65vh, 20px); font-weight: 800; }
.question-number { margin-top: 2%; color: #b9aaa0; letter-spacing: .1em; font-size: clamp(9px, 1.4vh, 17px); font-weight: 700; }
h1 { margin: 4% 0 5%; font-size: clamp(20px, 3.25vh, 40px); line-height: 1.13; letter-spacing: -.025em; }
.options { display: grid; gap: clamp(7px, 1.15vh, 14px); }
.option { display: grid; grid-template-columns: clamp(28px, 4.4vh, 54px) 1fr; align-items: center; gap: 3%; padding: 3.2%; border: 1px solid rgba(255,255,255,.22); background: rgba(255,255,255,.065); border-radius: clamp(8px, 1.2vh, 15px); font-size: clamp(12px, 1.9vh, 23px); line-height: 1.25; transition: opacity .35s, border-color .35s, background .35s, transform .35s; }
.option b { display: grid; place-items: center; aspect-ratio: 1; border-radius: 50%; background: #322822; color: #f2a27e; }
.option.correct { border-color: #66e2a6; background: rgba(36,151,99,.23); transform: scale(1.015); }
.option.correct b { background: #43c98c; color: #08150f; }
.option.dimmed { opacity: .32; }
.answer { margin-top: 5%; padding: 4%; border-radius: clamp(9px, 1.4vh, 17px); background: linear-gradient(135deg, rgba(39,167,108,.25), rgba(39,167,108,.09)); border: 1px solid rgba(102,226,166,.55); animation: reveal .4s ease-out; }
.answer p { margin: 0 0 1%; color: #66e2a6; text-transform: uppercase; letter-spacing: .12em; font-size: clamp(9px, 1.35vh, 16px); font-weight: 900; }
.answer h2 { margin: 0 0 2%; font-size: clamp(14px, 2.1vh, 26px); line-height: 1.18; }
.answer div { color: #d9d2cc; font-size: clamp(10px, 1.55vh, 19px); line-height: 1.3; }
footer { margin-top: auto; padding-top: 3%; border-top: 1px solid rgba(255,255,255,.16); display: flex; justify-content: space-between; color: #a99b91; font-size: clamp(8px, 1.3vh, 16px); }
footer b { color: #f2a27e; }
.countdown { position: absolute; right: 6%; bottom: 7.5%; z-index: 2; width: clamp(38px, 6vh, 72px); aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; background: #e48964; color: #17100d; font-size: clamp(18px, 3vh, 36px); font-weight: 900; box-shadow: 0 0 0 7px rgba(228,137,100,.16); }
.controls { position: fixed; left: 18px; top: 18px; z-index: 5; padding: 12px; width: 180px; color: #eee; background: rgba(20,18,16,.96); border: 1px solid #4a403a; border-radius: 10px; display: grid; gap: 8px; font-size: 13px; }
.controls label { display: flex; justify-content: space-between; align-items: center; }
.controls input { width: 58px; padding: 5px; }
.controls button { padding: 8px; cursor: pointer; }
.controls small { color: #aaa; line-height: 1.35; }
@keyframes reveal { from { opacity: 0; transform: translateY(12px); } }
@media (max-aspect-ratio: 9/16) { .controls { display: none; } }
@media (max-width: 800px) { .controls { display: none; } }