/* Psionics: the landing's line drawings, and the topic pages, which read like Earthlings' chapters without the stage */
.psionics * { box-sizing: border-box }
.psionics { --ring: color-mix(in srgb, var(--ink) 42%, transparent) }

/* the drawings, on the cards and at the top of each page: ink lines, mono labels */
.draw { display: block; color: var(--ink); overflow: visible }
.draw :is(path, line, circle, ellipse, rect, polyline) { fill: none; stroke: currentColor; stroke-width: 1.2px; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke }
.draw .dot { stroke-dasharray: 0 6; stroke-width: 2px }
.draw .dash { stroke-dasharray: 3 5 }
.draw .faint { opacity: .45 }
.draw .ink { fill: currentColor; stroke: none }
.draw text { font: 500 9px var(--mono); fill: var(--soft); stroke: none; letter-spacing: .06em }

/* the landing: each card's drawing sits under its label, as /life's live cards do */
.world .live { position: absolute; inset: 0; display: flex; padding: 104px 24px 28px; color: var(--ink) }
.world.wide .live { padding: 104px 16% 28px }
/* the drawing fills what is left under the label and keeps its shape, centred */
.world .live svg { flex: 1; width: 100%; height: 100%; min-height: 0 }
.psionics .sect > .notes { margin-top: 40px }

/* a topic page: the title row, the meter, one drawing, then the chapters in a single readable column */
.ps-main { max-width: 1240px; margin: 0 auto; padding: 22px 24px 72px }
.ps-main > * { max-width: 720px }
.intro { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 18px; margin: 0 0 18px }
.intro h1 { margin: 0; font-size: 22px; font-weight: 800; line-height: 1.1; letter-spacing: -.02em }
.intro .sub { margin: 0; font-size: 15px; line-height: 1.4; color: var(--soft); text-wrap: pretty }
.intro .up { flex-basis: 100%; margin: 0; font: 500 12px/1.3 var(--mono); color: var(--soft) }
.intro .up a { text-underline-offset: 3px }

/* how well tested: three bars lit from the left, the words read out, the bars not */
.tested { margin: 0 0 8px; display: flex; flex-direction: column; gap: 6px }
.meter { display: inline-flex; align-items: center; gap: 4px; margin: 0; font-size: 14px; font-weight: 600 }
.meter i { width: 18px; height: 7px; border: 1.5px solid var(--ink); border-radius: 4px }
.meter span { margin-left: 8px; font-weight: 500; color: var(--soft) }
.meter span b { font-weight: 700; color: var(--ink) }
.m3 i, .m2 i:nth-child(-n+2), .m1 i:first-child { background: var(--ink) }
.tested .why { margin: 0; font-size: 13px; line-height: 1.45; color: var(--soft) }

.hero { margin: 26px 0 8px; max-width: 420px }
.hero.wide { max-width: 640px }
.hero svg { width: 100%; height: auto }

.kicker { margin: 0; font: 500 11px/1.3 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--soft) }
.steps { list-style: none; margin: 0; padding: 0 }
.step { padding: 34px 0 6px; display: flex; flex-direction: column; gap: 14px }
.step h2, .app h2 { margin: -2px 0 0; font-size: clamp(22px, 2.4vw, 28px); font-weight: 800; line-height: 1.1; letter-spacing: -.02em; text-wrap: balance }
.step p:not(.kicker), .app p:not(.kicker) { margin: 0; font-size: 17px; line-height: 1.55; text-wrap: pretty }
.step b { font-weight: 700 }
.step p.soft { color: var(--soft); font-size: 15px }
.step a, .notes a { text-underline-offset: 3px }
.step a:focus-visible, .notes a:focus-visible, .app a:focus-visible, .intro a:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 3px }

/* how to read a psi study: a quiet box, not a warning */
.howto { margin: 4px 0 0; padding: 16px 18px; border: 1px solid var(--line); border-radius: 16px; background: var(--wash) }
.howto h3 { margin: 0 0 10px; font: 500 11px/1.3 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--soft) }
.howto dl { margin: 0; display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px 16px; font-size: 15px; line-height: 1.45 }
.howto dt { font-weight: 700 }
.howto dd { margin: 0; color: var(--soft) }
.sides { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px }
.sides > div { display: flex; flex-direction: column; gap: 10px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 16px }
.sides h3 { margin: 0; font-size: 17px; font-weight: 800; letter-spacing: -.01em }
.sides p:not(.kicker) { font-size: 15px }

/* the owner's apps: apart from the research, under the same dotted rule the notes use */
.app { margin: 44px 0 0; padding: 32px 0 0; border-top: 1px dotted var(--ring); display: flex; flex-direction: column; gap: 14px }
.app[hidden] { display: none } /* the off switch, should an app's site go down */
.app .card { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px 18px; align-items: start; padding: 18px; border: 1px solid var(--line); border-radius: 18px }
/* each app's own logo, a light and a dark file that swap with the theme; Third Eye's sits beside its name */
.app .mark { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; min-width: 48px; padding: 0 14px; border-radius: 12px; background: var(--wash2); font-size: 17px; font-weight: 800; letter-spacing: -.01em; white-space: nowrap }
.app .mark img { display: block; width: auto }
:root[data-theme="dark"] .app .only-light, :root:not([data-theme="dark"]) .app .only-dark { display: none }
.app .card > div { display: flex; flex-direction: column; gap: 10px }
.app .card p:not(.kicker) { font-size: 16px }
.app .made { font-weight: 700 }
.app .open { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 16px 0 18px; border: 1px solid var(--ink); border-radius: 999px; background: var(--ink); color: var(--bg); font-size: 15px; font-weight: 700; text-decoration: none; transition: opacity .15s }
.app .open:hover { opacity: .86 }
.app .open svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap }

.notes { margin: 48px 0 0; padding: 32px 0 0; max-width: 720px; display: flex; flex-direction: column; gap: 10px; font-size: 14px; line-height: 1.5; color: var(--soft); border-top: 1px dotted var(--ring) }
.notes p { margin: 0 }
.notes b { color: var(--ink) }
.notes nav { display: flex; flex-wrap: wrap; gap: 0 16px }
.notes nav a { display: inline-flex; align-items: center; min-height: 32px }
.notes nav a[aria-current] { color: var(--ink); font-weight: 700; text-decoration: none }

@media (max-width: 640px) {
  .ps-main { padding: 16px 16px 56px }
  .intro { margin-bottom: 14px }
  .step { padding-top: 28px }
  .step p:not(.kicker), .app p:not(.kicker) { font-size: 16px }
  .step p.soft { font-size: 15px }
  .hero:not(.wide) { max-width: 280px; margin-top: 12px }
  .sides { grid-template-columns: minmax(0, 1fr) }
  .howto dl { grid-template-columns: minmax(0, 1fr); gap: 2px }
  .howto dd { margin-bottom: 8px }
  .app .card { grid-template-columns: minmax(0, 1fr); padding: 16px }
  .app .mark { justify-self: start }
  .world .live, .world.wide .live { padding: 112px 16px 60px }
}
@media (prefers-reduced-motion: reduce) { .app .open { transition: none } }