/* Laboratorija index, intelektas.ai brand.
   Palette and type come straight from the brand file: light reading surface,
   navy band, one cyan accent, Montserrat 700 for the wordmark and headings.

   Layout: a master-detail bench. The rail on the left lists the experiments
   and scrolls on its own, the pane on the right holds the selected one. With
   no JavaScript none of that applies: the page falls back to the plain list
   of links the markup already is. */

@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/montserrat-700-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/montserrat-700-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --surface: #ffffff;
  --surface-alt: #f4f6f9;
  --surface-dark: #0b1020;
  --ink: #14181f;
  --ink-muted: #5b6472;
  --ink-on-dark: #ffffff;
  --accent: #29b6e8;
  --accent-2: #5a43d6;
  --rule: #e6e9ee;
  --row-hover: #f4f6f9;
  --chip-ink: #4d5665;
  --chip-rule: #dde1e8;
  --tag-ink: #5a43d6;
  --tag-rule: #cdc4f4;
  --shade: rgba(11, 16, 32, 0.06);
  --pad: 26px;
  --dur: 200ms;
}

@media (prefers-color-scheme: dark) {
  :root {
    --surface: #0b1020;
    --surface-alt: #141a2e;
    --ink: #f2f4f8;
    --ink-muted: #98a3b6;
    --rule: #222a42;
    --row-hover: #141a2e;
    --chip-ink: #a3aec2;
    --chip-rule: #2c3654;
    --tag-ink: #b3a7f5;
    --tag-rule: #3d3379;
    --shade: rgba(0, 0, 0, 0.4);
  }
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--surface);
  color: var(--ink);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.6;
}

a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Band */

.band {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--surface-dark);
  color: var(--ink-on-dark);
  padding: 14px var(--pad);
}

.wordmark {
  font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -0.01em;
  text-decoration: none;
  color: var(--ink-on-dark);
  white-space: nowrap;
}
.wordmark .dot { color: var(--accent); }

.crumb {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
  font-size: 14.5px;
  color: rgba(255, 255, 255, 0.62);
}

.crumb-item {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.crumb-back {
  display: none;
  font: inherit;
  color: var(--ink-on-dark);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

.crumb-back::before { content: "\2039\00a0"; }

.lang {
  margin-left: auto;
  display: flex;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 999px;
  overflow: hidden;
}

.lang[hidden] { display: none; }

.lang-btn {
  font: inherit;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.7);
  background: none;
  border: 0;
  padding: 3px 12px;
  cursor: pointer;
}

.lang-btn.is-on {
  color: var(--surface-dark);
  background: var(--ink-on-dark);
}

/* Shell. Only a page with JavaScript gets the two column bench; without it
   the rail and the pane simply stack and the document scrolls. */

.js body {
  height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.shell { min-height: 0; }

.js .shell {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: minmax(300px, min(33%, 420px)) minmax(0, 1fr);
  min-height: 0;
}

.js .rail {
  display: flex;
  flex-direction: column;
  min-height: 0;
  border-right: 1px solid var(--rule);
}

.rail-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 22px var(--pad) 10px;
}

h1 {
  font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-weight: 700;
  font-size: 26px;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0;
}

.tally {
  margin: 0;
  font-size: 13px;
  color: var(--ink-muted);
  white-space: nowrap;
}

.rail-tools {
  padding: 0 var(--pad) 12px;
  border-bottom: 1px solid var(--rule);
}

.filter {
  position: relative;
}

.filter[hidden] { display: none; }

.filter input {
  width: 100%;
  font: inherit;
  font-size: 15px;
  color: var(--ink);
  background: var(--surface-alt);
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: 7px 38px 7px 12px;
  -webkit-appearance: none;
  appearance: none;
}

.filter input::placeholder { color: var(--ink-muted); }

.filter kbd {
  position: absolute;
  right: 9px;
  top: 50%;
  transform: translateY(-50%);
  font-family: inherit;
  font-size: 12px;
  line-height: 1;
  color: var(--ink-muted);
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 5px;
  padding: 3px 6px;
  pointer-events: none;
}

.filter input:not(:placeholder-shown) + kbd { opacity: 0; }

.chiprow {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.chiprow[hidden] { display: none; }

.facet {
  font: inherit;
  font-size: 13px;
  line-height: 1.5;
  color: var(--chip-ink);
  background: none;
  border: 1px solid var(--chip-rule);
  border-radius: 999px;
  padding: 2px 12px;
  cursor: pointer;
}

.facet:hover { border-color: var(--accent); color: var(--accent); }

.facet.is-on {
  color: var(--surface);
  background: var(--ink);
  border-color: var(--ink);
}

.js .rail-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.list {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Group labels are written by lab.js. */

.group {
  display: flex;
  gap: 6px;
  padding: 16px var(--pad) 6px;
  font-size: 11.5px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.group[hidden] { display: none; }

/* A project holds several versions of one brief. With no JavaScript it is a
   heading, the shared description, the brief and one link per version; with
   JavaScript the rail shows one row and the versions live in the pane. */

.project-name {
  font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.01em;
  margin: 18px var(--pad) 0;
}

.project-what,
.project-brief {
  margin: 6px var(--pad) 0;
  max-width: 78ch;
  font-size: 15px;
  color: var(--ink-muted);
}

.versions {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
}

.js .project-name,
.js .project-what,
.js .project-brief,
.js .versions { display: none; }

.item { border-bottom: 1px solid var(--rule); }

.item[hidden] { display: none; }

.row {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) auto 14px;
  gap: 12px;
  align-items: center;
  width: 100%;
  padding: 12px var(--pad);
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.row:hover { background: var(--row-hover); }

/* With no JavaScript there is no thumbnail and no meta line, so the row is
   one column of text and a chevron. */
html:not(.js) .row { grid-template-columns: minmax(0, 1fr) 14px; }

/* The current version of a project, parked between the name and the chevron. */
.row-v {
  align-self: center;
  font-size: 12.5px;
  color: var(--ink-muted);
  white-space: nowrap;
}

.item.is-on .row-v { color: rgba(255, 255, 255, 0.72); }

.thumb {
  display: none;
  width: 96px;
  height: 80px;
  overflow: hidden;
  border-radius: 8px;
  background: var(--surface-alt);
  border: 1px solid var(--rule);
}

.js .thumb {
  display: grid;
  place-items: center;
}

.thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top left;
}

.thumb-ini {
  font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-weight: 700;
  font-size: 20px;
  letter-spacing: 0.02em;
  color: var(--ink-muted);
}

.row-main {
  display: block;
  min-width: 0;
}

.row .name {
  display: block;
  font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -0.01em;
  line-height: 1.25;
}

/* The description belongs to the pane. In the rail it would push every row
   to twice the height, so the script keeps it for the pane and the filter. */
.js .row .what { display: none; }

.row .what {
  display: block;
  color: var(--ink-muted);
  font-size: 15px;
}

.row .meta {
  display: block;
  margin-top: 3px;
  font-size: 12.5px;
  color: var(--ink-muted);
}

.status-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 7px;
  border-radius: 50%;
  border: 1.5px solid var(--accent);
  background: var(--accent);
  vertical-align: 1px;
}

.status-dot.dot-experimental { background: none; }

.status-dot.dot-archive {
  border-color: var(--ink-muted);
  background: none;
}

.item[data-status="archyvas"] .row { color: var(--ink-muted); }

.chev {
  align-self: center;
  justify-self: end;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--ink-muted);
  border-bottom: 2px solid var(--ink-muted);
  transform: rotate(-45deg);
}

.item.is-last .row {
  background: var(--row-hover);
  box-shadow: inset 3px 0 0 var(--accent);
}

.item.is-on .row {
  background: var(--surface-dark);
  color: var(--ink-on-dark);
}

.item.is-on .row .meta { color: rgba(255, 255, 255, 0.72); }
.item.is-on .chev { border-color: rgba(255, 255, 255, 0.72); }
.item.is-on .thumb { border-color: rgba(255, 255, 255, 0.3); }

.rail-foot {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
  padding: 8px var(--pad);
  border-top: 1px solid var(--rule);
  font-size: 12.5px;
  color: var(--ink-muted);
}

.rail-foot[hidden] { display: none; }

.foot-hint {
  margin-left: auto;
  border: 1px solid var(--rule);
  border-radius: 5px;
  padding: 0 6px;
}

.empty {
  margin: 0;
  padding: 26px var(--pad);
  color: var(--ink-muted);
}

.empty[hidden] { display: none; }

/* The peek markup is the pane's raw material: lab.js moves the device out of
   it and reads the note. On the page itself it never shows. */
.peek { display: none; }

/* Pane */

.js .pane {
  overflow-y: auto;
  padding: 26px 34px 40px;
}

.pane-intro[hidden] { display: none; }
.pane-detail[hidden] { display: none; }

.lead {
  margin: 0;
  max-width: 46ch;
  font-size: 19px;
}

.made {
  margin: 12px 0 0;
  max-width: 52ch;
  font-size: 16px;
  color: var(--ink-muted);
}

.made a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid var(--accent);
}

.pick {
  margin: 26px 0 0;
  font-size: 16px;
  color: var(--ink-muted);
}

.d-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}

.d-name {
  font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-weight: 700;
  font-size: 28px;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0;
}

.d-meta {
  margin: 10px 0 0;
  font-size: 14px;
  color: var(--ink-muted);
}

.d-what {
  margin: 10px 0 0;
  max-width: 68ch;
  font-size: 16px;
}

.btn {
  display: inline-block;
  font-size: 15px;
  line-height: 1.3;
  text-decoration: none;
  color: var(--surface);
  background: var(--ink);
  border: 1px solid var(--ink);
  border-radius: 10px;
  padding: 9px 16px;
  white-space: nowrap;
}

.btn:hover { background: var(--accent); border-color: var(--accent); color: #0b1020; }

.btn-ghost {
  color: var(--ink);
  background: none;
  border-color: var(--chip-rule);
}

.btn-ghost:hover { background: none; color: var(--accent); border-color: var(--accent); }

.btn-open { font-size: 16px; padding: 10px 18px; }

/* Tabs */

.tabs {
  display: flex;
  gap: 22px;
  margin-top: 22px;
  border-bottom: 1px solid var(--rule);
  overflow-x: auto;
}

.tab {
  font: inherit;
  font-size: 15px;
  color: var(--ink-muted);
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  padding: 0 0 8px;
  white-space: nowrap;
  cursor: pointer;
}

.tab:hover { color: var(--ink); }

.tab.is-on {
  color: var(--ink);
  border-bottom-color: var(--accent);
}

.panel { padding-top: 20px; }
.panel[hidden] { display: none; }

.d-stage { position: relative; }

.d-note {
  margin: 0 0 16px;
  max-width: 68ch;
  font-size: 15.5px;
  color: var(--ink-muted);
}

.d-tools {
  margin: 0 0 12px;
  font-size: 15px;
}

.d-brief {
  margin: 0 0 16px;
  max-width: 74ch;
  font-size: 15.5px;
  color: var(--ink-muted);
}

.d-brief strong { color: var(--ink); }

.d-broke {
  margin: 0;
  max-width: 68ch;
  font-size: 15.5px;
}

.d-project-what {
  margin: 0 0 12px;
  max-width: 74ch;
  font-size: 15.5px;
}

.d-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}

/* Versions */

.vrow {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

.vrow-label {
  font-size: 13px;
  color: var(--ink-muted);
}

.vpill {
  font: inherit;
  font-size: 14px;
  line-height: 1.5;
  color: var(--chip-ink);
  background: none;
  border: 1px solid var(--chip-rule);
  border-radius: 999px;
  padding: 2px 14px;
  cursor: pointer;
}

.vpill:hover { border-color: var(--accent); color: var(--accent); }

.vpill.is-on {
  color: var(--surface);
  background: var(--ink);
  border-color: var(--ink);
}

.tab-n {
  margin-left: 6px;
  font-size: 12.5px;
  color: var(--ink-muted);
}

.tab.is-on .tab-n { color: var(--accent); }

/* The preview on the left, what is new in this build on the right. */

.live-cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 300px);
  gap: 24px;
  align-items: start;
}

.whatsnew {
  background: var(--surface-alt);
  border: 1px solid var(--rule);
  border-radius: 12px;
  padding: 16px 18px;
}

.wn-label {
  margin: 0;
  font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-weight: 700;
  font-size: 11.5px;
  letter-spacing: 0.09em;
  color: var(--ink-muted);
}

.wn-text {
  margin: 8px 0 0;
  font-size: 15px;
}

.wn-facts {
  list-style: none;
  margin: 14px 0 0;
  padding: 14px 0 0;
  border-top: 1px solid var(--rule);
  font-size: 13.5px;
  color: var(--ink-muted);
}

.wn-facts li + li { margin-top: 4px; }

.wn-k {
  display: inline-block;
  min-width: 56px;
  color: var(--ink-muted);
}

.wn-v { color: var(--ink); }

/* Every version as a thumbnail, under both columns. */

.allv {
  margin-top: 26px;
  padding-top: 16px;
  border-top: 1px solid var(--rule);
}

.allv-label {
  margin: 0 0 12px;
  font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-weight: 700;
  font-size: 11.5px;
  letter-spacing: 0.09em;
  color: var(--ink-muted);
}

.allv-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.allv-item {
  font: inherit;
  text-align: left;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

.allv-thumb {
  display: block;
  width: 160px;
  height: 100px;
  overflow: hidden;
  border-radius: 8px;
  background: var(--surface-alt);
  border: 1px solid var(--rule);
}

.allv-item.is-on .allv-thumb {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent);
}

.allv-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top left;
}

.allv-cap {
  display: block;
  margin-top: 6px;
  font-size: 13px;
  color: var(--ink-muted);
}

.allv-item.is-on .allv-cap { color: var(--ink); }

.allv-more {
  font: inherit;
  font-size: 13.5px;
  color: var(--ink-muted);
  background: none;
  border: 0;
  padding: 12px 0 0;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: var(--chip-rule);
  text-underline-offset: 3px;
}

.allv-more:hover { color: var(--accent); }

/* The history: one entry per build, newest first. */

.tl {
  list-style: none;
  margin: 0;
  padding: 0;
}

.tl-item {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 16px;
  padding: 16px 0;
  border-top: 1px solid var(--rule);
}

.tl-item:first-child { border-top: 0; padding-top: 0; }

.tl-side { text-align: left; }

.tl-v {
  display: block;
  font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-weight: 700;
  font-size: 13px;
  color: var(--ink-muted);
}

.tl-item.is-on .tl-v { color: var(--accent); }

.tl-thumb {
  display: block;
  margin-top: 8px;
  padding: 0;
  width: 64px;
  height: 44px;
  overflow: hidden;
  border-radius: 6px;
  border: 1px solid var(--rule);
  background: var(--surface-alt);
  cursor: pointer;
}

.tl-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top left;
}

.tl-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
}

.tl-title {
  margin: 0;
  font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -0.01em;
}

.badge {
  font-size: 11.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tag-ink);
  border: 1px solid var(--tag-rule);
  border-radius: 999px;
  padding: 1px 9px;
}

.badge-now {
  color: var(--surface);
  background: var(--ink);
  border-color: var(--ink);
}

.tl-text {
  margin: 6px 0 0;
  max-width: 68ch;
  font-size: 15px;
}

.tl-facts {
  margin: 6px 0 0;
  font-size: 13.5px;
  color: var(--ink-muted);
}

.tl-open {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid var(--accent);
}

.tl-foot {
  margin: 16px 0 0;
  font-size: 13px;
  color: var(--ink-muted);
}

/* Device frames. The iframe renders at its real size and is scaled down,
   so a desktop app keeps its desktop layout inside a small box. */

.device {
  position: relative;
  overflow: hidden;
  background: var(--surface-alt);
  border: 1px solid var(--rule);
}

.device-phone {
  width: min(100%, 300px);
  border-radius: 26px;
  border-width: 8px;
  border-color: var(--surface-dark);
  box-shadow: 0 10px 30px var(--shade);
}

.device-wide {
  width: 100%;
  max-width: 1040px;
  border-radius: 12px;
  box-shadow: 0 10px 30px var(--shade);
}

.device .stage {
  transform-origin: 0 0;
  will-change: transform;
}

.device iframe {
  display: block;
  border: 0;
  background: #fff;
}

.d-stage.is-poster .device { display: none; }

.poster {
  display: block;
  width: 100%;
  font: inherit;
  color: var(--ink-muted);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-align: left;
}

.poster img {
  display: block;
  width: 100%;
  border-radius: 12px;
  border: 1px solid var(--rule);
}

.poster-box {
  display: block;
  height: 200px;
  border-radius: 12px;
  background: var(--surface-alt);
  border: 1px solid var(--rule);
}

.poster-cap {
  display: block;
  margin-top: 8px;
  font-size: 14px;
}

/* Screenshots */

.shots {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 18px;
}

.shot { margin: 0; }

.shot img {
  display: block;
  width: 180px;
  border-radius: 8px;
  border: 1px solid var(--rule);
}

.shot-big img { width: min(100%, 520px); }

.shot-btn {
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

/* Pager */

.pager {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-top: 30px;
  padding-top: 14px;
  border-top: 1px solid var(--rule);
}

.pager button {
  font: inherit;
  font-size: 15px;
  color: var(--ink-muted);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

.pager button:hover { color: var(--accent); }

.pager-next { margin-left: auto; }

footer {
  padding: 18px var(--pad);
  border-top: 1px solid var(--rule);
  color: var(--ink-muted);
  font-size: 14px;
}

.js footer { flex: 0 0 auto; }

footer a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--accent);
  padding-bottom: 1px;
}

/* Mobile: two screens on one page. The rail is the first, the pane is the
   second, and the band's back control walks between them. */

@media (max-width: 899px) {
  .js .shell { grid-template-columns: minmax(0, 1fr); }
  .js .rail { border-right: 0; }
  .js body[data-view="detail"] .rail { display: none; }
  .js body[data-view="rail"] .pane { display: none; }
  .js body[data-view="rail"] .crumb-back { display: none; }
  .js body[data-view="detail"] .crumb-back { display: inline-block; }
  .js body[data-view="detail"] .crumb-lab { display: none; }
  .js body[data-view="detail"] footer { display: none; }
  .js .pane { padding: 22px var(--pad) 34px; }
  .js .rail-foot .foot-hint { display: none; }
  .d-head { flex-direction: column; align-items: stretch; gap: 14px; }
  .d-name { font-size: 24px; }
  .btn-open { text-align: center; }
  .device-wide { max-width: 100%; }
  .shot img { width: 140px; }
  .live-cols { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .vrow {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
  }
  .vrow-label { flex: 0 0 auto; }
  .vpill { flex: 0 0 auto; }
  .tl-item { grid-template-columns: 52px minmax(0, 1fr); gap: 12px; }
  .tl-thumb { width: 52px; height: 36px; }
}

@media (max-width: 560px) {
  :root { --pad: 18px; }
  .thumb { width: 76px; height: 64px; }
  .row { grid-template-columns: 76px minmax(0, 1fr) auto 14px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}