/* ==========================================================================
   Personal projects: each demo keeps its own product's colors and type.
   The page frame (tokens, grid, type) lives in styles.css.
   ========================================================================== */
/* Metric-matched fallbacks for the project typefaces, measured from the font
   files against Arial and Courier New (Liberation and Arimo/Cousine share their
   metrics). The real faces (project-fonts.css) arrive late, so the swap must not
   move the copy. Regular and bold system faces each get their own adjustment. */
@font-face {
  font-family: "Nunito Fallback"; src: local("Arial"), local("ArialMT"), local("Liberation Sans"), local("Arimo");
  font-weight: 100 649; ascent-override: 98.6%; descent-override: 34.4%; line-gap-override: 0%; size-adjust: 102.5%;
}
@font-face {
  font-family: "Nunito Fallback"; src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"), local("Arimo Bold");
  font-weight: 650 849; ascent-override: 101.5%; descent-override: 35.4%; line-gap-override: 0%; size-adjust: 99.6%;
}
@font-face {
  font-family: "Nunito Fallback"; src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"), local("Arimo Bold");
  font-weight: 850 1000; ascent-override: 102.1%; descent-override: 35.7%; line-gap-override: 0%; size-adjust: 99%;
}
@font-face {
  font-family: "Manrope Fallback"; src: local("Arial"), local("ArialMT"), local("Liberation Sans"), local("Arimo");
  font-weight: 100 649; ascent-override: 102%; descent-override: 28.7%; line-gap-override: 0%; size-adjust: 104.5%;
}
@font-face {
  font-family: "Manrope Fallback"; src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"), local("Arimo Bold");
  font-weight: 650 1000; ascent-override: 103.7%; descent-override: 29.2%; line-gap-override: 0%; size-adjust: 102.8%;
}
@font-face {
  font-family: "JetBrains Mono Fallback"; src: local("Courier New"), local("CourierNewPSMT"), local("Liberation Mono"), local("Cousine");
  font-weight: 100 549; ascent-override: 102%; descent-override: 30%; line-gap-override: 0%; size-adjust: 100%;
}
@font-face {
  font-family: "JetBrains Mono Fallback"; src: local("Courier New Bold"), local("CourierNewPS-BoldMT"), local("Liberation Mono Bold"), local("Cousine Bold");
  font-weight: 550 1000; ascent-override: 102%; descent-override: 30%; line-gap-override: 0%; size-adjust: 100%;
}
:root {
  --project-gap: clamp(48px, 7vw, 96px);
  --release-bg: #fbfaf5; --release-ink: #1d1c1a; --release-muted: #6c675f; --release-bar: #1d1c1a; --release-red: #a8231a; --release-blend: multiply;
  --media-filter: none;
  --mono: "JetBrains Mono", "JetBrains Mono Fallback", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --rounded: "Nunito", "Nunito Fallback", ui-rounded, "SF Pro Rounded", system-ui, sans-serif;
}
:root[data-theme="dark"] {
  --release-bg: #1f1c19; --release-ink: #e3dccd; --release-muted: #a09785; --release-bar: #c9c1b0; --release-red: #ff7a6b; --release-blend: normal;
  --media-filter: brightness(.78) contrast(1.04);
}
@media screen and (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --release-bg: #1f1c19; --release-ink: #e3dccd; --release-muted: #a09785; --release-bar: #c9c1b0; --release-red: #ff7a6b; --release-blend: normal;
    --media-filter: brightness(.78) contrast(1.04);
  }
}

/* ==========================================================================
   Pull-outs: each project on the black stage, with a perforated tab and a
   bar of its own inks. The insert inside is the product's own design.
   ========================================================================== */
.pullout { min-width: 0; }
.pullout-tab {
  display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 40px; padding-bottom: 10px;
  font: 560 .75rem/1.3 var(--sans); letter-spacing: .12em; text-transform: uppercase; font-feature-settings: "case";
  color: var(--ink-72);
  background: linear-gradient(90deg, color-mix(in oklab, var(--ink) 40%, transparent) 50%, #0000 50%) 0 100% / 8px 1px repeat-x;
}
/* The longest tabs keep to two lines on the narrowest phones. */
@media (max-width: 374px) { .pullout-tab { letter-spacing: .08em; } }
.colorbar { display: inline-flex; gap: 2px; flex: none; }
.colorbar i { display: block; width: 14px; height: 8px; box-shadow: 0 0 0 1px color-mix(in oklab, var(--ink) 20%, transparent); transition: background-color .2s var(--ease-out-cubic); }
.pullout[data-for="framily"] .colorbar i:nth-child(1) { background: #f4a15d; }
.pullout[data-for="framily"] .colorbar i:nth-child(2) { background: #3d2a57; }
.pullout[data-for="framily"] .colorbar i:nth-child(3) { background: #fbf4ea; }
.pullout:has(.insert-fr[data-mood="brunch"]) .colorbar i:nth-child(1) { background: #ffc947; }
.pullout:has(.insert-fr[data-mood="brunch"]) .colorbar i:nth-child(2) { background: #124e5c; }
.pullout:has(.insert-fr[data-mood="brunch"]) .colorbar i:nth-child(3) { background: #eef6f3; }
.pullout:has(.insert-fr[data-mood="nightout"]) .colorbar i:nth-child(1) { background: #c4a7f5; }
.pullout:has(.insert-fr[data-mood="nightout"]) .colorbar i:nth-child(2) { background: #1a1d3b; }
.pullout:has(.insert-fr[data-mood="nightout"]) .colorbar i:nth-child(3) { background: #f1eef9; }
.pullout:has(.insert-fr[data-mood="backyard"]) .colorbar i:nth-child(1) { background: #f28ba0; }
.pullout:has(.insert-fr[data-mood="backyard"]) .colorbar i:nth-child(2) { background: #1f3d27; }
.pullout:has(.insert-fr[data-mood="backyard"]) .colorbar i:nth-child(3) { background: #f3f6ec; }
.pullout[data-for="grounding"] .colorbar i:nth-child(1) { background: #3f6f66; }
.pullout[data-for="grounding"] .colorbar i:nth-child(2) { background: #9c7a35; }
.pullout[data-for="grounding"] .colorbar i:nth-child(3) { background: #f4f1ea; }
/* Calmer's bar is the redaction joke: three blacked-out lines. */
.pullout[data-for="calmer"] .colorbar i { background: #1d1c1a; box-shadow: 0 0 0 1px color-mix(in oklab, var(--ink) 35%, transparent); }
.pullout[data-for="calmer"] .colorbar i:nth-child(2) { width: 22px; }
.pullout[data-for="calmer"] .colorbar i:nth-child(3) { width: 10px; }
.pullout[data-for="beacon"] .colorbar i:nth-child(1) { background: #05070a; box-shadow: 0 0 0 1px color-mix(in oklab, var(--ink) 45%, transparent); }
.pullout[data-for="beacon"] .colorbar i:nth-child(2) { background: #ffcf73; }
.pullout[data-for="beacon"] .colorbar i:nth-child(3) { background: #d9dde3; }
.pullout[data-for="soapbox"] .colorbar i:nth-child(1) { background: #133728; box-shadow: 0 0 0 1px color-mix(in oklab, var(--ink) 35%, transparent); }
.pullout[data-for="soapbox"] .colorbar i:nth-child(2) { background: #ffb000; }
.pullout[data-for="soapbox"] .colorbar i:nth-child(3) { background: #ff3b30; }
.pullout[data-for="districtmapper"] .colorbar i:nth-child(1) { background: #1f55aa; }
.pullout[data-for="districtmapper"] .colorbar i:nth-child(2) { background: #0095e0; }
.pullout[data-for="districtmapper"] .colorbar i:nth-child(3) { background: #008c26; }
:root[data-theme="dark"] .pullout[data-for="grounding"] .colorbar i:nth-child(1) { background: #7fb3a6; }
:root[data-theme="dark"] .pullout[data-for="grounding"] .colorbar i:nth-child(2) { background: #d8b878; }
:root[data-theme="dark"] .pullout[data-for="grounding"] .colorbar i:nth-child(3) { background: #1c1f22; }
@media screen and (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .pullout[data-for="grounding"] .colorbar i:nth-child(1) { background: #7fb3a6; }
  :root:not([data-theme="light"]) .pullout[data-for="grounding"] .colorbar i:nth-child(2) { background: #d8b878; }
  :root:not([data-theme="light"]) .pullout[data-for="grounding"] .colorbar i:nth-child(3) { background: #1c1f22; }
}
.pullout-pair { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap-block); align-items: start; }
@media (min-width: 1024px) {
  .pullout-pair { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); }
  .pullout-pair > :first-child { grid-column: 1 / span 7; }
  .pullout-pair > :last-child { grid-column: 8 / -1; }
}

.insert { position: relative; overflow: hidden; font-size: 18px; line-height: 1.55; color-scheme: light; }
:where(.insert) p { margin: 0 0 .9em; }
/* The project buttons are in each product's own style; the shared shape is only a default. */
:where(.insert) .btn {
  display: inline-flex; align-items: center; gap: .5em; min-height: 44px; padding: .6em 1.15em;
  border-radius: 999px; border: 2px solid transparent; font-family: var(--sans); font-weight: 700;
  font-size: .92rem; text-decoration: none; cursor: pointer; transition: background-color .2s, color .2s, scale .15s;
}
:where(.insert) .btn:active { scale: .98; }
.insert :is(button, a.btn), .insert .fr-cell, .insert .gq-dot, #dmMap { touch-action: manipulation; }
.insert :focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }

/* ---------- DistrictMapper ---------- */
.insert-dm {
  --dm-blue: #1f55aa; --dm-cyan: #7dd8ff;
  font-family: "Manrope", "Manrope Fallback", system-ui, sans-serif; color: #fff;
  background:
    radial-gradient(1000px 420px at 85% -10%, rgba(0, 149, 224, .45), transparent 60%),
    radial-gradient(700px 400px at -10% 110%, rgba(0, 140, 38, .28), transparent 60%),
    linear-gradient(160deg, #0a1a3a, #10306a 55%, #0b2350);
}
.dm-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 34px; padding: 30px 32px 34px; align-items: center; }
.dm-eyebrow {
  display: inline-block; font-size: .72rem; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; color: #cdeeff;
  border: 1px solid rgba(255, 255, 255, .18); background: rgba(255, 255, 255, .08); border-radius: 999px; padding: 6px 13px; margin-bottom: 16px;
}
.dm-title { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; font-size: min(1.95rem, 8.5vw); font-weight: 800; letter-spacing: -.02em; margin-bottom: 8px; }
.dm-title img { background: #fff; border-radius: 9px; padding: 5px 6px; width: 42px; height: 46px; }
.dm-headline { font-size: clamp(1.5rem, 2.6vw, 2.15rem); font-weight: 800; line-height: 1.1; letter-spacing: -.02em; margin-bottom: 16px; }
.dm-headline span { background: linear-gradient(90deg, #7dd8ff, #5fb3ff 45%, #7ee3a0); -webkit-background-clip: text; background-clip: text; color: transparent; }
.dm-copy > p:not([class]) { color: #d7e3f5; font-size: 1rem; line-height: 1.6; }
.insert-gq > p:not([class]), .bt-copy > p:not([class]), .fr-copy > p:not([class]), .dm-copy > p:not([class]) { max-width: 37em; }
.dm-copy em { color: #fff; }
.dm-tools { display: flex; flex-wrap: wrap; gap: 6px; margin: 16px 0 12px; }
.dm-tools li { font-size: .78rem; font-weight: 700; padding: 5px 10px; border-radius: 999px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .14); }
.dm-fine { font-size: .82rem; color: #a9bddb; }
.btn-dm { background: #fff; color: #0b2350; margin-top: 4px; }
.btn-dm:hover { background: var(--dm-cyan); }

.dm-map-frame { background: #fff; border-radius: 14px; overflow: hidden; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 255, 255, .2); }
.dm-caption { font-size: .72rem; font-weight: 700; color: #4a5a70; }
:root[data-theme="dark"] .dm-caption { color: #b8c9e2; }
@media screen and (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .dm-caption { color: #b8c9e2; } }
.dm-map-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 9px 10px; background: #f6f8fb; border-bottom: 1px solid #e3e8ef; color: #0f1b2d; }
.dm-random {
  margin-left: auto; font-family: inherit; font-size: .72rem; font-weight: 800; cursor: pointer; min-height: 32px;
  padding: 4px 10px; border-radius: 999px; border: 1px solid transparent; background: #1f55aa; color: #fff;
}
.dm-random:hover { background: #163f80; }
.dm-map { width: 100%; height: auto; cursor: crosshair; background: #eef2f5; touch-action: manipulation; }
.dm-zone { transition: fill-opacity .25s, stroke-width .25s; }
.dm-zone.is-hit { fill-opacity: .42 !important; stroke-width: 2.5; }
.dm-school-label { font: 700 9.5px "Manrope", "Manrope Fallback", sans-serif; fill: #0f1b2d; paint-order: stroke; stroke: #fff; stroke-width: 3px; stroke-linejoin: round; pointer-events: none; }
.dm-pin { transition: transform .35s cubic-bezier(.3, 1.6, .5, 1); }
.dm-result { margin-top: 12px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16); border-radius: 12px; padding: 12px 14px; min-height: 92px; }
.dm-result-kicker { font-size: .68rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--dm-cyan); margin: 0 0 4px; }
.dm-result-main { font-size: 1.12rem; font-weight: 800; margin: 0 0 2px; }
.dm-result-sub { font-size: .84rem; color: #b8c9e2; margin: 0; }
.dm-result-sub b { color: #7ee3a0; }

/* ---------- framily ---------- */
.insert-fr {
  --fi: #3D2A57; --fa: #F4A15D; --fg: #FBF4EA;
  font-family: var(--rounded); background: var(--fg); color: var(--fi);
  transition: background-color .45s ease, color .45s ease;
}
.insert-fr[data-mood="brunch"] { --fi: #124E5C; --fa: #FFC947; --fg: #EEF6F3; }
.insert-fr[data-mood="nightout"] { --fi: #1A1D3B; --fa: #C4A7F5; --fg: #F1EEF9; }
.insert-fr[data-mood="backyard"] { --fi: #1F3D27; --fa: #F28BA0; --fg: #F3F6EC; }
.fr-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 34px; padding: 30px 32px 34px; align-items: center; }
.fr-wordmark { width: min(290px, 70%); height: auto; margin: 0 0 10px -6px; }
.fr-ink { stroke: var(--fi); transition: stroke .45s; }
.fr-chip { stroke: var(--fa); transition: stroke .45s; }
.fr-sub { font-size: 1.5rem; font-weight: 900; line-height: 1.15; margin-bottom: 14px; letter-spacing: -.01em; }
.fr-copy > p:not([class]) { font-size: 1.02rem; font-weight: 600; line-height: 1.6; }
.fr-copy b { background: var(--fa); padding: 0 .2em; border-radius: 4px; }
.fr-cta { display: flex; flex-wrap: wrap; gap: 10px; }
.btn-fr-alt { background: transparent; color: var(--fi); border-color: var(--fi); }
.btn-fr-alt:hover { background: color-mix(in srgb, var(--fi) 10%, transparent); }
.fr-moods { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 20px; padding: 0; border: 0; min-width: 0; }
.fr-moods input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.fr-moods label {
  position: relative; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; min-height: 44px; padding: 6px 13px 6px 7px;
  border-radius: 999px; border: 2px solid color-mix(in srgb, var(--fi) 20%, transparent); background: rgba(255, 255, 255, .6);
  font-family: var(--rounded); font-weight: 800; font-size: .86rem; color: var(--fi); transition: border-color .2s, background-color .2s;
}
.fr-moods label:has(input:checked) { border-color: var(--fi); background: #fff; }
.fr-moods label:has(input:focus-visible) { outline: 3px solid var(--fi); outline-offset: 2px; }
.fr-moods i { width: 24px; height: 24px; border-radius: 7px; background: linear-gradient(180deg, transparent 38%, var(--a) 38% 62%, transparent 62%), var(--i); }
.btn-fr { background: var(--fi); color: var(--fg); }
.btn-fr:hover { background: color-mix(in srgb, var(--fi) 85%, #000); }

.fr-demo { display: grid; grid-template-columns: minmax(0, 1fr) 170px; gap: 18px; align-items: center; }
.fr-card { background: #fff; border-radius: 22px; padding: 16px 16px 14px; box-shadow: 0 18px 40px -26px color-mix(in srgb, var(--fi) 70%, transparent); }
.fr-card-title { font-weight: 900; font-size: 1.1rem; margin: 0 0 12px; }
.fr-week { display: grid; grid-template-columns: 58px repeat(7, minmax(0, 1fr)); gap: 5px; align-items: center; }
.fr-daylabel { font-size: .68rem; font-weight: 800; text-align: center; text-transform: uppercase; opacity: .85; }
.fr-daylabel.is-best { opacity: 1; color: var(--fi); }
.fr-person { display: flex; align-items: center; gap: 5px; font-size: .74rem; font-weight: 800; }
.fr-avatar { flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--fa); color: var(--fi); font-size: .7rem; font-weight: 900; transition: background-color .45s; }
.fr-cell {
  height: 30px; border-radius: 8px; border: 0; padding: 0; background: color-mix(in srgb, var(--fi) 8%, #fff);
  transition: background-color .2s, transform .15s; position: relative;
}
.fr-cell.is-free { background: color-mix(in srgb, var(--fa) 55%, #fff); }
.fr-cell.is-you { cursor: pointer; outline: 2px dashed color-mix(in srgb, var(--fi) 30%, transparent); outline-offset: -2px; }
.fr-cell.is-you:hover { transform: scale(1.06); }
.fr-cell.is-you.is-free { outline-color: var(--fi); }
.fr-cell.is-best { background: var(--fa); box-shadow: 0 0 0 2px var(--fi); }
.fr-best {
  margin-top: 12px; padding: 10px 12px; border-radius: 14px; background: color-mix(in srgb, var(--fa) 22%, #fff); min-height: 62px;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.fr-best-main { font-weight: 900; font-size: 1rem; margin: 0; }
.fr-best-sub { font-size: .8rem; font-weight: 700; margin: 0; opacity: .85; }
.fr-best-count { font-weight: 900; font-size: 1.3rem; }
.fr-phone { margin: 0; border-radius: 30px; padding: 7px; background: #111; box-shadow: 0 30px 50px -28px rgba(0, 0, 0, .7); transform: rotate(3deg); }
.fr-phone img { border-radius: 24px; width: 100%; height: auto; filter: var(--media-filter); }

/* framily at night: the mood's ink becomes the surface and its ground the text. */
:root[data-theme="dark"] .insert-fr { background: color-mix(in srgb, var(--fi) 72%, #000); color: var(--fg); }
:root[data-theme="dark"] .fr-ink { stroke: var(--fg); }
:root[data-theme="dark"] .fr-copy b { color: var(--fi); }
:root[data-theme="dark"] .fr-moods label { background: transparent; color: var(--fg); border-color: color-mix(in srgb, var(--fg) 25%, transparent); }
:root[data-theme="dark"] .fr-moods label:has(input:checked) { background: color-mix(in srgb, var(--fg) 12%, transparent); border-color: var(--fg); }
:root[data-theme="dark"] .fr-moods label:has(input:focus-visible) { outline-color: var(--fg); }
:root[data-theme="dark"] .btn-fr { background: var(--fa); color: var(--fi); }
:root[data-theme="dark"] .btn-fr-alt { color: var(--fg); border-color: color-mix(in srgb, var(--fg) 45%, transparent); }
:root[data-theme="dark"] .btn-fr-alt:hover { background: color-mix(in srgb, var(--fg) 12%, transparent); }
:root[data-theme="dark"] .btn-fr:hover { background: color-mix(in srgb, var(--fa) 85%, #fff); }
:root[data-theme="dark"] .fr-card { background: color-mix(in srgb, var(--fi) 45%, #000); box-shadow: 0 18px 40px -26px rgba(0, 0, 0, .8); }
:root[data-theme="dark"] .fr-cell { background: color-mix(in srgb, var(--fg) 10%, transparent); }
:root[data-theme="dark"] .fr-cell.is-free { background: color-mix(in srgb, var(--fa) 45%, transparent); }
:root[data-theme="dark"] .fr-cell.is-best { background: var(--fa); box-shadow: 0 0 0 2px var(--fg); }
:root[data-theme="dark"] .fr-cell.is-you { outline-color: color-mix(in srgb, var(--fg) 35%, transparent); }
:root[data-theme="dark"] .fr-cell.is-you.is-free { outline-color: var(--fg); }
:root[data-theme="dark"] .fr-daylabel.is-best { color: var(--fa); }
:root[data-theme="dark"] .fr-best { background: color-mix(in srgb, var(--fa) 18%, transparent); }
/* DistrictMapper's sample map, printed as a night map. */
:root[data-theme="dark"] .btn-dm { background: var(--dm-blue); color: #fff; }
:root[data-theme="dark"] .btn-dm:hover { background: var(--dm-cyan); color: #0b2350; }
:root[data-theme="dark"] .dm-map-frame { background: #0f1a2b; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .8), 0 0 0 1px rgba(125, 216, 255, .18); }
:root[data-theme="dark"] .dm-map-bar { background: #13213a; border-bottom-color: #22314d; color: #dce6f5; }
:root[data-theme="dark"] .dm-random { background: #2c6fd6; }
:root[data-theme="dark"] .dm-random:hover { background: #3a80ea; }
:root[data-theme="dark"] .dm-map,
:root[data-theme="dark"] .dm-land { background: #101c2e; fill: #101c2e; }
:root[data-theme="dark"] .dm-water { fill: #1b3657; }
:root[data-theme="dark"] .dm-park { fill: #15301f; }
:root[data-theme="dark"] .dm-road-edge { stroke: #0b1422; }
:root[data-theme="dark"] .dm-road { stroke: #2a3a55; }
:root[data-theme="dark"] .dm-road-main { stroke: #6e5c2a; }
:root[data-theme="dark"] .dm-zone { fill-opacity: .2; }
:root[data-theme="dark"] .dm-boundary { stroke: #9fb4d4; }
:root[data-theme="dark"] .dm-school-dot { fill: #101c2e; }
:root[data-theme="dark"] .dm-school-label { fill: #e3ebf7; stroke: #101c2e; }
:root[data-theme="dark"] .btn-cm { background: transparent; color: var(--release-ink); box-shadow: inset 0 0 0 1.5px var(--release-muted); }
:root[data-theme="dark"] .btn-cm:hover { background: var(--release-red); color: var(--release-bg); box-shadow: none; }

/* ---------- Grounding Quest ---------- */
.insert-gq {
  --gq-bg: #F4F1EA; --gq-surface: #FFFFFF; --gq-text: #1F2A2E; --gq-soft: #4E5A5E; --gq-accent: #3F6F66; --gq-gold: #9C7A35; --gq-card: #EDE6D8;
  font-family: var(--rounded); background: var(--gq-bg); color: var(--gq-text); padding: 28px 0 26px;
}
:root[data-theme="dark"] .insert-gq { --gq-bg: #1C1F22; --gq-surface: #262A2E; --gq-text: #EEF0EE; --gq-soft: #B5BDBC; --gq-accent: #7FB3A6; --gq-gold: #D8B878; --gq-card: #262A2E; }
@media screen and (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .insert-gq { --gq-bg: #1C1F22; --gq-surface: #262A2E; --gq-text: #EEF0EE; --gq-soft: #B5BDBC; --gq-accent: #7FB3A6; --gq-gold: #D8B878; --gq-card: #262A2E; } }
.insert-gq > * { margin-left: 28px; margin-right: 28px; }
.gq-eyebrow { font-size: .74rem; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; color: var(--gq-gold); margin-bottom: 4px; }
.gq-title { font-size: 2.1rem; font-weight: 900; letter-spacing: -.02em; line-height: 1.05; margin-bottom: 8px; }
.gq-tag { font-family: var(--serif); font-style: italic; font-size: 1.3rem; line-height: 1.3; color: var(--gq-accent); margin-bottom: 12px; }
.insert-gq > p:not([class]) { font-weight: 600; font-size: .98rem; color: var(--gq-soft); line-height: 1.6; }
.gq-quest { background: var(--gq-surface); border-radius: 20px; padding: 16px 16px 10px; margin-top: 16px; margin-bottom: 16px; }
.gq-row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px; padding: 7px 0; border-top: 1px solid color-mix(in srgb, var(--gq-text) 8%, transparent); }
.gq-row:first-child { border-top: 0; }
.gq-row.is-done .gq-label { color: var(--gq-accent); }
.gq-label { font-weight: 800; font-size: .95rem; transition: color .3s; }
.gq-label small { display: block; font-weight: 600; font-size: .76rem; color: var(--gq-soft); }
.gq-dots { display: flex; gap: 7px; }
.gq-dot {
  width: 26px; height: 26px; border-radius: 50%; border: 2.5px solid var(--gq-gold); background: transparent; cursor: pointer; padding: 0;
  transition: background-color .3s, transform .3s cubic-bezier(.3, 1.8, .5, 1);
}
.gq-dot:hover { transform: scale(1.12); }
.gq-dot.is-found { background: var(--gq-gold); transform: scale(1); cursor: default; }
.gq-dot.is-found::after { content: ""; display: block; width: 8px; height: 8px; margin: auto; border-radius: 50%; background: var(--gq-surface); }
.gq-done { min-height: 1.6em; font-weight: 800; color: var(--gq-accent); margin: 8px 0 4px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.gq-done button { font-family: var(--rounded); font-weight: 800; font-size: .8rem; background: transparent; border: 1.5px solid var(--gq-accent); color: var(--gq-accent); border-radius: 999px; padding: 4px 11px; cursor: pointer; min-height: 32px; }
.gq-breath { display: inline-block; width: 14px; height: 14px; border-radius: 50%; background: var(--gq-accent); margin-right: 8px; vertical-align: -2px; animation: breathe 5s ease-in-out infinite; }
@keyframes breathe { 50% { transform: scale(1.6); opacity: .5; } }
.gq-rules { display: flex; flex-wrap: wrap; gap: 6px; }
.gq-rules li { font-size: .78rem; font-weight: 800; padding: 5px 11px; border-radius: 999px; background: var(--gq-card); color: var(--gq-text); }

/* ---------- Calmer (embargoed) ---------- */
.insert-cm { background: var(--release-bg); color: var(--release-ink); font-family: var(--mono); }
.cm-release { position: relative; padding: 24px 28px 28px; font-size: .9rem; line-height: 1.65; }
.cm-for { font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: #6c675f; margin-bottom: 2px; }
.cm-embargo { font-weight: 700; font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; color: var(--release-red); }
.cm-title { font-family: var(--serif); font-size: 3rem; font-weight: 800; letter-spacing: -.02em; line-height: 1; margin: 14px 0 14px; }
.cm-dateline b { font-weight: 700; }
.redact {
  background: var(--release-bar); color: var(--release-bar); border-radius: 1px; cursor: help; position: relative; letter-spacing: -.1em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone; transition: background-color .2s;
}
.redact::after {
  content: attr(data-reveal); position: absolute; left: 50%; bottom: 100%; border-bottom: 6px solid transparent; background-clip: padding-box; transform: translateX(-50%) translateY(4px);
  background: #a8231a; color: #fff; font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap;
  padding: 3px 8px; border-radius: 3px; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s;
}
.redact:hover::after { opacity: 1; transform: translateX(-50%); pointer-events: auto; }
.hush .redact::after { opacity: 0 !important; }
.cm-end { text-align: center; letter-spacing: .3em; margin: 16px 0 18px; }
.cm-stamp {
  position: absolute; top: 58px; right: 20px; transform: rotate(-12deg); pointer-events: none;
  border: 4px double var(--release-red); color: var(--release-red); border-radius: 8px; padding: 6px 14px;
  font-family: var(--sans); font-stretch: 75%; font-weight: 900; font-size: 1.7rem; letter-spacing: .12em; text-transform: uppercase;
  opacity: .88; mix-blend-mode: var(--release-blend);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='r'><feTurbulence baseFrequency='.9' numOctaves='2'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 -2.2 1.7'/></filter><rect width='100%' height='100%' filter='url(%23r)'/></svg>");
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='r'><feTurbulence baseFrequency='.9' numOctaves='2'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 -2.2 1.7'/></filter><rect width='100%' height='100%' filter='url(%23r)'/></svg>");
}
.insert-cm { container-type: inline-size; }
@container (max-width: 480px) { .cm-stamp { position: static; display: inline-block; margin: 4px 0 16px; font-size: min(1rem, 5.8cqi); } }
.motion-ready .pullout.is-in .cm-stamp { animation: stamp .45s cubic-bezier(.2, 1.6, .4, 1) .6s both; }
@keyframes stamp { from { transform: rotate(-12deg) scale(2.2); opacity: 0; } to { transform: rotate(-12deg) scale(1); opacity: .88; } }
.btn-cm { background: var(--release-ink); color: var(--release-bg); font-family: var(--mono); font-weight: 700; border-radius: 3px; }
.btn-cm:hover { background: var(--release-red); color: var(--release-bg); }

/* ---------- Beacon Torch ---------- */
.insert-bt { background: #05070a; color: #d9dde3; font-family: var(--sans); }
.bt-dark { position: relative; --x: 50%; --y: calc(100% - 62px); --r: 190px; min-height: 420px; overflow: hidden; }
.bt-stars {
  position: absolute; inset: 0; opacity: .5; pointer-events: none;
  background-image:
    radial-gradient(1px 1px at 12% 18%, #fff, transparent), radial-gradient(1px 1px at 28% 72%, #cfd8ff, transparent),
    radial-gradient(1.5px 1.5px at 46% 30%, #fff, transparent), radial-gradient(1px 1px at 63% 84%, #fff, transparent),
    radial-gradient(1px 1px at 78% 22%, #ffe9b0, transparent), radial-gradient(1.5px 1.5px at 90% 60%, #fff, transparent),
    radial-gradient(1px 1px at 8% 88%, #fff, transparent), radial-gradient(1px 1px at 52% 52%, #9fb3ff, transparent),
    radial-gradient(1px 1px at 36% 8%, #fff, transparent), radial-gradient(1px 1px at 70% 46%, #fff, transparent);
}
.bt-dark::before { /* the beam itself */
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: radial-gradient(circle var(--r) at var(--x) var(--y), rgba(255, 226, 150, .22), rgba(255, 190, 90, .08) 45%, transparent 70%);
}
.bt-hidden {
  position: absolute; left: 0; right: 0; bottom: 0; height: 124px; z-index: 0; pointer-events: none; display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 0 .45em; padding: 0 24px; font-family: var(--serif); font-weight: 800; font-size: clamp(1.4rem, 3.6vw, 2.6rem); line-height: 1.05;
  color: #ffe5a3; text-align: center; letter-spacing: -.01em; border-top: 1px dashed rgba(255, 207, 115, .18);
  -webkit-mask: radial-gradient(circle calc(var(--r) * .9) at var(--x) var(--by, 62px), #000 25%, transparent 70%);
  mask: radial-gradient(circle calc(var(--r) * .9) at var(--x) var(--by, 62px), #000 25%, transparent 70%);
}
.bt-hidden-big { font-style: italic; color: #fff4d6; }
.bt-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 30px; padding: 30px 32px 150px; align-items: center; }
.bt-eyebrow { font-family: var(--mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: #ffcf73; }
.bt-title { font-family: var(--serif); font-size: clamp(2.3rem, 4.4vw, 3.4rem); font-weight: 800; letter-spacing: -.02em; line-height: 1; color: #fff; margin-bottom: 8px; text-shadow: 0 0 28px rgba(255, 200, 100, .35); }
.bt-sub { font-family: var(--serif); font-style: italic; font-size: 1.25rem; color: #ffe3a1; }
.bt-copy > p:not([class]) { font-size: .98rem; line-height: 1.6; color: #b9c0cb; }
.bt-copy b { color: #fff; }
.bt-demos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.bt-panel { margin: 0; border: 1px solid rgba(255, 255, 255, .12); border-radius: 14px; padding: 14px; background: rgba(12, 15, 20, .72); backdrop-filter: blur(3px); display: flex; flex-direction: column; align-items: center; gap: 10px; }
.bt-panel figcaption { font-size: .78rem; color: #9aa3b0; line-height: 1.4; align-self: stretch; }
.bt-panel figcaption b { display: block; color: #fff; font-family: var(--mono); font-size: .76rem; letter-spacing: .04em; margin-bottom: 2px; }
#btQr { width: 150px; max-width: 100%; height: auto; aspect-ratio: 1; image-rendering: pixelated; border-radius: 6px; background: #fff; box-shadow: 0 0 40px rgba(255, 255, 255, .18); }
.bt-meter { margin: 0; font-family: var(--mono); font-size: .72rem; color: #9aa3b0; }
.bt-meter span { color: #ffcf73; font-weight: 700; }
.bt-lamp {
  width: 64px; height: 64px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #3a3d44, #16181c 70%);
  border: 3px solid #2a2d33; transition: background .04s, box-shadow .04s;
}
.bt-lamp.is-on { background: radial-gradient(circle at 45% 40%, #fff, #fff3c4 35%, #ffb547 75%); box-shadow: 0 0 22px 6px rgba(255, 196, 87, .5); border-color: #ffe0a0; }
.bt-form { display: flex; gap: 6px; width: 100%; }
.bt-form input {
  width: 0;
  flex: 1; min-width: 0; font-family: var(--mono); font-size: .9rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  background: #0b0e13; color: #fff; border: 1px solid #333a45; border-radius: 8px; padding: 8px 10px;
}
.btn-bt { background: #ffcf73; color: #1b1406; border-radius: 8px; min-height: 40px; padding: .4em .9em; font-size: .8rem; }
.btn-bt:hover { background: #ffe0a0; }
.bt-bits { display: flex; flex-wrap: wrap; gap: 2px; width: 100%; min-height: 12px; }
.bt-bits i { width: 6px; height: 10px; border-radius: 1px; background: #262b33; }
.bt-bits i.one { background: #6b5a33; }
.bt-bits i.is-now { background: #ffcf73; box-shadow: 0 0 8px #ffcf73; }
.bt-bits i.is-sent.one { background: #b8923f; }
.bt-status { margin: 0; font-family: var(--mono); font-size: .72rem; color: #9aa3b0; align-self: stretch; }

/* ---------- Soapbox ---------- */
/* soapboxtimer.app's own tokens: light by day, the display's green at night. */
.insert-sb {
  --sb-bg: #f6f8f3; --sb-surface: #fff; --sb-surface-2: #edf2ec; --sb-line: #d3ddd4; --sb-text: #0c1a10; --sb-muted: #4a5c4f;
  --sb-accent: #ffb020; --sb-accent-hover: #f5a300; --sb-accent-ink: #1c1300; --sb-accent-text: #8a5200; --sb-message: rgb(20, 90, 230);
  --sb-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --sb-display: ui-rounded, "SF Pro Rounded", "Nunito", "Nunito Fallback", system-ui, -apple-system, "Segoe UI", sans-serif;
  background: var(--sb-bg); color: var(--sb-text); font-family: var(--sb-font);
}
.sb-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: 40px; padding: 32px 32px 34px; align-items: center; }
.sb-eyebrow { font-size: .8125rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--sb-accent-text); }
.sb-title { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; font: 700 1.5rem/1 var(--sb-display); letter-spacing: -.01em; }
.sb-title img { width: 48px; height: 48px; border-radius: 11px; box-shadow: 0 0 0 1px var(--sb-line); }
.insert .sb-headline { margin-bottom: 20px; font: 800 clamp(2rem, 1.2rem + 2.4vw, 3.1rem)/1.05 var(--sb-display); letter-spacing: -.02em; text-wrap: balance; }
.sb-copy > p:not([class]) { font-size: 1.0625rem; line-height: 1.6; color: var(--sb-muted); }
.sb-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.insert :is(.btn-sb, .btn-sb-alt) { border-radius: 12px; font-family: var(--sb-font); font-weight: 650; }
.btn-sb { background: var(--sb-accent); color: var(--sb-accent-ink); }
.btn-sb:hover { background: var(--sb-accent-hover); }
.btn-sb-alt { background: transparent; color: var(--sb-text); border-color: var(--sb-line); }
.btn-sb-alt:hover { background: var(--sb-surface-2); }

.sb-demo { display: grid; gap: 14px; padding: 16px; border: 1px solid var(--sb-line); border-radius: 24px; background: var(--sb-surface); container-type: inline-size; }
/* The speaker's screen, drawn by the display's rules: green, amber at 0:20, red at 0:10, then overtime. */
.sb-screen {
  --sb-phase: #0d1f12;
  position: relative; display: grid; min-height: 56.25cqw; overflow: hidden; container-type: inline-size;
  border: 6px solid #030604; border-radius: 12px; background: var(--sb-phase); color: #fff; font-family: var(--sb-display);
  box-shadow: 0 0 0 1px var(--sb-line), 0 12px 32px -12px rgb(0 0 0 / .6);
  transition: background-color .4s;
}
.sb-screen[data-phase="warning"] { --sb-phase: #735200; }
.sb-screen[data-phase="danger"] { --sb-phase: #800d0d; }
.sb-screen[data-phase="overtime"] { --sb-phase: #b30000; }
/* Every blink alternates with the same color at 150/179 of its brightness. */
.sb-screen[data-dark] { --sb-phase: #0b1a0f; }
.sb-screen[data-dark][data-phase="warning"] { --sb-phase: #604500; }
.sb-screen[data-dark][data-phase="danger"] { --sb-phase: #6b0b0b; }
.sb-screen[data-dark][data-phase="overtime"] { --sb-phase: #960000; }
.sb-screen[data-instant] { transition: none; }
.sb-main { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2%; padding: 4%; }
.insert .sb-main p { margin: 0; }
.sb-screen-title { font-size: max(11px, 3.9cqw); font-weight: 600; line-height: 1.1; white-space: nowrap; }
.sb-clock { font-size: calc(var(--sb-fit, 35) * 1cqw); font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sb-screen[data-dim] .sb-clock { opacity: .6; }
.sb-status { min-height: 1em; margin-right: -.3em; font-size: max(11px, 2.4cqw); font-weight: 700; line-height: 1; letter-spacing: .3em; text-transform: uppercase; opacity: .8; }
.sb-pulse { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; }
.insert .sb-overlay {
  position: absolute; inset: 0; display: none; place-items: center; margin: 0; padding: 5%;
  background: var(--sb-message); color: #fff; font: 800 18.5cqw/1.05 var(--sb-display); text-align: center; white-space: nowrap;
}
.insert .sb-overlay.is-on { display: grid; }
.sb-overlay[data-off] { --sb-message: rgb(16, 72, 190); }
.sb-controls { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.sb-controls button {
  min-height: 44px; padding: 8px 6px; border: 1px solid var(--sb-line); border-radius: 10px; background: var(--sb-surface-2); color: var(--sb-text); white-space: nowrap;
  font: 600 .9375rem/1.2 var(--sb-font); font-variant-numeric: tabular-nums; cursor: pointer; transition: background-color .15s, border-color .15s;
}
.sb-controls button:hover { border-color: var(--sb-muted); }
.sb-controls .sb-start { border-color: transparent; background: var(--sb-accent); color: var(--sb-accent-ink); }
.sb-controls .sb-start:hover { background: var(--sb-accent-hover); }
.sb-controls .sb-message { grid-column: 1 / -1; border-color: transparent; background: rgb(20, 90, 230); color: #fff; }
.sb-controls .sb-message:hover { background: rgb(16, 72, 190); }
@container (max-width: 279px) { .sb-controls { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- Focus, targets and night fixes for every demo ---------- */
.insert-fr { --focus: var(--fi); }
.insert-gq { --focus: var(--gq-accent); }
.insert-cm { --focus: var(--release-ink); }
.insert-bt { --focus: #ffcf73; }
.insert-dm { --focus: #7dd8ff; }
.insert-sb { --focus: #8a5200; }
.dm-map-frame { --focus: #1f55aa; }
:root[data-theme="dark"] .dm-map-frame { --focus: #7dd8ff; }
@media screen and (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .dm-map-frame { --focus: #7dd8ff; } }
/* Free evenings carry a mark as well as a color. */
.fr-cell.is-free::after { content: ""; position: absolute; inset: 0; margin: auto; width: 7px; height: 7px; border-radius: 50%; background: var(--fi); }
:root[data-theme="dark"] .fr-cell.is-free::after { background: var(--fg); }
@media screen and (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .fr-cell.is-free::after { background: var(--fg); } }
:root[data-theme="dark"] .fr-cell.is-best::after { background: var(--fi); }
@media screen and (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .fr-cell.is-best::after { background: var(--fi); } }
/* Calmer's color bar is its redaction joke, so it sits on its own paper. */
.pullout[data-for="calmer"] .colorbar { background: #fbfaf5; padding: 2px; gap: 3px; }
/* With reduced motion, scrolling doesn't move the beam; the eyebrow says what does. */
@media (hover: none) and (prefers-reduced-motion: reduce) { .bt-eyebrow .on-touch { display: none; } .bt-eyebrow .on-hover { display: inline; } }
:root[data-theme="dark"] .insert-fr { --focus: var(--fg); }
@media screen and (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .insert-fr { --focus: var(--fg); } }
.insert-fr .fr-cell:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
/* Beats the night outline on the editable cells (0,4,0), so focus stays a full-strength ring. */
:root .insert-fr .fr-cell.is-you:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.fr-best .btn-fr { min-height: 44px; }
.gq-dot { position: relative; }
.gq-dot::before { content: ""; position: absolute; inset: -9px -3px; }
@media (max-width: 359px) { .fr-daylabel { font-size: .6rem; letter-spacing: -.02em; } }
@media (max-width: 760px) {
  .fr-cell.is-you { height: 44px; }
  .gq-dot::before { inset: -11px -4.5px; }
}
.gq-done button { min-height: 44px; }
.gq-eyebrow { color: #7a5e22; }
:root[data-theme="dark"] .gq-eyebrow { color: var(--gq-gold); }
@media screen and (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .gq-eyebrow { color: var(--gq-gold); } }
.cm-for { color: var(--release-muted); }
:root[data-theme="dark"] .insert-cm { --release-bar: #0e0d0b; }
:root[data-theme="dark"] .redact { outline: 1px solid color-mix(in oklab, var(--release-ink) 35%, transparent); }
@media screen and (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .insert-cm { --release-bar: #0e0d0b; }
  :root:not([data-theme="light"]) .redact { outline: 1px solid color-mix(in oklab, var(--release-ink) 35%, transparent); }
}
.redact { display: inline-block; transform-origin: 0 50%; line-height: 1.2; }
/* Beacon Torch: drag sideways to move the beam; the page still scrolls vertically. */
.bt-dark { touch-action: pan-y; }
.bt-form input { font-size: 16px; }
.bt-hold { margin-top: 2px; min-height: 44px; padding: .4em .9em; font-size: .8rem; border-radius: 8px; }
.bt-hold[aria-pressed="true"] { background: #fff4d6; }
.btn-bt { min-height: 44px; }
:root[data-theme="dark"] #btQr { filter: none; box-shadow: 0 0 0 1px rgba(236, 229, 214, .2); background: #0a0c10; }
@media screen and (prefers-color-scheme: dark) { :root:not([data-theme="light"]) #btQr { filter: none; box-shadow: 0 0 0 1px rgba(236, 229, 214, .2); background: #0a0c10; } }
/* The black panels get a hairline so they don't disappear into the night stage. */
:root[data-theme="dark"] :is(.insert-bt, .insert-dm, .insert-sb) { box-shadow: 0 0 0 1px color-mix(in oklab, var(--stage-ink) 14%, transparent); }
@media screen and (prefers-color-scheme: dark) { :root:not([data-theme="light"]) :is(.insert-bt, .insert-dm, .insert-sb) { box-shadow: 0 0 0 1px color-mix(in oklab, var(--stage-ink) 14%, transparent); } }
/* Soapbox at night: its own dark theme. */
:root[data-theme="dark"] .insert-sb { --sb-bg: #07130b; --sb-surface: #0d1f12; --sb-surface-2: #142a1a; --sb-line: #24402d; --sb-text: #eef3ee; --sb-muted: #a8baac; --sb-accent-hover: #ffc04d; --sb-accent-text: #ffb020; --focus: #ffd27a; color-scheme: dark; }
@media screen and (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .insert-sb { --sb-bg: #07130b; --sb-surface: #0d1f12; --sb-surface-2: #142a1a; --sb-line: #24402d; --sb-text: #eef3ee; --sb-muted: #a8baac; --sb-accent-hover: #ffc04d; --sb-accent-text: #ffb020; --focus: #ffd27a; color-scheme: dark; } }
.dm-random { min-height: 44px; }
.dm-demo { container-type: inline-size; }
@container (max-width: 559px) {
  .dm-school-label { display: none; font-size: 15px; }
  .dm-school-label.is-on { display: block; }
}
:root[data-theme="dark"] .insert-dm {
  background: radial-gradient(1000px 420px at 85% -10%, rgba(0, 149, 224, .18), transparent 60%), radial-gradient(700px 400px at -10% 110%, rgba(0, 140, 38, .12), transparent 60%), linear-gradient(160deg, #08142c, #0c2652 55%, #091c40);
}
@media screen and (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .insert-dm {
    background: radial-gradient(1000px 420px at 85% -10%, rgba(0, 149, 224, .18), transparent 60%), radial-gradient(700px 400px at -10% 110%, rgba(0, 140, 38, .12), transparent 60%), linear-gradient(160deg, #08142c, #0c2652 55%, #091c40);
  }
}

/* ---------- Entrances: each pull-out rises once, then does one thing in its own voice ---------- */
.motion-ready .pullout:not(.is-in) { opacity: 0; transform: translateY(16px); }
.motion-ready .pullout.is-in { transition: opacity .6s var(--ease-out-quint), transform .6s var(--ease-out-quint); }
.motion-ready .pullout.is-in .fr-cell { animation: fr-fill .3s var(--ease-out-cubic) calc(200ms + var(--i, 0) * 25ms) both; }
.motion-ready .pullout.is-in .fr-cell.is-best { animation: fr-fill .3s var(--ease-out-cubic) calc(200ms + var(--i, 0) * 25ms) both, fr-pulse .6s var(--ease-out-cubic) 1.1s 1; }
@keyframes fr-fill { from { opacity: .2; scale: .92; } }
@keyframes fr-pulse { 50% { box-shadow: 0 0 0 2px var(--fi), 0 0 0 8px color-mix(in srgb, var(--fa) 60%, transparent); } }
.motion-ready .pullout.is-in #gqRows li:first-child .gq-dot { animation: gq-breath 2.4s ease-in-out calc(200ms + var(--i, 0) * 80ms) 1; }
@keyframes gq-breath { 50% { scale: 1.06; } }
.motion-ready .pullout:not(.is-in) .redact { scale: 0 1; }
.motion-ready .pullout.is-in .redact { animation: cm-ink .3s var(--ease-out-cubic) calc(200ms + var(--i, 0) * 80ms) both; }
@keyframes cm-ink { from { scale: 0 1; } to { scale: 1 1; } }
.motion-ready .pullout:not(.is-in) .bt-dark { --r: 0px; }
.motion-ready .pullout.is-in .bt-dark { transition: --r .4s var(--ease-out-cubic) .2s; }
.motion-ready .pullout.is-in .dm-boundary { stroke-dasharray: 1; animation: dm-draw .9s var(--ease-out-cubic) .2s both; }
@keyframes dm-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@property --r { syntax: "<length>"; inherits: true; initial-value: 190px; }

/* Reduced motion: every phrase in the dark is simply visible, and nothing moves. */
@media (prefers-reduced-motion: reduce) {
  .bt-hidden { -webkit-mask: none; mask: none; }
  .gq-breath { animation: none; }
}

/* The same night styles when the system is dark and the reader hasn't picked an edition. */
@media screen and (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .insert-fr { background: color-mix(in srgb, var(--fi) 72%, #000); color: var(--fg); }
  :root:not([data-theme="light"]) .fr-cell { background: color-mix(in srgb, var(--fg) 10%, transparent); }
  :root:not([data-theme="light"]) .fr-cell.is-free { background: color-mix(in srgb, var(--fa) 45%, transparent); }
  :root:not([data-theme="light"]) .dm-map-frame { background: #0f1a2b; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .8), 0 0 0 1px rgba(125, 216, 255, .18); }
  :root:not([data-theme="light"]) .fr-ink { stroke: var(--fg); }
  :root:not([data-theme="light"]) .fr-copy b { color: var(--fi); }
  :root:not([data-theme="light"]) .fr-moods label { background: transparent; color: var(--fg); border-color: color-mix(in srgb, var(--fg) 25%, transparent); }
  :root:not([data-theme="light"]) .fr-moods label:has(input:checked) { background: color-mix(in srgb, var(--fg) 12%, transparent); border-color: var(--fg); }
  :root:not([data-theme="light"]) .fr-moods label:has(input:focus-visible) { outline-color: var(--fg); }
  :root:not([data-theme="light"]) .btn-fr { background: var(--fa); color: var(--fi); }
  :root:not([data-theme="light"]) .btn-fr-alt { color: var(--fg); border-color: color-mix(in srgb, var(--fg) 45%, transparent); }
  :root:not([data-theme="light"]) .btn-fr-alt:hover { background: color-mix(in srgb, var(--fg) 12%, transparent); }
  :root:not([data-theme="light"]) .btn-fr:hover { background: color-mix(in srgb, var(--fa) 85%, #fff); }
  :root:not([data-theme="light"]) .fr-card { background: color-mix(in srgb, var(--fi) 45%, #000); box-shadow: 0 18px 40px -26px rgba(0, 0, 0, .8); }
  :root:not([data-theme="light"]) .fr-cell.is-best { background: var(--fa); box-shadow: 0 0 0 2px var(--fg); }
  :root:not([data-theme="light"]) .fr-cell.is-you { outline-color: color-mix(in srgb, var(--fg) 35%, transparent); }
  :root:not([data-theme="light"]) .fr-cell.is-you.is-free { outline-color: var(--fg); }
  :root:not([data-theme="light"]) .fr-daylabel.is-best { color: var(--fa); }
  :root:not([data-theme="light"]) .fr-best { background: color-mix(in srgb, var(--fa) 18%, transparent); }
  :root:not([data-theme="light"]) .btn-dm { background: var(--dm-blue); color: #fff; }
  :root:not([data-theme="light"]) .btn-dm:hover { background: var(--dm-cyan); color: #0b2350; }
  :root:not([data-theme="light"]) .dm-map-bar { background: #13213a; border-bottom-color: #22314d; color: #dce6f5; }
  :root:not([data-theme="light"]) .dm-random { background: #2c6fd6; }
  :root:not([data-theme="light"]) .dm-random:hover { background: #3a80ea; }
  :root:not([data-theme="light"]) .dm-map,
  :root:not([data-theme="light"]) .dm-land { background: #101c2e; fill: #101c2e; }
  :root:not([data-theme="light"]) .dm-water { fill: #1b3657; }
  :root:not([data-theme="light"]) .dm-park { fill: #15301f; }
  :root:not([data-theme="light"]) .dm-road-edge { stroke: #0b1422; }
  :root:not([data-theme="light"]) .dm-road { stroke: #2a3a55; }
  :root:not([data-theme="light"]) .dm-road-main { stroke: #6e5c2a; }
  :root:not([data-theme="light"]) .dm-zone { fill-opacity: .2; }
  :root:not([data-theme="light"]) .dm-boundary { stroke: #9fb4d4; }
  :root:not([data-theme="light"]) .dm-school-dot { fill: #101c2e; }
  :root:not([data-theme="light"]) .dm-school-label { fill: #e3ebf7; stroke: #101c2e; }
  :root:not([data-theme="light"]) .btn-cm { background: transparent; color: var(--release-ink); box-shadow: inset 0 0 0 1.5px var(--release-muted); }
  :root:not([data-theme="light"]) .btn-cm:hover { background: var(--release-red); color: var(--release-bg); box-shadow: none; }
}

/* Forced colors: pressed, chosen and lit states stay visible in system colors. */
@media (forced-colors: active) {
  .gq-dot { forced-color-adjust: none; border-color: CanvasText; background: Canvas; }
  .gq-dot.is-found { background: CanvasText; }
  .gq-dot.is-found::after { background: Canvas; }
  :root .insert-fr .fr-cell { forced-color-adjust: none; background: Canvas; border: 1px solid CanvasText; box-shadow: none; }
  :root .insert-fr .fr-cell.is-free { background: Highlight; }
  :root .insert-fr .fr-cell.is-free::after { background: HighlightText; }
  :root .insert-fr .fr-cell.is-best { box-shadow: 0 0 0 2px CanvasText; }
  .fr-moods label:has(input:checked) { outline: 3px solid Highlight; }
  .bt-lamp.is-on { forced-color-adjust: none; background: Highlight; }
  .bt-bits i { forced-color-adjust: none; background: GrayText; }
  .bt-bits i.one, .bt-bits i.is-now { background: CanvasText; }
  .colorbar { display: none; }
  .sb-screen { forced-color-adjust: none; }
}

/* ---------- Project responsive rules ---------- */
@media (max-width: 1140px) {
  .fr-demo { grid-template-columns: minmax(0, 1fr) 140px; }
}
@media (max-width: 980px) {
  .dm-grid, .fr-grid, .bt-grid, .sb-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .dm-grid, .fr-grid, .sb-grid { padding: 22px 18px 24px; }
  .sb-grid { gap: 28px; }
  .sb-demo { padding: 12px; border-radius: 18px; }
  .bt-grid { padding: 22px 18px 140px; }
  .insert-gq > * { margin-left: 18px; margin-right: 18px; }
  .cm-release { padding: 20px 18px 22px; }
  .cm-stamp { position: static; display: inline-block; margin: 4px 0 16px; font-size: min(1rem, 5.8cqi); }
  .fr-demo { grid-template-columns: minmax(0, 1fr); }
  .fr-phone { display: none; }
  .fr-best { flex-wrap: wrap; }
  .gq-dot { width: 23px; height: 23px; }
  .gq-dots { gap: 5px; }
  .bt-demos { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 480px) {
  .fr-week { grid-template-columns: minmax(34px, max-content) repeat(7, minmax(0, 1fr)); gap: 3px; }
  .fr-person span:not(.fr-avatar) { display: none; }
  .fr-person.is-you .fr-avatar { display: none; }
  .fr-person.is-you span:not(.fr-avatar) { display: inline; font-size: .75rem; }
}
@media (max-width: 349px) { .gq-row { grid-template-columns: minmax(0, 1fr); } }
@media print {
  .insert { box-shadow: none; border: 1px solid #000; break-inside: avoid; }
  .pullout-tab { break-after: avoid; }
  .insert-dm, .insert-bt { background: #fff !important; color: #000 !important; }
  .insert-dm *, .insert-bt * { color: #000 !important; text-shadow: none !important; }
  .bt-hidden, .bt-stars, .bt-dark::before { display: none; }
  .dm-demo, .fr-demo, .gq-quest, .bt-demos, .sb-demo { display: none !important; }
}