:root {
  --ink: #161616;
  --muted: #656563;
  --line: #deded9;
  --paper: #f5f5f3;
  --surface: #ffffff;
  --soft: #ecece8;
  --sidebar: 250px;
  --radius: 22px;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", Inter, Helvetica, Arial, sans-serif;
  color: var(--ink);
  background: var(--paper);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 24px; }
body { margin: 0; background: var(--paper); color: var(--ink); }
a { color: inherit; }
button, input { font: inherit; }
button { color: inherit; }
.skip-link { position: fixed; top: 12px; left: 12px; z-index: 200; transform: translateY(-150%); background: #111; color: #fff; padding: 10px 14px; border-radius: 9px; }
.skip-link:focus { transform: translateY(0); }
.reading-progress { position: fixed; z-index: 100; left: var(--sidebar); right: 0; top: 0; height: 3px; background: transparent; }
.reading-progress span { display: block; width: 0; height: 100%; background: #1c1c1c; transition: width .1s linear; }

.sidebar { position: fixed; z-index: 50; inset: 0 auto 0 0; width: var(--sidebar); padding: 32px 26px 24px; border-right: 1px solid var(--line); background: rgba(245,245,243,.94); backdrop-filter: blur(18px); display: flex; flex-direction: column; }
.wordmark { text-decoration: none; font-size: 16px; font-weight: 720; letter-spacing: -.02em; }
.wordmark span { color: var(--muted); font-weight: 500; }
.sidebar nav { margin-top: 76px; display: grid; gap: 3px; }
.nav-label { margin: 0 0 12px 12px; text-transform: uppercase; letter-spacing: .12em; font-size: 10px; color: #8a8a86; font-weight: 700; }
.sidebar nav a { display: grid; grid-template-columns: 27px 1fr; align-items: center; padding: 9px 12px; border-radius: 10px; text-decoration: none; font-variant-numeric: tabular-nums; font-size: 11px; color: #a0a09b; transition: background .2s, color .2s; }
.sidebar nav a span { font-size: 13px; color: #5c5c59; }
.sidebar nav a:hover, .sidebar nav a.active { background: #e7e7e2; color: #333; }
.sidebar nav a.active span { color: #111; font-weight: 620; }
.sidebar-note { margin-top: auto; border-top: 1px solid var(--line); padding: 18px 8px 0; font-size: 11px; line-height: 1.5; color: var(--muted); }
.status-dot { display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: #222; }
.mobile-header { display: none; }

main { margin-left: var(--sidebar); }
.hero { min-height: 92vh; display: flex; flex-direction: column; justify-content: center; max-width: 1160px; margin: 0 auto; padding: 9vw 7vw 7vw; }
.eyebrow, .kicker, .mini-label { margin: 0; text-transform: uppercase; letter-spacing: .13em; font-size: 11px; font-weight: 720; color: #72726f; }
.hero h1 { margin: 22px 0 26px; max-width: 950px; font-size: clamp(54px, 7.4vw, 104px); line-height: .96; letter-spacing: -.065em; font-weight: 720; }
.hero h1 span { color: #91918c; }
.hero-copy { max-width: 680px; margin: 0; font-size: clamp(19px, 2vw, 25px); line-height: 1.45; letter-spacing: -.025em; color: #4e4e4b; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 36px; }
.button { display: inline-flex; justify-content: center; align-items: center; min-height: 46px; padding: 0 20px; border: 1px solid transparent; border-radius: 999px; text-decoration: none; font-size: 13px; font-weight: 650; transition: transform .2s, background .2s; }
.button:hover { transform: translateY(-1px); }
.button-dark { background: #171717; color: white; }
.button-dark:hover { background: #30302f; }
.button-light { background: var(--surface); border-color: #d4d4cf; }
.button-light:hover { background: #eaeae6; }
.button-quiet { gap: 9px; border-color: transparent; background: transparent; color: #666; cursor: pointer; }
.button-quiet:hover { background: #eaeae6; color: #222; }
.button-quiet span { color: #999; font-size: 15px; }
.route-finder { margin-top: 38px; padding: 18px 0 0; border-top: 1px solid var(--line); }
.route-finder > p { margin: 0 0 12px; color: #8a8a86; font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.route-finder > div { display: grid; grid-template-columns: repeat(5,1fr); gap: 8px; }
.route-finder a { min-height: 82px; padding: 15px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.55); text-decoration: none; transition: background .2s, transform .2s; }
.route-finder a:hover { background: white; transform: translateY(-1px); }
.route-finder span, .route-finder small { display: block; }
.route-finder span { font-size: 12px; font-weight: 700; }
.route-finder small { margin-top: 10px; color: var(--muted); font-size: 10px; line-height: 1.35; }
.principle-strip { margin-top: 80px; display: flex; gap: 18px; align-items: center; color: #8a8a86; font-size: 12px; text-transform: uppercase; letter-spacing: .11em; }
.principle-strip span { color: #2e2e2d; font-weight: 700; }
.principle-strip i { font-style: normal; color: #b8b8b2; }

.section { position: relative; max-width: 1160px; margin: 0 auto; padding: 120px 7vw; border-top: 1px solid var(--line); }
.section-heading { margin-bottom: 54px; }
.section-heading > div { display: flex; align-items: center; gap: 16px; }
.section-number { display: grid; place-items: center; width: 31px; height: 31px; border: 1px solid #cdcdc8; border-radius: 50%; font-size: 10px; color: #777773; }
.section-heading h2 { max-width: 840px; margin: 20px 0 16px; font-size: clamp(38px, 5vw, 68px); line-height: 1.03; letter-spacing: -.05em; }
.section-heading > p { max-width: 720px; margin: 0; font-size: 18px; line-height: 1.6; color: var(--muted); }

.anki-basics { display: grid; grid-template-columns: .75fr 1.25fr; gap: 34px; align-items: start; margin-bottom: 48px; padding: 34px; border-radius: 24px; background: #20201f; color: white; }
.basics-intro .mini-label { color: #999; }
.basics-intro h3 { margin: 14px 0; font-size: 30px; line-height: 1.08; letter-spacing: -.035em; }
.basics-intro > p:last-child { color: #c1c1bb; font-size: 13px; line-height: 1.6; }
.platform-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; overflow: hidden; border: 1px solid #484845; border-radius: 16px; background: #484845; }
.platform-grid article { min-height: 150px; padding: 19px; background: #2b2b2a; }
.platform-grid span { color: #92928d; font-size: 9px; letter-spacing: .09em; text-transform: uppercase; }
.platform-grid strong { display: block; margin-top: 24px; font-size: 14px; }
.platform-grid p { margin: 7px 0 0; color: #bdbdb7; font-size: 11px; line-height: 1.5; }
.platform-grid code { background: #41413f; }
.card-state-guide { display: grid; grid-template-columns: 1.2fr repeat(3,1fr); gap: 1px; overflow: hidden; margin-top: 36px; border: 1px solid var(--line); border-radius: 18px; background: var(--line); }
.card-state-guide > * { min-height: 180px; padding: 23px; background: white; }
.card-state-guide > div { background: #e9e9e5; }
.card-state-guide h3 { margin: 30px 0 0; font-size: 22px; letter-spacing: -.03em; }
.card-state-guide article > span { display: inline-block; padding: 5px 8px; border-radius: 6px; background: #ededE9; font-size: 10px; font-weight: 700; }
.card-state-guide article strong { display: block; margin-top: 34px; font-size: 13px; }
.card-state-guide article p { margin: 7px 0 0; color: var(--muted); font-size: 11px; line-height: 1.5; }

.step-list { border-top: 1px solid var(--line); }
.step-card { display: grid; grid-template-columns: 46px minmax(0,1fr) auto; gap: 20px; align-items: center; padding: 27px 0; border-bottom: 1px solid var(--line); }
.step-number { display: grid; place-items: center; width: 34px; height: 34px; background: #222; color: white; border-radius: 50%; font-size: 12px; }
.step-card h3 { margin: 0 0 6px; font-size: 17px; letter-spacing: -.02em; }
.step-card p { margin: 0; color: var(--muted); line-height: 1.55; }
.step-card > a, .quiet-label { font-size: 12px; color: #555; text-underline-offset: 3px; white-space: nowrap; }
code { padding: 2px 6px; border-radius: 5px; background: #e8e8e4; font-size: .9em; }

.setup-visuals { display: grid; grid-template-columns: 1fr; gap: 18px; margin-top: 48px; }
.setup-visual-card { overflow: hidden; border: 1px solid var(--line); border-radius: 22px; background: white; }
.setup-wide { grid-column: auto; }
.setup-shot { position: relative; display: block; width: 100%; padding: 0; overflow: hidden; border: 0; border-bottom: 1px solid var(--line); background: #ecece8; cursor: zoom-in; }
.setup-shot img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: contain; }
.setup-shot-wide img { aspect-ratio: 1600 / 760; }
.setup-shot > span { position: absolute; right: 16px; bottom: 16px; padding: 8px 11px; border: 1px solid rgba(255,255,255,.62); border-radius: 999px; background: rgba(31,31,30,.82); color: white; font-size: 9px; letter-spacing: .05em; text-transform: uppercase; opacity: 0; transform: translateY(4px); transition: opacity .18s ease, transform .18s ease; }
.setup-shot:hover > span, .setup-shot:focus-visible > span { opacity: 1; transform: translateY(0); }
.setup-shot:focus-visible { outline: 3px solid #222; outline-offset: -3px; }
.visual-caption { display: grid; grid-template-columns: 34px 1fr; gap: 14px; padding: 24px; }
.visual-caption > span { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid #cecec9; border-radius: 50%; color: #888; font-size: 9px; }
.visual-caption h3 { margin: 2px 0 6px; font-size: 16px; }
.visual-caption p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.55; }
.visual-caption a { display: inline-block; margin-top: 11px; color: #333; font-size: 11px; text-underline-offset: 4px; }
.diagram-note { margin: 12px 4px 0; color: #92928d; font-size: 10px; }
.setup-lightbox { width: min(1380px,94vw); max-width: none; padding: 46px 18px 18px; border: 0; border-radius: 22px; background: #f5f5f2; box-shadow: 0 32px 100px rgba(0,0,0,.32); }
.setup-lightbox::backdrop { background: rgba(20,20,19,.72); backdrop-filter: blur(7px); }
.setup-lightbox > button { position: absolute; top: 13px; right: 16px; padding: 7px 11px; border: 1px solid #cacac5; border-radius: 999px; background: white; color: #333; cursor: pointer; }
.setup-lightbox img { display: block; width: 100%; max-height: 82vh; object-fit: contain; border: 1px solid #d7d7d2; border-radius: 14px; background: #ecece8; }

.callout { display: flex; gap: 18px; margin-top: 28px; padding: 24px; border-radius: 16px; background: #e9e9e5; }
.callout-icon { flex: 0 0 auto; display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid #aaa; border-radius: 50%; font-size: 13px; font-weight: 700; }
.callout h3 { margin: 1px 0 6px; font-size: 15px; }
.callout p { margin: 0; color: #5c5c59; line-height: 1.55; }
.callout.caution { background: #20201f; color: white; }
.callout.caution p { color: #cacac4; }
.callout.caution .callout-icon { border-color: #666; }

.settings-blueprint { display: grid; grid-template-columns: .72fr 1.28fr; gap: clamp(28px,5vw,68px); align-items: center; margin-top: 42px; padding: clamp(28px,4vw,48px); border: 1px solid var(--line); border-radius: 26px; background: #e9e9e5; }
.settings-copy h3 { max-width: 360px; margin: 14px 0; font-size: clamp(32px,4vw,48px); line-height: 1.03; letter-spacing: -.045em; }
.settings-copy > p:not(.mini-label) { max-width: 430px; color: var(--muted); line-height: 1.6; }
.settings-path { margin-top: 28px; font-size: 13px; }
.settings-path strong { color: #222; }
.settings-panel { overflow: hidden; border: 1px solid #d6d6d1; border-radius: 19px; background: white; box-shadow: 0 18px 48px rgba(31,31,28,.08); }
.settings-panel-head, .setting-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.settings-panel-head { padding: 20px 22px; background: #20201f; color: white; }
.settings-panel-head strong, .settings-panel-head small, .setting-row strong, .setting-row small { display: block; }
.settings-panel-head strong { font-size: 14px; }
.settings-panel-head small { margin-top: 4px; max-width: 360px; color: #aaa; font-size: 10px; line-height: 1.4; }
.settings-panel-head > span { flex: 0 0 auto; padding: 6px 9px; border: 1px solid #666; border-radius: 999px; color: #d4d4ce; font-size: 9px; text-transform: uppercase; letter-spacing: .08em; }
.setting-row { min-height: 68px; padding: 13px 22px; border-bottom: 1px solid #e5e5e1; }
.setting-row:last-child { border-bottom: 0; }
.setting-row strong { font-size: 12px; }
.setting-row small { margin-top: 4px; color: #8a8a85; font-size: 10px; line-height: 1.35; }
.setting-value { flex: 0 0 auto; padding: 7px 10px; border-radius: 8px; background: #eeeeea; font-size: 10px; font-weight: 700; }
.switch-on { position: relative; flex: 0 0 auto; width: 40px; height: 23px; border-radius: 999px; background: #20201f; }
.switch-on i { position: absolute; top: 4px; right: 4px; width: 15px; height: 15px; border-radius: 50%; background: white; }
.settings-notes { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin-top: 18px; }
.settings-notes article { min-height: 210px; padding: 24px; border: 1px solid var(--line); border-radius: 18px; background: white; }
.settings-notes span { color: #8e8e89; font-size: 10px; text-transform: uppercase; letter-spacing: .09em; }
.settings-notes h3 { margin: 38px 0 8px; font-size: 19px; letter-spacing: -.025em; }
.settings-notes p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.55; }
.setup-complete { display: flex; align-items: center; justify-content: space-between; gap: 30px; margin-top: 28px; padding: clamp(26px,4vw,42px); border-radius: 22px; background: #20201f; color: white; }
.setup-complete .mini-label { color: #9b9b96; }
.setup-complete h3 { margin: 10px 0 8px; font-size: clamp(28px,3.5vw,42px); letter-spacing: -.04em; }
.setup-complete p:last-child { max-width: 590px; margin: 0; color: #c9c9c3; line-height: 1.55; }
.setup-complete .button { flex: 0 0 auto; }
.settings-disclosure, .routine-extra { margin-top: 22px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.settings-disclosure summary, .routine-extra summary { display: grid; grid-template-columns: 1fr minmax(220px,.75fr) 24px; gap: 24px; align-items: center; min-height: 82px; cursor: pointer; list-style: none; }
.settings-disclosure summary::-webkit-details-marker, .routine-extra summary::-webkit-details-marker { display: none; }
.settings-disclosure summary span, .routine-extra summary span { color: #222; font-size: 15px; font-weight: 700; }
.settings-disclosure summary small, .routine-extra summary small { color: var(--muted); font-size: 12px; line-height: 1.45; }
.settings-disclosure summary b, .routine-extra summary b { color: #8a8a85; font-size: 22px; font-weight: 400; transition: transform .2s ease; }
.settings-disclosure[open] summary b, .routine-extra[open] summary b { transform: rotate(45deg); }
.settings-disclosure-body, .routine-extra-body { padding-bottom: 24px; }
.settings-disclosure .settings-blueprint { margin-top: 12px; }

.process-diagram { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr; gap: 12px; align-items: center; margin-bottom: 52px; }
.process-diagram > div { min-height: 142px; padding: 20px; border: 1px solid var(--line); border-radius: 17px; background: rgba(255,255,255,.58); display: flex; flex-direction: column; }
.process-diagram strong { color: #a1a19c; font-size: 11px; }
.process-diagram span { margin-top: auto; font-size: 16px; font-weight: 680; }
.process-diagram small { margin-top: 5px; color: var(--muted); line-height: 1.4; }
.process-diagram > b, .paper-loop > b, .rescue-flow > b { color: #9b9b96; font-weight: 400; }

.capture-module { display: grid; grid-template-columns: minmax(240px,.48fr) minmax(520px,1.52fr); gap: clamp(28px,4vw,54px); align-items: center; }
.capture-copy h3 { margin: 12px 0; font-size: clamp(29px,3vw,42px); letter-spacing: -.04em; line-height: 1.08; }
.capture-copy > p:not(.mini-label) { color: var(--muted); line-height: 1.65; }
.plain-list { margin: 26px 0 0; padding: 0; list-style: none; display: grid; gap: 11px; }
.plain-list li { color: var(--muted); font-size: 14px; line-height: 1.45; }
.plain-list strong { color: #222; }
.segmented-control { display: inline-flex; margin: 20px 0 6px; padding: 4px; border-radius: 11px; background: #e3e3de; }
.segmented-control button { padding: 8px 13px; border: 0; background: transparent; border-radius: 8px; font-size: 12px; cursor: pointer; }
.segmented-control button[aria-selected="true"] { background: white; box-shadow: 0 1px 4px rgba(0,0,0,.1); }
.capture-frame { margin: 0; }
.capture-frame img { display: block; width: 100%; border-radius: var(--radius); border: 1px solid #d9d9d5; background: #fff; box-shadow: 0 18px 55px rgba(31,31,28,.10); }
.capture-frame figcaption { margin-top: 10px; text-align: center; color: #858580; font-size: 12px; line-height: 1.45; letter-spacing: .02em; }
.interactive-card-shell { overflow: hidden; border: 1px solid #d9d9d5; border-radius: var(--radius); background: #fff; box-shadow: 0 18px 55px rgba(31,31,28,.10); }
.interactive-card-surface { position: relative; }
.card-flip-hotspot, .card-hint-hotspot { position: absolute; appearance: none; padding: 0; border: 0; background: transparent; cursor: pointer; }
.card-flip-hotspot { z-index: 1; inset: 0; width: 100%; height: 100%; }
.card-hint-hotspot { z-index: 2; top: var(--hint-y); left: 50%; width: clamp(64px,6vw,86px); height: clamp(44px,4vw,54px); border-radius: 999px; transform: translate(-50%,-50%); }
.card-flip-hotspot:focus-visible { outline: 3px solid #20201f; outline-offset: -3px; }
.card-hint-hotspot:focus-visible { outline: 3px solid #20201f; outline-offset: 2px; }
.capture-crop { height: clamp(330px,31vw,430px); overflow: hidden; background: white; }
.capture-crop img { width: 140%; max-width: none; margin-left: -20%; border: 0; border-radius: 0; box-shadow: none; }
.interactive-card-shell > figcaption { margin: 0; padding: 0 16px 14px; background: #fff; }
.rating-panel { margin-top: 80px; padding-top: 60px; border-top: 1px solid var(--line); }
.rating-intro { max-width: 700px; }
.rating-intro h3 { margin: 12px 0; font-size: 32px; letter-spacing: -.035em; }
.rating-intro > p:last-child { color: var(--muted); line-height: 1.55; }
.rating-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; margin-top: 28px; }
.rating-grid article { min-height: 190px; padding: 22px; border-radius: 16px; background: white; border: 1px solid #dededa; }
.rating-grid span { display: inline-block; padding: 5px 9px; border-radius: 6px; background: #ededE9; font-size: 11px; font-weight: 700; }
.rating-grid strong { display: block; margin-top: 34px; font-size: 14px; }
.rating-grid p { margin: 7px 0 0; color: var(--muted); font-size: 12px; line-height: 1.5; }

.pill { flex: 0 0 auto; padding: 10px 15px; border: 1px solid #d2d2cd; border-radius: 999px; background: transparent; font-size: 12px; cursor: pointer; }
.pill.active { background: #20201f; color: white; border-color: #20201f; }
.text-button { display: inline-flex; gap: 14px; align-items: center; padding: 10px 0; border: 0; border-bottom: 1px solid #888; background: transparent; font-size: 13px; font-weight: 650; text-decoration: none; cursor: pointer; }
.text-button span { font-size: 17px; }
.io-showcase { padding: clamp(26px,4vw,48px); border: 1px solid var(--line); border-radius: 28px; background: #ecece8; }
.visual-showcase-head { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 42px; align-items: end; margin-bottom: 28px; }
.visual-recall-copy { max-width: 620px; }
.visual-recall-copy h3 { margin: 10px 0 9px; font-size: clamp(30px,3.6vw,48px); line-height: 1.02; letter-spacing: -.045em; }
.visual-recall-copy > p:not(.mini-label) { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.55; }
.visual-controls { display: grid; gap: 10px; justify-items: end; }
.visual-subject-tabs { display: inline-flex; gap: 3px; padding: 3px; border-radius: 12px; background: #deded9; }
.visual-subject-tabs button { padding: 8px 12px; border: 0; border-radius: 9px; background: transparent; font-size: 12px; cursor: pointer; }
.visual-subject-tabs button[aria-selected="true"] { background: white; box-shadow: 0 1px 4px rgba(0,0,0,.08); }
.visual-controls .segmented-control { margin: 0; background: transparent; padding: 0; }
.visual-controls .segmented-control button { color: #777; }
.visual-controls .segmented-control button[aria-selected="true"] { color: #111; box-shadow: none; background: transparent; text-decoration: underline; text-underline-offset: 5px; }
.visual-recall-frame { max-width: 1180px; margin-inline: auto; padding: 16px 16px 0; border-radius: 22px; box-shadow: none; }
.visual-recall-surface { overflow: hidden; border-radius: 14px; }
.visual-recall-frame img { width: 100%; height: auto; min-height: 0; border: 0; border-radius: 14px; box-shadow: none; image-rendering: auto; }
.visual-recall-frame figcaption { padding: 10px 0 14px; }
.visual-method { display: grid; grid-template-columns: repeat(3,1fr); gap: 0; margin: 22px 0 0; padding: 0; border-top: 1px solid #d4d4cf; list-style: none; }
.visual-method li { padding: 18px 20px 0 0; }
.visual-method strong, .visual-method span { display: block; }
.visual-method strong { font-size: 12px; }
.visual-method span { margin-top: 6px; color: var(--muted); font-size: 12px; line-height: 1.45; }
.feature-directory { margin-top: 92px; }
.feature-directory-heading { display: grid; grid-template-columns: .45fr 1.55fr; gap: 30px; align-items: end; margin-bottom: 24px; }
.feature-directory-heading h3 { margin: 0; font-size: 30px; letter-spacing: -.035em; }
.feature-directory details { background: transparent; }
.feature-directory summary, .deck-inventory-details summary { display: grid; grid-template-columns: 1fr minmax(220px,.75fr) 24px; gap: 24px; }
.feature-directory summary span, .deck-inventory-details summary span { color: #171717; font-size: 15px; font-weight: 680; transform: none; }
.feature-directory summary small, .deck-inventory-details summary small { color: #858580; font-size: 12px; font-weight: 500; line-height: 1.4; }
.feature-directory summary b, .deck-inventory-details summary b { color: #999; font-size: 18px; font-weight: 400; transition: transform .2s; }
.feature-directory details[open] summary b, .deck-inventory-details[open] summary b { transform: rotate(45deg); }
.deck-inventory-details { margin-top: 22px; border-top: 1px solid var(--line); }

.filter-builder { display: grid; grid-template-columns: 1.18fr .82fr; overflow: hidden; border: 1px solid #d8d8d3; border-radius: 24px; background: white; }
.tag-visual { display: grid; grid-template-columns: 1fr 80px 1fr; align-items: stretch; margin-bottom: 34px; overflow: hidden; border: 1px solid var(--line); border-radius: 24px; background: white; }
.tag-layers { padding: 32px; }
.tag-layers > div { display: flex; justify-content: space-between; gap: 14px; margin-top: 12px; padding: 13px 15px; border: 1px solid #d9d9d4; border-radius: 10px; }
.tag-layers span { color: #8b8b86; font-size: 10px; text-transform: uppercase; letter-spacing: .07em; }
.tag-layers strong { font-size: 12px; }
.tag-join { position: relative; background: #efefeb; display: grid; place-items: center; }
.tag-join i { position: absolute; left: 0; width: 50%; border-top: 1px solid #bdbdb7; }
.tag-join i:nth-child(1) { top: 24%; transform: rotate(17deg); transform-origin: left; }
.tag-join i:nth-child(2) { top: 42%; transform: rotate(6deg); transform-origin: left; }
.tag-join i:nth-child(3) { top: 60%; transform: rotate(-6deg); transform-origin: left; }
.tag-join i:nth-child(4) { top: 78%; transform: rotate(-17deg); transform-origin: left; }
.tag-join b { z-index: 1; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #20201f; color: white; font-weight: 400; }
.tag-output { position: relative; min-height: 330px; padding: 38px; background: #20201f; color: white; }
.tag-output > span { color: #999; font-size: 10px; text-transform: uppercase; letter-spacing: .1em; }
.tag-output h3 { max-width: 320px; margin: 16px 0 10px; font-size: 30px; line-height: 1.05; letter-spacing: -.04em; }
.tag-output p { max-width: 380px; color: #bcbcb6; font-size: 13px; line-height: 1.55; }
.mini-card-stack { position: absolute; right: 32px; bottom: 30px; width: 86px; height: 64px; }
.mini-card-stack i { position: absolute; inset: 0; border: 1px solid #666; border-radius: 8px; background: #333; transform: translate(-10px,-10px); }
.mini-card-stack i:nth-child(2) { transform: translate(-5px,-5px); background: #444; }
.mini-card-stack i:nth-child(3) { transform: none; background: white; }
.mini-card-stack strong { position: absolute; z-index: 2; inset: 0; display: grid; place-items: center; color: #222; font-size: 11px; }
.filter-options { padding: 34px; }
.filter-presets { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 20px; padding-bottom: 24px; border-bottom: 1px solid var(--line); }
.filter-presets > span { flex: 0 0 100%; margin-bottom: 2px; color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; }
.filter-presets button { min-height: 38px; padding: 0 12px; border: 1px solid #d2d2cd; border-radius: 9px; background: #f5f5f2; font-size: 12px; font-weight: 650; cursor: pointer; }
.filter-presets button:hover, .filter-presets button:focus-visible, .filter-presets button[aria-pressed="true"] { background: #20201f; color: white; border-color: #20201f; }
.filter-groups { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 20px; margin-top: 26px; }
.option-group { margin: 0; }
.option-group.wide { grid-column: 1 / -1; }
.option-group > span { display: block; margin-bottom: 10px; color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; }
.pill { min-height: 38px; margin: 0 5px 7px 0; padding: 8px 12px; }
.filter-more { grid-column: 1 / -1; margin-top: 2px; border-top: 1px solid var(--line); }
.filter-more summary { display: grid; grid-template-columns: 1fr auto 20px; gap: 16px; min-height: 62px; padding: 0; }
.filter-more summary span { color: #222; font-size: 13px; font-weight: 700; }
.filter-more summary small { color: var(--muted); font-size: 11px; font-weight: 500; }
.filter-more summary b { color: #999; font-size: 18px; font-weight: 400; transition: transform .2s; }
.filter-more[open] summary b { transform: rotate(45deg); }
.filter-more-body { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; padding: 8px 0 4px; }
.session-result { display: flex; flex-direction: column; justify-content: center; min-height: 700px; padding: 38px; background: #20201f; color: white; }
.session-label { color: #9e9e98; text-transform: uppercase; letter-spacing: .11em; font-size: 10px; font-weight: 700; }
.session-result h3 { margin: 14px 0 9px; font-size: clamp(29px,3vw,40px); line-height: 1.04; letter-spacing: -.04em; }
.session-result > p { margin: 0; color: #c3c3bd; font-size: 14px; line-height: 1.55; }
.session-filters { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 22px; }
.session-filters span { padding: 7px 9px; border: 1px solid #52524f; border-radius: 999px; color: #deded8; font-size: 11px; }
.session-result ol { margin: 30px 0; padding-left: 20px; display: grid; gap: 11px; color: #e2e2dd; font-size: 14px; line-height: 1.4; }
.session-result .session-next { margin: 0 0 24px; padding-top: 20px; border-top: 1px solid #484845; color: #deded8; }
.session-result small { color: #a9a9a3; font-size: 12px; line-height: 1.55; }
.tag-map { display: grid; grid-template-columns: repeat(3,1fr); margin-top: 26px; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.tag-map div { min-height: 112px; padding: 20px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.tag-map span { display: block; margin-bottom: 22px; font-weight: 700; font-size: 13px; }
.tag-map small { color: var(--muted); line-height: 1.45; }

.learning-loop, .paper-loop, .rescue-flow { display: grid; grid-template-columns: repeat(7,auto); gap: 12px; align-items: center; }
.learning-loop article { width: 100%; min-height: 190px; padding: 24px; border-radius: 50%; aspect-ratio: 1; border: 1px solid #d6d6d1; background: rgba(255,255,255,.6); display: flex; flex-direction: column; justify-content: center; text-align: center; }
.learning-loop article > span { color: #999; font-size: 10px; }
.learning-loop h3 { margin: 8px 0; font-size: 19px; }
.learning-loop p { margin: 0 auto; max-width: 150px; color: var(--muted); font-size: 12px; line-height: 1.45; }
.loop-arrow { color: #aaa; }
.routine-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 58px; }
.efficient-session { display: grid; grid-template-columns: .7fr 1.3fr; overflow: hidden; margin-bottom: 26px; border: 1px solid var(--line); border-radius: 24px; background: white; }
.session-clock { display: grid; place-items: center; align-content: center; min-height: 450px; padding: 40px; background: #20201f; color: white; text-align: center; }
.clock-face { position: relative; display: flex; flex-direction: column; justify-content: center; width: 210px; height: 210px; border: 1px solid #666; border-radius: 50%; }
.clock-face::before { content: ""; position: absolute; inset: 12px; border: 1px solid #3d3d3b; border-radius: 50%; }
.clock-face span { font-size: 62px; line-height: 1; letter-spacing: -.06em; }
.clock-face small { margin-top: 5px; color: #aaa; text-transform: uppercase; letter-spacing: .12em; }
.clock-face i { position: absolute; top: 16px; left: 50%; width: 7px; height: 7px; border-radius: 50%; background: white; }
.session-clock > p { margin: 24px 0 0; color: #aaa; font-size: 11px; }
.session-sequence { padding: 40px; }
.session-sequence ol { margin: 24px 0 0; padding: 0; list-style: none; }
.session-sequence li { display: grid; grid-template-columns: 58px 1fr; gap: 18px; padding: 17px 0; border-bottom: 1px solid var(--line); }
.session-sequence li:last-child { border-bottom: 0; }
.session-sequence li > span { color: #8e8e89; font-size: 11px; }
.session-sequence strong { font-size: 14px; }
.session-sequence p { margin: 5px 0 0; color: var(--muted); font-size: 12px; line-height: 1.45; }
.efficiency-rules { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin-bottom: 60px; }
.efficiency-rules article { min-height: 235px; padding: 24px; border: 1px solid var(--line); border-radius: 18px; }
.efficiency-rules span { color: #8e8e89; font-size: 10px; text-transform: uppercase; letter-spacing: .09em; }
.efficiency-rules h3 { margin: 42px 0 9px; font-size: 20px; letter-spacing: -.025em; }
.efficiency-rules p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.55; }
.answer-mode-guide { margin-bottom: 60px; }
.answer-mode-heading { display: grid; grid-template-columns: .5fr 1.5fr; gap: 30px; align-items: end; margin-bottom: 24px; }
.answer-mode-heading h3 { margin: 0; font-size: 30px; line-height: 1.08; letter-spacing: -.035em; }
.answer-modes { display: grid; grid-template-columns: repeat(4,1fr); overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: var(--line); gap: 1px; }
.answer-modes article { min-height: 160px; padding: 22px; background: var(--paper); }
.answer-modes span { font-size: 13px; font-weight: 700; }
.answer-modes p { margin: 38px 0 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.routine-card { min-height: 270px; padding: 28px; border: 1px solid var(--line); border-radius: 19px; background: white; }
.routine-card h3 { margin: 13px 0 28px; font-size: 24px; letter-spacing: -.03em; }
.routine-card ol { margin: 0; padding-left: 20px; display: grid; gap: 13px; color: var(--muted); line-height: 1.45; font-size: 13px; }
.scenario-guide { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin-top: 58px; }
.scenario-heading { grid-column: 1 / -1; display: grid; grid-template-columns: .45fr 1.55fr; gap: 30px; align-items: end; margin-bottom: 8px; }
.scenario-heading h3 { margin: 0; font-size: 30px; line-height: 1.08; letter-spacing: -.035em; }
.scenario-guide article { min-height: 220px; padding: 24px; border: 1px solid var(--line); border-radius: 18px; background: white; }
.scenario-guide article > span { color: #8e8e89; font-size: 10px; letter-spacing: .09em; text-transform: uppercase; }
.scenario-guide h3 { margin: 38px 0 8px; font-size: 18px; letter-spacing: -.025em; }
.scenario-guide p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.55; }
.subject-playbook { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin-top: 58px; }
.subject-playbook-heading { grid-column: 1 / -1; display: grid; grid-template-columns: .5fr 1.5fr; gap: 30px; align-items: end; margin-bottom: 10px; }
.subject-playbook-heading h3 { margin: 0; font-size: 30px; line-height: 1.08; letter-spacing: -.035em; }
.subject-playbook article { padding: 26px; border: 1px solid var(--line); border-radius: 18px; background: white; }
.subject-playbook article > span { font-size: 14px; font-weight: 720; }
.subject-playbook ul { margin: 34px 0 0; padding-left: 17px; display: grid; gap: 10px; color: var(--muted); font-size: 12px; line-height: 1.5; }
.routine-extra { margin-top: 28px; }
.routine-extra-body .scenario-guide { margin-top: 22px; }
.routine-extra-body .subject-playbook { margin-top: 48px; }

.paper-loop { grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr auto 1fr; }
.paper-loop article { min-height: 175px; padding: 20px; border-radius: 16px; background: white; border: 1px solid var(--line); }
.paper-loop article > span, .rescue-flow article > span { display: block; color: #9a9a95; font-size: 10px; }
.paper-loop strong { display: block; margin-top: 34px; font-size: 17px; }
.paper-loop p, .rescue-flow p { color: var(--muted); font-size: 12px; line-height: 1.45; }
.diagnosis-table { margin-top: 48px; border-top: 1px solid #cfcfca; }
.diagnosis-table > div { display: grid; grid-template-columns: .85fr 1.15fr; border-bottom: 1px solid var(--line); }
.diagnosis-table span { padding: 17px 8px; color: var(--muted); font-size: 13px; line-height: 1.4; }
.diagnosis-table span:first-child { padding-left: 0; color: #252524; font-weight: 620; }
.diagnosis-table .table-head span { color: #8b8b86; font-size: 10px; text-transform: uppercase; letter-spacing: .09em; }

.sync-choice { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.sync-choice article { min-height: 260px; padding: 30px; border-radius: 20px; background: white; border: 1px solid var(--line); }
.device-line { display: flex; gap: 12px; align-items: center; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: #777; }
.device-line i { font-style: normal; color: #bbb; }
.sync-choice h3 { margin: 72px 0 10px; font-size: 23px; letter-spacing: -.03em; }
.sync-choice p, .update-card > p:last-child { color: var(--muted); line-height: 1.55; }
.update-card { margin-top: 20px; padding: 34px; border: 1px solid var(--line); border-radius: 20px; }
.update-card h3 { margin: 13px 0 8px; font-size: 27px; letter-spacing: -.035em; }
.data-safety-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin-top: 14px; }
.data-safety-grid article { min-height: 220px; padding: 24px; border: 1px solid var(--line); border-radius: 18px; background: white; }
.data-safety-grid span { color: #8e8e89; font-size: 10px; letter-spacing: .09em; text-transform: uppercase; }
.data-safety-grid h3 { margin: 38px 0 8px; font-size: 18px; }
.data-safety-grid p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.55; }

.rescue-flow { grid-template-columns: 1fr auto 1fr auto 1fr; }
.rescue-flow article { min-height: 230px; padding: 28px; border-radius: 19px; background: white; border: 1px solid var(--line); }
.rescue-flow h3 { margin: 72px 0 8px; font-size: 20px; }
.two-column-notes { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 24px; }
.two-column-notes article { padding: 28px; border-radius: 18px; border: 1px solid var(--line); }
.two-column-notes h3 { margin: 0; font-size: 16px; }
.two-column-notes ul { margin: 20px 0 0; padding-left: 18px; display: grid; gap: 8px; color: var(--muted); }

.addon-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin-bottom: 22px; }
.addon-card { display: flex; flex-direction: column; min-height: 390px; padding: 28px; border: 1px solid var(--line); border-radius: 20px; background: white; }
.addon-card.recommended { background: #20201f; color: white; border-color: #20201f; }
.addon-label { display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.addon-label span { color: #777773; font-size: 10px; font-weight: 720; text-transform: uppercase; letter-spacing: .1em; }
.addon-label small { color: #999994; font-size: 11px; }
.addon-card.recommended .addon-label span, .addon-card.recommended .addon-label small { color: #aaa; }
.addon-card h3 { margin: 64px 0 12px; font-size: 25px; line-height: 1.06; letter-spacing: -.035em; }
.addon-card p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.55; }
.addon-card.recommended p { color: #c7c7c1; }
.addon-action { display: flex; justify-content: space-between; align-items: center; gap: 14px; margin-top: auto; padding-top: 28px; }
.addon-action code { color: #666661; font-size: 11px; }
.addon-card.recommended .addon-action code { background: #383836; color: #bbb; }
.addon-action a { font-size: 12px; font-weight: 680; text-underline-offset: 4px; }
.addon-safety { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; overflow: hidden; margin: 0 0 28px; border: 1px solid var(--line); border-radius: 18px; background: var(--line); }
.addon-safety > div { min-height: 132px; padding: 20px; background: var(--paper); }
.addon-safety span { color: #999994; font-size: 10px; font-weight: 700; }
.addon-safety p { margin: 24px 0 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.addon-safety strong { color: #222; }
details { border-bottom: 1px solid var(--line); }
details:first-of-type { border-top: 1px solid var(--line); }
summary { display: flex; justify-content: space-between; align-items: center; padding: 22px 4px; cursor: pointer; list-style: none; font-weight: 650; font-size: 14px; }
summary::-webkit-details-marker { display: none; }
summary span { color: #999; font-size: 18px; font-weight: 400; transition: transform .2s; }
details[open] summary > span:last-child { transform: rotate(45deg); }
.feature-directory details[open] summary > span:first-child,
.deck-inventory-details[open] summary > span:first-child { transform: none; }
.details-body { padding: 0 4px 24px; max-width: 780px; color: var(--muted); line-height: 1.6; font-size: 14px; }
.details-body ol { display: grid; gap: 8px; padding-left: 20px; }
.details-body ul { display: grid; gap: 8px; padding-left: 20px; }
.readiness-details { margin-top: 34px; }
.source-note { margin-top: 20px; color: #888; font-size: 11px; }
.source-note a { text-underline-offset: 3px; }
.faq-list { border-top: 1px solid var(--line); }
.glossary { margin-top: 72px; }
.glossary-heading { display: grid; grid-template-columns: .45fr 1.55fr; gap: 30px; align-items: end; margin-bottom: 24px; }
.glossary-heading h3 { margin: 0; font-size: 30px; letter-spacing: -.035em; }
.glossary dl { display: grid; grid-template-columns: 1fr 1fr; margin: 0; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.glossary dl > div { min-height: 110px; padding: 20px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.glossary dt { font-size: 13px; font-weight: 720; }
.glossary dd { margin: 20px 0 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.finish-card { margin-top: 80px; padding: 60px; border-radius: 28px; background: #20201f; color: white; }
.finish-card .mini-label { color: #94948f; }
.finish-card h2 { max-width: 780px; margin: 20px 0 46px; font-size: clamp(38px,5vw,65px); line-height: 1.02; letter-spacing: -.05em; }
.finish-card .text-button { color: white; border-color: #777; }
.sixty-second-list { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 34px; margin: 0 0 38px; padding: 0; list-style: none; counter-reset: quick-start; }
.sixty-second-list li { position: relative; min-height: 54px; padding: 0 0 12px 38px; border-bottom: 1px solid #3b3b39; color: #cdcdc7; font-size: 12px; line-height: 1.5; counter-increment: quick-start; }
.sixty-second-list li::before { content: counter(quick-start, decimal-leading-zero); position: absolute; left: 0; top: 0; color: #74746f; font-size: 10px; font-weight: 700; }
.sixty-second-list code { background: #393937; }
footer { display: flex; justify-content: space-between; align-items: center; gap: 30px; max-width: 1160px; margin: 0 auto; padding: 40px 7vw 70px; border-top: 1px solid var(--line); color: #888; font-size: 12px; }
footer div { display: flex; flex-wrap: wrap; gap: 12px 20px; justify-content: flex-end; }
footer a { text-underline-offset: 3px; }

.offline-dialog { width: min(720px, calc(100vw - 32px)); max-width: none; padding: 46px; border: 1px solid #d7d7d2; border-radius: 26px; background: #f5f5f3; box-shadow: 0 34px 110px rgba(0,0,0,.34); }
.offline-dialog::backdrop { background: rgba(18,18,17,.68); backdrop-filter: blur(8px); }
.dialog-close { position: absolute; top: 18px; right: 18px; padding: 7px 11px; border: 1px solid #d0d0cb; border-radius: 999px; background: white; color: #555; cursor: pointer; font-size: 11px; }
.offline-dialog h2 { max-width: 570px; margin: 18px 0 14px; font-size: clamp(34px,5vw,54px); line-height: 1.01; letter-spacing: -.05em; }
.offline-intro { max-width: 590px; margin: 0; color: var(--muted); font-size: 16px; line-height: 1.55; }
.offline-choices { display: grid; gap: 10px; margin-top: 30px; }
.offline-choice { display: grid; grid-template-columns: 42px 1fr 22px; gap: 14px; align-items: center; width: 100%; min-height: 86px; padding: 16px; border: 1px solid #d7d7d2; border-radius: 16px; background: white; color: var(--ink); text-align: left; text-decoration: none; cursor: pointer; transition: transform .18s ease, border-color .18s ease, background .18s ease; }
.offline-choice:hover { transform: translateY(-1px); border-color: #aaa; }
.offline-choice-primary { background: #20201f; color: white; border-color: #20201f; }
.offline-choice-primary:hover { background: #2d2d2b; border-color: #2d2d2b; }
.offline-choice-icon { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid #d4d4cf; border-radius: 12px; color: #555; font-size: 19px; font-weight: 400; }
.offline-choice-primary .offline-choice-icon { border-color: #555; color: white; }
.offline-choice > span:nth-child(2) { min-width: 0; }
.offline-choice strong, .offline-choice small { display: block; }
.offline-choice strong { font-size: 14px; }
.offline-choice small { margin-top: 6px; color: #777; font-size: 11px; line-height: 1.4; }
.offline-choice-primary small { color: #bdbdb7; }
.offline-choice b { color: #999; font-size: 16px; font-weight: 400; }
.offline-status { display: grid; gap: 5px; margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line); }
.offline-status strong { font-size: 11px; }
.offline-status span { color: #777; font-size: 11px; line-height: 1.5; }
.offline-file .offline-choices { display: none; }

@media (max-width: 1050px) {
  .route-finder > div { grid-template-columns: repeat(3,1fr); }
  .card-state-guide { grid-template-columns: 1fr 1fr; }
  .rating-grid { grid-template-columns: 1fr 1fr; }
  .answer-modes { grid-template-columns: 1fr 1fr; }
  .learning-loop { grid-template-columns: 1fr; }
  .learning-loop article { width: auto; min-height: 140px; aspect-ratio: auto; border-radius: 18px; }
  .loop-arrow { transform: rotate(90deg); text-align: center; }
  .routine-grid { grid-template-columns: 1fr; }
  .scenario-guide { grid-template-columns: 1fr 1fr; }
  .routine-card { min-height: auto; }
  .addon-grid { grid-template-columns: 1fr 1fr; }
  .addon-grid .addon-card:last-child { grid-column: 1 / -1; min-height: 300px; }
  .paper-loop { grid-template-columns: 1fr; }
  .paper-loop > b { transform: rotate(90deg); text-align: center; }
  .paper-loop article { min-height: 130px; }
  .paper-loop strong { margin-top: 22px; }
}

@media (max-width: 820px) {
  :root { --sidebar: 0px; }
  html { scroll-padding-top: 78px; }
  .reading-progress { left: 0; top: 59px; }
  .mobile-header { display: flex; position: fixed; z-index: 80; top: 0; left: 0; right: 0; height: 60px; padding: 0 18px; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); background: rgba(245,245,243,.94); backdrop-filter: blur(18px); }
  .menu-button { padding: 8px 11px; border: 1px solid #d2d2cd; border-radius: 9px; background: transparent; font-size: 12px; }
  .sidebar { display: none; top: 60px; width: 100%; padding: 22px; border: 0; overflow-y: auto; }
  .sidebar.open { display: flex; }
  .desktop-wordmark, .sidebar-note { display: none; }
  .sidebar nav { margin-top: 0; }
  main { margin-left: 0; padding-top: 60px; }
  .hero { min-height: calc(92vh - 60px); padding: 76px 22px 50px; }
  .hero h1 { font-size: clamp(47px,13vw,72px); }
  .route-finder > div { grid-template-columns: 1fr 1fr; }
  .principle-strip { gap: 9px; margin-top: 58px; font-size: 9px; }
  .section { padding: 82px 22px; }
  .anki-basics { grid-template-columns: 1fr; }
  .step-card { grid-template-columns: 40px 1fr; }
  .step-card > a, .quiet-label { grid-column: 2; }
  .setup-visuals { grid-template-columns: 1fr; }
  .setup-wide { grid-column: auto; }
  .settings-blueprint { grid-template-columns: 1fr; }
  .settings-notes { grid-template-columns: 1fr; }
  .settings-notes article { min-height: 170px; }
  .setup-complete { align-items: flex-start; flex-direction: column; }
  .settings-disclosure summary, .routine-extra summary { grid-template-columns: 1fr 24px; gap: 10px; }
  .settings-disclosure summary small, .routine-extra summary small { grid-column: 1; grid-row: 2; }
  .settings-disclosure summary b, .routine-extra summary b { grid-column: 2; grid-row: 1 / span 2; }
  .setup-shot img { height: auto; aspect-ratio: 16 / 9; }
  .process-diagram { grid-template-columns: 1fr; }
  .process-diagram > b { transform: rotate(90deg); text-align: center; }
  .process-diagram > div { min-height: 116px; }
  .capture-module { grid-template-columns: 1fr; }
  .capture-module { gap: 32px; }
  .capture-crop { height: clamp(280px,68vw,420px); }
  .capture-crop img { width: 150%; margin-left: -25%; }
  .visual-showcase-head { grid-template-columns: 1fr; }
  .visual-controls { justify-items: start; }
  .visual-method { grid-template-columns: 1fr; }
  .visual-method li { padding-right: 0; padding-bottom: 16px; border-bottom: 1px solid #d4d4cf; }
  .feature-directory-heading { grid-template-columns: 1fr; }
  .feature-directory summary, .deck-inventory-details summary { grid-template-columns: 1fr 24px; gap: 10px; }
  .feature-directory summary small, .deck-inventory-details summary small { grid-column: 1; grid-row: 2; }
  .feature-directory summary b, .deck-inventory-details summary b { grid-column: 2; grid-row: 1 / span 2; }
  .tag-map { grid-template-columns: 1fr 1fr; }
  .tag-visual { grid-template-columns: 1fr; }
  .tag-join { min-height: 64px; }
  .tag-join i { display: none; }
  .filter-builder { grid-template-columns: 1fr; }
  .session-result { min-height: 540px; }
  .efficient-session { grid-template-columns: 1fr; }
  .session-clock { min-height: 340px; }
  .efficiency-rules, .subject-playbook, .scenario-guide { grid-template-columns: 1fr; }
  .answer-mode-heading, .subject-playbook-heading, .scenario-heading, .glossary-heading { grid-template-columns: 1fr; }
  .sync-choice, .two-column-notes, .data-safety-grid { grid-template-columns: 1fr; }
  .rescue-flow { grid-template-columns: 1fr; }
  .rescue-flow > b { transform: rotate(90deg); text-align: center; }
  .addon-grid, .addon-safety { grid-template-columns: 1fr; }
  .addon-grid .addon-card:last-child { grid-column: auto; }
  .addon-card { min-height: 320px; }
  .addon-safety > div { min-height: auto; }
  .glossary dl, .sixty-second-list { grid-template-columns: 1fr; }
  footer { align-items: flex-start; gap: 20px; flex-direction: column; }
  footer div { justify-content: flex-start; }
}

@media (max-width: 520px) {
  .hero h1 { font-size: 46px; }
  .hero-copy { font-size: 18px; }
  .route-finder > div { grid-template-columns: 1fr; }
  .principle-strip { flex-wrap: wrap; }
  .section-heading h2 { font-size: 40px; }
  .section-heading > p { font-size: 16px; }
  .setup-shot > span { display: none; }
  .visual-caption { padding: 20px; }
  .setup-lightbox { width: 96vw; padding: 42px 8px 8px; border-radius: 16px; }
  .settings-blueprint { padding: 22px; border-radius: 20px; }
  .settings-panel-head, .setting-row { align-items: flex-start; }
  .settings-panel-head { padding: 18px; }
  .setting-row { padding: 13px 18px; }
  .settings-panel-head > span { display: none; }
  .filter-options, .session-result { padding: 26px; }
  .filter-groups { grid-template-columns: 1fr; }
  .option-group.wide { grid-column: auto; }
  .filter-more { grid-column: auto; }
  .filter-more summary { grid-template-columns: 1fr 20px; }
  .filter-more summary small { grid-column: 1; grid-row: 2; padding-bottom: 10px; }
  .filter-more summary b { grid-column: 2; grid-row: 1 / span 2; }
  .filter-more-body { grid-template-columns: 1fr; }
  .filter-presets button { flex: 1 1 calc(50% - 7px); }
  .platform-grid, .card-state-guide, .rating-grid, .tag-map, .answer-modes { grid-template-columns: 1fr; }
  .rating-grid article { min-height: 155px; }
  .capture-frame img { border-radius: 14px; }
  .diagnosis-table > div { grid-template-columns: 1fr; padding: 12px 0; }
  .diagnosis-table span { padding: 4px 0; }
  .diagnosis-table .table-head { display: none; }
  .finish-card { padding: 34px 26px; }
  .finish-card h2 { font-size: 39px; }
  .offline-dialog { padding: 42px 20px 24px; border-radius: 20px; }
  .offline-dialog h2 { font-size: 38px; }
  .offline-intro { font-size: 15px; }
  .offline-choice { grid-template-columns: 38px 1fr 18px; gap: 12px; min-height: 82px; padding: 13px; }
  .offline-choice-icon { width: 38px; height: 38px; }
}

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