:root {
  --paper: #f7f8f4;
  --surface: #ffffff;
  --ink: #17201c;
  --muted: #64706a;
  --line: #dfe4de;
  --green: #13795b;
  --green-soft: #dff3e9;
  --yellow: #f3c969;
  --yellow-soft: #fff5d9;
  --red: #b8483d;
  --red-soft: #fbe8e5;
  --blue: #276a8b;
  --shadow: 0 16px 45px rgba(23, 32, 28, 0.08);
  --header-height: 64px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: 16px;
  line-height: 1.72;
  letter-spacing: 0;
}
button, input { font: inherit; }
a { color: inherit; }
code, pre { font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace; }
.skip-link { position: fixed; left: 12px; top: -80px; z-index: 100; padding: 8px 12px; background: var(--ink); color: white; }
.skip-link:focus { top: 10px; }

.topbar {
  position: fixed;
  z-index: 50;
  top: 0;
  left: 0;
  right: 0;
  height: var(--header-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 28px;
  background: rgba(247, 248, 244, 0.94);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(16px);
}
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 750; font-size: 14px; }
.brand-mark { width: 28px; height: 28px; display: grid; place-items: center; background: var(--ink); color: white; font-family: Georgia, serif; font-weight: 700; }
.topbar-actions { display: flex; align-items: center; gap: 16px; }
.version { color: var(--muted); font-size: 12px; }
.icon-button { width: 38px; height: 38px; border: 1px solid var(--line); background: var(--surface); display: grid; place-items: center; cursor: pointer; }
.icon-button svg { width: 19px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.mobile-menu-button { display: none; }
.progress-track { position: fixed; z-index: 60; top: 63px; left: 0; right: 0; height: 2px; }
.progress-track span { display: block; width: 0; height: 100%; background: var(--green); }
.mobile-menu { display: none; }

.page-shell { display: grid; grid-template-columns: 244px minmax(0, 920px); gap: 68px; max-width: 1320px; margin: 0 auto; padding: 0 32px; }
.sidebar { position: sticky; top: 104px; align-self: start; height: calc(100vh - 132px); padding-top: 10px; }
.sidebar-label, .section-kicker { margin: 0 0 12px; color: var(--green); font-size: 12px; font-weight: 800; letter-spacing: 0; text-transform: uppercase; }
.toc { display: flex; flex-direction: column; border-left: 1px solid var(--line); }
.toc a { position: relative; padding: 7px 0 7px 18px; color: var(--muted); text-decoration: none; font-size: 13px; line-height: 1.4; }
.toc a::before { content: ""; position: absolute; left: -1px; top: 6px; width: 2px; height: 22px; background: transparent; }
.toc a:hover, .toc a.active { color: var(--ink); }
.toc a.active::before { background: var(--green); }
.sidebar-note { position: absolute; bottom: 0; display: flex; gap: 10px; align-items: flex-start; padding-top: 18px; border-top: 1px solid var(--line); }
.sidebar-note p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.55; }
.status-dot { flex: 0 0 auto; width: 8px; height: 8px; margin-top: 5px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px var(--green-soft); }

main { min-width: 0; padding-top: var(--header-height); }
.hero { min-height: min(720px, calc(100vh - 32px)); padding: 88px 0 60px; display: flex; flex-direction: column; justify-content: center; }
.eyebrow { display: flex; gap: 8px; margin-bottom: 22px; }
.eyebrow span { padding: 4px 9px; border: 1px solid var(--line); font-size: 11px; font-weight: 750; color: var(--muted); }
.eyebrow span:last-child { border-color: #b9dfce; background: var(--green-soft); color: var(--green); }
h1 { max-width: 760px; margin: 0; font-family: Georgia, "Songti SC", "STSong", serif; font-size: clamp(48px, 7vw, 84px); font-weight: 500; line-height: 1.05; letter-spacing: 0; }
.hero-intro { max-width: 720px; margin: 28px 0 0; color: #49544f; font-size: 18px; line-height: 1.8; }
.hero-actions { display: flex; align-items: center; gap: 24px; margin-top: 34px; }
.primary-button { display: inline-flex; align-items: center; gap: 22px; padding: 12px 18px; background: var(--ink); color: white; text-decoration: none; font-size: 14px; font-weight: 700; border: 1px solid var(--ink); }
.primary-button:hover { background: var(--green); border-color: var(--green); }
.text-link { color: var(--green); font-size: 14px; font-weight: 700; text-underline-offset: 4px; }
.concept-strip { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: center; margin-top: 64px; padding: 22px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.concept-item { display: flex; align-items: center; gap: 12px; }
.concept-number { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--line); color: var(--green); font-family: Georgia, serif; font-size: 12px; }
.concept-item div { display: flex; flex-direction: column; }
.concept-item strong { font-size: 13px; }
.concept-item small { color: var(--muted); font-size: 11px; }
.flow-arrow { padding: 0 14px; color: #aab3ae; }

.definition-band { margin: 0 calc((100vw - min(100vw, 1320px)) / -2 - 32px); padding: 52px max(32px, calc((100vw - 1320px) / 2 + 344px)); background: var(--ink); color: white; }
.definition-band .section-kicker { color: #8fd3b9; }
.definition-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px; }
.definition-grid article { border-top: 1px solid #435049; padding-top: 18px; }
.definition-grid article > span { color: #8fd3b9; font-family: Georgia, serif; }
.definition-grid h2 { margin: 18px 0 8px; font-size: 18px; }
.definition-grid p { margin: 0; color: #b8c1bc; font-size: 14px; }

.content-section { padding: 110px 0 22px; border-bottom: 1px solid var(--line); }
.section-heading { display: grid; grid-template-columns: 54px minmax(0, 1fr); gap: 18px; align-items: start; margin-bottom: 44px; }
.section-index { padding-top: 6px; color: var(--green); font-family: Georgia, serif; font-size: 14px; }
.section-heading .section-kicker { margin-bottom: 4px; }
.section-heading h2 { margin: 0; font-family: Georgia, "Songti SC", "STSong", serif; font-size: 37px; line-height: 1.25; font-weight: 500; }
.lead { max-width: 760px; margin: -20px 0 32px 72px; color: var(--muted); font-size: 17px; }

.steps { margin-left: 72px; }
.step { display: grid; grid-template-columns: 48px 1fr; gap: 22px; position: relative; padding-bottom: 38px; }
.step:not(:last-child)::before { content: ""; position: absolute; top: 42px; bottom: -1px; left: 19px; width: 1px; background: var(--line); }
.step-marker { position: relative; z-index: 1; width: 40px; height: 40px; display: grid; place-items: center; background: var(--surface); border: 1px solid var(--line); color: var(--green); font-family: Georgia, serif; }
.step-copy h3 { margin: 3px 0 8px; font-size: 19px; }
.step-copy p { margin: 0; color: var(--muted); }
.inline-check { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; padding: 5px 10px; background: var(--green-soft); color: #285d49; font-size: 13px; }
.inline-check code { font-size: 12px; }
.permission-chooser { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 18px; }
.permission-chooser > div { position: relative; min-height: 138px; display: flex; flex-direction: column; align-items: flex-start; padding: 16px; border: 1px solid var(--line); background: var(--surface); }
.permission-chooser .recommended { border: 2px solid var(--green); padding: 15px; }
.permission-chooser .tag { position: absolute; top: -10px; right: 10px; padding: 1px 7px; background: var(--green); color: white; font-size: 10px; }
.mode-icon { width: 27px; height: 27px; display: grid; place-items: center; margin-bottom: 12px; font-size: 11px; font-weight: 800; }
.mode-icon.read { background: #e8f1f6; color: var(--blue); }
.mode-icon.ask { background: var(--green-soft); color: var(--green); }
.mode-icon.full { background: var(--red-soft); color: var(--red); }
.permission-chooser strong { font-size: 12px; line-height: 1.3; }
.permission-chooser small { margin-top: 6px; color: var(--muted); font-size: 11px; line-height: 1.4; }
.platform-permissions { margin: 26px 0 24px 72px; }
.product-profiles { margin-top: 28px; }
.product-profiles > div { padding: 22px; }
.mini-prompt { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 15px; }
.mini-prompt span { padding: 4px 9px; border: 1px solid #bed7ca; background: var(--green-soft); color: var(--green); font-size: 12px; font-weight: 700; }
.callout { display: grid; grid-template-columns: 42px 1fr; gap: 14px; margin: 12px 0 0 72px; padding: 18px; }
.callout.warning { background: var(--yellow-soft); border: 1px solid #edd99e; }
.callout-symbol { width: 34px; height: 34px; display: grid; place-items: center; background: var(--yellow); font-weight: 900; }
.callout strong { font-size: 14px; }
.callout p { margin: 2px 0 0; color: #766331; font-size: 13px; }

.prompt-anatomy { display: grid; grid-template-columns: repeat(5, 1fr); margin: 0 0 34px 72px; border: 1px solid var(--line); background: var(--surface); }
.prompt-anatomy div { min-width: 0; padding: 16px 13px; border-right: 1px solid var(--line); }
.prompt-anatomy div:last-child { border: 0; }
.prompt-anatomy b, .prompt-anatomy span, .prompt-anatomy em { display: block; }
.prompt-anatomy b { color: var(--green); font-size: 13px; }
.prompt-anatomy span { margin: 5px 0 13px; color: var(--ink); font-size: 12px; }
.prompt-anatomy em { color: var(--muted); font-size: 11px; font-style: normal; line-height: 1.45; }
.template-tabs { display: flex; gap: 0; margin-left: 72px; overflow-x: auto; border-bottom: 1px solid var(--line); }
.template-tabs button { flex: 0 0 auto; padding: 9px 14px; border: 0; border-bottom: 2px solid transparent; color: var(--muted); background: transparent; cursor: pointer; font-size: 13px; }
.template-tabs button[aria-selected="true"] { color: var(--green); border-color: var(--green); font-weight: 750; }
.template-panel { position: relative; margin-left: 72px; padding: 24px 24px 62px; background: #1e2723; color: #e8efeb; }
.template-panel pre { margin: 0; white-space: pre-wrap; word-break: break-word; font-size: 13px; line-height: 1.8; }
.copy-button { position: absolute; right: 14px; bottom: 14px; display: inline-flex; align-items: center; gap: 7px; padding: 6px 10px; border: 1px solid #4b5b53; background: #2a3530; color: #dce5e0; cursor: pointer; font-size: 12px; }
.copy-button:hover { border-color: #8fd3b9; color: white; }
.copy-button svg { width: 14px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.habits-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin: 34px 0 0 72px; background: var(--line); border: 1px solid var(--line); }
.habits-grid > div { padding: 18px; background: var(--paper); }
.habits-grid strong { font-size: 14px; }
.habits-grid p { margin: 4px 0 0; color: var(--muted); font-size: 13px; }

.safety-banner { display: grid; grid-template-columns: 110px 1fr; align-items: center; gap: 28px; margin-left: 72px; padding: 28px; background: var(--yellow-soft); border: 1px solid #edd99e; }
.lock-visual { width: 90px; height: 86px; display: grid; place-items: end center; position: relative; }
.lock-visual::before { content: ""; position: absolute; top: 4px; width: 46px; height: 50px; border: 8px solid var(--ink); border-bottom: 0; border-radius: 24px 24px 0 0; }
.lock-visual span { z-index: 1; width: 76px; height: 58px; background: var(--ink); }
.lock-visual span::after { content: ""; display: block; width: 8px; height: 20px; margin: 17px auto; background: var(--yellow); border-radius: 5px; }
.safety-banner h3 { margin: 0 0 8px; font-size: 18px; }
.safety-banner p { margin: 0; color: #695c37; font-size: 14px; }
.do-dont { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 24px 0 0 72px; }
.do-dont article { padding: 22px; border: 1px solid var(--line); background: var(--surface); }
.do-dont h3 { margin: 0 0 14px; font-size: 16px; }
.good, .bad { display: inline-grid; place-items: center; width: 22px; height: 22px; margin-right: 5px; }
.good { background: var(--green-soft); color: var(--green); }
.bad { background: var(--red-soft); color: var(--red); }
.do-dont ul { margin: 0; padding-left: 20px; }
.do-dont li { margin: 7px 0; color: var(--muted); font-size: 13px; }
.mode-explainer { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin: 24px 0 0 72px; background: var(--line); border: 1px solid var(--line); }
.mode-explainer div { padding: 20px; background: var(--paper); }
.mode-explainer strong { color: var(--green); }
.mode-explainer p { margin: 4px 0 0; color: var(--muted); font-size: 13px; }

.workflow-diagram { display: grid; grid-template-columns: 1fr 70px 1fr 70px 1.2fr; align-items: center; margin-left: 72px; }
.workflow-node { min-height: 150px; display: flex; flex-direction: column; justify-content: center; padding: 18px; background: var(--surface); border: 1px solid var(--line); }
.workflow-node.accent { background: var(--green-soft); border-color: #b8d9c9; }
.workflow-node span { color: var(--muted); font-size: 10px; text-transform: uppercase; }
.workflow-node strong { margin: 7px 0; font-size: 16px; line-height: 1.3; }
.workflow-node small { color: var(--muted); font-size: 11px; line-height: 1.45; }
.workflow-connector { display: flex; flex-direction: column; align-items: center; color: var(--muted); }
.workflow-connector b { font-size: 9px; font-weight: 600; }
.workflow-connector i { color: var(--green); font-size: 22px; font-style: normal; }
.process-list { list-style: none; margin: 34px 0 0 72px; padding: 0; }
.process-list li { display: grid; grid-template-columns: 42px 1fr; gap: 14px; border-top: 1px solid var(--line); }
.process-list li:last-child { border-bottom: 1px solid var(--line); }
.process-list span { padding-top: 12px; color: var(--green); font-family: Georgia, serif; font-size: 12px; }
.process-list p { margin: 0; padding: 10px 0; color: var(--muted); font-size: 14px; }
.requirements { margin: 28px 0 0 72px; padding: 22px; background: var(--surface); border-left: 3px solid var(--green); }
.requirements h3 { margin: 0 0 14px; font-size: 15px; }
.requirements > div { display: flex; flex-wrap: wrap; gap: 7px; }
.requirements span { padding: 4px 8px; background: var(--green-soft); color: #356653; font-size: 11px; }
.requirements p { margin: 14px 0 0; color: var(--muted); font-size: 13px; }

.decision-split { display: grid; grid-template-columns: 1fr 52px 1fr; align-items: stretch; margin-left: 72px; }
.decision-option { padding: 24px; border: 1px solid var(--line); background: var(--surface); }
.decision-option.agent { border: 2px solid var(--green); padding: 23px; }
.decision-label { color: var(--muted); font-size: 11px; }
.decision-option h3 { margin: 7px 0; font-family: Georgia, serif; font-size: 25px; font-weight: 500; }
.decision-option p { margin: 0; color: var(--muted); font-size: 13px; }
.decision-or { display: grid; place-items: center; color: var(--muted); font-size: 11px; }
.comparison-table { margin: 30px 0 0 72px; overflow-x: auto; border: 1px solid var(--line); }
table { width: 100%; min-width: 650px; border-collapse: collapse; background: var(--surface); text-align: left; }
th, td { padding: 13px 15px; border-bottom: 1px solid var(--line); font-size: 12px; vertical-align: top; }
th { background: #eef1ed; color: var(--muted); font-weight: 700; }
td { color: var(--muted); }
td:first-child { color: var(--ink); white-space: nowrap; }
tr:last-child td { border-bottom: 0; }
.table-note { margin: 12px 0 0 72px; color: var(--muted); font-size: 12px; }

.skill-intro { display: grid; grid-template-columns: 150px 1fr; align-items: center; gap: 28px; margin-left: 72px; }
.skill-intro .lead { margin: 0; }
.folder-visual { position: relative; width: 140px; height: 96px; display: grid; place-items: center; background: var(--yellow); border: 2px solid var(--ink); transform: rotate(-2deg); }
.folder-visual::before { content: ""; position: absolute; top: -18px; left: -2px; width: 62px; height: 18px; background: var(--yellow); border: 2px solid var(--ink); border-bottom: 0; }
.folder-visual span { font-family: monospace; font-size: 13px; font-weight: 800; }
.skill-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin: 32px 0 0 72px; border: 1px solid var(--line); background: var(--line); }
.skill-facts div { padding: 18px; background: var(--surface); }
.skill-facts strong { font-size: 14px; }
.skill-facts p { margin: 6px 0 0; color: var(--muted); font-size: 12px; }
.technical-details { margin: 20px 0 0 72px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.technical-details summary, .admin-section summary { cursor: pointer; padding: 14px 0; font-weight: 700; font-size: 13px; }
.details-body { padding: 0 18px 20px; color: var(--muted); font-size: 13px; }
.details-body code { padding: 2px 4px; background: #eaeeea; color: var(--ink); }

.trouble-list { margin-left: 72px; border-top: 1px solid var(--line); }
.trouble-list details { border-bottom: 1px solid var(--line); }
.trouble-list summary { display: grid; grid-template-columns: 1fr auto; gap: 20px; padding: 16px 2px; cursor: pointer; list-style: none; }
.trouble-list summary::-webkit-details-marker { display: none; }
.trouble-list summary span { font-weight: 700; font-size: 14px; }
.trouble-list summary b { color: var(--green); font-size: 12px; }
.trouble-list details p { margin: -6px 0 16px; padding-right: 120px; color: var(--muted); font-size: 13px; }
.report-tip { margin: 24px 0 0 72px; padding: 16px; background: var(--yellow-soft); color: #695c37; font-size: 12px; }

.faq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-left: 72px; }
.faq-grid details { border: 1px solid var(--line); background: var(--surface); }
.faq-grid summary { min-height: 58px; padding: 16px 40px 14px 16px; cursor: pointer; font-weight: 700; font-size: 13px; line-height: 1.5; }
.faq-grid p { margin: 0; padding: 0 16px 16px; color: var(--muted); font-size: 12px; }
.faq-grid details[open] { border-color: #b5d8c8; }

.checklist-section { border-bottom: 0; }
.checklist-board { display: grid; grid-template-columns: repeat(3, 1fr); margin-left: 72px; background: var(--ink); color: white; }
.checklist-board > div { padding: 22px; border-right: 1px solid #435049; }
.checklist-board > div:last-child { border: 0; }
.phase { display: block; margin-bottom: 16px; color: #8fd3b9; font-size: 12px; font-weight: 800; }
.checklist-board label { display: flex; align-items: flex-start; gap: 8px; margin: 11px 0; color: #d0d8d4; font-size: 12px; line-height: 1.5; cursor: pointer; }
.checklist-board input { width: 15px; height: 15px; margin: 2px 0 0; accent-color: #8fd3b9; }
.checklist-board label:has(input:checked) { color: #819088; text-decoration: line-through; }
.reset-button { display: block; margin: 12px 0 0 auto; padding: 6px 10px; border: 1px solid var(--line); background: transparent; color: var(--muted); cursor: pointer; font-size: 11px; }
.reset-button:hover { color: var(--ink); border-color: #9aa69f; }

.admin-section { padding: 60px 0; }
.admin-section details { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.admin-section summary { padding: 18px 0; }
.admin-body { padding: 0 20px 20px; color: var(--muted); font-size: 13px; }
.admin-body li { margin: 6px 0; }
footer { display: flex; justify-content: space-between; align-items: end; gap: 32px; padding: 36px 0 50px; border-top: 1px solid var(--line); }
footer strong { font-size: 13px; }
footer p { margin: 4px 0 0; color: var(--muted); font-size: 11px; }
footer a { color: var(--green); font-size: 12px; font-weight: 700; }
.toast { position: fixed; z-index: 80; left: 50%; bottom: 28px; transform: translate(-50%, 20px); padding: 8px 14px; background: var(--ink); color: white; opacity: 0; pointer-events: none; transition: .2s ease; font-size: 12px; box-shadow: var(--shadow); }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 1060px) {
  .page-shell { grid-template-columns: 200px minmax(0, 1fr); gap: 40px; padding: 0 24px; }
  .definition-band { margin-left: -264px; margin-right: -24px; padding-left: 264px; padding-right: 24px; }
  .prompt-anatomy { grid-template-columns: 1fr 1fr; }
  .prompt-anatomy div { border-bottom: 1px solid var(--line); }
  .prompt-anatomy div:last-child { grid-column: span 2; }
  .workflow-diagram { grid-template-columns: 1fr; gap: 8px; }
  .workflow-connector { flex-direction: row; justify-content: center; gap: 5px; }
  .workflow-connector i { transform: rotate(90deg); }
  .workflow-node { min-height: 110px; }
}

@media (max-width: 760px) {
  :root { --header-height: 58px; }
  .topbar { padding: 0 16px; }
  .version { display: none; }
  .mobile-menu-button { display: grid; }
  .progress-track { top: 57px; }
  .mobile-menu { position: fixed; z-index: 45; display: grid; grid-template-columns: 1fr 1fr; top: 58px; left: 0; right: 0; padding: 12px 16px 16px; background: var(--surface); border-bottom: 1px solid var(--line); box-shadow: var(--shadow); }
  .mobile-menu[hidden] { display: none; }
  .mobile-menu a { padding: 8px; color: var(--muted); text-decoration: none; font-size: 13px; }
  .page-shell { display: block; padding: 0 18px; }
  .sidebar { display: none; }
  .hero { min-height: auto; padding: 66px 0 44px; }
  h1 { font-size: 48px; }
  .hero-intro { font-size: 16px; }
  .hero-actions { align-items: flex-start; flex-direction: column; gap: 16px; }
  .concept-strip { grid-template-columns: 1fr; gap: 10px; margin-top: 44px; }
  .flow-arrow { transform: rotate(90deg); justify-self: center; padding: 0; }
  .definition-band { margin: 0 -18px; padding: 42px 18px; }
  .definition-grid { grid-template-columns: 1fr; gap: 28px; }
  .content-section { padding-top: 78px; }
  .section-heading { grid-template-columns: 36px 1fr; gap: 8px; margin-bottom: 34px; }
  .section-heading h2 { font-size: 29px; }
  .lead, .steps, .callout, .prompt-anatomy, .template-tabs, .template-panel, .habits-grid, .safety-banner, .do-dont, .mode-explainer, .workflow-diagram, .process-list, .requirements, .decision-split, .comparison-table, .table-note, .skill-intro, .skill-facts, .technical-details, .trouble-list, .report-tip, .faq-grid, .checklist-board, .platform-permissions { margin-left: 0; }
  .steps { margin-top: 0; }
  .step { grid-template-columns: 40px 1fr; gap: 12px; }
  .step:not(:last-child)::before { left: 19px; }
  .permission-chooser { grid-template-columns: 1fr; }
  .permission-chooser > div { min-height: auto; }
  .prompt-anatomy { grid-template-columns: 1fr; }
  .prompt-anatomy div, .prompt-anatomy div:last-child { grid-column: auto; border-right: 0; border-bottom: 1px solid var(--line); }
  .habits-grid, .do-dont, .mode-explainer, .faq-grid { grid-template-columns: 1fr; }
  .safety-banner { grid-template-columns: 74px 1fr; padding: 18px; gap: 16px; }
  .lock-visual { transform: scale(.72); transform-origin: left center; }
  .decision-split { grid-template-columns: 1fr; gap: 10px; }
  .decision-or { display: none; }
  .skill-intro { grid-template-columns: 1fr; }
  .folder-visual { margin: 10px 0 8px 10px; }
  .skill-facts, .checklist-board { grid-template-columns: 1fr; }
  .checklist-board > div { border-right: 0; border-bottom: 1px solid #435049; }
  .trouble-list summary { grid-template-columns: 1fr; gap: 2px; }
  .trouble-list details p { padding-right: 0; }
  footer { align-items: flex-start; flex-direction: column; }
}

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