/* ============================================================ System Design Academy — stylesheet Light + dark theming via [data-theme] on . ============================================================ */ :root { --bg: #f2f0ea; --bg-2: #f8f6f1; --paper: #fffdf9; --panel: #fbfaf6; --ink: #14243a; --ink-soft: #33465f; --muted: #5b6a80; --line: #dde3ee; --line-strong: #ccd4e2; --brand: #0a63c9; --brand-ink: #084d9e; --accent: #e6720b; --mint: #0f8f73; --warn: #d24b4b; --radius: 14px; --shadow-soft: 0 14px 34px rgba(16, 35, 60, 0.08); --shadow-strong: 0 24px 54px rgba(16, 35, 60, 0.13); /* diagram primitives */ --diag-bg: #ffffff; --diag-box-fill: #ffffff; --diag-box-stroke: #b9c6dc; --diag-accent-fill: #e8f1fe; --diag-accent-stroke: #7fabe6; --diag-warn-fill: #fdeaea; --diag-warn-stroke: #e79b9b; --diag-new-fill: #eafaf4; --diag-new-stroke: #79cfb6; --diag-lane-fill: #fff3df; --diag-lane-stroke: #f2c987; --diag-line: #0a63c9; --diag-muted: #8593ab; --diag-region: #eef3fb; --diag-region-stroke: #cdd8ea; --diag-text: #16273f; --diag-subtext: #566579; } :root[data-theme="dark"] { --bg: #0d1420; --bg-2: #111a28; --paper: #16202f; --panel: #1a2536; --ink: #e8eef7; --ink-soft: #c2cede; --muted: #8ea0b8; --line: #26344a; --line-strong: #33455f; --brand: #56a0f2; --brand-ink: #7cb6f6; --accent: #f2a44b; --mint: #34c39c; --warn: #f07272; --shadow-soft: 0 14px 34px rgba(0, 0, 0, 0.36); --shadow-strong: 0 24px 54px rgba(0, 0, 0, 0.5); --diag-bg: #101a27; --diag-box-fill: #1a2536; --diag-box-stroke: #3a4c66; --diag-accent-fill: #16324f; --diag-accent-stroke: #3f7cc0; --diag-warn-fill: #3a1f22; --diag-warn-stroke: #a2565a; --diag-new-fill: #123430; --diag-new-stroke: #2f8a72; --diag-lane-fill: #3a2f1c; --diag-lane-stroke: #8a6a34; --diag-line: #62a6f2; --diag-muted: #6b7c96; --diag-region: #14202f; --diag-region-stroke: #2c3d55; --diag-text: #e6edf7; --diag-subtext: #93a3ba; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; color: var(--ink); background: radial-gradient(circle at 88% -4%, rgba(10, 99, 201, 0.1), transparent 40%), radial-gradient(circle at 2% 12%, rgba(230, 114, 11, 0.08), transparent 34%), var(--bg); font: 400 16px/1.62 Manrope, "Segoe UI", system-ui, sans-serif; overflow-x: hidden; } a { color: inherit; text-decoration: none; } h1, h2, h3, h4, p { margin-top: 0; } h1, h2, h3, .brand strong { font-family: "Space Grotesk", "Segoe UI", sans-serif; letter-spacing: -0.01em; } h1 { margin-bottom: 18px; font-size: clamp(2.2rem, 4.6vw, 4.1rem); line-height: 1.02; } h2 { margin-bottom: 14px; font-size: clamp(1.7rem, 3vw, 2.8rem); line-height: 1.05; } .svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; } .skip-link { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 16px; border-radius: 8px; background: var(--brand); color: #fff; font-weight: 700; transition: top 0.2s ease; } .skip-link:focus { top: 12px; } .sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; } .eyebrow { margin: 0 0 10px; color: var(--brand); font-weight: 800; font-size: 0.76rem; letter-spacing: 0.08em; text-transform: uppercase; } kbd { display: inline-block; padding: 1px 6px; border: 1px solid var(--line-strong); border-bottom-width: 2px; border-radius: 5px; background: var(--panel); font: 600 0.78rem "JetBrains Mono", monospace; color: var(--ink-soft); } /* ---------- Top bar ---------- */ .topbar { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: 20px; padding: 12px clamp(16px, 4vw, 60px); border-bottom: 1px solid var(--line); backdrop-filter: blur(12px); background: color-mix(in srgb, var(--paper) 84%, transparent); } .brand { display: inline-flex; align-items: center; gap: 12px; margin-right: auto; } .brand-mark { display: grid; width: 46px; height: 46px; place-items: center; border-radius: 12px; background: linear-gradient(140deg, var(--brand), #2f8ae8); color: #fff; font-weight: 800; font-size: 0.82rem; } .brand-text strong, .brand-text small { display: block; } .brand-text strong { font-size: 1.02rem; } .brand-text small { color: var(--muted); font-size: 0.76rem; } .topnav { display: flex; gap: 22px; color: var(--muted); font-weight: 700; font-size: 0.94rem; } .topnav a { position: relative; padding: 4px 0; } .topnav a::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; transform: scaleX(0); transform-origin: left; transition: transform 0.24s ease; background: var(--brand); } .topnav a:hover::after { transform: scaleX(1); } .top-progress { display: flex; align-items: center; gap: 8px; min-width: 128px; } .top-progress-track { flex: 1; height: 8px; border-radius: 999px; background: var(--line); overflow: hidden; } .top-progress-track span { display: block; width: 0; height: 100%; border-radius: 999px; background: linear-gradient(120deg, var(--brand), var(--mint)); transition: width 0.3s ease; } #top-progress-label { font-weight: 800; font-size: 0.82rem; color: var(--ink-soft); min-width: 34px; text-align: right; } .theme-toggle { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--panel); color: var(--ink-soft); font-size: 1.1rem; cursor: pointer; } .theme-toggle:hover { border-color: var(--brand); color: var(--brand); } /* ---------- Hero ---------- */ .hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, 1.05fr); align-items: center; gap: clamp(28px, 4vw, 60px); padding: clamp(44px, 7vw, 84px) clamp(18px, 5vw, 66px) 48px; } .hero-content { max-width: 760px; animation: lift-in 0.55s ease both; } .hero-copy { max-width: 620px; color: var(--ink-soft); font-size: clamp(1rem, 1.5vw, 1.14rem); } .hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; } .button { display: inline-flex; min-height: 46px; align-items: center; justify-content: center; padding: 0 22px; border-radius: 999px; font-weight: 800; cursor: pointer; transition: transform 0.15s ease, box-shadow 0.15s ease; } .button:hover { transform: translateY(-1px); } .button.primary { color: #fff; background: linear-gradient(140deg, var(--brand), #2078de); box-shadow: var(--shadow-soft); } .button.secondary { border: 1px solid var(--line-strong); background: var(--paper); color: var(--ink); } .hero-pillars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 30px; } .hero-pillars article { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 10px; padding: 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); } .hero-pillars h3 { margin-bottom: 4px; font-size: 0.98rem; } .hero-pillars p { margin: 0; color: var(--muted); font-size: 0.85rem; } .icon-wrap { display: grid; width: 40px; height: 40px; place-items: center; border-radius: 10px; background: color-mix(in srgb, var(--brand) 14%, transparent); } .icon-wrap svg { width: 20px; height: 20px; fill: var(--brand); } .hero-system { padding: 16px; border: 1px solid var(--line); border-radius: 20px; background: linear-gradient(color-mix(in srgb, var(--brand) 7%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--brand) 7%, transparent) 1px, transparent 1px), var(--paper); background-size: 26px 26px, 26px 26px, auto; box-shadow: var(--shadow-strong); animation: lift-in 0.7s ease both; } .hero-system svg { width: 100%; height: auto; } .hero-system-caption { margin: 8px 4px 2px; text-align: center; color: var(--muted); font-size: 0.82rem; } /* hero architecture svg */ .ha-box { fill: var(--diag-box-fill); stroke: var(--diag-box-stroke); stroke-width: 1.6; } .ha-box.users { fill: var(--diag-box-fill); stroke: var(--diag-box-stroke); } .ha-box.ms { fill: color-mix(in srgb, #7c6cf0 13%, var(--paper)); stroke: color-mix(in srgb, #7c6cf0 55%, var(--line)); } .ha-box.lb { fill: color-mix(in srgb, #3b82f6 11%, var(--paper)); stroke: color-mix(in srgb, #3b82f6 48%, var(--line)); } .ha-box.gw { fill: color-mix(in srgb, #8b5cf6 11%, var(--paper)); stroke: color-mix(in srgb, #8b5cf6 48%, var(--line)); } .ha-box.svc { fill: color-mix(in srgb, #22c55e 13%, var(--paper)); stroke: color-mix(in srgb, #22c55e 52%, var(--line)); } .ha-box.db { fill: color-mix(in srgb, #3b82f6 11%, var(--paper)); stroke: color-mix(in srgb, #3b82f6 48%, var(--line)); } .ha-box.cache { fill: color-mix(in srgb, #f59e0b 15%, var(--paper)); stroke: color-mix(in srgb, #f59e0b 55%, var(--line)); } .ha-box.mq { fill: color-mix(in srgb, #ec4899 11%, var(--paper)); stroke: color-mix(in srgb, #ec4899 48%, var(--line)); } .ha-box.obj { fill: color-mix(in srgb, #3b82f6 11%, var(--paper)); stroke: color-mix(in srgb, #3b82f6 48%, var(--line)); } .ha-box.mon { fill: color-mix(in srgb, #8b5cf6 11%, var(--paper)); stroke: color-mix(in srgb, #8b5cf6 48%, var(--line)); } .ha-c { fill: var(--diag-text); font: 600 13.5px Manrope, sans-serif; text-anchor: middle; } .ha-l { fill: var(--diag-text); font: 600 13px Manrope, sans-serif; text-anchor: start; } .ha-line { fill: none; stroke: var(--diag-line); color: var(--diag-line); stroke-width: 1.8; } .ha-line.dash { stroke: var(--diag-muted); color: var(--diag-muted); stroke-dasharray: 5 5; stroke-width: 1.6; } .ha-ic-users { fill: none; stroke: #4f46e5; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .ha-ic-lb { fill: none; stroke: #2f6fed; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .ha-ic-gw-circle { fill: #7c3aed; } .ha-ic-lock { fill: #ffffff; } .ha-ic-lock-arc { fill: none; stroke: #ffffff; stroke-width: 2; } .ha-ic-svc { fill: none; stroke: #16a34a; stroke-width: 2; stroke-linejoin: round; } .ha-ic-db { fill: none; stroke: #2563eb; stroke-width: 2; } .ha-ic-cache { fill: #f59e0b; stroke: none; } .ha-ic-mq { fill: none; stroke: #db2777; stroke-width: 2; stroke-linejoin: round; } .ha-ic-mq-dot { fill: #db2777; } .ha-ic-obj { fill: none; stroke: #2563eb; stroke-width: 2; } .ha-ic-mon { fill: none; stroke: #8b5cf6; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } :root[data-theme="dark"] .ha-ic-users { stroke: #9d97f6; } :root[data-theme="dark"] .ha-ic-lb { stroke: #6ba0f7; } :root[data-theme="dark"] .ha-ic-svc { stroke: #4ade80; } :root[data-theme="dark"] .ha-ic-db, :root[data-theme="dark"] .ha-ic-obj { stroke: #6ba0f7; } :root[data-theme="dark"] .ha-ic-mon { stroke: #b58cf7; } :root[data-theme="dark"] .ha-ic-mq { stroke: #f472b6; } :root[data-theme="dark"] .ha-ic-mq-dot { fill: #f472b6; } :root[data-theme="dark"] .ha-ic-gw-circle { fill: #8b5cf6; } /* ---------- Stats band ---------- */ .stats-band { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); background: linear-gradient(120deg, #0f2740, #1b3a5e); color: #fff; } :root[data-theme="dark"] .stats-band { background: linear-gradient(120deg, #0a1626, #142337); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .stats-band div { padding: 22px clamp(18px, 4vw, 50px); border-right: 1px solid rgba(255, 255, 255, 0.12); } .stats-band strong { display: block; font: 700 2.1rem/1 "Space Grotesk", sans-serif; } .stats-band span { color: rgba(255, 255, 255, 0.75); font-size: 0.92rem; } /* ---------- Sections ---------- */ .section { padding: clamp(52px, 8vw, 96px) clamp(18px, 5vw, 66px); } .section-heading { max-width: 820px; margin-bottom: 28px; } .section-heading p { color: var(--muted); font-size: 1.02rem; } /* ---------- Course toolbar ---------- */ .course-toolbar { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-bottom: 18px; } .search-wrap { position: relative; flex: 1; min-width: 260px; } .search-icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; fill: var(--muted); pointer-events: none; } .search-wrap input { width: 100%; min-height: 48px; padding: 0 16px 0 42px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--paper); color: var(--ink); font: inherit; } .search-wrap input:focus-visible { outline: 2px solid color-mix(in srgb, var(--brand) 45%, transparent); outline-offset: 1px; border-color: var(--brand); } .toolbar-btn { min-height: 48px; padding: 0 18px; border: 1px solid transparent; border-radius: 999px; background: linear-gradient(140deg, var(--brand), #2078de); color: #fff; font: inherit; font-weight: 800; cursor: pointer; } .toolbar-btn.quiet { background: var(--paper); border-color: var(--line-strong); color: var(--ink-soft); } .toolbar-btn:hover { transform: translateY(-1px); } /* ---------- Course shell ---------- */ .course-shell { display: grid; grid-template-columns: 304px minmax(0, 1fr); gap: 22px; align-items: start; } .course-nav { position: sticky; top: 84px; max-height: calc(100vh - 104px); overflow-y: auto; padding: 10px; border: 1px solid var(--line); border-radius: 16px; background: var(--paper); box-shadow: var(--shadow-soft); scrollbar-width: thin; } .course-tree { display: grid; gap: 4px; } .tree-module { border-radius: 10px; } .tree-module-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 10px; align-items: center; width: 100%; min-height: 46px; padding: 0 10px; border: 0; border-radius: 10px; background: transparent; color: var(--ink); font: inherit; font-weight: 700; text-align: left; cursor: pointer; } .tree-module-head:hover { background: var(--panel); } .tree-num { display: grid; place-items: center; width: 28px; height: 24px; border-radius: 6px; background: color-mix(in srgb, var(--brand) 12%, transparent); color: var(--brand); font-size: 0.72rem; font-weight: 800; } .tree-module-title { font-size: 0.92rem; line-height: 1.2; } .tree-count { font-size: 0.72rem; font-weight: 800; color: var(--muted); font-variant-numeric: tabular-nums; } .tree-module.is-complete .tree-count { color: var(--mint); } .tree-caret { color: var(--muted); font-size: 0.7rem; transition: transform 0.2s ease; } .tree-module.is-open .tree-caret { transform: rotate(90deg); } .tree-lessons { display: none; padding: 2px 0 8px 12px; margin-left: 22px; border-left: 1px solid var(--line); } .tree-module.is-open .tree-lessons { display: grid; gap: 2px; } .tree-lesson { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 8px; align-items: center; width: 100%; min-height: 36px; padding: 4px 10px; border: 0; border-radius: 8px; background: transparent; color: var(--ink-soft); font: inherit; font-size: 0.87rem; text-align: left; cursor: pointer; } .tree-lesson:hover { background: var(--panel); color: var(--ink); } .tree-lesson.is-active { background: color-mix(in srgb, var(--brand) 14%, transparent); color: var(--brand-ink); font-weight: 700; } .tree-lesson-check { display: grid; place-items: center; width: 18px; height: 18px; border: 1.6px solid var(--line-strong); border-radius: 50%; } .tree-lesson-check svg { width: 12px; height: 12px; fill: transparent; } .tree-lesson.is-complete .tree-lesson-check { border-color: var(--mint); background: var(--mint); } .tree-lesson.is-complete .tree-lesson-check svg { fill: #fff; } .tree-lesson.is-hidden, .tree-module.is-hidden { display: none; } .search-empty { padding: 16px; color: var(--muted); font-size: 0.9rem; text-align: center; } /* ---------- Reader ---------- */ .reader { min-width: 0; padding: clamp(22px, 3.4vw, 40px); border: 1px solid var(--line); border-radius: 18px; background: var(--paper); box-shadow: var(--shadow-strong); } .reader-bar { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-bottom: 14px; margin-bottom: 18px; border-bottom: 1px solid var(--line); } .reader-crumb { margin: 0; color: var(--brand); font-weight: 800; font-size: 0.82rem; letter-spacing: 0.03em; text-transform: uppercase; } .reader-count { margin: 0; color: var(--muted); font-size: 0.82rem; font-weight: 700; } .lesson-kicker { margin: 0 0 6px; color: var(--accent); font-weight: 800; font-size: 0.78rem; letter-spacing: 0.05em; text-transform: uppercase; } .lesson-head h2 { margin-bottom: 12px; font-size: clamp(1.7rem, 3.2vw, 2.6rem); } .lesson-summary { max-width: 70ch; color: var(--ink-soft); font-size: 1.12rem; line-height: 1.55; } .lesson-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin: 20px 0 8px; } .lesson-complete { min-height: 44px; padding: 0 20px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--panel); color: var(--ink); font: inherit; font-weight: 800; cursor: pointer; } .lesson-complete:hover { border-color: var(--mint); } .lesson-complete.is-done { border-color: transparent; background: linear-gradient(140deg, var(--mint), #17a685); color: #fff; } .lesson-pager { display: inline-flex; gap: 8px; } .pager-btn { min-height: 44px; padding: 0 16px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--paper); color: var(--ink-soft); font: inherit; font-weight: 700; cursor: pointer; } .pager-btn:hover:not(:disabled) { border-color: var(--brand); color: var(--brand); } .pager-btn:disabled { opacity: 0.4; cursor: not-allowed; } .keyboard-hint { margin: 0 0 6px; color: var(--muted); font-size: 0.82rem; } /* ---------- Lesson body blocks ---------- */ .lesson-body { margin-top: 26px; } .lesson-body > * { margin-bottom: 20px; } .lb-p { max-width: 74ch; color: var(--ink-soft); font-size: 1.04rem; line-height: 1.72; } .lb-p strong { color: var(--ink); } .lb-p code, .lb-step-body code, .lb-list code, .lb-compare code, .lb-callout-body code { padding: 1px 6px; border-radius: 5px; background: color-mix(in srgb, var(--brand) 12%, transparent); color: var(--brand-ink); font: 600 0.86em "JetBrains Mono", monospace; } .lb-h { margin-top: 30px; margin-bottom: 4px; font-size: 1.28rem; color: var(--ink); } .lb-list { max-width: 74ch; margin: 0; padding-left: 22px; display: grid; gap: 8px; color: var(--ink-soft); line-height: 1.6; } .lb-list li::marker { color: var(--brand); } /* diagram */ .lb-diagram { margin: 26px 0; padding: 18px; border: 1px solid var(--line); border-radius: 16px; background: var(--diag-bg); } .lb-diagram-svg svg { width: 100%; height: auto; display: block; } .lb-diagram figcaption { margin-top: 12px; color: var(--muted); font-size: 0.9rem; line-height: 1.5; text-align: center; } /* analogy */ .lb-analogy { max-width: 76ch; padding: 18px 20px; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--accent) 34%, var(--line)); background: color-mix(in srgb, var(--accent) 8%, var(--paper)); } .lb-analogy-tag { display: inline-block; margin-bottom: 6px; color: var(--accent); font-weight: 800; font-size: 0.74rem; letter-spacing: 0.06em; text-transform: uppercase; } .lb-analogy-body { color: var(--ink-soft); line-height: 1.65; } /* callout */ .lb-callout { max-width: 78ch; padding: 18px 20px; border-radius: 14px; border: 1px solid var(--line-strong); border-left-width: 4px; background: var(--panel); } .lb-callout-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; margin-bottom: 8px; } .lb-callout-badge { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: #fff; } .lb-callout-title { font-size: 1.02rem; color: var(--ink); } .lb-callout-body { color: var(--ink-soft); line-height: 1.65; } .lb-callout--key { border-left-color: var(--brand); } .lb-callout--key .lb-callout-badge { background: var(--brand); } .lb-callout--tip { border-left-color: var(--mint); } .lb-callout--tip .lb-callout-badge { background: var(--mint); } .lb-callout--warn { border-left-color: var(--warn); } .lb-callout--warn .lb-callout-badge { background: var(--warn); } /* table */ .lb-table-wrap { max-width: 100%; overflow-x: auto; } .lb-table { width: 100%; border-collapse: collapse; font-size: 0.95rem; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; } .lb-table thead th { padding: 11px 14px; background: color-mix(in srgb, var(--brand) 12%, var(--panel)); color: var(--ink); font-weight: 800; text-align: left; font-size: 0.86rem; } .lb-table td, .lb-table .lb-row-head { padding: 10px 14px; border-top: 1px solid var(--line); color: var(--ink-soft); text-align: left; vertical-align: top; } .lb-table .lb-row-head { font-weight: 700; color: var(--ink); } .lb-table tbody tr:nth-child(even) { background: color-mix(in srgb, var(--ink) 3%, transparent); } .lb-table-cap { margin: 8px 2px 0; color: var(--muted); font-size: 0.85rem; } /* steps */ .lb-steps { max-width: 78ch; margin: 0; padding: 0; list-style: none; counter-reset: step; display: grid; gap: 12px; } .lb-steps li { position: relative; padding: 14px 16px 14px 54px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); counter-increment: step; } .lb-steps li::before { content: counter(step); position: absolute; left: 14px; top: 14px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: linear-gradient(140deg, var(--brand), #2078de); color: #fff; font-weight: 800; font-size: 0.9rem; } .lb-step-title { display: block; margin-bottom: 3px; color: var(--ink); font-size: 1.02rem; } .lb-step-body { color: var(--ink-soft); line-height: 1.6; } /* compare */ .lb-compare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; max-width: 100%; } .lb-compare-col { padding: 16px 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); } .lb-compare-title { margin-bottom: 10px; color: var(--brand-ink); font-size: 0.96rem; } .lb-compare-col ul { margin: 0; padding-left: 18px; display: grid; gap: 7px; color: var(--ink-soft); font-size: 0.95rem; line-height: 1.5; } .lb-compare-col li::marker { color: var(--brand); } /* code */ .lb-code { max-width: 78ch; border: 1px solid var(--line-strong); border-radius: 12px; overflow: hidden; background: var(--diag-bg); } .lb-code-label { display: block; padding: 8px 14px; border-bottom: 1px solid var(--line); background: var(--panel); color: var(--muted); font-size: 0.76rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; } .lb-code pre { margin: 0; padding: 14px 16px; overflow-x: auto; color: var(--ink); font: 400 0.88rem/1.6 "JetBrains Mono", monospace; } /* ---------- Lesson footer ---------- */ .lesson-foot { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 32px; padding-top: 26px; border-top: 1px solid var(--line); } .lf-card { padding: 16px 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); } .lf-title { margin-bottom: 12px; font-size: 0.82rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; } .lf-card--take .lf-title { color: var(--mint); } .lf-card--pit .lf-title { color: var(--warn); } .lf-card--iv .lf-title { color: var(--brand); } .lf-list { display: grid; gap: 9px; margin: 0; padding: 0; list-style: none; } .lf-list li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 8px; align-items: start; color: var(--ink-soft); font-size: 0.92rem; line-height: 1.5; } .lf-mark { margin-top: 3px; display: grid; place-items: center; width: 16px; height: 16px; } .lf-mark svg { width: 14px; height: 14px; fill: var(--mint); } .lf-card--pit .lf-list li::before, .lf-card--iv .lf-list li::before { content: ""; margin-top: 7px; width: 7px; height: 7px; border-radius: 50%; } .lf-card--pit .lf-list li::before { background: var(--warn); } .lf-card--iv .lf-list li::before { background: var(--brand); } .lf-card--pit .lf-mark, .lf-card--iv .lf-mark { display: none; } .lf-card--pit .lf-list li, .lf-card--iv .lf-list li { grid-template-columns: 7px minmax(0, 1fr); } /* ---------- Lesson jump nav ---------- */ .lesson-jump { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 26px; } .jump-card { display: grid; gap: 4px; padding: 16px 18px; border: 1px solid var(--line-strong); border-radius: 14px; background: var(--paper); color: var(--ink); font: inherit; text-align: left; cursor: pointer; } .jump-card.next { text-align: right; } .jump-card:hover { border-color: var(--brand); background: var(--panel); } .jump-card span { color: var(--muted); font-size: 0.8rem; font-weight: 700; } .jump-card strong { color: var(--ink); font-size: 1rem; } /* ---------- Content diagram primitives (d-*) ---------- */ .d-box { fill: var(--diag-box-fill); stroke: var(--diag-box-stroke); stroke-width: 1.8; } .d-box.accent { fill: var(--diag-accent-fill); stroke: var(--diag-accent-stroke); } .d-box.warn { fill: var(--diag-warn-fill); stroke: var(--diag-warn-stroke); } .d-box.new { fill: var(--diag-new-fill); stroke: var(--diag-new-stroke); } .d-box.lane { fill: var(--diag-region); stroke: var(--diag-region-stroke); } .d-lane { fill: var(--diag-lane-fill); stroke: var(--diag-lane-stroke); stroke-width: 1.4; } .d-region { fill: var(--diag-region); stroke: var(--diag-region-stroke); stroke-width: 1.6; } .d-circle { fill: var(--diag-box-fill); stroke: var(--diag-box-stroke); stroke-width: 2; } .d-circle.accent { fill: var(--diag-accent-fill); stroke: var(--diag-accent-stroke); } .d-circle.warn { fill: var(--diag-warn-fill); stroke: var(--diag-warn-stroke); } .d-ring { fill: none; stroke: var(--diag-accent-stroke); stroke-width: 2; stroke-dasharray: 4 6; } .d-node { fill: var(--diag-accent-fill); stroke: var(--diag-accent-stroke); stroke-width: 2; } .d-line { fill: none; stroke: var(--diag-line); color: var(--diag-line); stroke-width: 2.4; } .d-line.dash { stroke-dasharray: 6 5; } .d-line.muted { stroke: var(--diag-muted); color: var(--diag-muted); stroke-dasharray: 6 6; } .d-axis { stroke: var(--diag-muted); stroke-width: 1.6; } .d-sep { stroke: var(--diag-region-stroke); stroke-width: 1.4; stroke-dasharray: 5 5; } .d-curve { fill: none; stroke: var(--diag-line); stroke-width: 2.6; } .d-curve.ok { stroke: var(--mint); } .d-curve.warn { stroke: var(--warn); } .d-t { fill: var(--diag-text); font: 700 15px Manrope, sans-serif; text-anchor: middle; } .d-s { fill: var(--diag-subtext); font: 600 12px Manrope, sans-serif; text-anchor: middle; } .d-cap { fill: var(--diag-text); font: 700 12.5px Manrope, sans-serif; text-anchor: middle; } .d-mono { fill: var(--diag-text); font: 600 12.5px "JetBrains Mono", monospace; text-anchor: start; } .d-dot { stroke-width: 0; } .d-dot.ok { fill: var(--mint); } .d-dot.bad { fill: var(--warn); } .d-dot.new { fill: var(--accent); } .d-bar { fill: var(--diag-accent-stroke); } .d-bar.ok { fill: var(--mint); } .d-bar.warn { fill: var(--warn); } /* ---------- Practice ---------- */ .practice-section { background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--accent) 6%, transparent)); } .interview-kit { margin-bottom: 34px; padding: clamp(20px, 3vw, 30px); border: 1px solid var(--line); border-radius: 20px; background: radial-gradient(circle at 98% 0%, color-mix(in srgb, var(--brand) 18%, transparent), transparent 42%), radial-gradient(circle at 0% 90%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 34%), var(--paper); box-shadow: var(--shadow-soft); } .interview-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } .ik-card { padding: 20px; border: 1px solid var(--line); border-radius: 14px; background: color-mix(in srgb, var(--panel) 90%, transparent); } .ik-card h3 { margin-bottom: 10px; font-size: 1.08rem; } .ik-card ul, .ik-card ol { margin: 0; padding-left: 20px; color: var(--ink-soft); display: grid; gap: 7px; line-height: 1.55; font-size: 0.95rem; } .ik-card li::marker { color: var(--brand); font-weight: 800; } .ik-card.featured { border-color: color-mix(in srgb, var(--brand) 40%, var(--line)); background: linear-gradient(150deg, color-mix(in srgb, var(--brand) 12%, var(--paper)), var(--paper)); } .ik-card .quote { margin: 10px 0 8px; padding: 12px 14px; border-left: 3px solid var(--brand); border-radius: 0 10px 10px 0; background: color-mix(in srgb, var(--brand) 8%, transparent); color: var(--ink); font-weight: 600; } .ik-card .mini { margin: 0; color: var(--muted); font-size: 0.86rem; } .premium-ribbon { margin-top: 16px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } .premium-ribbon div { padding: 14px; border: 1px dashed color-mix(in srgb, var(--brand) 34%, var(--line)); border-radius: 12px; background: color-mix(in srgb, var(--brand) 6%, var(--paper)); } .premium-ribbon strong { display: block; margin-bottom: 5px; color: var(--brand-ink); font-size: 0.92rem; } .premium-ribbon p { margin: 0; color: var(--ink-soft); font-size: 0.88rem; line-height: 1.45; } .practice-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } .practice-grid article { padding: 22px; border: 1px solid var(--line); border-radius: 14px; background: var(--paper); box-shadow: var(--shadow-soft); } .practice-grid span { display: grid; width: 42px; height: 42px; place-items: center; margin-bottom: 16px; border-radius: 10px; background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); font-weight: 900; } .practice-grid h3 { margin-bottom: 8px; font-size: 1.1rem; } .practice-grid p { margin: 0; color: var(--muted); font-size: 0.92rem; } .scorecard { margin-top: 18px; padding: 18px 20px; border: 1px solid var(--line-strong); border-radius: 14px; background: var(--paper); } .scorecard h3 { margin-bottom: 10px; font-size: 1.04rem; } .scorecard-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .scorecard-grid p { margin: 0; padding: 11px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); color: var(--ink-soft); font-size: 0.9rem; line-height: 1.45; } /* ---------- Footer ---------- */ .footer { display: flex; justify-content: space-between; gap: 20px; padding: 26px clamp(18px, 5vw, 66px); border-top: 1px solid var(--line); color: var(--muted); } .footer p { margin: 0; } .footer a { color: var(--ink); font-weight: 800; } /* ---------- Animations ---------- */ @keyframes lift-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { * { animation: none !important; scroll-behavior: auto !important; transition: none !important; } } /* ---------- Responsive ---------- */ @media (max-width: 1080px) { .hero { grid-template-columns: 1fr; } .hero-system { max-width: 560px; } .course-shell { grid-template-columns: 1fr; } .course-nav { position: static; max-height: 420px; } .diagram-grid { grid-template-columns: 1fr; } .practice-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .interview-grid, .premium-ribbon, .scorecard-grid { grid-template-columns: 1fr; } } @media (max-width: 720px) { .topnav { display: none; } .brand-text small { display: none; } .hero-pillars { grid-template-columns: 1fr; } .stats-band { grid-template-columns: repeat(2, minmax(0, 1fr)); } .stats-band div:nth-child(-n + 2) { border-bottom: 1px solid rgba(255, 255, 255, 0.12); } .lesson-foot { grid-template-columns: 1fr; } .lb-compare { grid-template-columns: 1fr; } .lesson-jump { grid-template-columns: 1fr; } .practice-grid { grid-template-columns: 1fr; } .lesson-actions { flex-direction: column; align-items: stretch; } .lesson-pager { justify-content: space-between; } .footer { flex-direction: column; } }