:root { --bg:#f5f4ef; --surface:#fffefa; --ink:#17201d; --muted:#65706a; --line:#d9ddd4; --accent:#17795c; --accent-weak:#dff2e9; --danger:#a84634; --code:#15201d; --shadow:0 12px 36px rgba(20,35,27,.08); font-family: Inter, "PingFang SC", "Microsoft YaHei", sans-serif; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; color:var(--ink); background:var(--bg); line-height:1.65; } a { color:inherit; text-decoration:none; } button { font:inherit; cursor:pointer; }
.topbar { height:68px; padding:0 max(28px, calc((100vw - 1240px)/2)); display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); background:rgba(245,244,239,.9); backdrop-filter:blur(12px); position:sticky; top:0; z-index:10; }
.brand { display:flex; gap:10px; align-items:center; min-width:0; font-weight:760; letter-spacing:-.3px; }.brand span:last-child { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.brand-mark { flex:0 0 auto; display:grid; place-items:center; width:30px; height:30px; color:white; background:var(--accent); border-radius:8px; font-family:inherit; font-size:16px; }.topbar-actions { display:flex; flex:0 0 auto; gap:16px; align-items:center; color:var(--muted); font-size:14px; }.platform-link { color:var(--muted); font-size:13px; }.platform-link:hover { color:var(--accent); }.icon-button { border:1px solid var(--line); background:var(--surface); color:var(--ink); height:34px; width:34px; border-radius:50%; }
.home { max-width:1180px; margin:auto; padding:70px 28px 88px; }.hero { max-width:850px; padding:45px 0 88px; }.eyebrow,.section-kicker { color:var(--accent); font-weight:800; font-size:12px; letter-spacing:1.4px; margin:0 0 12px; }.hero h1 { font-size:clamp(42px,6vw,76px); line-height:1.08; letter-spacing:-3px; margin:0; }.hero-copy { font-size:19px; max-width:720px; color:var(--muted); margin:26px 0; }.hero-copy strong { color:var(--ink); }.hero-actions { display:flex; gap:12px; flex-wrap:wrap; }.button { min-height:45px; padding:10px 17px; border-radius:8px; display:inline-flex; gap:14px; align-items:center; justify-content:center; font-weight:720; }.primary { background:var(--accent); color:white; }.ghost { border:1px solid var(--line); background:var(--surface); }.hero-note { color:var(--muted); font-size:14px; margin-top:30px; display:flex; gap:8px; align-items:center; }.pulse { display:block; width:9px; height:9px; border-radius:50%; background:#39b77e; box-shadow:0 0 0 5px #d7f2e4; }
.snapshot { border-top:1px solid var(--line); padding:70px 0; }.snapshot h2,.section-heading h2 { letter-spacing:-1.2px; font-size:30px; margin:0 0 30px; }.problem-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }.problem-grid article { background:var(--surface); border:1px solid var(--line); padding:26px; border-radius:10px; }.problem-grid span { color:var(--accent); font-weight:800; font-family:monospace; }.problem-grid h3 { margin:12px 0 4px; font-size:18px; }.problem-grid p { margin:0; color:var(--muted); font-size:14px; }
.route { padding-top:50px; }.section-heading { display:flex; align-items:end; justify-content:space-between; gap:20px; }.section-heading > p { color:var(--muted); font-size:14px; }.route-list { border-top:1px solid var(--line); }.route-item { display:grid; grid-template-columns:76px 1fr auto; align-items:center; gap:18px; padding:21px 8px; border-bottom:1px solid var(--line); transition:.2s; }.route-item.available:hover { padding-left:16px; background:var(--accent-weak); }.route-index { font:700 13px monospace; color:var(--muted); }.route-item strong { display:block; font-size:17px; }.route-item p { margin:2px 0 0; color:var(--muted); font-size:14px; }.route-state { font-size:13px; color:var(--muted); }.available .route-state { color:var(--accent); font-weight:800; } footer { padding:22px; border-top:1px solid var(--line); color:var(--muted); text-align:center; font-size:13px; }
.chapter-layout { max-width:1240px; padding:38px 28px 90px; margin:auto; display:grid; grid-template-columns:216px minmax(0,1fr); gap:54px; }.chapter-nav { position:sticky; top:102px; height:max-content; border-left:1px solid var(--line); }.chapter-nav p { margin:16px 0 7px 15px; color:var(--muted); font:800 11px ui-monospace,monospace; letter-spacing:.7px; text-transform:uppercase; }.chapter-nav p:first-child { margin-top:0; }.chapter-nav a { display:block; padding:7px 0 7px 15px; font-size:13px; color:var(--muted); }.chapter-nav a.active { color:var(--accent); font-weight:800; border-left:2px solid var(--accent); margin-left:-1px; }.chapter { max-width:820px; }.chapter-header { padding-bottom:36px; border-bottom:1px solid var(--line); }.chapter-header h1 { font-size:clamp(35px,5vw,57px); line-height:1.12; letter-spacing:-2px; margin:0; }.chapter-header .lead { font-size:19px; color:var(--muted); max-width:700px; }.chapter section { margin:48px 0; }.chapter h2 { font-size:26px; letter-spacing:-.8px; margin:0 0 16px; }.chapter h3 { font-size:18px; margin:22px 0 8px; }.chapter p,.chapter li { color:var(--muted); }.chapter strong { color:var(--ink); }.question-card,.exercise { padding:28px; border-radius:10px; background:#ecf6ef; border:1px solid #c8e4d3; }.question-card h2,.exercise h2 { margin-top:0; }.reveal-answer { background:var(--accent); color:white; border:0; padding:9px 14px; border-radius:7px; font-weight:700; }.answer { border-top:1px solid #c8e4d3; margin-top:18px; padding-top:18px; color:var(--ink); }.comparison { width:100%; border-collapse:collapse; font-size:14px; background:var(--surface); border:1px solid var(--line); }.comparison th,.comparison td { text-align:left; padding:13px; border-bottom:1px solid var(--line); }.comparison th { background:#eceee9; }.comparison tr:last-child td { border:0; }.code-block { border-radius:10px; overflow:hidden; background:var(--code); box-shadow:var(--shadow); margin:20px 0; }.code-header { padding:8px 14px; display:flex; justify-content:space-between; color:#c4d1c9; border-bottom:1px solid #314039; font:12px monospace; }.copy-code { background:transparent; color:#b8e6ce; border:0; }.code-block pre { overflow:auto; padding:18px; margin:0; color:#dce9e1; font:13px/1.7 ui-monospace,SFMono-Regular,Menlo,monospace; }.bad { color:#ff9d83; }.good { color:#9de0b7; }.inline-code { background:#e7e9e4; padding:1px 5px; font:13px ui-monospace,monospace; border-radius:4px; color:var(--ink); }.exercise { background:var(--surface); border-color:var(--line); }.exercise-options { display:grid; gap:10px; }.exercise-option { border:1px solid var(--line); background:var(--surface); border-radius:8px; padding:13px; text-align:left; }.exercise-option:hover { border-color:var(--accent); }.exercise-option.selected { border-color:var(--accent); background:var(--accent-weak); }.feedback { margin-top:15px; padding:13px; border-radius:7px; display:none; }.feedback.show { display:block; }.feedback.correct { color:#125f45; background:#dff2e9; }.feedback.wrong { color:#8f3728; background:#fbe3de; }.before-after { display:grid; grid-template-columns:1fr 1fr; gap:14px; }.before-after > div { padding:20px; border-radius:9px; border:1px solid var(--line); background:var(--surface); }.before-after .before { border-top:3px solid #d77766; }.before-after .after { border-top:3px solid var(--accent); }.chapter-footer { display:flex; justify-content:space-between; gap:20px; padding-top:28px; border-top:1px solid var(--line); }
body.dark { --bg:#101714; --surface:#18221e; --ink:#ecf5ef; --muted:#abbab1; --line:#314039; --accent:#65c69e; --accent-weak:#1d3c30; --code:#09100d; --shadow:none; }.dark .topbar { background:rgba(16,23,20,.9); }.dark .question-card { background:#153326; border-color:#2c674e; }.dark .comparison th { background:#202d27; }.dark .inline-code { background:#2b3832; }.dark .feedback.correct { background:#183d2d; color:#b5eed1; }.dark .feedback.wrong { background:#4a2924; color:#ffc6b9; }

/* Platform home */
.platform-main { width:min(1120px, calc(100% - 56px)); margin:0 auto; padding:72px 0 90px; }
.platform-hero { max-width:850px; padding:38px 0 58px; }
.platform-hero h1 { margin:0; max-width:760px; font-size:clamp(48px,7vw,86px); line-height:.98; letter-spacing:-4px; }
.platform-lead { max-width:680px; margin:24px 0 0; color:var(--muted); font-size:20px; line-height:1.7; }
.course-catalog { margin-top:28px; }
.course-card { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(260px,.65fr); gap:28px; padding:32px; border:1px solid var(--line); border-radius:18px; background:var(--surface); box-shadow:var(--shadow); }
.course-status { width:max-content; margin:0 0 16px; padding:7px 10px; border-radius:999px; background:var(--accent-weak); color:var(--accent); font:800 12px ui-monospace,monospace; letter-spacing:.4px; }
.course-card h3 { margin:0; font-size:clamp(28px,4vw,48px); line-height:1.08; letter-spacing:-1.8px; }
.course-card p { max-width:720px; }
.course-meta { display:flex; flex-wrap:wrap; gap:10px; margin-top:22px; }
.course-meta span { padding:8px 10px; border:1px solid var(--line); border-radius:999px; color:var(--muted); font-size:13px; }
.course-card-side { display:flex; flex-direction:column; justify-content:space-between; min-height:260px; padding:24px; border-radius:14px; background:#edf8f0; }
.course-card-side span { color:var(--accent); font:800 12px ui-monospace,monospace; letter-spacing:.7px; }
.course-card-side strong { color:var(--ink); font-size:28px; line-height:1.12; letter-spacing:-1.1px; }
.course-card-side .button { width:max-content; margin:0; }
.dark .course-card { background:var(--surface); }
.dark .course-card-side { background:#153326; }
@media(max-width:760px) { .topbar { padding:0 16px; }.platform-link { display:none; }.progress-copy { display:none; }.platform-main { width:calc(100% - 36px); padding:42px 0 62px; }.platform-hero h1 { letter-spacing:-2px; }.platform-lead { font-size:17px; }.course-card { grid-template-columns:1fr; padding:22px; }.course-card-side { min-height:220px; }.home { padding:40px 18px 60px; }.hero { padding-top:20px; }.hero h1 { letter-spacing:-1.8px; }.problem-grid,.before-after { grid-template-columns:1fr; }.section-heading { align-items:start; flex-direction:column; }.section-heading > p { margin:0; }.route-item { grid-template-columns:42px 1fr; }.route-state { grid-column:2; }.chapter-layout { display:block; padding:26px 18px 60px; }.chapter-nav { display:none; }.chapter-header h1 { letter-spacing:-1.4px; }.chapter-footer { gap:10px; }.chapter-footer a { font-size:14px; } }

/* Opening lesson: problem-first course entry */
.launch-main { max-width:1180px; margin:auto; padding:72px 28px 96px; }.lesson-label { font:600 12px ui-monospace,monospace; letter-spacing:.4px; }.launch-hero { padding:20px 0 86px; border-bottom:1px solid var(--line); }.launch-hero-grid { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(280px,.65fr); gap:54px; align-items:end; }.chapter-count { margin:0 0 13px; color:var(--muted); font:700 13px ui-monospace,monospace; }.launch-hero h1 { max-width:760px; margin:0; font-size:clamp(44px,5.6vw,76px); letter-spacing:-3.8px; line-height:1.05; }.launch-hero h1 em { color:var(--accent); font-style:normal; }.course-position { display:inline-flex; margin:26px 0 0; padding:7px 10px; border:1px solid #bedbc9; border-radius:999px; background:#edf8f0; color:var(--accent)!important; font:800 13px ui-monospace,monospace; letter-spacing:.2px; }.launch-lead { max-width:720px; margin:16px 0 0; color:var(--muted); font-size:19px; }.system-brief { position:relative; overflow:hidden; padding:25px; background:var(--code); color:#eaf4ee; border-radius:12px; box-shadow:var(--shadow); }.system-brief::after { content:""; position:absolute; width:150px; height:150px; right:-70px; top:-60px; border:1px solid #5f8c78; border-radius:50%; }.brief-status { display:flex; align-items:center; gap:7px; color:#a9cab9; font:700 11px ui-monospace,monospace; letter-spacing:.6px; }.brief-status i { width:7px; height:7px; background:#70daa2; border-radius:50%; box-shadow:0 0 0 4px rgba(112,218,162,.13); }.system-brief h2 { margin:21px 0 6px; color:#fff; font-size:25px; letter-spacing:-.7px; }.system-brief p { position:relative; margin:0; color:#b8c9bf; font-size:14px; }.brief-stack { position:relative; display:flex; align-items:center; flex-wrap:wrap; gap:7px; margin:23px 0 16px; color:#7fd5a5; font:700 12px ui-monospace,monospace; }.brief-stack span { padding:5px 7px; border:1px solid #406051; border-radius:5px; }.brief-stack b { color:#6d9982; }.brief-foot { padding-top:15px; border-top:1px solid #34483d; }
.discovery-header h2,.closing-question h2 { margin:0; letter-spacing:-1.5px; line-height:1.18; font-size:34px; }
.discovery { padding:72px 0 0; border-top:1px solid var(--line); }.discovery-header { display:flex; justify-content:space-between; gap:40px; align-items:end; margin-bottom:34px; }.discovery-header > p { max-width:230px; margin:0; color:var(--muted); font-size:14px; }.question-navigator { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-bottom:18px; }.question-tab { display:flex; align-items:center; gap:9px; padding:12px; border:1px solid var(--line); border-radius:7px; background:var(--surface); color:var(--muted); text-align:left; font-size:13px; transition:.18s; }.question-tab b { color:var(--accent); font:700 11px ui-monospace,monospace; }.question-tab:hover,.question-tab.active { color:var(--ink); border-color:var(--accent); background:var(--accent-weak); }.question-panel { min-height:330px; padding:42px 46px 0; border:1px solid var(--line); border-radius:12px; background:var(--surface); box-shadow:var(--shadow); animation:rise-in .2s ease-out; }.panel-index { margin:0 0 12px; color:var(--accent); font:800 12px ui-monospace,monospace; letter-spacing:1px; }.question-panel h3 { margin:0 0 28px; font-size:clamp(27px,3vw,39px); letter-spacing:-1.3px; line-height:1.2; }.question-list { display:grid; grid-template-columns:1fr 1fr; gap:0 38px; }.question-list p { position:relative; margin:0; padding:15px 0 15px 20px; border-top:1px solid var(--line); color:var(--muted); font-size:16px; }.question-list p::before { content:"?"; position:absolute; left:0; color:var(--accent); font-weight:800; }.question-panel footer { display:flex; gap:14px; margin:26px -46px 0; padding:17px 46px; background:#edf1ec; color:var(--muted); font-size:13px; }.question-panel footer b { color:var(--ink); }.closing-question { max-width:850px; margin:98px 0 0; padding:0 0 30px; }.closing-question h2 { font-size:clamp(34px,4.3vw,53px); }.closing-question > p:not(.section-kicker) { max-width:680px; color:var(--muted); font-size:18px; }.closing-question .button { margin-top:12px; border:0; }
@keyframes rise-in { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:translateY(0); } }
body.dark .question-tab,.dark .question-panel { background:var(--surface); }.dark .question-tab.active { background:var(--accent-weak); }.dark .question-panel footer { background:#202d27; }
@media(max-width:760px) { .lesson-label { display:none; }.launch-main { padding:40px 18px 60px; }.launch-hero { padding:0 0 54px; }.launch-hero-grid { display:block; }.launch-hero h1 { letter-spacing:-2.3px; }.system-brief { margin-top:30px; }.discovery { padding-top:54px; }.discovery-header { display:block; }.discovery-header > p { margin-top:12px; }.question-navigator { grid-template-columns:1fr 1fr; }.question-tab { min-height:48px; padding:9px; font-size:12px; }.question-panel { min-height:0; padding:29px 22px 0; }.question-panel h3 { font-size:28px; }.question-list { grid-template-columns:1fr; }.question-panel footer { display:block; margin:22px -22px 0; padding:15px 22px; }.question-panel footer b { display:block; margin-top:4px; }.closing-question { margin-top:65px; } }

/* Page 02: database design review */
.database-layout { grid-template-columns:196px minmax(0,1fr); gap:64px; }.database-chapter { max-width:870px; }.database-chapter .chapter-header { position:relative; padding:14px 0 46px 82px; }.database-chapter .page-number { position:absolute; left:0; top:8px; color:var(--accent); font:800 45px/1 Georgia,serif; }.database-chapter .chapter-header h1 { font-size:clamp(42px,5.3vw,65px); }.review-intro { margin-top:46px!important; }.review-intro h2,.design-rules > h2,.schema-section h2,.conclusion-section h2 { font-size:31px; letter-spacing:-1px; }.review-intro > p:not(.section-kicker),.schema-section > p:not(.section-kicker),.conclusion-section > p:not(.section-kicker) { max-width:700px; }.review-code { margin-top:24px; }.code-hint { color:#87aa96; }.review-question-card { background:#e7f3ea; }.audit-prompts { display:grid; grid-template-columns:1fr 1fr; gap:0 30px; margin:19px 0; }.audit-prompts p { position:relative; margin:0; padding:11px 0 11px 17px; border-top:1px solid #c6dfce; color:var(--ink)!important; }.audit-prompts p::before { content:'?'; position:absolute; left:0; color:var(--accent); font-weight:800; }.audit-conclusion { margin:18px 0 0; padding-top:17px; border-top:1px solid #c6dfce; }.rule-list { border-top:1px solid var(--line); }.rule-item { display:grid; grid-template-columns:46px minmax(0,1fr); gap:14px; padding:22px 4px; border-bottom:1px solid var(--line); align-items:start; }.rule-item > span { color:var(--accent); font:800 13px ui-monospace,monospace; padding-top:4px; }.rule-item h3 { margin:0; font-size:19px; }.rule-item p { margin:4px 0 0; font-size:14px; }.rule-detail { grid-column:2 / -1; margin-top:4px; padding:14px 16px; border-left:2px solid var(--accent); background:var(--accent-weak); border-radius:0 7px 7px 0; }.rule-detail > code { color:var(--accent); font:13px ui-monospace,monospace; }.rule-detail p { color:var(--ink); }.schema-workspace { display:grid; grid-template-columns:1.3fr .7fr; margin-top:24px; border:1px solid var(--line); border-radius:11px; overflow:hidden; background:var(--surface); }.schema-code { margin:0; border-radius:0; box-shadow:none; }.schema-code .code-block { margin:0; }.schema-code pre { padding:22px; }.code-highlight { display:block; width:100%; background:rgba(71,151,109,.18); color:#b6f3cf; }.design-note { padding:27px; background:#edf3ed; }.design-note .note-label { margin:0 0 12px; color:var(--accent); font:800 11px ui-monospace,monospace; letter-spacing:.7px; }.design-note h3 { margin:0 0 12px; font-size:21px; line-height:1.25; }.design-note p:not(.note-label) { margin:12px 0 0; color:var(--muted); font-size:14px; }.design-note strong { color:var(--ink); }.conclusion-table { margin-top:22px; border:1px solid var(--line); border-radius:10px; overflow:hidden; background:var(--surface); }.conclusion-head,.conclusion-row { display:grid; grid-template-columns:minmax(220px,1fr) 120px minmax(260px,1.2fr); gap:16px; align-items:center; padding:15px 20px; border-bottom:1px solid var(--line); }.conclusion-head { background:#edf0eb; color:var(--muted); font-size:12px; font-weight:800; }.conclusion-row:last-child { border-bottom:0; }.conclusion-row p { margin:0; color:var(--ink); font-size:14px; }.verdict { display:inline-flex; justify-content:center; width:max-content; min-width:74px; padding:5px 9px; border-radius:999px; font-size:12px; }.verdict.yes { color:#166446; background:#dff2e9; }.verdict.no { color:#8f3728; background:#fbe3de; }.verdict.caution { color:#76520b; background:#fff0bd; }.page-summary { padding:35px; border:1px solid #bedbc9; border-radius:12px; background:#edf8f0; }.page-summary ol { margin:19px 0 0; padding-left:22px; }.page-summary li { margin:8px 0; color:var(--ink); }.page-summary blockquote { margin:28px 0 0; padding:18px 20px; border-left:3px solid var(--accent); background:rgba(255,255,255,.57); color:var(--ink); font-size:18px; font-weight:750; }.page-summary blockquote span { color:var(--muted); font-size:14px; font-weight:400; }.next-question { max-width:250px; color:var(--muted); font-size:13px; text-align:right; }
.dark .review-question-card,.dark .page-summary { background:#153326; border-color:#2c674e; }.dark .audit-prompts p,.dark .audit-conclusion { border-color:#2c674e; }.dark .design-note { background:#202d27; }.dark .conclusion-head { background:#202d27; }.dark .schema-workspace,.dark .conclusion-table { background:var(--surface); }.dark .verdict.yes { color:#b5eed1; background:#183d2d; }.dark .verdict.no { color:#ffc6b9; background:#4a2924; }.dark .verdict.caution { color:#ffe19a; background:#40310d; }
@media(max-width:760px) { .database-layout { display:block; }.database-chapter .chapter-header { padding-left:56px; }.database-chapter .page-number { font-size:34px; }.database-chapter .chapter-header h1 { font-size:42px; }.audit-prompts { grid-template-columns:1fr; }.rule-item { grid-template-columns:32px minmax(0,1fr); }.rule-detail { grid-column:2; }.schema-workspace { grid-template-columns:1fr; }.schema-code pre { padding:16px; font-size:11px; }.design-note { min-height:170px; }.conclusion-head { display:none; }.conclusion-row { grid-template-columns:1fr; gap:9px; padding:16px; }.next-question { display:none; }.page-summary { padding:24px; } }

/* Page 03: Docker MySQL classroom demo */
.docker-layout { grid-template-columns:196px minmax(0,1fr); gap:64px; }.docker-chapter { max-width:900px; }.docker-hero { position:relative; min-height:calc(100vh - 118px); display:flex; flex-direction:column; justify-content:center; padding:36px 0 70px 86px; border-bottom:1px solid var(--line); }.docker-hero .page-number { position:absolute; left:0; top:58px; color:var(--accent); font:800 45px/1 Georgia,serif; }.docker-hero h1 { max-width:760px; margin:0; font-size:clamp(43px,5.6vw,72px); line-height:1.05; letter-spacing:-3px; }.docker-command-workspace { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(230px,.85fr); gap:16px; align-items:stretch; width:min(100%,860px); margin:34px 0 22px; }.command-block { width:100%; margin:0; }.command-block pre { padding:14px 0; font-size:14px; }.docker-command-line { display:block; width:100%; margin:0; padding:0 18px; border:0; background:transparent; color:inherit; text-align:left; font:inherit; white-space:pre; }.docker-command-line:hover,.docker-command-line.selected { background:rgba(71,151,109,.2); color:#b6f3cf; }.command-note { padding:22px; border:1px solid var(--line); border-radius:10px; background:var(--surface); }.command-note .note-label { margin:0 0 10px; color:var(--accent); font:800 11px ui-monospace,monospace; letter-spacing:.7px; }.command-note h2 { margin:0 0 10px; font-size:20px; line-height:1.25; letter-spacing:-.5px; }.command-note p:not(.note-label) { margin:0; color:var(--muted); font-size:14px; }.run-done-button { width:max-content; border:0; }.hero-one-liner { margin:18px 0 0; color:var(--muted); font-size:18px; }.docker-after-run section { scroll-margin-top:92px; }.docker-after-run h2 { font-size:clamp(30px,4vw,46px); line-height:1.12; letter-spacing:-1.6px; }.attention-list { border-top:1px solid var(--line); }.attention-item { display:grid; grid-template-columns:50px minmax(0,1fr); gap:18px; padding:30px 4px; border-bottom:1px solid var(--line); }.attention-item > span,.concept-list article > span { color:var(--accent); font:800 13px ui-monospace,monospace; padding-top:5px; }.attention-item h3,.concept-list h3,.benefit-grid h3,.answer-list h3,.check-grid h3,.task-card h3 { margin:0 0 9px; color:var(--ink); }.attention-item ul,.task-card ul { margin:14px 0 0; padding-left:21px; }.prompt-line { margin-top:16px!important; color:var(--ink)!important; font-weight:760; }.mapping-line { display:inline-flex; margin:13px 0 0; padding:7px 10px; border-radius:6px; background:var(--accent-weak); color:var(--accent)!important; font:700 13px ui-monospace,monospace; }.teacher-conclusion { margin-top:16px!important; padding:14px 16px; border-left:3px solid var(--accent); background:#edf8f0; color:var(--ink)!important; font-weight:720; }.mini-code { margin:14px 0; box-shadow:none; }.mini-code pre { padding:14px 16px; font-size:12px; }.flow-compare { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:16px 0; }.flow-compare > div,.task-card,.concept-list article,.benefit-grid article,.answer-list article,.check-grid article { padding:20px; border:1px solid var(--line); border-radius:8px; background:var(--surface); }.flow-compare b { color:var(--ink); }.flow-compare p,.diagram-text { color:var(--ink)!important; font:700 14px/1.8 ui-monospace,monospace; }.danger-callout { margin:18px 0; padding:16px; border:1px solid #edb5a9; border-radius:8px; background:#fff0ed; }.danger-callout p { margin:0 0 10px; color:#8f3728!important; font-weight:760; }.check-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:22px; }.check-grid article:nth-child(3) { grid-column:1 / -1; }.task-card { margin-top:18px; background:#edf8f0; border-color:#bedbc9; }.task-card ul { display:grid; grid-template-columns:1fr 1fr; gap:8px 24px; list-style:none; padding-left:0; }.config-table { margin-top:20px; }.concept-list { display:grid; gap:16px; margin-top:22px; }.concept-list article { display:grid; grid-template-columns:42px minmax(0,1fr); align-items:start; }.concept-list article > *:not(span) { grid-column:2; }.benefit-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:22px; }.benefit-grid article:last-child { grid-column:1 / -1; }.answer-list { display:grid; gap:12px; margin-top:22px; }.answer-list article { border-left:3px solid var(--accent); }.answer-list p { margin-bottom:0; }.docker-mysql-lesson .page-summary { margin-top:56px; }.docker-mysql-lesson .chapter-footer { margin-top:28px; }
.dark .teacher-conclusion,.dark .task-card { background:#153326; border-color:#2c674e; }.dark .command-note,.dark .flow-compare > div,.dark .concept-list article,.dark .benefit-grid article,.dark .answer-list article,.dark .check-grid article { background:var(--surface); }.dark .danger-callout { background:#4a2924; border-color:#7b463c; }.dark .danger-callout p { color:#ffc6b9!important; }
@media(max-width:760px) { .docker-layout { display:block; }.docker-hero { min-height:auto; padding:34px 0 58px 56px; }.docker-hero .page-number { top:39px; font-size:34px; }.docker-hero h1 { font-size:42px; letter-spacing:-2px; }.docker-command-workspace { grid-template-columns:1fr; }.command-block pre { font-size:11px; }.docker-command-line { padding:0 14px; }.attention-item { grid-template-columns:32px minmax(0,1fr); }.flow-compare,.check-grid,.benefit-grid { grid-template-columns:1fr; }.check-grid article:nth-child(3),.benefit-grid article:last-child { grid-column:auto; }.task-card ul { grid-template-columns:1fr; }.concept-list article { grid-template-columns:32px minmax(0,1fr); } }

/* Page 04: Gin querying MySQL */
.gin-layout { grid-template-columns:196px minmax(0,1fr); gap:64px; }.gin-chapter { max-width:930px; }.gin-header { position:relative; padding-left:82px; }.gin-header .page-number { position:absolute; left:0; top:8px; color:var(--accent); font:800 45px/1 Georgia,serif; }.gin-header h1 { font-size:clamp(40px,5vw,63px); }.code-explain-workspace { display:grid; grid-template-columns:1.35fr .65fr; gap:16px; align-items:start; margin-top:22px; }.gin-code { margin:0; }.gin-code pre { padding:16px 0; font-size:11.5px; max-height:650px; }.gin-hotspot { display:block; width:100%; margin:0; padding:0 18px; border:0; background:transparent; color:inherit; text-align:left; font:inherit; white-space:pre-wrap; }.gin-hotspot:hover,.gin-hotspot.selected { background:rgba(71,151,109,.2); color:#b6f3cf; }.gin-note { position:sticky; top:92px; padding:24px; border:1px solid var(--line); border-radius:10px; background:var(--surface); }.gin-note .note-label { margin:0 0 10px; color:var(--accent); font:800 11px ui-monospace,monospace; letter-spacing:.7px; }.gin-note h3 { margin:0 0 10px; font-size:21px; line-height:1.25; }.gin-note p:not(.note-label) { margin:0; color:var(--muted); font-size:14px; }.api-result { display:grid; grid-template-columns:.75fr 1.25fr; gap:16px; align-items:start; margin-top:18px; }.api-result > div:first-child { padding:22px; border:1px solid var(--line); border-radius:8px; background:var(--surface); }.api-result code { color:var(--accent); font:800 14px ui-monospace,monospace; }.prompt-grid { display:grid; grid-template-columns:1fr 1fr; gap:0 28px; border-top:1px solid var(--line); }.prompt-grid p { position:relative; margin:0; padding:13px 0 13px 18px; border-bottom:1px solid var(--line); color:var(--ink); }.prompt-grid p::before { content:"?"; position:absolute; left:0; color:var(--accent); font-weight:800; }.flow-line { display:grid; gap:8px; margin-top:20px; max-width:560px; }.flow-line span { position:relative; padding:11px 14px; border:1px solid var(--line); border-radius:7px; background:var(--surface); color:var(--ink); font-weight:720; }.flow-line span:not(:last-child)::after { content:"↓"; position:absolute; left:50%; bottom:-20px; color:var(--accent); transform:translateX(-50%); }.compact-table .conclusion-head,.compact-table .conclusion-row { grid-template-columns:minmax(190px,1fr) 130px minmax(260px,1.2fr); }.dual-section,.compare-code { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:22px; }.dual-section article,.compare-code article { padding:20px; border:1px solid var(--line); border-radius:8px; background:var(--surface); }.dual-section h3,.compare-code h3 { margin-top:0; }.migrate-warning { padding:30px; border:1px solid #edb5a9; border-radius:10px; background:#fff0ed; }.migrate-warning h2 { color:#8f3728; }.migrate-warning p:not(.section-kicker) { color:#6f3026; }.migrate-prompts { margin-top:20px; }.dark .gin-note,.dark .api-result > div:first-child,.dark .dual-section article,.dark .compare-code article { background:var(--surface); }.dark .migrate-warning { background:#4a2924; border-color:#7b463c; }.dark .migrate-warning h2,.dark .migrate-warning p:not(.section-kicker) { color:#ffc6b9; }
@media(max-width:760px) { .gin-layout { display:block; }.gin-header { padding-left:56px; }.gin-header .page-number { font-size:34px; }.gin-header h1 { font-size:40px; }.code-explain-workspace,.api-result,.prompt-grid,.dual-section,.compare-code { grid-template-columns:1fr; }.gin-note { position:static; }.gin-code pre { font-size:10.5px; }.gin-hotspot { padding:0 14px; }.compact-table .conclusion-head { display:none; }.compact-table .conclusion-row { grid-template-columns:1fr; } }

/* Page 05: API design */
.api-layout { grid-template-columns:196px minmax(0,1fr); gap:64px; }.api-chapter { max-width:900px; }.api-header { position:relative; padding-left:82px; }.api-header .page-number { position:absolute; left:0; top:8px; color:var(--accent); font:800 45px/1 Georgia,serif; }.api-header h1 { font-size:clamp(40px,5.2vw,65px); }.api-code-workspace .gin-code pre { max-height:none; font-size:12px; }.api-hotspot { display:block; width:100%; margin:0; padding:0 18px; border:0; background:transparent; color:inherit; text-align:left; font:inherit; white-space:pre-wrap; }.api-hotspot:hover,.api-hotspot.selected { background:rgba(71,151,109,.2); color:#b6f3cf; }.api-note { position:sticky; top:92px; padding:24px; border:1px solid var(--line); border-radius:10px; background:var(--surface); }.api-note .note-label { margin:0 0 10px; color:var(--accent); font:800 11px ui-monospace,monospace; letter-spacing:.7px; }.api-note h3 { margin:0 0 10px; font-size:21px; line-height:1.25; }.api-note p:not(.note-label) { margin:0; color:var(--muted); font-size:14px; }.issue-strip { display:flex; flex-wrap:wrap; gap:8px; margin-top:18px; }.issue-strip span { padding:6px 10px; border:1px solid #edb5a9; border-radius:999px; background:#fff0ed; color:#8f3728; font-size:12px; font-weight:760; }.api-contract { display:grid; grid-template-columns:.8fr 1.2fr; gap:16px; align-items:start; margin-top:22px; }.api-contract > div:first-child { padding:22px; border:1px solid var(--line); border-radius:8px; background:var(--surface); }.api-contract code { color:var(--accent); font:800 14px ui-monospace,monospace; }.status-table { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:18px; }.status-table > div { padding:18px; border:1px solid var(--line); border-radius:8px; background:var(--surface); }.status-table b { display:block; color:var(--ink); }.status-table span { display:inline-block; margin:8px 0; padding:4px 7px; border-radius:999px; background:var(--accent-weak); color:var(--accent); font:800 11px ui-monospace,monospace; }.status-table p { margin:0; font-size:13px; }.status-conclusion .conclusion-head,.status-conclusion .conclusion-row { grid-template-columns:minmax(190px,1fr) 90px minmax(280px,1.2fr); }.dark .api-note,.dark .api-contract > div:first-child,.dark .status-table > div { background:var(--surface); }.dark .issue-strip span { background:#4a2924; border-color:#7b463c; color:#ffc6b9; }
@media(max-width:760px) { .api-layout { display:block; }.api-header { padding-left:56px; }.api-header .page-number { font-size:34px; }.api-header h1 { font-size:40px; }.api-code-workspace,.api-contract,.status-table { grid-template-columns:1fr; }.api-note { position:static; }.api-hotspot { padding:0 14px; }.status-conclusion .conclusion-head { display:none; }.status-conclusion .conclusion-row { grid-template-columns:1fr; } }

/* Page 06: auth, JWT and permission */
.auth-layout { grid-template-columns:196px minmax(0,1fr); gap:64px; }.auth-chapter { max-width:930px; }.auth-header { position:relative; padding-left:82px; }.auth-header .page-number { position:absolute; left:0; top:8px; color:var(--accent); font:800 45px/1 Georgia,serif; }.auth-header h1 { font-size:clamp(40px,5.2vw,65px); }.auth-question-card { margin-top:20px; }.big-equation { margin:24px 0 0; padding:20px; border:1px solid #bedbc9; border-radius:10px; background:#edf8f0; color:var(--ink)!important; font-size:24px; font-weight:820; text-align:center; }.big-equation span { color:var(--danger); margin:0 12px; }.auth-concept-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:22px; }.auth-concept-grid article { padding:22px; border:1px solid var(--line); border-radius:8px; background:var(--surface); }.auth-concept-grid h3 { margin-top:0; }.auth-concept-grid b { display:block; margin:8px 0; color:var(--accent); }.jwt-token { display:flex; align-items:center; gap:8px; margin:22px 0; font:800 22px ui-monospace,monospace; }.jwt-token span { color:var(--muted); }.jwt-part { border:1px solid var(--line); border-radius:8px; padding:12px 16px; background:var(--surface); color:var(--muted); font:inherit; }.jwt-part:hover,.jwt-part.active { border-color:var(--accent); background:var(--accent-weak); color:var(--accent); }.jwt-note,.auth-note,.bug-note { padding:22px; border:1px solid var(--line); border-radius:10px; background:var(--surface); }.jwt-note .note-label,.auth-note .note-label,.bug-note .note-label { margin:0 0 10px; color:var(--accent); font:800 11px ui-monospace,monospace; letter-spacing:.7px; }.jwt-note h3,.auth-note h3,.bug-note h3 { margin:0 0 10px; font-size:21px; }.jwt-note p:not(.note-label),.auth-note p:not(.note-label),.bug-note p:not(.note-label) { margin:0; color:var(--muted); font-size:14px; }.auth-code-workspace { display:grid; grid-template-columns:1.35fr .65fr; gap:16px; align-items:start; }.auth-hotspot,.bug-line { display:block; width:100%; margin:0; padding:0 18px; border:0; background:transparent; color:inherit; text-align:left; font:inherit; white-space:pre-wrap; }.auth-hotspot:hover,.auth-hotspot.selected,.bug-line:hover,.bug-line.selected { background:rgba(71,151,109,.2); color:#b6f3cf; }.auth-code-workspace .auth-note,.auth-code-workspace .bug-note { position:sticky; top:92px; }.identity-table .conclusion-head,.identity-table .conclusion-row { grid-template-columns:minmax(230px,1fr) 110px minmax(260px,1.1fr); }.matrix-table { display:grid; grid-template-columns:1.1fr 1fr 1fr; gap:1px; margin:18px 0; border:1px solid var(--line); background:var(--line); border-radius:8px; overflow:hidden; }.matrix-table > * { margin:0; padding:13px; border:0; background:var(--surface); color:var(--ink); text-align:center; font-weight:720; }.matrix-table > div:nth-child(-n+3) { background:#edf0eb; color:var(--muted); font:800 12px ui-monospace,monospace; }.matrix-table button { color:#166446; }.matrix-table button.deny { color:#8f3728; }.auth-status-table { grid-template-columns:repeat(3,1fr); }.auth-quiz { display:grid; gap:10px; margin-top:18px; }.auth-quiz article { display:grid; grid-template-columns:minmax(220px,1fr) 190px 110px; gap:14px; align-items:center; padding:14px 16px; border:1px solid var(--line); border-radius:8px; background:var(--surface); }.auth-quiz p { margin:0; color:var(--ink); }.auth-quiz div { display:flex; gap:5px; }.auth-quiz button { flex:1; padding:5px 7px; border:1px solid var(--line); border-radius:6px; background:var(--surface); color:var(--muted); }.auth-quiz button:hover,.auth-quiz button.selected { border-color:var(--accent); background:var(--accent-weak); color:var(--accent); }.auth-quiz output { font-size:12px; color:var(--muted); }.auth-quiz output.correct-result { color:#167b57; }.auth-quiz output.retry-result { color:#a84634; }.dark .big-equation { background:#153326; border-color:#2c674e; }.dark .auth-concept-grid article,.dark .jwt-part,.dark .jwt-note,.dark .auth-note,.dark .bug-note,.dark .auth-quiz article { background:var(--surface); }.dark .matrix-table > div:nth-child(-n+3) { background:#202d27; }
@media(max-width:760px) { .auth-layout { display:block; }.auth-header { padding-left:56px; }.auth-header .page-number { font-size:34px; }.auth-header h1 { font-size:40px; }.auth-concept-grid,.auth-code-workspace,.auth-status-table { grid-template-columns:1fr; }.auth-code-workspace .auth-note,.auth-code-workspace .bug-note { position:static; }.jwt-token { flex-wrap:wrap; font-size:18px; }.identity-table .conclusion-head { display:none; }.identity-table .conclusion-row { grid-template-columns:1fr; }.auth-quiz article { grid-template-columns:1fr; }.matrix-table { font-size:12px; } }

/* Page 07: OSS object storage */
.oss-layout { grid-template-columns:196px minmax(0,1fr); gap:64px; }.oss-chapter { max-width:930px; }.oss-header { position:relative; padding-left:82px; }.oss-header .page-number { position:absolute; left:0; top:8px; color:var(--accent); font:800 45px/1 Georgia,serif; }.oss-header h1 { font-size:clamp(38px,5vw,63px); }.oss-opening-grid { display:grid; grid-template-columns:.8fr 1.2fr; gap:18px; align-items:stretch; margin-top:22px; }.oss-local-flow { display:grid; place-items:center; gap:8px; min-height:300px; padding:26px; border:1px solid var(--line); border-radius:10px; background:var(--surface); text-align:center; }.oss-local-flow span,.oss-local-flow strong { display:block; width:100%; padding:15px; border:1px solid var(--line); border-radius:8px; background:#edf0eb; color:var(--ink); font-weight:820; }.oss-local-flow strong { border-color:#edb5a9; background:#fff0ed; color:#8f3728; }.oss-local-flow i { color:var(--accent); font-style:normal; font-weight:760; }.oss-benefit-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:22px; }.oss-benefit-grid article { padding:20px; border:1px solid var(--line); border-radius:8px; background:var(--surface); }.oss-benefit-grid span { color:var(--accent); font:800 12px ui-monospace,monospace; }.oss-benefit-grid h3 { margin:10px 0 8px; }.oss-benefit-grid p { margin:0; font-size:13px; }.object-tree { margin:18px 0; padding:22px; border:1px solid var(--line); border-radius:10px; background:var(--surface); }.object-tree pre { margin:0; color:var(--ink); font:800 14px/1.9 ui-monospace,monospace; overflow:auto; }.oss-concept-workspace { display:grid; grid-template-columns:210px minmax(0,1fr); gap:16px; margin:18px 0; }.oss-concept-tabs,.sequence-lab { display:grid; gap:10px; }.oss-concept-tabs button,.acl-grid button,.upload-choice-grid button,.sequence-lab button { border:1px solid var(--line); border-radius:8px; background:var(--surface); color:var(--muted); text-align:left; padding:12px 14px; font-weight:760; }.oss-concept-tabs button:hover,.oss-concept-tabs button.active,.acl-grid button:hover,.acl-grid button.active,.upload-choice-grid button:hover,.upload-choice-grid button.active,.sequence-lab button:hover,.sequence-lab button.active { border-color:var(--accent); background:var(--accent-weak); color:var(--accent); }.oss-note,.acl-note,.upload-note,.ak-note,.upload-code-note,.flow-step-note { padding:22px; border:1px solid var(--line); border-radius:10px; background:var(--surface); }.oss-note .note-label,.acl-note .note-label,.upload-note .note-label,.ak-note .note-label,.upload-code-note .note-label,.flow-step-note .note-label { margin:0 0 10px; color:var(--accent); font:800 11px ui-monospace,monospace; letter-spacing:.7px; }.oss-note h3,.acl-note h3,.upload-note h3,.ak-note h3,.upload-code-note h3,.flow-step-note h3 { margin:0 0 10px; font-size:21px; }.oss-note p:not(.note-label),.acl-note p:not(.note-label),.upload-note p:not(.note-label),.ak-note p:not(.note-label),.upload-code-note p:not(.note-label),.flow-step-note p:not(.note-label) { margin:0; color:var(--muted); font-size:14px; }.acl-grid,.upload-choice-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin:18px 0; }.acl-grid b,.upload-choice-grid b { display:block; margin-bottom:6px; color:var(--ink); }.acl-grid span,.upload-choice-grid span { display:block; font-size:12px; }.oss-code-workspace { grid-template-columns:1.28fr .72fr; }.ak-risk,.upload-code-line { display:block; width:100%; margin:0; padding:0 18px; border:0; background:transparent; color:inherit; text-align:left; font:inherit; white-space:pre-wrap; }.ak-risk:hover,.ak-risk.selected,.upload-code-line:hover,.upload-code-line.selected { background:rgba(71,151,109,.2); color:#b6f3cf; }.oss-code-workspace .ak-note,.oss-code-workspace .upload-code-note { position:sticky; top:92px; }.sequence-lab { grid-template-columns:repeat(5,1fr); margin:20px 0; }.sequence-lab button { text-align:center; font-size:12px; }.dark .oss-local-flow,.dark .oss-benefit-grid article,.dark .object-tree,.dark .oss-note,.dark .acl-note,.dark .upload-note,.dark .ak-note,.dark .upload-code-note,.dark .flow-step-note,.dark .oss-concept-tabs button,.dark .acl-grid button,.dark .upload-choice-grid button,.dark .sequence-lab button { background:var(--surface); }.dark .oss-local-flow span { background:#202d27; }.dark .oss-local-flow strong { background:#4a2924; border-color:#7b463c; color:#ffc6b9; }
@media(max-width:980px) { .topbar-actions { gap:8px; }.lesson-label { display:none; } }
@media(max-width:760px) { .oss-layout { display:block; }.oss-header { padding-left:56px; }.oss-header .page-number { font-size:34px; }.oss-header h1 { font-size:40px; }.oss-opening-grid,.oss-benefit-grid,.oss-concept-workspace,.acl-grid,.upload-choice-grid,.oss-code-workspace,.sequence-lab { grid-template-columns:1fr; }.oss-code-workspace .ak-note,.oss-code-workspace .upload-code-note { position:static; } }

.flow-intro { margin:22px 0 14px; padding:22px; border:1px solid #bedbc9; border-radius:10px; background:#edf8f0; }
.flow-intro h3 { margin:0 0 8px; font-size:22px; }
.flow-intro p:last-child { margin:0; color:var(--muted); }
.dark .flow-intro { background:#153326; border-color:#2c674e; }

/* Page 08: frontend integration */
.integration-layout { grid-template-columns:196px minmax(0,1fr); gap:64px; }.integration-chapter { max-width:930px; }.integration-header { position:relative; padding-left:82px; }.integration-header .page-number { position:absolute; left:0; top:8px; color:var(--accent); font:800 45px/1 Georgia,serif; }.integration-header h1 { font-size:clamp(38px,5vw,63px); }.integration-symptoms { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin:22px 0; }.integration-symptoms article,.structure-note,.network-panel,.network-quiz,.integration-quiz,.review-grid article,.code-review-lab { padding:20px; border:1px solid var(--line); border-radius:9px; background:var(--surface); }.integration-symptoms b { color:var(--accent); font:800 12px ui-monospace,monospace; }.integration-symptoms p { margin:12px 0 0; }.integration-question-card { margin-top:20px; }.structure-lab { display:grid; grid-template-columns:repeat(5,1fr); gap:10px; margin:18px 0; }.structure-lab button,.network-quiz button,.integration-quiz button,.code-review-lab button { border:1px solid var(--line); border-radius:8px; background:var(--surface); color:var(--muted); padding:12px; font-weight:760; }.structure-lab button:hover,.structure-lab button.active,.network-quiz button:hover,.network-quiz button.active,.integration-quiz button:hover,.integration-quiz button.active,.code-review-lab button:hover { border-color:var(--accent); background:var(--accent-weak); color:var(--accent); }.structure-note .note-label { margin:0 0 10px; color:var(--accent); font:800 11px ui-monospace,monospace; letter-spacing:.7px; }.structure-note h3 { margin:0 0 8px; font-size:21px; }.structure-note p:not(.note-label) { margin:0; color:var(--muted); }.proxy-flow { display:grid; grid-template-columns:1fr 32px 1fr 70px 1fr; gap:10px; align-items:center; margin:22px 0; }.proxy-flow span { padding:18px; border:1px solid var(--line); border-radius:9px; background:var(--surface); color:var(--ink); font-weight:760; text-align:center; }.proxy-flow b { color:var(--accent); font:800 13px ui-monospace,monospace; }.proxy-flow i { color:var(--accent); font-style:normal; font-weight:800; text-align:center; }.network-panel { display:grid; grid-template-columns:repeat(2,1fr); gap:1px; padding:0; overflow:hidden; background:var(--line); }.network-panel div { padding:16px; background:var(--surface); }.network-panel span { display:block; color:var(--muted); font:800 11px ui-monospace,monospace; }.network-panel b { display:block; margin-top:6px; color:var(--ink); overflow-wrap:anywhere; }.danger-text { color:var(--danger)!important; }.network-quiz,.integration-quiz { display:grid; gap:10px; margin:18px 0; }.network-quiz p { margin:0; color:var(--ink); font-weight:780; }.network-quiz output,.integration-quiz output,.code-review-lab output { display:block; min-height:22px; color:var(--muted); font-size:13px; }.correct-result { color:#167b57!important; }.retry-result { color:#a84634!important; }.review-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:18px; }.review-grid h3 { margin-top:0; }.review-grid p { margin-bottom:0; }.code-review-lab { margin-top:18px; }.code-review-lab output { display:none; margin-top:10px; }.code-review-lab output.show { display:block; }.dark .integration-symptoms article,.dark .structure-note,.dark .network-panel,.dark .network-panel div,.dark .network-quiz,.dark .integration-quiz,.dark .review-grid article,.dark .code-review-lab,.dark .structure-lab button,.dark .network-quiz button,.dark .integration-quiz button,.dark .code-review-lab button,.dark .proxy-flow span { background:var(--surface); }
@media(max-width:760px) { .integration-layout { display:block; }.integration-header { padding-left:56px; }.integration-header .page-number { font-size:34px; }.integration-header h1 { font-size:40px; }.integration-symptoms,.structure-lab,.proxy-flow,.network-panel,.review-grid { grid-template-columns:1fr; }.proxy-flow i { transform:rotate(90deg); } }

.diagnosis-callout { margin:18px 0; padding:20px; border:1px solid #bedbc9; border-radius:9px; background:#edf8f0; }
.diagnosis-callout h3 { margin:0 0 8px; font-size:20px; }
.diagnosis-callout p { margin:0; color:var(--muted); }
.code-review-lab p { margin:10px 0 0; color:var(--muted); }
.dark .diagnosis-callout { background:#153326; border-color:#2c674e; }

/* Page 09: production deployment */
.deploy-layout { grid-template-columns:196px minmax(0,1fr); gap:64px; }.deploy-chapter { max-width:940px; }.deploy-header { position:relative; padding-left:82px; }.deploy-header .page-number { position:absolute; left:0; top:8px; color:var(--accent); font:800 45px/1 Georgia,serif; }.deploy-header h1 { font-size:clamp(38px,5vw,63px); }.artifact-grid,.pipeline-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:22px 0; }.artifact-grid article,.pipeline-grid article,.deploy-note-grid article,.dockerfile-note { padding:20px; border:1px solid var(--line); border-radius:9px; background:var(--surface); }.artifact-grid span { color:var(--accent); font:800 12px ui-monospace,monospace; }.artifact-grid h3,.pipeline-grid h3,.deploy-note-grid h3 { margin-top:8px; }.deploy-arch { display:grid; grid-template-columns:1fr 40px 1fr 1fr; gap:12px; align-items:center; margin:22px 0; }.deploy-arch > span,.deploy-arch > strong,.deploy-arch > div { min-height:78px; display:grid; place-items:center; padding:16px; border:1px solid var(--line); border-radius:9px; background:var(--surface); color:var(--ink); text-align:center; font-weight:780; }.deploy-arch i { color:var(--accent); font-style:normal; font-weight:900; text-align:center; }.deploy-arch div b { display:block; }.deploy-arch div em { color:var(--muted); font-style:normal; font-size:12px; }.deploy-note-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin:18px 0; }.dockerfile-tabs { display:flex; gap:10px; flex-wrap:wrap; margin:18px 0; }.dockerfile-tabs button { border:1px solid var(--line); border-radius:8px; background:var(--surface); color:var(--muted); padding:10px 14px; font-weight:760; }.dockerfile-tabs button:hover,.dockerfile-tabs button.active { border-color:var(--accent); background:var(--accent-weak); color:var(--accent); }.dockerfile-note { margin:18px 0; }.dockerfile-note .note-label { margin:0 0 10px; color:var(--accent); font:800 11px ui-monospace,monospace; letter-spacing:.7px; }.dockerfile-note h3 { margin:0 0 8px; font-size:21px; }.dockerfile-note p:not(.note-label) { margin:0; color:var(--muted); }.compact-arch { grid-template-columns:1fr 26px 1fr 26px 1fr 1fr; }.compact-arch > * { min-height:62px!important; }.dark .artifact-grid article,.dark .pipeline-grid article,.dark .deploy-note-grid article,.dark .dockerfile-note,.dark .deploy-arch > span,.dark .deploy-arch > strong,.dark .deploy-arch > div,.dark .dockerfile-tabs button { background:var(--surface); }
@media(max-width:760px) { .deploy-layout { display:block; }.deploy-header { padding-left:56px; }.deploy-header .page-number { font-size:34px; }.deploy-header h1 { font-size:40px; }.artifact-grid,.pipeline-grid,.deploy-note-grid,.deploy-arch,.compact-arch { grid-template-columns:1fr; }.deploy-arch i { transform:rotate(90deg); } }

.dockerfile-workspace { display:grid; grid-template-columns:1.25fr .75fr; gap:16px; align-items:start; }
.dockerfile-workspace .dockerfile-note { position:sticky; top:92px; margin:0; }
.dockerfile-line,.dockerfile-plain,.dockerfile-blank { display:block; width:100%; min-height:22px; margin:0; padding:0 18px; border:0; background:transparent; color:inherit; text-align:left; font:inherit; white-space:pre; }
.dockerfile-line:hover,.dockerfile-line.selected { background:rgba(71,151,109,.2); color:#b6f3cf; }
@media(max-width:760px) { .dockerfile-workspace { grid-template-columns:1fr; }.dockerfile-workspace .dockerfile-note { position:static; } }

/* Page 10: observability and troubleshooting */
.ops-layout { grid-template-columns:196px minmax(0,1fr); gap:64px; }.ops-chapter { max-width:930px; }.ops-header { position:relative; padding-left:82px; }.ops-header .page-number { position:absolute; left:0; top:8px; color:var(--accent); font:800 45px/1 Georgia,serif; }.ops-header h1 { font-size:clamp(38px,5vw,63px); }.incident-card { margin:22px 0; padding:28px; border:1px solid #edb5a9; border-radius:12px; background:#fff0ed; }.incident-card span { display:block; color:#8f3728; font:800 12px ui-monospace,monospace; }.incident-card strong { display:block; margin-top:10px; color:#8f3728; font-size:34px; line-height:1.2; }.log-field-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin:18px 0; }.log-field-grid button { border:1px solid var(--line); border-radius:8px; background:var(--surface); color:var(--muted); padding:12px; font-weight:760; }.log-field-grid button:hover,.log-field-grid button.active { border-color:var(--accent); background:var(--accent-weak); color:var(--accent); }.log-field-note { padding:22px; border:1px solid var(--line); border-radius:10px; background:var(--surface); }.log-field-note .note-label { margin:0 0 10px; color:var(--accent); font:800 11px ui-monospace,monospace; letter-spacing:.7px; }.log-field-note h3 { margin:0 0 8px; font-size:21px; }.log-field-note p:not(.note-label) { margin:0; color:var(--muted); }.ops-flow { grid-template-columns:repeat(5,1fr); max-width:none; }.middleware-grid,.metric-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:18px 0; }.metric-grid { grid-template-columns:repeat(4,1fr); }.middleware-grid article,.metric-grid article { padding:20px; border:1px solid var(--line); border-radius:9px; background:var(--surface); }.metric-grid span { color:var(--accent); font:800 12px ui-monospace,monospace; }.metric-grid h3 { margin:8px 0; }.dark .incident-card { background:#4a2924; border-color:#7b463c; }.dark .incident-card span,.dark .incident-card strong { color:#ffc6b9; }.dark .log-field-note,.dark .log-field-grid button,.dark .middleware-grid article,.dark .metric-grid article { background:var(--surface); }
@media(max-width:760px) { .ops-layout { display:block; }.ops-header { padding-left:56px; }.ops-header .page-number { font-size:34px; }.ops-header h1 { font-size:40px; }.log-field-grid,.ops-flow,.middleware-grid,.metric-grid { grid-template-columns:1fr; }.incident-card strong { font-size:26px; } }

/* Page 11: performance and cache */
.performance-layout { grid-template-columns:196px minmax(0,1fr); gap:64px; }
.performance-chapter { max-width:930px; }
.performance-header { position:relative; padding-left:82px; }
.performance-header .page-number { position:absolute; left:0; top:8px; color:var(--accent); font:800 45px/1 Georgia,serif; }
.performance-header h1 { font-size:clamp(38px,5vw,63px); }
.performance-symptoms { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin:22px 0; }
.performance-symptoms article,.cache-risk-note { padding:20px; border:1px solid var(--line); border-radius:9px; background:var(--surface); }
.performance-symptoms b { color:var(--accent); font:800 12px ui-monospace,monospace; }
.performance-symptoms p { margin:8px 0 0; }
.perf-chain { display:grid; grid-template-columns:1fr 24px 1fr 24px 1fr 24px 1fr 24px 1fr 24px 1fr 24px 1fr; gap:8px; align-items:center; margin:22px 0; }
.perf-chain span { padding:14px; border:1px solid var(--line); border-radius:8px; background:var(--surface); color:var(--ink); text-align:center; font-weight:760; }
.perf-chain i { color:var(--accent); font-style:normal; font-weight:900; text-align:center; }
.latency-breakdown { display:grid; gap:12px; margin:22px 0; }
.latency-breakdown div { display:grid; grid-template-columns:140px 1fr; gap:12px; align-items:center; }
.latency-breakdown span { color:var(--muted); font:800 12px ui-monospace,monospace; }
.latency-breakdown b { display:block; min-width:58px; padding:8px 10px; border-radius:999px; background:var(--accent); color:white; font:800 12px ui-monospace,monospace; }
.cache-risk-tabs { display:flex; gap:10px; flex-wrap:wrap; margin:18px 0; }
.cache-risk-tabs button { border:1px solid var(--line); border-radius:8px; background:var(--surface); color:var(--muted); padding:10px 14px; font-weight:760; }
.cache-risk-tabs button:hover,.cache-risk-tabs button.active { border-color:var(--accent); background:var(--accent-weak); color:var(--accent); }
.cache-risk-note .note-label { margin:0 0 10px; color:var(--accent); font:800 11px ui-monospace,monospace; letter-spacing:.7px; }
.cache-risk-note h3 { margin:0 0 8px; font-size:21px; }
.cache-risk-note p:not(.note-label) { margin:0; color:var(--muted); }
.dark .performance-symptoms article,.dark .perf-chain span,.dark .cache-risk-tabs button,.dark .cache-risk-note { background:var(--surface); }
@media(max-width:760px) { .performance-layout { display:block; }.performance-header { padding-left:56px; }.performance-header .page-number { font-size:34px; }.performance-header h1 { font-size:40px; }.performance-symptoms,.perf-chain { grid-template-columns:1fr; }.perf-chain i { transform:rotate(90deg); }.latency-breakdown div { grid-template-columns:1fr; }.latency-breakdown b { width:100%!important; } }

/* Page 12: final project review */
.final-layout { grid-template-columns:196px minmax(0,1fr); gap:64px; }
.final-chapter { max-width:950px; }
.final-header { position:relative; padding-left:82px; }
.final-header .page-number { position:absolute; left:0; top:8px; color:var(--accent); font:800 45px/1 Georgia,serif; }
.final-header h1 { font-size:clamp(38px,5vw,63px); }
.final-timeline { display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin:24px 0; }
.final-timeline span { padding:11px 14px; border:1px solid var(--line); border-radius:999px; background:var(--surface); color:var(--ink); font-size:13px; font-weight:780; }
.final-timeline i { color:var(--accent); font-style:normal; font-weight:900; }
.final-check-grid,.decision-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:14px; margin:22px 0; }
.final-check-grid article,.decision-grid article { padding:21px; border:1px solid var(--line); border-radius:10px; background:var(--surface); }
.final-check-grid h3,.decision-grid h3 { margin:0 0 9px; font-size:18px; }
.final-check-grid p,.decision-grid p { margin:0; font-size:14px; }
.decision-grid article { position:relative; padding-left:64px; }
.decision-grid span { position:absolute; left:21px; top:23px; color:var(--accent); font:900 14px ui-monospace,monospace; }
.compact-table .conclusion-head,.compact-table .conclusion-row { grid-template-columns:minmax(190px,.9fr) 110px minmax(280px,1.25fr); }
.final-chapter .page-summary blockquote { margin-top:0; font-size:22px; line-height:1.45; }
.dark .final-timeline span,.dark .final-check-grid article,.dark .decision-grid article { background:var(--surface); }
@media(max-width:760px) { .final-layout { display:block; }.final-header { padding-left:56px; }.final-header .page-number { font-size:34px; }.final-header h1 { font-size:40px; }.final-timeline { align-items:flex-start; }.final-timeline i { display:none; }.final-check-grid,.decision-grid { grid-template-columns:1fr; }.decision-grid article { padding-left:21px; }.decision-grid span { position:static; display:block; margin-bottom:10px; } }