/* Tiny Lab site: layout only. Every colour, size step and duration is a design-system token (ds/tokens.css), and
   the components are ds/components/bundle.css, unchanged. */

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 64px; }
body { margin: 0; background: var(--desktop); color: var(--on-desktop); font-family: var(--font-sans); -webkit-font-smoothing: antialiased; }
img, video { display: block; max-width: 100%; }
a { color: inherit; }
.wrap { width: min(1200px, 100% - 2 * var(--space-5)); margin-inline: auto; }
.ico16 { width: 16px; height: 16px; image-rendering: pixelated; }
.ico32 { width: 32px; height: 32px; image-rendering: pixelated; flex: none; }
.pixels img, img.pixels { image-rendering: pixelated; }
h1, h2, h3, p, figure, ol, ul { margin: 0; }

/* ---------- top bar ---------- */
.top { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: var(--space-5); padding: var(--space-3) var(--space-5);
  background: var(--desktop); box-shadow: 0 2px 0 var(--bevel-edge); }
.top-brand { display: inline-flex; align-items: center; gap: var(--space-3); text-decoration: none; color: var(--on-desktop); }
.top-nav { display: flex; gap: var(--space-5); margin-left: auto; }
.top-nav a { text-decoration: none; font-variant-ligatures: none; }
.top-nav a:hover { text-decoration: underline; text-underline-offset: 4px; }
.themes { display: flex; gap: var(--space-1); }
.theme-btn { gap: var(--space-2); }
.theme-btn[aria-pressed="true"] { box-shadow: var(--tl-pressed); }
/* each dot carries its own data-theme, so it shows that theme's desktop whatever theme is on */
.dot { width: 12px; height: 12px; flex: none; background: var(--desktop); box-shadow: inset 0 0 0 1px var(--bevel-edge); }

/* ---------- hero ---------- */
.hero { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-8); align-items: center; padding-block: var(--space-8); }
.hero-copy { display: grid; gap: var(--space-5); justify-items: start; }
.logo { width: min(280px, 60vw); aspect-ratio: 1; }
.logo svg { width: 100%; height: 100%; display: block; }
.kicker, .spec { color: var(--on-desktop); }
.lede { max-width: 46ch; font-size: 16px; line-height: 24px; }
.cta { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.cta .tl-btn { text-decoration: none; }
/* on the desktop the main button takes the selection colours, as EmptyState does */
.tl-btn-primary.on-desk { background: var(--select); color: var(--on-select); }
.is-soon { opacity: 0.7; cursor: default; }

.hero-win { min-width: 0; }
.ba { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--canvas); touch-action: pan-y; user-select: none; }
.ba-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ba-after { position: absolute; inset: 0; clip-path: inset(0 0 0 var(--ba, 50%)); }
.ba-after.is-pixel img { image-rendering: pixelated; }
.ba-line { position: absolute; top: 0; bottom: 0; left: var(--ba, 50%); width: 4px; margin-left: -2px; background: var(--primary);
  box-shadow: 0 0 0 1px var(--bevel-edge); pointer-events: none; }
.ba-grip { position: absolute; top: 50%; left: 50%; width: 24px; height: 40px; margin: -20px 0 0 -12px; background: var(--face); box-shadow: var(--tl-raised); }
.ba-range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.ba-range:focus-visible + .ba-line, .ba:focus-within .ba-line { outline: 2px solid var(--focus-inverse); }
.ba-plate { position: absolute; top: var(--space-3); pointer-events: none; }
.ba-plate.is-left { left: var(--space-3); }
.ba-plate.is-right { right: var(--space-3); }
.plate { display: inline-flex; align-items: center; padding: var(--space-1) var(--space-3); background: var(--face); color: var(--ink);
  box-shadow: var(--tl-raised); font-family: var(--font-pixel); font-size: 14px; line-height: 16px; font-variant-ligatures: none; }
.stamp { position: absolute; right: var(--space-5); bottom: var(--space-4); font-family: var(--font-dot); font-weight: 900; font-size: 20px;
  color: var(--datestamp); pointer-events: none; text-shadow: 0 0 6px color-mix(in srgb, var(--datestamp) 50%, transparent); }
.ba-tabs { padding: var(--space-2) var(--space-2) 0; background: var(--window); }

/* ---------- the reel: shots step past like film through a gate ---------- */
.reel { overflow: hidden; background: var(--film); box-shadow: 0 2px 0 var(--bevel-edge), 0 -2px 0 var(--bevel-edge); }
.reel-track { width: max-content; overflow: visible; animation: reel 120s steps(var(--reel-steps, 240)) infinite; }
.reel-track .tl-frame.is-tall .tl-frame-img { width: 68px; }
.reel-track .tl-frame { cursor: default; }
@keyframes reel { to { transform: translateX(-50%); } }

/* ---------- sections ---------- */
section { scroll-margin-top: 64px; }
/* every section gets the same room above and below; the plain ones sit straight on the desktop */
.steps, .plain, .video, .faq, .download { padding-block: calc(var(--space-8) + var(--space-5)); }
.band { padding-block: calc(var(--space-8) + var(--space-5)); }
.section-kicker { margin-bottom: var(--space-5); }
.step-list { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); }
.step-card .tl-window-body { display: grid; gap: var(--space-3); justify-items: start; padding: var(--space-5); }

.band { background: var(--panelbar); color: var(--on-panelbar);
  background-image: linear-gradient(90deg, var(--panelbar), var(--panelbar-end)); }
.plain .tiles { margin-top: var(--space-2); }
.plain .soften { margin-top: var(--space-7); }
.band .tl-mark { --tl-mark-out: var(--logo-tiny); --tl-mark-in: var(--on-panelbar); }
.band-head { display: grid; gap: var(--space-3); max-width: 62ch; margin-bottom: var(--space-6); }
.band-head .body { font-size: 16px; line-height: 24px; }
.band-head.is-plain { color: var(--on-desktop); }
.sub-h { margin: var(--space-7) 0 var(--space-4); }

.film-row { padding-block: var(--space-2); }
.film-row .tl-frame { cursor: default; }
.film-row .tl-frame-img, .sheet .tl-frame-img { width: 220px; height: 165px; }
.sheet .tl-frame.is-tall .tl-frame-img { width: 124px; }
.film-row .tl-frame-img img, .sheet .tl-frame-img img { image-rendering: auto; }

.grain { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-7); align-items: center; margin-top: var(--space-7); }
.grain-win { max-width: 520px; }
.grain-copy { display: grid; gap: var(--space-3); justify-items: start; }
.grain-copy .tl-lcd { margin-bottom: var(--space-2); }

.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); }
.tile { display: grid; gap: var(--space-2); }
.tile-img { aspect-ratio: 4 / 3; padding: 3px; background: var(--canvas); box-shadow: var(--tl-sunken); }
.tile-img img { width: 100%; height: 100%; object-fit: cover; }
.tile figcaption { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); }
.band .tile figcaption .caption { color: var(--on-panelbar); opacity: 0.8; }
.soften { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-5); align-items: center; margin-top: var(--space-6); }
.soften-copy { color: var(--on-desktop); }

.sheet .tl-frame { cursor: default; }
.swatches { display: flex; flex-wrap: wrap; gap: var(--space-3); padding: var(--space-4); background: var(--window); box-shadow: var(--tl-frame); }
.swatches .tl-swatch { width: 148px; cursor: default; }
.swatches .tl-swatch-thumb { width: 136px; height: 102px; }

.video-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: var(--space-7); align-items: start; }
.tv-screen { background: var(--film); aspect-ratio: 4 / 3; display: grid; place-items: center; }
.tv-screen video { width: 100%; height: 100%; object-fit: contain; }
.tv-tabs { padding: var(--space-2) var(--space-2) 0; background: var(--window); flex-wrap: wrap; }
.fx-list { list-style: none; padding: 0; display: grid; gap: var(--space-5); color: var(--on-desktop); }
.fx-list li { display: grid; gap: var(--space-1); }
.fx-list .chrome { font-size: 16px; }

/* ---------- the living demo: the app's own window, in its own theme ---------- */
.demo-win { color: var(--ink); }
.demo-win .tl-window-body { padding: 0; }
.demo-ed { display: grid; grid-template-columns: minmax(0, 1fr) 240px; background: var(--face); }
.demo-stage { display: grid; min-width: 0; }
.demo-canvas { position: relative; display: grid; place-items: center; padding: var(--space-7) var(--space-5) var(--space-5); background: var(--canvas); }
.demo-photo { width: min(100%, 720px); height: auto; aspect-ratio: 4 / 3; object-fit: contain; }
.demo-canvas.is-pixel .demo-photo { image-rendering: pixelated; }
.demo-plate { position: absolute; left: var(--space-4); top: var(--space-4); gap: var(--space-2); }
.demo-looks { display: grid; grid-template-columns: 120px minmax(0, 1fr); background: var(--window);
  box-shadow: inset 0 1px 0 var(--bevel-lo), inset 0 2px 0 var(--bevel-hi); }
.demo-pick { display: grid; align-content: center; gap: 2px; padding: var(--space-2); background: var(--face); box-shadow: inset -1px 0 0 var(--bevel-lo); }
.demo-tab { appearance: none; border: 0; display: grid; gap: 2px; padding: var(--space-1) var(--space-2); background: transparent; color: var(--ink-muted);
  font: inherit; text-align: left; cursor: pointer; }
.demo-tab:hover { color: var(--ink); }
.demo-tab[aria-selected="true"] { background: var(--select); color: var(--on-select); }
.demo-tab[aria-selected="true"] .demo-tab-now { color: var(--on-select); }
.demo-tab-name { font-family: var(--font-pixel); font-size: 16px; line-height: 16px; font-variant-ligatures: none; }
.demo-tab-now { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.demo-swatches { display: flex; align-items: start; min-width: 0; padding: var(--space-2) var(--space-3); overflow-x: auto; }
.demo-swatches .tl-swatch { width: 96px; gap: var(--space-1); padding: var(--space-1) 2px; }
.demo-swatches .tl-swatch-thumb { width: 84px; height: 63px; }
.demo-swatches .tl-swatch-name { font-size: 14px; line-height: 16px; max-width: 92px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.demo-panel { display: grid; align-content: start; gap: var(--space-5); padding: var(--space-4); background: var(--window);
  box-shadow: inset 2px 0 0 var(--bevel-lo); }
.demo-group { display: grid; gap: var(--space-2); }
.demo-group > .display-sm { color: var(--ink-muted); }
.demo-film .tl-film { min-height: 96px; }
.demo-themes { display: flex; gap: var(--space-1); align-items: center; }
.demo-themes .tl-btn { gap: var(--space-2); }
.demo-dot { width: 12px; height: 12px; flex: none; background: var(--desktop); box-shadow: inset 0 0 0 1px var(--bevel-edge); }

/* ---------- feedback ---------- */
.feedback-win { margin-top: var(--space-7); max-width: 720px; }
.feedback-form { display: grid; gap: var(--space-3); padding: var(--space-5); }
.feedback-area { height: auto; padding: var(--space-2) var(--space-3); }
.feedback-area textarea { width: 100%; resize: vertical; min-height: 110px; font: inherit; line-height: 20px; }
.cf-turnstile { min-height: 65px; }
.trap { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* ---------- support ---------- */
.support { padding-block: 0 calc(var(--space-8) + var(--space-5)); }
.support-body { display: flex; gap: var(--space-6); align-items: center; padding: var(--space-6); }
.support-copy { display: grid; gap: var(--space-3); justify-items: start; max-width: 62ch; }

.shot { padding: 3px; background: var(--window); box-shadow: var(--tl-frame), var(--shadow-window); }
.shot img { width: 100%; height: auto; }

.download { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-7); align-items: center; }
.dl-hero { padding: 0; background: transparent; }
.first-open .tl-dialog-msg { display: grid; gap: var(--space-3); }
.open-steps { padding-left: var(--space-6); display: grid; gap: var(--space-2); }

.faq-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); align-items: start; }
.faq-list summary { cursor: pointer; list-style: none; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: "+"; margin-left: auto; font-family: var(--font-pixel); padding-right: var(--space-2); }
.faq-list details[open] summary::after { content: "−"; }

.foot { padding-block: var(--space-7); box-shadow: 0 -2px 0 var(--bevel-edge); }
.foot-in { display: grid; gap: var(--space-3); justify-items: start; color: var(--on-desktop); }

/* ---------- small screens ---------- */
@media (max-width: 900px) {
  .hero, .grain, .video-grid, .download { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
  .demo-ed { grid-template-columns: minmax(0, 1fr); }
  .demo-looks { grid-template-columns: minmax(0, 1fr); }
  .demo-pick { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
  .demo-win .tl-toolbar-end { width: 100%; }
  .support-body { flex-direction: column; align-items: start; padding: var(--space-5); }
  .hero { padding-block: var(--space-6); }
  .hero h1 { font-size: 32px; }
  .logo { width: min(200px, 50vw); }
  .step-list, .tiles, .faq-list { grid-template-columns: minmax(0, 1fr); }
  .soften { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .soften-copy { grid-column: 1 / -1; }
  .top-nav { display: none; }
  .themes { margin-left: auto; }
  .theme-btn span { display: none; }
  .film-row .tl-frame-img, .sheet .tl-frame-img { width: 160px; height: 120px; }
  .sheet .tl-frame.is-tall .tl-frame-img { width: 90px; }
}
@media (max-width: 560px) {
  .tiles.is-frames { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .swatches .tl-swatch { width: calc(50% - var(--space-2)); }
  .swatches .tl-swatch-thumb { width: 100%; height: auto; aspect-ratio: 4 / 3; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reel-track { animation: none; }
}