@layer reset, type, base, layout, parts, utility, access, print;
@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@400..700&family=Newsreader:ital,wght@0,300..700;1,300..700&display=swap") layer(type);

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html { scroll-padding-top: 2rem; }
  body, h1, h2, h3, p, figure, dl, dd { margin: 0; }
  img, svg { display: block; }
  img { max-width: 100%; height: auto; }
  button, input { font: inherit; }
  button, summary, label { -webkit-tap-highlight-color: transparent; }
  [hidden] { display: none !important; }
}

@layer type {
  :root { --serif: "Newsreader", "Iowan Old Style", "Palatino Linotype", Georgia, serif; --sans: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
}

@layer base {
  :root { color-scheme: dark; --ink: #060a16; --teal: #2dd4bf; --foam: #d7e3ec; --muted: #a5bdc9; --edge: #294650; --panel: #0b1524; --deep: #08121f; }
  body { background: var(--ink); color: var(--foam); font: 400 18px/1.7 var(--sans); font-synthesis: none; -webkit-font-smoothing: antialiased; }
  h1, h2, h3 { font-family: var(--serif); font-weight: 400; line-height: 1.13; text-wrap: balance; }
  h1 { font-size: clamp(2.75rem, 4.75vw, 4.65rem); letter-spacing: -.04em; }
  h2 { font-size: clamp(2rem, 3vw, 2.65rem); letter-spacing: -.025em; }
  h3 { font-size: 1.75rem; letter-spacing: -.02em; }
  h1 em { color: var(--teal); font-weight: 400; }
  p { max-width: 68ch; }
  p + p { margin-top: 1rem; }
  a { color: var(--teal); text-underline-offset: .28em; text-decoration-thickness: 1px; min-height: 44px; min-width: 44px; }
  button { cursor: pointer; }
  summary { cursor: pointer; min-height: 48px; list-style: none; }
  summary::-webkit-details-marker { display: none; }
  ::selection { background: #2dd4bf; color: #060a16; }
  :focus-visible { outline: 2px solid var(--teal); outline-offset: 5px; }
  fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
  legend { width: 100%; font-size: 16px; color: var(--muted); padding: 1.5rem 0 .75rem; }
  figure { overflow: hidden; }
}

@layer layout {
  .wrap { width: min(1240px, calc(100% - 112px)); margin-inline: auto; }
  .top { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding-block: 1.6rem; position: relative; z-index: 5; }
  .hero { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 5rem; padding-block: 4.5rem 4rem; position: relative; isolation: isolate; }
  .hero::before { content: ""; position: absolute; z-index: -1; inset: -5rem -3rem -2rem; border-radius: 40%; background: radial-gradient(ellipse at 72% 40%, #103e4640, transparent 62%), radial-gradient(ellipse at 24% 20%, #15234560, transparent 60%); pointer-events: none; }
  .hero::after { content: ""; position: absolute; z-index: -1; width: 240px; height: 610px; top: .5rem; left: 48%; background: url("/helix.svg") center/contain no-repeat; opacity: .13; transform: rotate(-11deg); pointer-events: none; }
  .hero-copy { align-self: center; padding-block: .25rem; }
  .hero h1 { margin-block: 1.5rem 1.35rem; }
  .hero .lead { max-width: 45ch; }
  .shelf { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding-bottom: 2rem; }
  .reading { max-width: 1240px; }
  .chapter { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.55fr); gap: 5rem; padding-block: 4.5rem; border-top: 1px solid #295e6059; position: relative; }
  .chapter::before { content: ""; position: absolute; height: 1px; inset: -1px 0 auto; background: linear-gradient(90deg, transparent, #2dd4bf70, transparent); box-shadow: 0 0 15px #2dd4bf38; pointer-events: none; }
  .chapter-head { align-self: start; }
  .chapter-head .tag { margin-bottom: 1rem; }
  .chapter-body { min-width: 0; }
  .g { display: grid; gap: 1.1rem; }
  .cards, .flags { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 1.5rem; }
  .open { padding-block: 2.5rem 4.5rem; position: relative; isolation: isolate; }
  .open::before { content: ""; position: absolute; inset: -2rem -1rem 0; z-index: -1; background: radial-gradient(ellipse at 84% 60%, #12414238, transparent 60%); pointer-events: none; }
  .open::after { content: ""; position: absolute; right: 3rem; top: -1rem; width: 150px; height: 300px; background: url("/helix.svg") center/cover no-repeat; opacity: .11; transform: rotate(14deg); z-index: -1; pointer-events: none; }
  .open-text { max-width: 900px; }
  .open .tag { margin-bottom: 1.5rem; }
  .open .lead { margin-top: 1.6rem; max-width: 58ch; }
  .foot { display: grid; grid-template-columns: 1fr auto; gap: 3rem; border-top: 1px solid var(--edge); margin-top: 4rem; padding-block: 2.6rem 3rem; }
}

@layer parts {
  .brand { display: flex; align-items: center; gap: .8rem; color: var(--foam); font-family: var(--serif); font-size: 1.8rem; text-decoration: none; line-height: 1; }
  .mark { color: var(--teal); flex-shrink: 0; }
  .brand-sub { display: block; font: 400 16px/1.7 var(--sans); letter-spacing: .04em; margin-top: .35rem; color: var(--muted); }
  .menu { position: relative; font-size: 16px; }
  .menu > summary { display: flex; align-items: center; justify-content: space-between; gap: 1.1rem; border: 1px solid var(--edge); border-radius: 4px; padding: .6rem 1rem; background: var(--deep); color: var(--foam); }
  .menu > summary:hover { border-color: var(--teal); }
  .plus { width: 16px; height: 16px; position: relative; }
  .plus::before, .plus::after { content: ""; position: absolute; inset: 7px 0 auto; height: 1px; background: var(--teal); }
  .plus::after { transform: rotate(90deg); }
  .menu[open] .plus::after { transform: rotate(0); }
  .menu-body { position: absolute; right: 0; top: calc(100% + .65rem); width: 342px; border: 1px solid #37626c; background: #0b1524; padding: 1.2rem; border-radius: 5px; box-shadow: 0 20px 80px #0008; }
  .menu-body .tag { margin-bottom: .75rem; }
  .menu-body a { display: flex; align-items: center; justify-content: space-between; padding: .65rem .4rem; color: var(--foam); text-decoration: none; border-bottom: 1px solid #29465080; }
  .menu-body a:hover, .menu-body a[aria-current] { color: var(--teal); }
  .menu-body a[aria-current] { border-left: 2px solid var(--teal); padding-left: .8rem; }
  .sub summary { display: flex; align-items: center; justify-content: space-between; padding: .75rem .4rem; border-bottom: 1px solid #29465080; }
  .sub summary::after { content: "+"; color: var(--teal); margin-left: .6rem; }
  .sub[open] summary::after { content: "−"; }
  .sub > div { padding-left: .85rem; border-left: 1px solid #2dd4bf66; }
  .sub > div a:last-child { border-bottom: 0; }
  .tag { color: var(--muted); font: 500 16px/1.6 var(--sans); letter-spacing: .04em; }
  .guide-tag { color: var(--teal); }
  .guide-tag::before { content: ""; display: inline-block; width: 6px; height: 6px; background: var(--teal); border-radius: 50%; margin-right: .65rem; vertical-align: middle; box-shadow: 0 0 12px #2dd4bf6b; }
  .lead { color: var(--foam); font-size: 20px; line-height: 1.7; }
  .hero-note { margin-top: 1.4rem; color: var(--muted); font-size: 16px; }
  .acts { display: flex; align-items: center; flex-wrap: wrap; gap: .8rem 1.2rem; margin-top: 1.6rem; }
  .btn, .soft, .text-go { display: inline-flex; align-items: center; justify-content: center; gap: 1rem; min-height: 50px; border-radius: 3px; padding: .7rem 1rem; text-decoration: none; font: 500 16px/1.5 var(--sans); }
  .btn { color: var(--ink); background: var(--teal); border: 1px solid var(--teal); }
  .btn:hover { background: #88eadf; border-color: #88eadf; }
  .soft { color: var(--foam); background: transparent; border: 1px solid var(--edge); }
  .soft:hover { color: var(--teal); border-color: var(--teal); }
  .text-go { justify-content: start; padding-inline: 0; border-bottom: 1px solid #2dd4bf66; border-radius: 0; margin-top: 1.25rem; font-size: 18px; }
  .src { display: inline-block; line-height: 1.7; padding-block: .35rem; vertical-align: baseline; max-width: 100%; }
  .src:hover { color: #94f4e7; }
  .shelf a { display: grid; grid-template-columns: 1fr auto; padding: 1.3rem 1.6rem; text-decoration: none; border-top: 1px solid var(--edge); border-bottom: 1px solid var(--edge); background: #0b152440; gap: .55rem 1rem; }
  .shelf a + a { border-left: 1px solid var(--edge); }
  .shelf .tag { grid-column: 1; }
  .shelf strong { grid-column: 1; font-size: 18px; font-weight: 500; color: var(--foam); }
  .shelf a > span:last-child { grid-column: 2; grid-row: 1 / 3; align-self: center; }
  .shelf a:hover { background: #14323788; }
  .photo { position: relative; border: 1px solid #345860; border-radius: 5px; background: #0d1d2c; isolation: isolate; }
  .photo img { width: 100%; height: 100%; object-fit: cover; position: relative; z-index: 1; }
  .photo::after { content: ""; position: absolute; z-index: 2; inset: 0; pointer-events: none; background: linear-gradient(180deg, #060a1600 30%, #060a16b8 76%, #060a16ef); }
  .photo-fallback { position: absolute; inset: 0; background: radial-gradient(ellipse at 85% 10%, #246067, transparent 65%), linear-gradient(150deg, #162a36, #090d1b); }
  .photo-fallback::before { content: ""; position: absolute; inset: 0; background: url("/helix.svg") center/40% no-repeat; opacity: .2; }
  .photo figcaption { position: absolute; z-index: 3; bottom: 1.7rem; inset-inline: 1.7rem; color: var(--foam); font: 400 1.75rem/1.25 var(--serif); background: #060a16e8; border: 1px solid #2dd4bf33; border-radius: 3px; padding: .75rem 1rem; backdrop-filter: blur(8px); }
  .photo figcaption .tag { display: block; margin-bottom: .75rem; color: var(--teal); }
  .hero-photo { aspect-ratio: 5 / 6; margin-block: .4rem; align-self: center; }
  .note-photo { aspect-ratio: 2 / 1; max-height: 330px; margin-bottom: 4rem; }
  .note-photo figcaption { font-size: 1.6rem; }
  .card { padding: 1.6rem; background: #0b1524c7; border: 1px solid var(--edge); border-radius: 6px; box-shadow: 0 9px 30px #00000010, inset 0 1px 0 #d7e3ec05; backdrop-filter: blur(10px); }
  .card h3 { margin-bottom: 1rem; }
  .card .tag { margin-bottom: .75rem; }
  .card p { font-size: 17px; line-height: 1.8; }
  .wide { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 1.5rem; }
  .ask { margin-top: 1.6rem; padding: 1.3rem 1.5rem; background: #0e292f94; border-left: 2px solid var(--teal); border-radius: 0 4px 4px 0; }
  .ask .tag { color: var(--teal); display: block; margin-bottom: .4rem; }
  .ask p { font-size: 19px; line-height: 1.6; }
  .terms > div { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 1.25rem; padding-block: 1.4rem; border-top: 1px solid var(--edge); }
  .terms > div:first-child { padding-top: 0; border-top: 0; }
  .terms dt { font: 400 1.55rem/1.25 var(--serif); color: var(--teal); padding-top: .4rem; }
  .terms p { font-size: 18px; }
  .terms + p { margin-top: 1rem; }
  .compact { margin-top: 2rem; }
  .check { border: 1px solid #335d63; border-radius: 6px; padding: 1.5rem; background: #0c1a27; }
  .q { display: flex; align-items: center; gap: 1rem; padding-block: .85rem; cursor: pointer; border-top: 1px solid #294650bb; min-height: 64px; font-size: 18px; line-height: 1.6; }
  .q input { appearance: none; -webkit-appearance: none; flex: 0 0 44px; width: 44px; height: 44px; border: 1px solid #5b7f89; border-radius: 4px; background: #08121f; cursor: pointer; margin: 0; }
  .q input:checked { border-color: var(--teal); background: #2dd4bf; }
  .q input:checked::after { content: ""; display: block; width: 10px; height: 19px; border-right: 2px solid #060a16; border-bottom: 2px solid #060a16; transform: rotate(42deg); margin: 7px auto 0; }
  .q:has(input:checked) { color: #c1d5df; }
  .check-tools { padding-top: 1.2rem; border-top: 1px solid var(--edge); margin-top: .75rem; }
  .save { color: var(--muted); font-size: 16px; }
  .check-tools .acts { margin-top: .85rem; }
  .bill { border: 1px solid var(--edge); background: var(--panel); border-radius: 5px; overflow: hidden; }
  table { width: 100%; border-collapse: collapse; font-size: 18px; }
  caption { text-align: left; padding: 1.3rem; color: var(--muted); font-size: 16px; border-bottom: 1px solid var(--edge); }
  th, td { padding: 1.2rem; text-align: left; vertical-align: top; font-weight: 400; }
  thead th { color: var(--teal); font-size: 16px; background: #102630; }
  tbody th { width: 31%; color: var(--foam); }
  tbody tr + tr { border-top: 1px solid var(--edge); }
  td { color: var(--muted); }
  .bill + p { margin-top: 1.5rem; }
  .price-line { color: var(--teal); font: 400 1.7rem/1.45 var(--serif) !important; }
  .flags { margin-top: 0; }
  .flags .card { border-top: 2px solid #2dd4bf77; }
  .urgent { margin-block: .5rem 4.5rem; padding: 2rem; border: 1px solid #637767; border-left: 3px solid #ced8a3; background: #152322; border-radius: 4px; max-width: 820px; margin-left: auto; }
  .urgent .tag { color: #d4dfb5; margin-bottom: .8rem; }
  .urgent h2 { font-size: 2rem; margin-bottom: 1rem; }
  .record { border-bottom: 1px solid var(--edge); padding-block: 1.8rem; }
  .record:first-child { padding-top: 0; }
  .record:last-child { border-bottom: 0; padding-bottom: 0; }
  .record h3 { margin-bottom: .75rem; }
  .recap { margin-block: 1rem 0; padding: 2.8rem 3rem; background: #10283094; border: 1px solid #386167; border-radius: 5px; position: relative; }
  .recap .tag { color: var(--teal); margin-bottom: .9rem; }
  .recap h2 { max-width: 720px; font-size: 2.4rem; }
  .next { display: grid; grid-template-columns: 1fr auto; max-width: 470px; gap: .25rem 2rem; margin-top: 2rem; padding-block: .8rem; border-top: 1px solid #466f74; text-decoration: none; }
  .next > span:first-child { font-size: 16px; color: var(--muted); }
  .next strong { grid-column: 1; font-weight: 500; font-size: 20px; color: var(--foam); }
  .next > span:last-child { grid-column: 2; grid-row: 1 / 3; align-self: center; font-size: 24px; }
  .next:hover strong { color: var(--teal); }
  .bc { padding-block: .25rem 0; font-size: 16px; color: var(--muted); }
  .bc ol { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem 1rem; list-style: none; margin: 0; padding: 0; }
  .bc a { display: inline-flex; align-items: center; }
  .bc li + li::before { content: "/"; padding-right: 1rem; color: var(--muted); }
  .foot .tag { color: var(--teal); }
  .foot-note { font-size: 16px; max-width: 55ch; margin-top: .75rem; }
  .foot nav { display: flex; align-items: center; flex-wrap: wrap; gap: .7rem 1.4rem; }
  .foot nav a { display: inline-flex; align-items: center; min-height: 48px; font-size: 16px; }
  .lost { padding-bottom: 6rem; }
}

@layer utility {
  @media (min-width: 1700px) { .hero { gap: 6rem; } }
  @media (max-width: 1100px) {
    .wrap { width: calc(100% - 72px); }
    .hero { gap: 2.5rem; }
    .chapter { gap: 2.5rem; grid-template-columns: minmax(0, .75fr) minmax(0, 1.5fr); }
    .cards, .flags { grid-template-columns: 1fr; }
    .wide { display: block; }
    .foot { grid-template-columns: 1fr; gap: 1rem; }
  }
  @media (max-width: 760px) {
    .wrap { width: calc(100% - 40px); }
    .top { padding-block: 1.2rem; gap: .7rem; }
    .brand { font-size: 1.5rem; gap: .5rem; }
    .brand-sub { font-size: 16px; letter-spacing: 0; }
    .mark { width: 25px; height: 34px; }
    .menu > summary { padding: .55rem .75rem; gap: .6rem; }
    .menu-body { width: min(342px, calc(100vw - 40px)); }
    .hero { grid-template-columns: 1fr; gap: 2rem; padding-block: 2.5rem 2.5rem; }
    .hero::before { inset-inline: 0; }
    .hero::after { left: auto; right: 0; top: 3rem; width: 170px; height: 450px; opacity: .09; transform: none; }
    h1 { font-size: clamp(2.75rem, 8vw, 3.6rem); }
    .hero h1 { margin-top: 1.1rem; }
    .hero .lead { max-width: 42ch; }
    .hero-photo { aspect-ratio: 1.5; width: 100%; max-height: 320px; }
    .photo figcaption { bottom: 1.3rem; inset-inline: 1.3rem; font-size: 1.5rem; }
    .hero-note { max-width: 35ch; }
    .shelf { grid-template-columns: 1fr; padding-bottom: 1rem; }
    .shelf a { padding: 1.1rem 1.2rem; }
    .shelf a + a { border-left: 0; border-top: 0; }
    .chapter { grid-template-columns: 1fr; gap: 1.5rem; padding-block: 3rem; }
    .chapter-head .tag { margin-bottom: .6rem; }
    .cards, .flags { gap: 1rem; }
    .card { padding: 1.3rem; }
    .card p { font-size: 18px; }
    .open { padding-block: 2rem 3rem; }
    .open::before { inset-inline: 0; }
    .open::after { right: 0; width: 90px; }
    .open .tag { margin-bottom: 1rem; }
    .open .lead { margin-top: 1.2rem; }
    .terms > div { grid-template-columns: 1fr; gap: .5rem; }
    .terms dt { padding-top: 0; }
    .check { padding: 1.1rem; }
    .q { gap: .85rem; }
    th, td { padding: 1rem .9rem; }
    tbody th { width: 36%; }
    .urgent { padding: 1.4rem; margin-bottom: 3rem; }
    .recap { padding: 1.7rem 1.4rem; }
    .recap h2 { font-size: 2rem; }
    .note-photo { margin-bottom: 2.5rem; aspect-ratio: 1.5; }
    .note-photo figcaption { font-size: 1.45rem; }
    .foot { margin-top: 3rem; padding-block: 2rem; }
    .foot nav { gap: .45rem 1.25rem; }
  }
  @media (max-width: 440px) {
    .top { align-items: center; }
    .brand { font-size: 1.35rem; }
    .brand .mark { display: none; }
    .menu > summary { font-size: 16px; padding-inline: .65rem; }
    .guide-tag { max-width: 31ch; }
    .hero .acts { align-items: stretch; }
    .hero .acts a { justify-content: space-between; }
    .hero .btn, .hero .soft { width: 100%; }
  }
}

@layer access {
  .skip { position: fixed; inset: 12px auto auto 12px; z-index: 20; background: var(--teal); color: var(--ink); padding: .75rem 1rem; transform: translateY(-160%); border-radius: 3px; font-size: 16px; }
  .skip:focus { transform: translateY(0); }
  @media (prefers-reduced-motion: no-preference) { a, button, summary { transition: color 120ms ease, background-color 120ms ease, border-color 120ms ease; } }
  @media (forced-colors: active) { .q input { appearance: auto; } .q input:checked::after { display: none; } .photo-fallback { display: none; } }
}

@layer print {
  @media print {
    :root { color-scheme: light; }
    body { color: #111; background: #fff; font: 16px/1.55 Georgia, serif; }
    .top, .bc, .foot, .recap, .check-tools, .skip, .photo, .open::before, .open::after, .hero::before, .hero::after { display: none !important; }
    .wrap { width: 100%; max-width: none; }
    .open { padding-block: 0 1.5rem; }
    h1 { font-size: 30px; }
    h2 { font-size: 24px; }
    h1 em, .tag, .terms dt, a { color: #111; }
    .chapter { display: block; padding-block: 1.5rem; border-color: #bbb; }
    .chapter::before { display: none; }
    .chapter-head { margin-bottom: 1rem; }
    .check { border: 1px solid #999; padding: 1rem; background: #fff; break-inside: avoid; }
    .q { font-size: 16px; padding-block: .55rem; border-color: #ccc; color: #111 !important; }
    .q input { border-color: #111; background: #fff; print-color-adjust: exact; }
    .q input:checked { background: #ddd; border-color: #111; }
    .ask, .card { background: #fff; color: #111; border-color: #777; }
    body.print-list .open, body.print-list .chapter:not(:has(#question-list)) { display: none; }
    body.print-list .chapter { padding-top: 0; border: 0; }
    body.print-list .chapter-head .tag { display: none; }
  }
}