:root{--bg:#f7f8ff;--ink:#141a33;--muted:#5b6482;--card:#fff;--line:#e6e9f5;
--a1:#ff3d81;--a2:#7c4dff;--cm1-1:#ff9f1c;--cm1-2:#ff3d81;--cm2-1:#ff6b35;--cm2-2:#ffc233;--c6e-1:#00c9a7;--c6e-2:#00a3ff;
--c5e-1:#7c4dff;--c5e-2:#00a3ff;--c4e-1:#b34cf0;--c4e-2:#f64f59;--c3e-1:#ff3d81;--c3e-2:#ff9f1c;--c2nde-1:#12c48b;--c2nde-2:#00c9a7;
--c1ere-1:#f5b400;--c1ere-2:#ff6b35;--ctle-1:#0091ff;--ctle-2:#8a4dff}
*{box-sizing:border-box}
body{margin:0;color:var(--ink);font-family:"Segoe UI",Inter,system-ui,-apple-system,Roboto,sans-serif;font-size:17px;line-height:1.65;
background:var(--bg);background-image:radial-gradient(700px 400px at -10% -10%,rgba(124,77,255,.18),transparent 60%),radial-gradient(700px 400px at 110% 0%,rgba(255,61,129,.16),transparent 60%),radial-gradient(600px 400px at 50% 110%,rgba(0,201,167,.14),transparent 60%);background-attachment:fixed}
body.lv-cm1{--a1:var(--cm1-1);--a2:var(--cm1-2)}body.lv-cm2{--a1:var(--cm2-1);--a2:var(--cm2-2)}body.lv-6e{--a1:var(--c6e-1);--a2:var(--c6e-2)}
body.lv-5e{--a1:var(--c5e-1);--a2:var(--c5e-2)}body.lv-4e{--a1:var(--c4e-1);--a2:var(--c4e-2)}body.lv-3e{--a1:var(--c3e-1);--a2:var(--c3e-2)}
body.lv-2nde{--a1:var(--c2nde-1);--a2:var(--c2nde-2)}body.lv-1ere{--a1:var(--c1ere-1);--a2:var(--c1ere-2)}body.lv-tle{--a1:var(--ctle-1);--a2:var(--ctle-2)}
a{color:var(--a2)}
.topbar{position:sticky;top:0;z-index:10;backdrop-filter:blur(12px);background:rgba(255,255,255,.75);border-bottom:1px solid var(--line);padding:10px 20px;display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;font-size:.9rem;color:var(--muted)}
.topbar a{color:#fff;background:linear-gradient(90deg,var(--a1),var(--a2));text-decoration:none;font-weight:800;padding:8px 18px;border-radius:999px;box-shadow:0 6px 16px rgba(124,77,255,.25)}
.wrap{max-width:1000px;margin:0 auto;padding:0 20px}
.head{padding:44px 0 26px}
.crumb{font-size:.9rem;color:var(--muted);margin:0 0 14px}.crumb a{color:var(--muted);text-decoration:none}.crumb a:hover{color:var(--a2)}
h1{font-size:clamp(1.9rem,5vw,3.2rem);font-weight:900;margin:0;line-height:1.1;letter-spacing:-.03em;background:linear-gradient(90deg,var(--a1),var(--a2));-webkit-background-clip:text;background-clip:text;color:transparent}
.tag{display:inline-block;margin-top:16px;background:#fff;border:2px solid transparent;background-image:linear-gradient(#fff,#fff),linear-gradient(90deg,var(--a1),var(--a2));background-origin:border-box;background-clip:padding-box,border-box;color:var(--ink);font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;font-weight:800;padding:6px 14px;border-radius:999px}
main{padding:10px 0 60px}
.lead{font-size:1.05rem;margin:0 0 34px;padding:18px 22px 18px 26px;border-radius:18px;background:#fff;border:1px solid var(--line);box-shadow:0 8px 30px rgba(20,26,51,.06);position:relative;overflow:hidden}
.lead::before{content:"";position:absolute;left:0;top:0;bottom:0;width:7px;background:linear-gradient(180deg,var(--a1),var(--a2))}
.lead strong{background:linear-gradient(90deg,var(--a1),var(--a2));-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:800}
/* index */
.level-block{margin:34px 0;padding:26px;border-radius:26px;background:#fff;border:1px solid var(--line);box-shadow:0 10px 40px rgba(20,26,51,.07);position:relative;overflow:hidden}
.level-block::before{content:"";position:absolute;left:0;right:0;top:0;height:8px;background:linear-gradient(90deg,var(--l1),var(--l2))}
.level-block h2{font-size:1.7rem;font-weight:900;margin:6px 0 2px;letter-spacing:-.02em;background:linear-gradient(90deg,var(--l1),var(--l2));-webkit-background-clip:text;background-clip:text;color:transparent}
.level-block .meta{color:var(--muted);font-size:.9rem;margin:0 0 18px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
.grid a{background:#fff;border:1px solid var(--line);border-radius:16px;padding:14px 16px 14px 12px;text-decoration:none;color:var(--ink);display:flex;gap:12px;align-items:center;transition:transform .18s,box-shadow .18s,border-color .18s}
.grid a:hover,.grid a:focus-visible{transform:translateY(-4px);box-shadow:0 16px 34px rgba(20,26,51,.14);border-color:var(--l1);outline:none}
.grid .n{flex:none;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;font-weight:900;color:#fff;background:linear-gradient(135deg,var(--l1),var(--l2))}
.grid .t{font-weight:600;font-size:.95rem;line-height:1.3}
/* exercises */
.exo{background:#fff;border:1px solid var(--line);border-radius:20px;padding:20px 22px 22px;margin:0 0 16px;box-shadow:0 6px 24px rgba(20,26,51,.06);transition:box-shadow .18s,border-color .18s}
.exo:hover{border-color:var(--a1);box-shadow:0 14px 34px rgba(20,26,51,.12)}
.exo h2{margin:0 0 12px;font-size:1.1rem;font-weight:800;display:flex;align-items:center;gap:12px}
.exo h2 small{flex:none;display:grid;place-items:center;height:2.1rem;padding:0 12px;border-radius:999px;font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;font-weight:800;color:#fff;background:linear-gradient(90deg,var(--a1),var(--a2))}
.exo ol{margin:0;padding-left:22px}.exo li{margin-bottom:6px}.exo p{margin:0 0 8px}
.exo ol li::marker{color:var(--a2);font-weight:800}
table{border-collapse:separate;border-spacing:0;margin:10px 0;font-size:.95rem;border:1px solid var(--line);border-radius:12px;overflow:hidden}
td,th{border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:6px 14px;text-align:center;font-weight:normal}
tr:last-child td,tr:last-child th{border-bottom:0}td:last-child,th:last-child{border-right:0}
th{background:#f1f2fb;font-weight:700}
pre{background:#141a33;color:#e8ecff;border-radius:12px;padding:12px 16px;overflow-x:auto;font-size:.9rem}
code{background:#eef0fb;padding:1px 6px;border-radius:6px}
.pager{display:flex;justify-content:space-between;gap:12px;margin:28px 0 0;flex-wrap:wrap}
.pager a{text-decoration:none;font-weight:700;border:2px solid var(--line);background:#fff;color:var(--ink);padding:11px 18px;border-radius:999px;transition:all .18s}
.pager a:hover{background:linear-gradient(90deg,var(--a1),var(--a2));color:#fff;border-color:transparent}
.cta{margin-top:44px;border-radius:26px;padding:36px 22px;text-align:center;background:linear-gradient(135deg,var(--a1),var(--a2));color:#fff;box-shadow:0 20px 50px rgba(124,77,255,.3)}
.cta p{margin:0 0 14px;font-weight:800;font-size:1.25rem;letter-spacing:-.01em}
.cta a{display:inline-block;background:#fff;color:var(--ink);text-decoration:none;font-weight:800;padding:14px 30px;border-radius:999px;transition:transform .18s;box-shadow:0 8px 20px rgba(0,0,0,.15)}
.cta a:hover{transform:translateY(-2px) scale(1.02)}
footer{padding:26px 20px 40px;text-align:center;color:var(--muted);font-size:.9rem}footer a{color:var(--muted)}
@media(max-width:600px){body{font-size:16px}.head{padding:26px 0 18px}.exo{padding:16px 14px 18px;border-radius:16px}.grid{grid-template-columns:1fr 1fr;gap:8px}.grid a{padding:12px 10px;border-radius:12px;font-size:.9rem}.grid .n{width:34px;height:34px}.level-block{padding:18px;border-radius:18px}.lead{padding:14px 16px 14px 20px}.cta{padding:26px 16px}}
@media(max-width:380px){.grid{grid-template-columns:1fr}}