:root {
  --ink: #17211b;
  --muted: #627068;
  --line: #dce3de;
  --paper: #fff;
  --wash: #f4f7f5;
  --accent: #159455;
  --accent-dark: #0b6b3b;
  --accent-soft: #e5f5ec;
  --sidebar: 250px;
  --top: 68px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  color: var(--ink);
  background: var(--paper);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 92px; }
body { margin: 0; background: var(--paper); color: var(--ink); }
button, a { font: inherit; }
a { color: inherit; }
code, pre { font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace; }
.skip-link { position: fixed; left: 16px; top: -60px; z-index: 100; padding: 10px 14px; background: var(--ink); color: white; border-radius: 8px; }
.skip-link:focus { top: 10px; }
.progress-track { position: fixed; z-index: 70; top: 0; left: 0; right: 0; height: 3px; background: transparent; }
.progress-track span { display: block; width: 0; height: 100%; background: var(--accent); transition: width .15s linear; }

.topbar { position: fixed; z-index: 60; top: 0; left: 0; right: 0; height: var(--top); display: flex; align-items: center; justify-content: space-between; padding: 0 24px; background: rgba(255,255,255,.94); border-bottom: 1px solid var(--line); backdrop-filter: blur(14px); }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 750; text-decoration: none; letter-spacing: -.01em; }
.brand-mark { display: grid; place-items: center; width: 31px; height: 31px; border-radius: 9px; background: var(--ink); color: white; font-size: 14px; }
.top-actions { display: flex; align-items: center; gap: 8px; }
.time-chip { padding: 7px 11px; background: var(--wash); border-radius: 999px; color: var(--muted); font-size: 13px; }
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 38px; padding: 0 15px; border: 1px solid var(--line); border-radius: 9px; text-decoration: none; cursor: pointer; transition: .16s ease; }
.button:hover { transform: translateY(-1px); }
.button.primary { color: white; background: var(--ink); border-color: var(--ink); }
.button.secondary { color: var(--ink); background: white; }

.download-section { margin-left: var(--sidebar); padding: 70px clamp(36px, 6vw, 92px); border-top: 1px solid var(--line); background: var(--wash); }
.download-section > * { width: min(1120px, 100%); margin-left: auto; margin-right: auto; }
.download-heading { display: flex; align-items: end; justify-content: space-between; gap: 24px; }
.download-heading h2 { margin: 0; font-size: clamp(32px, 4vw, 50px); letter-spacing: -.045em; }
.download-heading p:last-child { margin: 12px 0 0; color: var(--muted); }
.download-heading > a { color: var(--accent-dark); font-size: 13px; }
.download-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 28px; }
.download-grid article { display: grid; grid-template-columns: auto 1fr auto; gap: 16px; align-items: center; padding: 22px; border: 1px solid var(--line); border-radius: 14px; background: white; }
.download-grid h3, .download-grid p { margin: 0; }
.download-grid h3 { font-size: 20px; }
.download-grid p { margin-top: 5px; color: var(--muted); font-size: 13px; }
.download-grid small { display: block; margin-top: 7px; color: #7b8780; line-height: 1.45; }
.os-mark { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 12px; background: var(--accent-soft); color: var(--accent-dark); font-size: 11px; font-weight: 850; }
.download-meta { display: flex; align-items: center; gap: 18px; margin-top: 16px; color: var(--muted); font-size: 12px; }
.download-meta a { color: var(--accent-dark); }
.download-meta a:last-child { margin-left: auto; }

.sidebar { position: fixed; z-index: 40; top: var(--top); bottom: 0; left: 0; width: var(--sidebar); padding: 28px 18px 20px; border-right: 1px solid var(--line); background: #fbfcfb; overflow-y: auto; }
.eyebrow { margin: 0 0 12px; color: var(--accent-dark); font-weight: 750; letter-spacing: .09em; text-transform: uppercase; font-size: 12px; }
.sidebar nav { display: grid; gap: 3px; }
.sidebar nav .nav-group { margin: 13px 10px 3px; color: #8a968f; font-size: 10px; font-weight: 800; letter-spacing: .12em; }
.sidebar nav .nav-group:first-child { margin-top: 2px; }
.sidebar nav a { display: flex; align-items: center; gap: 11px; min-height: 38px; padding: 0 10px; border-radius: 8px; color: #4d5a52; text-decoration: none; font-size: 14px; }
.sidebar nav a span { color: #98a29c; font-size: 11px; font-variant-numeric: tabular-nums; }
.sidebar nav a:hover, .sidebar nav a.active { background: var(--accent-soft); color: var(--accent-dark); font-weight: 650; }
.sidebar nav a.active span { color: var(--accent-dark); }
.sidebar-note { margin-top: 28px; padding: 14px; border: 1px solid var(--line); border-radius: 10px; font-size: 13px; line-height: 1.55; }
.sidebar-note strong, .sidebar-note span { display: block; }
.sidebar-note span { margin-top: 4px; color: var(--muted); }

main { margin-left: var(--sidebar); padding-top: var(--top); }
.lesson { min-height: calc(100vh - var(--top)); padding: 68px clamp(36px, 6vw, 92px); border-bottom: 1px solid var(--line); display: flex; flex-direction: column; justify-content: center; }
.lesson > * { width: min(1120px, 100%); margin-left: auto; margin-right: auto; }
.section-head { margin-bottom: 34px; }
.section-head h2 { margin: 0; max-width: 900px; font-size: clamp(34px, 4vw, 56px); line-height: 1.08; letter-spacing: -.045em; }
.section-head > p:last-child { margin: 13px 0 0; max-width: 760px; color: var(--muted); font-size: 18px; line-height: 1.65; }
h3 { letter-spacing: -.02em; }
.source { margin-top: 24px; color: var(--muted); font-size: 12px; }
.source a, figcaption a { color: var(--accent-dark); }

.hero { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(260px, .6fr); gap: 64px; align-items: center; background: radial-gradient(circle at 80% 25%, #eaf7f0, transparent 30%), white; }
.hero-copy, .hero-panel { width: auto; margin: 0; }
.hero h1 { margin: 0; font-size: clamp(48px, 5.4vw, 82px); line-height: .98; letter-spacing: -.065em; }
.hero h1 span { color: var(--accent); }
.lead { margin: 24px 0; color: var(--muted); font-size: 20px; }
.hero-actions { display: flex; gap: 10px; margin-top: 28px; }
.pitfall-map { margin-top: 22px; padding: 16px 18px; border: 1px solid #9fd5b6; border-radius: 12px; background: var(--accent-soft); }
.pitfall-map strong { display: block; margin-bottom: 8px; color: var(--accent-dark); font-size: 14px; }
.pitfall-map ol { margin: 0; padding-left: 20px; color: var(--ink); font-size: 14px; line-height: 1.7; }
.principle-line { margin: 16px 0 0; color: var(--muted); font-size: 15px; }
.appendix-banner { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-bottom: 18px; padding: 11px 14px; border-left: 3px solid #8a968f; border-radius: 8px; background: #f3f5f3; color: var(--muted); font-size: 13px; }
.appendix-banner strong { color: #4d5a52; }
.main-check-flow { margin-bottom: 18px; }
.process-tools { margin-top: 16px; }
.pitfall-pair { margin-top: 10px; }
.model-tip { margin-top: 14px; }
.final-checks small { display: block; margin-top: 8px; color: #8eddb1; font-size: 12px; line-height: 1.4; }
.final .final-checks small { color: #8eddb1; }
.status-filter-rules { margin-bottom: 16px; }
.hero-panel { padding: 28px; border: 1px solid var(--line); border-radius: 18px; background: rgba(255,255,255,.82); box-shadow: 0 24px 70px rgba(27,60,42,.09); }
.hero-panel > div { display: flex; align-items: baseline; justify-content: space-between; padding: 14px 0; border-bottom: 1px solid var(--line); }
.hero-panel span { color: var(--accent); font-size: 42px; font-weight: 780; }
.hero-panel p { margin: 0; color: var(--muted); }
.hero-panel .version-note { margin-top: 20px; font-size: 12px; line-height: 1.5; }
.flow-line { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; color: var(--muted); }
.flow-line span { padding: 9px 12px; border-radius: 8px; background: var(--wash); color: var(--ink); font-size: 14px; font-weight: 650; }
.flow-line i { color: var(--accent); font-style: normal; }
.flow-line.compact { justify-content: center; margin-top: 26px; }

.mode-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.mode-card { min-height: 240px; padding: 25px; border: 1px solid var(--line); border-radius: 14px; background: white; }
.mode-card.codex { border-color: #96d7b3; background: var(--accent-soft); }
.mode-icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: var(--wash); font-weight: 800; }
.codex .mode-icon { background: var(--accent); color: white; }
.mode-card h3 { margin: 24px 0 8px; font-size: 26px; }
.mode-card p { min-height: 54px; margin: 0 0 18px; line-height: 1.6; }
.mode-card small { color: var(--muted); }
.decision-strip { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 18px; padding: 18px 22px; border-radius: 12px; background: var(--ink); color: white; }
.decision-strip span { color: #cfdbd4; }

.two-column { display: grid; grid-template-columns: .85fr 1.15fr; gap: 34px; align-items: center; }
.step-list { display: grid; gap: 14px; }
.step-list article { display: flex; gap: 16px; align-items: flex-start; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.step-list b { display: grid; place-items: center; flex: 0 0 30px; height: 30px; border-radius: 8px; background: var(--accent-soft); color: var(--accent-dark); }
.step-list h3 { margin: 2px 0 5px; font-size: 18px; }
.step-list p { margin: 0; color: var(--muted); line-height: 1.55; }
.shot-card { margin: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: #f7f8f7; box-shadow: 0 18px 48px rgba(25,49,35,.08); }
.shot-button { display: block; width: 100%; padding: 0; border: 0; cursor: zoom-in; background: transparent; }
.shot-button img { display: block; width: 100%; max-height: 470px; object-fit: contain; }
.shot-card figcaption { display: flex; justify-content: space-between; gap: 12px; padding: 12px 15px; color: var(--muted); background: white; border-top: 1px solid var(--line); font-size: 12px; }
.shot-card figcaption span { color: var(--accent-dark); font-weight: 700; }
.callout { display: flex; gap: 18px; margin-top: 24px; padding: 18px 20px; border-left: 3px solid var(--accent); background: var(--wash); }
.callout strong { white-space: nowrap; }
.callout p { margin: 0; color: var(--muted); }
.callout.subtle { max-width: 760px; }
.callout.small { margin-top: 20px; font-size: 13px; }

.reading-more { width: min(1120px, 100%); margin-top: 22px; border: 1px solid var(--line); border-radius: 10px; background: #fbfcfb; }
.reading-more summary { padding: 13px 16px; color: var(--accent-dark); font-weight: 700; cursor: pointer; }
.reading-more > p, .reading-more > ol, .reading-more > .detail-grid { margin: 0; padding: 0 18px 18px; color: var(--muted); line-height: 1.65; }
.reading-more ol { padding-left: 38px; }
.detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 22px; }
.detail-grid p { margin: 0; }

.project-create-layout { display: grid; grid-template-columns: .78fr 1.22fr; gap: 20px; align-items: stretch; }
.project-create-steps { display: grid; grid-template-rows: auto 1fr; gap: 12px; }
.entry-shot .shot-button { background: #1d1f1e; }
.entry-shot .shot-button img { height: 105px; object-fit: cover; }
.click-steps.compact-steps { gap: 7px; }
.click-steps.compact-steps li { padding: 8px 11px; }
.click-steps.compact-steps small { font-size: 12px; }
.create-dialog-shot { display: flex; flex-direction: column; }
.create-dialog-shot .shot-button { flex: 1; display: grid; place-items: center; background: #171917; }
.create-dialog-shot .shot-button img { height: 100%; max-height: 370px; object-fit: contain; }
.project-callout { margin-top: 16px; padding-top: 13px; padding-bottom: 13px; }

.project-use-layout { display: grid; grid-template-columns: 1.12fr .88fr; gap: 18px; }
.project-tree { padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--wash); }
.project-root { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; align-items: center; padding: 11px 13px; border-radius: 10px; background: var(--ink); color: white; }
.project-root span { grid-row: 1 / 3; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 10px; background: #2c3a32; color: #8eddb1; font-size: 12px; }
.project-root small { color: #adbbb3; }
.task-branches { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 11px; }
.task-branches article { position: relative; padding: 11px 12px; border: 1px solid var(--line); border-radius: 9px; background: white; }
.task-branches article > span { color: var(--accent-dark); font-size: 11px; font-weight: 800; }
.task-branches strong, .task-branches small { display: block; }
.task-branches strong { margin-top: 5px; font-size: 14px; }
.task-branches small { margin-top: 4px; color: var(--muted); font-size: 11px; }
.project-use-shot .shot-button img { height: 285px; object-fit: contain; }
.project-decisions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 14px; }
.project-decisions article { padding: 11px 13px; border-left: 3px solid var(--accent); background: var(--wash); }
.project-decisions p { margin: 5px 0 0; color: var(--muted); font-size: 12px; line-height: 1.45; }
.manage-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 12px; }
.manage-strip span { padding: 9px 10px; border: 1px solid var(--line); border-radius: 8px; color: var(--muted); text-align: center; font-size: 12px; }
.manage-strip b { color: var(--ink); }

.sidebar-tools-layout { display: grid; grid-template-columns: .78fr 1.22fr; gap: 18px; align-items: stretch; }
.sidebar-tools-shot { display: flex; flex-direction: column; background: #171917; }
.sidebar-tools-shot .shot-button { flex: 1; display: grid; place-items: center; }
.sidebar-tools-shot .shot-button img { height: 100%; max-height: 440px; object-fit: contain; }
.sidebar-tool-list { display: grid; gap: 7px; }
.sidebar-tool-list article { display: grid; grid-template-columns: 120px 1fr; gap: 12px; align-items: center; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: white; }
.sidebar-tool-list h3, .sidebar-tool-list p { margin: 0; }
.sidebar-tool-list h3 { display: flex; align-items: center; gap: 8px; font-size: 17px; }
.sidebar-tool-list h3 span { display: grid; place-items: center; width: 27px; height: 27px; border-radius: 8px; background: var(--accent-soft); color: var(--accent-dark); font-size: 10px; }
.sidebar-tool-list p { color: var(--muted); font-size: 12px; line-height: 1.55; }
.sidebar-tool-list p b { color: var(--ink); }
.sidebar-tools-overview .sidebar-tool-list article { padding: 16px 18px; }
.sidebar-tools-overview .sidebar-tool-list p { font-size: 14px; }
.tool-chain { display: flex; align-items: center; gap: 10px; margin-top: 14px; padding: 11px 14px; border-radius: 10px; background: var(--wash); font-size: 12px; }
.tool-chain i { color: var(--accent); font-style: normal; }
.tool-chain small { margin-left: auto; color: var(--muted); }
.tool-guide-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.tool-guide-grid article { padding: 16px 17px; border: 1px solid var(--line); border-radius: 12px; background: white; }
.tool-guide-grid article:nth-child(5) { grid-column: 2 / 3; }
.tool-guide-grid h3 { display: flex; align-items: center; gap: 9px; margin: 0 0 12px; font-size: 19px; }
.tool-guide-grid h3 span { display: grid; place-items: center; width: 29px; height: 29px; border-radius: 8px; background: var(--accent-soft); color: var(--accent-dark); font-size: 11px; }
.tool-guide-grid p { margin: 6px 0 0; color: var(--muted); font-size: 13px; line-height: 1.48; }
.tool-guide-grid p b { color: var(--ink); }

.frequency-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.frequency-card { display: grid; grid-template-columns: .72fr 1.28fr; gap: 16px; padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: white; }
.frequency-card .shot-card { box-shadow: none; background: #171917; }
.frequency-card .shot-button img { height: 255px; object-fit: contain; }
.frequency-card h3 { margin: 4px 0 12px; font-size: 20px; }
.frequency-card p { margin: 8px 0 0; color: var(--muted); font-size: 13px; line-height: 1.55; }
.frequency-card p b { color: var(--ink); }

.git-settings-layout { display: grid; grid-template-columns: 1.05fr .95fr; gap: 18px; align-items: stretch; }
.git-settings-shot { display: flex; flex-direction: column; background: #171917; }
.git-settings-shot .shot-button { flex: 1; display: grid; place-items: center; }
.git-settings-shot .shot-button img { height: 100%; max-height: 420px; object-fit: contain; }
.git-setting-list { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.git-setting-list article { padding: 12px 13px; border: 1px solid var(--line); border-radius: 10px; }
.git-setting-list strong { font-size: 14px; }
.git-setting-list p { margin: 6px 0 0; color: var(--muted); font-size: 12px; line-height: 1.45; }

.agents-layout { display: grid; grid-template-columns: 1.05fr .95fr; gap: 18px; align-items: stretch; }
.agents-shot { display: flex; flex-direction: column; background: #171917; }
.agents-shot .shot-button { flex: 1; display: grid; place-items: center; }
.agents-shot .shot-button img { width: 100%; height: 100%; max-height: 355px; object-fit: contain; }
.agent-levels { display: grid; gap: 9px; }
.agent-levels article { padding: 13px 15px; border: 1px solid var(--line); border-radius: 11px; background: white; }
.agent-levels article:last-child { border-color: #9fd5b6; background: var(--accent-soft); }
.agent-levels span { color: var(--accent-dark); font-size: 11px; font-weight: 800; }
.agent-levels h3 { margin: 7px 0 5px; font-size: 17px; }
.agent-levels p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.45; }
.agent-precedence { display: flex; align-items: center; gap: 10px; margin-top: 14px; padding: 11px 14px; border-radius: 10px; background: var(--wash); font-size: 12px; }
.agent-precedence i { color: var(--accent); font-style: normal; }
.agent-precedence b { margin-left: auto; color: var(--accent-dark); }

.rules-layout { display: grid; grid-template-columns: 1.2fr .8fr; gap: 14px; }
.agents-template pre { min-height: 0; padding: 14px 17px; font-size: 12px; line-height: 1.55; }
.agents-write-guide { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.agents-write-guide article { padding: 13px 14px; border: 1px solid var(--line); border-radius: 11px; }
.agents-write-guide article:first-child { border-color: #9fd5b6; background: var(--accent-soft); }
.agents-write-guide h3 { margin: 0 0 7px; font-size: 17px; }
.agents-write-guide p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.rule-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 13px; }
.rule-cards article { padding: 13px 15px; border: 1px solid var(--line); border-radius: 11px; }
.rule-cards article:nth-child(2) { border-color: #9fd5b6; background: var(--accent-soft); }
.rule-cards span { color: var(--accent-dark); font-size: 11px; font-weight: 800; }
.rule-cards h3 { margin: 7px 0 8px; font-size: 19px; }
.rule-cards p { margin: 4px 0 0; color: var(--muted); font-size: 12px; line-height: 1.45; }
.rule-cards p b { color: var(--ink); }
.rule-callout { margin-top: 12px; padding: 11px 14px; font-size: 12px; }

.hooks-layout { display: grid; grid-template-columns: .9fr 1.1fr; gap: 18px; }
.hooks-shots { display: grid; grid-template-columns: .65fr 1.35fr; gap: 10px; align-items: stretch; }
.hooks-shots .shot-card { display: flex; flex-direction: column; background: #171917; }
.hooks-shots .shot-button { flex: 1; display: grid; place-items: center; }
.hooks-shots .shot-button img { height: 100%; max-height: 320px; object-fit: contain; }
.hooks-content { display: grid; align-content: start; gap: 13px; }
.hook-events { display: flex; align-items: center; justify-content: space-between; gap: 7px; padding: 12px; border-radius: 10px; background: var(--ink); color: white; font-size: 12px; }
.hook-events i { color: #71d39e; font-style: normal; }
.hooks-decisions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.hooks-decisions article { padding: 14px 16px; border: 1px solid var(--line); border-radius: 10px; }
.hooks-decisions article:first-child { border-color: #a8dabe; background: var(--accent-soft); }
.hooks-decisions h3 { margin: 0 0 8px; font-size: 17px; }
.hooks-decisions ul { margin: 0; padding-left: 18px; color: var(--muted); font-size: 13px; line-height: 1.65; }
.hooks-content .callout { margin-top: 0; font-size: 13px; }

.plugin-picked-layout { display: grid; grid-template-columns: .9fr 1.1fr; gap: 16px; align-items: stretch; }
.plugin-picked-shots { display: grid; grid-template-rows: 1.3fr .7fr; gap: 10px; }
.plugin-picked-shots .shot-card { display: flex; flex-direction: column; background: #171917; box-shadow: none; }
.plugin-picked-shots .shot-button { flex: 1; display: grid; place-items: center; }
.plugin-picked-shots .shot-button img { width: 100%; height: 100%; max-height: 245px; object-fit: contain; }
.plugin-picked-shots .product-design-shot .shot-button img { max-height: 135px; }
.plugin-use-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.plugin-use-grid article { padding: 11px 13px; border: 1px solid var(--line); border-radius: 10px; background: white; }
.plugin-use-grid h3, .plugin-use-grid p { margin: 0; }
.plugin-use-grid h3 { font-size: 15px; }
.plugin-use-grid p { margin-top: 4px; color: var(--muted); font-size: 11px; line-height: 1.45; }
.plugin-rule { margin-top: 12px; }

.sites-layout { display: grid; grid-template-columns: .82fr 1.18fr; gap: 16px; align-items: stretch; }
.sites-left, .sites-right { display: grid; align-content: start; gap: 10px; }
.sites-shot { background: #171917; box-shadow: none; }
.sites-shot .shot-button img { width: 100%; height: 245px; object-fit: contain; }
.sites-decisions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sites-decisions article { padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: white; }
.sites-decisions article:first-child { border-color: #a8dabe; background: var(--accent-soft); }
.sites-decisions p { margin: 4px 0 0; color: var(--muted); font-size: 11px; line-height: 1.45; }
.sites-steps { grid-template-columns: 1fr 1fr; }
.sites-prompt pre { min-height: 0; padding: 12px 14px; font-size: 12px; line-height: 1.5; }
.sites-warning { margin-top: 12px; }

.work-file-shot { margin-bottom: 15px; background: #171917; }
.work-file-shot .shot-button img { height: 155px; object-fit: contain; }
.template-layout { display: grid; grid-template-columns: .95fr 1.05fr; gap: 16px; align-items: stretch; }
.template-left { display: grid; gap: 10px; }
.template-shot { background: #171917; }
.template-shot .shot-button img { height: 155px; object-fit: contain; }
.template-types { display: flex; flex-wrap: wrap; gap: 7px; }
.template-types span { padding: 7px 10px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-dark); font-size: 11px; font-weight: 750; }
.template-steps { display: grid; gap: 8px; }
.template-steps article { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: white; }
.template-steps article > span { display: grid; flex: 0 0 28px; height: 28px; place-items: center; border-radius: 8px; background: var(--accent); color: white; font-weight: 800; }
.template-steps h3, .template-steps p { margin: 0; }
.template-steps h3 { font-size: 14px; }
.template-steps p { margin-top: 3px; color: var(--muted); font-size: 12px; line-height: 1.55; }
.template-prompt { margin-top: 12px; }
.template-prompt pre { padding: 13px 16px; font-size: 12px; line-height: 1.55; }
.work-file-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.work-file-grid article { display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; padding: 14px; border: 1px solid var(--line); border-radius: 11px; }
.work-file-grid span { grid-row: 1 / 3; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 9px; background: var(--accent-soft); color: var(--accent-dark); font-size: 10px; font-weight: 800; }
.work-file-grid h3, .work-file-grid p { margin: 0; }
.work-file-grid h3 { font-size: 17px; }
.work-file-grid p { color: var(--muted); font-size: 12px; line-height: 1.45; }
.file-workflow { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 15px; padding: 11px 13px; border-radius: 10px; background: var(--wash); font-size: 12px; }
.file-workflow i { color: var(--accent); font-style: normal; }

.model-lanes { display: grid; gap: 10px; }
.model-lanes article { display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 16px; padding: 18px 20px; border: 1px solid var(--line); border-radius: 12px; }
.model-lanes h3, .model-lanes p { margin: 0; }
.model-lanes p { margin-top: 4px; color: var(--muted); }
.model-lanes article > span { padding: 5px 10px; border-radius: 999px; background: var(--wash); color: var(--muted); font-size: 12px; }
.model-dot { width: 34px; height: 34px; border-radius: 50%; }
.model-dot.sol { background: linear-gradient(135deg, #101814, #23ae67); }
.model-dot.terra { background: linear-gradient(135deg, #17653d, #76c69c); }
.model-dot.luna { background: linear-gradient(135deg, #9ad7b7, #eaf7f0); border: 1px solid #7fbc9b; }
.reasoning-scale { display: grid; grid-template-columns: auto 1fr auto 1fr auto; gap: 14px; align-items: center; margin-top: 26px; text-align: center; font-weight: 700; }
.reasoning-scale i { display: block; height: 2px; background: linear-gradient(90deg, var(--line), var(--accent)); }
.reasoning-scale small { color: var(--muted); font-weight: 400; }

.plan-layout { display: grid; grid-template-columns: .8fr 1.2fr; gap: 24px; }
.when-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.when-grid article { padding: 20px; border: 1px solid var(--line); border-radius: 12px; }
.when-grid .yes { background: var(--accent-soft); border-color: #a8dabe; }
.when-grid h3 { margin: 0 0 14px; }
.when-grid ul { margin: 0; padding-left: 19px; color: var(--muted); line-height: 1.8; }
.prompt-card { overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: #101713; color: white; }
.prompt-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 13px; border-bottom: 1px solid #344039; color: #cbd6cf; font-size: 12px; }
.prompt-head button { border: 1px solid #536159; border-radius: 6px; padding: 4px 8px; color: white; background: transparent; cursor: pointer; }
.prompt-card pre { margin: 0; padding: 18px; white-space: pre-wrap; color: #f2f5f3; font-size: 13px; line-height: 1.75; }

.allow-questions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.allow-questions article { padding: 20px; border: 1px solid var(--line); border-radius: 12px; background: white; }
.allow-questions span { color: var(--accent-dark); font-size: 11px; font-weight: 800; }
.allow-questions h3 { margin: 18px 0 8px; font-size: 21px; }
.allow-questions p { margin: 0; color: var(--muted); line-height: 1.55; }
.allow-decisions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px; }
.allow-decisions article { padding: 16px 20px; border: 1px solid var(--line); border-radius: 12px; }
.allow-decisions .allow-yes { border-color: #9fd5b6; background: var(--accent-soft); }
.allow-decisions .allow-no { border-color: #e7c0bc; background: #fff5f3; }
.allow-decisions h3 { margin: 0 0 9px; font-size: 18px; }
.allow-decisions ul { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px 20px; margin: 0; padding-left: 18px; color: var(--muted); font-size: 13px; line-height: 1.5; }
.allow-callout { margin-top: 14px; }

.permission-path { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 0 0 12px; padding: 0; list-style: none; }
.permission-path li { display: flex; gap: 8px; align-items: center; padding: 9px 11px; border-radius: 10px; background: var(--accent-soft); color: var(--accent-dark); font-size: 11px; font-weight: 750; }
.permission-path b { display: grid; flex: 0 0 22px; height: 22px; place-items: center; border-radius: 7px; color: white; background: var(--accent); }
.permission-layout { display: grid; grid-template-columns: .9fr 1.1fr; gap: 16px; align-items: stretch; }
.permission-shot { display: flex; flex-direction: column; background: #171917; }
.permission-shot .shot-button { flex: 1; display: grid; place-items: center; }
.permission-shot .shot-button img { height: 100%; max-height: 330px; object-fit: contain; }
.permission-modes { display: grid; gap: 10px; }
.permission-modes article { padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: white; }
.permission-modes article.recommended { border-color: #9fd5b6; background: var(--accent-soft); }
.permission-modes article.danger { border-color: #e7c0bc; background: #fff5f3; }
.permission-modes span { color: var(--accent-dark); font-size: 11px; font-weight: 800; }
.permission-modes .danger span { color: #9c3f35; }
.permission-modes h3 { margin: 5px 0 4px; font-size: 18px; }
.permission-modes p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.45; }
.permission-bottom { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.permission-bottom .allow-callout { margin-top: 10px; }
.permission-bottom .warning { border-left-color: #ce6d5f; background: #fff5f3; }

.quick-entry-grid { display: grid; grid-template-columns: 1.12fr .88fr; gap: 16px; }
.quick-feature { overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: white; }
.quick-feature .shot-card { border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: #171917; }
.quick-feature .shot-button img { height: 215px; object-fit: contain; }
.quick-feature > div { padding: 15px 17px 16px; }
.quick-feature h3 { margin: 0 0 10px; font-size: 18px; }
.quick-list { display: grid; grid-template-columns: 1fr 1fr; gap: 7px 16px; margin: 0; padding-left: 18px; color: var(--muted); font-size: 12px; line-height: 1.45; }
.open-in-feature .quick-list { grid-template-columns: 1fr; }
.mini-warning { margin: 10px 0 0; padding: 9px 11px; border-left: 3px solid var(--accent); background: var(--wash); color: var(--muted); font-size: 12px; line-height: 1.45; }

.appshots-layout { display: grid; grid-template-columns: 1.18fr .82fr; gap: 18px; align-items: stretch; }
.appshots-shot { display: flex; flex-direction: column; background: #171917; }
.appshots-shot .shot-button { flex: 1; display: grid; place-items: center; }
.appshots-shot .shot-button img { height: 100%; max-height: 375px; object-fit: contain; }
.appshots-guide { display: grid; align-content: start; gap: 12px; }
.appshots-uses { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.appshots-uses span { padding: 9px 11px; border-radius: 8px; background: var(--accent-soft); color: var(--accent-dark); font-size: 12px; font-weight: 750; text-align: center; }

.capability-layout { display: grid; grid-template-columns: 1.08fr .92fr; gap: 18px; align-items: stretch; }
.capability-shot { display: flex; flex-direction: column; background: #171917; }
.capability-shot .shot-button { flex: 1; display: grid; place-items: center; }
.capability-shot .shot-button img { width: 100%; height: 100%; max-height: 350px; object-fit: contain; }
.capability-shot.compact-shot .shot-button img { max-height: 245px; }
.capability-guide { display: grid; align-content: start; gap: 11px; }
.prompt-formula { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 11px 13px; border-radius: 10px; background: var(--accent-soft); }
.prompt-formula span { padding: 5px 8px; border-radius: 6px; background: white; color: var(--accent-dark); font-size: 12px; font-weight: 800; }
.prompt-formula i { color: var(--muted); font-style: normal; }
.small-prompt pre { min-height: 126px; padding: 14px; font-size: 12px; line-height: 1.55; }

.worktree-map { display: grid; grid-template-columns: 1fr 180px 1fr; align-items: center; gap: 20px; }
.worktree-map article { min-height: 150px; padding: 24px; border: 1px solid var(--line); border-radius: 14px; }
.worktree-map article.accent { background: var(--accent-soft); border-color: #9fd5b6; }
.worktree-map article span { color: var(--muted); font-size: 12px; }
.worktree-map h3 { margin: 9px 0; font-size: 28px; }
.worktree-map p { margin: 0; color: var(--muted); }
.handoff-arrow { display: grid; justify-items: center; gap: 5px; color: var(--muted); text-align: center; }
.handoff-arrow i { color: var(--accent); font-size: 30px; font-style: normal; }
.gallery.two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 22px; }
.gallery .shot-button img { height: 250px; }
.three-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 20px; }
.three-facts span { padding: 12px; border-radius: 9px; background: var(--wash); font-size: 13px; }
.three-facts b { color: var(--accent-dark); margin-right: 5px; }
.direct-worktree-layout { display: grid; grid-template-columns: .8fr 1.2fr; gap: 22px; align-items: stretch; }
.click-steps { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.click-steps li { display: grid; grid-template-columns: 30px 1fr; gap: 11px; align-items: center; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; }
.click-steps b { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-dark); }
.click-steps strong, .click-steps small { display: block; }
.click-steps small { margin-top: 4px; color: var(--muted); line-height: 1.4; }
.direct-shot { display: flex; flex-direction: column; justify-content: space-between; }
.direct-shot .shot-button { flex: 1; display: grid; place-items: center; background: #171917; }
.direct-shot .shot-button img { height: 100%; max-height: 330px; object-fit: contain; }
.worktree-alerts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 18px; }
.worktree-alerts p { margin: 0; padding: 12px 15px; border-left: 3px solid var(--accent); background: var(--wash); color: var(--muted); font-size: 13px; }
.worktree-alerts strong { color: var(--ink); }
.outcome-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.outcome-grid article { padding: 18px; border: 1px solid var(--line); border-radius: 12px; }
.outcome-grid article:nth-child(1) { border-color: #9fd5b6; background: var(--accent-soft); }
.outcome-grid span { color: var(--accent-dark); font-size: 12px; font-weight: 800; }
.outcome-grid h3 { margin: 13px 0 8px; font-size: 21px; }
.outcome-grid p { min-height: 64px; margin: 0; color: var(--muted); line-height: 1.5; }
.outcome-grid small { display: block; margin-top: 12px; color: var(--muted); }
.compact-gallery .shot-button img { height: 210px; }

.demo-timeline { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; padding: 0; list-style: none; }
.demo-timeline li { display: flex; gap: 11px; min-height: 86px; padding: 15px; border: 1px solid var(--line); border-radius: 11px; }
.demo-timeline li > span { color: var(--accent); font-size: 12px; font-weight: 800; }
.demo-timeline strong, .demo-timeline small { display: block; }
.demo-timeline small { margin-top: 6px; color: var(--muted); line-height: 1.4; }
.prompt-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 20px; }
.prompt-tabs .prompt-card pre { min-height: 170px; }
.demo-prompts .prompt-tabs { margin-top: 0; padding: 0 16px 16px; }
.evidence-strip { display: grid; grid-template-columns: auto 1fr auto 1fr auto 1fr; gap: 10px; align-items: center; margin-top: 18px; padding: 14px 16px; border-radius: 12px; background: var(--ink); color: white; }
.evidence-strip > strong { color: #8eddb1; white-space: nowrap; }
.evidence-strip article { display: flex; align-items: center; gap: 9px; }
.evidence-strip article > span { display: grid; place-items: center; flex: 0 0 25px; height: 25px; border-radius: 50%; background: #2c3a32; color: #8eddb1; font-size: 11px; font-weight: 800; }
.evidence-strip b, .evidence-strip small { display: block; }
.evidence-strip small { margin-top: 3px; color: #aebbb4; font-size: 11px; }
.evidence-strip i { color: #71d39e; font-style: normal; }

.review-loop { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 28px; }
.review-loop > div { display: grid; justify-items: center; min-width: 145px; text-align: center; }
.review-loop span { display: grid; place-items: center; width: 31px; height: 31px; margin-bottom: 8px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-dark); font-weight: 800; }
.review-loop small { margin-top: 5px; color: var(--muted); }
.review-loop i { color: var(--accent); font-style: normal; }
.review-content { grid-template-columns: 1.15fr .85fr; }
.review-rules { display: grid; align-content: center; gap: 12px; }
.review-rules h3 { margin: 0 0 6px; font-size: 24px; }
.review-rules label { display: flex; gap: 9px; align-items: center; padding: 10px 12px; background: var(--wash); border-radius: 8px; }
.review-rules input { accent-color: var(--accent); width: 17px; height: 17px; }

.rescue-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 11px; }
.rescue-grid article { padding: 17px 18px; border: 1px solid var(--line); border-radius: 12px; background: white; }
.rescue-grid span { color: var(--accent-dark); font-size: 11px; font-weight: 800; }
.rescue-grid h3 { margin: 10px 0 7px; font-size: 18px; }
.rescue-grid p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.rescue-flow { display: flex; align-items: center; gap: 10px; margin-top: 16px; padding: 12px 15px; border-left: 3px solid var(--accent); background: var(--wash); font-size: 12px; }
.rescue-flow i { color: var(--accent); font-style: normal; }

.final { background: #111914; color: white; }
.final .eyebrow { color: #71d39e; }
.final .section-head { text-align: center; }
.final .section-head h2 { margin-left: auto; margin-right: auto; }
.final-checks { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.final-checks article { padding: 18px; border: 1px solid #344039; border-radius: 12px; background: #17211b; }
.final-checks span { color: #71d39e; font-size: 12px; font-weight: 800; }
.final-checks h3 { margin: 24px 0 7px; }
.final-checks p { margin: 0; color: #aab8b0; font-size: 13px; }
.safety-redlines { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: 20px; padding: 13px 16px; border: 1px solid #8f4b43; border-radius: 12px; background: #261b18; }
.safety-redlines strong { margin-right: 6px; color: #ff9c8e; }
.safety-redlines span { padding: 5px 8px; border-radius: 6px; background: #3a2420; color: #f3c8c1; font-size: 11px; }
.closing { margin-top: 42px; text-align: center; }
.closing p { margin: 0 0 8px; color: #aab8b0; font-size: 18px; }
.closing strong { font-size: clamp(22px, 3vw, 38px); letter-spacing: -.03em; }
.reference-links { display: flex; justify-content: center; gap: 18px; margin-top: 34px; }
.reference-links a { color: #8eddb1; font-size: 12px; }

.back-top { position: fixed; z-index: 45; right: 20px; bottom: 20px; display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid var(--line); border-radius: 50%; background: white; opacity: 0; pointer-events: none; cursor: pointer; box-shadow: 0 8px 24px rgba(0,0,0,.1); transition: .2s; }
.back-top.visible { opacity: 1; pointer-events: auto; }
dialog { width: min(1240px, calc(100vw - 40px)); max-height: calc(100vh - 40px); padding: 0; border: 0; border-radius: 14px; background: #101713; box-shadow: 0 25px 90px rgba(0,0,0,.35); }
dialog::backdrop { background: rgba(8,13,10,.78); backdrop-filter: blur(4px); }
dialog img { display: block; width: 100%; max-height: calc(100vh - 40px); object-fit: contain; }
dialog button { position: absolute; top: 10px; right: 10px; width: 38px; height: 38px; border: 0; border-radius: 50%; background: rgba(255,255,255,.92); cursor: pointer; font-size: 24px; }
.toast { position: fixed; z-index: 100; bottom: 24px; left: 50%; padding: 9px 14px; border-radius: 999px; background: var(--ink); color: white; opacity: 0; transform: translate(-50%, 16px); pointer-events: none; transition: .2s; font-size: 13px; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.present-controls { display: none; }

body.presenting { overflow: hidden; background: white; }
body.presenting .topbar, body.presenting .sidebar, body.presenting .back-top { display: none; }
body.presenting main { margin: 0; padding: 0; }
body.presenting .lesson { display: none; width: 100vw; height: 100vh; min-height: 0; overflow: auto; padding: clamp(34px, 5vh, 64px) clamp(44px, 6vw, 96px) 92px; border: 0; }
body.presenting .lesson.active-slide { display: flex; animation: slideIn .2s ease; }
body.presenting .lesson.hero.active-slide { display: grid; }
body.presenting .download-section { display: none; }
body.presenting .reading-more { display: none; }
body.presenting .tool-guide-grid article p:last-child { display: none; }
body.presenting .final .reference-links { display: none; }
body.presenting .hero h1 { font-size: clamp(52px, 7vw, 94px); }
body.presenting #git-settings .git-settings-shot .shot-button img { max-height: 330px; }
body.presenting #git-settings .callout { margin-top: 12px; padding: 11px 14px; }
body.presenting #git-settings .source { margin-top: 12px; }
body.presenting .present-controls { position: fixed; z-index: 90; right: 20px; bottom: 18px; display: flex; align-items: center; gap: 6px; padding: 6px; border: 1px solid var(--line); border-radius: 11px; background: rgba(255,255,255,.94); box-shadow: 0 8px 30px rgba(0,0,0,.12); }
body.presenting .present-controls[aria-hidden="false"] { display: flex; }
.present-controls button { min-width: 38px; height: 34px; border: 0; border-radius: 7px; background: var(--wash); cursor: pointer; }
.present-controls span { min-width: 62px; color: var(--muted); text-align: center; font-size: 12px; }
@keyframes slideIn { from { opacity: .4; transform: translateY(8px); } }

@media (max-width: 980px) {
  :root { --sidebar: 210px; }
  .lesson { padding: 52px 30px; }
  .hero { grid-template-columns: 1fr; }
  .hero-panel { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .hero-panel > div { display: block; border: 0; }
  .hero-panel .version-note { grid-column: 1 / -1; }
  .plan-layout, .two-column, .direct-worktree-layout, .project-create-layout, .project-use-layout, .sidebar-tools-layout, .git-settings-layout, .agents-layout, .rules-layout, .hooks-layout, .permission-layout, .quick-entry-grid, .appshots-layout, .capability-layout, .template-layout, .plugin-picked-layout, .sites-layout { grid-template-columns: 1fr; }
  .prompt-tabs { grid-template-columns: 1fr; }
  .demo-timeline { grid-template-columns: repeat(2, 1fr); }
  .allow-questions, .rescue-grid { grid-template-columns: repeat(2, 1fr); }
  .allow-decisions ul { grid-template-columns: 1fr; }
  .evidence-strip { grid-template-columns: 1fr; }
  .evidence-strip > i { display: none; }
  .final-checks { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 720px) {
  :root { --top: 60px; }
  .time-chip, #printButton { display: none; }
  .download-shortcut { display: none; }
  .topbar { padding: 0 14px; }
  .sidebar { display: none; }
  main { margin: 0; }
  .lesson { min-height: auto; padding: 54px 20px; }
  .hero { min-height: calc(100vh - var(--top)); }
  .mode-grid, .gallery.two, .when-grid, .three-facts, .final-checks, .worktree-alerts, .outcome-grid, .detail-grid, .project-decisions, .manage-strip, .task-branches, .frequency-pair, .git-setting-list, .agents-write-guide, .rule-cards, .hooks-decisions, .work-file-grid, .allow-questions, .allow-decisions, .rescue-grid, .quick-list, .permission-path, .permission-bottom, .plugin-use-grid, .sites-decisions, .sites-steps { grid-template-columns: 1fr; }
  .decision-strip, .review-loop { align-items: stretch; flex-direction: column; }
  .decision-strip { display: grid; }
  .review-loop i { transform: rotate(90deg); text-align: center; }
  .table-row { grid-template-columns: 1fr; gap: 5px; padding: 12px 16px; }
  .table-row.header { display: none; }
  .worktree-map { grid-template-columns: 1fr; }
  .handoff-arrow i { transform: rotate(90deg); }
  .demo-timeline { grid-template-columns: 1fr; }
  .reasoning-scale { grid-template-columns: 1fr; }
  .reasoning-scale i { width: 2px; height: 20px; margin: auto; }
  .shot-card figcaption { display: block; line-height: 1.7; }
  .sidebar-tool-list article { grid-template-columns: 1fr; }
  .tool-guide-grid { grid-template-columns: 1fr; }
  .tool-guide-grid article:nth-child(5) { grid-column: auto; }
  .tool-chain { align-items: flex-start; flex-direction: column; }
  .tool-chain i { transform: rotate(90deg); }
  .tool-chain small { margin-left: 0; }
  .frequency-card { grid-template-columns: 1fr; }
  .agent-precedence { align-items: flex-start; flex-direction: column; }
  .agent-precedence i { transform: rotate(90deg); }
  .agent-precedence b { margin-left: 0; }
  .hooks-shots { grid-template-columns: 1fr; }
  .hook-events, .file-workflow { align-items: flex-start; flex-direction: column; }
  .rescue-flow { align-items: flex-start; flex-direction: column; }
  .rescue-flow i { transform: rotate(90deg); }
  .reference-links { flex-wrap: wrap; }
  .download-section { margin-left: 0; padding: 52px 20px; }
  .download-heading { align-items: flex-start; flex-direction: column; }
  .download-grid { grid-template-columns: 1fr; }
  .download-grid article { grid-template-columns: auto 1fr; }
  .download-grid article .button { grid-column: 1 / -1; }
  .download-meta { align-items: flex-start; flex-direction: column; }
  .download-meta a:last-child { margin-left: 0; }
}

@media (max-height: 800px) and (min-width: 721px) {
  body.presenting .lesson { padding: 28px 58px 70px; }
  body.presenting .section-head { margin-bottom: 18px; }
  body.presenting .section-head h2 { font-size: clamp(30px, 3.5vw, 44px); }
  body.presenting .section-head > p:last-child { margin-top: 8px; font-size: 16px; line-height: 1.45; }
  body.presenting .source { margin-top: 12px; }
  body.presenting .shot-button img { max-height: 345px; }
  body.presenting .gallery .shot-button img { height: 190px; }
  body.presenting .worktree-map article { min-height: 118px; padding: 16px 20px; }
  body.presenting .worktree-map h3 { margin: 5px 0; font-size: 24px; }
  body.presenting .gallery.two { margin-top: 14px; }
  body.presenting .three-facts { margin-top: 12px; }
  body.presenting .direct-worktree-layout { grid-template-columns: .82fr 1.18fr; gap: 16px; }
  body.presenting .click-steps { gap: 6px; }
  body.presenting .click-steps li { padding: 8px 10px; }
  body.presenting .click-steps small { font-size: 12px; }
  body.presenting .direct-shot .shot-button img { max-height: 270px; }
  body.presenting .worktree-alerts { margin-top: 10px; }
  body.presenting .worktree-alerts p { padding: 8px 11px; }
  body.presenting .outcome-grid article { padding: 13px 15px; }
  body.presenting .outcome-grid h3 { margin: 8px 0 5px; font-size: 18px; }
  body.presenting .outcome-grid p { min-height: 55px; font-size: 13px; }
  body.presenting .outcome-grid small { margin-top: 7px; }
  body.presenting .compact-gallery .shot-button img { height: 150px; }
  body.presenting .project-create-layout { grid-template-columns: .76fr 1.24fr; gap: 14px; }
  body.presenting .entry-shot .shot-button img { height: 72px; }
  body.presenting .compact-steps { gap: 5px; }
  body.presenting .compact-steps li { padding: 6px 9px; }
  body.presenting .create-dialog-shot .shot-button img { max-height: 300px; }
  body.presenting .project-callout { margin-top: 10px; padding: 9px 12px; font-size: 12px; }
  body.presenting .project-use-layout { grid-template-columns: 1.15fr .85fr; gap: 12px; }
  body.presenting .project-tree { padding: 11px; }
  body.presenting .project-root { padding: 8px 10px; }
  body.presenting .task-branches { gap: 6px; margin-top: 7px; }
  body.presenting .task-branches article { padding: 7px 9px; }
  body.presenting .project-use-shot .shot-button img { height: 225px; }
  body.presenting .project-decisions { margin-top: 9px; }
  body.presenting .project-decisions article { padding: 8px 10px; }
  body.presenting .manage-strip { margin-top: 8px; }
  body.presenting .manage-strip span { padding: 6px 8px; }
  body.presenting .sidebar-tools-layout { grid-template-columns: .7fr 1.3fr; gap: 12px; }
  body.presenting .sidebar-tools-shot .shot-button img { max-height: 360px; }
  body.presenting .sidebar-tool-list { gap: 5px; }
  body.presenting .sidebar-tool-list article { grid-template-columns: 105px 1fr; gap: 8px; padding: 6px 9px; }
  body.presenting .sidebar-tool-list h3 { font-size: 15px; }
  body.presenting .sidebar-tool-list h3 span { width: 23px; height: 23px; }
  body.presenting .sidebar-tool-list p { font-size: 11px; line-height: 1.4; }
  body.presenting .sidebar-tools-overview .sidebar-tool-list p { font-size: 14px; }
  body.presenting .tool-chain { margin-top: 8px; padding: 8px 11px; }
  body.presenting .tool-guide-grid { gap: 8px; }
  body.presenting .tool-guide-grid article { padding: 11px 13px; }
  body.presenting .tool-guide-grid h3 { margin-bottom: 7px; font-size: 17px; }
  body.presenting .tool-guide-grid p { margin-top: 4px; font-size: 12px; line-height: 1.4; }
  body.presenting .frequency-pair { gap: 10px; }
  body.presenting .frequency-card { grid-template-columns: .66fr 1.34fr; gap: 10px; padding: 9px; }
  body.presenting .frequency-card .shot-button img { height: 205px; }
  body.presenting .frequency-card h3 { margin: 2px 0 7px; font-size: 17px; }
  body.presenting .frequency-card p { margin-top: 5px; font-size: 11px; line-height: 1.4; }
  body.presenting .git-settings-layout { grid-template-columns: 1.05fr .95fr; gap: 12px; }
  body.presenting .git-settings-shot .shot-button img { max-height: 330px; }
  body.presenting .git-setting-list { gap: 6px; }
  body.presenting .git-setting-list article { padding: 8px 10px; }
  body.presenting .git-setting-list p { margin-top: 4px; font-size: 11px; }
  body.presenting #git-settings .callout { margin-top: 10px; padding: 9px 12px; font-size: 12px; }
  body.presenting .agents-layout { grid-template-columns: 1.05fr .95fr; gap: 12px; }
  body.presenting .agents-shot .shot-button img { max-height: 285px; }
  body.presenting .agent-levels { gap: 6px; }
  body.presenting .agent-levels article { padding: 8px 10px; }
  body.presenting .agent-levels h3 { margin: 4px 0; font-size: 14px; }
  body.presenting .agent-levels p { font-size: 11px; line-height: 1.35; }
  body.presenting .agent-precedence { margin-top: 9px; padding: 8px 11px; }
  body.presenting .rules-layout { grid-template-columns: 1.2fr .8fr; gap: 10px; }
  body.presenting .agents-template pre { padding: 10px 13px; font-size: 11px; line-height: 1.42; }
  body.presenting .agents-write-guide article { padding: 9px 10px; }
  body.presenting .agents-write-guide h3 { margin-bottom: 4px; font-size: 15px; }
  body.presenting .agents-write-guide p { font-size: 11px; line-height: 1.35; }
  body.presenting .rule-cards { gap: 7px; margin-top: 9px; }
  body.presenting .rule-cards article { padding: 9px 11px; }
  body.presenting .rule-cards h3 { margin: 4px 0 5px; font-size: 17px; }
  body.presenting .rule-cards p { font-size: 11px; line-height: 1.35; }
  body.presenting .rule-callout { margin-top: 8px; padding: 8px 11px; }
  body.presenting .hooks-layout { grid-template-columns: .9fr 1.1fr; gap: 12px; }
  body.presenting .hooks-shots .shot-button img { max-height: 255px; }
  body.presenting .hooks-content { gap: 8px; }
  body.presenting .hook-events { padding: 8px 10px; }
  body.presenting .hooks-decisions article { padding: 9px 11px; }
  body.presenting .hooks-decisions ul { font-size: 11px; line-height: 1.55; }
  body.presenting .work-file-shot { margin-bottom: 10px; }
  body.presenting .work-file-shot .shot-button img { height: 105px; }
  body.presenting .template-layout { grid-template-columns: .9fr 1.1fr; gap: 10px; }
  body.presenting .template-shot .shot-button img { height: 115px; }
  body.presenting .template-steps { gap: 5px; }
  body.presenting .template-steps article { padding: 8px 10px; }
  body.presenting .template-steps p { font-size: 10.5px; }
  body.presenting .template-prompt { margin-top: 8px; }
  body.presenting .template-prompt pre { padding: 9px 12px; font-size: 10.5px; }
  body.presenting .work-file-grid article { padding: 10px; }
  body.presenting .file-workflow { margin-top: 10px; padding: 8px 11px; }
  body.presenting .demo-timeline li { min-height: 68px; padding: 10px; }
  body.presenting .evidence-strip { margin-top: 10px; padding: 10px 12px; }
  body.presenting .allow-questions { gap: 8px; }
  body.presenting .allow-questions article { padding: 12px 14px; }
  body.presenting .allow-questions h3 { margin: 8px 0 5px; font-size: 17px; }
  body.presenting .allow-questions p { font-size: 12px; line-height: 1.4; }
  body.presenting .allow-decisions { gap: 8px; margin-top: 9px; }
  body.presenting .allow-decisions article { padding: 10px 14px; }
  body.presenting .allow-decisions h3 { margin-bottom: 5px; font-size: 16px; }
  body.presenting .allow-decisions ul { gap: 4px 14px; font-size: 11px; }
  body.presenting .allow-callout { margin-top: 8px; padding: 8px 11px; font-size: 12px; }
  body.presenting .permission-layout { grid-template-columns: .9fr 1.1fr; gap: 10px; }
  body.presenting .permission-shot .shot-button img { max-height: 275px; }
  body.presenting .permission-path { margin-bottom: 8px; gap: 5px; }
  body.presenting .permission-path li { padding: 6px 8px; font-size: 10px; }
  body.presenting .permission-modes { gap: 6px; }
  body.presenting .permission-modes article { padding: 9px 11px; }
  body.presenting .permission-modes h3 { font-size: 15px; }
  body.presenting .permission-modes p { font-size: 10.5px; }
  body.presenting .permission-bottom .allow-callout { margin-top: 7px; }
  body.presenting .permission-modes { gap: 7px; }
  body.presenting .permission-modes article { padding: 9px 12px; }
  body.presenting .permission-modes h3 { font-size: 16px; }
  body.presenting .permission-modes p { font-size: 11px; line-height: 1.35; }
  body.presenting .quick-entry-grid { gap: 10px; }
  body.presenting .quick-feature .shot-button img { height: 170px; }
  body.presenting .quick-feature > div { padding: 10px 12px; }
  body.presenting .quick-feature h3 { margin-bottom: 6px; font-size: 16px; }
  body.presenting .quick-list { gap: 4px 12px; font-size: 10.5px; line-height: 1.35; }
  body.presenting .mini-warning { margin-top: 6px; padding: 6px 8px; font-size: 10.5px; }
  body.presenting .appshots-layout { grid-template-columns: 1.15fr .85fr; gap: 10px; }
  body.presenting .appshots-shot .shot-button img { max-height: 310px; }
  body.presenting .appshots-guide { gap: 7px; }
  body.presenting .appshots-guide .click-steps li { padding: 8px 10px; }
  body.presenting .appshots-guide .click-steps small { font-size: 10.5px; }
  body.presenting .appshots-uses { gap: 5px; }
  body.presenting .appshots-uses span { padding: 6px 8px; font-size: 10.5px; }
  body.presenting .capability-layout { grid-template-columns: 1.08fr .92fr; gap: 10px; }
  body.presenting .capability-shot .shot-button img { max-height: 285px; }
  body.presenting .capability-shot.compact-shot .shot-button img { max-height: 190px; }
  body.presenting .capability-guide { gap: 7px; }
  body.presenting .capability-guide .click-steps li { padding: 7px 9px; }
  body.presenting .capability-guide .click-steps small { font-size: 10px; }
  body.presenting .prompt-formula { padding: 7px 9px; }
  body.presenting .prompt-formula span { padding: 4px 6px; font-size: 10px; }
  body.presenting .small-prompt pre { min-height: 102px; padding: 10px; font-size: 10px; }
  body.presenting .rescue-grid { gap: 7px; }
  body.presenting .rescue-grid article { padding: 10px 12px; }
  body.presenting .rescue-grid h3 { margin: 5px 0 4px; font-size: 15px; }
  body.presenting .rescue-grid p { font-size: 11px; line-height: 1.35; }
  body.presenting .rescue-flow { margin-top: 9px; padding: 8px 11px; }
  body.presenting .safety-redlines { margin-top: 10px; padding: 8px 10px; }
  body.presenting .closing { margin-top: 18px; }
  body.presenting .prompt-tabs { margin-top: 12px; }
  body.presenting .prompt-tabs .prompt-card pre { min-height: 128px; padding: 13px; line-height: 1.55; }
  body.presenting .review-loop { margin-bottom: 16px; }
  body.presenting .review-rules { gap: 7px; }
  body.presenting .review-rules label { padding: 7px 10px; }
}

@media print {
  .topbar, .sidebar, .progress-track, .back-top, .present-controls, .hero-actions, .download-section, .shot-button::after { display: none !important; }
  main { margin: 0; padding: 0; }
  .lesson, body.presenting .lesson { display: block !important; min-height: 0; height: auto; padding: 28px 32px; break-after: page; border: 0; overflow: visible; }
  .hero { display: grid !important; }
  .shot-card, .prompt-card, .mode-card, .final-checks article { break-inside: avoid; box-shadow: none; }
  .final { color: var(--ink); background: white; }
  .final-checks article { color: var(--ink); background: white; }
  a { text-decoration: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}