/* The static page is the first paint, not a JavaScript error screen. */
.no-webgl #scene { visibility: hidden; pointer-events: none; }
.no-webgl .words { padding-top: max(112px, calc(env(safe-area-inset-top) + 96px)); }
.no-webgl .words::before { content: none; }
.no-webgl .stop, .no-webgl .stop[data-i="6"] { pointer-events: auto; }
.no-webgl .words .c.h, .no-webgl .words .c.b { color: inherit; }
.tour-break { display: none; }
.readable-intro { display: none; }
.no-webgl .readable-intro { display: block; max-width: 560px; margin-bottom: 52px; }
.readable-intro .eyebrow { margin: 0 0 12px; font-size: 14px; font-weight: 640; letter-spacing: .1em; text-transform: uppercase; }
.readable-intro h2 { margin: 0 0 16px; font-size: clamp(38px, 4.4vw, 66px); line-height: 1.02; letter-spacing: -.035em; text-wrap: balance; }
.readable-intro p { max-width: 40ch; margin: 0; color: var(--ink-2); font-size: 17px; line-height: 1.5; text-wrap: pretty; }
.readable-intro .chapter { margin-top: 28px; padding-top: 20px; border-top: 1px solid rgba(31,45,68,.15); font-size: 13px; font-weight: 600; letter-spacing: .04em; }

/* One quiet, permanent piece of paper. Native details works without scripts. */
.about-frug {
  position: fixed; z-index: 5;
  top: max(20px, env(safe-area-inset-top));
  right: max(24px, env(safe-area-inset-right));
  width: max-content; max-width: calc(100vw - 40px);
  box-sizing: border-box; color: var(--ink);
  background: rgba(247,248,250,.96);
  border: 1px solid rgba(31,45,68,.15); border-radius: 14px;
  box-shadow: 0 2px 4px rgba(31,45,68,.025), 0 12px 40px rgba(31,45,68,.055);
}
.about-frug summary {
  min-height: 44px; box-sizing: border-box; padding: 13px 18px;
  font-size: 13px; line-height: 18px; font-weight: 600; cursor: pointer;
  list-style: none; user-select: none;
}
.about-frug summary::-webkit-details-marker { display: none; }
.about-frug summary::after { content: '+'; display: inline-block; margin-left: 18px; font-size: 17px; font-weight: 450; }
.about-frug[open] { width: 360px; }
.about-frug[open] summary { border-bottom: 1px solid rgba(31,45,68,.1); }
.about-frug[open] summary::after { content: '−'; float: right; }
.about-frug summary:focus-visible { outline-offset: -4px; border-radius: 12px; }
.about-paper {
  padding: 22px 24px 24px;
  max-height: calc(100vh - 120px); max-height: calc(100dvh - 120px);
  overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin;
}
.about-lede { margin: 0 0 22px; font-size: 23px; line-height: 1.2; letter-spacing: -.025em; font-weight: 600; text-wrap: balance; }
.about-frug dl { margin: 0; }
.about-frug dt { margin: 18px 0 5px; font-size: 11px; font-weight: 650; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-2); }
.about-frug dd { margin: 0; font-size: 14px; line-height: 1.5; text-wrap: pretty; }
.about-signature { margin: 22px 0 0; padding-top: 18px; border-top: 1px solid rgba(31,45,68,.12); font-size: 13px; line-height: 1.6; color: var(--ink-2); }
.about-frug a { color: var(--ink); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.about-frug a:hover { text-decoration-thickness: 2px; }
@media (max-width: 520px) {
  .about-frug { top: max(16px, env(safe-area-inset-top)); right: max(16px, env(safe-area-inset-right)); max-width: calc(100vw - 32px); }
  .about-paper { padding: 20px; }
  .no-webgl .words { background: linear-gradient(90deg,rgba(247,248,250,.96),rgba(247,248,250,.88) 65%,rgba(247,248,250,.7)); }
  .readable-intro h2 { font-size: 40px; }
}
@media print {
  html, body { height: auto; overflow: visible; }
  #scene, #seed, .tour, .label { display: none !important; }
  .words { position: static; pointer-events: auto; }
  .stop, .stop[data-i="6"] { position: static; visibility: visible; transform: none; width: 100%; margin: 28px 0; break-inside: avoid; }
  .c.h, .c.b { color: inherit; } .c.b::before { content: none; }
  .mail, .who .founder { opacity: 1; }
  .about-frug { position: static; width: 100%; max-width: none; box-shadow: none; }
}