/* ============================================================ My Learning Portal — stylesheet ------------------------------------------------------------ Content files never need to touch this file. Use the documented classes inside topic bodies: .note .warn .ok .danger .tip .analogy .diagram .steps .compare .cards .result-box .file-tag details.acc House rules · Every text size comes from the type scale (--fs-*). A bare px font-size only ever sizes an icon or emoji glyph. · Structure is drawn with 1px borders; shadows are reserved for things that float (drawer, palette, toast). · Numbers use tabular figures so they do not jitter. · Icons are line icons from the sprite in index.html. Emoji only ever come from content (course + analogy icons). Sections 01 Tokens 06 Home 02 Base 07 Topic page + table of contents 03 Top bar 08 Content components (used by topics) 04 Layout 09 Quiz / takeaways / pager / search 05 Sidebar 10 Overlays, toast, responsive, print ============================================================ */ /* ============================================================ 01 · TOKENS ============================================================ */ :root{ /* --- type scale --- */ --fs-micro:11px; /* uppercase labels */ --fs-caption:12px; /* meta, captions */ --fs-ui:13px; /* dense UI text */ --fs-ui-lg:14px; /* default UI text */ --fs-body:16px; /* topic prose */ --fs-lead:17px; /* topic summary */ --fs-h4:16px; --fs-h3:19px; --fs-h2:22px; --fs-h1:28px; --fs-display:34px; --fs-code:13px; /* monospace has its own scale */ --lh-tight:1.25; --lh-snug:1.45; --lh-body:1.7; --fw-med:500; --fw-semi:600; --fw-bold:700; --ls-caps:.09em; /* --- surfaces --- */ --bg:#ffffff; --bg-soft:#f8f9fb; --panel:#ffffff; --panel-2:#f4f5f8; --panel-3:#e9ebf0; --fg:#12161d; --fg-soft:#333b48; --muted:#5b6478; /* 5.9:1 on --bg, 5.4:1 on --panel-2 */ --line:#e2e5ec; --line-soft:#eef0f4; /* --- brand + semantic --- */ --accent:#3557d7; --accent-2:#5a49c9; --accent-ink:#2b47b4; --accent-soft:#eef1fd; --green:#127a45; --green-soft:#e8f6ee; --orange:#a85a08; --orange-soft:#fdf2e3; --red:#b02525; --red-soft:#fdf0f0; --purple:#5b3fc4; --purple-soft:#f1eefc; --yellow:#8a6100; --yellow-soft:#fdf6e3; --dark:#171b22; /* --- elevation (sparingly) --- */ --sh-1:0 1px 2px rgba(16,24,40,.05); --sh-2:0 2px 6px rgba(16,24,40,.07); --sh-3:0 12px 28px rgba(16,24,40,.10); --sh-4:0 24px 60px rgba(16,24,40,.18); --ring:0 0 0 3px rgba(53,87,215,.26); /* --- shape + motion --- */ --r-sm:6px; --r-md:8px; --r-lg:12px; --r-xl:14px; --r-pill:999px; --ease:cubic-bezier(.22,.61,.36,1); --fast:.13s var(--ease); --slow:.26s var(--ease); --mono:ui-monospace,"Cascadia Mono",SFMono-Regular,Consolas,"Liberation Mono",Menlo,monospace; --sans:-apple-system,BlinkMacSystemFont,"Segoe UI Variable Text","Segoe UI",Inter,Roboto, "Nirmala UI","Noto Sans Devanagari",Helvetica,Arial,sans-serif; --topbar-h:60px; --sidebar-w:296px; --rail-w:60px; --nav-w:var(--sidebar-w); /* what the sidebar actually occupies */ --reading:min(76ch,100%); /* --- density: every padding that changes between the two modes --- */ --row-y:6px; /* nav rows */ --pad-main:36px 48px 130px; /* main column */ --pad-hero:26px 28px; /* page header */ --pad-card:18px; /* cards and panels */ --cell-y:10px; /* table cells */ } /* Compact density — tighter type and padding, same layout. Set on before first paint, so nothing reflows on load. */ html[data-density="compact"]{ --fs-caption:11.5px; --fs-ui:12.5px; --fs-ui-lg:13px; --fs-body:15px; --fs-lead:16px; --fs-code:12.5px; --fs-h4:15px; --fs-h3:17.5px; --fs-h2:20px; --fs-h1:25px; --fs-display:29px; --lh-body:1.62; --lh-snug:1.4; --topbar-h:52px; --sidebar-w:266px; --reading:min(82ch,100%); --row-y:3px; --pad-main:24px 34px 96px; --pad-hero:18px 20px; --pad-card:14px; --cell-y:7px; } html[data-theme="dark"]{ --bg:#0d1015; --bg-soft:#11141a; --panel:#151920; --panel-2:#1a1f28; --panel-3:#232a35; --fg:#eaedf3; --fg-soft:#c6cdd9; --muted:#98a2b3; /* 7.0:1 on --bg */ --line:#252b36; --line-soft:#1c212a; --accent:#8ba3ff; --accent-2:#a98efc; --accent-ink:#a8bcff; --accent-soft:#182036; --green:#5cd08a; --green-soft:#10251a; --orange:#f0a35c; --orange-soft:#281d13; --red:#f38a8c; --red-soft:#2a1517; --purple:#ab92fb; --purple-soft:#1e1a2f; --yellow:#e6c14a; --yellow-soft:#262112; --dark:#070a0e; --sh-1:0 1px 2px rgba(0,0,0,.45); --sh-2:0 2px 8px rgba(0,0,0,.45); --sh-3:0 14px 32px rgba(0,0,0,.55); --sh-4:0 26px 68px rgba(0,0,0,.7); --ring:0 0 0 3px rgba(139,163,255,.3); } /* ============================================================ 02 · BASE ============================================================ */ *{box-sizing:border-box} html{scroll-behavior:smooth;scroll-padding-top:calc(var(--topbar-h) + 20px)} body{ margin:0;background:var(--bg);color:var(--fg); font:var(--fs-body)/var(--lh-body) var(--sans); -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility; } body.nav-open,body.palette-open{overflow:hidden} a{color:var(--accent)} h1,h2,h3,h4{letter-spacing:-.015em;font-weight:var(--fw-bold);margin:0} ::selection{background:var(--accent-soft);color:var(--accent-ink)} mark{background:rgba(245,190,60,.42);color:inherit;border-radius:2px;padding:0 2px} button,input{font-family:var(--sans)} :focus-visible{outline:none;box-shadow:var(--ring);border-radius:var(--r-sm)} /* tabular figures — counters must not jitter as they change */ .badge,.course-meta,.stat .v,.ring-wrap b,.crumb,.ccard .foot,.side-foot .txt, .section-head span,.palette-foot,table td,.continue .tx i,.sr span,kbd{ font-variant-numeric:tabular-nums; } /* uppercase micro-label, used for every section/eyebrow label */ .eyebrow,.side-label,.toc .t,.pager small,.continue .tx small,.stat .k,.dtitle{ font-size:var(--fs-micro);font-weight:var(--fw-bold); letter-spacing:var(--ls-caps);text-transform:uppercase; } .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .skip-link{ position:fixed;top:10px;left:10px;z-index:200;transform:translateY(-200%); background:var(--accent);color:#fff;padding:10px 16px;border-radius:var(--r-sm); text-decoration:none;font-weight:var(--fw-bold);font-size:var(--fs-ui-lg);transition:transform var(--fast); } .skip-link:focus{transform:translateY(0)} *{scrollbar-width:thin;scrollbar-color:var(--panel-3) transparent} *::-webkit-scrollbar{width:10px;height:10px} *::-webkit-scrollbar-thumb{background:var(--panel-3);border:3px solid transparent;background-clip:content-box;border-radius:9px} *::-webkit-scrollbar-thumb:hover{background:var(--muted);background-clip:content-box} /* ============================================================ 03 · TOP BAR ============================================================ */ .topbar{ position:sticky;top:0;z-index:60;height:var(--topbar-h); display:flex;align-items:center;gap:14px;padding:0 18px; background:var(--bg); background:color-mix(in srgb,var(--bg) 86%,transparent); -webkit-backdrop-filter:saturate(160%) blur(12px); backdrop-filter:saturate(160%) blur(12px); border-bottom:1px solid var(--line); } .brand{display:flex;align-items:center;gap:10px;min-width:0;text-decoration:none;color:var(--fg)} .brand-mark{ width:32px;height:32px;border-radius:var(--r-md);color:#fff; background:linear-gradient(140deg,var(--accent),var(--accent-2)); display:grid;place-items:center;font-weight:var(--fw-bold);font-size:var(--fs-caption);letter-spacing:.03em; } .brand-text{ font-weight:var(--fw-semi);font-size:var(--fs-ui-lg);line-height:1.2; white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } .brand-text small{ display:block;font-weight:var(--fw-med);font-size:var(--fs-micro);color:var(--muted); letter-spacing:.02em;margin-top:1px; } .topbar-right{display:flex;align-items:center;gap:8px;margin-left:auto} .search-trigger{ flex:0 1 320px;min-width:0;margin-left:12px; display:flex;align-items:center;gap:9px;height:34px;padding:0 7px 0 11px; border:1px solid var(--line);border-radius:var(--r-md);background:var(--panel-2); color:var(--muted);font-size:var(--fs-ui);cursor:pointer;transition:var(--fast); } .search-trigger:hover{border-color:var(--panel-3);background:var(--panel)} .search-trigger span{flex:1;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} kbd{ font:var(--fw-semi) 10.5px/1 var(--sans);color:var(--muted);background:var(--bg); border:1px solid var(--line);border-radius:4px;padding:4px 5px; } .lang-switch{display:flex;background:var(--panel-2);border:1px solid var(--line);border-radius:var(--r-md);padding:2px} .lang-switch button{ border:0;background:none;color:var(--muted);font:inherit;font-size:var(--fs-caption); font-weight:var(--fw-semi);padding:5px 11px;border-radius:var(--r-sm);cursor:pointer;transition:var(--fast); } .lang-switch button:hover{color:var(--fg)} .lang-switch button.on{background:var(--panel);color:var(--fg);box-shadow:var(--sh-1)} .icon-btn{ display:grid;place-items:center;flex:0 0 auto; border:1px solid var(--line);background:var(--panel-2);color:var(--fg-soft); width:34px;height:34px;border-radius:var(--r-md);cursor:pointer;transition:var(--fast); } .icon-btn:hover{background:var(--panel-3);color:var(--fg)} .icon-btn svg{width:17px;height:17px} .menu-toggle{display:none} html[data-theme="dark"] .i-sun{display:none} html:not([data-theme="dark"]) .i-moon{display:none} .read-progress{position:absolute;left:0;right:0;bottom:-1px;height:2px;pointer-events:none} .read-progress i{display:block;height:100%;width:0;background:var(--accent);transition:width .1s linear} /* ============================================================ 04 · LAYOUT ============================================================ */ .shell{display:flex;align-items:flex-start;max-width:1640px;margin:0 auto;min-width:0} .sidebar{ position:sticky;top:var(--topbar-h);flex:0 0 var(--nav-w); height:calc(100vh - var(--topbar-h));display:flex;flex-direction:column; border-right:1px solid var(--line);background:var(--bg-soft); transition:flex-basis var(--slow); } .sidebar-inner{flex:1;overflow-y:auto;padding:14px 12px 22px} main{flex:1 1 0;min-width:0;padding:var(--pad-main);max-width:1180px;margin:0 auto} .scrim{display:none} .page{animation:rise .26s var(--ease)} @keyframes rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}} .loading{padding:18px 0;display:grid;gap:14px;max-width:620px} .loading i{display:block;height:15px;border-radius:var(--r-sm);background:var(--panel-2);animation:pulse 1.3s ease-in-out infinite} .loading i:nth-child(1){height:30px;width:52%} .loading i:nth-child(2){width:84%} .loading i:nth-child(3){width:68%} .loading i:nth-child(4){height:110px;width:100%;border-radius:var(--r-lg)} @keyframes pulse{50%{opacity:.45}} /* ============================================================ 05 · SIDEBAR ============================================================ */ .side-label{color:var(--muted);margin:14px 8px 8px} .filter-box{position:relative;margin-bottom:9px} .filter-box input{ width:100%;padding:8px 28px 8px 32px;border:1px solid var(--line);border-radius:var(--r-md); background:var(--panel);color:var(--fg);font:inherit;font-size:var(--fs-ui);transition:var(--fast); } .filter-box input:hover{border-color:var(--panel-3)} .filter-box input:focus{outline:none;border-color:var(--accent);box-shadow:var(--ring)} .filter-box > svg{position:absolute;left:10px;top:50%;transform:translateY(-50%);width:14px;height:14px;color:var(--muted)} .filter-clear{ position:absolute;right:6px;top:50%;transform:translateY(-50%);display:none; border:0;background:var(--panel-3);color:var(--muted);width:18px;height:18px;border-radius:50%; cursor:pointer;font-size:10px;line-height:1; } .filter-box.has-value .filter-clear{display:grid;place-items:center} .level-filter{display:flex;gap:4px;margin-bottom:6px} .level-filter button{ flex:1;border:1px solid var(--line);background:var(--panel);color:var(--muted); font:inherit;font-size:var(--fs-micro);font-weight:var(--fw-semi);padding:6px 2px; border-radius:var(--r-sm);cursor:pointer;transition:var(--fast); } .level-filter button:hover{color:var(--fg);border-color:var(--panel-3)} .level-filter button.on{background:var(--fg);border-color:var(--fg);color:var(--bg)} .course-group{margin-bottom:1px} .course-head{ display:flex;align-items:center;gap:9px;width:100%;padding:calc(var(--row-y) + 2px) 9px; border:0;background:none;color:var(--fg);font:inherit;font-size:var(--fs-ui); font-weight:var(--fw-semi);border-radius:var(--r-md);cursor:pointer;text-align:left;transition:var(--fast); } .course-head:hover{background:var(--panel-2)} .course-group.active > .course-head{background:var(--panel-2)} .course-head .ci{ width:26px;height:26px;border-radius:var(--r-sm);display:grid;place-items:center; font-size:13px;flex:0 0 26px; } .course-head .cn{flex:1;min-width:0;line-height:1.3} .course-head .cn > span:first-child{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .course-meta{display:block;font-weight:var(--fw-med);font-size:var(--fs-micro);color:var(--muted);margin-top:1px} .course-head .chev{color:var(--muted);flex:0 0 13px;transition:transform var(--slow)} .course-head .chev svg{width:13px;height:13px;display:block} .course-group.open .chev{transform:rotate(90deg)} .pbar{height:2px;background:var(--line-soft);margin:1px 11px 7px;overflow:hidden} .pbar i{display:block;height:100%;background:var(--green);transition:width .4s var(--ease)} .topic-list{display:none;padding:0 0 8px;margin:0 0 0 21px;list-style:none;border-left:1px solid var(--line)} .course-group.open .topic-list{display:block;animation:fade .18s var(--ease)} @keyframes fade{from{opacity:0}to{opacity:1}} .topic-list a{ display:flex;align-items:flex-start;gap:8px;padding:var(--row-y) 10px;margin-left:-1px; border-left:2px solid transparent;color:var(--fg-soft);text-decoration:none; font-size:var(--fs-ui);line-height:var(--lh-snug);transition:var(--fast); } .topic-list a:hover{background:var(--panel-2);color:var(--fg)} .topic-list a.active{background:var(--accent-soft);color:var(--accent-ink);font-weight:var(--fw-semi);border-left-color:var(--accent)} .topic-list .tick{ flex:0 0 13px;height:13px;margin-top:4px;border-radius:50%;border:1.5px solid var(--panel-3); display:grid;place-items:center;overflow:hidden;color:transparent;transition:var(--fast); } .topic-list .tick svg{width:8px;height:8px;display:block} .topic-list .tick.on{background:var(--green);border-color:var(--green);color:#fff} .lvl-dot{flex:0 0 5px;height:5px;width:5px;border-radius:50%;margin-top:8px} .lvl-beginner{background:var(--green)} .lvl-intermediate{background:var(--orange)} .lvl-advanced{background:var(--red)} .empty-note{ color:var(--muted);font-size:var(--fs-ui);padding:20px 14px;text-align:center; border:1px dashed var(--line);border-radius:var(--r-md);margin:8px 0; } .side-foot{ border-top:1px solid var(--line);padding:11px 14px;background:var(--bg-soft); display:flex;align-items:center;gap:11px; } .side-foot .txt{flex:1;min-width:0;font-size:var(--fs-micro);color:var(--muted);line-height:1.4} .side-foot .txt b{display:block;font-size:var(--fs-ui-lg);color:var(--fg);font-weight:var(--fw-semi)} .side-foot .tools{display:flex;align-items:center;gap:5px} .ghost-btn{ border:1px solid var(--line);background:var(--panel);color:var(--muted);font:inherit; font-size:var(--fs-micro);font-weight:var(--fw-semi);padding:6px 10px;border-radius:var(--r-sm); cursor:pointer;transition:var(--fast); } .ghost-btn:hover{color:var(--red);border-color:var(--red)} .tool-btn{ display:grid;place-items:center;width:28px;height:28px;flex:0 0 28px; border:1px solid var(--line);background:var(--panel);color:var(--muted); border-radius:var(--r-sm);cursor:pointer;transition:var(--fast); } .tool-btn:hover{color:var(--fg);border-color:var(--panel-3)} .tool-btn[aria-pressed="true"]{color:var(--accent-ink);border-color:var(--accent);background:var(--accent-soft)} .tool-btn svg{width:15px;height:15px} .rail-toggle{display:none} .ring{display:block;transform:rotate(-90deg)} .ring circle{fill:none;stroke-width:3;stroke-linecap:butt} .ring .bg{stroke:var(--panel-3)} .ring .fg{stroke:var(--green);transition:stroke-dashoffset .5s var(--ease)} .ring-wrap{position:relative;flex:0 0 auto;display:grid;place-items:center} .ring-wrap b{position:absolute;font-size:var(--fs-micro);font-weight:var(--fw-bold);color:var(--fg)} /* ---- icon rail ------------------------------------------------------- Desktop only: below 1000px the sidebar is already a drawer, so the rail rules must not apply there. */ @media (min-width:1001px){ .rail-toggle{display:grid} html[data-rail="1"]{--nav-w:var(--rail-w)} html[data-rail="1"] .sidebar{min-width:0;overflow:hidden} html[data-rail="1"] .sidebar-inner{padding:10px 8px;overflow-x:hidden} /* .course-group.open .topic-list is more specific than a plain rail rule, so the open state has to be named here too. */ html[data-rail="1"] .course-group.open .topic-list, html[data-rail="1"] .filter-box, html[data-rail="1"] .level-filter, html[data-rail="1"] .pbar, html[data-rail="1"] .topic-list, html[data-rail="1"] .course-head .cn, html[data-rail="1"] .course-head .chev, html[data-rail="1"] .side-foot .txt, html[data-rail="1"] #resetBtn{display:none} html[data-rail="1"] .course-head{justify-content:center;padding:7px 0;gap:0} html[data-rail="1"] .course-head .ci{width:32px;height:32px;flex:0 0 32px;font-size:16px;border-radius:var(--r-md)} html[data-rail="1"] .course-group{margin-bottom:4px;position:relative} html[data-rail="1"] .course-group.active::before{ content:"";position:absolute;left:-8px;top:6px;bottom:6px;width:3px; border-radius:0 2px 2px 0;background:var(--accent); } html[data-rail="1"] .empty-note{display:none} html[data-rail="1"] .side-foot{flex-direction:column;gap:8px;padding:10px 6px} html[data-rail="1"] .side-foot .tools{flex-direction:column} } /* tooltip shown beside a rail icon (fixed, so the scroller cannot clip it) */ .rail-tip{ position:fixed;z-index:80;left:0;top:0;pointer-events:none;opacity:0; background:var(--fg);color:var(--bg);font-size:var(--fs-caption);font-weight:var(--fw-semi); padding:6px 10px;border-radius:var(--r-sm);box-shadow:var(--sh-2); white-space:nowrap;max-width:260px;overflow:hidden;text-overflow:ellipsis; transform:translateY(-50%);transition:opacity var(--fast); } .rail-tip.show{opacity:1} /* ============================================================ 06 · HOME ============================================================ */ /* page header — same pattern on home, search and topic pages */ .hero{ border:1px solid var(--line);border-radius:var(--r-xl); padding:var(--pad-hero);margin-bottom:24px;background:var(--panel); } .eyebrow{display:block;color:var(--accent-ink);margin-bottom:10px} .hero h1{font-size:clamp(var(--fs-h1),3vw,var(--fs-display));line-height:var(--lh-tight);margin-bottom:8px} .hero p{color:var(--muted);font-size:var(--fs-lead);margin:0;max-width:62ch;line-height:var(--lh-snug)} .stat-row{ display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); margin-top:22px;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden; } .stat{ padding:13px 16px;display:flex;align-items:center;gap:12px; border-right:1px solid var(--line);background:var(--bg); } .stat:last-child{border-right:0} .stat .ic{ width:30px;height:30px;flex:0 0 30px;border-radius:var(--r-sm); background:var(--panel-2);color:var(--muted);display:grid;place-items:center; } .stat .ic svg{width:16px;height:16px} .stat .v{display:block;font-size:var(--fs-h3);font-weight:var(--fw-bold);line-height:1.15;letter-spacing:-.02em} .stat .k{display:block;color:var(--muted);margin-top:2px} .section-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin:30px 0 12px} .section-head h2{font-size:var(--fs-h4);letter-spacing:0} .section-head span{font-size:var(--fs-caption);color:var(--muted)} .continue{ display:flex;align-items:center;gap:16px;text-decoration:none;color:var(--fg); border:1px solid var(--line);border-left:3px solid var(--accent); border-radius:var(--r-lg);padding:16px 20px;background:var(--panel);transition:var(--fast); } .continue:hover{border-color:var(--accent);box-shadow:var(--sh-2)} .continue .ic{width:40px;height:40px;border-radius:var(--r-md);display:grid;place-items:center;font-size:19px;flex:0 0 40px} .continue .tx{flex:1;min-width:0} .continue .tx small{display:block;color:var(--muted)} .continue .tx b{display:block;font-size:var(--fs-lead);font-weight:var(--fw-semi);line-height:var(--lh-snug);margin-top:3px} .continue .tx i{font-style:normal;font-size:var(--fs-caption);color:var(--muted)} .continue .go{ flex:0 0 auto;background:var(--accent);color:#fff;border-radius:var(--r-md); padding:9px 16px;font-size:var(--fs-ui);font-weight:var(--fw-semi);white-space:nowrap; } .course-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(288px,1fr));gap:14px} .ccard{ position:relative;overflow:hidden;border:1px solid var(--line);border-radius:var(--r-lg); padding:var(--pad-card);background:var(--panel);text-decoration:none;color:var(--fg);display:flex; flex-direction:column;transition:var(--fast); } .ccard::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--c,var(--accent))} .ccard:hover{border-color:var(--panel-3);box-shadow:var(--sh-2)} .ccard .top{display:flex;align-items:flex-start;gap:11px;margin-bottom:10px} .ccard .ic{width:36px;height:36px;border-radius:var(--r-md);display:grid;place-items:center;font-size:18px;flex:0 0 36px} .ccard h3{font-size:var(--fs-ui-lg);line-height:var(--lh-snug);flex:1;font-weight:var(--fw-semi)} .ccard p{margin:0 0 16px;font-size:var(--fs-ui);color:var(--muted);line-height:var(--lh-snug);flex:1} .ccard .foot{display:flex;align-items:center;gap:10px;font-size:var(--fs-caption);color:var(--muted);font-weight:var(--fw-semi)} .ccard .foot .bar{flex:1;height:4px;border-radius:2px;background:var(--panel-2);overflow:hidden} .ccard .foot .bar i{display:block;height:100%;background:var(--c,var(--accent));transition:width .45s var(--ease)} .chip{ background:var(--panel-2);border:1px solid var(--line);border-radius:var(--r-sm); padding:2px 7px;font-size:var(--fs-micro);font-weight:var(--fw-semi);color:var(--muted); } /* ============================================================ 07 · TOPIC PAGE + TOC ============================================================ */ .topic-wrap{display:grid;grid-template-columns:minmax(0,1fr);gap:44px;align-items:start} @media (min-width:1300px){.topic-wrap{grid-template-columns:minmax(0,1fr) 216px}} .topic-main{min-width:0} .crumb{display:flex;align-items:center;gap:7px;font-size:var(--fs-caption);color:var(--muted);margin-bottom:12px;flex-wrap:wrap} .crumb a{color:var(--muted);text-decoration:none;transition:var(--fast)} .crumb a:hover{color:var(--accent)} .crumb .sep{opacity:.45} .topic-head{margin-bottom:24px;padding-bottom:18px;border-bottom:1px solid var(--line)} .topic-head h1{font-size:clamp(var(--fs-h1),2.6vw,32px);line-height:var(--lh-tight);margin-bottom:14px;max-width:24ch} .badges{display:flex;gap:7px;flex-wrap:wrap;align-items:center} .badge{ display:inline-flex;align-items:center;gap:5px;font-size:var(--fs-micro);font-weight:var(--fw-semi); padding:4px 9px;border-radius:var(--r-sm);border:1px solid transparent; } .badge svg{width:12px;height:12px} .badge.beginner{background:var(--green-soft);color:var(--green);border-color:color-mix(in srgb,var(--green) 25%,transparent)} .badge.intermediate{background:var(--orange-soft);color:var(--orange);border-color:color-mix(in srgb,var(--orange) 25%,transparent)} .badge.advanced{background:var(--red-soft);color:var(--red);border-color:color-mix(in srgb,var(--red) 25%,transparent)} .badge.plain{background:var(--panel-2);color:var(--muted);border-color:var(--line)} .done-btn{ margin-left:auto;display:inline-flex;align-items:center;gap:7px; border:1px solid var(--line);background:var(--panel);color:var(--fg-soft); font:inherit;font-size:var(--fs-ui);font-weight:var(--fw-semi);padding:7px 14px; border-radius:var(--r-md);cursor:pointer;transition:var(--fast); } .done-btn:hover{border-color:var(--green);color:var(--green)} .done-btn.on{background:var(--green);border-color:var(--green);color:#fff} .done-btn svg{width:14px;height:14px} .lead{font-size:var(--fs-lead);line-height:var(--lh-snug);color:var(--muted);margin:0 0 26px;max-width:var(--reading)} .toc{ position:sticky;top:calc(var(--topbar-h) + 28px);max-height:calc(100vh - var(--topbar-h) - 56px); overflow-y:auto;font-size:var(--fs-caption);border-left:1px solid var(--line);padding-left:14px; } .toc .t{color:var(--muted);margin-bottom:9px} .toc a{ display:block;padding:5px 0 5px 10px;margin-left:-15px;border-left:2px solid transparent; color:var(--muted);text-decoration:none;line-height:var(--lh-snug);transition:var(--fast); } .toc a:hover{color:var(--fg)} .toc a.sub{padding-left:22px} .toc a.on{color:var(--accent-ink);border-left-color:var(--accent);font-weight:var(--fw-semi)} @media (max-width:1299px){.toc{display:none}} /* ============================================================ 08 · CONTENT COMPONENTS (used inside topic bodies) ============================================================ */ .body{max-width:var(--reading)} .body h2{ font-size:var(--fs-h2);margin:48px 0 15px;padding-top:24px;border-top:1px solid var(--line-soft); line-height:var(--lh-tight);scroll-margin-top:calc(var(--topbar-h) + 24px); } .body h3{font-size:var(--fs-h3);margin:32px 0 11px;line-height:var(--lh-snug);scroll-margin-top:calc(var(--topbar-h) + 24px)} .body h4{font-size:var(--fs-h4);margin:22px 0 8px;color:var(--accent-ink)} .body p{margin:0 0 16px} .body ul,.body ol{margin:0 0 16px;padding-left:24px} .body li{margin-bottom:8px} .body li::marker{color:var(--muted)} .body img{max-width:100%;border-radius:var(--r-md)} .body strong{font-weight:var(--fw-bold);color:var(--fg)} .body blockquote{margin:0 0 20px;padding:2px 0 2px 18px;border-left:2px solid var(--line);color:var(--muted)} code{ font-family:var(--mono);font-size:.86em;background:var(--panel-2); padding:2px 5px;border-radius:4px;border:1px solid var(--line); } pre{ background:var(--panel-2);border:1px solid var(--line);border-radius:var(--r-lg); padding:15px 17px;overflow-x:auto;margin:0 0 20px;position:relative; } pre code{background:none;border:0;padding:0;font-size:var(--fs-code);line-height:1.7;display:block} pre.dark{background:var(--dark);border-color:var(--dark)} pre.dark code{color:#e9ecef} .copy-btn{ position:absolute;top:8px;right:8px;border:1px solid var(--line);background:var(--panel); color:var(--muted);font:inherit;font-size:var(--fs-micro);font-weight:var(--fw-semi); padding:4px 9px;border-radius:var(--r-sm);cursor:pointer;opacity:0;transition:var(--fast); } pre:hover .copy-btn,.copy-btn:focus-visible{opacity:1} .copy-btn:hover{color:var(--fg);border-color:var(--panel-3)} .copy-btn.done{color:var(--green);border-color:var(--green);opacity:1} .file-tag{ font-family:var(--mono);font-size:var(--fs-caption);background:var(--dark);color:#e9ecef; padding:5px 12px;border-radius:var(--r-md) var(--r-md) 0 0;display:inline-block; } .file-tag + pre{border-radius:0 var(--r-lg) var(--r-lg) var(--r-lg);margin-top:0} .table-scroll{overflow-x:auto;margin:0 0 22px;border-radius:var(--r-lg)} table{ border-collapse:separate;border-spacing:0;width:100%;margin:0 0 22px;font-size:var(--fs-ui-lg); border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden; } .table-scroll table{margin:0} th,td{border-bottom:1px solid var(--line);padding:var(--cell-y) 14px;text-align:left;vertical-align:top} tr:last-child td{border-bottom:0} th{ background:var(--panel-2);font-weight:var(--fw-semi);font-size:var(--fs-caption); color:var(--muted);letter-spacing:.04em;text-transform:uppercase; } tbody tr:hover td{background:var(--panel-2)} /* callouts */ .note,.warn,.ok,.danger,.tip{ border:1px solid;border-left-width:3px;border-radius:var(--r-md);padding:13px 16px;margin:0 0 20px; } .note{background:var(--accent-soft);border-color:color-mix(in srgb,var(--accent) 28%,transparent);border-left-color:var(--accent)} .warn{background:var(--orange-soft);border-color:color-mix(in srgb,var(--orange) 28%,transparent);border-left-color:var(--orange)} .ok{background:var(--green-soft);border-color:color-mix(in srgb,var(--green) 28%,transparent);border-left-color:var(--green)} .danger{background:var(--red-soft);border-color:color-mix(in srgb,var(--red) 28%,transparent);border-left-color:var(--red)} .tip{background:var(--purple-soft);border-color:color-mix(in srgb,var(--purple) 28%,transparent);border-left-color:var(--purple)} .note>:last-child,.warn>:last-child,.ok>:last-child,.danger>:last-child,.tip>:last-child{margin-bottom:0} .analogy{ display:flex;gap:15px;background:var(--yellow-soft); border:1px solid color-mix(in srgb,var(--yellow) 30%,transparent); border-radius:var(--r-lg);padding:15px 17px;margin:0 0 22px; } .analogy .ic{ flex:0 0 36px;height:36px;border-radius:var(--r-md); background:color-mix(in srgb,var(--yellow) 18%,transparent); display:grid;place-items:center;font-size:18px; } .analogy b{display:block;margin-bottom:4px} .analogy>div:last-child>:last-child{margin-bottom:0} .diagram{border:1px solid var(--line);border-radius:var(--r-lg);padding:22px 18px;margin:0 0 24px;background:var(--bg-soft)} .dtitle{color:var(--muted);text-align:center;margin-bottom:18px} .cards{display:flex;gap:11px;justify-content:center;flex-wrap:wrap;align-items:stretch} .cards .c{ flex:1 1 155px;max-width:215px;border:1px solid var(--line);border-radius:var(--r-md); background:var(--panel);padding:13px 12px;text-align:center; } .cards .c .t{font-weight:var(--fw-semi);margin-bottom:4px;font-size:var(--fs-ui-lg)} .cards .c .s{font-size:var(--fs-ui);color:var(--muted);line-height:var(--lh-snug)} .cards .c.b{border-top:2px solid var(--accent)} .cards .c.g{border-top:2px solid var(--green)} .cards .c.o{border-top:2px solid var(--orange)} .cards .c.p{border-top:2px solid var(--purple)} .cards .c.r{border-top:2px solid var(--red)} .arrow{text-align:center;color:var(--muted);font-size:18px;line-height:1;margin:9px 0} .result-box{ background:var(--dark);color:#f1f3f5;border-radius:var(--r-md);padding:14px;text-align:center; font-family:var(--mono);font-size:var(--fs-ui-lg);font-weight:var(--fw-semi); max-width:620px;margin:0 auto;word-break:break-all; } .compare{display:flex;gap:13px;flex-wrap:wrap;margin:0 0 22px} .compare>div{flex:1 1 290px;border:1px solid var(--line);border-radius:var(--r-md);padding:13px 16px} .compare .bad{background:var(--red-soft);border-color:color-mix(in srgb,var(--red) 22%,transparent)} .compare .good{background:var(--green-soft);border-color:color-mix(in srgb,var(--green) 22%,transparent)} .compare h4{margin:0 0 7px;color:inherit} .compare ul{margin:0;padding-left:20px;font-size:var(--fs-ui-lg)} .steps{margin:0 0 24px} .steps .st{display:flex;gap:15px;padding:15px 0;border-bottom:1px solid var(--line-soft)} .steps .st:last-child{border-bottom:none} .steps .n{ flex:0 0 28px;height:28px;border-radius:var(--r-sm);background:var(--accent);color:#fff;margin-top:3px; display:grid;place-items:center;font-size:var(--fs-ui);font-weight:var(--fw-bold); } .steps .sb{flex:1;min-width:0} .steps .sb h4{margin:2px 0 6px;color:var(--fg);font-size:var(--fs-h4)} .steps .sb>:last-child{margin-bottom:0} details.acc{border:1px solid var(--line);border-radius:var(--r-md);margin:0 0 13px;background:var(--panel);overflow:hidden} details.acc:hover{border-color:var(--panel-3)} details.acc summary{ padding:11px 15px;cursor:pointer;font-weight:var(--fw-semi);list-style:none; font-size:var(--fs-ui-lg);display:flex;align-items:center;gap:9px; } details.acc summary::-webkit-details-marker{display:none} details.acc summary::before{content:"›";color:var(--accent);font-size:17px;line-height:1;transition:transform var(--fast);display:inline-block} details.acc[open] summary::before{transform:rotate(90deg)} details.acc .acc-body{padding:0 15px 12px} details.acc .acc-body>:last-child{margin-bottom:0} /* ============================================================ 09 · TAKEAWAYS / QUIZ / PAGER / SEARCH ============================================================ */ .panel-title{ display:flex;align-items:center;gap:9px;font-size:var(--fs-h4); font-weight:var(--fw-bold);margin-bottom:12px; } .panel-title svg{width:17px;height:17px;flex:0 0 17px} .takeaways{ background:var(--green-soft);border:1px solid color-mix(in srgb,var(--green) 26%,transparent); border-radius:var(--r-lg);padding:var(--pad-card) calc(var(--pad-card) + 4px);margin:38px 0 0;max-width:var(--reading); } .takeaways .panel-title{color:var(--green)} .takeaways ul{margin:0;padding-left:20px} .takeaways li{margin-bottom:7px} .takeaways li::marker{color:var(--green)} .quiz{ border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--pad-card) calc(var(--pad-card) + 4px);margin:22px 0 0; background:var(--panel);max-width:var(--reading); } .quiz .panel-title{margin-bottom:3px} .quiz .panel-title svg{color:var(--accent)} .quiz .qsub{color:var(--muted);font-size:var(--fs-ui);margin-bottom:16px} .qitem{margin-bottom:18px;padding-bottom:16px;border-bottom:1px solid var(--line-soft)} .qitem:last-child{border-bottom:none;margin-bottom:0;padding-bottom:0} .qitem .qq{font-weight:var(--fw-semi);margin-bottom:10px;line-height:var(--lh-snug)} .qopt{ display:flex;align-items:center;gap:10px;width:100%;text-align:left;border:1px solid var(--line); background:var(--bg);color:var(--fg);font:inherit;font-size:var(--fs-ui-lg);padding:9px 13px; border-radius:var(--r-md);margin-bottom:7px;cursor:pointer;transition:var(--fast); } .qopt::before{ content:attr(data-k);flex:0 0 20px;height:20px;border-radius:var(--r-sm);background:var(--panel-2); color:var(--muted);font-size:var(--fs-micro);font-weight:var(--fw-bold);display:grid;place-items:center; } .qopt:hover{border-color:var(--accent);background:var(--accent-soft)} .qopt.right{background:var(--green-soft);border-color:var(--green)} .qopt.right::before{background:var(--green);color:#fff} .qopt.wrong{background:var(--red-soft);border-color:var(--red)} .qopt.wrong::before{background:var(--red);color:#fff} .qexp{ font-size:var(--fs-ui-lg);color:var(--fg-soft);margin-top:9px;padding:11px 13px; background:var(--panel-2);border-radius:var(--r-md);display:none; } .qexp.show{display:block;animation:fade .22s var(--ease)} .pager{ display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:40px;padding-top:24px; border-top:1px solid var(--line);max-width:var(--reading); } .pager a{ border:1px solid var(--line);border-radius:var(--r-lg);padding:13px 16px;text-decoration:none; color:var(--fg);background:var(--panel);transition:var(--fast); } .pager a:hover{border-color:var(--accent)} .pager small{display:block;color:var(--muted);margin-bottom:4px} .pager b{font-weight:var(--fw-semi);font-size:var(--fs-ui-lg);line-height:var(--lh-snug)} .pager .nx{text-align:right} .pager .sp{display:block} .sr-list{display:grid;gap:8px;max-width:var(--reading)} .sr{ border:1px solid var(--line);border-radius:var(--r-md);padding:12px 15px;display:flex; align-items:center;gap:12px;text-decoration:none;color:var(--fg);background:var(--panel);transition:var(--fast); } .sr:hover{border-color:var(--accent);background:var(--bg-soft)} .sr .ic{width:32px;height:32px;border-radius:var(--r-sm);display:grid;place-items:center;font-size:15px;flex:0 0 32px} .sr .tx{flex:1;min-width:0} .sr b{display:block;margin-bottom:2px;font-size:var(--fs-ui-lg);font-weight:var(--fw-semi)} .sr span{font-size:var(--fs-caption);color:var(--muted)} .sr .go{color:var(--muted);display:grid;place-items:center} .sr .go svg{width:15px;height:15px} .sr:hover .go{color:var(--accent)} /* ============================================================ 10 · OVERLAYS, TOAST, RESPONSIVE, PRINT ============================================================ */ .palette{ position:fixed;inset:0;z-index:100;display:none;padding:12vh 16px 16px; background:rgba(10,13,18,.5); -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px); } body.palette-open .palette{display:block;animation:fade .14s var(--ease)} .palette-box{ max-width:620px;margin:0 auto;background:var(--panel);border:1px solid var(--line); border-radius:var(--r-xl);box-shadow:var(--sh-4);overflow:hidden;animation:pop .16s var(--ease); } @keyframes pop{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}} .palette-in{display:flex;align-items:center;gap:11px;padding:13px 16px;border-bottom:1px solid var(--line)} .palette-in > svg{width:17px;height:17px;color:var(--muted);flex:0 0 17px} .palette-in input{flex:1;border:0;background:none;color:var(--fg);font:inherit;font-size:var(--fs-lead);outline:none} .palette-in input::placeholder{color:var(--muted)} .palette-list{max-height:52vh;overflow-y:auto;padding:6px} .palette-list a{ display:flex;align-items:center;gap:11px;padding:9px 11px;border-radius:var(--r-md); text-decoration:none;color:var(--fg); } .palette-list a .ic{width:28px;height:28px;border-radius:var(--r-sm);display:grid;place-items:center;font-size:14px;flex:0 0 28px} .palette-list a .tx{flex:1;min-width:0} .palette-list a b{display:block;font-size:var(--fs-ui-lg);font-weight:var(--fw-semi);line-height:var(--lh-snug)} .palette-list a small{color:var(--muted);font-size:var(--fs-caption)} .palette-list a .done-mark{color:var(--green);display:grid;place-items:center} .palette-list a .done-mark svg{width:14px;height:14px} .palette-list a.on{background:var(--accent-soft)} .palette-list a.on b{color:var(--accent-ink)} .palette-foot{ display:flex;gap:15px;align-items:center;padding:8px 16px;border-top:1px solid var(--line); background:var(--bg-soft);font-size:var(--fs-micro);color:var(--muted); } .palette-foot span{display:flex;align-items:center;gap:5px} .palette-empty{padding:32px 16px;text-align:center;color:var(--muted);font-size:var(--fs-ui-lg)} .toast{ position:fixed;left:50%;bottom:24px;z-index:120;transform:translate(-50%,20px); background:var(--fg);color:var(--bg);font-size:var(--fs-ui);font-weight:var(--fw-semi); padding:10px 18px;border-radius:var(--r-md);box-shadow:var(--sh-3); opacity:0;pointer-events:none;transition:var(--slow); } .toast.show{opacity:1;transform:translate(-50%,0)} .to-top{ position:fixed;right:20px;bottom:22px;z-index:55;width:38px;height:38px;border-radius:var(--r-md); border:1px solid var(--line);background:var(--panel);color:var(--fg-soft);cursor:pointer; display:grid;place-items:center;box-shadow:var(--sh-2); opacity:0;transform:translateY(10px);pointer-events:none;transition:var(--slow); } .to-top.show{opacity:1;transform:none;pointer-events:auto} .to-top:hover{color:var(--accent);border-color:var(--accent)} .to-top svg{width:17px;height:17px} @media (max-width:1180px){ main{padding:30px 32px 110px} } @media (max-width:1000px){ .menu-toggle{display:grid} .brand-text small{display:none} .search-trigger{flex:0 0 34px;width:34px;padding:0;justify-content:center;margin-left:0} .search-trigger span,.search-trigger kbd{display:none} .sidebar{ position:fixed;top:var(--topbar-h);left:0;z-index:70;width:min(86vw,320px);flex:none; transform:translateX(-101%);transition:transform var(--slow);box-shadow:var(--sh-4);background:var(--bg); } body.nav-open .sidebar{transform:translateX(0)} body.nav-open .scrim{ display:block;position:fixed;inset:var(--topbar-h) 0 0 0;z-index:65; background:rgba(8,10,14,.45);animation:fade .18s var(--ease); } main{padding:24px 20px 90px} .hero{padding:22px 20px} .continue{flex-wrap:wrap} .pager{grid-template-columns:1fr} } @media (max-width:620px){ .brand-text{max-width:38vw} .brand-text small{display:none} .topbar{gap:8px;padding:0 12px} .stat-row{grid-template-columns:1fr 1fr} .stat:nth-child(2n){border-right:0} .stat:nth-child(-n+2){border-bottom:1px solid var(--line)} .course-cards{grid-template-columns:1fr} .done-btn{margin-left:0} .lang-switch button{padding:5px 8px;font-size:var(--fs-micro)} .toast{left:16px;right:16px;bottom:16px;transform:translateY(20px);text-align:center} .toast.show{transform:translateY(0)} } @media (max-width:470px){ .brand-text{display:none} main{padding:20px 16px 80px} .hero{padding:18px 16px} .continue .go{width:100%;text-align:center} } @media (prefers-reduced-motion:reduce){ *{animation-duration:.001ms !important;transition-duration:.001ms !important;scroll-behavior:auto !important} } @media print{ .topbar,.sidebar,.toc,.pager,.to-top,.palette,.toast,.done-btn,.copy-btn,.scrim{display:none !important} main{padding:0;max-width:100%} body{font-size:12pt} .quiz,.takeaways,pre,.diagram{break-inside:avoid} }