@font-face {
  font-family: "Noto Sans JP";
  src: url("/assets/noto-sans-jp-400.woff") format("woff");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Noto Sans JP";
  src: url("/assets/noto-sans-jp-600.woff") format("woff");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "Noto Serif JP";
  src: url("/assets/noto-serif-jp-600.woff") format("woff");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

/* A shared reading rhythm, with quiet differences between reflection and action. */
:root {
  color-scheme: light;
  --ink: #20364b;
  --blue: #294d70;
  --accent: #326b97;
  --muted: #526575;
  --rule: #ccd7df;
  --pale: #f2f6f9;
  --yellow: #fff9e7;
  --yellow-rule: #dfd1a8;
  --white: #fff;
  --serif: "Noto Serif JP", "Noto Serif CJK JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --sans: "Noto Sans JP", "Noto Sans CJK JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", system-ui, sans-serif;
  --gutter: clamp(20px, 5.5vw, 82px);
  --section-space: clamp(48px, 6vw, 84px);
  --radius: 4px;
}
*, *::before, *::after {box-sizing: border-box}
html {scroll-padding-top: 1.5rem; -webkit-text-size-adjust: 100%}
body {margin: 0; background: var(--white); color: var(--ink); font: 400 16px/1.85 var(--sans); overflow-wrap: anywhere}
button, input, select, textarea {font: inherit; color: inherit}
button, select, input, textarea {max-width: 100%; min-width: 0}
button, summary {cursor: pointer}
button, a, label {touch-action: manipulation}
button {letter-spacing: inherit}
a {color: var(--blue); text-underline-offset: .25em; text-decoration-thickness: 1px}
a:hover {color: #17466c}
button, a, input, select, textarea, summary {outline-offset: 4px}
:focus-visible {outline: 3px solid var(--accent)}
button:disabled {cursor: default; opacity: .45}
button:disabled:hover {transform: none}
img {display: block; max-width: 100%; height: auto}
figure, dl, dd, h1, h2, h3, h4, p {margin: 0}
p + p {margin-top: .75em}
h1, h2, h3 {font-family: var(--serif); font-weight: 600; line-break: strict; word-break: auto-phrase; overflow-wrap: break-word; text-wrap: balance}
h1 {font-size: clamp(2.12rem, 4.6vw, 4rem); line-height: 1.27; letter-spacing: .01em}
h2 {font-size: clamp(1.52rem, 3vw, 2.4rem); line-height: 1.46}
h3 {font-size: clamp(1.16rem, 1.75vw, 1.42rem); line-height: 1.55}
h4, strong, b {font-weight: 600}
h2 + p, h3 + p {margin-top: .75rem}
ul, ol {padding-left: 1.35em}
li + li {margin-top: .5em}
fieldset {min-width: 0; padding: 0; margin: 0; border: 0}
legend {padding: 0; font-weight: 600}
summary {min-height: 44px; padding-block: .6rem; color: var(--blue)}
summary::marker {color: var(--accent)}
details[open] > summary {margin-bottom: .5rem}
details > p {margin: .65rem 0}
[hidden] {display: none !important}
.sr-only {position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0}
.skip {position: absolute; z-index: 100; left: var(--gutter); top: -100px; padding: .7rem 1.2rem; color: white; background: var(--blue)}
.skip:focus {top: 8px}

#main, .mast, .foot {width: 100%; max-width: 1280px; margin-inline: auto; padding-inline: var(--gutter)}
#main {min-height: 55vh; padding-bottom: 30px}
.mast {display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px 28px; min-height: 88px; padding-block: 17px; border-bottom: 1px solid var(--rule)}
.brand {display: grid; min-width: 0; color: var(--ink); text-decoration: none; line-height: 1.6}
.brand strong {font-family: var(--serif); font-size: clamp(1.14rem, 1.7vw, 1.4rem); font-weight: 600; letter-spacing: .035em}
.brand span {color: var(--muted); font-size: .75rem; margin-top: 4px}
.mast nav, .foot nav {display: flex; align-items: center; flex-wrap: wrap; gap: 6px clamp(12px, 1.7vw, 24px); min-width: 0}
.mast nav a, .foot nav a {display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; line-height: 1.6; color: var(--ink)}
.mast nav a {font-size: .93rem; border-bottom: 2px solid transparent}
.mast nav a:hover, .mast nav a[aria-current]:not([aria-current="false"]) {color: var(--accent); border-bottom-color: var(--accent)}
.foot {display: flex; align-items: start; justify-content: space-between; flex-wrap: wrap; gap: 20px 36px; border-top: 1px solid var(--rule); margin-top: 48px; padding-block: 30px 84px; font-size: .875rem}
.foot > div a {text-decoration: none; font-size: 1rem}
.foot p {margin-top: .35rem; color: var(--muted)}
.foot nav {max-width: 42rem}
.foot nav a:hover {text-decoration: underline}
.save-warning {max-width: 1280px; margin: auto; padding: 16px var(--gutter); background: #fff1c6; color: #56461d; border-bottom: 1px solid var(--yellow-rule); font-size: .95rem}

.section {margin-block: var(--section-space)}
.section.compact {margin-top: 28px}
.section-heading {display: flex; justify-content: space-between; align-items: end; flex-wrap: wrap; gap: 12px 24px; margin-bottom: 24px}
.section-heading > span {color: var(--muted); font-size: .9rem}
.section-lead {max-width: 56em; color: var(--muted); margin: 1rem 0 1.7rem; font-size: 1.05rem}
.kicker, .eyebrow {display: block; margin: 0 0 .4rem; color: var(--accent); font-size: .92rem; font-weight: 600; letter-spacing: .035em; line-height: 1.7}
.lead {max-width: 49em; font-size: clamp(1rem, 1.5vw, 1.15rem); line-height: 1.85; color: var(--muted)}
.note {font-size: .875rem; line-height: 1.8; color: var(--muted)}
.page-head {padding-block: clamp(30px, 4vw, 62px) 22px; max-width: 60rem}
.page-head h1 {font-size: clamp(2.1rem, 4.1vw, 3.5rem); line-height: 1.4; margin: .6rem 0 1.2rem}
.page-head .lead {max-width: 48em}
.actions {display: flex; align-items: center; flex-wrap: wrap; gap: 12px 22px; margin-top: 1.3rem; min-width: 0}
.actions > * {max-width: 100%; min-width: 0}
.button {display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: .65rem 1.2rem; border: 1px solid var(--blue); border-radius: var(--radius); background: var(--blue); color: white; font-size: .98rem; font-weight: 600; line-height: 1.55; text-align: center; text-decoration: none; white-space: normal; word-break: auto-phrase}
.button:hover:not(:disabled) {background: #193b58; color: white}
.button.quiet {background: white; color: var(--blue)}
.button.quiet:hover:not(:disabled) {background: var(--pale); color: var(--blue)}
.button.small {min-height: 44px; padding: .5rem .85rem; font-size: .9rem}
.text-button {display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: .35rem 0; border: 0; background: none; color: var(--blue); font-size: .95rem; line-height: 1.65; text-align: left; text-decoration: underline; text-underline-offset: .3em}
.text-button:hover:not(:disabled) {color: #17466c; text-decoration-thickness: 2px}
.text-link, .quiet-link {display: inline-flex; align-items: center; flex-wrap: wrap; gap: .25em; min-height: 44px; font-size: .95rem; font-weight: 600; line-height: 1.65}
.quiet-link {font-weight: 400; color: var(--muted)}

/* The opening and its six illustrated choices. */
.hero {display: grid; grid-template-columns: minmax(0, 1.13fr) minmax(0, 1fr); align-items: center; gap: 12px; padding-block: clamp(28px, 4vw, 62px) clamp(16px, 2.5vw, 36px); min-height: 395px}
.hero-copy {min-width: 0; max-width: 43rem}
.hero h1 {margin: .6rem 0 1.1rem}
.hero h1 > span {display: block; text-wrap: nowrap; word-break: normal}
.hero-lead {font-size: clamp(1.15rem, 1.7vw, 1.35rem); line-height: 1.85; font-weight: 600; margin-bottom: .6rem}
.hero-art {min-width: 0; margin: 0}
.hero-art img {width: 100%; height: auto; object-fit: contain; mix-blend-mode: multiply}
.hero-bottom {grid-column: 1 / -1; min-width: 0}
.hero-bottom .actions {margin-top: .5rem}
.privacy-line {display: flex; align-items: center; flex-wrap: wrap; gap: 3px 10px; margin-top: 18px; color: var(--muted); font-size: .8rem; line-height: 1.8}
.privacy-line strong {color: var(--ink); font-weight: 600}
.privacy-line a {min-height: 32px; display: inline-flex; align-items: center}
.privacy-dot {width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex: 0 0 7px}
.entrances {padding-block: 26px; margin: 16px 0 0; border-block: 1px solid var(--rule)}
.entrances h2 {font-size: clamp(1.25rem, 2vw, 1.6rem); margin-bottom: 18px}
.entrances-grid {display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0}
.entrances-grid article {padding: 12px 24px; min-width: 0; border-left: 1px solid var(--rule)}
.entrances-grid article:first-child {padding-left: 0; border-left: 0}
.entrances-grid article:last-child {background: var(--yellow); border-left: 0; border-bottom: 2px solid var(--blue)}
.entrances-grid h3 {font: 600 1.15rem/1.65 var(--sans)}
.entrances-grid h3 a {font-size: inherit; min-height: 32px}
.entrances-grid h3 > span {display: block; font-size: .75rem; color: var(--muted); font-weight: 400}
.entrances-grid p {font-size: .9rem; margin-top: .5rem; color: var(--muted)}
.visual-intro {display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: center; gap: clamp(28px, 5vw, 64px)}
.visual-intro .lead {margin-top: 1.3rem}
.benefit-list {list-style: none; padding: 0; margin: 1.5rem 0 1rem}
.benefit-list li {display: grid; grid-template-columns: 4.5em minmax(0, 1fr); gap: 14px; padding: .7rem 0; border-bottom: 1px solid var(--rule); margin: 0}
.benefit-list b {color: var(--blue)}
.benefit-list span {font-size: .95rem}
.preview-chart {padding: 20px clamp(16px, 3vw, 38px); min-width: 0; background: var(--yellow); border-top: 2px solid var(--yellow-rule)}
.example-label {display: inline-block; padding: 2px 10px; border: 1px solid #bda56d; color: #66552e; background: white; font-size: .8rem}
.chart-caption {margin-top: 0; color: var(--muted); font-size: .875rem; text-align: center; line-height: 1.7}
.mini-future {display: flex; justify-content: center; align-items: center; gap: 10px; margin-top: 23px; padding-top: 18px; border-top: 1px solid var(--yellow-rule); font-size: .75rem; line-height: 1.65; text-align: center}
.mini-future > span, .mini-future > strong {min-width: 0}
.mini-future i {display: block; flex: 1 1 18px; max-width: 32px; height: 0; border-top: 2px solid #a9b8c4}
.mini-future i.dashed {border-top-style: dashed}
.role-grid {display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 24px}
.role-card {position: relative; display: flex; flex-direction: column; align-items: stretch; padding: 0; min-width: 0; overflow: hidden; border: 1px solid var(--rule); border-radius: var(--radius); background: white; color: var(--ink); text-align: left}
.role-card > img {width: 100%; aspect-ratio: 3 / 2; object-fit: contain; background: white; mix-blend-mode: multiply; border-bottom: 1px solid #e3e9ed}
.role-copy {display: grid; gap: 7px; padding: 18px 22px 24px}
.role-copy > strong {font-size: clamp(1.3rem, 2vw, 1.6rem); line-height: 1.5; color: var(--blue)}
.role-copy > span {font-size: .98rem; line-height: 1.75}
.role-copy small {margin-top: 6px; padding-right: 22px; color: var(--muted); font-size: .8rem}
.card-arrow {position: absolute; right: 20px; bottom: 20px; color: var(--accent); font-size: 1.25rem}
.role-card:hover, .mode-card:hover, .situation-card:hover {border-color: var(--accent); background: #f8fafc}
.role-card.selected, .role-card[aria-pressed="true"] {border-color: var(--blue); background: var(--yellow); box-shadow: inset 0 0 0 1px var(--blue)}
.scene-art {position: relative; display: block; min-width: 0; aspect-ratio: 1; overflow: hidden; background: white}
.scene-art img {position: absolute; top: 50%; left: calc(var(--panel, 0) * -100%); width: 300%; max-width: none; height: auto; transform: translateY(-50%); mix-blend-mode: multiply}
.scene-art.single img {left: 0; width: 100%}
.rhythm-grid {display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin-top: 24px}
.rhythm-grid article {min-width: 0; border-bottom: 1px solid var(--rule); padding-bottom: 22px}
.rhythm-grid .scene-art {width: min(100%, 215px); margin-inline: auto}
.step-number {display: block; color: #7a92a5; font-size: 1.55rem; line-height: 1.5; font-weight: 400; margin-bottom: .4rem}
.rhythm-grid h3 {font-size: 1.25rem; margin: 5px 0 12px}
.rhythm-grid p {font-size: .95rem; color: var(--muted)}
.two-paths {display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(24px, 4vw, 54px)}
.two-paths article {padding-block: 24px; border-top: 2px solid var(--rule)}
.two-paths h2 {font-size: clamp(1.4rem, 2.6vw, 2rem)}
.two-paths p:not(.kicker) {margin-block: 18px}
.knowledge-teaser {background: var(--pale); padding: clamp(22px, 4vw, 46px); border-left: 3px solid #7896ae}
.knowledge-teaser > p:not(.kicker) {max-width: 56em; margin-top: 1rem}
.situation-pills {display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px}
.situation-pills a {display: inline-flex; align-items: center; min-height: 44px; padding: 8px 14px; border: 1px solid var(--rule); border-radius: var(--radius); background: white; font-size: .9rem; line-height: 1.65; text-decoration: none}
.situation-pills a:hover {border-color: var(--accent); background: var(--yellow)}
.situation-pills.vertical {display: grid}
.resume-banner {display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px 24px; margin: 24px 0 0; padding: 20px 24px; background: var(--yellow); border: 1px solid var(--yellow-rule)}
.resume-banner > div {min-width: 0}
.resume-banner .actions {margin: 0}
.resume-banner strong {display: block; font-size: 1.05rem}
.chosen-role {margin-top: 22px; border-left: 3px solid var(--accent); padding: 12px 20px; background: var(--pale)}
.chosen-role strong {color: var(--blue); font-size: 1.1rem}
.chosen-role p {margin-top: .35rem}
.mode-grid {display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; margin-top: 24px}
.mode-card {display: flex; flex-direction: column; gap: 10px; padding: clamp(20px, 3vw, 30px); border: 1px solid var(--rule); border-radius: var(--radius); background: white; text-align: left; line-height: 1.75}
.mode-card > strong {font: 600 1.6rem/1.5 var(--serif); color: var(--blue)}
.mode-card > b {font-size: 1.05rem}
.mode-card > span:not(.eyebrow) {font-size: .95rem}
.mode-card > small {display: block; color: var(--muted); font-size: .85rem; margin-top: auto; padding-top: 8px}
.mode-card.selected {border-color: var(--blue); box-shadow: inset 0 0 0 1px var(--blue); background: var(--yellow)}
.start-panel {margin-top: 28px; padding: 26px; background: var(--pale)}

/* A visible map and one complete question at a time. */
.check-top {display: flex; justify-content: space-between; align-items: end; gap: 20px; margin-top: 32px}
.check-top > div {min-width: 0}
.check-top h1 {font-size: clamp(1.6rem, 3.2vw, 2.5rem); line-height: 1.5}
.check-controls {display: flex; align-items: end; flex-direction: column; gap: 8px}
.save-state {display: inline-block; color: var(--muted); font-size: .78rem; line-height: 1.7}
.progress-line {position: sticky; top: 0; z-index: 8; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 18px; padding-block: 14px; margin: 18px 0 26px; border-bottom: 1px solid var(--rule); background: white}
.progress-line > span {font-size: .875rem; color: var(--muted)}
.progress-line > span strong {font-size: 1.35rem; color: var(--blue); font-weight: 600}
.progress-track {height: 7px; overflow: hidden; background: #e6edf2}
.progress-track i {display: block; height: 100%; max-width: 100%; background: var(--accent); transition: width .25s ease}
.check-layout {display: grid; grid-template-columns: 222px minmax(0, 1fr); align-items: start; gap: clamp(24px, 3.5vw, 44px)}
.scene-sidebar {position: sticky; top: 80px; min-width: 0; max-height: calc(100dvh - 105px); overflow-y: auto; padding-right: 6px; scrollbar-width: thin}
.scene-sidebar h2 {font-size: 1.1rem; line-height: 1.6}
.scene-sidebar > p {font-size: .8rem; color: var(--muted); margin: 5px 0 14px}
.scene-sidebar nav {display: grid; gap: 3px}
.scene-sidebar nav button {display: grid; grid-template-columns: 20px minmax(0, 1fr) 30px; align-items: center; gap: 6px; min-height: 44px; width: 100%; padding: 7px 7px 7px 9px; border: 1px solid transparent; border-left: 3px solid transparent; background: white; text-align: left; line-height: 1.5}
.scene-sidebar nav button > span {color: #72899a; font-size: .72rem; font-variant-numeric: tabular-nums}
.scene-sidebar nav button b {font-size: .82rem; font-weight: 400}
.scene-sidebar nav button small {color: var(--muted); font-size: .72rem; text-align: right; font-variant-numeric: tabular-nums}
.scene-sidebar nav button:hover {background: var(--pale)}
.scene-sidebar nav button.current, .scene-sidebar nav button[aria-current="step"] {border-left-color: var(--accent); background: var(--yellow)}
.scene-sidebar nav button.current b {font-weight: 600; color: var(--blue)}
.scene-sidebar nav button.complete small {color: var(--blue); font-weight: 600}
.live-strength {margin-top: 18px; padding: 15px 12px; border-top: 1px solid var(--rule); background: var(--pale)}
.live-strength > span {font-size: .8rem; color: var(--muted)}
.live-strength > strong {display: block; font-size: 2rem; line-height: 1.5; color: var(--blue)}
.live-strength > strong small {font-size: .875rem; margin-left: 6px}
.live-strength p {font-size: .8rem; margin-top: .2rem; line-height: 1.7}
.question-card {min-width: 0; padding: clamp(18px, 3vw, 34px); border: 1px solid var(--rule); border-radius: var(--radius); background: white}
.question-intro {display: grid; grid-template-columns: minmax(100px, .38fr) minmax(0, 1fr); align-items: center; gap: 20px}
.question-intro > div {min-width: 0}
.question-intro .scene-art {width: 100%; max-width: 180px; margin-inline: auto}
.question-intro .kicker {font-size: .8rem}
.question-intro .kicker span {display: inline-block; margin-left: 6px; color: var(--muted)}
.question-intro h2 {font-size: clamp(1.3rem, 2.3vw, 1.8rem); line-height: 1.6}
.question-intro p:not(.kicker) {font-size: .85rem; color: var(--muted); margin-top: .7rem}
.axis-tabs {display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; margin: 24px 0; border-bottom: 1px solid var(--rule)}
.axis-tabs button {display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px; min-height: 48px; padding: 9px 6px; border: 0; border-bottom: 3px solid transparent; background: var(--pale); color: var(--muted); line-height: 1.5}
.axis-tabs button > span {font-size: .8rem; font-variant-numeric: tabular-nums}
.axis-tabs button > b {font-size: .8rem}
.axis-tabs button.active, .axis-tabs button[aria-selected="true"] {background: #e9f1f7; color: var(--blue); border-bottom-color: var(--accent); font-weight: 600}
.axis-panel {min-width: 0}
.axis-prompt {font-size: 1.03rem; font-weight: 600; color: var(--blue)}
.reference-text {margin-top: 10px; padding: 16px 18px; background: var(--pale); border-left: 2px solid #829eb2; font-size: clamp(1.05rem, 1.6vw, 1.2rem); line-height: 1.85}
.answer-options {display: grid; gap: 10px; margin-top: 22px}
.answer-option {position: relative; display: grid; grid-template-columns: 20px minmax(0, 1fr); align-items: start; gap: 12px; min-height: 66px; padding: 15px 17px; border: 1px solid var(--rule); border-radius: var(--radius); background: white; cursor: pointer}
.answer-option input {position: absolute; width: 1px; height: 1px; opacity: 0}
.radio-dot {display: block; width: 19px; height: 19px; margin-top: 4px; border: 1.5px solid #8096a8; border-radius: 50%; background: white}
.answer-option input:checked + .radio-dot {border-color: var(--blue); background: var(--blue); box-shadow: inset 0 0 0 4px white}
.answer-option > span:last-child {min-width: 0}
.answer-option > span:last-child b {display: block; font-size: .98rem; line-height: 1.65}
.answer-option > span:last-child > span {display: block; font-size: .9rem; line-height: 1.8; margin-top: 4px; color: var(--muted)}
.answer-option > span:last-child > span:empty {display: none}
.answer-option:hover {border-color: var(--accent); background: #fafcfd}
.answer-option.selected {background: var(--yellow); border-color: var(--blue); box-shadow: inset 0 0 0 1px var(--blue)}
.answer-option:focus-within {outline: 3px solid var(--accent); outline-offset: 3px}
.answer-option.no-opportunity {margin-top: 5px; border-style: dashed; background: #f7f8fa}
.answer-option.no-opportunity.selected {background: var(--yellow)}
.answer-hint {font-size: .85rem; color: var(--muted); margin: 16px 0}
.insight {padding: 20px 22px; margin: 22px 0; background: var(--yellow); border-left: 3px solid #c2a55e}
.insight .eyebrow {font-size: .78rem; color: #6b5a32}
.insight h3 {font-size: 1.15rem; line-height: 1.65}
.insight p {font-size: .98rem; margin-top: 10px}
.insight a {display: inline-flex; align-items: center; min-height: 44px; margin-top: 6px; font-size: .86rem}
.question-actions {display: flex; justify-content: space-between; align-items: center; gap: 14px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--rule)}
.completed-note {margin-top: 16px; padding: 10px 14px; border-left: 2px solid var(--accent); background: var(--pale); color: var(--blue); font-size: .9rem; line-height: 1.8}
.check-shortcuts {display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 5px 18px; margin-top: 18px; border-top: 1px solid var(--rule); padding-top: 12px}
.check-shortcuts a, .check-shortcuts .text-button {min-height: 44px; display: inline-flex; align-items: center; font-size: .8rem}

/* Self-reported present, comparable history, and a clearly chosen next step. */
.radar {display: block; width: 100%; max-width: 390px; height: auto; margin-inline: auto; overflow: visible; font-family: var(--sans)}
.radar-grid {fill: none; stroke: #c9d5df; stroke-width: 1}
.radar-grid.reference-ring {stroke: #8fa4b6; stroke-dasharray: 4 4; stroke-width: 1.2}
.radar-current {fill: #326b9726; stroke: var(--accent); stroke-width: 2.5; stroke-linejoin: round}
.radar-before {fill: #aab9c60d; stroke: #8fa2b2; stroke-width: 2; stroke-dasharray: 6 4}
.radar-dot {fill: var(--accent); stroke: white; stroke-width: 2}
.radar-label {fill: var(--ink); font-size: 18px; font-weight: 600}
.radar-value {fill: var(--blue); font-size: 22px; font-weight: 600}
.radar-tick {fill: #5a6f80; font-size: 13px; font-weight: 400}
.example-banner {display: flex; align-items: center; flex-wrap: wrap; gap: 8px 18px; margin-top: 24px; padding: 17px 22px; border: 1px solid var(--yellow-rule); background: var(--yellow); font-size: .9rem}
.example-banner strong {color: #68552c}
.example-banner a {display: inline-flex; align-items: center; min-height: 44px}
.result-overview {display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: 1px solid var(--rule); border-radius: var(--radius); margin-top: 12px}
.result-metrics, .result-radar {padding: clamp(22px, 3vw, 38px); min-width: 0}
.result-metrics {background: var(--yellow)}
.result-radar {background: #f8fafc}
.result-overview h2 {font-size: clamp(1.25rem, 2vw, 1.6rem); line-height: 1.6}
.big-count {display: flex; align-items: baseline; flex-wrap: wrap; gap: 15px; margin: 14px 0; font-size: clamp(4rem, 6.5vw, 5.2rem); line-height: 1.25; color: var(--blue); font-weight: 600; font-variant-numeric: tabular-nums}
.big-count > span {font-size: 1.65rem; font-weight: 400; color: var(--muted)}
.big-count small {display: block; font-size: .85rem; margin-top: 4px; line-height: 1.7}
.metric-strip {display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding: 18px 0; margin: 20px 0 12px; border-block: 1px solid var(--yellow-rule)}
.metric-strip > span {min-width: 0; color: var(--muted); font-size: .8rem; line-height: 1.6}
.metric-strip b {display: block; margin-bottom: 5px; color: var(--blue); font-size: 1.6rem; line-height: 1.4; font-variant-numeric: tabular-nums}
.result-metrics > .button {margin-top: 20px}
.axis-counts {display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--rule)}
.axis-counts > div {min-width: 0; text-align: center}
.axis-counts dt {font-weight: 600; font-size: .92rem}
.axis-counts dd {font-size: .78rem; color: var(--muted); margin-top: 4px}
.axis-counts dd strong {display: block; font-size: 1.35rem; color: var(--blue); font-variant-numeric: tabular-nums}
.method-note {border-bottom: 1px solid var(--rule); padding: 10px 0 14px; margin: 14px 0; font-size: .9rem}
.method-note summary {font-weight: 600}
.method-note p {max-width: 67em; color: var(--muted)}
.habit-grid {display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; margin-top: 28px}
.habit-card {display: flex; flex-direction: column; min-width: 0; border-top: 3px solid #7898b1; border-bottom: 1px solid var(--rule); padding: 18px 10px 22px}
.habit-card-top .scene-art {width: min(100%, 200px); margin: 0 auto 12px}
.habit-card-top .eyebrow {font-size: .82rem}
.habit-card h3 {margin: .25rem 0 .7rem}
.habit-card > p {font-size: .95rem; line-height: 1.85}
.book-tag {display: inline-block; align-self: start; padding: 3px 8px; margin-top: 20px; background: var(--yellow); color: #6b5832; font-size: .82rem; border-left: 2px solid #cbb67e}
.habit-card .book-tag + p {font-size: .85rem; color: var(--muted); margin-top: .5rem; line-height: 1.7}
.habit-card .actions {flex-direction: column; align-items: start; gap: 0; margin-top: auto; padding-top: 12px}
.habit-card .text-link, .habit-card .text-button {font-size: .9rem}
.depth-grid {display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; margin-top: 24px}
.depth-grid > article {min-width: 0; padding: 26px; background: var(--pale); border-left: 2px solid #7997af}
.depth-grid > article:last-child {background: var(--yellow); border-left-color: #c3aa6a}
.depth-label {display: block; font-size: .85rem; color: var(--muted); margin-bottom: 10px}
.depth-grid ul {padding-left: 1.15em; margin-block: 22px}
.depth-grid li {margin-top: 17px; font-size: .98rem}
.depth-grid li::marker {color: var(--accent)}
.depth-grid li small {display: block; margin-top: 5px; font-size: .78rem; color: var(--muted)}
.comparison {padding: clamp(18px, 3vw, 32px); border: 1px solid var(--rule); margin-top: 24px; background: white}
.comparison-legend {display: flex; flex-wrap: wrap; gap: 12px 26px; margin-bottom: 22px; font-size: .85rem; color: var(--muted)}
.comparison-legend > span {display: inline-flex; align-items: center; gap: 8px}
.comparison-legend > span::before {content: ""; width: 24px; height: 5px; background: #93a7b7}
.comparison-legend .legend-current::before {background: var(--accent)}
.comparison-row {display: grid; grid-template-columns: 4.5rem minmax(0, 1fr) 9rem; gap: 20px; align-items: center; padding: 16px 0; border-top: 1px solid #e1e7eb}
.comparison-row h3 {font: 600 1rem/1.65 var(--sans)}
.comparison-row > div {min-width: 0}
.comparison-row > p {font-size: 1rem; color: var(--blue); font-weight: 600; margin: 0}
.comparison-row small {display: block; font-size: .78rem; color: var(--muted); font-weight: 400; margin-top: 3px}
.comparison-bar {position: relative; min-height: 30px; padding-right: 3.2rem}
.comparison-bar::before {content: ""; position: absolute; top: 8px; left: 0; right: 3.2rem; height: 14px; background: var(--pale)}
.comparison-bar i {position: relative; display: block; top: 8px; height: 14px; max-width: 100%; background: #93a7b7}
.comparison-bar.current i {background: var(--accent)}
.comparison-bar span {position: absolute; right: 0; top: 0; min-width: 2.7rem; text-align: right; font-size: .85rem; line-height: 30px; font-variant-numeric: tabular-nums}
.next-check {display: block; padding: 24px 28px; margin-top: 24px; background: var(--pale); border-left: 3px solid #94adbf}
.next-check strong {display: block; font-size: 1.08rem}
.next-check p {margin-top: 10px; color: var(--muted)}
.future-note {padding: 18px 24px; margin-top: 22px; color: var(--muted); background: #fffdf5; border: 1px dashed #b6a472; font-size: .92rem}
.future-plan {display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 22px 28px; align-items: center; margin-top: 26px; padding: clamp(22px, 3vw, 34px); border: 1px dashed #9da9ad; background: var(--yellow)}
.future-plan > div {min-width: 0}
.future-plan h3 {font-size: 1.3rem; margin: 8px 0}
.future-plan p {font-size: .98rem}
.future-date {padding-left: 26px; border-left: 1px solid var(--yellow-rule); text-align: center}
.future-date span {display: block; font-size: .82rem; color: var(--muted)}
.future-date strong {display: block; font-size: 2rem; line-height: 1.5; color: var(--blue); margin-top: 4px}
.future-date small {display: block; font-size: .75rem; color: var(--muted)}
.future-ladder {position: relative; grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; list-style: none; padding: 14px 0 0; margin: 12px 0 0}
.future-ladder::before {content: ""; position: absolute; top: 23px; left: 12.5%; right: 12.5%; border-top: 1px solid #b7bfbe}
.future-ladder li {position: relative; min-width: 0; margin: 0; text-align: center}
.future-point {display: block; width: 19px; height: 19px; border: 1.5px solid #9caaaf; border-radius: 50%; background: var(--yellow); margin: 0 auto 13px}
.future-ladder b {display: block; font-size: .86rem; line-height: 1.7; font-weight: 400}
.future-ladder small {display: block; min-height: 1.7em; margin-top: 4px; font-size: .72rem; color: var(--muted)}
.future-ladder .is-current .future-point {background: var(--accent); border-color: var(--accent)}
.future-ladder .is-planned .future-point {border: 2px dashed var(--accent); outline: 3px solid var(--yellow)}
.future-ladder .is-current.is-planned .future-point {outline: 2px dashed var(--accent); outline-offset: 4px}
.future-ladder .is-current b, .future-ladder .is-planned b {color: var(--blue); font-weight: 600}
.future-plan > .future-note {grid-column: 1 / -1; padding: 0; margin: 0; border: 0; background: none; font-size: .8rem}
.result-footer {margin-top: 36px; padding-top: 24px; border-top: 1px solid var(--rule)}
.empty-state {display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1fr); gap: 36px; align-items: center; padding-block: 24px}
.empty-state img {width: 100%; max-height: 360px; object-fit: contain; mix-blend-mode: multiply}

/* Book references are a useful next destination, including on printed results. */
.book-section {display: grid; grid-template-columns: minmax(180px, .55fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); align-items: center; padding: clamp(24px, 4vw, 44px); background: var(--yellow); border-block: 1px solid var(--yellow-rule); margin-top: 48px}
.book-cover {display: block; width: min(100%, 255px); margin-inline: auto; text-align: center; text-decoration: none}
.book-cover img {width: 100%; height: auto; box-shadow: 4px 7px 15px #20364b17}
.book-cover > span {display: inline-flex; align-items: center; min-height: 44px; font-size: .8rem; text-decoration: underline}
.book-copy {min-width: 0}
.book-copy h2 {font-size: clamp(1.45rem, 2.7vw, 2.15rem)}
.book-name {margin-top: 24px}
.book-name > span {display: block; font-size: .9rem; line-height: 1.7}
.book-name > strong {display: block; font-family: var(--serif); font-size: clamp(1.3rem, 2.3vw, 1.8rem); line-height: 1.6; margin-top: .4rem}
.book-meta {font-size: .87rem; color: var(--muted); margin: 14px 0 20px}
.book-meta strong {display: inline-block; margin-top: 3px; color: var(--ink)}
.book-copy > p:not(.book-name):not(.book-meta) {font-size: .98rem}
.reading-recommendation {border-top: 2px solid #819fb4; padding-top: 26px; margin-top: 16px}
.reading-intro {display: grid; grid-template-columns: 200px minmax(0, 1fr); align-items: center; gap: 30px}
.reading-intro > div {min-width: 0}
.reading-intro h2 {font-size: clamp(1.4rem, 2.6vw, 2rem); line-height: 1.6}
.reading-page {margin-top: 16px; color: var(--blue)}
.reading-page strong {font-size: 1.4rem; margin-left: .15em}
.reading-page > span {display: block; font-size: .85rem; color: var(--muted); margin-top: 4px}
.reading-steps {display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; margin-top: 28px}
.reading-steps article {padding: 20px 0; border-top: 1px solid var(--rule); min-width: 0}
.reading-steps article > span {display: block; font-size: .85rem; color: var(--accent); font-weight: 600; margin-bottom: 10px}
.reading-steps h3 {font-size: 1.2rem}
.reading-steps p {margin-top: 12px; font-size: .95rem}
.reading-steps p.note {font-size: .83rem}
.book-scene-list {margin-top: 26px; border-top: 1px solid var(--rule)}
.book-scene-list details {border-bottom: 1px solid var(--rule)}
.book-scene-list summary {display: grid; grid-template-columns: 2.2rem minmax(0, 1fr) auto 1rem; gap: 10px; align-items: center; min-height: 65px; padding: 13px 10px; list-style: none; line-height: 1.7}
.book-scene-list summary::-webkit-details-marker {display: none}
.book-scene-list summary::after {content: "+"; font-size: 1.3rem; text-align: center; color: var(--accent)}
.book-scene-list details[open] > summary::after {content: "−"}
.book-scene-list summary > span {font-size: .85rem; color: #7c92a4}
.book-scene-list summary strong {font-size: 1.05rem}
.book-scene-list summary small {color: var(--muted); font-size: .8rem}
.book-scene-list details[open] > summary {margin: 0; background: var(--pale)}
.book-list-item {display: grid; grid-template-columns: 2.2rem minmax(0, 1fr) auto; gap: 10px; align-items: start; min-height: 54px; margin-left: 10px; padding: 14px 10px; border-top: 1px solid #e1e7eb; text-decoration: none; font-size: .92rem; line-height: 1.75}
.book-list-item > span {color: var(--muted); font-size: .82rem}
.book-list-item b {font-weight: 400}
.book-list-item small {font-size: .8rem; color: var(--muted)}
.book-list-item:hover {background: var(--yellow); text-decoration: underline}

/* A small practical plan, followed by records and the next useful reading. */
.practice-layout {display: grid; grid-template-columns: minmax(0, 1fr) 270px; align-items: start; gap: 36px; margin-top: 18px}
.practice-main, .practice-aside {min-width: 0}
.practice-target > label {display: block; font-weight: 600; color: var(--blue); margin-bottom: 8px}
select {display: block; width: 100%; min-height: 48px; padding: 10px 12px; border: 1px solid #9eb1c0; border-radius: var(--radius); background: white; font-size: 1rem; line-height: 1.6; text-overflow: ellipsis}
select:hover {border-color: var(--accent)}
.practice-habit {display: grid; grid-template-columns: 150px minmax(0, 1fr); align-items: center; gap: 20px; margin-top: 26px}
.practice-habit > div {min-width: 0}
.practice-habit h2 {font-size: 1.5rem; line-height: 1.65}
.practice-habit p:not(.kicker) {font-size: .95rem; margin-top: 12px}
.practice-habit .text-link {font-size: .85rem; margin-top: 8px}
.plan-panel {margin-top: 32px; padding: 26px; background: var(--yellow); border-top: 2px solid var(--yellow-rule)}
.plan-panel h2, .practice-record h2 {font-size: clamp(1.3rem, 2.3vw, 1.65rem); line-height: 1.6}
.form-grid {display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 20px; margin: 24px 0}
.form-grid label {display: grid; align-content: start; gap: 7px; min-width: 0; font-size: .88rem; font-weight: 600; line-height: 1.75}
.form-grid select {font-weight: 400}
#plan-form .form-grid {grid-template-columns: minmax(0, 1fr)}
#plan-form > .note {margin-top: 12px}
.practice-record {margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--rule)}
.practice-record fieldset {margin-top: 24px}
.practice-record legend {font-size: .95rem; margin-bottom: 12px}
.choice-chips {display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px}
.choice-chips label {position: relative; display: grid; min-width: 0; cursor: pointer}
.choice-chips input {position: absolute; width: 1px; height: 1px; opacity: 0}
.choice-chips label > span {display: flex; align-items: center; gap: 10px; min-height: 54px; padding: 10px 14px; border: 1px solid var(--rule); border-radius: var(--radius); background: white; font-size: .9rem; line-height: 1.65}
.choice-chips label > span::before {content: ""; width: 16px; height: 16px; flex: 0 0 16px; border: 1.5px solid #8299ab; border-radius: 50%; background: white}
.choice-chips input:checked + span {border-color: var(--blue); background: var(--yellow); box-shadow: inset 0 0 0 1px var(--blue)}
.choice-chips input:checked + span::before {background: var(--blue); border-color: var(--blue); box-shadow: inset 0 0 0 3px white}
.choice-chips input:focus-visible + span {outline: 3px solid var(--accent); outline-offset: 3px}
#practice-form > .save-state {display: block; margin-top: 12px}
.practice-aside {position: sticky; top: 24px; background: var(--pale); padding: 22px; border-top: 2px solid #8da7ba}
.practice-aside h3 {font-size: 1.1rem; line-height: 1.7}
.practice-aside dl {margin: 22px 0}
.practice-aside dt {font-size: .82rem; color: var(--accent); font-weight: 600; margin-top: 18px}
.practice-aside dd {font-size: .93rem; margin-top: 6px; line-height: 1.9}
.practice-aside > h3:not(:first-of-type) {margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--rule)}
.practice-aside .situation-pills a {padding: 10px; font-size: .82rem}
.practice-log-list {margin-top: 26px; border-top: 1px solid var(--rule)}
.practice-log-list article {display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 28px; padding: 24px 0; border-bottom: 1px solid var(--rule)}
.practice-log-list article > div {min-width: 0}
.log-date {font-size: 1.2rem; color: var(--blue); font-variant-numeric: tabular-nums}
.log-date span {display: block; font-size: .8rem; color: var(--muted); margin-top: 4px}
.practice-log-list h3 {font-size: 1.2rem}
.practice-log-list p {margin-top: .55rem}
.log-next {padding-left: 13px; border-left: 2px solid #91aabd; color: var(--blue); font-size: .95rem}
.practice-log-list .text-link {font-size: .88rem; margin-top: 8px}

/* Research remains distinct from the application proposed for today's work. */
.knowledge-selector {margin-top: 18px}
.knowledge-selector h2 {font-size: clamp(1.35rem, 2.3vw, 1.8rem)}
.situation-grid {display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 24px}
.situation-card {display: grid; align-content: start; gap: 10px; min-width: 0; min-height: 130px; padding: 20px; border: 1px solid var(--rule); border-radius: var(--radius); background: white; text-align: left; line-height: 1.75}
.situation-card b {color: var(--blue); font-size: 1rem}
.situation-card span {font-size: .85rem; color: var(--muted)}
.situation-card.selected {background: var(--yellow); border-color: var(--blue); box-shadow: inset 0 0 0 1px var(--blue)}
.knowledge-current {padding: clamp(22px, 4vw, 38px); background: var(--yellow); border-left: 3px solid #c3a763; margin-bottom: 28px}
.knowledge-current h2 {font-size: clamp(1.4rem, 2.6vw, 1.95rem); line-height: 1.6}
.knowledge-current > p:last-child {padding-top: 18px; margin-top: 20px; border-top: 1px solid var(--yellow-rule)}
.knowledge-current b {color: var(--blue); font-size: .85rem}
.study-grid {display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px; margin-top: 26px}
.study-card {min-width: 0; padding: 24px; border: 1px solid var(--rule); border-top: 3px solid #8aa5b9; background: white}
.study-meta {display: flex; flex-wrap: wrap; gap: 5px 14px; color: var(--muted); font-size: .75rem; margin-bottom: 14px}
.study-meta > span:first-child {font-weight: 600; color: var(--accent)}
.study-card h3 {font-size: 1.3rem; line-height: 1.65}
.study-card > p {font-size: .95rem; margin-top: 15px}
.study-connection {padding: 17px; margin-top: 22px; background: var(--pale); border-left: 2px solid #8ca8bb}
.study-connection > span {color: var(--accent); font-size: .82rem; font-weight: 600}
.study-connection p {font-size: .92rem; margin-top: 6px}
.study-card details {border-top: 1px solid var(--rule); margin-top: 20px; padding-top: 8px; font-size: .85rem}
.study-card summary {font-size: .85rem; line-height: 1.75}
.study-card .source-line {font-size: .77rem; color: var(--muted); line-height: 1.8; overflow-wrap: anywhere}
.study-card .actions {gap: 4px 18px; margin-top: 10px}
.study-card .actions .text-link {font-size: .82rem}
.study-grid + .note {margin-top: 22px}
.portal-grid {display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; margin-top: 26px}
.portal-grid article {min-width: 0; border-block: 1px solid var(--rule); padding: 22px 0}
.portal-grid h3 .text-link {font-size: 1.1rem; line-height: 1.6; font-family: var(--serif)}
.portal-grid p {font-size: .92rem; color: var(--muted); margin-top: 10px}

.trend {padding: 24px; margin-top: 22px; border: 1px solid var(--rule); background: white; min-width: 0}
.trend svg {display: block; width: 100%; height: auto; max-width: 900px; margin: auto; font-family: var(--sans)}
.trend-line {fill: none; stroke: var(--accent); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round}
.trend .radar-value {font-size: 18px}
.trend > p {font-size: .85rem; color: var(--muted); text-align: center; margin-top: 12px}
.history-list {margin-top: 24px; border-top: 1px solid var(--rule)}
.history-list details {border-bottom: 1px solid var(--rule); padding-bottom: 6px}
.history-list summary {display: grid; grid-template-columns: minmax(0, 1fr) minmax(7rem, .8fr) minmax(5rem, .5fr) 1rem; align-items: center; gap: 20px; min-height: 68px; padding: 16px; list-style: none; font-size: .95rem}
.history-list summary::-webkit-details-marker {display: none}
.history-list summary::after {content: "+"; font-size: 1.2rem; color: var(--accent)}
.history-list details[open] summary {background: var(--pale); margin-bottom: 12px}
.history-list details[open] summary::after {content: "−"}
.history-list .axis-counts {max-width: 640px; margin: 18px auto; border: 0}
.history-list .note {margin: 14px 18px}
.privacy-cards {display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; margin-top: 28px}
.privacy-cards article {min-width: 0; border-top: 2px solid #8fa8bb; padding: 22px 0}
.privacy-cards h2 {font-size: 1.4rem; line-height: 1.6}
.privacy-cards p {font-size: .95rem; margin-top: 16px}
.record-tools {padding: clamp(22px, 4vw, 38px); background: var(--pale); border-top: 2px solid var(--rule)}
.record-tools > .note {margin-top: 18px}
.record-tools [data-action="reset"] {color: var(--muted)}
.faq {max-width: 65rem}
.faq h2 {margin-bottom: 24px}
.faq details {border-top: 1px solid var(--rule); padding: 10px 0}
.faq details:last-child {border-bottom: 1px solid var(--rule)}
.faq summary {font-size: 1rem; line-height: 1.8; font-weight: 600}
.faq details p {font-size: .95rem; color: var(--muted); margin: 8px 0 14px 1.2em}
.about p:not(.kicker) {max-width: 65em; margin-top: 20px}

/* Utilities stay available without competing with the current step. */
.overview-toggle {position: fixed; right: clamp(16px, 3vw, 34px); bottom: 18px; z-index: 30; min-height: 46px; padding: 9px 18px; border: 1px solid var(--blue); border-radius: var(--radius); background: white; color: var(--blue); font-size: .9rem; font-weight: 600; box-shadow: 0 3px 14px #20364b12}
.overview-toggle:hover {background: var(--pale)}
dialog {width: min(720px, calc(100% - 36px)); max-width: calc(100% - 36px); max-height: calc(100dvh - 40px); padding: clamp(22px, 4vw, 36px); color: var(--ink); border: 1px solid #9cabb7; border-radius: var(--radius); background: white; box-shadow: 0 15px 65px #142d4a26; overflow: auto}
dialog::backdrop {background: #152c4266}
.dialog-head {display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 20px}
.dialog-head h2 {font-size: clamp(1.35rem, 2.8vw, 1.8rem); line-height: 1.6}
.close-button {flex: 0 0 44px; width: 44px; height: 44px; padding: 0; border: 1px solid var(--rule); border-radius: var(--radius); background: white; color: var(--blue); font-size: 1.5rem; line-height: 1}
.overview-grid {display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 24px; margin-bottom: 20px}
.overview-grid a {display: grid; gap: 6px; min-height: 100px; padding: 15px 0; border-top: 1px solid var(--rule); text-decoration: none}
.overview-grid a:hover {background: var(--pale)}
.overview-grid b {font-size: 1rem}
.overview-grid span {font-size: .85rem; color: var(--muted); line-height: 1.8}
#toast {position: fixed; left: 50%; bottom: 78px; z-index: 60; width: max-content; max-width: min(40rem, calc(100% - 32px)); padding: 14px 20px; border-radius: var(--radius); color: white; background: var(--blue); font-size: .93rem; line-height: 1.75; opacity: 0; transform: translate(-50%, 12px); pointer-events: none; transition: opacity .18s ease, transform .18s ease; box-shadow: 0 5px 25px #122a4026}
#toast.shown {opacity: 1; transform: translate(-50%, 0)}

/* Smaller screens keep reading space; only the scene map scrolls sideways. */
@media (max-width: 1050px) {
  .mast {gap: 10px 20px}
  .mast nav {gap: 4px 15px}
  .mast nav a {font-size: .86rem}
  .role-grid {gap: 18px}
  .role-copy {padding-inline: 18px}
  .check-layout {grid-template-columns: 190px minmax(0, 1fr); gap: 22px}
  .scene-sidebar nav button {grid-template-columns: 17px minmax(0, 1fr) 27px; padding-inline: 5px; gap: 4px}
  .practice-layout {grid-template-columns: minmax(0, 1fr) 235px; gap: 24px}
  .practice-aside {padding: 18px}
  .practice-habit {grid-template-columns: 110px minmax(0, 1fr); gap: 16px}
}
@media (max-width: 979px) {
  .hero {grid-template-columns: minmax(0, 1fr); gap: 16px; min-height: 0}
  .hero-art img {max-height: 340px}
  .hero-copy {max-width: 48rem}
  .hero-bottom {grid-column: 1}
  .role-grid {grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px}
  .rhythm-grid {grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 32px}
  .habit-grid, .portal-grid {grid-template-columns: repeat(2, minmax(0, 1fr))}
  .reading-steps {gap: 20px}
  .reading-steps h3 {font-size: 1.1rem}
  .book-section {grid-template-columns: minmax(150px, .5fr) minmax(0, 1fr); gap: 28px; padding: 28px}
  .privacy-cards {grid-template-columns: minmax(0, 1fr); gap: 14px}
  .privacy-cards p {max-width: 60em}
}
@media (max-width: 820px) {
  .mast {align-items: start; gap: 8px}
  .mast nav {width: 100%; justify-content: space-between; gap: 4px 14px}
  .mast nav a {font-size: .9rem}
  .visual-intro, .two-paths, .result-overview {grid-template-columns: minmax(0, 1fr)}
  .preview-chart {max-width: 530px; width: 100%; margin-inline: auto}
  .two-paths {gap: 18px}
  .entrances-grid article {padding-inline: 16px}
  .entrances-grid h3 {font-size: 1rem}
  .entrances-grid p {font-size: .85rem}
  .check-top {align-items: start; flex-direction: column; gap: 12px}
  .check-controls {width: 100%; flex-direction: row; align-items: center; justify-content: space-between}
  .check-layout {display: block}
  .scene-sidebar {position: static; max-height: none; overflow: visible; padding: 0; margin-bottom: 22px}
  .scene-sidebar > p {margin: 4px 0 10px}
  .scene-sidebar nav {display: flex; width: 100%; max-width: 100%; overflow-x: auto; gap: 8px; padding: 4px 4px 10px; scroll-snap-type: x proximity; overscroll-behavior-x: contain; scrollbar-width: thin}
  .scene-sidebar nav button {flex: 0 0 160px; grid-template-columns: 19px minmax(0, 1fr) 29px; gap: 6px; min-height: 64px; padding: 8px; border: 1px solid var(--rule); border-left: 3px solid var(--rule); scroll-snap-align: start}
  .scene-sidebar nav button b {font-size: .82rem}
  .live-strength {display: flex; align-items: center; flex-wrap: wrap; gap: 5px 12px; padding: 10px 14px; margin-top: 8px; border-top: 0}
  .live-strength > strong {display: inline; font-size: 1.4rem}
  .live-strength p {font-size: .75rem; margin: 0}
  .live-strength br {display: none}
  .question-intro {grid-template-columns: 145px minmax(0, 1fr)}
  .result-radar .radar {max-width: 370px}
  .practice-layout {grid-template-columns: minmax(0, 1fr)}
  .practice-aside {position: static; margin-top: 15px; padding: 26px}
  .practice-aside .situation-pills {grid-template-columns: repeat(2, minmax(0, 1fr))}
  .practice-habit {grid-template-columns: 170px minmax(0, 1fr)}
  .form-grid {grid-template-columns: repeat(2, minmax(0, 1fr))}
  .situation-grid {grid-template-columns: repeat(2, minmax(0, 1fr))}
  .study-grid {grid-template-columns: minmax(0, 1fr)}
  .reading-steps {grid-template-columns: minmax(0, 1fr); gap: 8px}
  .reading-steps article {padding-block: 20px}
  .reading-steps h3 {font-size: 1.3rem}
  .reading-intro {grid-template-columns: 150px minmax(0, 1fr); gap: 24px}
}
@media (max-width: 600px) {
  body {font-size: 16px; line-height: 1.85}
  #main {padding-bottom: 18px}
  h2 {font-size: clamp(1.42rem, 6.1vw, 1.8rem); line-height: 1.55}
  .mast {padding-block: 14px 6px}
  .brand span {font-size: .7rem; margin-top: 3px}
  .mast nav {gap: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); width: 100%}
  .mast nav a {justify-content: center; text-align: center; font-size: .8rem; padding: 7px 2px; min-height: 48px; line-height: 1.6}
  .foot {display: grid; gap: 20px; padding-block: 26px 88px; margin-top: 32px}
  .foot nav {display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 18px}
  .foot nav a {font-size: .8rem}
  .page-head {padding-top: 28px; padding-bottom: 15px}
  .page-head h1 {font-size: clamp(1.85rem, 8vw, 2.4rem); line-height: 1.5; margin-block: .5rem 1rem}
  .section {margin-block: 44px}
  .section.compact {margin-top: 24px}
  .section-heading {align-items: start; gap: 10px; margin-bottom: 18px}
  .section-lead {font-size: .97rem; margin-block: 14px 20px}
  .kicker {font-size: .82rem}
  .hero {grid-template-areas: "intro" "title" "image" "tagline" "text" "buttons"; gap: 5px; padding: 22px 0 18px}
  .hero-copy {display: contents}
  .hero-copy > .kicker {grid-area: intro; margin: 0 0 5px}
  .hero > .kicker {grid-area: intro}
  .hero > p:not(.kicker) {grid-area: text}
  .hero h1 {grid-area: title; margin: 0; font-size: clamp(1.9rem, 9.2vw, 2.25rem); line-height: 1.35}
  .hero-art {grid-area: image; margin: 4px 0}
  .hero-art img {max-height: 265px}
  .hero-lead {grid-area: tagline; font-size: 1.12rem; margin: .25rem 0}
  .hero-copy > .lead {grid-area: text; font-size: .95rem; margin-top: 3px}
  .hero-bottom {grid-area: buttons}
  .hero-bottom .actions {display: grid; gap: 9px; margin-top: 17px}
  .hero-bottom .button {width: 100%; min-height: 50px; padding-inline: 10px; font-size: .92rem}
  .privacy-line {font-size: .73rem; gap: 3px 7px; margin-top: 14px}
  .privacy-line > span:not(.privacy-dot) {flex-basis: 100%; margin-left: 14px}
  .privacy-line a {margin-left: 14px}
  .entrances {padding-block: 22px; margin-top: 20px}
  .entrances h2 {font-size: 1.2rem; line-height: 1.65; margin-bottom: 16px}
  .entrances-grid {grid-template-columns: minmax(0, 1fr)}
  .entrances-grid article {padding: 14px 0; border-left: 0; border-top: 1px solid var(--rule)}
  .entrances-grid article:first-child {border-top: 0; padding-top: 0}
  .entrances-grid article:last-child {padding: 16px; margin-top: 4px}
  .entrances-grid h3 {display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; font-size: 1.05rem}
  .entrances-grid h3 > span {display: inline; font-size: .72rem}
  .entrances-grid p {font-size: .85rem; margin-top: 4px}
  .visual-intro {gap: 26px}
  .visual-intro .lead {margin-top: 16px; font-size: .97rem}
  .benefit-list li {grid-template-columns: 4em minmax(0, 1fr); gap: 9px}
  .benefit-list span {font-size: .9rem}
  .preview-chart {padding: 18px 14px 22px}
  .mini-future {gap: 6px; font-size: .7rem}
  .role-grid, .mode-grid, .habit-grid, .depth-grid {grid-template-columns: minmax(0, 1fr); gap: 24px}
  .role-card > img {max-height: 310px; object-fit: contain}
  .role-copy {padding: 18px 20px 22px}
  .role-copy > strong {font-size: 1.4rem}
  .role-copy > span {font-size: .97rem}
  .role-copy small {font-size: .8rem}
  .rhythm-grid {gap: 24px 18px}
  .rhythm-grid h3 {font-size: 1.05rem; line-height: 1.65}
  .rhythm-grid p {font-size: .86rem; line-height: 1.85}
  .rhythm-grid .step-number {font-size: 1.3rem}
  .two-paths h2 {font-size: 1.6rem}
  .knowledge-teaser {padding: 24px 20px}
  .situation-pills a {font-size: .84rem}
  .resume-banner {padding: 18px; gap: 12px}
  .resume-banner .actions {gap: 5px 14px}
  .mode-card {padding: 22px}
  .start-panel {padding: 22px 18px}
  .start-panel .actions {align-items: stretch; flex-direction: column}
  .check-top {margin-top: 25px}
  .check-top h1 {font-size: 1.65rem; line-height: 1.6}
  .check-controls {align-items: start; gap: 8px}
  .check-controls .button {font-size: .78rem; padding-inline: 10px; max-width: 64%}
  .check-controls .save-state {font-size: .7rem; flex: 1; margin-top: 9px}
  .progress-line {grid-template-columns: minmax(0, 1fr) auto; gap: 7px 14px; padding-block: 10px; margin-top: 12px; margin-bottom: 20px}
  .progress-line > span {font-size: .78rem}
  .progress-track {grid-column: 1 / -1; grid-row: 2; height: 6px}
  .scene-sidebar h2 {font-size: 1rem}
  .scene-sidebar nav button {flex-basis: 154px}
  .live-strength {gap: 4px 9px; padding: 8px 10px}
  .live-strength > span {font-size: .73rem}
  .live-strength p {flex-basis: 100%; font-size: .75rem}
  .question-card {padding: 18px 15px}
  .question-intro {grid-template-columns: minmax(0, 1fr); gap: 5px}
  .question-intro .scene-art {width: 160px; margin-top: -8px}
  .question-intro h2 {font-size: 1.3rem; line-height: 1.7}
  .question-intro .kicker {font-size: .78rem}
  .question-intro p:not(.kicker) {font-size: .8rem; margin-top: 10px}
  .axis-tabs {margin-block: 22px; gap: 3px}
  .axis-tabs button {font-size: .9rem; gap: 4px; padding-inline: 3px}
  .axis-tabs button > span, .axis-tabs button > b {font-size: .72rem}
  .axis-prompt {font-size: .98rem}
  .reference-text {padding: 14px; font-size: 1.03rem; line-height: 1.9}
  .answer-options {margin-top: 18px}
  .answer-option {grid-template-columns: 18px minmax(0, 1fr); gap: 10px; padding: 14px 12px}
  .radio-dot {width: 18px; height: 18px}
  .answer-option > span:last-child b {font-size: .95rem}
  .answer-option > span:last-child > span {font-size: .85rem}
  .insight {padding: 18px 16px}
  .insight h3 {font-size: 1.05rem; line-height: 1.7}
  .insight p {font-size: .92rem}
  .insight a {font-size: .8rem}
  .question-actions {gap: 8px}
  .question-actions .button {font-size: .87rem; padding-inline: 13px}
  .question-actions .text-button {font-size: .85rem}
  .check-shortcuts {gap: 3px}
  .check-shortcuts > * {flex-basis: 100%}
  .result-metrics, .result-radar {padding: 24px 20px}
  .result-overview h2 {font-size: 1.25rem}
  .big-count {font-size: 4rem; gap: 13px; margin-block: 20px}
  .big-count > span {font-size: 1.4rem}
  .metric-strip {gap: 8px}
  .metric-strip > span {font-size: .73rem}
  .axis-counts {gap: 8px}
  .axis-counts dt {font-size: .86rem}
  .axis-counts dd {font-size: .72rem}
  .axis-counts dd strong {font-size: 1.25rem}
  .habit-card {padding-inline: 4px}
  .habit-card-top .scene-art {width: min(100%, 225px)}
  .habit-card h3 {font-size: 1.3rem}
  .depth-grid > article {padding: 22px}
  .comparison {padding: 20px 14px}
  .comparison-row {grid-template-columns: 3.2rem minmax(0, 1fr); gap: 8px 12px; padding-block: 16px}
  .comparison-row > p {grid-column: 2; display: flex; flex-wrap: wrap; gap: 3px 10px; align-items: baseline; font-size: .95rem}
  .comparison-row small {font-size: .72rem; margin-top: 0}
  .comparison-row h3 {font-size: .9rem}
  .comparison-bar {padding-right: 2.7rem}
  .comparison-bar::before {right: 2.7rem}
  .comparison-bar span {font-size: .78rem; min-width: 2.2rem}
  .comparison-legend {font-size: .77rem; gap: 8px 15px}
  .next-check, .future-note {padding: 20px}
  .future-plan {grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 22px 20px}
  .future-date {border-left: 0; border-top: 1px solid var(--yellow-rule); padding: 15px 0 0; text-align: left}
  .future-date strong {display: inline-block; margin: 3px 12px 0 0; font-size: 1.8rem}
  .future-date small {display: inline-block}
  .future-ladder {grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; margin-top: 0}
  .future-ladder::before {display: none}
  .future-ladder b {font-size: .8rem}
  .future-ladder small {font-size: .7rem}
  .result-footer {display: grid; gap: 10px}
  .result-footer .text-button, .result-footer .text-link {justify-content: start}
  .empty-state {grid-template-columns: minmax(0, 1fr); gap: 18px; padding-top: 8px}
  .empty-state img {max-height: 270px}
  .book-section {grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 28px 20px; margin-top: 36px}
  .book-cover {max-width: 200px}
  .book-copy h2 {font-size: 1.55rem}
  .book-name > span {font-size: .85rem}
  .book-name > strong {font-size: 1.5rem}
  .book-meta {font-size: .8rem}
  .book-section .button {font-size: .9rem; padding-inline: 14px}
  .reading-intro {grid-template-columns: minmax(0, 1fr); gap: 12px}
  .reading-intro .scene-art {width: 170px; margin-inline: auto}
  .reading-intro h2 {font-size: 1.4rem}
  .reading-steps {margin-top: 22px}
  .book-scene-list summary {grid-template-columns: 1.5rem minmax(0, 1fr) auto 1rem; gap: 8px; padding-inline: 2px}
  .book-scene-list summary strong {font-size: .95rem}
  .book-scene-list summary small {font-size: .73rem}
  .book-list-item {grid-template-columns: 1.5rem minmax(0, 1fr); gap: 3px 8px; margin-left: 0; padding-inline: 3px; font-size: .9rem}
  .book-list-item small {grid-column: 2; font-size: .78rem}
  .practice-habit {grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 18px}
  .practice-habit .scene-art {width: 170px; margin-inline: auto}
  .practice-habit h2 {font-size: 1.4rem}
  .plan-panel {padding: 22px 18px}
  .form-grid {grid-template-columns: minmax(0, 1fr); gap: 18px; margin-block: 22px}
  .form-grid label {font-size: .85rem}
  .choice-chips {grid-template-columns: minmax(0, 1fr)}
  .choice-chips label > span {font-size: .9rem}
  .practice-aside {padding: 22px}
  .practice-aside .situation-pills {grid-template-columns: minmax(0, 1fr)}
  .practice-log-list article {grid-template-columns: minmax(0, 1fr); gap: 12px; padding-block: 22px}
  .log-date {display: flex; align-items: baseline; gap: 14px; font-size: 1.1rem}
  .log-date span {margin: 0; font-size: .78rem}
  .practice-log-list h3 {font-size: 1.15rem}
  .situation-grid {grid-template-columns: minmax(0, 1fr); gap: 12px}
  .situation-card {min-height: 0; padding: 18px; gap: 6px}
  .knowledge-current {padding: 24px 20px}
  .study-grid {gap: 22px}
  .study-card {padding: 22px 18px}
  .study-card h3 {font-size: 1.2rem}
  .study-connection {padding: 15px}
  .portal-grid {grid-template-columns: minmax(0, 1fr); gap: 16px}
  .trend {padding: 18px 8px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin}
  .trend svg {min-width: 600px}
  .trend > p {font-size: .8rem; padding-inline: 6px}
  .history-list summary {grid-template-columns: minmax(0, 1fr) auto 1rem; gap: 6px 10px; padding: 15px 10px; font-size: .84rem}
  .history-list summary > span:first-child {grid-column: 1 / 3}
  .history-list summary::after {grid-column: 3; grid-row: 1 / 3}
  .history-list .note {margin-inline: 10px; font-size: .8rem}
  .privacy-cards {margin-top: 18px}
  .privacy-cards h2 {font-size: 1.3rem}
  .record-tools {padding: 24px 18px}
  .record-tools .actions {display: grid; align-items: stretch; gap: 12px}
  .record-tools .button {font-size: .87rem; padding-inline: 10px}
  .faq summary {font-size: .95rem}
  .faq details p {font-size: .9rem; margin-left: 0}
  .overview-toggle {right: 14px; bottom: 14px; min-height: 44px; padding: 8px 13px; font-size: .8rem}
  dialog {width: calc(100% - 28px); max-width: calc(100% - 28px); max-height: calc(100dvh - 28px); padding: 22px 18px}
  .dialog-head {gap: 12px; margin-bottom: 14px}
  .dialog-head h2 {font-size: 1.3rem}
  .overview-grid {grid-template-columns: minmax(0, 1fr); gap: 0}
  .overview-grid a {min-height: 0; padding-block: 14px}
  .overview-grid b {font-size: .95rem}
  .overview-grid span {font-size: .83rem}
  #toast {bottom: 72px; padding: 12px 16px; font-size: .85rem}
}
@media (max-width: 360px) {
  .hero h1 {font-size: 1.6875rem}
  .mast nav {grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 10px}
  .mast nav a {min-width: 0; padding-inline: 6px; font-size: .875rem}
  .hero-bottom .actions {grid-template-columns: minmax(0, 1fr)}
  .hero-bottom .button {min-width: 0; max-width: 100%; padding-inline: 8px; font-size: .875rem; white-space: normal; overflow-wrap: anywhere}
}
@media (max-width: 359px) {
  .hero-copy > .lead br {display: none}
  .rhythm-grid {grid-template-columns: minmax(0, 1fr)}
  .rhythm-grid .scene-art {max-width: 205px}
  .rhythm-grid h3 {font-size: 1.2rem}
  .rhythm-grid p {font-size: .93rem}
  .check-controls {flex-direction: column; align-items: stretch}
  .check-controls .button {max-width: 100%; font-size: .85rem}
  .check-controls .save-state {margin-top: 0}
  .question-card {padding-inline: 12px}
  .axis-tabs button {font-size: .82rem; gap: 3px}
  .axis-tabs button > span {display: none}
  .question-actions .button {padding-inline: 10px; font-size: .8rem}
  .question-actions .text-button {font-size: .8rem}
  .metric-strip > span {font-size: .7rem}
  .future-ladder {column-gap: 12px}
}
@media (prefers-reduced-motion: reduce) {
  html {scroll-behavior: auto !important}
  *, *::before, *::after {animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important}
}
@media (forced-colors: active) {
  .button, .role-card, .mode-card, .situation-card, .answer-option, .choice-chips label > span {border-color: ButtonText}
  .selected, [aria-selected="true"], [aria-pressed="true"] {outline: 2px solid Highlight; outline-offset: -3px}
  .radio-dot, .choice-chips label > span::before, .future-point {forced-color-adjust: none}
  .radar-current, .radar-before, .trend-line {stroke: CanvasText}
  .radar-grid {stroke: GrayText}
  .radar-label, .radar-value, .radar-tick {fill: CanvasText}
}
@media print {
  @page {size: A4; margin: 15mm}
  html, body {background: white !important; color: #20364b !important; font-size: 10.5pt; line-height: 1.75}
  #main {max-width: none; width: 100%; margin: 0; padding: 0; min-height: 0}
  .mast, .foot, .skip, .overview-toggle, .save-warning, dialog, #toast, .actions, .result-footer, .check-controls, .scene-sidebar, .axis-tabs, .answer-options, .question-actions, .check-shortcuts, .situation-pills, .record-tools, .role-grid, .mode-grid, .resume-banner, .entrances, #plan-form, #practice-form, .practice-target > label, .practice-target > select, button {display: none !important}
  .page-head {padding: 0 0 18px}
  h1, .page-head h1, .hero h1 {font-size: 25pt; line-height: 1.45}
  h2 {font-size: 17pt; line-height: 1.5}
  h3 {font-size: 13pt}
  h1, h2, h3, summary {break-after: avoid}
  .section {margin-block: 26px}
  .hero {grid-template-columns: 1fr 1fr; grid-template-areas: none; padding-block: 0 20px; min-height: 0}
  .hero-copy {display: block}
  .hero-art img {max-height: 200px}
  .hero-bottom, .privacy-line {display: none}
  .result-overview {grid-template-columns: repeat(2, minmax(0, 1fr)); break-inside: avoid}
  .result-metrics, .result-radar {padding: 18px}
  .result-overview h2 {font-size: 13pt}
  .big-count {font-size: 42pt}
  .radar {max-width: 280px}
  .habit-grid {grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px}
  .habit-card, .depth-grid article, .comparison-row, .future-plan, .practice-log-list article, .study-card, .reading-steps article {break-inside: avoid}
  .habit-card-top .scene-art {max-width: 120px}
  .habit-card h3 {font-size: 12pt}
  .habit-card > p, .habit-card .book-tag + p {font-size: 10pt}
  .book-tag {font-size: 10pt; background: white; border-color: #97a8b5; margin-top: 12px}
  .depth-grid {grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px}
  .depth-grid > article {padding: 18px}
  .comparison {padding: 16px; break-inside: avoid}
  .comparison-row {grid-template-columns: 3rem minmax(0, 1fr) 8rem; gap: 16px}
  .comparison-row > p {grid-column: auto; display: block}
  .future-plan {grid-template-columns: minmax(0, 1fr) auto; padding: 18px; gap: 18px}
  .future-date {border-top: 0; border-left: 1px solid var(--rule); padding: 0 0 0 18px; text-align: center}
  .future-date strong, .future-date small {display: block}
  .future-ladder {grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px}
  .future-ladder::before {display: block}
  .book-section {grid-template-columns: 150px minmax(0, 1fr); padding: 20px; gap: 26px; margin-top: 26px; break-inside: avoid}
  .book-cover {width: 140px}
  .book-cover > span {display: none}
  .book-cover img {box-shadow: none}
  .book-copy h2 {font-size: 15pt}
  .book-name > strong {font-size: 14pt}
  .reading-intro {grid-template-columns: 120px minmax(0, 1fr); gap: 20px; break-inside: avoid}
  .reading-intro .scene-art {width: 120px}
  .reading-steps {grid-template-columns: minmax(0, 1fr); gap: 5px}
  .practice-layout, .check-layout {display: block}
  .practice-aside {position: static; margin-top: 24px}
  .question-card {border: 0; padding: 0}
  .progress-line {position: static}
  .trend {padding: 10px; break-inside: avoid}
  .trend {overflow: visible}
  .trend svg {width: 100%; min-width: 0}
  .privacy-cards, .portal-grid {grid-template-columns: minmax(0, 1fr)}
  .study-grid {grid-template-columns: minmax(0, 1fr)}
  .history-list summary {grid-template-columns: 1fr 1fr auto 1rem}
  .history-list summary > span:first-child {grid-column: auto}
  .history-list summary::after {grid-column: auto; grid-row: auto}
  a {color: #20364b; text-decoration: none}
  a[href^="https://"]::after {content: " (" attr(href) ")"; font: 8pt/1.6 var(--sans); overflow-wrap: anywhere}
  .book-cover[href]::after {content: none}
  * {-webkit-print-color-adjust: exact; print-color-adjust: exact}
}