/* The front page: the panorama, then Members, the Wall of shame and the Tools, each a band of its own.
   Builds on design-v2.css (tokens, header, footer, .go). No inline styles anywhere (CSP style-src 'self'):
   home.js places things through element.style, which the CSP allows. */

.home-page { background-color: var(--bg-side); }
.home { padding-bottom: 0; }
.home + .site-foot { margin-top: 0; }

.eyebrow { margin: 0; font: 500 12px/1.2 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--sky); }
.home .btn--primary { background: var(--sky); color: var(--on-sky); }

/* ---------- The panorama ---------- */
.pano { position: relative; aspect-ratio: 720 / 310; overflow: hidden; background: var(--bg); min-height: 300px; }
.pano__art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; }
.pano__art--still { display: none; }
:root[data-motion="reduced"] .pano__art--live { display: none; }
:root[data-motion="reduced"] .pano__art--still { display: block; }
/* The grain fades in over the panorama's foot, so the page below starts without a seam. */
.pano::after { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: var(--grain);
  -webkit-mask-image: linear-gradient(to bottom, transparent 80%, #000 94%); mask-image: linear-gradient(to bottom, transparent 80%, #000 94%); }
/* The headline sits in the lighthouse's beam; sized with the picture so it stays there. */
.pano__title { position: absolute; left: 3.4%; top: 25.5%; margin: 0; z-index: 2; font-family: var(--serif); font-weight: 800;
  font-size: 4.1vw; line-height: 1.04; letter-spacing: -0.015em; color: #fff6dc; font-variation-settings: "SOFT" 100, "opsz" 72;
  text-shadow: 0 0.18vw 0 rgba(6, 13, 20, 0.55), 0 0 1.4vw rgba(6, 13, 20, 0.55); }
.pano__spots { position: absolute; inset: 0; z-index: 3; }
.spot { position: absolute; padding: 0; border: 0; background: transparent; cursor: pointer; border-radius: 4px; }
.spot:focus-visible { outline: 2px solid var(--sky); outline-offset: 2px; }
.pano__keeper { position: absolute; left: 47.36%; top: 49.03%; width: 1.11%; z-index: 2; display: none; }
.pano.has-keeper .pano__keeper { display: block; }

/* Speech bubbles: the panorama's easter eggs, the raven, the globe's home */
.bubble { position: absolute; z-index: 5; pointer-events: none; white-space: nowrap; padding: 6px 10px; border-radius: 3px;
  background: #f3ead8; color: #2a211c; border: 2px solid #2a211c; font: 600 13px/1.3 var(--font); box-shadow: 0 3px 0 rgba(0, 0, 0, 0.35);
  transform: translate(-50%, calc(-100% - 10px)); }
.bubble::after { content: ""; position: absolute; left: calc(50% - 5px); bottom: -7px; width: 10px; height: 10px; background: #f3ead8;
  border-right: 2px solid #2a211c; border-bottom: 2px solid #2a211c; transform: rotate(45deg); }
.bubble.is-right { transform: translate(calc(-100% + 24px), calc(-100% - 10px)); }
.bubble.is-right::after { left: calc(100% - 29px); }
.bubble.is-left { transform: translate(-24px, calc(-100% - 10px)); }
.bubble.is-left::after { left: 19px; }

/* Fyr and Sau: plaques you can read at a glance, one on each side. Sized in em off a font size that follows the
   window, so on a big screen they grow with the picture instead of shrinking into it. */
.plaque { position: absolute; bottom: 11%; z-index: 4; font-size: clamp(15px, 1.05vw, 22px); width: 17.6em;
  display: flex; flex-direction: column; overflow: hidden;
  border-radius: .53em; border: 1px solid rgba(140, 196, 234, 0.3); background-color: rgba(9, 15, 29, 0.5);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); box-shadow: 0 14px 34px rgba(0, 0, 0, 0.35);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8); color: var(--text); text-decoration: none;
  transition: transform .18s ease, background-color .18s, border-color .18s, box-shadow .18s; }
.plaque--left { left: max(24px, calc((100% - 1240px) / 2)); }
.plaque--right { right: max(24px, calc((100% - 1240px) / 2)); }
a.plaque:hover, a.plaque:focus-visible { transform: translateY(-3px); background-color: rgba(9, 15, 29, 0.7); border-color: rgba(140, 196, 234, 0.75);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45), 0 0 0 3px rgba(140, 196, 234, 0.14); color: var(--text); }
.plaque__body { display: flex; flex-direction: column; gap: .53em; padding: .93em 1.07em .87em; }
.plaque__head { display: flex; align-items: center; gap: .67em; }
.plaque__head .icon { width: 1.33em; height: 1.33em; color: var(--sky); }
.plaque__name { font: italic 800 1.8em/1 var(--serif); }
.plaque__night { margin-left: auto; font: 500 .8em var(--mono); color: var(--sky); }
.plaque__line { font-size: 1em; color: #dfe6ef; }
.plaque__tags { display: flex; flex-wrap: wrap; gap: .4em; min-height: 1.33em; }
.plaque__tag { font: 500 .73em/1.4 var(--mono); color: #e3eef8; background: rgba(23, 40, 74, 0.6); border-radius: 3px; padding: .18em .64em; }
.plaque__play { display: flex; align-items: center; justify-content: space-between; padding: .67em 1.07em; background: var(--sky); color: var(--on-sky);
  font-weight: 600; font-size: .93em; text-shadow: none; transition: background-color .18s; }
a.plaque:hover .plaque__play { background: #a9d4f0; }
.plaque__arrow { display: inline-block; transition: transform .18s; }
a.plaque:hover .plaque__arrow { transform: translateX(4px); }
.plaque__note { font: 500 .79em var(--mono); opacity: 0.75; }
.plaque.is-soon .plaque__play { background: rgba(140, 196, 234, 0.25); color: var(--text); }

/* Phones: the picture keeps its own shape, so the headline and plaques move below it. */
@media (max-width: 760px) {
  .pano { aspect-ratio: auto; min-height: 0; display: flex; flex-direction: column; background: var(--bg); }
  .pano__art { position: relative; aspect-ratio: 720 / 310; height: auto; }
  .pano__title { position: static; order: -1; padding: 28px 20px 18px; font-size: clamp(30px, 9vw, 44px); background: var(--bg-side); }
  .pano__spots, .pano__keeper, .pano::after { display: none !important; }
  .plaque { position: static; width: auto; margin: 12px 16px 0; font-size: 15px; background-color: var(--surface); }
  .plaque--right { margin-bottom: 28px; }
}

/* ---------- Bands: one per section, joined by a honeycomb edge ---------- */
.band { position: relative; background-color: var(--bg); background-image: var(--grain); }
.band::before { content: ""; position: absolute; left: 0; right: 0; bottom: calc(100% - 1px); height: 68px; background-color: inherit; background-image: var(--grain);
  -webkit-mask: url(../img/hexedge.svg) repeat-x left bottom / 1200px 68px; mask: url(../img/hexedge.svg) repeat-x left bottom / 1200px 68px; }
.band--first::before { display: none; }   /* follows straight on from the panorama */
.band--night { background-color: var(--bg-side); }
.band--deep { background-color: #13213a; }
.band__in { width: min(1240px, 100% - 48px); margin: 0 auto; padding: 72px 0 112px; scroll-margin-top: 64px; }
.band { scroll-margin-top: 60px; }
.band__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px 24px; margin-bottom: 40px; }
.band__intro { display: grid; gap: 14px; max-width: 780px; }
.band__title { margin: 0; font: 800 50px/1.02 var(--serif); letter-spacing: -0.02em; font-variation-settings: "SOFT" 100, "opsz" 72; }
.band__lede { margin: 0; font-size: 17px; line-height: 1.6; color: var(--text-2); }
.band__aside { margin: 0; font-size: 14px; color: var(--text-2); display: flex; align-items: center; gap: 8px; }
.band__aside a { color: var(--sky); text-decoration: none; }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--sky); flex: none; }
:root[data-motion="full"] .live-dot { animation: home-pulse 1.8s infinite; }
@keyframes home-pulse { 0% { box-shadow: 0 0 0 0 rgba(140, 196, 234, 0.55); } 100% { box-shadow: 0 0 0 7px rgba(140, 196, 234, 0); } }
@media (max-width: 760px) { .band__title { font-size: 36px; } .band__in { padding: 56px 0 88px; } }

/* ---------- Windows (the members console, the tools) ---------- */
.win { background: var(--surface); border: 1px solid #263b5e; border-radius: 10px; overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 28px 60px rgba(0, 0, 0, 0.32); }
.win__bar { display: flex; align-items: center; gap: 14px; padding: 10px 16px; border-bottom: 1px solid var(--line); background: var(--inset);
  font: 400 12px var(--mono); color: var(--text-3); }
.win__dots { width: 44px; height: 12px; flex: none; }
.win__dots polygon { fill: #2c4268; }
.win__dots polygon:last-child { fill: var(--sky); }
.win__path { flex: 1; }
.win__body { display: flex; flex-wrap: wrap; }
.win__panes { flex: 999 1 480px; min-width: 0; padding: 22px 26px 18px; height: 570px; overflow: hidden; display: flex; flex-direction: column; }
.pane { display: flex; flex-direction: column; gap: 16px; height: 100%; min-height: 0; }
.pane[hidden] { display: none; }
.pane__lede { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--text-2); max-width: 660px; }

.tabs { display: flex; flex-direction: column; gap: 6px; }
.tabs--side { flex: 1 1 250px; max-width: 290px; padding: 14px 12px; background: var(--inset); border-right: 1px solid var(--line); }
.tab { display: flex; align-items: center; gap: 14px; width: 100%; padding: 12px; border: 1px solid transparent; border-radius: 8px;
  background: transparent; color: var(--text); text-align: left; font: inherit; cursor: pointer; transition: background-color .12s; }
.tab:hover { background: var(--surface); }
.tab.is-on { background: var(--surface-2); border-color: #2c4268; }
.tab__icon { width: 38px; height: 38px; border-radius: 8px; flex: none; display: grid; place-items: center; background: var(--surface-2); color: var(--sky); }
.tab.is-on .tab__icon { background: #22385a; }
.tab__text { display: grid; gap: 3px; flex: 1; min-width: 0; }
.tab__name { font: 800 19px/1.1 var(--serif); font-variation-settings: "SOFT" 100, "opsz" 24; }
.tab__desc { font-size: 12px; line-height: 1.35; color: var(--text-2); min-height: 2.7em; }
.tab__arrow { color: transparent; font-size: 16px; }
.tab.is-on .tab__arrow { color: var(--sky); }
@media (max-width: 760px) {
  .tabs--side { max-width: none; flex-direction: row; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--line); }
  .tabs--side .tab { width: auto; flex: none; }
  .tabs--side .tab__desc, .tab__arrow { display: none; }
  .win__panes { height: auto; min-height: 520px; overflow: visible; padding: 18px; }
}

/* The hint at the foot of each pane, with its button */
.hint { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: auto; padding-top: 14px; border-top: 1px dashed var(--line); }
.hint__text { flex: 1 1 240px; margin: 0; font-size: 14px; color: var(--text-2); }

.chip { font: 400 11px/1.5 var(--mono); color: var(--text-3); border: 1px solid var(--text-3); border-radius: 4px; padding: 1px 7px; white-space: nowrap; }
.flag { font: 400 11px/1.5 var(--mono); border: 1px solid currentColor; border-radius: 4px; padding: 1px 7px; white-space: nowrap; }
.flag--hi { color: var(--warm); } .flag--mid { color: var(--sky); } .flag--ok { color: #8fb89a; }
.dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; flex: none; }
.dot--ok { background: #8fb89a; } .dot--hi { background: var(--warm); }

/* ---------- Hugin ---------- */
.chat { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 14px; }
.chat__log { flex: 1; min-height: 0; overflow: auto; width: 100%; max-width: 640px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; }
.chat__me { align-self: flex-end; max-width: 60%; margin: 0; padding: 11px 15px; border-radius: 10px 10px 2px 10px; background: var(--surface-2); font-size: 15px; }
.chat__hugin { display: flex; gap: 12px; align-items: flex-start; }
.chat__avatar { width: 34px; height: 34px; flex: none; display: grid; place-items: center; border: 0; border-radius: 8px; background: var(--surface-2); padding: 0; cursor: pointer; }
.raven { width: 26px; height: auto; display: block; }
.chat__answer { flex: 1; display: grid; gap: 8px; }
.chat__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chat__text { margin: 0; max-width: 540px; font-size: 15px; line-height: 1.7; white-space: pre-wrap; min-height: 8.5em; }
.chat__text.is-typing::after { content: "\258C"; color: var(--sky); }
.chat__actions { display: flex; align-items: center; gap: 4px; }
.chat__actions[hidden] { display: none; }
.chat__act { width: 30px; height: 30px; display: grid; place-items: center; border: 0; border-radius: 6px; background: transparent; color: var(--text-3); cursor: pointer; }
.chat__act:hover { color: var(--text); background: var(--surface-2); }
.chat__act[aria-pressed="true"] { color: var(--sky); background: var(--surface-2); }
.chat__act--copy { width: auto; display: inline-flex; gap: 6px; padding: 0 8px; font-size: 12px; }
.composer-demo { position: relative; width: 100%; max-width: 560px; margin: 0 auto; }
.composer-demo__raven { position: absolute; right: 64px; top: -17px; z-index: 1; padding: 0; border: 0; background: transparent; cursor: pointer; }
.composer-demo__raven .raven { width: 24px; transition: transform .15s; }
.raven--up { display: none; }
.composer-demo__raven.is-up .raven--sit { display: none; }
.composer-demo__raven.is-up .raven--up { display: block; transform: translateY(-6px); }
.chat__avatar.is-up { transform: translateY(-3px); }
.bubble--raven { right: 40px; left: auto; bottom: calc(100% + 20px); transform: none; }
.bubble--raven::after { left: auto; right: 26px; }
.composer-demo__box { display: flex; flex-direction: column; gap: 8px; padding: 10px 10px 8px 14px; background: var(--inset); border: 1px solid #263b5e; border-radius: 10px; }
.composer-demo__box input { background: transparent; border: 0; outline: none; color: var(--text); font: 14px var(--font); padding: 4px 0; }
.composer-demo__row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.cbtn { width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid #263b5e; border-radius: 6px; background: transparent; color: var(--text-2); cursor: pointer; }
.cbtn--send { background: var(--sky); border-color: var(--sky); color: var(--on-sky); }
.ctog { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border: 1px solid #263b5e; border-radius: 6px; background: transparent;
  color: var(--text-2); font: 600 12px var(--font); cursor: pointer; }
.ctog[aria-pressed="true"] { background: var(--surface-2); color: var(--sky); border-color: #3d5f8f; }
.model-chip { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; padding: 5px 8px; border: 1px solid var(--line); border-radius: 6px;
  font: 400 11px var(--mono); color: var(--text-2); }
.model-chip__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--sky); }
:root[data-motion="full"] .model-chip__dot { animation: home-pulse 1.8s infinite; }
.slash { position: absolute; left: 0; right: 0; bottom: 100%; margin-bottom: 8px; padding: 6px 0; z-index: 3; background: var(--inset);
  border: 1px solid #263b5e; border-radius: 8px; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4); }
.slash[hidden] { display: none; }
.slash button { display: flex; gap: 14px; width: 100%; padding: 8px 12px; border: 0; background: transparent; color: var(--text); font: 13px var(--font); text-align: left; cursor: pointer; }
.slash button:hover { background: var(--surface); }
.slash b { font: 500 13px var(--mono); color: var(--sky); width: 70px; }
.slash span { color: var(--text-2); }

/* ---------- Prospekt ---------- */
.pipes { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pipe { display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; background: var(--inset); border: 1px solid var(--line); border-radius: 6px; }
.pipe .icon { color: var(--sky); }
.pipe > span { display: grid; gap: 1px; }
.pipe__t { font-size: 12px; font-weight: 600; }
.pipe__s { font: 400 10px var(--mono); color: var(--text-3); }
.pipe__arrow { color: var(--text-3); }
.pk-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; align-items: start; }
.pk-side { display: grid; gap: 16px; }
.pk-panel { display: grid; gap: 8px; padding: 14px 16px; background: var(--inset); border: 1px solid var(--line); border-radius: 8px; }
.pk-panel__title { margin: 0; font: 500 11px var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--sky); }
.pk-panel__note { margin: 0; font-size: 12px; color: var(--text-2); }
.pk-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.pk-row:last-child { border-bottom: 0; }
.pk-row__k { color: var(--text-2); width: 132px; font-size: 13px; }
.pk-row__v { flex: 1; }
.pk-photos { display: flex; gap: 10px; }
.pk-photo { flex: 1 1 0; min-width: 0; margin: 0; display: grid; gap: 5px; }
.pk-photo__art { width: 100%; height: auto; display: block; border-radius: 4px; }
.pk-photo figcaption { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--text-2); }
.q { margin: 0; font-size: 13px; line-height: 1.5; display: flex; gap: 10px; }
.q::before { content: "?"; font: 800 14px var(--serif); color: var(--sky); }

/* ---------- Post ---------- */
.mail { flex: 1; min-height: 0; display: flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.mail__folders { width: 132px; flex: none; padding: 10px 8px; display: flex; flex-direction: column; gap: 2px; background: var(--inset); border-right: 1px solid var(--line); }
.mail__write { margin-bottom: 8px; padding: 7px; border-radius: 5px; background: var(--sky); color: var(--on-sky); font-weight: 600; font-size: 13px; text-align: center; }
.fold { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 5px; font-size: 13px; color: var(--text-2); }
.fold .icon { color: var(--text-3); }
.fold.is-on { background: var(--surface-2); color: var(--text); }
.fold.is-on .icon { color: var(--sky); }
.fold > span:nth-of-type(1) { flex: 1; }
.fold__n { font: 400 11px var(--mono); color: var(--text-3); }
.mail__list { width: 250px; flex: none; display: flex; flex-direction: column; border-right: 1px solid var(--line); min-width: 0; overflow: auto; }
.mrow { display: grid; gap: 3px; width: 100%; padding: 10px 12px; border: 0; border-bottom: 1px solid var(--line); background: transparent; color: var(--text);
  text-align: left; font: inherit; cursor: pointer; }
.mrow:hover { background: var(--surface-2); }
.mrow.is-on { background: var(--surface-2); }
.mrow.is-bad { box-shadow: inset 3px 0 0 var(--warm); }
.mrow__top { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.mrow__dot { width: 6px; height: 6px; border-radius: 50%; flex: none; background: transparent; }
.mrow.is-unread .mrow__dot { background: var(--sky); }
.mrow__from { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.mrow.is-unread .mrow__from { font-weight: 600; }
.mrow__bang { width: 15px; height: 15px; display: inline-grid; place-items: center; border-radius: 3px; background: var(--warm); color: #2a1d08; font: 800 11px var(--font); flex: none; }
.mrow__time { font: 400 10px var(--mono); color: var(--text-3); }
.mrow__subj, .mrow__snip { padding-left: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.mrow.is-bad .mrow__subj { color: var(--warm); }
.mrow__snip { font-size: 12px; color: var(--text-3); }
.mail__read { flex: 1; min-width: 0; padding: 14px 18px; display: flex; flex-direction: column; gap: 10px; overflow: auto; }
.read__subj { margin: 0; font-weight: 600; font-size: 16px; }
.read__meta { margin: 0; display: grid; gap: 3px; font-size: 12px; color: var(--text-2); }
.read__meta b { font-weight: 400; color: var(--text); }
.read__to { font-family: var(--mono); color: var(--sky) !important; }
.checks { display: flex; flex-wrap: wrap; gap: 5px; }
.check { display: inline-flex; gap: 4px; font: 400 10.5px/1.5 var(--mono); border: 1px solid currentColor; border-radius: 4px; padding: 1px 6px; white-space: nowrap; cursor: help; }
.check b { font-weight: 700; }
.check--ok { color: #8fb89a; } .check--bad { color: var(--warm); }
.read__body { margin: 0; font-size: 14px; line-height: 1.6; white-space: pre-line; }
.leak { display: grid; gap: 8px; padding: 10px 12px; border: 1px solid var(--warm); border-radius: 6px; font-size: 13px; line-height: 1.5; }
.leak p { margin: 0; }
.leak__acts { display: flex; gap: 8px; }
.leak__acts span { border-radius: 5px; font-size: 12px; padding: 5px 10px; border: 1px solid var(--line-strong); }
.leak__acts span:first-child { background: var(--warm); color: #2a1d08; font-weight: 600; border-color: var(--warm); }
.alias { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 12px 14px; background: var(--inset); border: 1px solid var(--line); border-radius: 8px; font-size: 13px; }
.alias__lead { color: var(--text-2); }
.alias__lead strong { color: var(--text); font-weight: 600; }
.alias__try { margin-left: auto; display: flex; align-items: center; gap: 8px; color: var(--text-3); font-size: 12px; }
.alias__try input { width: 100px; padding: 5px 8px; background: var(--bg-side); border: 1px solid #263b5e; border-radius: 5px; color: var(--text); font: 12px var(--mono); outline: none; }
.alias__out { font: 500 13px var(--mono); color: var(--sky); }
.alias__note { width: 100%; font: 400 10px var(--mono); color: var(--text-3); }
@media (max-width: 900px) { .mail__folders { display: none; } .mail__list { width: 190px; } }

/* ---------- Files ---------- */
.files__bar { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--text-2); }
.files__here { color: var(--text); font-weight: 600; }
.files__sep { color: var(--line-strong); }
.files__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; }
.ftile { display: grid; gap: 6px; padding: 10px; background: var(--inset); border: 1px solid var(--line); border-radius: 6px; min-width: 0; }
.ftile[hidden] { display: none; }
.ftile__type { height: 56px; border-radius: 4px; display: grid; place-items: center; background: var(--surface-2); font: 400 11px var(--mono); color: var(--sky); }
.ftile__name { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ftile__meta { font: 400 10px var(--mono); color: var(--text-3); }
.upl, .share { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 6px; font-size: 13px; }
.upl { background: var(--inset); }
.upl .icon, .share .icon { color: var(--sky); }
.upl__name { width: 140px; }
.upl__track { flex: 1; height: 4px; border-radius: 2px; background: var(--surface-2); overflow: hidden; }
.upl__fill { display: block; height: 4px; width: 0; background: var(--sky); }
.upl__pct, .share__when { font: 400 11px var(--mono); color: var(--text-3); }
.upl__pct { width: 70px; text-align: right; }
.share > span:nth-of-type(1) { flex: 1; color: var(--text-2); }
.drop { padding: 12px; border: 1.5px dashed #263b5e; border-radius: 8px; text-align: center; font-size: 13px; color: var(--text-2); }
.drop span { color: var(--sky); }

/* ---------- Status ---------- */
.st { display: flex; flex-wrap: wrap; gap: 20px; }
.st__list { flex: 1 1 300px; }
.st__feed { flex: 1 1 240px; display: grid; gap: 6px; align-content: start; }
.st__head { margin: 0 0 4px; display: flex; justify-content: space-between; font-size: 13px; font-weight: 600; }
.st__head--mono { font: 400 11px var(--mono); color: var(--text-3); }
.st__add { font: 400 11px var(--mono); color: var(--sky); }
.eps { list-style: none; margin: 0; padding: 0; }
.ep { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.ep__hex { width: 14px; height: 14px; flex: none; fill: var(--sky); }
:root[data-motion="full"] .ep__hex { animation: home-blink 2.6s infinite; }
.ep:nth-child(2) .ep__hex { animation-delay: .35s; } .ep:nth-child(3) .ep__hex { animation-delay: .7s; }
.ep:nth-child(4) .ep__hex { animation-delay: 1.05s; } .ep:nth-child(5) .ep__hex { animation-delay: 1.4s; } .ep:nth-child(6) .ep__hex { animation-delay: 1.75s; }
@keyframes home-blink { 0%, 100% { opacity: 0.45; } 50% { opacity: 1; } }
.ep__type { width: 34px; text-align: center; font: 400 10px var(--mono); color: var(--sky); border: 1px solid #263b5e; border-radius: 3px; padding: 1px 0; }
.ep__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ep__val { font: 400 12px var(--mono); color: var(--text-2); white-space: nowrap; }
.ep__val b { font-weight: 400; }
.feed { margin: 0; padding: 12px 14px; background: var(--bg-side); border: 1px solid var(--line); border-radius: 6px; font: 400 11.5px/1.6 var(--mono); color: var(--text-2); overflow: hidden; white-space: pre; }
.feed i { font-style: normal; color: var(--sky); }
.feed b { font-weight: 400; color: var(--text); }
.badge-demo { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-2); }
.badge-demo__b { display: inline-flex; border-radius: 3px; overflow: hidden; font: 400 10px var(--mono); }
.badge-demo__b span { padding: 2px 6px; background: var(--line-strong); color: var(--text); }
.badge-demo__b span + span { background: var(--sky); color: var(--on-sky); }

/* ---------- The Wall of shame ---------- */
.wall { display: flex; flex-wrap: wrap; align-items: center; gap: 48px 80px; padding-top: 80px; padding-bottom: 120px; }
.wall__globe { flex: 1 1 420px; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.globe { position: relative; width: 100%; max-width: 460px; }
.globe__svg { width: 100%; height: auto; display: block; cursor: grab; touch-action: pan-y; }
.globe__svg.is-dragging { cursor: grabbing; }
.globe__halo { fill: var(--sky); opacity: 0.05; }
.globe__sea { fill: #0d1830; stroke: #263b5e; stroke-width: 0.6; }
.globe__far { fill: #6a809e; opacity: 0.35; } .globe__mid { fill: #8598b3; opacity: 0.65; } .globe__near { fill: #b5c2d3; opacity: 0.95; }
.globe__ring { fill: var(--sky); opacity: 0.22; } .globe__hits { fill: var(--sky); }
.globe__homeglow { fill: var(--warm); opacity: 0.25; } .globe__home { fill: var(--warm); stroke: #2a1d08; stroke-width: 0.4; }
.bubble--globe { left: 50%; top: 50%; }
.globe__hint { margin: 0; display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-3); }
.wall__text { flex: 1 1 420px; display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.knocks__live { margin: 6px 0 -6px; display: flex; align-items: center; gap: 8px; font: 400 11px var(--mono); color: var(--text-3); }
.knocks { list-style: none; margin: 0; padding: 0; width: 100%; }
.knock { display: grid; grid-template-columns: 44px 140px minmax(0, 1fr) 30px; gap: 12px; padding: 10px 0; font: 400 13px var(--mono); }
.knock__t, .knock__cc { color: var(--text-3); }
.knock__what { color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.knocks__none { color: var(--text-3); font-size: 14px; padding: 10px 0; }

/* ---------- Tools ---------- */
.tools { display: flex; flex-wrap: wrap; gap: 28px; align-items: stretch; }
.tabs--tools { flex: 1 1 320px; gap: 8px; }
.tabs--tools .tab { padding: 15px 16px; }
.tabs--tools .tab__icon { width: 40px; height: 40px; }
.tabs--tools .tab__name { font-size: 23px; }
.tabs--tools .tab__desc { font-size: 14px; min-height: 0; }
.tabs--tools .tab.is-on { background: var(--surface); border-color: #263b5e; }
.win--tools { flex: 2 1 520px; display: flex; flex-direction: column; }
.win--tools .pane { padding: 26px 28px; height: 610px; box-sizing: border-box; }
@media (max-width: 760px) { .win--tools .pane { height: auto; min-height: 520px; padding: 20px; } }

.tett-top { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.tett-top .btn { margin-left: auto; }
.tett-body { display: flex; flex-wrap: wrap; gap: 24px; align-items: center; flex: 1; }
.tett-list { flex: 1 1 340px; min-width: 0; list-style: none; margin: 0; padding: 4px 18px; background: var(--inset); border: 1px solid var(--line); border-radius: 8px; }
.trow { display: flex; align-items: center; gap: 14px; padding: 15px 0; font-size: 15px; border-bottom: 1px solid var(--line); }
.trow:last-child { border-bottom: 0; }
.trow__dot { width: 9px; height: 9px; border-radius: 50%; flex: none; background: #2c4062; }
.trow__k { width: 116px; flex: none; color: var(--text-2); }
.trow__v { flex: 1; min-width: 0; font: 400 14px var(--mono); color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.trow.is-done .trow__v { color: var(--text); }
.trow.is-pass .trow__dot, .trow.is-info .trow__dot { background: var(--sky); }
.trow.is-mismatch .trow__dot { background: var(--warm); }
.trow.is-leak .trow__dot { background: var(--danger); }
.ring { width: 190px; height: 190px; flex: 0 0 190px; margin: 0 auto; }
.ring path { stroke-width: 1.2; stroke-linejoin: miter; fill: #182a45; stroke: #2c4268; }
.ring.is-idle path { fill: #1c2f4d; stroke: #3d5f8f; }
:root[data-motion="full"] .ring.is-idle path { animation: ring-wait 2.4s infinite; }
.ring.is-idle path:nth-of-type(2) { animation-delay: .4s; } .ring.is-idle path:nth-of-type(3) { animation-delay: .8s; }
.ring.is-idle path:nth-of-type(4) { animation-delay: 1.2s; } .ring.is-idle path:nth-of-type(5) { animation-delay: 1.6s; } .ring.is-idle path:nth-of-type(6) { animation-delay: 2s; }
@keyframes ring-wait { 0%, 100% { fill: #1c2f4d; } 50% { fill: #3d5f8f; } }
.ring path.is-pass, .ring path.is-info { fill: var(--sky); stroke: #d6ecfa; }
.ring path.is-mismatch { fill: var(--warm); stroke: #fbe2b0; }
.ring path.is-leak { fill: var(--danger); stroke: #ffd0d0; }
.ring path.is-now { fill: #2f4f7d; stroke: #5b86b3; }
.ring__n { font: 800 34px var(--serif); fill: var(--text); }
.ring__sub { font: 400 12px var(--font); fill: var(--text-2); }
.tett-say { margin: 0; min-height: 44px; display: flex; align-items: center; gap: 12px; font-size: 15px; }
.tett-say__icon { width: 28px; height: 28px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); color: var(--sky); font: 500 13px var(--mono); }
.tett-say strong { font-weight: 600; }
.tett-say span:last-child { color: var(--text-2); }
.tett-say strong + span { color: var(--text-2); }

.kode-in, .segl-host input { background: var(--inset); border: 1px solid #263b5e; border-radius: 8px; color: var(--text); font: 15px var(--mono); padding: 13px 16px; outline: none; }
.kode-in:focus, .segl-host input:focus { border-color: var(--sky-line); }
.tries { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.tries > span { font-size: 13px; color: var(--text-3); }
.tries button { padding: 5px 10px; border: 1px solid #263b5e; border-radius: 4px; background: transparent; color: var(--text-2); font: 12px var(--mono); cursor: pointer; }
.tries button:hover { color: var(--text); border-color: var(--sky-line); }
.tries button[aria-pressed="true"] { background: var(--sky); border-color: var(--sky); color: var(--on-sky); }
.kode-answer { margin: 0; display: flex; align-items: flex-start; gap: 12px; font-size: 17px; line-height: 1.5; font-weight: 600; }
.kode-kind { margin-top: 3px; padding: 3px 7px; border-radius: 4px; background: var(--sky); color: var(--on-sky); font: 500 11px var(--mono); white-space: nowrap; }
.kode-kind:empty { display: none; }
.cron-fields { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.cron-fields[hidden] { display: none; }
.cf { display: grid; justify-items: center; gap: 4px; padding: 10px 6px 9px; background: var(--inset); border: 1px solid var(--line); border-radius: 6px; text-align: center; }
.cf__v { font: 500 22px var(--mono); }
.cf__k { font-size: 11px; color: var(--text-3); }
.cf__bar { width: 18px; height: 2px; }
.cf__m { font-size: 12px; line-height: 1.3; }
.cf:nth-child(1) .cf__v, .cf:nth-child(1) .cf__bar { color: #8cc4ea; background-color: transparent; } .cf:nth-child(1) .cf__bar { background: #8cc4ea; }
.cf:nth-child(2) .cf__v { color: #cfe3f5; } .cf:nth-child(2) .cf__bar { background: #cfe3f5; }
.cf:nth-child(3) .cf__v { color: #6fa3cf; } .cf:nth-child(3) .cf__bar { background: #6fa3cf; }
.cf:nth-child(4) .cf__v { color: #b5c2d3; } .cf:nth-child(4) .cf__bar { background: #b5c2d3; }
.cf:nth-child(5) .cf__v { color: #4f86b8; } .cf:nth-child(5) .cf__bar { background: #4f86b8; }
.kode-rows { margin: 0; padding: 4px 16px; background: var(--inset); border: 1px solid var(--line); border-radius: 8px; }
.kode-rows:empty { display: none; }
.kode-rows div { display: flex; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.kode-rows div:last-child { border-bottom: 0; }
.kode-rows dt { width: 108px; flex: none; font: 400 12px var(--mono); color: var(--text-3); padding-top: 2px; }
.kode-rows dd { margin: 0; font-size: 14px; min-width: 0; overflow-wrap: anywhere; }
.segl-host { margin: 0; display: flex; align-items: center; gap: 10px; }
.segl-host label { width: 60px; font-size: 13px; color: var(--text-3); }
.segl-host input { flex: 1; font-size: 13px; padding: 9px 12px; border-radius: 6px; }
.cmd { margin: 0; padding: 16px 18px; background: var(--inset); border: 1px solid var(--line); border-radius: 8px; font: 400 13px/1.7 var(--mono); white-space: pre-wrap; word-break: break-all; }
.cmd::before { content: "$ "; color: var(--sky); }
.segl-copy { margin: 0; display: flex; align-items: center; gap: 12px; font-size: 13px; color: var(--text-3); }

/* Animations off: nothing on the front page moves. */
:root[data-motion="reduced"] .home *, :root[data-motion="reduced"] .home *::before, :root[data-motion="reduced"] .home *::after { animation: none !important; transition: none !important; }