/* Оформление в духе Apple: воздух, мягкие тени, стеклянная панель, крупная типографика */
:root{
  --bg:#f5f5f7; --card:#ffffff; --card2:#fbfbfd; --ink:#1d1d1f; --muted:#6e6e73; --line:rgba(0,0,0,.09);
  --brand:#0071e3; --brand-ink:#ffffff; --brand-soft:#e8f2fd; --brand2:#5e5ce6;
  --good:#248a3d; --good-bg:#e9f7ed; --bad:#d70015; --bad-bg:#fdeceb;
  --important:#b25000; --important-bg:#fff4e5; --remember:#0a5fc4; --remember-bg:#e8f2fd;
  --algo:#248a3d; --algo-bg:#e9f7ed; --example:#5c6670; --example-bg:#f0f1f4;
  --error:#d70015; --error-bg:#fdeceb; --python:#8944ab; --python-bg:#f5ecfa; --try:#0a7c86; --try-bg:#e3f5f6;
  --code-bg:#f2f3f7; --glass:rgba(251,251,253,.72); --shadow:0 1px 2px rgba(0,0,0,.04),0 8px 28px rgba(0,0,0,.06);
  --r:18px; --fs:17px; color-scheme:light;
  /* шкалы дизайн-системы: радиусы, отступы, типографика, движение */
  --r-s:10px; --r-m:14px; --r-l:20px; --r-xl:28px;
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px;
  --t-cap:.78rem; --t-sm:.875rem; --t-body:1rem; --t-lead:1.18rem;
  --ease:cubic-bezier(.32,.72,0,1); --dur:.28s; --hit:44px; --bar:54px; --side-w:296px;
  --grad:linear-gradient(135deg,#0a6fd8,#4b49c9); --grad-hero:radial-gradient(120% 140% at 0% 0%,#0a66d0 0%,#4b49c9 58%,#8a3fc4 115%);
  --t-md:.9rem; --t-lg:1.05rem;
  --accent-fun-1:#22b8be; --accent-fun-2:#5e5ce6; --hard:#c2185b; --hard-bg:#fde6ee;
}
:root[data-theme="dark"]{
  --bg:#000000; --card:#1c1c1e; --card2:#232326; --ink:#f5f5f7; --muted:#a1a1a6; --line:rgba(255,255,255,.13);
  --brand:#2997ff; --brand-ink:#001b33; --brand-soft:#0e2740; --brand2:#7d7aff;
  --good:#5fd07a; --good-bg:#12301b; --bad:#ff6961; --bad-bg:#3a1614;
  --important:#ffb340; --important-bg:#33250d; --remember:#64b3ff; --remember-bg:#0e2740;
  --algo:#5fd07a; --algo-bg:#12301b; --example:#b6bfc9; --example-bg:#242629;
  --error:#ff6961; --error-bg:#3a1614; --python:#d9a6f5; --python-bg:#2a1a36; --try:#5fd6e0; --try-bg:#0f3238;
  --code-bg:#151517; --glass:rgba(28,28,30,.72); --shadow:0 1px 0 rgba(255,255,255,.04) inset,0 8px 28px rgba(0,0,0,.5);
  --accent-fun-1:#2dd4da; --accent-fun-2:#7d7aff; --hard:#ff8ab4; --hard-bg:#3a1526;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{font-size:var(--fs);-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Segoe UI Variable","Segoe UI",Inter,Roboto,"Helvetica Neue",Arial,sans-serif;line-height:1.6;-webkit-font-smoothing:antialiased;letter-spacing:-.006em;transition:background .25s,color .25s}
a{color:var(--brand);text-decoration:none}a:hover{text-decoration:underline}
button{font:inherit;cursor:pointer;color:inherit}
code,pre,.code{font-family:"SF Mono",ui-monospace,Menlo,"Cascadia Mono",Consolas,monospace}
sub,sup{line-height:0;font-size:.7em}
sub{color:var(--muted);font-weight:500;margin-left:.06em;vertical-align:-.28em}
sup{vertical-align:.5em}
b sub,.num sub{color:inherit;opacity:.72}
code{background:var(--code-bg);padding:.08em .38em;border-radius:6px;font-size:.9em}
.skip{position:absolute;left:-999px}.skip:focus{left:10px;top:10px;background:var(--brand);color:var(--brand-ink);padding:8px 14px;border-radius:12px;z-index:100}
.ico{width:1.25em;height:1.25em;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none;vertical-align:-.25em}

/* верхняя стеклянная панель */
.topbar{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:8px;padding:0 16px;height:var(--bar);background:var(--glass);-webkit-backdrop-filter:saturate(180%) blur(22px);backdrop-filter:saturate(180%) blur(22px);border-bottom:1px solid var(--line)}
.topbar .brand{display:flex;align-items:center;gap:9px;font-weight:600;color:var(--ink);font-size:.98rem;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:-.01em}
.topbar .brand:hover{text-decoration:none}
.logo{width:28px;height:28px;border-radius:8px;background:linear-gradient(135deg,#0a84ff,#5e5ce6);color:#fff;display:grid;place-items:center;font:700 .72rem "SF Mono",ui-monospace,Menlo,Consolas,monospace;flex:none}
.iconbtn{background:transparent;border:0;color:var(--ink);border-radius:var(--r-s);padding:0 10px;min-height:40px;min-width:40px;transition:background .15s;display:inline-flex;align-items:center;justify-content:center;gap:6px}
.iconbtn:hover{background:var(--brand-soft)}
.seg{display:inline-flex;background:var(--brand-soft);border-radius:11px;padding:2px;gap:2px}
.seg button{border:0;background:transparent;border-radius:9px;min-width:38px;height:34px;display:grid;place-items:center;color:var(--muted)}
.seg button[aria-pressed=true]{background:var(--card);color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.18)}
.seg .ico{width:1.1em;height:1.1em}

.layout{display:flex;max-width:1360px;margin:0 auto;align-items:flex-start}
.side{width:var(--side-w);flex:0 0 var(--side-w);position:sticky;top:var(--bar);max-height:calc(100vh - var(--bar));max-height:calc(100dvh - var(--bar));overflow:auto;padding:18px 12px 40px 16px;scrollbar-width:thin;overscroll-behavior:contain}
.side h4{margin:22px 10px 6px;font-size:var(--t-cap);text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:600}
.side a{display:flex;gap:10px;align-items:center;padding:8px 10px;border-radius:var(--r-s);color:var(--ink);font-size:var(--t-sm);line-height:1.3;min-height:38px}
.side a:hover{background:var(--brand-soft);text-decoration:none}
.side a.cur{background:var(--brand);color:var(--brand-ink);font-weight:600}
.side a .n{flex:0 0 1.65em;height:1.65em;border-radius:7px;background:var(--brand-soft);color:var(--brand);display:grid;place-items:center;font-weight:700;font-size:.78rem}
.side a.cur .n{background:rgba(255,255,255,.25);color:inherit}
.side a .n .ico{width:1.05em;height:1.05em}
.side a .ck{margin-left:auto;color:var(--good)}.side a.cur .ck{color:inherit}
main{flex:1;min-width:0;padding:26px 34px 80px;outline:none}
.chapter-body{max-width:46rem}
.side-collapsed .side{display:none}
.side-collapsed main{max-width:56rem;margin:0 auto}
.scrim{display:none}
@media(max-width:900px){
  .side{position:fixed;top:var(--bar);left:0;bottom:0;width:min(88vw,340px);max-height:none;background:var(--card);z-index:50;border-right:1px solid var(--line);box-shadow:0 0 60px rgba(0,0,0,.35);transform:translateX(-102%);visibility:hidden;transition:transform var(--dur) var(--ease),visibility 0s linear var(--dur)}
  .sidebar-open .side{transform:none;visibility:visible;transition:transform var(--dur) var(--ease)}
  .side-collapsed .side{display:block}
  .scrim{display:block;position:fixed;inset:var(--bar) 0 0 0;background:rgba(0,0,0,.38);z-index:45;opacity:0;pointer-events:none;transition:opacity var(--dur)}
  .sidebar-open .scrim{opacity:1;pointer-events:auto}
  main,.side-collapsed main{padding:18px 16px 60px;max-width:none}
}
@media(max-width:520px){.fsgrp{display:none}.topbar{padding:0 10px}}
@media(max-width:430px){.brandname{display:none}}

/* типографика */
h1{font-size:clamp(1.8rem,4.2vw,2.6rem);line-height:1.1;margin:.15em 0 .5em;font-weight:700;letter-spacing:-.03em}
h2{font-size:1.5rem;margin:1.5em 0 .5em;font-weight:700;letter-spacing:-.02em}
h3{font-size:1.28rem;margin:1.7em 0 .5em;font-weight:650;letter-spacing:-.018em}
.lead{font-size:var(--t-lead);line-height:1.5;color:var(--muted);margin:.4em 0 1.2em;font-weight:400}
.eyebrow{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:6px}
.card{background:var(--card);border-radius:var(--r);box-shadow:var(--shadow);padding:20px 22px;border:1px solid var(--line)}
.chip{display:inline-flex;align-items:center;gap:5px;background:var(--brand-soft);color:var(--brand);border-radius:99px;padding:3px 11px;font-size:.76rem;font-weight:600}
.chip.lv1{background:var(--good-bg);color:var(--good)}.chip.lv2{background:var(--brand-soft);color:var(--brand)}.chip.lv3{background:var(--important-bg);color:var(--important)}.chip.lv4{background:var(--hard-bg);color:var(--hard)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;background:var(--brand);color:var(--brand-ink);border:0;border-radius:99px;padding:9px 20px;font-weight:600;min-height:40px;transition:filter .15s,transform .1s}
.btn:hover{filter:brightness(1.08);text-decoration:none}.btn:active{transform:scale(.98)}
.btn.ghost{background:var(--brand-soft);color:var(--brand)}
.btn.small{padding:5px 14px;min-height:36px;font-size:var(--t-sm)}
@media(pointer:coarse){.btn,.btn.small,.iconbtn,.seg button,.side a,.opt{min-height:var(--hit)}.seg button{min-width:var(--hit)}}
.btn[disabled]{opacity:.45;cursor:not-allowed}
:focus-visible{outline:3px solid color-mix(in srgb,var(--brand) 55%,transparent);outline-offset:2px}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}.muted{color:var(--muted)}
input[type=text],input[type=search],select{font:inherit;color:var(--ink);background:var(--card2);border:1px solid var(--line);border-radius:12px;padding:8px 12px;min-height:42px}
input[type=text]:focus,input[type=search]:focus,select:focus{border-color:var(--brand)}
input[type=checkbox],input[type=radio]{accent-color:var(--brand);width:1.1em;height:1.1em}
.tbl{border-collapse:separate;border-spacing:0;margin:1em 0;max-width:100%;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--card)}
.tbl th,.tbl td{border-bottom:1px solid var(--line);border-right:1px solid var(--line);padding:8px 12px;text-align:left;vertical-align:top}
.tbl tr>*:last-child{border-right:0}.tbl tr:last-child>*{border-bottom:0}
.tbl th{background:var(--brand-soft);font-weight:600;font-size:.9rem}
.tbl.compact td,.tbl.compact th{padding:4px 9px;text-align:center}
.scroll,.tscroll{overflow-x:auto;max-width:100%;-webkit-overflow-scrolling:touch}.tscroll{margin:1em 0}.tscroll>.tbl{margin:0;min-width:100%}
pre.code{background:var(--code-bg);border:1px solid var(--line);border-radius:14px;padding:14px 16px;overflow-x:auto;font-size:.86rem;line-height:1.5;position:relative;white-space:pre}
.copybtn{position:absolute;top:8px;right:8px;font-size:.72rem;padding:3px 10px;border-radius:99px;border:0;background:var(--brand-soft);color:var(--brand)}

/* блоки теории с иконками */
.box{--c:var(--example);--bgc:var(--example-bg);background:var(--bgc);border-radius:16px;padding:14px 18px;margin:16px 0;position:relative}
.box>:first-child{margin-top:0}.box>:last-child{margin-bottom:0}.box ul,.box ol{margin:.35em 0;padding-left:1.4em}
.box::before{content:"";display:inline-block;width:1.15em;height:1.15em;margin-right:.45em;vertical-align:-.2em;background:var(--c);-webkit-mask:var(--icon) center/contain no-repeat;mask:var(--icon) center/contain no-repeat}
.box>b:first-child{color:var(--c)}
.box.important{--c:var(--important);--bgc:var(--important-bg);--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v6M12 16.5v.5'/%3E%3C/svg%3E")}
.box.remember{--c:var(--remember);--bgc:var(--remember-bg);--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18h6M10 21h4M12 3a6 6 0 00-4 10.5c.7.7 1 1.5 1 2.5h6c0-1 .3-1.8 1-2.5A6 6 0 0012 3z'/%3E%3C/svg%3E")}
.box.algo{--c:var(--algo);--bgc:var(--algo-bg);--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='5' cy='6' r='1'/%3E%3Ccircle cx='5' cy='12' r='1'/%3E%3Ccircle cx='5' cy='18' r='1'/%3E%3Cpath d='M9 6h11M9 12h11M9 18h11'/%3E%3C/svg%3E")}
.box.example{--c:var(--example);--bgc:var(--example-bg);--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h8l4 4v14H6z'/%3E%3Cpath d='M14 3v4h4M9 12h6M9 16h6'/%3E%3C/svg%3E")}
.box.error{--c:var(--error);--bgc:var(--error-bg);--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l10 18H2z'/%3E%3Cpath d='M12 10v5M12 18v.5'/%3E%3C/svg%3E")}
.box.python{--c:var(--python);--bgc:var(--python-bg);--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 8l-4 4 4 4M16 8l4 4-4 4M14 5l-4 14'/%3E%3C/svg%3E")}
.box.try{--c:var(--try);--bgc:var(--try-bg);--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20l1-4L16 5l3 3L8 19z'/%3E%3C/svg%3E")}
.num{white-space:nowrap;font-weight:600}
.gl{border-bottom:2px dotted var(--brand);cursor:help}
.tip{position:absolute;z-index:80;max-width:320px;background:var(--ink);color:var(--bg);padding:11px 14px;border-radius:14px;font-size:.87rem;box-shadow:0 12px 40px rgba(0,0,0,.3)}
.tip b{display:block;margin-bottom:2px}.tip a{color:var(--bg);text-decoration:underline}

/* схемы */
.scheme{margin:18px 0;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:14px 10px 8px;box-shadow:var(--shadow)}
.scheme figcaption,.scheme .cap{text-align:center;color:var(--muted);font-size:.84rem;margin:2px 0 6px}
.sv{display:block;width:100%;height:auto;max-width:780px;margin:0 auto;font-family:inherit}
.sv text{fill:var(--ink);font-size:14px;font-weight:500}
.sv .m{fill:var(--muted);font-weight:400}.sv .s{font-size:12px}.sv .l{font-size:17px;font-weight:700}.sv .xl{font-size:24px;font-weight:700;font-family:"SF Mono",ui-monospace,Menlo,Consolas,monospace}
.sv .mono{font-family:"SF Mono",ui-monospace,Menlo,Consolas,monospace}.sv .w{fill:#fff}.sv .c{text-anchor:middle}.sv .e{text-anchor:end}
.sv .ln{stroke:var(--muted);stroke-width:1.6;fill:none}.sv .lnb{stroke:var(--brand);stroke-width:2.2;fill:none}
.sv .fb{fill:var(--brand-soft);stroke:var(--brand);stroke-width:1.5}.sv .fg{fill:var(--algo-bg);stroke:var(--algo);stroke-width:1.5}
.sv .fo{fill:var(--important-bg);stroke:var(--important);stroke-width:1.5}.sv .fp{fill:var(--python-bg);stroke:var(--python);stroke-width:1.5}
.sv .fr{fill:var(--error-bg);stroke:var(--error);stroke-width:1.5}.sv .fn{fill:var(--card2);stroke:var(--line);stroke-width:1.5}
.sv .fsolid{fill:var(--brand)}.sv .fsolo{fill:var(--important)}
.sv .tb{fill:var(--brand)}.sv .tg{fill:var(--algo)}.sv .to{fill:var(--important)}.sv .tp{fill:var(--python)}.sv .tr{fill:var(--error)}

/* виджеты */
.wbox{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;margin:20px 0;box-shadow:var(--shadow);position:relative}
.wbox::before{content:"Попробуйте";position:absolute;top:-11px;left:16px;background:var(--grad);color:#fff;font-size:.7rem;font-weight:700;padding:3px 10px;border-radius:99px;letter-spacing:.05em;text-transform:uppercase}
.wtitle{font-weight:650;font-size:1.02rem}.whint{color:var(--muted);font-size:.86rem}.wbody{margin-top:10px}.wrow{display:flex;gap:12px;flex-wrap:wrap;margin:6px 0}
.fld{display:flex;flex-direction:column;gap:3px;font-size:.78rem;color:var(--muted);font-weight:500}
.wout{margin-top:10px}.wstep{background:var(--code-bg);border-radius:12px;padding:9px 13px;margin:8px 0;font-size:.92rem}
.wans{background:var(--good-bg);border-radius:12px;padding:11px 14px;margin:8px 0;font-size:1.04rem}
.wnote{color:var(--muted);font-size:.86rem}.bad{color:var(--bad)}.good{color:var(--good)}
.bitrow{display:flex;gap:7px;flex-wrap:wrap;margin:12px 0}.bitcell{text-align:center;font-size:.7rem;color:var(--muted);line-height:1.25}
.bit{width:46px;height:54px;border-radius:13px;border:1px solid var(--line);background:var(--card2);color:var(--muted);font:700 1.4rem "SF Mono",ui-monospace,Menlo,Consolas,monospace;transition:all .15s}
.bit.on{background:linear-gradient(180deg,#1f86f0,#0a6fd8);color:#fff;border-color:transparent;box-shadow:0 4px 14px rgba(10,132,255,.4)}
.wctl{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0}

/* задачи */
.practice{margin:22px 0}.ph{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:8px}.ph b{color:var(--try);display:inline-flex;gap:6px;align-items:center}
.task{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;margin:12px 0;box-shadow:var(--shadow);transition:border-color .2s,box-shadow .2s}
.task.ok{border-color:color-mix(in srgb,var(--good) 55%,transparent)}.task.fail{border-color:color-mix(in srgb,var(--bad) 45%,transparent)}
.tmeta{display:flex;gap:8px;flex-wrap:wrap;align-items:center;font-size:.78rem;margin-bottom:8px;color:var(--muted)}
.tq{font-size:1.06rem}.tq pre.code{margin:10px 0}
.tans{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px;align-items:center}
.tans input{flex:1;min-width:150px;max-width:340px;font-size:1.05rem;font-family:"SF Mono",ui-monospace,Menlo,Consolas,monospace}
.opts{display:grid;gap:8px;margin-top:12px}
.opt{text-align:left;background:var(--card2);border:1.5px solid var(--line);border-radius:14px;padding:10px 14px;transition:all .15s}
.opt:hover:not([disabled]){border-color:var(--brand);background:var(--brand-soft)}
.opt.right{border-color:var(--good);background:var(--good-bg)}.opt.wrong{border-color:var(--bad);background:var(--bad-bg)}
.fb{margin-top:12px;padding:9px 14px;border-radius:12px;font-weight:600}
.fb.good{background:var(--good-bg);color:var(--good)}.fb.good::before{content:"\2713  "}.fb.bad{background:var(--bad-bg);color:var(--bad)}.fb.bad::before{content:"\2715  "}.fb.info{background:var(--brand-soft);color:var(--brand)}
.hint{margin-top:8px;background:var(--important-bg);padding:8px 14px;border-radius:12px;font-size:.94rem}
.expl{margin-top:12px;background:var(--code-bg);border-radius:14px;padding:12px 16px;font-size:.94rem}
.tact{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.progress{height:8px;border-radius:99px;background:var(--brand-soft);overflow:hidden}
.progress>i{display:block;height:100%;background:linear-gradient(90deg,#30d158,#0a84ff);border-radius:99px;transition:width .4s}

/* главная */
.hero{position:relative;overflow:hidden;color:#fff;border-radius:28px;padding:44px 36px 40px;margin-bottom:22px;background:var(--grad-hero)}
.hero::after{content:"0110 1001 1010 0101 1100 0011 0110 1001 1010 0101 1100 0011 0110 1001 1010 0101 1100 0011";position:absolute;right:-30px;top:-10px;width:70%;font:700 2.2rem/1.5 "SF Mono",ui-monospace,Menlo,Consolas,monospace;color:rgba(255,255,255,.05);word-break:break-all;pointer-events:none;transform:rotate(-6deg)}
.hero>*{position:relative;z-index:1}
.hero .kick{font-size:var(--t-cap);font-weight:600;letter-spacing:.1em;text-transform:uppercase}
.hero h1{margin:.2em 0 .3em;color:#fff;font-size:clamp(2rem,5.4vw,3.3rem);max-width:16em}
.hero p{margin:.3em 0 1em;max-width:38em;font-size:1.1rem}
.hero .btn{background:#fff;color:#1d1d1f;padding:11px 24px}.hero .btn.ghost{background:rgba(255,255,255,.2);color:#fff;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;margin:18px 0}
.tile{display:block;color:var(--ink);background:var(--card);border:1px solid var(--line);border-radius:22px;padding:20px;box-shadow:var(--shadow);transition:transform .2s,box-shadow .2s}
.tile:hover{text-decoration:none}
@media(hover:hover){.tile:hover{transform:translateY(-3px);box-shadow:0 14px 40px rgba(0,0,0,.12)}.toc-item:hover{transform:translateX(3px)}}
.tile .ti{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;color:#fff;margin-bottom:12px}
.tile .ti .ico{width:24px;height:24px}
.tile b{display:block;font-size:1.06rem;margin-bottom:3px}.tile span.d{color:var(--muted);font-size:.9rem;line-height:1.4}
.toc-part{margin-top:24px}.toc-part h3{margin:0 0 8px}
.toc-item{display:flex;gap:12px;align-items:center;padding:11px 14px;border:1px solid var(--line);background:var(--card);border-radius:16px;margin:7px 0;color:var(--ink);transition:transform .15s,border-color .15s}
.toc-item:hover{border-color:var(--brand);text-decoration:none}
.toc-item .n{width:32px;height:32px;border-radius:10px;background:var(--brand-soft);color:var(--brand);display:grid;place-items:center;font-weight:700;font-size:.9rem;flex:none}
.toc-item .t{flex:1;font-weight:500}
.pager{display:flex;justify-content:space-between;gap:10px;margin-top:34px;flex-wrap:wrap}
.setup label.chk{display:flex;gap:9px;align-items:center;padding:5px 0}.setup .grp{margin:14px 0}.setup .grp>b{display:block;margin-bottom:4px}
.cols{columns:2 280px;column-gap:24px}
.gterm{padding:12px 0;border-bottom:1px solid var(--line)}.gterm b{color:var(--brand)}
.stat{display:flex;align-items:center;gap:12px;margin:10px 0}.stat .lab{flex:0 0 250px}.stat .progress{flex:1}.stat .val{flex:0 0 100px;text-align:right;color:var(--muted);font-size:.86rem}
@media(max-width:600px){.stat{flex-wrap:wrap}.stat .lab{flex-basis:100%}.hero{padding:30px 22px}}
.score-big{font-size:3rem;font-weight:800;letter-spacing:-.03em;background:linear-gradient(135deg,#0a84ff,#bf5af2);-webkit-background-clip:text;background-clip:text;color:transparent}
details.mistake{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:10px 14px;margin:8px 0}details summary{cursor:pointer;font-weight:600}
.foot{margin-top:44px;color:var(--muted);font-size:.84rem;text-align:center}
.pagehead{display:flex;align-items:center;gap:14px;margin-bottom:6px}
.pagehead .bigico{width:54px;height:54px;border-radius:16px;display:grid;place-items:center;color:#fff;flex:none}.pagehead .bigico .ico{width:28px;height:28px}
.bg-blue{background:linear-gradient(135deg,#0a84ff,#0060df)}.bg-purple{background:linear-gradient(135deg,#bf5af2,#8944ab)}.bg-green{background:linear-gradient(135deg,#30d158,#1a9a3e)}.bg-orange{background:linear-gradient(135deg,#ff9f0a,#e07b00)}.bg-teal{background:linear-gradient(135deg,#40c8e0,#0a8ca0)}.bg-pink{background:linear-gradient(135deg,#ff5e8a,#d6336c)}

/* печать */
.sheet{background:#fff;color:#000;border:1px solid var(--line);border-radius:12px;padding:22px 26px;margin:16px 0;page-break-after:always}
.sheet h2,.sheet h3{margin-top:0;color:#000}.sheet .tq{font-size:1rem}.sheet .ti{margin:12px 0;padding-bottom:8px;border-bottom:1px dotted #aaa}
.sheet .blank{border-bottom:1px solid #000;height:1.6em;margin-top:6px;max-width:70%}.sheet .opt-print{margin:2px 0 0 18px}
.sheet code,.sheet .tbl th{background:#eee;color:#000}.sheet .tbl,.sheet .tbl td,.sheet .tbl th{color:#000;background:#fff}
@media print{
  :root,:root[data-theme="dark"]{--bg:#fff}
  body{background:#fff}.topbar,.side,.noprint,.skip,.foot{display:none!important}
  .layout,main{display:block;max-width:none;padding:0;margin:0}
  .sheet{border:0;padding:0;margin:0;box-shadow:none;border-radius:0}
  .card,.box,.task,.scheme{box-shadow:none}a{color:#000}.box,.task,.ti,.scheme{break-inside:avoid}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important;animation-duration:.001ms!important;animation-iteration-count:1!important}}

/* «Проверьте себя» */
.checkself{margin:40px 0 24px;padding:20px 20px 16px;border-radius:var(--r-l);background:var(--card2);border:1px solid var(--line)}
.checkself h3{margin:0 0 2px}.checkself p{margin:0}
.cs-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;flex-wrap:wrap;margin-bottom:12px}
.cs-score{font-weight:650;font-size:var(--t-sm);color:var(--muted);background:var(--brand-soft);border-radius:99px;padding:4px 12px;white-space:nowrap}
.cs-score.done{color:var(--good);background:var(--good-bg)}
.cs-bar{margin-bottom:6px}.cs-foot{margin-top:14px}
.tno{color:var(--ink)}
/* конспект в тетради */
details.notebook{margin:var(--sp-6) 0;border-radius:var(--r-l);background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow);overflow:hidden}
details.notebook>summary{list-style:none;display:flex;align-items:center;gap:14px;padding:16px 18px;cursor:pointer;font-weight:400;min-height:var(--hit)}
details.notebook>summary::-webkit-details-marker{display:none}
.nb-ic{width:44px;height:44px;border-radius:var(--r-m);display:grid;place-items:center;color:#fff;background:linear-gradient(135deg,#d97706,#b45309);flex:none}.nb-ic .ico{width:24px;height:24px}
.nb-tt{flex:1;min-width:0}.nb-tt b{display:block;font-size:1.05rem}.nb-tt small{color:var(--muted);font-size:var(--t-sm)}
.nb-chev{color:var(--muted);transition:transform var(--dur) var(--ease);flex:none}.nb-chev .ico{width:1.3em;height:1.3em}
details.notebook[open] .nb-chev{transform:rotate(90deg)}
details.notebook>summary:hover{background:var(--brand-soft)}
details.notebook>.nb-save{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:14px 22px 10px 46px;border-top:1px solid var(--line);margin:0}
.nb-save-msg{font-size:var(--t-sm);color:var(--muted)}
.nb-page{padding:8px 22px 22px 46px;position:relative;line-height:1.75}
.nb-print-frame{display:none}
body.printing-notebook .layout,body.printing-notebook .topbar,body.printing-notebook .scrim{display:none!important}
body.printing-notebook .nb-print-frame{display:block!important;color:#000;background:#fff}
@media print{body.printing-notebook .nb-print-frame{border:0;box-shadow:none}}
.nb-page::before{content:"";position:absolute;left:30px;top:0;bottom:0;width:1.5px;background:color-mix(in srgb,var(--bad) 55%,transparent)}
.nb-page h4{margin:1.1em 0 .2em;font-size:var(--t-body);color:var(--brand)}
.nb-page p,.nb-page ul,.nb-page ol{margin:.3em 0}
.nb-title{font-size:1.2rem;font-weight:700;margin:.6em 0 .2em;letter-spacing:-.01em}
.nb-frame{border:1.5px solid var(--ink);border-radius:var(--r-s);padding:8px 14px;margin:.6em 0;background:var(--card);line-height:1.6}
.nb-frame ol{margin:.3em 0;padding-left:1.4em}
.nb-note{color:var(--muted);font-style:italic;margin:.3em 0}
pre.nb-calc{margin:.6em 0;padding:10px 14px;background:var(--code-bg);border:1px dashed var(--line);border-radius:var(--r-s);font-family:"SF Mono",ui-monospace,Menlo,"Cascadia Mono",Consolas,monospace;font-size:.86rem;line-height:1.6;overflow-x:auto;white-space:pre}
.nb-ans{margin:.5em 0;padding:8px 14px;border-radius:var(--r-s);background:var(--good-bg);color:var(--good);font-weight:650}
/* переход между главами */
.pager{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:34px}
.pg{display:flex;flex-direction:column;gap:2px;padding:14px 18px;border-radius:var(--r-l);background:var(--card);border:1px solid var(--line);color:var(--ink);min-height:var(--hit);transition:border-color .15s}
.pg:hover{border-color:var(--brand);text-decoration:none}
.pg small{color:var(--muted);font-size:var(--t-cap);text-transform:uppercase;letter-spacing:.06em;font-weight:600}
.pg span{font-weight:600;line-height:1.3}
.pg.next{text-align:right;grid-column:2}
@media(max-width:600px){.pager{grid-template-columns:1fr}.pg.next{grid-column:auto}}

/* ГИА: ОГЭ и ЕГЭ по теме главы */
.examblock{margin:var(--sp-6) 0;padding:20px 20px 18px;border-radius:var(--r-l);background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow)}
.reinforce-card{margin-top:var(--sp-6)}
.examblock-head h3{display:flex;align-items:center;gap:9px;margin:0 0 4px;font-size:1.05rem}
.examblock-head h3 .ico{color:var(--muted)}
.examblock-head p{margin:0 0 14px}
.examtier{border-radius:99px;padding:10px 20px;font-weight:650;color:#fff;border:0}
.examtier-oge{background:linear-gradient(135deg,#0a6fd8,#0a84ff)}
.examtier-ege{background:linear-gradient(135deg,#8944ab,#bf5af2)}
.examtier:hover{filter:brightness(1.08)}
.examchip-oge{background:var(--brand-soft);color:var(--brand)}
.examchip-ege{background:color-mix(in srgb,#8944ab 16%,transparent);color:#8944ab}
:root[data-theme="dark"] .examchip-ege{background:color-mix(in srgb,#d9a6f5 20%,transparent);color:#d9a6f5}

/* модальное окно */
body.modal-open{overflow:hidden}
.modal-scrim{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:200;display:flex;align-items:flex-start;justify-content:center;padding:min(6vh,48px) 16px;overflow-y:auto;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.modal-box{background:var(--card);border-radius:var(--r-xl);box-shadow:0 30px 80px rgba(0,0,0,.4);max-width:680px;width:100%;max-height:88vh;display:flex;flex-direction:column;overflow:hidden}
.modal-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:20px 22px 14px;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--card);z-index:1}
.modal-head h2{margin:.3em 0 .2em;font-size:1.3rem}
.modal-head p{margin:0}
.modal-body{padding:18px 22px 22px;overflow-y:auto}
@media(max-width:600px){.modal-scrim{padding:0}.modal-box{max-width:none;width:100%;height:100%;max-height:100%;border-radius:0}}

/* пример программы на Python */
.pydemo{margin:var(--sp-6) 0;padding:20px 20px 18px;border-radius:var(--r-l);background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow)}
.pydemo-head h3{display:flex;align-items:center;gap:9px;margin:0 0 4px;font-size:1.05rem}
.pydemo-head h3 .ico{color:var(--python)}
.pydemo-head p{margin:0 0 14px}
.pygrid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:14px;align-items:start}
.pypane{min-width:0}
.pypane-t{font-size:var(--t-cap);text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:600;margin-bottom:6px}
pre.pycode-src{margin:0;max-height:420px;max-width:100%;white-space:pre;overflow-x:auto;tab-size:4;box-sizing:border-box}
.pyio{margin-bottom:10px;align-items:flex-end}
.pyio .fld{min-width:9em;flex:1 1 9em;max-width:100%}
.pyio input{width:100%;box-sizing:border-box}
.pyout{margin:0;background:#1c1c1e;color:#d8f5df;border-radius:var(--r-s);padding:12px 14px;font-family:"SF Mono",ui-monospace,Menlo,"Cascadia Mono",Consolas,monospace;font-size:.82rem;line-height:1.6;white-space:pre-wrap;word-break:break-word;min-height:120px;max-height:420px;overflow-y:auto}
.pyout.bad{color:#ff8a80}
.pytasks{margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.pytasks ol{margin:.4em 0 0;padding-left:1.4em}
@media(max-width:760px){.pygrid{grid-template-columns:1fr}}

/* игровые интерактивные визуализации («ТЫК») */
.funbox{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:18px 18px 16px;margin:20px 0;box-shadow:var(--shadow);position:relative}
.funbox::before{content:"ТЫК";position:absolute;top:-11px;left:16px;background:linear-gradient(135deg,var(--accent-fun-1),var(--accent-fun-2));color:#fff;font-size:.68rem;font-weight:700;padding:3px 11px;border-radius:99px;letter-spacing:.05em;text-transform:uppercase}
.funbox .wctl{margin:10px 0}
.funbox .wctl .btn.on{background:var(--brand);color:var(--brand-ink)}
@keyframes popIn{0%{transform:scale(.4);opacity:0}70%{transform:scale(1.1);opacity:1}100%{transform:scale(1)}}
@keyframes pulseFun{0%{transform:scale(1)}45%{transform:scale(1.22)}100%{transform:scale(1)}}
@keyframes flashFun{0%,100%{background:var(--important-bg)}50%{background:var(--important);color:#fff}}
@keyframes hopFun{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px) scale(1.15)}}
.pop-in{animation:popIn .35s var(--ease) both}
.pulse-fun{animation:pulseFun .45s ease}
.fun-flash{margin-top:8px;padding:8px 12px;border-radius:var(--r-s);animation:flashFun .6s ease 2}
.fun-big{margin-top:10px;font-size:var(--t-lg);min-height:1.6em}
.fun-label{font-size:var(--t-cap);text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:600;margin:10px 0 4px}
.fun-custom{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:10px 0;padding:8px 10px;background:var(--code-bg);border-radius:var(--r-s)}
.fun-custom input,.fun-custom select{min-height:36px;padding:6px 10px}
.fun-err{color:var(--bad);font-size:var(--t-sm);margin:6px 0}
/* лампочки (гл.1) */
.fun-lamps{display:flex;gap:8px;flex-wrap:wrap}
.fun-lamp{width:46px;height:46px;border-radius:50%;border:0;display:grid;place-items:center;background:var(--code-bg);color:var(--muted);transition:background .2s,color .2s,transform .15s}
.fun-lamp .ico{width:22px;height:22px}
.fun-lamp.on{background:var(--important-bg);color:var(--important)}
.fun-lamp:active{transform:scale(.92)}
.fun-grid{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.fun-cell{background:var(--code-bg);border:1px solid var(--line);border-radius:var(--r-s);padding:5px 9px;font-family:"SF Mono",ui-monospace,Menlo,Consolas,monospace;font-size:.8rem}
/* цикл команды (гл.2) */
.fun-cycle{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.fun-stage{background:var(--code-bg);border:1.5px solid var(--line);border-radius:var(--r-m);padding:10px 12px;font-size:.86rem;transition:background .25s,border-color .25s}
.fun-stage b{display:block;margin-bottom:2px}.fun-stage span{color:var(--muted)}
.fun-stage.active{background:var(--brand-soft);border-color:var(--brand)}
.fun-stage.active span{color:var(--ink)}
@media(max-width:600px){.fun-cycle{grid-template-columns:repeat(2,1fr)}}
/* конструктор числа (гл.3) */
.fun-digits-static{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0}
.fun-digit-btn{width:38px;height:38px;border-radius:var(--r-s);border:1px solid var(--line);background:var(--card2);font-weight:700}
.fun-digit-btn:hover:not(:disabled){border-color:var(--brand);background:var(--brand-soft)}
.fun-digit-btn:disabled{opacity:.3}
.fun-num{font:700 1.4rem "SF Mono",ui-monospace,Menlo,Consolas,monospace;margin:6px 0}
/* одометр (гл.4) */
.fun-wheels{display:flex;gap:6px;margin-bottom:4px}
.fun-wheel{width:44px;height:54px;border-radius:var(--r-s);background:var(--ink);color:var(--bg);display:grid;place-items:center;font:700 1.5rem "SF Mono",ui-monospace,Menlo,Consolas,monospace}
/* Горнер / деление (гл.5-6) */
.fun-digits{display:flex;gap:6px;margin:8px 0;flex-wrap:wrap}
.fun-hdigit{width:34px;height:34px;border-radius:var(--r-s);background:var(--code-bg);display:grid;place-items:center;font-weight:700;font-family:"SF Mono",ui-monospace,Menlo,Consolas,monospace;transition:background .2s,color .2s}
.fun-hdigit.done{background:var(--good-bg);color:var(--good)}
.fun-hdigit.cur{background:var(--brand);color:var(--brand-ink)}
.fun-stack{display:flex;flex-direction:column;gap:6px;margin:8px 0}
.fun-steprow{background:var(--code-bg);border-radius:var(--r-s);padding:7px 12px;font-family:"SF Mono",ui-monospace,Menlo,Consolas,monospace;font-size:.88rem}
/* группировка (гл.7) */
.fun-bits{display:flex;gap:5px;flex-wrap:wrap;margin:8px 0}
.fun-bit{width:30px;height:34px;border-radius:7px;background:var(--code-bg);display:grid;place-items:center;font-weight:700;font-family:"SF Mono",ui-monospace,Menlo,Consolas,monospace;transition:background .2s,color .2s}
.fun-bit.lit.g1{background:var(--brand);color:var(--brand-ink)}
.fun-bit.lit.g2{background:var(--algo);color:#fff}
.fun-bit.lit.g3{background:var(--python);color:#fff}
.fun-digit-result{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:var(--r-s);font-weight:700;margin-right:4px}
.fun-digit-result.g1{background:var(--brand-soft);color:var(--brand)}
.fun-digit-result.g2{background:var(--algo-bg);color:var(--algo)}
.fun-digit-result.g3{background:var(--python-bg);color:var(--python)}
/* сложение (гл.9) */
.fun-cols-wrap{display:flex;align-items:center;margin:8px 0}
.fun-cols{display:flex;gap:6px}
.fun-col{display:flex;flex-direction:column;align-items:center;gap:3px;background:var(--code-bg);border-radius:var(--r-s);padding:6px 4px;font-family:"SF Mono",ui-monospace,Menlo,Consolas,monospace;font-weight:700;min-width:28px;transition:background .2s}
.fun-col.active{background:var(--brand-soft)}
.fun-col .fr{color:var(--brand)}
.fun-extra{background:none;opacity:0;visibility:hidden;margin-right:2px;position:relative}
.fun-extra::after{content:"+";position:absolute;top:-16px;left:50%;transform:translateX(-50%);color:var(--muted);font-size:.75rem}
.fun-extra.show{opacity:1;visibility:visible;background:var(--good-bg)}
.fun-extra.show .fr{color:var(--good)}
.fun-col.carry-hop{animation:hopFun .5s ease}
/* разрядная сетка (гл.11) */
.fun-bar{height:14px;border-radius:99px;background:var(--code-bg);overflow:hidden;margin-top:8px}
.fun-bar-fill{height:100%;background:linear-gradient(90deg,#30d158,#0a84ff);border-radius:99px;transition:width .35s var(--ease)}
/* часы переполнения (гл.13) */
.fun-clockwrap{display:flex;justify-content:center;margin:6px 0}
/* ползунок запятой (гл.15) */
.fun-strip{display:flex;align-items:center;gap:2px;margin:8px 0;flex-wrap:wrap}
.fun-comma{width:14px;height:34px;display:flex;align-items:flex-end;justify-content:center;font-size:1.6rem;font-weight:900;color:var(--bad);padding-bottom:2px}
@media print{.checkself,.scrim,.examblock,.pydemo,.funbox{display:none!important}}