/* The reading pages, worn through Kaleidoscope's HERE lens.
   The ground holds the words; the voice opens each page.
   The shared shapes keep their place as the materials change. */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
html, body { min-height: 100%; }
body {
  position: relative;
  background: var(--ground);
  color: var(--ink);
  font: 400 var(--t-m)/var(--lh-m) var(--f-ui);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-wrap: anywhere;
  padding: max(var(--s6), env(safe-area-inset-top)) max(var(--s5), env(safe-area-inset-right)) max(var(--s7), env(safe-area-inset-bottom)) max(var(--s5), env(safe-area-inset-left));
}
.aurora, .grain { display: none; }
body::after { content: none; }
.progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  z-index: 10;
  pointer-events: none;
  transform-origin: 0 50%;
  transform: scaleX(0);
  background: var(--ink-2);
}
@supports (animation-timeline: scroll()) {
  .progress { animation: grow linear both; animation-timeline: scroll(root); }
  @keyframes grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
}
.page { width: 100%; max-width: 740px; min-width: 0; margin: 0 auto; }
.crumb {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  max-width: 100%;
  color: var(--ink-2);
  text-decoration: none;
  font-size: var(--t-s);
  line-height: var(--lh-s);
  border: 0;
  border-radius: var(--r-pill);
  padding: var(--s2) var(--s4);
  background: var(--tint);
  box-shadow: var(--ring);
  transition: color var(--d-dur) var(--ease), box-shadow var(--d-dur) var(--ease);
}
.crumb:hover { color: var(--ink); box-shadow: var(--ring-2); }
h1 {
  font: 400 var(--t-d1)/var(--lh-d1) var(--f-voice);
  letter-spacing: -.01em;
  margin: var(--s5) 0 var(--s3);
}
.meta { display: flex; flex-wrap: wrap; gap: var(--s2); margin-bottom: var(--s5); }
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  min-width: 0;
  max-width: 100%;
  background: var(--tint);
  color: var(--ink-2);
  box-shadow: var(--ring);
  border-radius: var(--r-pill);
  padding: var(--s1) var(--s3);
  font: 500 var(--t-xs)/var(--lh-xs) var(--f-ui);
}
.chip::before {
  content: "";
  flex: none;
  width: var(--s2);
  height: var(--s2);
  border-radius: var(--r-pill);
  background: var(--ink-2);
}
.card {
  border-radius: var(--r2);
  padding: var(--s5);
  margin-bottom: var(--s4);
  background: var(--surface);
  box-shadow: var(--ring), var(--shadow);
}
.k {
  font: 600 var(--t-xs)/var(--lh-xs) var(--f-ui);
  color: var(--ink-2);
  margin-bottom: var(--s3);
}
.tldr { border-left: 2px solid var(--line-2); }
.tldr p { color: var(--ink-2); font-size: var(--t-m); line-height: var(--lh-m); }
.tldr p + p { margin-top: var(--s3); }
.toc ol { list-style: none; columns: 2; column-gap: var(--s5); }
.toc li { margin: 0 0 var(--s2); break-inside: avoid; }
.toc a {
  color: var(--ink-2);
  text-decoration: none;
  font-size: var(--t-s);
  line-height: var(--lh-s);
  transition: color var(--d-dur) var(--ease);
}
.toc a:hover { color: var(--ink); }
.toc .n { display: inline-block; min-width: var(--s5); color: var(--ink-2); font-variant-numeric: tabular-nums; }
main { margin-top: var(--s5); }
section {
  padding: var(--s6) var(--s1) var(--s2);
  border-top: 1px solid var(--line);
  scroll-margin-top: var(--s6);
}
section:first-of-type { border-top: none; padding-top: var(--s4); }
h2 {
  font: 600 var(--t-l)/var(--lh-l) var(--f-ui);
  margin-bottom: var(--s3);
  display: flex;
  gap: var(--s3);
  align-items: baseline;
}
h2 .n {
  flex: none;
  color: var(--ink-2);
  font-size: var(--t-s);
  line-height: var(--lh-s);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}
.short, .note {
  position: relative;
  color: var(--ink-2);
  font-size: var(--t-s);
  line-height: var(--lh-s);
  margin: 0 0 var(--s4);
  padding: var(--s3) var(--s4);
  background: var(--tint);
  box-shadow: var(--ring-2);
  border-radius: var(--r2);
}
.short::before, .note::before { content: "◉"; color: var(--ink-2); margin-right: var(--s2); font-size: var(--t-s); }
.note { background: var(--warn-soft); }
.note::before { color: var(--warn); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
section p { color: var(--ink-2); font-size: var(--t-m); line-height: var(--lh-m); margin-bottom: var(--s3); }
section ul { margin: 0 0 var(--s3) var(--s5); color: var(--ink-2); font-size: var(--t-m); line-height: var(--lh-m); }
section li { margin-bottom: var(--s2); }
section li::marker { color: var(--ink-2); }
b, strong, section li b { font-weight: 600; }
section li b { color: var(--ink); }
a { color: var(--ink); text-decoration: none; overflow-wrap: anywhere; }
a:hover { text-decoration: underline; text-underline-offset: var(--s1); }
section a, .tldr a { text-decoration: underline; text-underline-offset: var(--s1); }
a:focus-visible, .crumb:focus-visible, button:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: var(--s1);
  border-radius: var(--r0);
}
a[href^="http"]:not([href*="hereandmore.com"])::after { content: " \2197"; color: var(--ink-2); font-size: var(--t-xs); text-decoration: none; }
a[href^="http"]:not([href*="hereandmore.com"]):hover { text-decoration-color: var(--ink); }
.caps { font-size: var(--t-s); line-height: var(--lh-s); color: var(--ink-2); }
.os { display: flex; gap: var(--s2); margin-bottom: var(--s4); flex-wrap: wrap; }
.os button {
  font: 500 var(--t-s)/var(--lh-s) var(--f-ui);
  color: var(--ink-2);
  cursor: pointer;
  background: var(--tint);
  border: 0;
  box-shadow: var(--ring);
  border-radius: var(--r-pill);
  padding: var(--s2) var(--s4);
  max-width: 100%;
  overflow-wrap: anywhere;
  transition: color var(--d-dur) var(--ease), box-shadow var(--d-dur) var(--ease), background-color var(--d-dur) var(--ease);
}
.os button:hover { color: var(--ink); box-shadow: var(--ring-2); }
.os button[aria-selected=true] { color: var(--ink); box-shadow: var(--ring-2); background: var(--tint-2); }
code, pre, kbd { font-family: var(--f-mono); overflow-wrap: anywhere; }
code[style*="font-family"] { font-family: var(--f-mono) !important; }
.block {
  position: relative;
  border-radius: var(--r2);
  box-shadow: var(--ring);
  background: var(--sunk);
  margin-bottom: var(--s4);
  overflow: hidden;
}
.block pre { overflow-x: auto; padding: var(--s7) var(--s4) var(--s4); scrollbar-width: thin; }
.block code { font: 400 var(--t-s)/var(--lh-m) var(--f-mono); color: var(--ink); white-space: pre; overflow-wrap: normal; display: block; }
.block .cmt { color: var(--ink-2); }
.copy {
  position: absolute;
  top: var(--s3);
  right: var(--s3);
  min-height: var(--h-s);
  max-width: calc(100% - var(--s5));
  font: 500 var(--t-xs)/var(--lh-xs) var(--f-ui);
  color: var(--ink-2);
  cursor: pointer;
  background: var(--sunk);
  border: 0;
  box-shadow: var(--ring);
  border-radius: var(--r0);
  padding: var(--s2) var(--s3);
  transition: color var(--d-dur) var(--ease), box-shadow var(--d-dur) var(--ease), opacity var(--d-dur) var(--ease);
}
.copy:hover { color: var(--ink); box-shadow: var(--ring-2); }
.copy.done { color: var(--ok); box-shadow: var(--ring-2); }
kbd {
  font: 500 var(--t-xs)/var(--lh-xs) var(--f-mono);
  background: var(--tint);
  box-shadow: var(--ring);
  border-radius: var(--r0);
  padding: var(--s1) var(--s2);
  color: var(--ink-2);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
pre.cmd {
  margin: var(--s3) 0 var(--s1);
  padding: var(--s3) var(--s4);
  border-radius: var(--r1);
  box-shadow: var(--ring);
  background: var(--tint);
  overflow-x: auto;
  font: 400 var(--t-s)/var(--lh-s) var(--f-mono);
  color: var(--ink);
  white-space: pre;
  overflow-wrap: normal;
}
ol.steps { margin: var(--s2) 0 0 var(--s5); }
ol.steps li { margin: var(--s2) 0; }
code.addr { font: 400 var(--t-s)/var(--lh-s) var(--f-mono); user-select: all; overflow-wrap: anywhere; }
dl.words dt { font-weight: 600; margin-top: var(--s3); }
dl.words dd { margin-left: 0; color: var(--ink-2); }
.foot { color: var(--ink-2); font-size: var(--t-xs); line-height: var(--lh-xs); margin-top: var(--s7); text-align: center; }
.foot .legal { margin-top: var(--s3); color: var(--ink-2); }
.foot a { color: var(--ink-2); }
.foot a:hover { color: var(--ink); }
::selection { background: var(--pick); color: var(--on-pick); }
::-moz-selection { background: var(--pick); color: var(--on-pick); }
[hidden] { display: none !important; }
@media (max-width: 640px) { .toc ol { columns: 1; } }
@media (pointer: coarse) { .crumb, .os button, .copy { min-height: var(--reach); } .block pre { padding-top: var(--s8); } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
@media print {
  html { color-scheme: light; }
  body { background: var(--ink); color: var(--ground); padding: 0; font-size: var(--t-xs); line-height: var(--lh-xs); }
  .page, .page *, .page *::before, .page *::after { color: var(--ground) !important; }
  .aurora, .grain, .progress, .crumb, .copy { display: none; }
  body::after { content: none; }
  .card, .short, .note, .block, pre.cmd, .chip, kbd, .os button {
    background: transparent;
    box-shadow: none;
    border-color: var(--ground);
  }
  .card { break-inside: avoid; }
  section { border-color: var(--ground); }
  .tldr p, section p, section ul, .caps { color: var(--ground); }
  h1, h2 { color: var(--ground); }
  a { color: var(--ground); text-decoration: underline; }
  .toc a, .short, .k, .foot, .block code { color: var(--ground); }
  .block pre { padding-top: var(--s4); }
  [hidden] { display: block !important; }
}