:root{--bg:#f6faf8;--fg:#10231c;--muted:#5b6f67;--card:#fff;--border:#dbe7e1;--accent:#16a34a;--accent2:#0ea5e9;--shadow:0 6px 24px rgba(16,35,28,.08);--r:16px}
[data-theme=dark]{--bg:#0a1412;--fg:#e6f2ed;--muted:#8ba399;--card:#111f1b;--border:#223630;--shadow:0 6px 24px rgba(0,0,0,.4)}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--fg);font:16px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;transition:background .3s,color .3s}
a{color:inherit;text-decoration:none}
h1,h2,h3{line-height:1.2;margin:0 0 .5em}
h2{margin-top:2em;font-size:1.5rem}
.muted{color:var(--muted)}.small{font-size:.85rem}
mark{background:#fde04755;color:inherit;border-radius:3px;padding:0 2px}
.top{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:16px;padding:10px 24px;background:color-mix(in srgb,var(--bg) 85%,transparent);backdrop-filter:blur(14px);border-bottom:1px solid var(--border)}
.brand{font-weight:800;font-size:1.25rem;white-space:nowrap}
.brand span{background:linear-gradient(90deg,var(--accent),var(--accent2));-webkit-background-clip:text;background-clip:text;color:transparent}
.nav{display:flex;gap:2px;flex:1}
.nav a{padding:6px 12px;border-radius:999px;color:var(--muted);font-weight:500;font-size:.95rem}
.nav a:hover{background:var(--card)}.nav a.active{background:var(--accent);color:#fff}
.search{position:relative;width:270px}
.search input,.big-search,select,textarea,.form input{width:100%;padding:9px 14px;border-radius:12px;border:1px solid var(--border);background:var(--card);color:var(--fg);font:inherit}
.search input:focus,.big-search:focus,select:focus,textarea:focus{outline:2px solid var(--accent);border-color:transparent}
.search-box{display:none;position:absolute;right:0;left:0;top:calc(100% + 6px);background:var(--card);border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow);overflow:hidden;min-width:320px}
.search-box.open{display:block}
.sr-item{display:flex;gap:10px;align-items:center;padding:9px 14px}
.sr-item:hover,.sr-item.sel{background:color-mix(in srgb,var(--accent) 14%,transparent)}
.sr-main{display:flex;flex-direction:column;line-height:1.3}.sr-main small{color:var(--muted)}
.sr-all,.sr-empty{display:block;padding:10px 14px;color:var(--accent);font-weight:600;border-top:1px solid var(--border)}
.sr-empty{color:var(--muted);border:0}
.icon-btn{border:1px solid var(--border);background:var(--card);border-radius:12px;padding:6px 10px;cursor:pointer;font-size:1.1rem;color:var(--fg)}
.icon-btn.menu{display:none}
.view{max-width:1180px;margin:0 auto;padding:24px}
.fade-in{animation:fade .45s ease}
@keyframes fade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.foot{text-align:center;padding:30px;color:var(--muted);font-size:.9rem}
/* hero slides */
.hero{position:relative;border-radius:28px;overflow:hidden;height:min(460px,70vh);min-height:340px;box-shadow:var(--shadow);margin-bottom:24px}
.slides,.slide{position:absolute;inset:0}
.slide{opacity:0;visibility:hidden;transition:opacity .8s,visibility .8s;color:#fff}
.slide.active{opacity:1;visibility:visible}
.slide-cv{position:absolute;inset:0;width:100%;height:100%}
.slide-in{position:relative;z-index:2;max-width:620px;padding:clamp(24px,5vw,64px);height:100%;display:flex;flex-direction:column;justify-content:center;align-items:flex-start}
.slide.active .slide-in>*{animation:rise .8s both}
.slide.active .slide-in>*:nth-child(2){animation-delay:.1s}.slide.active .slide-in>*:nth-child(3){animation-delay:.2s}.slide.active .slide-in>*:nth-child(4){animation-delay:.3s}
@keyframes rise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
.slide h1{font-size:clamp(1.9rem,4.6vw,3.2rem);margin:.4em 0 .3em}
.slide p{font-size:1.1rem;opacity:.92;margin:0 0 1.2em}
.arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:5;width:44px;height:44px;border-radius:50%;border:0;background:#ffffff30;color:#fff;font-size:28px;cursor:pointer;backdrop-filter:blur(6px)}
.arrow:hover{background:#ffffff55}.arrow.l{left:14px}.arrow.r{right:14px}
.dots{position:absolute;bottom:16px;left:0;right:0;display:flex;justify-content:center;gap:8px;z-index:5}
.dot{width:10px;height:10px;border-radius:99px;border:0;background:#ffffff66;cursor:pointer;transition:.3s;padding:0}
.dot.active{width:30px;background:#fff}
/* components */
.btn{display:inline-block;padding:9px 18px;border-radius:12px;border:1px solid var(--border);background:var(--card);color:var(--fg);font:inherit;font-weight:600;cursor:pointer;transition:.2s}
.btn:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
.btn.light{background:#fff;color:#0f172a;border-color:#fff}.btn.ghost{background:#ffffff22;color:#fff;border-color:#ffffff55}
.btn:disabled{opacity:.4;cursor:not-allowed}
.actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.card{background:var(--card);border:1px solid var(--border);border-radius:var(--r);padding:18px;box-shadow:var(--shadow)}
.card.hover{transition:.25s}.card.hover:hover{transform:translateY(-4px);border-color:var(--c,var(--accent))}
.grid{display:grid;gap:16px}
.grid.cards{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.grid.three{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}.grid.two{grid-template-columns:repeat(auto-fit,minmax(340px,1fr))}
.emoji{font-size:2.2rem}
.chip{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border-radius:999px;background:color-mix(in srgb,var(--c,var(--accent)) 16%,var(--card));border:1px solid var(--border);font-size:.9rem}
.chip.glass{background:#ffffff26;border-color:#ffffff40;color:#fff}
.chips{display:flex;flex-wrap:wrap;gap:8px;align-items:center}.chips.big .chip{padding:9px 16px;font-size:1rem}
.chips a.chip:hover{background:var(--c,var(--accent));color:#fff}
.badge{font-size:.75rem;font-weight:700;padding:2px 10px;border-radius:99px}
.lv-b{background:#22c55e26;color:#16a34a}.lv-i{background:#f59e0b26;color:#d97706}.lv-a{background:#f43f5e26;color:#e11d48}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:16px;margin:8px 0 8px}
.stat{text-align:center}.stat b{display:block;font-size:2rem;color:var(--accent)}
.bar{height:8px;background:var(--border);border-radius:99px;overflow:hidden;margin:10px 0 4px}
.bar i{display:block;height:100%;background:linear-gradient(90deg,var(--c,var(--accent)),var(--accent2));border-radius:99px;transition:width .5s}
.topic-card{display:block;border-left:4px solid var(--c)}
.topic-card.done{background:color-mix(in srgb,var(--accent) 7%,var(--card))}
.tc-top{display:flex;justify-content:space-between}.tick{color:var(--accent);font-weight:800}
.topic-card h3{margin:.4em 0 .2em;font-size:1.1rem}
.clamp{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;margin:.2em 0 .6em;font-size:.93rem}
.area-card{border-top:4px solid var(--c)}.area-card h3{margin:.2em 0}
.page-head{margin-bottom:20px}.page-head h1{font-size:2rem}
.area-hero{position:relative;overflow:hidden;border-radius:24px;margin-bottom:20px;background:linear-gradient(135deg,color-mix(in srgb,var(--c) 70%,#000),color-mix(in srgb,var(--c) 30%,#000));color:#fff;min-height:210px}
.area-hero.small{min-height:170px}
.hero-cv{position:absolute;inset:0;width:100%;height:100%}
.ah-in{position:relative;padding:28px;z-index:2;max-width:640px}.ah-in h1{font-size:2rem}.ah-in .chip{color:#fff;background:#ffffff26}
.crumbs a:hover{text-decoration:underline}
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0}
.tab{padding:7px 16px;border-radius:99px;border:1px solid var(--border);background:var(--card);color:var(--fg);cursor:pointer;font:inherit;font-size:.92rem}
.tab.active{background:var(--accent);color:#fff;border-color:var(--accent)}
.article .lead{font-size:1.2rem;line-height:1.75}
.article .body{font-size:1.04rem;line-height:1.8;margin:.8em 0}
.note{padding:12px 16px;border-radius:12px;margin:.9em 0;border-left:4px solid var(--accent);background:color-mix(in srgb,var(--accent) 10%,var(--card))}
.note.n-why-it-matters{border-color:var(--accent2);background:color-mix(in srgb,var(--accent2) 10%,var(--card))}
.note.n-common-mistake{border-color:#f43f5e;background:#f43f5e14}.note.n-remember,.note.n-key-idea{border-color:#f59e0b;background:#f59e0b14}
.article h2{margin-top:1.2em;font-size:1.25rem}.article h2:first-child{margin-top:0}
.pager{display:flex;justify-content:space-between;gap:10px;margin:30px 0;flex-wrap:wrap}
/* quiz */
.form{display:flex;flex-wrap:wrap;gap:14px;align-items:flex-end}.form label{display:flex;flex-direction:column;gap:4px;font-weight:600;flex:1;min-width:160px}
.form.inline{margin-top:10px}
.big-search{font-size:1.15rem;padding:14px 18px;margin-top:8px}
.quiz-wrap{max-width:780px;margin:0 auto}
.q-meta{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:10px}
.q-text{white-space:pre-line;font-size:1.2rem}
.opts{display:grid;gap:10px;margin-top:14px}
.opt{display:flex;gap:12px;align-items:flex-start;text-align:left;padding:12px 14px;border-radius:12px;border:2px solid var(--border);background:var(--bg);color:var(--fg);font:inherit;cursor:pointer;transition:.15s}
.opt:hover:not(:disabled){border-color:var(--accent);transform:translateX(4px)}
.opt .key{flex:none;width:26px;height:26px;border-radius:8px;background:var(--border);display:grid;place-items:center;font-weight:700;font-size:.85rem}
.opt.picked{border-color:var(--accent2);background:color-mix(in srgb,var(--accent2) 12%,var(--bg))}
.opt.right{border-color:#22c55e;background:#22c55e22;animation:pop .35s}.opt.wrong{border-color:#f43f5e;background:#f43f5e22;animation:shake .35s}
.opt:disabled{cursor:default;color:var(--fg)}
@keyframes pop{50%{transform:scale(1.02)}}@keyframes shake{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.feedback{display:none;margin-top:14px;padding:14px;border-radius:14px;gap:10px;flex-wrap:wrap;align-items:center}
.feedback.show{display:flex;animation:fade .3s}.feedback.ok{background:#22c55e1f}.feedback.bad{background:#f43f5e1f}
.feedback a{color:var(--accent2);font-weight:600}
.result{text-align:center}.result .big{font-size:1.4rem}.result .chips{justify-content:center}.result .actions{justify-content:center}
.grade{font-size:5rem;font-weight:900;background:linear-gradient(90deg,var(--accent),var(--accent2));-webkit-background-clip:text;background-clip:text;color:transparent;line-height:1}
.chart{display:block;width:100%;height:260px}
.row{display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px dashed var(--border)}
.test-head{display:flex;justify-content:space-between;align-items:center}
.clock{font-size:1.3rem;font-weight:800;padding:6px 14px;border-radius:12px;background:var(--card);border:1px solid var(--border);font-variant-numeric:tabular-nums}.clock.low{color:#f43f5e;animation:blink 1s infinite}
@keyframes blink{50%{opacity:.4}}
.test-layout{display:grid;grid-template-columns:1fr 230px;gap:16px;align-items:start}
.qnav{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;background:var(--card);padding:12px;border-radius:var(--r);border:1px solid var(--border)}
.qnav p{grid-column:1/-1;margin:4px 0 0}
.qn{aspect-ratio:1;border-radius:8px;border:1px solid var(--border);background:var(--bg);color:var(--fg);cursor:pointer}
.qn.done{background:var(--accent);color:#fff}.qn.cur{outline:2px solid var(--accent2)}.qn.flag{box-shadow:inset 0 -4px #f59e0b}
.review{margin:10px 0;border-left:4px solid}.review.ok{border-color:#22c55e}.review.bad{border-color:#f43f5e}.pre{white-space:pre-line}
.faq-item{margin:10px 0;padding:0}.faq-item summary{padding:14px 18px;cursor:pointer;font-weight:600;list-style:none}
.faq-item summary::after{content:'+';float:right;font-size:1.3rem;transition:.2s}.faq-item[open] summary::after{transform:rotate(45deg)}
.faq-item p{margin:0;padding:0 18px 16px;color:var(--muted);animation:fade .3s}
/* labs */
.lab .sl{display:block;margin:10px 0}.lab input[type=range]{width:100%;accent-color:var(--accent)}
.lab .chart{height:300px;margin-top:10px}
.lab textarea{font-family:ui-monospace,monospace;letter-spacing:2px}
.codons{display:flex;flex-wrap:wrap;gap:8px}
.codon{display:flex;flex-direction:column;align-items:center;padding:6px 10px;border-radius:10px;background:var(--bg);border:1px solid var(--border);font-family:ui-monospace,monospace;animation:pop .4s}
.codon i{font-style:normal;color:var(--accent2)}.codon u{text-decoration:none;color:#f59e0b}.codon b{font-size:1.2rem}
.codon.start{border-color:#22c55e}.codon.stp{border-color:#f43f5e;color:#f43f5e}
.gt{font-family:ui-monospace,monospace;font-size:1.3rem;text-align:center}
.punnett{border-collapse:collapse;margin:12px 0}.punnett th,.punnett td{width:64px;height:54px;text-align:center;border:1px solid var(--border);font-size:1.2rem;font-weight:700}
.punnett td{background:color-mix(in srgb,var(--accent) 14%,var(--card))}
.mito{width:100%;height:300px;background:#0b1220;border-radius:14px;margin:8px 0}
.toast{position:fixed;bottom:24px;left:50%;transform:translate(-50%,40px);background:#111;color:#fff;padding:10px 18px;border-radius:12px;opacity:0;transition:.3s;z-index:99}.toast.show{opacity:1;transform:translate(-50%,0)}
.empty{text-align:center;padding:60px}
@media(max-width:900px){
  .top{flex-wrap:wrap;padding:10px 14px}.icon-btn.menu{display:block}
  .nav{display:none;order:5;flex-basis:100%;flex-wrap:wrap}.menu-open .nav{display:flex}
  .search{flex:1;width:auto}.search-box{min-width:0}
  .test-layout{grid-template-columns:1fr}.view{padding:14px}.hero{border-radius:20px}.arrow{display:none}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* grouped nav */
.group{position:relative}
.gbtn{background:none;border:0;font:inherit;font-weight:500;font-size:.95rem;color:var(--muted);padding:6px 12px;border-radius:999px;cursor:pointer}
.gbtn:hover,.group.open .gbtn{background:var(--card)}.group.has-active .gbtn{color:var(--accent)}
.gmenu{display:none;position:absolute;top:100%;left:0;min-width:160px;background:var(--card);border:1px solid var(--border);border-radius:var(--r);padding:6px;z-index:50;box-shadow:0 6px 18px rgba(0,0,0,.15)}
.group.open .gmenu{display:flex;flex-direction:column;gap:2px}
.gmenu a{border-radius:8px}
.foot a{text-decoration:underline}
@media(max-width:800px){.group{flex-basis:100%}.gmenu{position:static;box-shadow:none;border:0;padding:0 0 0 12px}}