:root{color-scheme:dark;--bg:#0f1216;--bg2:#161b22;--bg3:#1d232c;--line:#2a323d;--line2:#39414d;--fg:#e6edf3;--fg2:#9aa7b4;--fg3:#7d8b9b;--acc:#4f9cf9;--acc2:#2f6fd0;--r:14px}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--fg);font:16px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;-webkit-font-smoothing:antialiased}
a{color:var(--acc);text-decoration:none}a:hover{text-decoration:underline}
button,select{font:inherit}
button,.button{border:1px solid var(--line2);border-radius:10px;background:var(--bg3);color:var(--fg);padding:10px 14px;cursor:pointer;font-weight:650;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:7px}
button:hover,.button:hover{border-color:var(--acc);text-decoration:none}
button.primary,.button.primary{background:linear-gradient(180deg,var(--acc),var(--acc2));border-color:transparent;color:#fff}
button:focus-visible,a:focus-visible,select:focus-visible{outline:3px solid color-mix(in srgb,var(--acc) 65%,transparent);outline-offset:2px}
.top{border-bottom:1px solid var(--line);background:var(--bg2)}
.top-inner{max-width:900px;margin:auto;padding:12px 22px;display:flex;align-items:center;gap:16px}
.brand{font-weight:750;color:var(--fg);white-space:nowrap}.brand span{font-weight:500;color:var(--fg3)}
.top nav{margin-left:auto;display:flex;align-items:center;gap:14px}.top nav a{font-size:14px;color:var(--fg2)}
main{max-width:900px;margin:0 auto;padding:34px 22px 56px}
.breadcrumbs{font-size:13px;color:var(--fg3);margin:0 0 18px}.breadcrumbs a{color:var(--fg3)}
.eyebrow{font-size:12px;color:#86b9ff;text-transform:uppercase;letter-spacing:1px;font-weight:750}
h1{font-size:clamp(29px,4.5vw,42px);line-height:1.15;letter-spacing:-.6px;margin:7px 0 10px}
.intro{font-size:17px;color:var(--fg2);max-width:760px;margin:0 0 24px}
.tags{display:flex;flex-wrap:wrap;gap:7px;margin:0 0 22px}.tags span{font-size:12px;color:#c1d9f7;background:#1c2c41;border:1px solid #2b4666;border-radius:999px;padding:4px 10px}
.rules{padding:16px 18px;background:var(--bg2);border:1px solid var(--line);border-radius:12px;margin:0 0 20px;color:var(--fg2)}
.rules strong{display:block;color:var(--fg);margin-bottom:4px}.rules p{margin:0}
.generator{display:flex;align-items:end;flex-wrap:wrap;gap:12px;padding:15px;background:var(--bg2);border:1px solid var(--line);border-radius:12px;margin:0 0 16px}
.generator label{display:grid;gap:5px;color:var(--fg2);font-size:13px;font-weight:650}.generator select{min-width:160px;background:var(--bg3);border:1px solid var(--line2);border-radius:9px;color:var(--fg);padding:10px 12px}
.generator-note{color:var(--fg3);font-size:12px;flex:1 1 220px}
.study{padding:clamp(18px,4vw,30px);min-height:320px;background:linear-gradient(145deg,var(--bg2),#141a22);border:1px solid var(--line);border-radius:18px;box-shadow:0 12px 36px rgba(0,0,0,.14)}
.study-head{display:flex;align-items:center;justify-content:space-between;gap:12px;color:var(--fg3);font-size:13px}
.progress{height:6px;background:var(--bg3);border-radius:99px;overflow:hidden;margin:12px 0 0}.progress>i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--acc2),var(--acc));border-radius:99px;transition:width .25s ease}
.study-main{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;min-height:215px;padding:24px 0 18px}
.side-label{color:var(--fg3);font-size:11px;text-transform:uppercase;letter-spacing:1px;font-weight:750}
.question{font-size:clamp(20px,3vw,27px);line-height:1.5;max-width:720px;margin:13px auto 0;white-space:pre-wrap}
.answer-shell{display:grid;grid-template-rows:0fr;opacity:0;transform:translateY(7px);transition:grid-template-rows .32s ease,opacity .24s ease,transform .32s ease;margin-top:0;color:var(--fg2);max-width:720px}
.answer-inner{overflow:hidden;min-height:0}
.answer-shell.is-open{grid-template-rows:1fr;opacity:1;transform:translateY(0);margin-top:17px}
.answer-inner:before{content:"ОТВЕТ";display:block;font-size:11px;letter-spacing:1px;font-weight:750;color:#86b9ff;margin-bottom:5px}
.answer-text{font-size:17px;white-space:pre-wrap}
.study-controls{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:9px}
.study-controls .primary{min-width:170px}
.study-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:16px;color:var(--fg3);font-size:12px}
.own{margin:20px 0 0;padding:16px 18px;background:#172439;border:1px solid #29466a;border-radius:12px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.own p{margin:0;color:var(--fg2)}
footer{max-width:900px;margin:auto;padding:0 22px 32px;color:var(--fg3);font-size:13px}
@media(max-width:620px){.top-inner{padding:10px 14px;gap:8px}.brand span{display:none}.top nav{gap:8px}.top nav a{font-size:13px}.top nav .button{padding:8px 10px}main{padding:22px 14px 42px}.intro{font-size:16px}.study{min-height:290px}.study-main{min-height:205px}.study-foot{align-items:flex-start}.own{align-items:flex-start;flex-direction:column}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.progress>i,.answer-shell{transition:none}}