:root {
  color-scheme: light;
  font-family: system-ui, sans-serif;
  --ink-canvas: #f6f7f4;
  --ink-text: #172019;
  --ink-muted: #46534a;
  --ink-panel: #ffffff;
  --ink-panel-hover: #edf3ee;
  --ink-border: #172019;
  --ink-subtle-border: #c8d0c9;
  --ink-trail: #e9eee9;
  --ink-trail-border: #8a9b8d;
  --ink-focus: #4169e1;
  --ink-selected: #174d3d;
  --ink-selected-text: #ffffff;
  --ink-disabled: #758078;
}

:root[data-ink-skin="black"] {
  color-scheme: dark;
  --ink-canvas: #070b09;
  --ink-text: #f4f8f5;
  --ink-muted: #c1d0c5;
  --ink-panel: #142019;
  --ink-panel-hover: #203229;
  --ink-border: #d7e6db;
  --ink-subtle-border: #486052;
  --ink-trail: #132119;
  --ink-trail-border: #9db5a5;
  --ink-focus: #8ab4ff;
  --ink-selected: #d7e6db;
  --ink-selected-text: #102016;
  --ink-disabled: #9aaba0;
}

* { box-sizing: border-box; }

body { min-height: 100%; margin: 0; overflow-y: auto; resize: none; background: var(--ink-canvas); color: var(--ink-text); }
main { max-width: 46rem; min-height: auto; margin: 0 auto; padding: 2rem 1.25rem; resize: none; }
.title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin: 0 0 .75rem; }
h1 { display: grid; gap: .15rem; margin: 0; font-size: clamp(1.65rem, 5vw, 2.4rem); }
h1 span:last-child { font-size: .62em; font-weight: 500; letter-spacing: .02em; }

.skin-change { flex: 0 0 auto; min-width: 0; padding: .4rem .6rem; border: 1px solid var(--ink-trail-border); border-radius: .28rem; background: transparent; color: var(--ink-text); font-size: .76rem; font-weight: 700; letter-spacing: .02em; line-height: 1.2; }
.skin-change:hover { border-color: var(--ink-selected); background: var(--ink-panel-hover); color: var(--ink-text); }
.skin-change:disabled { border-color: var(--ink-disabled); color: var(--ink-disabled); }

@media (max-width: 30rem) {
  .title-row { display: grid; gap: .55rem; }
  .skin-change { justify-self: end; }
}

#story { display: grid; gap: 1rem; line-height: 1.55; }
p { margin: 0; }
.decision-trail-heading { margin-top: .25rem; font-weight: 800; letter-spacing: .08em; }
.decision-trail-item { margin: -.55rem 0 0; padding: .45rem .65rem; border-left: 3px solid var(--ink-trail-border); background: var(--ink-trail); }
button { width: fit-content; min-width: 8rem; padding: .7rem 1rem; border: 2px solid var(--ink-border); border-radius: .35rem; background: var(--ink-panel); color: inherit; font: inherit; font-weight: 700; cursor: pointer; }
button:hover { background: var(--ink-panel-hover); }
button:disabled { border-color: var(--ink-disabled); color: var(--ink-disabled); cursor: not-allowed; }
button:focus-visible { outline: 3px solid var(--ink-focus); outline-offset: 3px; }
.disclosures { display: grid; gap: .6rem; margin-top: 1.5rem; color: var(--ink-muted); font-size: .9rem; }
.disclosures details { border-top: 1px solid var(--ink-subtle-border); padding-top: .6rem; }
.disclosures summary { width: fit-content; cursor: pointer; color: var(--ink-text); font-weight: 700; }
.disclosures summary:hover { color: var(--ink-selected); }
.disclosures summary:focus-visible { outline: 3px solid var(--ink-focus); outline-offset: 3px; }
.disclosures p { margin-top: .5rem; max-width: 42rem; }

@media (forced-colors: active) {
  .skin-change,
  button { border-color: ButtonText; background: Canvas; color: CanvasText; }
  button:focus-visible,
  .disclosures summary:focus-visible { outline-color: Highlight; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}