@import url("/fonts/google-sans-code/google-sans-code.css");
:root {
  --brand-lockup-h: clamp(36px, 3.6vw, 68px);
  --brand-title: clamp(0.95rem, 1.7vw, 2rem);
  --brand-meta: clamp(0.6rem, 0.8vw, 0.9375rem);
  --site-shell-top-y: clamp(16px, 2vw, 32px);
  --site-shell-left: max(clamp(10px, 2.3vw, 36px), env(safe-area-inset-left));
  --site-shell-right: max(clamp(10px, 2.3vw, 36px), env(safe-area-inset-right));
  --site-shell-max: 100rem;
  --folder-field: #15110d;
  --folder-edge: rgba(212, 151, 86, .28);
  --folder-edge-passive: rgba(212, 151, 86, .14);
  --folder-breath: clamp(28px, 4vw, 64px);
}
body > .wrap {
  width: 100%;
  padding-top: var(--site-shell-top-y) !important;
  position: relative;
  isolation: isolate;
}
.site-shell-ambient {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
  background: #0a0b0d;
}
.site-shell-aurora {
  position: absolute;
  inset: -24%;
  background:
    radial-gradient(ellipse 58% 42% at 14% 18%, rgba(255, 133, 5, .12), transparent 67%),
    radial-gradient(ellipse 52% 46% at 86% 36%, rgba(184, 95, 29, .095), transparent 69%),
    radial-gradient(ellipse 62% 42% at 42% 88%, rgba(111, 53, 24, .11), transparent 72%),
    radial-gradient(ellipse 38% 30% at 62% 8%, rgba(255, 208, 154, .035), transparent 74%);
  transform: translate3d(0, 0, 0) scale(1);
  animation: site-shell-aurora-drift 44s ease-in-out infinite alternate;
  will-change: transform;
}
.site-shell-bitcoins {
  position: absolute;
  pointer-events: none;
  background-repeat: repeat;
  mix-blend-mode: screen;
  will-change: transform;
}
.site-shell-bitcoins-far {
  inset: -210px;
  background-size: 90px 82px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='82' viewBox='0 0 90 82'%3E%3Ctext x='8' y='14' fill='%23FF8505' fill-opacity='.11' font-family='Helvetica,Arial,sans-serif' font-size='8'%3E%E2%82%BF%3C/text%3E%3Ctext x='57' y='28' fill='%23FFD09A' fill-opacity='.08' font-family='Helvetica,Arial,sans-serif' font-size='6'%3E%E2%82%BF%3C/text%3E%3Ctext x='28' y='58' fill='%23FF8505' fill-opacity='.10' font-family='Helvetica,Arial,sans-serif' font-size='9'%3E%E2%82%BF%3C/text%3E%3Ctext x='76' y='75' fill='%23B85F1D' fill-opacity='.07' font-family='Helvetica,Arial,sans-serif' font-size='7'%3E%E2%82%BF%3C/text%3E%3C/svg%3E");
  animation: site-shell-far-drift 118s linear infinite;
}
.site-shell-bitcoins-near {
  inset: -330px;
  background-size: 145px 130px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='145' height='130' viewBox='0 0 145 130'%3E%3Ctext x='20' y='36' fill='%23FF8505' fill-opacity='.16' font-family='Helvetica,Arial,sans-serif' font-size='12'%3E%E2%82%BF%3C/text%3E%3Ctext x='104' y='60' fill='%23FFD09A' fill-opacity='.12' font-family='Helvetica,Arial,sans-serif' font-size='10'%3E%E2%82%BF%3C/text%3E%3Ctext x='64' y='112' fill='%23B85F1D' fill-opacity='.15' font-family='Helvetica,Arial,sans-serif' font-size='14'%3E%E2%82%BF%3C/text%3E%3C/svg%3E");
  animation: site-shell-near-drift 82s linear infinite;
}
.site-shell-shooting-star {
  position: absolute;
  width: 220px;
  height: 2px;
  opacity: 0;
  color: #FFD09A;
  transform-origin: right center;
  will-change: transform, opacity;
}
.site-shell-shooting-star-halley {
  top: 7vh;
  left: -24vw;
  animation: site-shell-shoot-halley 23s cubic-bezier(.18, .72, .28, 1) -2s infinite;
}
.site-shell-shooting-star-hale-bopp {
  top: 18vh;
  left: 108vw;
  animation: site-shell-shoot-hale-bopp 29s cubic-bezier(.2, .68, .3, 1) -11s infinite;
}
.site-shell-shooting-star-neowise {
  top: 78vh;
  left: -24vw;
  animation: site-shell-shoot-neowise 31s cubic-bezier(.16, .74, .3, 1) -20s infinite;
}
.site-shell-shooting-star::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 14px;
  width: 190px;
  height: 1px;
  transform: translateY(-50%);
  background: linear-gradient(90deg, transparent, rgba(184, 95, 29, .18) 28%, rgba(255, 133, 5, .72) 82%, #FFD09A);
  box-shadow: 0 0 8px rgba(255, 133, 5, .28);
}
.site-shell-shooting-star span {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  font: 500 22px/1 "Google Sans", "Google Sans Text", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  text-shadow: 0 0 9px rgba(255, 133, 5, .85), 0 0 22px rgba(255, 133, 5, .42);
}
@keyframes site-shell-aurora-drift {
  0% { transform: translate3d(-2%, -1%, 0) scale(1); }
  45% { transform: translate3d(3%, 2%, 0) scale(1.035); }
  100% { transform: translate3d(-1%, 4%, 0) scale(1.02); }
}
@keyframes site-shell-far-drift {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-90px, -82px, 0); }
}
@keyframes site-shell-near-drift {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(145px, -130px, 0); }
}
@keyframes site-shell-shoot-halley {
  0%, 2% {
    opacity: 0;
    transform: translate3d(0, 0, 0) rotate(22deg);
  }
  3% {
    opacity: .9;
    transform: translate3d(8vw, 4vh, 0) rotate(22deg);
  }
  10% {
    opacity: .9;
    transform: translate3d(150vw, 68vh, 0) rotate(22deg);
  }
  11.5%, 100% {
    opacity: 0;
    transform: translate3d(154vw, 70vh, 0) rotate(22deg);
  }
}
@keyframes site-shell-shoot-hale-bopp {
  0%, 2% {
    opacity: 0;
    transform: translate3d(0, 0, 0) rotate(158deg);
  }
  3% {
    opacity: .82;
    transform: translate3d(-8vw, 3vh, 0) rotate(158deg);
  }
  9% {
    opacity: .82;
    transform: translate3d(-142vw, 42vh, 0) rotate(158deg);
  }
  10.5%, 100% {
    opacity: 0;
    transform: translate3d(-148vw, 44vh, 0) rotate(158deg);
  }
}
@keyframes site-shell-shoot-neowise {
  0%, 2% {
    opacity: 0;
    transform: translate3d(0, 0, 0) rotate(-24deg);
  }
  3% {
    opacity: .86;
    transform: translate3d(7vw, -3vh, 0) rotate(-24deg);
  }
  9.5% {
    opacity: .86;
    transform: translate3d(148vw, -64vh, 0) rotate(-24deg);
  }
  11%, 100% {
    opacity: 0;
    transform: translate3d(153vw, -67vh, 0) rotate(-24deg);
  }
}
.site-shell-top {
  position: relative; left: 50%; transform: translateX(-50%);
  width: min(calc(100vw - var(--site-shell-left) - var(--site-shell-right)), var(--site-shell-max));
  max-width: none; min-width: 0; padding-bottom: var(--folder-breath);
}
.site-shell-header {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 12px 20px; min-width: 0;
}
.site-shell-brand {
  display: flex; align-items: center; gap: clamp(8px, 1vw, 16px);
  min-width: 0; flex: 1 1 24rem;
}
.site-shell-portrait-link {
  flex: 0 0 auto;
  display: block;
  line-height: 0;
  text-decoration: none;
  border-radius: 2px;
  outline: none;
  cursor: pointer;
}
.site-shell-portrait-link:hover .site-shell-portrait,
.site-shell-portrait-link:focus-visible .site-shell-portrait {
  box-shadow: 0 0 0 1px rgba(255,133,5,.55), 0 0 14px rgba(255,133,5,.22);
}
.site-shell-portrait-link:focus-visible {
  outline: 2px solid rgba(255,133,5,.72);
  outline-offset: 3px;
}
.site-shell-portrait {
  width: var(--brand-lockup-h); height: var(--brand-lockup-h); flex: 0 0 auto;
  display: block; border: 0; border-radius: 0; background: transparent;
  object-fit: cover; image-rendering: pixelated; image-rendering: crisp-edges;
  transition: box-shadow .16s ease;
}
.site-shell-copy {
  display: flex; flex-direction: column; justify-content: space-between;
  height: var(--brand-lockup-h); min-width: 0; flex: 1 1 auto;
}
.site-shell-title {
  display: flex; flex-wrap: nowrap; align-items: baseline; gap: clamp(6px, .8vw, 12px);
  min-width: 0; white-space: nowrap; font-family: "Google Sans", "Google Sans Text", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: var(--brand-title); font-weight: 500; line-height: 1.05; letter-spacing: -.015em;
}
.site-shell-title a {
  /* Lowercase host form matches the address bar (Star 2026-07-28). */
  color: var(--gold, #FF8505); font-family: "Google Sans Code", ui-monospace, "SF Mono", Menlo, monospace;
  font-size: inherit; font-weight: 600; letter-spacing: .06em; text-decoration: none;
  text-transform: none;
}
.site-shell-copy p {
  margin: 0; max-width: 44rem; color: var(--dim, rgba(255,255,255,.38));
  font: 400 var(--brand-meta)/1.05 "Google Sans", "Google Sans Text", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
.site-shell-copy p em { color: rgba(255,220,180,.58); font-style: normal; font-weight: 500; }
.site-shell-header .support-btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 36px;
  margin-left: auto; padding: 0 14px 0 12px; gap: 6px; flex: 0 0 auto;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px; background: rgba(0,0,0,.25); color: rgba(255,255,255,.55);
  cursor: pointer; text-decoration: none;
}
.site-shell-header .support-btn { color: var(--gold, #FF8505); }
.site-shell-header .support-btn:hover,
.site-shell-header .support-btn:focus-visible { color: #ffb45a; border-color: rgba(255,133,5,.75); }
.site-shell-header .support-btc { font: 600 16px/1 "Google Sans", "Google Sans Text", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
.site-shell-header .support-label { font: 600 11px/1 "Google Sans Code", ui-monospace, Menlo, monospace; letter-spacing: .06em; }
/* Folder rail — multi-row when the house has many rooms (Star 2026-07-29).
   Real file folders stack tab rows; we wrap instead of clipping or force-scroll.
   Bottom edge of the nav is still the single folder body join. */
.site-shell-tabs {
  position: relative; display: flex; flex-wrap: wrap; align-items: flex-end;
  align-content: flex-end; justify-content: flex-start;
  box-sizing: border-box;
  column-gap: clamp(3px, .5vw, 7px);
  row-gap: 6px;
  height: auto; min-height: 50px;
  margin-top: clamp(14px, 2vw, 22px);
  padding: 12px clamp(3px, .5vw, 8px) 0;
  border-bottom: 1px solid var(--folder-edge);
  overflow: visible;
}
.site-shell-tabs a {
  position: relative; z-index: 0; display: inline-flex; align-items: center; justify-content: center;
  box-sizing: border-box; flex: 0 0 clamp(6rem, 9vw, 7.2rem); width: clamp(6rem, 9vw, 7.2rem);
  height: 38px; margin: 0; padding: 0 4px;
  border: 1px solid var(--folder-edge-passive); border-bottom: 0; border-radius: 9px 9px 0 0;
  background:
    linear-gradient(180deg, rgba(255, 194, 119, .025), transparent 60%),
    rgba(18, 15, 12, .72);
  color: rgba(255,255,255,.46); font: 600 12px/1 "Google Sans Code", ui-monospace, "SF Mono", Menlo, monospace;
  letter-spacing: .12em; text-decoration: none; text-transform: uppercase;
  white-space: nowrap;
  transform: scale(.985, .96); transform-origin: center bottom;
  box-shadow:
    inset 0 1px 0 rgba(255, 210, 155, .025),
    inset 0 5px 10px rgba(0, 0, 0, .2);
  transition:
    transform .18s cubic-bezier(.22, 1, .36, 1),
    color .16s ease, border-color .16s ease, box-shadow .18s ease;
}
.site-shell-tabs a:hover { color: rgba(255,255,255,.76); }

/* Phone / narrow: still wrap into rows (not a sideways clip). Labels stay whole.
   Slightly denser packing so two rows fit without feeling like a menu. */
@media (max-width: 719px) {
  .site-shell-tabs {
    height: auto; min-height: 46px; padding-top: 8px;
    row-gap: 5px; column-gap: 4px;
    margin-inline: 0;
    padding-inline: 0;
    overflow: visible;
  }
  .site-shell-tabs a {
    flex: 1 1 calc(33.333% - 4px);
    width: auto; min-width: 5.2rem; max-width: 100%;
    padding: 0 8px;
    font-size: clamp(9px, 2.8vw, 11px);
    letter-spacing: .08em;
  }
}
.site-shell-tabs a:focus-visible {
  outline: 2px solid rgba(255, 133, 5, .78);
  outline-offset: -3px;
}
.site-shell-tabs a.is-on {
  z-index: 1; color: var(--gold, #FF8505);
  border-color: var(--folder-edge);
  background:
    linear-gradient(180deg, rgba(255, 194, 119, .07), transparent 55%),
    var(--folder-field);
  transform: scale(1.025, 1.04);
  box-shadow:
    0 -6px 14px rgba(0, 0, 0, .5),
    0 -3px 12px rgba(255, 133, 5, .11),
    inset 0 1px 0 rgba(255, 220, 175, .09);
}
.site-shell-tabs a:active { transform: scale(.975, .95); }
.site-shell-tabs a.is-on:active { transform: scale(1.015, 1.025); }
.site-shell-tabs a.is-on::after {
  content: ""; position: absolute; z-index: 2; left: 0; right: 0; bottom: -1px; height: 1px;
  background: var(--folder-field);
}
footer.site-shell-footer {
  position: relative; left: 50%; transform: translateX(-50%);
  width: min(calc(100vw - var(--site-shell-left) - var(--site-shell-right)), var(--site-shell-max));
  max-width: none; margin: clamp(2.5rem, 6vw, 5rem) 0 0;
  padding: clamp(1.5rem, 3.5vw, 2.5rem) 0 clamp(12px, 2vw, 24px);
  border-top: 1px solid rgba(212,151,86,.24);
  display: grid;
  grid-template-columns: minmax(0, 1.8fr) minmax(11rem, .75fr) minmax(8rem, .45fr);
  align-items: stretch; gap: 0; text-align: left;
  background: linear-gradient(180deg, rgba(255,133,5,.018), transparent 70%);
}

.site-shell-footer .footer-unit {
  min-width: 0; margin: 0; padding: 0 clamp(18px, 2.4vw, 38px);
}
.site-shell-footer .footer-unit:first-child { padding-left: 0; }
.site-shell-footer .footer-unit:last-child { padding-right: 0; }
.site-shell-footer .footer-unit + .footer-unit { border-left: 1px solid rgba(255,255,255,.08); }
.site-shell-footer .footer-label {
  display: block; margin: 0 0 12px; color: rgba(255,183,99,.58);
  font: 700 10px/1 "Google Sans Code", ui-monospace, "SF Mono", Menlo, monospace;
  letter-spacing: .14em; text-transform: uppercase;
}
.site-shell-footer h2.footer-label { padding: 0; border: 0; }
.site-shell-footer .disclaimer {
  max-width: none; margin: 0; color: rgba(255,255,255,.46);
  font: 400 12px/1.65 "Google Sans", "Google Sans Text", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  text-wrap: pretty;
}
.site-shell-footer .disclaimer strong { color: rgba(255,220,180,.68); font-weight: 600; }
.site-shell-footer .footer-links {
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
}
.site-shell-footer .footer-links a,
.site-shell-footer .footer-links a:link,
.site-shell-footer .footer-links a:visited,
.site-shell-footer .footer-links a:active {
  margin: 0; color: rgba(255,255,255,.5); text-decoration: none;
  font: 600 11px/1.35 "Google Sans Code", ui-monospace, "SF Mono", Menlo, monospace;
  letter-spacing: .035em; text-transform: none;
}
.site-shell-footer .footer-links a:hover,
.site-shell-footer .footer-links a:focus-visible { color: #FF8505; opacity: 1; }
.site-shell-footer .footer-links a:focus-visible {
  outline: 2px solid rgba(255,133,5,.72); outline-offset: 3px;
}
@media (min-width: 600px) and (max-width: 899px) {
  footer.site-shell-footer { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .site-shell-footer .footer-disclaimer {
    grid-column: 1 / -1; padding: 0 0 clamp(20px, 3vw, 28px);
    border-bottom: 1px solid rgba(255,255,255,.08);
  }
  .site-shell-footer .footer-roots { padding: clamp(20px, 3vw, 28px) clamp(18px, 3vw, 32px) 0 0; }
  .site-shell-footer .footer-legal { padding: clamp(20px, 3vw, 28px) 0 0 clamp(18px, 3vw, 32px); }
  .site-shell-footer .footer-roots + .footer-legal { border-left: 1px solid rgba(255,255,255,.08); }
}
@media (max-width: 599px) {
  footer.site-shell-footer { display: block; }
  .site-shell-footer .footer-unit { padding: 18px 0; border-left: 0; }
  .site-shell-footer .footer-unit:first-child { padding-top: 0; }
  .site-shell-footer .footer-unit:last-child { padding-bottom: 0; }
  .site-shell-footer .footer-unit + .footer-unit {
    border-top: 1px solid rgba(255,255,255,.08); border-left: 0;
  }
  .site-shell-footer .footer-label { margin-bottom: 10px; }
  .site-shell-footer .footer-links { gap: 9px; }
}

/* Report a bug — footer control + centered dialog (Star 2026-07-28).
   Convenience only: working controls, no a11y workstream. */
.site-shell-footer .footer-bug {
  display: inline; margin: 0; padding: 0; border: 0; background: none;
  color: rgba(255,255,255,.5); cursor: pointer; text-align: left;
  font: 600 11px/1.35 "Google Sans Code", ui-monospace, "SF Mono", Menlo, monospace;
  letter-spacing: .035em;
}
.site-shell-footer .footer-bug:hover,
.site-shell-footer .footer-bug:focus-visible { color: #FF8505; }
/* Center on viewport — native <dialog> defaults top-left without this. */
.bug-dialog {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  border: 1px solid rgba(212,151,86,.32);
  border-radius: 14px;
  padding: 0;
  max-width: min(30rem, calc(100vw - 28px));
  width: 100%;
  max-height: min(92vh, 40rem);
  overflow: auto;
  background: #12100d;
  color: rgba(255,255,255,.88);
  box-shadow: 0 24px 60px rgba(0,0,0,.55);
}
.bug-dialog::backdrop { background: rgba(0,0,0,.55); }
.bug-panel { margin: 0; padding: 18px 18px 16px; position: relative; }
.bug-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 10px;
}
.bug-title {
  margin: 0; font: 600 15px/1.2 "Google Sans", "Google Sans Text", system-ui, sans-serif;
  letter-spacing: -.01em; color: #fff;
}
.bug-close {
  border: 0; background: transparent; color: rgba(255,255,255,.45);
  font: 600 11px/1 "Google Sans Code", ui-monospace, Menlo, monospace;
  cursor: pointer; padding: 4px 2px;
}
.bug-close:hover { color: #FF8505; }
.bug-lead {
  margin: 0 0 8px; color: rgba(255,255,255,.52);
  font: 400 12.5px/1.45 "Google Sans", "Google Sans Text", system-ui, sans-serif;
}
.bug-label {
  display: block; margin: 0 0 6px; color: rgba(255,183,99,.62);
  font: 700 10px/1 "Google Sans Code", ui-monospace, Menlo, monospace;
  letter-spacing: .12em; text-transform: uppercase;
}
.bug-note {
  display: block; width: 100%; box-sizing: border-box;
  min-height: 4.5rem; margin: 0 0 12px; padding: 10px 11px;
  border: 1px solid rgba(255,255,255,.12); border-radius: 10px;
  background: rgba(0,0,0,.35); color: #f2f2f2; resize: vertical;
  font: 400 13px/1.45 "Google Sans", "Google Sans Text", system-ui, sans-serif;
}
.bug-note:focus { outline: 1px solid rgba(255,133,5,.55); border-color: rgba(255,133,5,.45); }
.bug-env {
  margin: 0 0 14px; padding: 10px 12px; border-radius: 10px;
  background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.08);
  max-height: 11rem; overflow: auto;
}
/* Feature ideas: note only — no browser environment card */
.bug-dialog[data-kind="idea"] .bug-env,
.bug-env[hidden] {
  display: none !important;
}
.bug-dialog[data-kind="idea"] .bug-lead { margin-bottom: 12px; }
.bug-env-row {
  display: grid; grid-template-columns: 6.5rem minmax(0, 1fr);
  gap: 4px 10px; padding: 3px 0;
  border-bottom: 1px solid rgba(255,255,255,.04);
}
.bug-env-row:last-child { border-bottom: 0; }
.bug-env-k {
  color: rgba(255,183,99,.55);
  font: 600 10px/1.4 "Google Sans Code", ui-monospace, Menlo, monospace;
  letter-spacing: .04em; text-transform: uppercase;
}
.bug-env-v {
  color: rgba(255,255,255,.72);
  font: 500 11.5px/1.4 "Google Sans Code", ui-monospace, Menlo, monospace;
  word-break: break-word;
}
.bug-shot-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px;
  margin: 0 0 14px;
}
.bug-shot-btn {
  display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px;
  border: 1px solid rgba(255,255,255,.14); border-radius: 999px;
  background: rgba(0,0,0,.25); color: rgba(255,255,255,.62);
  font: 600 11px/1 "Google Sans Code", ui-monospace, Menlo, monospace;
  letter-spacing: .04em; cursor: pointer;
}
.bug-shot-btn:hover { color: #FF8505; border-color: rgba(255,133,5,.5); }
.bug-shot-status { color: rgba(255,255,255,.38); font: 500 11px/1.3 "Google Sans Code", ui-monospace, Menlo, monospace; }
.bug-shot-clear {
  border: 0; background: none; color: rgba(255,255,255,.4); cursor: pointer;
  font: 600 11px/1 "Google Sans Code", ui-monospace, Menlo, monospace;
}
.bug-shot-clear:hover { color: #FF8505; }
.bug-hp {
  position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0;
  pointer-events: none;
}
.bug-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.bug-submit {
  display: inline-flex; align-items: center; min-height: 36px; padding: 0 16px;
  border: 1px solid rgba(255,133,5,.55); border-radius: 999px;
  background: rgba(255,133,5,.12); color: #FF8505; cursor: pointer;
  font: 600 12px/1 "Google Sans", "Google Sans Text", system-ui, sans-serif;
}
.bug-submit:hover:not(:disabled) { background: rgba(255,133,5,.2); border-color: #FF8505; }
.bug-submit:disabled { opacity: .5; cursor: default; }
.bug-status {
  color: rgba(255,255,255,.5);
  font: 500 12px/1.35 "Google Sans", "Google Sans Text", system-ui, sans-serif;
}
.bug-status.is-ok { color: rgba(180, 220, 160, .85); }
.bug-status.is-err { color: rgba(255, 160, 140, .9); }

/* Thank-you: scroll unrolls, gold confetti rains (same spirit as fresh-block confetti). */
.bug-thanks {
  position: relative;
  min-height: 12rem;
  padding: 8px 4px 4px;
  overflow: hidden;
}
.bug-thanks-scroll {
  position: relative;
  margin: 0 auto;
  padding: 28px 22px 22px;
  max-width: 22rem;
  text-align: center;
  border: 1px solid rgba(212,151,86,.42);
  border-radius: 4px 4px 12px 12px;
  background:
    linear-gradient(180deg, rgba(255,194,119,.12), transparent 28%),
    linear-gradient(165deg, #1a1410, #0e0c0a 70%);
  box-shadow:
    0 0 0 1px rgba(255,133,5,.08),
    0 18px 40px rgba(0,0,0,.45);
  transform-origin: top center;
  animation: bug-scroll-unroll .72s cubic-bezier(.22, 1, .36, 1) both;
}
.bug-thanks-scroll::before {
  content: "";
  position: absolute; left: 8%; right: 8%; top: 0; height: 5px;
  border-radius: 0 0 6px 6px;
  background: linear-gradient(90deg, #b85f1d, #ff8505 40%, #ffd09a 50%, #ff8505 60%, #b85f1d);
  box-shadow: 0 2px 10px rgba(255,133,5,.35);
}
.bug-thanks-kicker {
  margin: 0 0 6px; color: rgba(255,183,99,.7);
  font: 700 10px/1 "Google Sans Code", ui-monospace, Menlo, monospace;
  letter-spacing: .14em; text-transform: uppercase;
}
.bug-thanks-title {
  margin: 0 0 10px; color: #fff;
  font: 600 1.55rem/1.15 "Google Sans", "Google Sans Text", system-ui, sans-serif;
  letter-spacing: -.02em;
}
.bug-thanks-body {
  margin: 0 0 18px; color: rgba(255,255,255,.58);
  font: 400 13px/1.5 "Google Sans", "Google Sans Text", system-ui, sans-serif;
}
.bug-thanks-done {
  display: inline-flex; align-items: center; min-height: 36px; padding: 0 18px;
  border: 1px solid rgba(255,133,5,.55); border-radius: 999px;
  background: rgba(255,133,5,.14); color: #FF8505; cursor: pointer;
  font: 600 12px/1 "Google Sans", "Google Sans Text", system-ui, sans-serif;
}
.bug-thanks-done:hover { background: rgba(255,133,5,.22); border-color: #FF8505; }
.bug-thanks-confetti {
  position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 0;
}
.bug-thanks-confetti i {
  position: absolute; top: -14%; width: 5px; height: 8px; border-radius: 1px;
  opacity: 0; animation: bug-confetti-fall linear infinite;
  background: #FF8505;
}
.bug-thanks-kicker,
.bug-thanks-title,
.bug-thanks-body,
.bug-thanks-done { position: relative; z-index: 1; }
@keyframes bug-scroll-unroll {
  0% { transform: scaleY(.06) translateY(-8px); opacity: 0; filter: brightness(1.2); }
  55% { opacity: 1; }
  100% { transform: scaleY(1) translateY(0); opacity: 1; filter: brightness(1); }
}
@keyframes bug-confetti-fall {
  0% { transform: translateY(-16px) rotate(0deg); opacity: 0; }
  12% { opacity: .9; }
  100% { transform: translateY(220px) rotate(320deg); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .bug-thanks-scroll { animation: none; }
  .bug-thanks-confetti { display: none; }
}
body:not([data-view]) main,
body:not([data-view]) .why,
body:not([data-view]) #grid {
  opacity: .9; transform: translateY(4px);
  transition: opacity .38s cubic-bezier(.22,1,.36,1), transform .38s cubic-bezier(.22,1,.36,1);
}
body.is-ready:not([data-view]) main,
body.is-ready:not([data-view]) .why,
body.is-ready:not([data-view]) #grid { opacity: 1; transform: translateY(0); }
@media (max-width: 639px) {
  .site-shell-bitcoins-far { background-size: 82px 76px; }
  .site-shell-bitcoins-near { background-size: 132px 118px; }
  .site-shell-shooting-star { width: 170px; }
  .site-shell-shooting-star::before { width: 145px; }
  .site-shell-shooting-star span { font-size: 19px; }
  .site-shell-header { align-items: stretch; }
  .site-shell-brand { flex-basis: 100%; }
  .site-shell-header .support-btn { min-height: 44px; }
  .site-shell-tabs { column-gap: 3px; row-gap: 4px; }
  .site-shell-tabs a {
    flex: 1 1 calc(33.333% - 3px); width: auto; min-width: 4.8rem;
    padding-inline: 4px;
    font-size: clamp(8px, 2.6vw, 10px); letter-spacing: .055em;
  }
}
@media (prefers-reduced-motion: reduce) {
  .site-shell-aurora,
  .site-shell-bitcoins { animation: none; }
  .site-shell-shooting-star { display: none; }
  .site-shell-tabs a { transition: none; }
  body:not([data-view]) main,
  body:not([data-view]) .why,
  body:not([data-view]) #grid,
  body.is-ready:not([data-view]) main,
  body.is-ready:not([data-view]) .why,
  body.is-ready:not([data-view]) #grid { opacity: 1; transform: none; transition: none; }
}
@media print {
  .site-shell-ambient { display: none; }
}


/* Blown-open severity is graded: an ember for barely-over, full red for a document. */
.legend-row .swatch.blown-small { background: rgb(150, 95, 70); margin-right: 2px; }

/* Block-explorer layer switches - the house segmented control, same as the
   memes media toggle: one pill, void-on-gold when active, ABOVE the image. */
.film-seg {
  display: inline-flex; align-items: center; gap: 2px; height: 30px; box-sizing: border-box;
  padding: 3px; border: 1px solid var(--line, rgba(255,133,5,.22)); border-radius: 7px; background: #111;
}
.film-seg .seg-btn {
  display: grid; place-items: center; height: 100%; padding: 0 10px; border: 0; background: none;
  border-radius: 4px; color: var(--dim, rgba(255,255,255,.45)); cursor: pointer;
  font: 500 11px/1 "Google Sans Code", ui-monospace, Menlo, monospace; letter-spacing: .02em; white-space: nowrap;
  transition: color .15s, background .15s;
}
.film-seg .seg-btn:hover:not(.on) { color: var(--gold, #FF8505); }
.film-seg .seg-btn.on { color: var(--void, #0a0b0d); background: var(--gold, #FF8505); font-weight: 600; }
/* Each switch wears the colour of the thing it governs: gold is BIP-110's
   signal, red is the overflow past the former 83-byte default (Star,
   2026-07-26 - gold on the OP_RETURN pill read like approval). */
.film-seg #layer-junk:hover:not(.on) { color: rgb(255,90,60); }
.film-seg #layer-junk.on { background: rgb(226, 62, 30); color: #0a0b0d; }
.film-seg .seg-btn:focus-visible { outline: 2px solid rgba(255,133,5,.8); outline-offset: 2px; }
.legend-note { color: rgba(255,255,255,.34); font-size: 11px; }
@media (max-width: 639px) { .legend-note { display: none; } }

/* One POV caption, left-aligned under the title (Star 2026-07-26). */
.card-title.peer-pov { text-transform: none; letter-spacing: .02em; font-size: 12px; }
.peer-pov .peer-pov-where { display: none; }

/* One condensed room chip: "1,852 visitors, 46 reading now" (Star 2026-07-28).
   Life sign: one Stick-Fighter scale walker in house gold — height of a numeral. */
.presence-chip {
  position: fixed; bottom: 14px; left: 14px; z-index: 60;
  display: inline-flex; align-items: center; gap: 0.4em;
  max-width: calc(100vw - 28px);
  padding: 6px 11px;
  border: 1px solid rgba(255,133,5,.28); border-radius: 999px;
  background: rgba(12,12,14,.86); backdrop-filter: blur(6px);
  color: rgba(207,195,180,.88);
  font: 600 11px/1.2 "Google Sans Code", ui-monospace, Menlo, monospace;
  letter-spacing: .02em;
  box-shadow: 0 6px 20px rgba(0,0,0,.4);
  pointer-events: none; user-select: none;
  white-space: nowrap;
}
.presence-chip .pc-part {
  display: inline-flex; align-items: center; gap: 0.32em;
}
.presence-chip b {
  font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: .01em;
}
.presence-chip .pc-visits { color: var(--gold, #FF8505); }
.presence-chip .pc-now { color: rgba(255, 220, 180, .9); }
.presence-chip .pc-lab { color: rgba(207,195,180,.72); font-weight: 600; }
.presence-chip .pc-sep { color: rgba(207,195,180,.45); font-weight: 500; flex: 0 0 auto; }
.presence-chip.is-unmeasured .pc-now { color: rgba(255,255,255,.35); }

/* Stick man — same orange as visitors; em-box height of the mono numeral. */
.presence-chip .pc-stick {
  display: block;
  width: 0.68em;
  height: 1.1em;
  color: var(--gold, #FF8505);
  flex: 0 0 auto;
  overflow: visible;
  filter: drop-shadow(0 0 3px rgba(255,133,5,.35));
}
.presence-chip .pc-stick-body {
  transform-origin: 3.5px 7px;
  animation: pc-walk-bob 0.48s ease-in-out infinite;
}
.presence-chip .pc-stick-arm-l {
  transform-origin: 3.5px 4.2px;
  animation: pc-walk-arm-l 0.48s ease-in-out infinite;
}
.presence-chip .pc-stick-arm-r {
  transform-origin: 3.5px 4.2px;
  animation: pc-walk-arm-r 0.48s ease-in-out infinite;
}
.presence-chip .pc-stick-leg-l {
  transform-origin: 3.5px 7px;
  animation: pc-walk-leg-l 0.48s ease-in-out infinite;
}
.presence-chip .pc-stick-leg-r {
  transform-origin: 3.5px 7px;
  animation: pc-walk-leg-r 0.48s ease-in-out infinite;
}
/* Busier room → slightly snappier gait */
.presence-chip.is-busy .pc-stick-body,
.presence-chip.is-busy .pc-stick-arm-l,
.presence-chip.is-busy .pc-stick-arm-r,
.presence-chip.is-busy .pc-stick-leg-l,
.presence-chip.is-busy .pc-stick-leg-r {
  animation-duration: 0.34s;
}
@keyframes pc-walk-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-0.45px); }
}
@keyframes pc-walk-arm-l {
  0%, 100% { transform: rotate(18deg); }
  50% { transform: rotate(-22deg); }
}
@keyframes pc-walk-arm-r {
  0%, 100% { transform: rotate(-18deg); }
  50% { transform: rotate(22deg); }
}
@keyframes pc-walk-leg-l {
  0%, 100% { transform: rotate(-20deg); }
  50% { transform: rotate(18deg); }
}
@keyframes pc-walk-leg-r {
  0%, 100% { transform: rotate(20deg); }
  50% { transform: rotate(-18deg); }
}

/* Soft life when the total climbs or someone arrives */
.presence-chip.is-tick { animation: pc-tick .65s ease; }
@keyframes pc-tick {
  0% { transform: scale(1); }
  30% {
    transform: scale(1.045);
    box-shadow: 0 0 0 5px rgba(255,133,5,.12), 0 6px 20px rgba(0,0,0,.4);
  }
  100% { transform: scale(1); }
}
@media (max-width: 639px) {
  .presence-chip { bottom: 10px; left: 10px; padding: 5px 9px; font-size: 10px; gap: 0.32em; }
  .presence-chip .pc-part { gap: 0.28em; }
}
@media (prefers-reduced-motion: reduce) {
  .presence-chip .pc-stick-body,
  .presence-chip .pc-stick-arm-l,
  .presence-chip .pc-stick-arm-r,
  .presence-chip .pc-stick-leg-l,
  .presence-chip .pc-stick-leg-r { animation: none; }
  .presence-chip.is-tick { animation: none; }
}
/* Retired dual-pill / footer traffic layouts */
.presence-rail,
.visits-pill,
.presence-pill,
.footer-traffic { display: none !important; }

/* Ultrawide: the node room reads as two columns (Star, 2026-07-26). The globe
   keeps its own full-bleed row; the reading panels pair up beside it. */
@media (min-width: 1600px) {
  body[data-view="node"] .wrap {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(16px, 1.2vw, 26px); align-items: start;
  }
  body[data-view="node"] .wrap > .site-shell-top,
  body[data-view="node"] .wrap > .site-shell-footer,
  body[data-view="node"] .wrap > .node-intro,
  body[data-view="node"] .wrap > .card:has(.world-box) { grid-column: 1 / -1; }
}

/* MP3 player - a warm, glassy, vibey retro deck pinned into the header top-right,
   aligned with the brand row / Support action (Star 2026-07-27). Frosted glass,
   soft amber glow, a smooth little spectrum that dances from the center while it
   plays, round glowing controls. */
.walkman {
  display: flex; align-items: center; gap: 8px; padding: 6px 8px;
  border-radius: 11px; border: 1px solid rgba(255,175,85,.26);
  background: linear-gradient(155deg, rgba(46,36,24,.72), rgba(20,15,10,.82));
  -webkit-backdrop-filter: blur(9px) saturate(1.1); backdrop-filter: blur(9px) saturate(1.1);
  box-shadow: 0 6px 22px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,225,180,.16), 0 0 0 .5px rgba(255,180,90,.12);
  user-select: none; transition: box-shadow .4s ease;
}
.walkman.spinning { box-shadow: 0 6px 26px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,225,180,.2), 0 0 18px rgba(255,133,5,.24); }
.site-shell-header .walkman { margin-left: auto; }
.site-shell-header .walkman + .support-btn { margin-left: 10px; }
/* smoked-amber glass readout */
.wm-screen {
  display: flex; align-items: center; gap: 8px; padding: 4px 9px; height: 24px; border-radius: 7px;
  background: radial-gradient(130% 120% at 50% -10%, rgba(80,52,24,.55), rgba(10,9,6,.9));
  box-shadow: inset 0 1px 3px rgba(0,0,0,.6), inset 0 0 0 1px rgba(255,180,90,.08);
}
/* a smooth little spectrum - pulses from the center while playing */
.wm-eq { display: flex; align-items: center; gap: 2.5px; height: 14px; }
.wm-eq i {
  width: 2.5px; height: 3px; border-radius: 2px; display: block; opacity: .85;
  background: linear-gradient(#ffd08a, var(--gold, #FF8505));
  box-shadow: 0 0 5px rgba(255,150,40,.6);
}
.walkman.spinning .wm-eq i { animation: wm-eq 1.1s ease-in-out infinite; }
.walkman.spinning .wm-eq i:nth-child(1) { animation-duration: .92s; }
.walkman.spinning .wm-eq i:nth-child(2) { animation-duration: 1.28s; animation-delay: .12s; }
.walkman.spinning .wm-eq i:nth-child(3) { animation-duration: .74s;  animation-delay: .05s; }
.walkman.spinning .wm-eq i:nth-child(4) { animation-duration: 1.12s; animation-delay: .18s; }
.walkman.spinning .wm-eq i:nth-child(5) { animation-duration: .86s;  animation-delay: .08s; }
.walkman.spinning .wm-eq i:nth-child(6) { animation-duration: 1.0s;  animation-delay: .22s; }
@keyframes wm-eq { 0%, 100% { height: 3px; opacity: .55; } 50% { height: 14px; opacity: 1; } }
.wm-label {
  min-width: 54px; max-width: 176px; text-align: left;
  overflow: hidden; white-space: nowrap;
  font: 600 9px/1 "Google Sans Code", ui-monospace, Menlo, monospace; letter-spacing: .13em;
  text-transform: uppercase; color: #ffcf95; text-shadow: 0 0 6px rgba(255,150,40,.5);
}
/* long titles scroll like an MP3 player: to the end, hold, back, hold */
.wm-label .wm-txt { display: inline-block; will-change: transform; }
/* the Bitcoin sign, emphasized so it reads as ₿ and not a plain B at 9px */
.wm-label .wm-btc { font-family: "Helvetica Neue", Arial, system-ui, sans-serif; font-size: 1.5em; font-weight: 700; letter-spacing: 0; text-transform: none; }
.wm-label.scroll .wm-txt { animation: wm-marquee var(--wm-dur, 7s) ease-in-out infinite alternate; }
@keyframes wm-marquee { 0%, 18% { transform: translateX(0); } 82%, 100% { transform: translateX(var(--wm-shift, 0)); } }
@media (prefers-reduced-motion: reduce) { .wm-label.scroll .wm-txt { animation: none; } }
.wm-ctrl { display: flex; gap: 5px; }
.wm-btn {
  width: 25px; height: 25px; display: grid; place-items: center; border: 0; border-radius: 999px;
  background: rgba(255,255,255,.06); color: #f0e2cd; cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(255,190,110,.18);
  transition: transform .12s ease, background .16s, color .16s, box-shadow .16s;
}
.wm-btn:hover { background: rgba(255,133,5,.9); color: #17110a; box-shadow: 0 0 12px rgba(255,133,5,.5); }
.wm-btn:active { transform: scale(.92); }
.wm-btn svg { width: 13px; height: 13px; fill: currentColor; }
/* armed = playing but muted: the "turn on sound" button glows gold and breathes, inviting the click */
.walkman.armed .wm-play { background: rgba(255,133,5,.92); color: #17110a; animation: wm-armed 1.9s ease-in-out infinite; }
@keyframes wm-armed { 0%, 100% { box-shadow: 0 0 0 0 rgba(255,133,5,.5); } 50% { box-shadow: 0 0 16px 2px rgba(255,133,5,.8); } }
@media (prefers-reduced-motion: reduce) { .walkman.armed .wm-play { animation: none; } }
@media (max-width: 560px) { .walkman { transform: scale(.92); transform-origin: center right; } }

/* The film states the consequence and hands the reader to the evidence room. */
.carry-stat { display: inline-flex; gap: 6px; align-items: baseline; margin-left: auto;
  color: rgba(255,255,255,.5); font-size: 11px; text-decoration: none; }
.carry-stat b { color: rgb(255, 120, 90); font-weight: 700; }
.carry-stat .carry-go { color: var(--gold, #FF8505); }
.carry-stat:hover { color: rgba(255,255,255,.75); }
@media (max-width: 900px) { .carry-stat { margin-left: 0; } }

/* Presence you can feel: one dot per person here now, each breathing on its own
   phase; the first dot is you (Star, 2026-07-27). */
.presence-pill .pp-dots { display: inline-flex; align-items: center; gap: 3px; margin-right: 7px; }
.presence-pill .pp-dots i {
  width: 5px; height: 5px; border-radius: 50%; display: block;
  background: rgba(255, 133, 5, .55); box-shadow: 0 0 6px rgba(255, 133, 5, .5);
  animation: pp-breathe 3.2s ease-in-out infinite;
}
.presence-pill .pp-dots i.is-you { background: #fff; box-shadow: 0 0 8px rgba(255,255,255,.8); }
.presence-pill .pp-dots[data-more]::after {
  content: attr(data-more); margin-left: 3px; color: rgba(255,255,255,.4);
  font: 600 9px/1 ui-monospace, Menlo, monospace;
}
@keyframes pp-breathe {
  0%, 100% { opacity: .45; transform: scale(1); }
  45%      { opacity: 1;   transform: scale(1.3); }
}
@media (prefers-reduced-motion: reduce) { .presence-pill .pp-dots i { animation: none; opacity: .9; } }

/* Unmeasured presence: no number is claimed, and only your own dot shows. */
.presence-pill.is-unmeasured .pp-n { display: none; }
.presence-pill.is-unmeasured .pp-dots i:not(.is-you) { display: none; }

/* ── Expand / collapse caret (sitewide law — Star 2026-07-28) ───────────────
   NN/g accordion research: caret/chevron is the clear in-place show/hide signifier.
   Plus/minus is ambiguous (math, zoom, add/remove). Arrows read as navigation.
   Law: collapsed → chevron points DOWN (more content below); expanded → UP.
   Prefer rotating one down-chevron 180° when open. Use these classes everywhere
   a control reveals or hides content in place (WIP banner, details/summary,
   any future accordion). Do not invent a second icon language. */
.house-caret,
.wip-x .wip-chev {
  width: 14px;
  height: 14px;
  display: block;
  flex: 0 0 auto;
  pointer-events: none;
}
/* CSS-only caret for <details> summaries and similar (mask paints currentColor) */
.house-disclosure > summary {
  list-style: none;
  cursor: pointer;
}
.house-disclosure > summary::-webkit-details-marker { display: none; }
.house-disclosure > summary::after {
  content: "";
  display: inline-block;
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  margin-left: 6px;
  vertical-align: middle;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M7.41 8.59 12 13.17l4.59-4.58L18 10l-6 6-6-6z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M7.41 8.59 12 13.17l4.59-4.58L18 10l-6 6-6-6z'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform 0.15s ease;
  transform: rotate(0deg); /* down = expand */
  opacity: 0.72;
}
.house-disclosure[open] > summary::after {
  transform: rotate(180deg); /* up = collapse */
}

/* Continuous-improvement notice. Warm, quiet, part of the instrument.
   Always available: minimize to a one-line chip, expand again — never permanently
   gone (Star 2026-07-28). Geometry: toggle OUT of the body grid, pinned top-right.
   Tag stacks above body; full-width padding (~100px sides) so the copy breathes. */
.wip {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 5px;
  margin: clamp(16px, 2vw, 22px) 0 0;
  padding: 12px clamp(16px, 7vw, 100px);
  border: 1px solid rgba(255,133,5,.28); border-left-width: 3px; border-radius: 12px;
  background: linear-gradient(180deg, rgba(255,133,5,.07), rgba(0,0,0,.16));
}
.wip[hidden] { display: none; }
.wip-tag {
  font: 700 9.5px/1.4 "Google Sans Code", ui-monospace, Menlo, monospace;
  letter-spacing: .14em; text-transform: uppercase; color: #FF8505; white-space: nowrap;
}
.wip .wip-body {
  margin: 0; color: rgba(255,255,255,.66);
  font-size: 12.5px; line-height: 1.55; max-width: none;
  padding-right: 28px;
}
.wip .wip-body b { color: #eee; font-weight: 600; }
.wip .wip-body i { color: rgba(255,255,255,.82); font-style: italic; }
.wip .wip-caps {
  color: #FF8505;
  font: 700 11.5px/1 "Google Sans Code", ui-monospace, Menlo, monospace;
  letter-spacing: .08em; white-space: nowrap;
}
/* Compact one-liner — only when minimized */
.wip .wip-compact {
  display: none;
  margin: 0;
  padding-right: 32px;
  color: rgba(255,255,255,.58);
  font-size: 12px; line-height: 1.35;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wip .wip-compact b { color: rgba(255,255,255,.78); font-weight: 600; }
.wip-x {
  position: absolute; top: 6px; right: 6px;
  width: 28px; height: 28px; display: grid; place-items: center;
  padding: 0; border: 0; border-radius: 8px; background: transparent;
  color: rgba(255,255,255,.4); cursor: pointer;
}
.wip-x:hover { color: #FF8505; background: rgba(255,133,5,.1); }
/* Chevron caret — accordion expand/collapse (NN/g: safest signifier vs +/−) */
.wip-x .wip-chev {
  width: 18px; height: 18px; display: block;
  pointer-events: none;
}

/* Minimized: one quiet chip, clickable to re-expand */
.wip.is-min {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 36px 8px clamp(14px, 4vw, 28px);
  cursor: pointer;
}
.wip.is-min .wip-body { display: none; }
.wip.is-min .wip-compact { display: block; flex: 1; min-width: 0; }
.wip.is-min .wip-tag { flex: 0 0 auto; }
.wip.is-min .wip-x { top: 50%; transform: translateY(-50%); right: 6px; }
@media (max-width: 719px) {
  .wip { padding: 11px clamp(12px, 4vw, 24px); }
  .wip .wip-body { font-size: 12px; }
  .wip.is-min { padding: 8px 34px 8px 14px; }
  .wip.is-min .wip-compact { font-size: 11.5px; }
}
/* Inline intake links inside WIP — kill UA button chrome hard */
button.wip-link,
.wip-link {
  -webkit-appearance: none !important;
  appearance: none !important;
  display: inline !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  background-color: transparent !important;
  box-shadow: none !important;
  color: #FF8505 !important;
  font: inherit !important;
  font-weight: 600 !important;
  line-height: inherit !important;
  cursor: pointer;
  text-decoration: underline !important;
  text-underline-offset: 2px;
  text-decoration-color: rgba(255,133,5,.45);
  vertical-align: baseline;
}
button.wip-link:hover,
.wip-link:hover {
  color: #ffd09a !important;
  text-decoration-color: rgba(255,208,154,.7) !important;
  background: none !important;
}
.wip .wip-compact .wip-link { font-size: inherit; font-weight: 600; }

/* Compact ballot strip — same outer rhythm as .wip, not a naked system button */
button.house-ballot,
.house-ballot {
  -webkit-appearance: none !important;
  appearance: none !important;
  display: flex !important;
  align-items: center;
  gap: 12px 14px;
  box-sizing: border-box;
  width: 100%;
  max-width: none;
  margin: 10px 0 0;
  padding: 11px clamp(16px, 7vw, 100px);
  border: 1px solid rgba(255,133,5,.28) !important;
  border-left-width: 3px !important;
  border-radius: 12px !important;
  background: linear-gradient(180deg, rgba(255,133,5,.07), rgba(0,0,0,.16)) !important;
  box-shadow: none !important;
  color: #eee !important;
  font: inherit !important;
  text-align: left;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
button.house-ballot:hover,
.house-ballot:hover {
  border-color: rgba(255,133,5,.5) !important;
  background: linear-gradient(180deg, rgba(255,133,5,.12), rgba(0,0,0,.2)) !important;
}
button.house-ballot:focus-visible,
.house-ballot:focus-visible {
  outline: 2px solid rgba(255,133,5,.65);
  outline-offset: 2px;
}
.house-ballot-icon {
  flex: 0 0 auto;
  color: #FF8505;
  display: grid;
  place-items: center;
  width: 36px;
  height: 32px;
  line-height: 0;
}
.house-ballot-icon svg {
  display: block;
  width: 32px;
  height: 28px;
}
/* Static slip — animation looked broken / cheap */
.house-ballot-slip { transform: none; }
.house-ballot-copy {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}
.house-ballot-kicker {
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #FF8505;
  line-height: 1.3;
}
.house-ballot-line {
  display: block;
  font-size: 13px;
  line-height: 1.4;
  color: rgba(255,255,255,.7);
  font-weight: 400;
}
.house-ballot-go {
  flex: 0 0 auto;
  color: #FF8505;
  font-size: 16px;
  font-weight: 600;
  opacity: .7;
  line-height: 1;
}
.house-ballot:hover .house-ballot-go { opacity: 1; }
@media (max-width: 719px) {
  button.house-ballot,
  .house-ballot { padding: 10px clamp(12px, 4vw, 24px); gap: 10px; }
  .house-ballot-line { font-size: 12.5px; }
}

/* ---- Message from Sysop (BBS live channel) ---- */
body.has-sysop-banner { padding-top: 28px; }
@media (max-width: 639px) { body.has-sysop-banner { padding-top: 26px; } }
.sysop-banner {
  position: fixed; top: 0; left: 0; right: 0; z-index: 90;
  height: 28px; overflow: hidden;
  border-bottom: 1px solid rgba(255,133,5,.42);
  background: linear-gradient(180deg, rgba(22,16,10,.96), rgba(10,9,8,.94));
  box-shadow: 0 8px 28px rgba(0,0,0,.45);
  color: #ffc27a;
  font: 600 11px/28px "Google Sans Code", ui-monospace, Menlo, monospace;
  letter-spacing: .06em;
  pointer-events: auto; user-select: none;
  padding-right: 36px; /* room for dismiss */
}
.sysop-banner-track {
  display: inline-flex; align-items: center; gap: 14px;
  white-space: nowrap; height: 28px; will-change: transform;
  pointer-events: none;
}
.sysop-banner.is-race .sysop-banner-track {
  animation: sysop-race 28s linear infinite;
}
.sysop-banner.is-hold .sysop-banner-track {
  width: calc(100% - 8px); justify-content: center; animation: none;
  padding-right: 8px;
}
.sysop-banner.is-hold .sysop-banner-text-b,
.sysop-banner.is-hold .sysop-banner-sep:nth-of-type(n+2),
.sysop-banner.is-hold .sysop-banner-tag:nth-of-type(2) { display: none; }
.sysop-banner-tag {
  color: var(--gold, #FF8505); letter-spacing: .14em; font-size: 10px;
}
.sysop-banner-sep { color: rgba(255,133,5,.45); }
.sysop-banner-text { color: #ffe2b8; font-weight: 600; letter-spacing: .04em; }
.sysop-banner-x {
  position: absolute; top: 0; right: 0;
  width: 32px; height: 28px; border: 0; padding: 0;
  background: linear-gradient(90deg, transparent, rgba(10,9,8,.92) 28%);
  color: rgba(255,255,255,.55);
  font: 600 18px/28px system-ui, sans-serif;
  cursor: pointer; z-index: 2;
  display: grid; place-items: center;
}
.sysop-banner-x:hover { color: #FF8505; }
.sysop-banner-x:focus-visible {
  outline: 2px solid rgba(255,133,5,.8); outline-offset: -2px;
}
@keyframes sysop-race {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* Flash: fly in → park long enough to read → dismiss (Got it / X / swipe)
   Display knobs (position / size / backdrop / entrance) via is-* classes. */
.sysop-flash {
  position: fixed; inset: 0; z-index: 95;
  display: flex; align-items: flex-start; justify-content: center;
  padding: max(12vh, 72px) 16px 24px;
  pointer-events: auto;
  overflow: hidden;
  background: rgba(0,0,0,.28);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
.sysop-flash.is-pos-center { align-items: center; padding-top: 24px; padding-bottom: 24px; }
.sysop-flash.is-pos-top { align-items: flex-start; padding-top: max(10vh, 56px); }
.sysop-flash.is-pos-bottom { align-items: flex-end; padding-bottom: max(10vh, 48px); }
.sysop-flash.is-backdrop-clear {
  background: transparent;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.sysop-flash.is-backdrop-heavy {
  background: rgba(0,0,0,.52);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.sysop-flash-plate {
  position: relative;
  display: flex; flex-direction: column; gap: 10px;
  width: min(92vw, 28rem);
  padding: 16px 18px 14px;
  border: 1px solid rgba(255,133,5,.55);
  border-radius: 14px;
  background: linear-gradient(155deg, rgba(36,26,14,.97), rgba(12,11,10,.96));
  box-shadow:
    0 0 0 1px rgba(255,180,90,.08),
    0 18px 50px rgba(0,0,0,.55),
    0 0 40px rgba(255,133,5,.18);
  color: #f6e6d0;
  pointer-events: auto;
  touch-action: pan-y;
  will-change: transform, opacity;
}
.sysop-flash.is-cheer .sysop-flash-plate {
  box-shadow:
    0 0 0 1px rgba(255,200,120,.14),
    0 18px 50px rgba(0,0,0,.55),
    0 0 56px rgba(255,133,5,.32);
}
.sysop-flash.is-alert .sysop-flash-plate {
  border-color: rgba(255,150,70,.7);
  box-shadow:
    0 0 0 1px rgba(255,120,60,.16),
    0 18px 50px rgba(0,0,0,.55),
    0 0 36px rgba(255,100,40,.22);
}
.sysop-flash.is-size-compact .sysop-flash-plate {
  width: min(88vw, 20rem);
  padding: 12px 14px 12px;
  gap: 8px;
}
.sysop-flash.is-size-compact .sysop-flash-text { font-size: 13.5px; }
.sysop-flash.is-size-compact .sysop-flash-ok { min-height: 40px; font-size: 13px; }
.sysop-flash.is-size-large .sysop-flash-plate {
  width: min(94vw, 36rem);
  padding: 22px 24px 18px;
  gap: 12px;
  border-radius: 16px;
}
.sysop-flash.is-size-large .sysop-flash-text {
  font-size: clamp(17px, 2.4vw, 22px);
  line-height: 1.35;
}
.sysop-flash.is-size-large .sysop-flash-kicker { font-size: 11px; }
.sysop-flash.is-size-large .sysop-flash-ok { min-height: 52px; font-size: 16px; }
.sysop-flash-kicker {
  font: 700 10px/1 "Google Sans Code", ui-monospace, Menlo, monospace;
  letter-spacing: .16em; color: var(--gold, #FF8505);
  padding-right: 28px;
}
.sysop-flash-text {
  font: 600 15px/1.4 "Google Sans", "Google Sans Text", system-ui, sans-serif;
  color: #fff6e8; letter-spacing: .01em;
}
.sysop-flash-x {
  position: absolute; top: 8px; right: 8px;
  width: 32px; height: 32px; border: 0; border-radius: 8px;
  background: transparent; color: rgba(255,255,255,.45);
  font: 600 22px/1 system-ui, sans-serif; cursor: pointer;
  display: grid; place-items: center;
}
.sysop-flash-x:hover { color: #FF8505; background: rgba(255,133,5,.12); }
.sysop-flash-ok {
  margin-top: 4px; align-self: stretch;
  min-height: 44px; padding: 12px 16px;
  border: 1px solid rgba(255,133,5,.55); border-radius: 999px;
  background: rgba(255,133,5,.16); color: #ffd9a8;
  font: 700 14px/1 "Google Sans", system-ui, sans-serif;
  letter-spacing: .03em; cursor: pointer;
}
.sysop-flash-ok:hover { background: rgba(255,133,5,.26); border-color: #FF8505; color: #fff; }
.sysop-flash-ok:active { transform: scale(.98); }
/* iPhone swipe affordance — visible on coarse pointers / narrow screens */
.sysop-flash-swipe {
  display: none; flex-direction: column; align-items: center; gap: 6px;
  margin: -2px 0 2px; user-select: none;
}
.sysop-flash-swipe-bar {
  width: 42px; height: 4px; border-radius: 999px;
  background: rgba(255,255,255,.28);
}
.sysop-flash-swipe-hint {
  font: 600 10px/1 "Google Sans Code", ui-monospace, Menlo, monospace;
  letter-spacing: .08em; text-transform: uppercase;
  color: rgba(255,255,255,.38);
}
@media (max-width: 639px), (pointer: coarse) {
  .sysop-flash-swipe { display: flex; }
  .sysop-flash-ok { min-height: 48px; font-size: 15px; }
}
.sysop-flash-plate.is-dragging { transition: none; }
/* Enter / hold / exit */
.sysop-flash.is-enter .sysop-flash-plate {
  animation: sysop-enter .6s cubic-bezier(.22,.8,.28,1) both;
}
.sysop-flash.is-enter-fade .sysop-flash-plate {
  animation: sysop-enter-soft .4s ease both;
}
.sysop-flash.is-enter-drop .sysop-flash-plate {
  animation: sysop-enter-drop .55s cubic-bezier(.22,.8,.28,1) both;
}
.sysop-flash.is-static.is-enter .sysop-flash-plate,
.sysop-flash.is-static.is-enter-fade .sysop-flash-plate,
.sysop-flash.is-static.is-enter-drop .sysop-flash-plate {
  animation: sysop-enter-soft .35s ease both;
}
.sysop-flash.is-hold .sysop-flash-plate {
  animation: none; transform: none; opacity: 1;
}
.sysop-flash.is-exit {
  background: transparent;
  transition: background .35s ease;
}
.sysop-flash.is-exit .sysop-flash-plate {
  animation: sysop-exit .38s ease forwards;
}
.sysop-flash.is-exit.is-swipe-out .sysop-flash-plate {
  animation: sysop-swipe-out .35s ease forwards;
}
.sysop-flash-trail {
  position: absolute; inset: 0; pointer-events: none;
}
.sysop-flash-stage {
  position: absolute; inset: 0; pointer-events: none; overflow: hidden;
  z-index: 0;
}
.sysop-flash-plate { z-index: 1; }
.sysop-flash.is-hold .sysop-flash-trail,
.sysop-flash.is-exit .sysop-flash-trail { display: none; }
.sysop-flash.is-exit .sysop-flash-stage { opacity: 0; transition: opacity .25s ease; }
.sysop-spark {
  position: absolute; width: 5px; height: 5px; border-radius: 50%;
  background: radial-gradient(circle, #ffe2a8 0%, var(--gold, #FF8505) 55%, transparent 70%);
  box-shadow: 0 0 10px rgba(255,133,5,.8);
  animation: sysop-spark .9s ease-out forwards;
  opacity: 0; pointer-events: none;
}
/* Companion sprite per jingle — runs across the stage with the chime */
.sysop-sprite {
  position: absolute;
  top: var(--sprite-lane, 28%);
  left: -12%;
  width: 56px; height: 56px;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,.45));
  opacity: 0;
  will-change: transform, opacity;
  pointer-events: none;
}
.sysop-sprite svg { display: block; width: 100%; height: 100%; }
.sysop-sprite.is-run {
  animation: sysop-sprite-run 2.4s cubic-bezier(.22,.7,.28,1) forwards;
}
.sysop-sprite.is-flip {
  animation-name: sysop-sprite-run-flip;
}
.sysop-sprite.is-flip svg { transform: scaleX(-1); }
@keyframes sysop-sprite-run {
  0%   { transform: translate3d(0, 0, 0) scale(.85) rotate(-6deg); opacity: 0; }
  8%   { opacity: 1; }
  45%  { transform: translate3d(55vw, -6px, 0) scale(1.05) rotate(2deg); opacity: 1; }
  100% { transform: translate3d(112vw, 4px, 0) scale(.9) rotate(4deg); opacity: 0; }
}
@keyframes sysop-sprite-run-flip {
  0%   { transform: translate3d(112vw, 0, 0) scale(.85) rotate(6deg); opacity: 0; left: -12%; }
  8%   { opacity: 1; }
  45%  { transform: translate3d(40vw, -6px, 0) scale(1.05) rotate(-2deg); opacity: 1; }
  100% { transform: translate3d(-20vw, 4px, 0) scale(.9) rotate(-4deg); opacity: 0; }
}
@keyframes sysop-enter {
  0%   { transform: translate3d(-120%, 8px, 0) rotate(-2deg); opacity: 0; }
  70%  { transform: translate3d(4%, -2px, 0) rotate(0.4deg); opacity: 1; }
  100% { transform: translate3d(0, 0, 0) rotate(0); opacity: 1; }
}
@keyframes sysop-enter-soft {
  0%   { transform: scale(.96); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes sysop-enter-drop {
  0%   { transform: translate3d(0, -28%, 0) scale(.97); opacity: 0; }
  100% { transform: translate3d(0, 0, 0) scale(1); opacity: 1; }
}
@keyframes sysop-exit {
  0%   { transform: translate3d(0,0,0); opacity: 1; }
  100% { transform: translate3d(0,-12px,0) scale(.98); opacity: 0; }
}
@keyframes sysop-swipe-out {
  0%   { transform: translate3d(0,0,0); opacity: 1; }
  100% { transform: translate3d(0,120%,0); opacity: 0; }
}
@keyframes sysop-spark {
  0% { opacity: 0; transform: translate(0,0) scale(.4); }
  25% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--sx, 12px), var(--sy, -18px)) scale(.2); }
}
@media (max-width: 639px) {
  .sysop-banner { height: 26px; font-size: 10px; line-height: 26px; }
  .sysop-banner-track { height: 26px; }
  .sysop-flash { padding-top: max(10vh, 56px); }
  .sysop-flash-plate { width: min(94vw, 28rem); padding: 14px 14px 12px; }
  .sysop-flash-text { font-size: 14.5px; line-height: 1.45; }
}
@media (prefers-reduced-motion: reduce) {
  .sysop-banner.is-race .sysop-banner-track { animation: none; padding-left: 0; width: 100%; justify-content: center; }
  .sysop-banner.is-race .sysop-banner-text-b,
  .sysop-banner.is-race .sysop-banner-sep:nth-of-type(n+2),
  .sysop-banner.is-race .sysop-banner-tag:nth-of-type(2) { display: none; }
  .sysop-spark { display: none; }
  .sysop-sprite { display: none; }
  .sysop-flash.is-enter .sysop-flash-plate,
  .sysop-flash.is-exit .sysop-flash-plate { animation-duration: .2s; }
}

/* ── House viewport tips (Star 2026-07-28) ───────────────────────────
   Geometry owned by bip110.placeTip in site-shell.js: portal to body,
   position:fixed, flip + clamp inside pad. Page CSS may style chrome only
   (colors, type, padding). Never position:absolute a multi-line tip under
   a control — it will exit the screen on short or edge-aligned anchors. */
.house-tip {
  position: fixed;
  z-index: 90;
  left: 0;
  top: 0;
  box-sizing: border-box;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  /* No CSS transform translation — placeTip owns left/top only. */
}
.house-tip.house-tip-open,
.house-tip.is-on,
.house-tip.show {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
@media (prefers-reduced-motion: reduce) {
  .house-tip {
    transition: none;
  }
}