/* mironbook design system. Loaded after styles.css; overrides its structure with one set of tokens. */

/* ============ 1. Tokens ============ */
:root{
  --bg:#f5f5f7;--surface:#fff;--raised:#fff;--ink:#1d1d1f;--muted:#6e6e73;--faint:#8e8e93;
  --line:rgba(0,0,0,.08);--line-2:rgba(0,0,0,.14);--hover:rgba(0,0,0,.04);--press:rgba(0,0,0,.07);
  --accent:#3a63f0;--on-accent:#fff;--soft:rgba(58,99,240,.08);
  --gold:#b86e00;--love:#d14d5b;--iris:#8a5cd6;--pine:#1f8a70;--def:#3a63f0;
  --g1:#4285f4;--g2:#9b72cb;--g3:#d96570;
  --glass:rgba(255,255,255,.66);--glass-solid:rgba(255,255,255,.9);--glass-edge:rgba(255,255,255,.85);
  --shadow-1:0 1px 2px rgba(0,0,0,.04),0 4px 14px -6px rgba(20,30,60,.10);
  --shadow-2:0 1px 2px rgba(0,0,0,.04),0 12px 36px -12px rgba(20,30,60,.18);
  --shadow-3:0 2px 6px rgba(0,0,0,.05),0 28px 70px -20px rgba(20,30,70,.32);
  --aurora-a:rgba(66,133,244,.18);--aurora-b:rgba(155,114,203,.15);--aurora-c:rgba(217,101,112,.10);
  --scrim:rgba(20,22,30,.26);

  --sans:-apple-system,BlinkMacSystemFont,"SF Pro Text","Inter",ui-sans-serif,system-ui,sans-serif;
  --display:-apple-system,BlinkMacSystemFont,"SF Pro Display","Inter",ui-sans-serif,system-ui,sans-serif;
  --serif:ui-serif,"New York","Iowan Old Style","Palatino Linotype",Georgia,serif;

  /* One motion language for the whole product */
  --t-fast:.16s;--t-base:.28s;--t-slow:.48s;
  --ease:cubic-bezier(.2,.8,.2,1);
  --ease-in:cubic-bezier(.4,0,1,1);
  --spring:cubic-bezier(.34,1.35,.64,1);

  --r-xs:8px;--r-sm:12px;--r-md:16px;--r-lg:22px;--r-xl:28px;
  --top:80px;--nav-w:300px;--notes-w:340px;
  --gemini:linear-gradient(100deg,var(--g1),var(--g2) 52%,var(--g3));
  color-scheme:light;
}
body.dark{
  /* Rosé Pine */
  --bg:#191724;--surface:#1f1d2e;--raised:#26233a;--ink:#e0def4;--muted:#908caa;--faint:#6e6a86;
  --line:rgba(224,222,244,.08);--line-2:rgba(224,222,244,.15);--hover:rgba(224,222,244,.05);--press:rgba(224,222,244,.09);
  --accent:#c4a7e7;--on-accent:#191724;--soft:rgba(196,167,231,.13);
  --gold:#f6c177;--love:#eb6f92;--iris:#c4a7e7;--pine:#9ccfd8;--def:#9ccfd8;
  --g1:#9ccfd8;--g2:#c4a7e7;--g3:#ebbcba;
  --glass:rgba(31,29,46,.7);--glass-solid:rgba(38,35,58,.94);--glass-edge:rgba(224,222,244,.07);
  --shadow-1:0 1px 0 rgba(224,222,244,.03) inset,0 6px 18px -8px rgba(0,0,0,.5);
  --shadow-2:0 1px 0 rgba(224,222,244,.04) inset,0 16px 40px -14px rgba(0,0,0,.6);
  --shadow-3:0 1px 0 rgba(224,222,244,.05) inset,0 30px 80px -20px rgba(0,0,0,.75);
  --aurora-a:rgba(156,207,216,.10);--aurora-b:rgba(196,167,231,.12);--aurora-c:rgba(235,188,186,.08);
  --scrim:rgba(10,9,16,.5);
  color-scheme:dark;
}

/* ============ 2. Base ============ */
html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;scroll-padding-top:150px}
body{background:var(--bg);color:var(--ink);font:15px/1.6 var(--sans);letter-spacing:-.01em;transition:background-color var(--t-slow) var(--ease),color var(--t-slow) var(--ease)}
::selection{background:color-mix(in srgb,var(--g2) 30%,transparent)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
button{-webkit-tap-highlight-color:transparent}
svg{flex:none}

body::before{content:"";position:fixed;inset:-20vmax;z-index:-1;pointer-events:none;
  background:radial-gradient(38vmax 30vmax at 18% 10%,var(--aurora-a),transparent 70%),radial-gradient(34vmax 28vmax at 88% 20%,var(--aurora-b),transparent 70%),radial-gradient(40vmax 30vmax at 60% 98%,var(--aurora-c),transparent 70%);
  animation:aurora 40s ease-in-out infinite alternate}
@keyframes aurora{50%{transform:translate3d(3vmax,-2vmax,0) rotate(6deg)}100%{transform:translate3d(-2vmax,2vmax,0) rotate(-4deg)}}
body::after{content:"";position:fixed;left:0;right:0;top:0;height:calc(var(--top) + 60px);z-index:12;pointer-events:none;background:linear-gradient(var(--bg),color-mix(in srgb,var(--bg) 90%,transparent) 45%,transparent)}

/* ============ 3. Shared materials & motion primitives ============ */
.top,.sidebar,.notes,.chapter-nav,.toc-panel,.course-menu,dialog,.tabbar,.more-sheet{
  -webkit-backdrop-filter:blur(28px) saturate(170%);backdrop-filter:blur(28px) saturate(170%);
  border:1px solid var(--glass-edge)}
.top,.chapter-nav,.sidebar,.notes,.tabbar{background:var(--glass);box-shadow:var(--shadow-1)}
.toc-panel,.course-menu,dialog,.more-sheet{background:var(--glass-solid);box-shadow:var(--shadow-3)}

/* Popover: identical open/close for every floating menu */
.toc-panel,.course-menu{position:fixed;z-index:60;display:block;padding:6px;border-radius:var(--r-lg);opacity:0;visibility:hidden;pointer-events:none;
  transform:translateY(-6px) scale(.97);transform-origin:top left;
  transition:opacity var(--t-fast) var(--ease-in),transform var(--t-fast) var(--ease-in),visibility 0s var(--t-fast)}
.toc-panel.open,.course-menu.open{opacity:1;visibility:visible;pointer-events:auto;transform:none;
  transition:opacity var(--t-base) var(--ease),transform var(--t-slow) var(--spring),visibility 0s}

.icon,.chapter-nav button,.search-btn,.lang button,.course-current,.course,.topic-link,.toc-panel button,.reveal,.translate,.result,.bookmark-item,.tab,.np-card,.np-icon-btn,.seg button,.row-btn{
  transition:background-color var(--t-fast) var(--ease),color var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease),box-shadow var(--t-base) var(--ease),opacity var(--t-fast) var(--ease),transform var(--t-base) var(--spring)}
.icon:active,.chapter-nav button:active,.search-btn:active,.course-current:active,.course:active,.topic-link:active,.reveal:active,.tab:active,.np-card:active,.np-icon-btn:active,.row-btn:active{transform:scale(.97)}

/* ============ 4. Header ============ */
.top{position:sticky;top:12px;margin:12px 12px 0;height:56px;padding:0 10px 0 8px;border-radius:18px;color:var(--ink);z-index:40}
.icon{width:38px;height:38px;display:grid;place-items:center;padding:0;margin:0 6px 0 0;border-radius:12px;color:var(--ink);font-size:0}
.icon:hover{background:var(--hover)}
.icon svg,.chapter-nav svg,.search-btn svg{width:18px;height:18px}
.brand{gap:10px;font:600 17px/1 var(--display);letter-spacing:-.02em}
.brand-mark{display:block;flex:none;width:28px;height:28px;border-radius:7px;object-fit:contain;box-shadow:0 4px 14px -4px color-mix(in srgb,var(--g2) 70%,transparent)}
.top-actions{gap:8px}
.search-btn{display:flex;align-items:center;gap:9px;height:38px;min-width:260px;padding:0 8px 0 12px;border:1px solid var(--line);border-radius:12px;background:color-mix(in srgb,var(--surface) 60%,transparent);color:var(--muted);font-size:14px}
.search-btn:hover{border-color:var(--line-2);color:var(--ink)}
.search-btn kbd{float:none;margin-left:auto;padding:0 7px;border:1px solid var(--line);border-radius:6px;background:var(--hover);color:var(--muted);font:500 11px/20px var(--sans)}
.lang,.reading-width,.seg{display:flex;padding:3px;border:0;border-radius:11px;background:var(--press)}
.lang button,.reading-width button,.seg button{padding:7px 11px;border:0;border-radius:8px;background:transparent;color:var(--muted);font:600 12px/1 var(--sans);cursor:pointer}
.lang button.active,.reading-width button.active,.seg button.active{background:var(--surface);color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.12)}
body.dark .lang button.active,body.dark .reading-width button.active,body.dark .seg button.active{background:var(--raised)}
#theme svg{transition:transform var(--t-slow) var(--spring)}
body.dark #theme svg{transform:rotate(180deg)}
.sb-progress{position:absolute;left:18px;right:18px;bottom:-1px;height:2px;border-radius:2px;overflow:hidden;pointer-events:none}
.sb-progress i{display:block;height:100%;background:var(--gemini);transform-origin:left;transform:scaleX(var(--p,0))}

/* ============ 5. Layout: animated columns ============ */
.shell{display:grid;grid-template-columns:var(--nav-w) minmax(0,1fr) var(--notes-w);min-height:calc(100vh - var(--top));transition:grid-template-columns var(--t-slow) var(--ease)}
.shell.nav-hidden{grid-template-columns:0px minmax(0,1fr) var(--notes-w)}
.shell.notes-hidden{grid-template-columns:var(--nav-w) minmax(0,1fr) 0px}
.shell.nav-hidden.notes-hidden{grid-template-columns:0px minmax(0,1fr) 0px}
.sidebar,.notes{position:sticky;top:var(--top);z-index:14;height:calc(100vh - var(--top) - 12px);margin:12px;padding:16px 12px;border-radius:var(--r-xl);overflow:hidden auto;scrollbar-width:none;
  transition:opacity var(--t-base) var(--ease),transform var(--t-slow) var(--ease),visibility 0s}
.sidebar{width:calc(var(--nav-w) - 24px);display:flex;flex-direction:column}
.notes{width:calc(var(--notes-w) - 24px);padding:18px 16px;display:flex;flex-direction:column;gap:14px}
.sidebar::-webkit-scrollbar,.notes::-webkit-scrollbar{display:none}
.shell.nav-hidden .sidebar{visibility:hidden;opacity:0;transform:translateX(-28px);padding:16px 12px;overflow:hidden;transition:opacity var(--t-fast) var(--ease-in),transform var(--t-base) var(--ease-in),visibility 0s var(--t-base)}
.shell.notes-hidden .notes{display:flex;visibility:hidden;opacity:0;transform:translateX(28px);transition:opacity var(--t-fast) var(--ease-in),transform var(--t-base) var(--ease-in),visibility 0s var(--t-base)}
.shell{overflow-x:clip}
main{min-width:0;padding:12px 0 48px}

/* ============ 6. Sidebar ============ */
.side-title{display:none}
.course-group{display:contents}
.course-switch{position:relative;margin:0 0 12px}
.course-current{display:flex;align-items:center;gap:12px;width:100%;padding:10px 12px 10px 10px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface);color:var(--ink);text-align:left;cursor:pointer;box-shadow:0 1px 2px rgba(0,0,0,.04)}
body.dark .course-current{background:var(--raised)}
.course-current:hover{border-color:var(--line-2)}
.course-current>svg{width:16px;height:16px;color:var(--faint);transition:transform var(--t-slow) var(--spring)}
.course-switch.open .course-current{border-color:var(--accent);box-shadow:0 0 0 3px var(--soft)}
.course-text{display:block;flex:1;min-width:0}
.course-text b{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font:600 14px/1.28 var(--display);letter-spacing:-.015em}
.course-text small{display:block;margin-top:3px;color:var(--faint);font:500 12px/1.3 var(--sans);font-variant-numeric:tabular-nums}
.course-glyph{flex:none;width:38px;height:38px;border-radius:12px;display:grid;place-items:center;color:var(--hue);background:color-mix(in srgb,var(--hue) 13%,var(--surface));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--hue) 22%,transparent)}
body.dark .course-glyph{background:color-mix(in srgb,var(--hue) 18%,var(--raised))}
.course-glyph svg{width:20px;height:20px}
.course-glyph i{font:700 15px/1 var(--display);font-style:normal}
.course-progress{height:3px;margin:0 8px 14px;border-radius:3px;background:var(--line);overflow:hidden}
.course-progress i{display:block;height:100%;background:var(--gemini);transform-origin:left;transform:scaleX(var(--p));transition:transform .8s var(--ease)}
.sidebar{overflow:hidden}
#courses{display:flex;flex-direction:column;flex:1;min-height:0}
.topic-list{flex:1;min-height:0;margin:0 -12px -16px;padding:2px 12px 16px;overflow:auto;overscroll-behavior:contain;scrollbar-width:none;-webkit-mask:linear-gradient(transparent,#000 12px,#000 calc(100% - 24px),transparent);mask:linear-gradient(transparent,#000 12px,#000 calc(100% - 24px),transparent)}
.topic-list::-webkit-scrollbar{display:none}
.topic-link{display:flex;gap:10px;width:100%;padding:8px 10px 8px 6px;border:0;border-radius:var(--r-sm);background:transparent;color:var(--muted);text-align:left;font:450 13.5px/1.38 var(--sans);cursor:pointer}
.topic-link:hover{background:var(--hover);color:var(--ink)}
.topic-link span{flex:none;display:grid;place-items:center;min-width:26px;height:20px;border-radius:6px;color:var(--faint);font:600 11px/1 var(--sans);font-variant-numeric:tabular-nums}
.topic-link.active{background:var(--surface);color:var(--ink);font-weight:600;box-shadow:0 1px 2px rgba(0,0,0,.05)}
body.dark .topic-link.active{background:var(--raised)}
.topic-link.active span{color:var(--on-accent);background:var(--accent)}
.topic-link.complete span{color:var(--pine);background:color-mix(in srgb,var(--pine) 14%,transparent)}

/* ============ 7. Course menu ============ */
.course-menu{padding:8px;max-height:min(72vh,600px);overflow:auto;scrollbar-width:thin}
.course-menu-title{padding:8px 12px 6px;color:var(--faint);font:600 11px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase}
.course-menu .course{display:flex;align-items:center;gap:14px;width:100%;margin:0;padding:10px 12px 10px 10px;border:0;border-radius:var(--r-md);background:transparent;color:var(--ink);text-align:left;cursor:pointer;box-shadow:none;font:inherit}
.course-menu .course:before{content:none!important}
.course-menu .course:hover,.course-menu .course:focus-visible{background:var(--hover);outline:0}
.course-menu .course.active{background:var(--soft)}
.course-menu .course-text b{display:block;-webkit-line-clamp:unset;font-size:14.5px}
.course-menu .course.pending{opacity:.62}
.course-ring{flex:none;width:22px;height:22px;border-radius:50%;background:conic-gradient(var(--accent) calc(var(--p)*360deg),var(--line-2) 0);-webkit-mask:radial-gradient(circle 7.5px,transparent 98%,#000);mask:radial-gradient(circle 7.5px,transparent 98%,#000)}
.course-menu>*{opacity:0;transform:translateY(-4px);transition:opacity var(--t-fast) var(--ease-in),transform var(--t-fast) var(--ease-in)}
.course-menu.open>*{opacity:1;transform:none;transition:opacity var(--t-base) var(--ease),transform var(--t-slow) var(--ease)}
.course-menu.open>*:nth-child(2){transition-delay:.02s}.course-menu.open>*:nth-child(3){transition-delay:.04s}.course-menu.open>*:nth-child(4){transition-delay:.06s}.course-menu.open>*:nth-child(5){transition-delay:.08s}.course-menu.open>*:nth-child(n+6){transition-delay:.1s}

/* ============ 8. Chapter toolbar ============ */
.chapter-nav{position:sticky;top:var(--top);z-index:20;display:flex;align-items:center;gap:6px;height:50px;max-width:860px;margin:0 auto 14px;padding:0 8px 0 10px;border-radius:var(--r-md);color:var(--muted);font-size:13px}
.shell.width-compact .chapter-nav{max-width:720px}
.shell.width-wide .chapter-nav{max-width:1100px}
.chapter-nav button{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 12px;border:0;border-radius:10px;background:transparent;color:var(--ink);font:600 13px/1 var(--sans);cursor:pointer}
.chapter-nav button:hover{background:var(--hover)}
#tocBtn>span:last-child{display:inline-flex;transition:transform var(--t-slow) var(--spring)}
#tocBtn[aria-expanded=true]{background:var(--press)}
#tocBtn[aria-expanded=true]>span:last-child{transform:rotate(180deg)}
.complete-top{margin-left:auto!important;border:1px solid var(--line)!important;color:var(--muted)!important}
.complete-top.complete{border-color:color-mix(in srgb,var(--pine) 40%,transparent)!important;background:color-mix(in srgb,var(--pine) 10%,transparent)!important;color:var(--ink)!important}
.complete-top.complete svg{color:var(--pine)}
.bookmark-top{width:34px;padding:0!important;justify-content:center;color:var(--muted)!important;font-size:inherit!important}
.bookmark-top.saved{color:var(--gold)!important}
.bookmark-top.saved svg{animation:pop var(--t-slow) var(--spring)}
.reading-width button{height:28px;padding:0 10px}
.notes-toggle{color:var(--muted)!important}
.notes-toggle.active{background:var(--soft)!important;color:var(--accent)!important}

/* ============ 9. Contents panel ============ */
.toc-panel{top:calc(var(--top) + 58px);left:320px;width:340px;max-height:min(70vh,560px);overflow:auto;scrollbar-width:thin}
@media(min-width:761px){.shell:not(.nav-hidden) .toc-panel>b:first-child,.shell:not(.nav-hidden) .toc-topic{display:none}}
.toc-panel b{display:block;padding:12px 12px 6px;color:var(--faint);font:600 11px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase}
.toc-panel>b:not(:first-child){margin-top:6px;padding-top:14px;border-top:1px solid var(--line)}
@media(min-width:761px){.shell:not(.nav-hidden) .toc-panel>b:nth-of-type(2){margin-top:0;border-top:0}}
.toc-panel button{display:block;width:100%;padding:9px 12px;border:0;border-radius:var(--r-sm);background:transparent;color:var(--muted);text-align:left;font:450 13.5px/1.35 var(--sans);cursor:pointer}
.toc-panel button:hover{background:var(--hover);color:var(--ink)}
.toc-panel .toc-section{position:relative;padding-left:30px!important}
.toc-panel .toc-section:before{content:"";position:absolute;left:14px;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%;background:var(--line-2);transition:background var(--t-base) var(--ease)}
.toc-panel .toc-section.current{background:var(--soft);color:var(--ink);font-weight:600}
.toc-panel .toc-section.current:before{background:var(--accent)}
.toc-topic.current{background:var(--soft)!important;color:var(--ink)!important;font-weight:600}
.toc-bookmark:before{content:none}
.toc-panel>div{padding:2px 12px 10px;color:var(--faint);font-size:13px}

/* ============ 10. Reading sheet & typography ============ */
article{position:relative;max-width:860px;min-height:calc(100vh - var(--top) - 90px);margin:0 auto;padding:56px clamp(28px,5%,56px) 96px;border-radius:var(--r-xl);background:var(--surface);box-shadow:var(--shadow-2);overflow:clip}
.shell.width-compact article{max-width:720px}
.shell.width-wide article{max-width:1100px}
article:before{content:"";position:absolute;inset:0 0 auto;height:240px;pointer-events:none;background:radial-gradient(60% 100% at 18% 0,color-mix(in srgb,var(--g1) 9%,transparent),transparent 70%),radial-gradient(50% 90% at 86% 0,color-mix(in srgb,var(--g3) 7%,transparent),transparent 70%)}
article>*{position:relative}
.eyebrow{display:block;color:var(--muted);font:600 12.5px/1.4 var(--sans);letter-spacing:0;text-transform:none}
#reader>.eyebrow>.bilingual>.primary:before{content:"";display:inline-block;width:18px;height:2px;margin-right:9px;border-radius:2px;background:var(--gemini);vertical-align:.3em}
.demo{margin-left:8px;padding:3px 8px;border-radius:99px;background:color-mix(in srgb,var(--gold) 14%,transparent);color:var(--gold);font-weight:600}
h1{margin:18px 0 22px;font:700 clamp(1.85rem,2.8vw,2.5rem)/1.12 var(--display);letter-spacing:-.035em;text-wrap:balance;color:var(--ink)}
.lead{position:relative;max-width:36em;margin:0 0 48px;padding:2px 0 2px 20px;border:0;color:var(--muted);font:400 1.12rem/1.5 var(--display);letter-spacing:-.02em;text-wrap:pretty}
.lead:before{content:"";position:absolute;left:0;top:5px;bottom:5px;width:3px;border-radius:3px;background:var(--gemini)}
.section-kicker{display:flex;align-items:flex-start;flex-wrap:wrap;gap:0 12px;margin:64px 0 22px;color:var(--ink);font:600 12px/1.2 var(--sans);letter-spacing:.06em;text-transform:uppercase}
.section-kicker:before{content:"";flex:none;width:6px;height:6px;margin-top:3px;border-radius:50%;background:var(--accent)}
.section-kicker>.bilingual{display:contents}
.section-kicker>.bilingual>.primary{order:0}
.section-kicker:after{content:"";order:1;flex:1;min-width:40px;height:1px;margin-top:6px;background:linear-gradient(90deg,var(--line-2),transparent)}
.section-kicker>.bilingual>.translate{order:2;margin:-5px 0 0}
.section-kicker>.bilingual>.translation{order:3;flex:0 0 100%;margin:6px 0 0 18px!important}

/* ============ 11. Blocks ============ */
.block{position:relative;margin:26px 0;color:var(--ink);font:400 1.14rem/1.72 var(--serif);letter-spacing:0;text-wrap:pretty}
.block.selectable{border-radius:var(--r-sm);cursor:default;transition:background-color var(--t-base) var(--ease),box-shadow var(--t-base) var(--ease)}
.block.selected{background:var(--soft);box-shadow:0 0 0 10px var(--soft)}
.block.selected:is(.learning-card,.aside,.example,.connection,.exercise,.formula,.visual,[class*=-lab],[class*=-map]){box-shadow:0 0 0 2px var(--accent)}
#reader>.block.selected:not(.learning-card,.aside,.example,.connection,.exercise,.formula,.visual,[class*=-lab],[class*=-map]):before{content:"";position:absolute;left:-10px;top:-10px;bottom:-10px;width:3px;border-radius:3px 0 0 3px;background:var(--accent)}
.bilingual-block>.primary>:first-child,.translation>:first-child,.answer>:first-child{margin-top:0}
.bilingual-block>.primary>:last-child,.translation>:last-child,.answer .primary>:last-child{margin-bottom:0}
.katex{color:inherit}
.note-pin{position:absolute;left:-46px;top:2px;width:26px;height:26px;display:grid;place-items:center;border:0;border-radius:8px;background:color-mix(in srgb,var(--gold) 16%,transparent);color:var(--gold);cursor:pointer;animation:pop var(--t-slow) var(--spring)}
.note-pin svg{width:14px;height:14px}
.note-pin:hover{background:color-mix(in srgb,var(--gold) 26%,transparent)}

/* ============ 12. Translations ============ */
.translate{display:inline-flex;align-items:center;gap:4px;height:22px;margin-left:6px;padding:0 7px;border:0;border-radius:7px;background:transparent;color:var(--faint);font:600 10.5px/1 var(--sans);letter-spacing:.04em;vertical-align:middle;cursor:pointer;opacity:0}
.translate svg{width:13px;height:13px}
.translate:hover{background:var(--soft);color:var(--accent)}
.bilingual:hover>.translate,.block:hover .translate,h1:hover .translate,.translate:focus-visible,.show-translation>.translate,.block.selected .translate,.bilingual-block>.translate{opacity:1}
.bilingual-block>.translate{opacity:.45}
.block:hover .bilingual-block>.translate{opacity:1}
.show-translation>.translate{background:var(--soft);color:var(--accent);opacity:1}
@media(hover:none){.translate{opacity:.7}}
.bilingual-block{position:relative}
.bilingual-block>.translate{display:inline-flex;margin:8px 0 0}
@media(min-width:900px){#reader>.block:not(.learning-card,.aside,.example,.connection,.exercise)>.bilingual-block>.translate{position:absolute;top:3px;right:-52px;flex-direction:column;justify-content:center;gap:2px;width:34px;height:40px;margin:0;padding:0}}
.translation{display:none;position:relative;margin-top:12px;padding:12px 16px;border:0;border-radius:var(--r-sm);background:var(--hover);color:var(--muted);font:400 .93rem/1.6 var(--sans);letter-spacing:-.005em;text-align:left;text-transform:none;animation:rise var(--t-base) var(--ease)}
.show-translation>.translation,.bilingual.show-translation>.translation{display:block}
.translation:before{content:"EN";display:table;margin:0 0 7px;padding:2px 6px;border-radius:5px;background:var(--soft);color:var(--accent);font:700 9.5px/1.4 var(--sans);letter-spacing:.08em}
html[lang=en] .translation:before{content:"RU"}
.bilingual-inline>.translation{margin:.6em 0 0;padding:0;border-radius:0;background:none;font:400 15px/1.45 var(--sans);letter-spacing:-.01em;color:var(--muted)}
.bilingual-inline>.translation:before{display:inline-block;margin:0 8px 0 0;vertical-align:2px}
h1 .bilingual-inline>.translation{margin-top:.75em;font:500 clamp(17px,1.5vw,20px)/1.4 var(--display);letter-spacing:-.02em}
h1 .bilingual-inline>.translate{vertical-align:.35em}
.lead .bilingual-inline>.translation{margin-top:.8em;font-size:16px}
.section-kicker .bilingual-inline>.translation,.label .bilingual-inline>.translation,.eyebrow .bilingual-inline>.translation{margin-top:.5em;font-size:13px;font-weight:500;letter-spacing:0}

/* ============ 13. Callouts ============ */
:root{
  --i-info: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 11v5M12 7.6v.1'/%3E%3C/svg%3E");
  --i-bulb: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 0 0-3.5 10.9c.6.5 1 1.2 1 2.1h5c0-.9.4-1.6 1-2.1A6 6 0 0 0 12 3z'/%3E%3C/svg%3E");
  --i-book: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 5.5A2.5 2.5 0 0 1 6.5 3H20v15H6.5A2.5 2.5 0 0 0 4 20.5zM4 20.5A2.5 2.5 0 0 0 6.5 21H20'/%3E%3C/svg%3E");
  --i-warn: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 3.5 2.8 19.5h18.4zM12 10v4M12 17v.1'/%3E%3C/svg%3E");
  --i-flag: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='M5 21V4h11l-2 4 2 4H5'/%3E%3C/svg%3E");
  --i-flask: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 3h6M10 3v6L4.5 18.5A1.7 1.7 0 0 0 6 21h12a1.7 1.7 0 0 0 1.5-2.5L14 9V3M7.5 15h9'/%3E%3C/svg%3E");
  --i-link: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='M10 14a4.5 4.5 0 0 0 6.4 0l3-3a4.5 4.5 0 0 0-6.4-6.4l-1 1M14 10a4.5 4.5 0 0 0-6.4 0l-3 3a4.5 4.5 0 0 0 6.4 6.4l1-1'/%3E%3C/svg%3E");
  --i-pen: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 20h9M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4z'/%3E%3C/svg%3E");
  --i-chev: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.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}
.aside,.example,.connection,.learning-card{--tone:var(--def);--icon:var(--i-info);position:relative;margin:30px 0;padding:16px 20px 16px 22px;border:0;border-radius:var(--r-md);background:color-mix(in srgb,var(--tone) 8%,var(--surface));font:400 .98rem/1.65 var(--sans);letter-spacing:-.005em;overflow:hidden}
body.dark .aside,body.dark .example,body.dark .connection,body.dark .learning-card{background:color-mix(in srgb,var(--tone) 10%,var(--surface))}
.aside:before,.example:before,.connection:before,.learning-card:before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--tone)}
.learning-card.recap,.example{--tone:var(--gold)}
.learning-card.recap{--icon:var(--i-flag)}
.example{--icon:var(--i-flask)}
.learning-card.definition{--tone:var(--def);--icon:var(--i-book)}
.learning-card.intuition{--tone:var(--iris);--icon:var(--i-bulb)}
.learning-card.pitfall{--tone:var(--love);--icon:var(--i-warn)}
.connection{--tone:var(--pine);--icon:var(--i-link)}
.aside .label,.example .label,.connection .label,.learning-card .label{display:flex;align-items:flex-start;flex-wrap:wrap;gap:7px;margin:0 0 6px;padding-right:56px;color:var(--tone);font:600 13px/1.3 var(--sans);letter-spacing:-.005em;text-transform:none}
.aside .label:before,.example .label:before,.connection .label:before,.learning-card .label:before{content:"";flex:none;width:16px;height:16px;margin-top:1px;background:currentColor;-webkit-mask:var(--icon) center/contain no-repeat;mask:var(--icon) center/contain no-repeat}
.aside>.bilingual-block,.example>.bilingual-block,.connection>.bilingual-block,.learning-card>.bilingual-block{position:static}
.aside>.bilingual-block>.translate,.example>.bilingual-block>.translate,.connection>.bilingual-block>.translate,.learning-card>.bilingual-block>.translate{position:absolute;top:12px;right:12px;margin:0}
.learning-card:not(:has(>.label)),.aside:not(:has(>.label)),.example:not(:has(>.label)),.connection:not(:has(>.label)){padding-right:64px}
.aside .translation,.example .translation,.connection .translation,.learning-card .translation{background:color-mix(in srgb,var(--tone) 8%,transparent)}
.learning-card p:first-of-type,.example p:first-of-type{margin-top:0}
.learning-card p:last-child,.example p:last-child{margin-bottom:0}

/* ============ 14. Formula ============ */
.formula{position:relative;margin:44px -24px;padding:34px 24px 22px;border:1px solid var(--line);border-radius:var(--r-lg);background:radial-gradient(70% 120% at 50% 0,color-mix(in srgb,var(--g2) 7%,transparent),transparent 70%),color-mix(in srgb,var(--ink) 2%,var(--surface));font-size:1.4rem;text-align:center;overflow:auto}
.formula:after{content:"";position:absolute;left:20%;right:20%;top:-1px;height:1px;background:var(--gemini);opacity:.7}
.formula-caption{margin-top:14px;color:var(--faint);font:500 12px/1.5 var(--sans)}
.katex-display{margin:.35em 0!important}

/* ============ 15. Exercises ============ */
.exercise{display:block;position:relative;padding:22px 24px 24px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface);font-family:var(--sans);box-shadow:0 1px 2px rgba(0,0,0,.03)}
body.dark .exercise{background:var(--raised)}
.exercise-title{display:flex;align-items:center;gap:8px;margin:0 0 10px;padding-right:56px;color:var(--muted);font:600 12px/1 var(--sans);letter-spacing:.07em;text-transform:uppercase}
.exercise-title:before{content:"";width:16px;height:16px;background:var(--accent);-webkit-mask:var(--i-pen) center/contain no-repeat;mask:var(--i-pen) center/contain no-repeat}
.exercise>.bilingual-block{position:static}
.exercise>.bilingual-block>.translate{position:absolute;top:14px;right:14px;margin:0}
.exercise>div:not([class]){display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.exercise>div:not([class])>.reveal{order:1;margin:0}
.exercise>div:not([class])>.answer{order:2;flex:0 0 100%;margin:4px 0 0}
.reveal{display:inline-flex;align-items:center;gap:7px;margin:0;padding:10px 16px;border:1px solid var(--line-2);border-radius:999px;background:transparent;color:var(--ink);font:600 13px/1 var(--sans);cursor:pointer}
.reveal:hover{background:var(--hover)}
.reveal:after{content:"";width:12px;height:12px;background:currentColor;opacity:.55;-webkit-mask:var(--i-chev) center/contain no-repeat;mask:var(--i-chev) center/contain no-repeat;transition:transform var(--t-slow) var(--spring)}
.reveal[aria-expanded=true]{border-color:var(--ink);background:var(--ink);color:var(--surface)}
.reveal[aria-expanded=true]:after{transform:rotate(180deg);opacity:.8}
.answer{display:none;position:relative;padding:14px 60px 16px 18px;border-radius:var(--r-sm);background:var(--hover);font-size:1rem}
.answer.open{display:block;animation:rise var(--t-base) var(--ease)}
.answer[data-title]:before{content:attr(data-title);display:block;margin-bottom:6px;color:var(--faint);font:600 11px/1.3 var(--sans);letter-spacing:.07em;text-transform:uppercase}
.answer>.bilingual-block{position:static}
.answer>.bilingual-block>.translate{position:absolute;top:10px;right:10px;margin:0}
.sources{margin-top:54px;padding-top:25px;border-top:1px solid var(--line);color:var(--muted);font:400 .88rem/1.6 var(--sans)}
.sources a{color:var(--accent);font-weight:600;text-decoration:none}
.sources a:hover{text-decoration:underline;text-underline-offset:3px}

/* ============ 16. Labs ============ */
.visual,.relation-map,.hasse-map,.lattice-lab,.complexity-lab,.closure-lab,.fca-context-lab,.variance-lab{position:relative;isolation:isolate;overflow:hidden;border:1px solid var(--line);border-radius:26px;box-shadow:var(--shadow-2);
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,-40%),color-mix(in srgb,var(--g2) 9%,transparent),transparent 60%),var(--surface)}
body.dark :is(.relation-map,.hasse-map,.lattice-lab,.complexity-lab,.closure-lab,.fca-context-lab,.variance-lab){background:radial-gradient(420px circle at var(--mx,50%) var(--my,-40%),color-mix(in srgb,var(--g2) 10%,transparent),transparent 60%),var(--raised)}
:is(.visual,.relation-map,.hasse-map,.lattice-lab,.complexity-lab,.closure-lab,.fca-context-lab,.variance-lab) h2{font:700 1.3rem/1.25 var(--display);letter-spacing:-.025em}
:is(.visual,.relation-map,.hasse-map,.lattice-lab,.complexity-lab,.closure-lab,.fca-context-lab,.variance-lab):before{content:"";position:absolute;inset:0;z-index:1;padding:1px;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity var(--t-slow) var(--ease);
  background:radial-gradient(300px circle at var(--mx,50%) var(--my,-40%),var(--g1),color-mix(in srgb,var(--g3) 60%,transparent) 40%,transparent 70%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
:is(.visual,.relation-map,.hasse-map,.lattice-lab,.complexity-lab,.closure-lab,.fca-context-lab,.variance-lab):hover:before{opacity:1}
.visual{color:#f5f5f7;border-color:rgba(255,255,255,.08);background:radial-gradient(480px circle at var(--mx,50%) var(--my,-40%),rgba(155,114,203,.22),transparent 60%),radial-gradient(80% 60% at 0 0,rgba(66,133,244,.22),transparent 60%),radial-gradient(70% 60% at 100% 100%,rgba(217,101,112,.16),transparent 60%),#0b0d14}
body.dark .visual{color:var(--ink);background:radial-gradient(480px circle at var(--mx,50%) var(--my,-40%),rgba(196,167,231,.16),transparent 60%),radial-gradient(80% 60% at 0 0,rgba(156,207,216,.12),transparent 60%),radial-gradient(70% 60% at 100% 100%,rgba(235,188,186,.10),transparent 60%),#16141f}
.visual-intro,.visual-control label,.visual-legend,.visual-result span{color:rgba(245,245,247,.62)}
body.dark :is(.visual-intro,.visual-control label,.visual-legend,.visual-result span){color:var(--muted)}
.person{background:rgba(255,255,255,.14);transition:background-color var(--t-slow) var(--ease),box-shadow var(--t-slow) var(--ease),transform var(--t-slow) var(--spring)}
.person.sick,.legend-dot.sick{background:#f28b82}
.person.sick{transform:scale(1.08)}
.person.positive{box-shadow:0 0 0 2px #8ab4ff,0 0 10px rgba(138,180,255,.5)}
.person.sick.positive{background:#fdd663}
body.dark .person.sick,body.dark .legend-dot.sick{background:#eb6f92}
body.dark .person.positive{box-shadow:0 0 0 2px #9ccfd8,0 0 10px rgba(156,207,216,.45)}
body.dark .person.sick.positive{background:#f6c177}
.legend-dot{background:rgba(255,255,255,.2)}
.legend-dot.positive{background:rgba(255,255,255,.2);box-shadow:0 0 0 2px #8ab4ff}
.visual-result{border-top:1px solid rgba(255,255,255,.1)}
.visual-result strong{font:700 2.8rem/1 var(--display);letter-spacing:-.04em;background:linear-gradient(100deg,#8ab4ff,#c7a3f5 55%,#f5a3a9);-webkit-background-clip:text;background-clip:text;color:transparent}
body.dark .visual-result strong{background-image:linear-gradient(100deg,#9ccfd8,#c4a7e7 55%,#ebbcba)}
.visual .translation{background:rgba(255,255,255,.06);color:rgba(245,245,247,.72)}
.relation-graph,.hasse-graph,.lattice-graph{border-radius:var(--r-md);background:var(--hover)}
:is(.relation-pairs,.hasse-explain,.lattice-prompt,.lattice-result>div,.lattice-result>p,.complexity-note,.fca-workbench,.variance-result,.closure-state){border-radius:14px;background:var(--hover)}
:is(.matrix-cell,.hasse-mode,.hasse-paths button,.closure-seeds button,.closure-actions button,.fca-presets button){border-radius:10px;transition:transform var(--t-base) var(--spring),background-color var(--t-fast),border-color var(--t-fast)}
:is(.matrix-cell.on,.hasse-mode.active,.hasse-paths button.active,.closure-seeds button.active,.fca-presets button.active,.closure-state span.in){background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.lattice-node.selected circle{fill:var(--accent);stroke:var(--accent)}
.lattice-node.selected text{fill:var(--on-accent)}
.complexity-row i,.variance-bars i{border-radius:999px;background:var(--gemini);transition:width var(--t-slow) var(--ease)}
.variance-bars>div:nth-child(2) i{background:linear-gradient(90deg,var(--gold),var(--love))}
#reader input[type=range]{-webkit-appearance:none;appearance:none;height:22px;background:transparent;cursor:pointer}
#reader input[type=range]::-webkit-slider-runnable-track{height:4px;border-radius:4px;background:color-mix(in srgb,currentColor 18%,transparent)}
#reader input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;margin-top:-8px;border-radius:50%;background:#fff;box-shadow:0 0 0 .5px rgba(0,0,0,.08),0 2px 8px rgba(0,0,0,.22);transition:transform var(--t-base) var(--spring)}
#reader input[type=range]:active::-webkit-slider-thumb{transform:scale(1.18)}
#reader input[type=range]::-moz-range-track{height:4px;border-radius:4px;background:color-mix(in srgb,currentColor 18%,transparent)}
#reader input[type=range]::-moz-range-thumb{width:20px;height:20px;border:0;border-radius:50%;background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.22)}
.table-scroll{border-radius:14px}
.table-scroll th{background:var(--hover);font-weight:600}

/* ============ 17. Notes ============ */
.notes-head,#noteAnchor{display:none!important}
.np-head{display:flex;align-items:center;gap:10px;padding:2px 2px 0}
.np-head h2{margin:0;font:700 19px/1.2 var(--display);letter-spacing:-.025em}
.np-count{min-width:22px;height:22px;padding:0 7px;border-radius:11px;background:var(--press);color:var(--muted);font:600 12px/22px var(--sans);text-align:center;font-variant-numeric:tabular-nums}
.np-icon-btn{margin-left:auto;width:32px;height:32px;display:grid;place-items:center;border:0;border-radius:10px;background:transparent;color:var(--muted);cursor:pointer}
.np-icon-btn:hover{background:var(--hover);color:var(--ink)}
.np-icon-btn svg{width:17px;height:17px}
.np-composer{position:relative;padding:12px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);box-shadow:var(--shadow-1);transition:border-color var(--t-base) var(--ease),box-shadow var(--t-base) var(--ease)}
body.dark .np-composer{background:var(--raised)}
.np-composer:focus-within{border-color:color-mix(in srgb,var(--accent) 55%,transparent);box-shadow:0 0 0 4px var(--soft),var(--shadow-1)}
.np-quote{position:relative;padding:8px 12px 8px 14px;border-radius:10px;background:var(--soft);overflow:hidden;animation:rise var(--t-base) var(--ease)}
.np-quote:before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--accent)}
.np-quote b{display:block;margin-bottom:2px;color:var(--accent);font:600 12px/1.3 var(--sans)}
.np-quote span{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;color:var(--ink);font:400 13px/1.45 var(--sans)}
.np-composer.empty{padding:10px 12px;border-style:dashed;background:transparent;box-shadow:none}
.np-empty{display:flex;gap:8px;align-items:center;margin:0;color:var(--faint);font:450 13px/1.35 var(--sans)}
.np-empty svg{flex:none;width:15px;height:15px}
.np-composer textarea{display:block;width:100%;height:auto;min-height:96px;max-height:40vh;margin:10px 0 0;padding:4px 2px;border:0;border-radius:0;background:transparent;color:var(--ink);font:400 14.5px/1.55 var(--sans);resize:none;outline:0;box-shadow:none}
.np-composer.empty textarea{display:none}
.np-foot{display:flex;align-items:center;gap:8px;margin-top:8px;padding-top:10px;border-top:1px solid var(--line)}
.np-composer.empty .np-foot{display:none}
#noteStatus{display:flex;align-items:center;gap:6px;margin:0;color:var(--faint);font:500 11.5px/1.3 var(--sans)}
#noteStatus:before{content:"";width:6px;height:6px;border-radius:50%;background:var(--line-2);transition:background-color var(--t-base) var(--ease)}
.np-composer.saved #noteStatus:before{background:#34c759;animation:pop var(--t-slow) var(--spring)}
.np-delete{margin-left:auto;padding:5px 9px;border:0;border-radius:8px;background:transparent;color:var(--faint);font:600 12px/1 var(--sans);cursor:pointer;transition:background-color var(--t-fast),color var(--t-fast)}
.np-delete:hover{background:color-mix(in srgb,var(--love) 12%,transparent);color:var(--love)}
.np-delete[hidden]{display:none}
.np-section-title{margin:6px 2px 0;color:var(--faint);font:600 11px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase}
.np-list{display:flex;flex-direction:column;gap:8px}
.np-card{display:block;width:100%;padding:11px 12px;border:1px solid var(--line);border-radius:var(--r-md);background:color-mix(in srgb,var(--surface) 70%,transparent);color:var(--ink);text-align:left;cursor:pointer;animation:rise var(--t-base) var(--ease) both}
body.dark .np-card{background:color-mix(in srgb,var(--raised) 70%,transparent)}
.np-card:hover{border-color:var(--line-2);box-shadow:var(--shadow-1)}
.np-card.current{border-color:color-mix(in srgb,var(--accent) 45%,transparent);background:var(--soft)}
.np-card small{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;padding-left:9px;border-left:2px solid var(--line-2);color:var(--faint);font:400 12px/1.4 var(--sans)}
.np-card span{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;margin-top:6px;font:400 13.5px/1.45 var(--sans);white-space:pre-line}
.np-none{margin:0;padding:10px 2px;color:var(--faint);font:400 13px/1.45 var(--sans)}
.bookmarks{margin:4px 0 0;padding:14px 2px 0;border-top:1px solid var(--line);color:var(--faint);font-size:13px}
.bookmarks b{display:block;margin-bottom:8px;color:var(--faint);font:600 11px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase}
.bookmark-item{display:flex;align-items:center;gap:8px;width:calc(100% + 16px);margin:0 -8px;padding:8px;border:0;border-radius:10px;background:transparent;color:var(--ink);text-align:left;font:500 13px/1.35 var(--sans);cursor:pointer}
.bookmark-item:before{content:"";flex:none;width:14px;height:14px;margin:0;background:var(--gold);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m12 3.8 2.5 5.1 5.6.8-4 4 .9 5.6-5-2.7-5 2.7.9-5.6-4-4 5.6-.8z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m12 3.8 2.5 5.1 5.6.8-4 4 .9 5.6-5-2.7-5 2.7.9-5.6-4-4 5.6-.8z'/%3E%3C/svg%3E") center/contain no-repeat}
.bookmark-item:hover{background:var(--hover)}

/* ============ 18. Search ============ */
dialog{width:min(680px,92vw);margin-top:14vh;padding:0;border-radius:var(--r-lg);color:var(--ink);overflow:hidden}
dialog[open]{animation:pop-in var(--t-slow) var(--spring)}
dialog::backdrop{background:var(--scrim);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);animation:fade var(--t-base) var(--ease)}
.search-input{position:relative;display:flex;align-items:center;gap:10px;padding:18px 20px;border-bottom:1px solid var(--line)}
.search-input:after{content:"";position:absolute;left:20px;right:20px;bottom:-1px;height:1px;background:var(--gemini);opacity:.6}
.search-input>span{display:grid;color:var(--faint)}
.search-input svg{width:20px;height:20px}
.search-input input{flex:1;border:0;outline:0;background:transparent;color:var(--ink);font:400 19px/1.3 var(--display);letter-spacing:-.02em}
.search-input button{padding:5px 7px;border:1px solid var(--line);border-radius:7px;background:var(--hover);color:var(--muted);font:500 11px/1 var(--sans)}
#results{max-height:min(56vh,520px);overflow:auto;padding:8px;scrollbar-width:thin}
#results:empty{display:none}
.result{display:block;width:100%;margin:2px 0;padding:12px 14px;border:0;border-radius:var(--r-sm);background:transparent;color:var(--ink);text-align:left;cursor:pointer}
.result:hover,.result:focus-visible{background:var(--soft);outline:0}
.result b{display:block;font:600 14.5px/1.35 var(--display);letter-spacing:-.015em}
.result p{margin:4px 0 0}
.result p small{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;color:var(--muted);font:400 13px/1.5 var(--sans)}
.result mark{padding:0 1px;border-radius:3px;background:color-mix(in srgb,var(--g2) 24%,transparent);color:var(--ink)}
.result.same-topic{margin-top:-4px;padding-top:6px}
.result.same-topic>b{display:none}
.result:not(.same-topic):not(:first-child){margin-top:10px}
.result:not(.same-topic):not(:first-child):before{content:"";display:block;height:1px;margin:-12px -14px 12px;background:var(--line)}

.loading{display:flex;align-items:center;gap:10px;color:var(--faint);font:500 14px var(--sans)}
.loading:before{content:"";width:16px;height:16px;border-radius:50%;background:conic-gradient(from 0deg,transparent,var(--g1),var(--g2),var(--g3));-webkit-mask:radial-gradient(circle 6px,transparent 98%,#000);mask:radial-gradient(circle 6px,transparent 98%,#000);animation:spin 1s linear infinite}
.empty b{font:700 2rem var(--display);letter-spacing:-.03em}

/* ============ 19. Keyframes & entrance ============ */
@keyframes rise{from{opacity:0;transform:translateY(8px)}}
@keyframes fade{from{opacity:0}}
@keyframes pop{0%{transform:scale(.6)}}
@keyframes pop-in{from{opacity:0;transform:translateY(-8px) scale(.97)}}
@keyframes spin{to{transform:rotate(360deg)}}
.motion #reader>.eyebrow,.motion #reader>h1,.motion #reader>.lead{animation:rise var(--t-slow) var(--ease) both}
.motion #reader>h1{animation-delay:.05s}
.motion #reader>.lead{animation-delay:.1s}
.motion .sb-reveal{opacity:0;transform:translateY(14px);transition:opacity var(--t-slow) var(--ease),transform var(--t-slow) var(--ease)}
.motion .sb-reveal.in{opacity:1;transform:none}
::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}
::view-transition-new(root){clip-path:circle(0 at var(--vt-x,100%) var(--vt-y,0));animation:theme-reveal .6s var(--ease) forwards}
@keyframes theme-reveal{to{clip-path:circle(var(--vt-r,150vmax) at var(--vt-x,100%) var(--vt-y,0))}}

/* ============ 20. Tablet: notes as a drawer ============ */
.sheet-scrim{position:fixed;inset:0;z-index:55;background:var(--scrim);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);opacity:0;visibility:hidden;transition:opacity var(--t-base) var(--ease),visibility 0s var(--t-base)}
.sheet-scrim.on{opacity:1;visibility:visible;transition:opacity var(--t-base) var(--ease),visibility 0s}
.tabbar,.more-sheet{display:none}
@media(max-width:1180px){
  :root{--nav-w:280px}
  .shell,.shell.notes-hidden{grid-template-columns:var(--nav-w) minmax(0,1fr) 0px}
  .shell.nav-hidden,.shell.nav-hidden.notes-hidden{grid-template-columns:0px minmax(0,1fr) 0px}
  main{padding-right:12px}
  .notes,.shell.notes-hidden .notes{position:fixed;right:0;top:var(--top);z-index:58;display:flex;width:min(360px,calc(100vw - 24px));height:calc(100dvh - var(--top) - 12px);background:var(--glass-solid);box-shadow:var(--shadow-3);
    visibility:hidden;opacity:0;transform:translateX(24px);transition:opacity var(--t-fast) var(--ease-in),transform var(--t-base) var(--ease-in),visibility 0s var(--t-base)}
  body.notes-open .notes{visibility:visible;opacity:1;transform:none;transition:opacity var(--t-base) var(--ease),transform var(--t-slow) var(--ease),visibility 0s}
  .reading-width{display:none}
}

/* ============ 21. Phone: tab bar + bottom sheets ============ */
@media(max-width:760px){
  :root{--top:68px}
  html{scroll-padding-top:90px}
  .top{top:8px;margin:8px 8px 0;height:52px}
  #menu,.top .search-btn,.top .lang,.chapter-nav{display:none!important}
  .top-actions{gap:4px}
  .brand{font-size:17px}
  .shell,.shell.nav-hidden,.shell.notes-hidden,.shell.nav-hidden.notes-hidden{display:block}
  main{padding:8px 8px calc(96px + env(safe-area-inset-bottom))}
  article{padding:36px 22px 72px;border-radius:var(--r-lg)}
  h1{font-size:clamp(2rem,9vw,2.5rem)}
  .lead{margin-bottom:40px;padding-left:16px;font-size:1.08rem}
  .block{font-size:1.06rem}
  .formula{margin-left:-8px;margin-right:-8px;font-size:1.1rem}
  :is(.visual,.relation-map,.hasse-map,.lattice-lab,.complexity-lab,.closure-lab,.fca-context-lab,.variance-lab){margin-left:-12px;margin-right:-12px;padding:22px 16px}
  .learning-card:not(:has(>.label)),.aside:not(:has(>.label)),.example:not(:has(>.label)),.connection:not(:has(>.label)){padding-right:48px}
  .translate span{display:none}
  .note-pin{left:auto;right:-14px;top:-14px;width:24px;height:24px}

  /* Sheets share one geometry and one motion */
  .sidebar,.toc-panel,.notes,.shell.nav-hidden .sidebar,.shell.notes-hidden .notes,.more-sheet{
    position:fixed;left:8px;right:8px;top:auto;bottom:calc(8px + env(safe-area-inset-bottom));z-index:58;display:flex;flex-direction:column;width:auto;height:auto;max-height:min(82dvh,720px);margin:0;padding:10px 14px 18px;
    border-radius:var(--r-xl);background:var(--glass-solid);box-shadow:var(--shadow-3);overflow:hidden auto;
    visibility:hidden;opacity:1;pointer-events:none;transform:translateY(calc(100% + 24px));transform-origin:bottom center;
    transition:transform var(--t-base) var(--ease-in),visibility 0s var(--t-base)}
  .sidebar.open,.toc-panel.open,body.notes-open .notes,.more-sheet.open{visibility:visible;pointer-events:auto;transform:none;transition:transform var(--t-slow) var(--ease),visibility 0s}
  .sidebar:before,.toc-panel:before,.notes:before,.more-sheet:before{content:"";flex:none;display:block;width:38px;height:5px;margin:0 auto 12px;border-radius:3px;background:var(--line-2)}
  .toc-panel{padding-top:10px}
  .toc-panel>*{opacity:1;transform:none}
  .course-menu{left:12px!important;right:12px;width:auto!important;top:auto!important;bottom:calc(20px + env(safe-area-inset-bottom));max-height:70dvh;transform-origin:bottom center;transform:translateY(12px) scale(.98)}
  .course-menu.open{z-index:70}

  .tabbar{position:fixed;left:8px;right:8px;bottom:calc(8px + env(safe-area-inset-bottom));z-index:50;display:grid;grid-template-columns:repeat(5,1fr);height:62px;padding:6px;border-radius:22px;transition:transform var(--t-slow) var(--ease),opacity var(--t-base) var(--ease)}
  body.sheet-active .tabbar{transform:translateY(12px);opacity:0;pointer-events:none}
  .tab{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;border:0;border-radius:16px;background:transparent;color:var(--muted);font:600 10.5px/1 var(--sans);cursor:pointer;position:relative}
  .tab svg{width:22px;height:22px}
  .tab.on{color:var(--accent);background:var(--soft)}
  .tab b{position:absolute;top:6px;left:calc(50% + 6px);min-width:16px;height:16px;padding:0 4px;border-radius:8px;background:var(--accent);color:var(--on-accent);font:700 10px/16px var(--sans)}
  .tab b:empty{display:none}

  .more-sheet{gap:14px}
  .more-sheet h3{margin:0 2px;font:700 19px/1.2 var(--display);letter-spacing:-.025em}
  .row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;border-radius:var(--r-md);background:var(--hover)}
  .row>span{font:500 15px/1.3 var(--sans)}
  .row-btn{display:flex;align-items:center;gap:12px;width:100%;padding:14px;border:0;border-radius:var(--r-md);background:var(--hover);color:var(--ink);font:500 15px/1.3 var(--sans);text-align:left;cursor:pointer}
  .row-btn svg{width:20px;height:20px;color:var(--muted)}
  .row-btn.on svg{color:var(--pine)}
  .row-btn.star.on svg{color:var(--gold)}
  .seg button{padding:8px 14px;font-size:13px}
}

/* ============ 22. Reduced motion ============ */
@media(prefers-reduced-motion:reduce){
  *,*:before,*:after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .motion .sb-reveal{opacity:1;transform:none}
}

/* ============ Boot: no flash before first paint ============ */
html.dark{background:#191724;color-scheme:dark}
html.preload *,html.preload *:before,html.preload *:after{transition:none!important;animation:none!important}
#noteStatus{display:none}

/* ============ Page change ============ */
html{scroll-behavior:auto}
article.page-out{opacity:0;transform:translateY(-8px);transition:opacity .16s var(--ease-in),transform .16s var(--ease-in)}
article.page-in{animation:page-in var(--t-slow) var(--ease) both}
@keyframes page-in{from{opacity:0;transform:translateY(16px)}}
@media(prefers-reduced-motion:reduce){article.page-in,article.page-out{animation:none;transition:none;transform:none;opacity:1}}

/* ============ Scroll ownership ============ */
html{scrollbar-gutter:stable}
html:has(dialog[open]),html:has(body.sheet-active){overflow:hidden}
.notes,.topic-list,.toc-panel,.course-menu,#results,.more-sheet,.sidebar,dialog{overscroll-behavior:contain}