/* StarForge: the screen wall (A) with the black-acrylic bezel (B) and the wall-wide shape picker (C), on dark grey.
   The screens and photos are the content; everything else is quiet.
   Materials, from the laser-cut sign: black acrylic (the screen bezels), birch ply (the download buttons). */
:root {
  --wall: #202123;
  --wall-lift: #2a2b2e;
  --ink: #ececea;
  --ink-2: #b3b3b0;
  --ink-3: #85858a;
  --birch: #e4d4b4;
  --birch-ink: #1a140c;
    --focus: #e4d4b4;
  --gutter: 24px;
  --bar-h: 64px;
  --font: "Saira", system-ui, sans-serif;
  --display: "Michroma", "Saira", sans-serif;
  color-scheme: dark;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; background: var(--wall); color: var(--ink); font: 400 15px/1.5 var(--font); font-stretch: 105%; }
a { color: inherit; }
button, input, select { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--birch); color: var(--birch-ink); padding: 6px 10px; z-index: 50; }
.skip:focus { left: 8px; }
.txt { background: none; border: 0; padding: 0; cursor: pointer; color: var(--ink-2); font-size: 14px; }
.txt:hover { color: var(--ink); }

/* ---------- header: logo, two words, the colour dial ---------- */
.bar {
  position: sticky; top: 0; z-index: 20; height: var(--bar-h); display: flex; align-items: center; gap: 36px;
  padding: 0 var(--gutter); background: rgba(32, 33, 35, .92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.brand { color: var(--birch); display: block; flex: none; }
.logo svg { height: 36px; width: auto; display: block; }
.nav { display: flex; gap: 24px; }
.nav a { text-decoration: none; font-family: var(--display); font-size: 12px; letter-spacing: .04em; font-weight: 400; color: var(--ink-3); padding: 6px 0; }
.nav a:hover { color: var(--ink); }
.nav a[aria-current="page"] { color: var(--ink); }
.shapes { margin-left: auto; display: flex; align-items: center; gap: 2px; }
.shapes button { border: 0; background: none; cursor: pointer; padding: 2px 5px; display: grid; justify-items: center; color: var(--ink-3); }
.shapes svg { width: 22px; height: 22px; display: block; }
.shapes rect { fill: none; stroke: currentColor; stroke-width: 1.4; }
.shapes span { font-size: 10px; font-variant-numeric: tabular-nums; line-height: 1.2; }
.shapes button:hover { color: var(--ink-2); }
.shapes button[aria-checked="true"] { color: var(--ink); }
.shapes button[aria-checked="true"] rect { fill: currentColor; fill-opacity: .2; stroke-width: 1.8; }
.tint { margin-left: 20px; display: flex; align-items: center; gap: 4px; }
.sw {
  width: 20px; height: 20px; border-radius: 50%; border: 0; padding: 0; cursor: pointer; position: relative; flex: none;
  background: var(--c); margin: 3px;
}
.sw::after { content: ""; position: absolute; inset: 6px; border-radius: 50%; background: var(--c2); }
.sw.all { background: conic-gradient(#57d9e0 0 25%, #ffb347 0 50%, #ff5a4a 0 75%, #7cf05a 0); }
.sw.all::after { display: none; }
.sw[aria-checked="true"] { box-shadow: 0 0 0 2px var(--wall), 0 0 0 3.5px var(--ink); }
.motion { flex: none; width: 32px; height: 32px; border: 0; background: none; color: var(--ink-2); cursor: pointer; display: grid; place-items: center; }
.motion:hover { color: var(--ink); }
.motion svg { width: 13px; height: 13px; fill: currentColor; }
.motion .i-play { display: none; }
.motion[aria-pressed="true"] .i-play { display: block; }
.motion[aria-pressed="true"] .i-pause { display: none; }

main { padding: 0 var(--gutter); outline: none; min-height: calc(100vh - var(--bar-h) - 48px); }
.foot { padding: 16px var(--gutter); color: var(--ink-3); font-size: 12px; }
.empty { padding: 40px 0; }

/* ---------- glass set into the wall: a bullnose recess, no frame ---------- */
.glass { display: block; position: relative; border-radius: 10px; overflow: hidden; background: #020405; }
.glass canvas { display: block; width: 100%; height: 100%; }
.glass::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 3px 6px rgba(0, 0, 0, .7), inset 0 0 0 1px rgba(0, 0, 0, .7);
}

/* ---------- the wall ---------- */
.bank { padding-top: 22px; }
.bank h2 { margin: 0 0 12px; font-family: var(--display); font-size: 12px; font-weight: 400; letter-spacing: .04em; color: var(--ink-2); }
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--tile-min, 300px), 1fr)); gap: 16px 12px; align-items: end; }
body[data-shape="4x3"] { --tile-min: 280px; }
body[data-shape="1x1"] { --tile-min: 220px; }
body[data-shape="9x16"] { --tile-min: 170px; }
body[data-shape="32x9"] { --tile-min: 440px; }
.tile { display: block; text-decoration: none; }
.tile .glass { aspect-ratio: var(--tile-ar, 16 / 9); box-shadow: 0 0 0 1px rgba(0, 0, 0, .55), 0 1px 0 rgba(255, 255, 255, .06); transition: box-shadow .15s ease; }
.tile:hover .glass { box-shadow: 0 0 0 2px var(--ink-3); }
.tile:focus-visible { outline: none; }
.tile:focus-visible .glass { box-shadow: 0 0 0 2px var(--focus); }
.tile-name { display: block; margin: 7px 2px 0; font-size: 13px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tile:hover .tile-name, .tile:focus-visible .tile-name { color: var(--ink); }
.tile-name .po { color: var(--ink-3); opacity: .8; }

/* the two sets: screen-accurate replicas and our originals */
.sets { display: flex; gap: 28px; padding-top: 18px; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.sets a { position: relative; padding: 0 0 12px; text-decoration: none; font-family: var(--display); font-size: 14px; letter-spacing: .03em; color: var(--ink-3); }
.sets a span { margin-left: 8px; font-family: var(--font); font-size: 13px; letter-spacing: 0; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.sets a:hover { color: var(--ink-2); }
.sets a[aria-current="page"] { color: var(--ink); }
.sets a[aria-current="page"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--ink); }
.sets a:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; border-radius: 2px; }
.bank h2 span { margin-left: 10px; font-family: var(--font); letter-spacing: 0; color: var(--ink-3); }

/* versions of one screen, under the stage */
.versions { width: 100%; display: flex; gap: 24px; margin-top: 14px; }
.vset { display: grid; gap: 6px; flex: var(--n) 1 0; min-width: 0; }
.vset .lab { font-size: 12px; color: var(--ink-3); }
.vrow { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 8px; }
.ver { display: grid; gap: 4px; min-width: 0; text-decoration: none; font-size: 12px; color: var(--ink-3); }
.ver .vglass { display: block; aspect-ratio: 16 / 9; border-radius: 5px; overflow: hidden; background: #000; box-shadow: 0 0 0 1px rgba(0, 0, 0, .55); }
.ver canvas { display: block; width: 100%; height: 100%; }
.ver span:last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ver:hover { color: var(--ink); }
.ver:hover .vglass { box-shadow: 0 0 0 2px var(--ink-3); }
.ver[aria-current="page"] { color: var(--ink); }
.ver[aria-current="page"] .vglass { box-shadow: 0 0 0 2px var(--ink); }
.ver:focus-visible { outline: none; }
.ver:focus-visible .vglass { box-shadow: 0 0 0 2px var(--focus); }

.shelf.real .glass { height: 320px; }
.refs-big { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.refs-big a { display: grid; gap: 5px; text-decoration: none; font-size: 12px; color: var(--ink-3); }
.refs-big img, .refs-big video { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 6px; display: block; }
.refs-big video { background: #000; height: auto; aspect-ratio: var(--ar); object-fit: contain; }
.refs-big .clip-tile { grid-column: span 2; }
.refs-big span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.refs-big a:hover { color: var(--ink); }

/* ---------- the screen-accurate gallery: justified rows, every screen at its real shape, each row filling the width
   (a tile grows in proportion to its aspect; the spacer keeps the last row from stretching) ---------- */
.prods { flex-wrap: wrap; gap: 6px 18px; padding-top: 18px; }
.gallery { --row: 250px; display: flex; flex-wrap: wrap; gap: 18px 12px; padding-top: 18px; }
.gallery .tile { flex: none; min-width: 0; }
.gallery .glass { width: 100%; height: auto; aspect-ratio: var(--ar); }
.gallery .tile-name .po { margin-left: 6px; }
@media (min-width: 1700px) { .gallery { --row: 300px; } }
@media (max-width: 1100px) { .gallery { --row: 200px; } }
@media (max-width: 560px) { .gallery { --row: 150px; gap: 14px 8px; } .prods { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; } .prods .opt { flex: none; } }

/* ---------- panels: each board at its real proportions, on one shelf height ---------- */
.shelf { display: flex; flex-wrap: wrap; gap: 18px 14px; align-items: flex-end; }
.shelf .glass { height: 260px; width: auto; aspect-ratio: var(--ar); }

/* ---------- ships ---------- */
.ships #viewer { cursor: grab; touch-action: none; }
.ships #viewer.grab { cursor: grabbing; }
.fleet { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 14px 10px; }
.fleet .glass { aspect-ratio: 16 / 10; }
.fleet .tile.on .glass { box-shadow: 0 0 0 2px var(--ink-2); }
.ships .below { grid-column: 1 / -1; }
.ships .stage { height: calc(72vh - var(--bar-h)); }

/* ---------- program page ---------- */
.prog { display: grid; grid-template-columns: minmax(0, 1fr) 296px; column-gap: 40px; padding-top: 12px; }
.stage { height: calc(100vh - var(--bar-h) - 28px); display: grid; place-items: start center; padding-top: 8px; }
.bezel { /* black acrylic, as on the sign: gloss along the top edge */
  padding: 14px; border-radius: 22px; background: #0a0a0b;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), inset 0 0 0 1px rgba(255, 255, 255, .04), 0 24px 48px -24px rgba(0, 0, 0, .8);
}
.prog.native .stage { height: auto; place-items: start; }
.dock { padding-top: 8px; align-self: start; position: sticky; top: calc(var(--bar-h) + 12px); }
.step { display: flex; align-items: center; gap: 4px; font-size: 14px; color: var(--ink-3); margin-bottom: 22px; }
.step a { text-decoration: none; color: var(--ink-3); padding: 2px 8px; font-size: 18px; line-height: 1; }
.step a.back { font-size: 14px; }
.step a:hover { color: var(--ink); }
.step .back { margin-right: auto; padding-left: 0; }
.dock h1 { margin: 0 0 26px; font-family: var(--display); font-size: 24px; line-height: 1.2; font-weight: 400; }
.controls { display: grid; gap: 14px; }
.row { display: grid; grid-template-columns: 62px 1fr auto; align-items: center; gap: 0 12px; min-height: 30px; }
.row > :nth-child(2):last-child { grid-column: 2 / 4; }
.lab { font-size: 13px; color: var(--ink-3); }
.swatches { display: flex; flex-wrap: wrap; gap: 2px; margin-left: -3px; }
output { font-size: 13px; color: var(--ink-2); font-variant-numeric: tabular-nums; min-width: 40px; text-align: right; }
input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 24px; background: none; margin: 0; }
input[type=range]::-webkit-slider-runnable-track { height: 2px; background: var(--ink-3); }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; margin-top: -6px; border-radius: 50%; background: var(--ink); }
input[type=range]::-moz-range-track { height: 2px; background: var(--ink-3); }
input[type=range]::-moz-range-thumb { width: 14px; height: 14px; border: 0; border-radius: 50%; background: var(--ink); }
.seed { display: flex; align-items: baseline; gap: 14px; }
.seed input {
  width: 64px; padding: 3px 0; border: 0; border-bottom: 1px solid var(--ink-3); background: none; font-size: 15px; font-variant-numeric: tabular-nums;
  -moz-appearance: textfield;
}
.seed input::-webkit-inner-spin-button { -webkit-appearance: none; }
.seed input:focus { outline: none; border-bottom-color: var(--ink); }
.aspects { display: flex; gap: 2px; margin-left: -6px; }
.aspects button { border: 0; background: none; cursor: pointer; padding: 2px 6px; display: grid; justify-items: center; gap: 1px; color: var(--ink-3); }
.aspects svg { width: 22px; height: 22px; }
.aspects rect { fill: none; stroke: currentColor; stroke-width: 1.4; }
.aspects span { font-size: 11px; font-variant-numeric: tabular-nums; }
.aspects button:hover { color: var(--ink-2); }
.aspects button[aria-pressed="true"] { color: var(--ink); }
.aspects button[aria-pressed="true"] rect { fill: currentColor; fill-opacity: .18; stroke-width: 1.8; }
.states { display: flex; gap: 12px; flex-wrap: wrap; }
.states .txt { font-size: 13px; color: var(--ink-3); }
.states .txt[aria-pressed="true"] { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
details.more summary { cursor: pointer; list-style: none; font-size: 13px; color: var(--ink-3); width: max-content; }
details.more summary::-webkit-details-marker { display: none; }
details.more summary::after { content: " +"; }
details.more[open] summary::after { content: " \2212"; }
details.more[open] summary { margin-bottom: 12px; }
details.more summary:hover { color: var(--ink); }
.reset { justify-self: start; font-size: 13px; color: var(--ink-3); }

.dl { margin-top: 30px; display: grid; gap: 12px; }
.dl .licence { margin: 0; }
.fmts { gap: 16px; padding-bottom: 2px; }
.dl details.more[open] summary { margin-bottom: 12px; }
.dl details.more .row + .row { margin-top: 12px; }
.wh { display: flex; align-items: baseline; gap: 8px; color: var(--ink-3); font-size: 13px; }
.wh input {
  width: 58px; padding: 3px 0; border: 0; border-bottom: 1px solid var(--ink-3); background: none; color: var(--ink); font-size: 14px; font-variant-numeric: tabular-nums;
  -moz-appearance: textfield;
}
.wh input::-webkit-inner-spin-button { -webkit-appearance: none; }
.wh input:focus { outline: none; border-bottom-color: var(--ink); }
.gets { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.get {
  border: 0; cursor: pointer; text-align: left; padding: 10px 12px 9px; border-radius: 6px;
  background: var(--birch); color: var(--birch-ink); display: grid; gap: 1px;
  box-shadow: inset 0 -2px 0 rgba(90, 60, 20, .25);
}
.get b { font-family: var(--display); font-size: 12px; font-weight: 400; letter-spacing: .03em; }
.get span { font-size: 12px; opacity: .7; font-variant-numeric: tabular-nums; }
.get:hover { background: #efe2c6; }
.get:active { box-shadow: inset 0 1px 2px rgba(90, 60, 20, .35); }
.get:disabled { background: none; color: var(--ink-3); box-shadow: inset 0 0 0 1px rgba(236, 236, 234, .16); cursor: not-allowed; }
.get.wide { width: 100%; }
.licence { margin: 10px 0 0; font-size: 12px; color: var(--ink-3); }
.export { display: grid; gap: 8px; }
.ex-top { display: flex; justify-content: space-between; font-size: 14px; font-variant-numeric: tabular-nums; }
.ex-top b { font-weight: 600; }
.track { height: 6px; border-radius: 3px; background: var(--wall-lift); overflow: hidden; }
.track i { display: block; height: 100%; width: 0; background: var(--birch); }
.export .txt { justify-self: start; font-size: 13px; }
.export .gets { grid-template-columns: 1fr 1fr; }
.fallback { text-decoration: underline; text-underline-offset: 3px; }

.below { grid-column: 1; padding: 28px 0 10px; display: grid; gap: 22px; }
.below .about { max-width: 62ch; }
.about { margin: 0; font-size: 14px; color: var(--ink-3); line-height: 1.55; }
.refs-all { display: block; font-size: 13px; color: var(--ink-2); text-decoration: none; margin-bottom: 8px; }
.refs-all:hover { color: var(--ink); }
.refs-strip { display: flex; gap: 6px; }
.refs-strip a { display: block; width: 96px; height: 64px; border-radius: 4px; overflow: hidden; }
.refs-strip img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- lookbook ---------- */
.filters { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 28px; padding: 16px 0 18px; font-size: 14px; }
.sel { flex: none; }
.sel select {
  field-sizing: content; appearance: none; -webkit-appearance: none; border: 0; background: none; cursor: pointer; font-size: 14px; font-weight: 600; color: var(--ink);
  padding: 4px 18px 4px 0;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-2) 50%), linear-gradient(135deg, var(--ink-2) 50%, transparent 50%);
  background-position: right 5px center, right 0 center; background-size: 5px 5px; background-repeat: no-repeat;
}
.sel select option { background: var(--wall); }
.opts { display: flex; gap: 16px; }
.opt { border: 0; background: none; padding: 4px 0; cursor: pointer; color: var(--ink-3); display: inline-flex; align-items: center; gap: 6px; }
.opt:hover { color: var(--ink); }
.opt[aria-pressed="true"] { color: var(--ink); text-decoration: underline; text-underline-offset: 5px; }
.opt i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
#fq { border: 0; border-bottom: 1px solid rgba(236, 236, 234, .2); background: none; padding: 4px 0; width: 140px; font-size: 14px; }
#fq:focus { outline: none; border-bottom-color: var(--ink-2); }
#fq::placeholder { color: var(--ink-3); }
.count { margin-left: auto; color: var(--ink-3); font-size: 13px; font-variant-numeric: tabular-nums; }
.count .txt { font-size: 13px; text-decoration: underline; text-underline-offset: 3px; }
/* the reference bar: where it's from on the left, what it is and a search on the right, that source's productions under */
.ref-bar { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0 28px; padding: 18px 0 16px; }
.ref-bar .prods { padding-top: 0; }
.ref-bar .sub { grid-column: 1 / -1; padding-top: 10px; gap: 4px 16px; }
.ref-bar .sub .opt { font-size: 13px; }
/* A prepared pack is an ordinary download. Keep its choices off the screen wall until asked. */
.wallpapers { position: relative; justify-self: end; }
.wallpapers summary { display: flex; align-items: center; gap: 10px; padding: 10px 0 10px 12px; cursor: pointer; color: var(--birch); font-size: 14px; list-style: none; }
.wallpapers summary::-webkit-details-marker { display: none; }
.wallpapers svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.wallpaper-menu { position: absolute; z-index: 10; right: 0; top: 100%; width: 300px; max-width: calc(100vw - 2 * var(--gutter)); padding: 8px 16px; border: 1px solid var(--ink-3); border-radius: 6px; background: var(--wall-lift); }
.wallpaper-menu p { margin: 6px 0 8px; font-size: 12px; color: var(--ink-2); }
.wallpaper-file { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 12px 0; text-decoration: none; }
.wallpaper-file + .wallpaper-file { border-top: 1px solid var(--ink-3); }
.wallpaper-file small { display: block; font-size: 12px; color: var(--ink-2); }
.wallpaper-file > span:last-child { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.wallpaper-file:hover { color: var(--birch); }
.wallpaper-file:hover > span:last-child { color: var(--birch); }
.ref-tools { display: flex; align-items: center; gap: 24px; }
.ref-tools .opts { gap: 16px; }
@media (max-width: 820px) { .ref-bar { grid-template-columns: 1fr; gap: 10px; } .ref-tools { justify-content: space-between; } }
@media (max-width: 560px) { .ref-bar .sub { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; } .ref-bar .sub .opt { flex: none; } #fq { width: 110px; } }
.masonry { columns: 5 240px; column-gap: 10px; }
.ref { break-inside: avoid; margin: 0 0 14px; }
.ref .img { display: block; border-radius: 4px; overflow: hidden; background: var(--wall-lift); }
.ref img { display: block; width: 100%; height: auto; }
.ref .img:hover img { filter: brightness(1.08); }
.ref figcaption { margin: 5px 1px 0; font-size: 12px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ref figcaption a { text-decoration: none; }
.ref figcaption a:hover { color: var(--ink); }
.ref figcaption b { font-weight: 600; color: var(--ink-2); }
.ref figcaption .arr { color: var(--ink-2); }
.want { background: none; border: 0; padding: 0; color: var(--ink-2); font-size: 12px; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.unv { margin: 30px 0 10px; font-size: 14px; font-weight: 600; color: var(--ink-2); }
.lb-empty { color: var(--ink-2); padding: 30px 0; }
.lb-empty .txt { text-decoration: underline; text-underline-offset: 3px; }

.ref-detail { display: grid; grid-template-columns: minmax(0, 1fr) 296px; gap: 40px; padding-top: 12px; }
.ref-detail figure { margin: 0; height: calc(100vh - var(--bar-h) - 28px); display: grid; place-items: center; background: #161719; border-radius: 4px; overflow: hidden; }
.ref-detail figure img, .ref-detail figure video { width: 100%; height: 100%; object-fit: contain; display: block; }
.ref-detail .clips { margin-top: 18px; }
/* a reference that moves (a source clip or an animated GIF): a small play mark in the corner */
.masonry .img.moving { position: relative; }
.masonry .img.moving::after { content: ""; position: absolute; right: 8px; bottom: 8px; width: 0; height: 0;
  border-left: 9px solid rgba(255, 255, 255, .85); border-top: 6px solid transparent; border-bottom: 6px solid transparent;
  filter: drop-shadow(0 0 3px rgba(0, 0, 0, .8)); pointer-events: none; }
.ref-detail figure img.small { width: auto; height: auto; max-width: 100%; max-height: 100%; }
.ref-meta { padding-top: 8px; }
.ref-meta h1 { margin: 0 0 22px; font-family: var(--display); font-size: 18px; line-height: 1.3; font-weight: 400; }
.ref-meta dl { margin: 0; display: grid; grid-template-columns: 80px 1fr; gap: 8px 12px; font-size: 14px; }
.ref-meta dt { color: var(--ink-3); font-size: 13px; padding-top: 1px; }
.ref-meta dd { margin: 0; color: var(--ink-2); }
.source {
  display: block; margin-top: 26px; padding: 11px 14px; border: 0; border-radius: 6px; text-decoration: none; cursor: pointer; text-align: left; width: 100%;
  background: var(--birch); color: var(--birch-ink); font-size: 14px; font-weight: 600; box-shadow: inset 0 -2px 0 rgba(90, 60, 20, .25);
}
.source:hover { background: #efe2c6; }

/* ---------- toast ---------- */
.toast {
  position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 12px); opacity: 0; pointer-events: none; z-index: 40;
  background: var(--birch); color: var(--birch-ink); padding: 9px 14px; border-radius: 6px; font-size: 13px; font-weight: 600;
  transition: opacity .18s, transform .18s; max-width: calc(100vw - 32px);
}
.toast.on { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 1100px) {
  .prog, .ref-detail { grid-template-columns: minmax(0, 1fr) 270px; column-gap: 28px; }
  .below { grid-template-columns: 1fr; gap: 20px; }
}
@media (max-width: 820px) {
  .bar { gap: 20px; }
  .tint { overflow-x: auto; }
  .prog, .ref-detail { grid-template-columns: 1fr; }
  .stage { height: 56vh; }
  .dock { position: static; }
  .ref-detail figure { height: auto; max-height: 70vh; }
  .tiles { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  .tile .glass, .toast { transition: none; }
}

/* the shared WebGL layer for the fleet tiles: fills the fleet grid and scrolls with it, behind the tiles (their glass is
   transparent), never takes input */
.fleet { position: relative; isolation: isolate; }
.gl-layer { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: -1; }
.ships .fleet .glass { background: transparent; }
.ships .fleet .glass img { width: 100%; height: 100%; object-fit: contain; display: block; }
/* the viewer and dock are the top section; the fleet runs full width below it, so the dock is never sticky over it */
.ships .dock { position: static; }

/* ---------- phones and tablets: everything below changes nothing at desktop widths with a mouse ---------- */
.look { display: none; }
.lookset, .chips { display: contents; }

/* the header: logo, nav, and one button holding the wall's shape and colour (its face shows the current choice) */
@media (max-width: 980px) {
  .bar { gap: 20px; padding: env(safe-area-inset-top) max(var(--gutter), env(safe-area-inset-right)) 0 max(var(--gutter), env(safe-area-inset-left));
    height: calc(var(--bar-h) + env(safe-area-inset-top)); }
  main, .foot { padding-left: max(var(--gutter), env(safe-area-inset-left)); padding-right: max(var(--gutter), env(safe-area-inset-right)); }
  .foot { padding-bottom: max(16px, env(safe-area-inset-bottom)); }
  .toast { bottom: calc(24px + env(safe-area-inset-bottom)); }
  .nav a { padding: 12px 0; }
  .look { display: flex; align-items: center; gap: 8px; margin-left: auto; height: 44px; padding: 0 2px 0 10px; border: 0; background: none; cursor: pointer; color: var(--ink-2); }
  #lookFace { display: flex; align-items: center; gap: 8px; }
  .look svg { width: 22px; height: 22px; display: block; }
  .look rect { fill: currentColor; fill-opacity: .2; stroke: currentColor; stroke-width: 1.6; }
  .look .sw { display: block; pointer-events: none; margin: 0; width: 16px; height: 16px; }
  .look .sw::after { inset: 5px; }
  .look[aria-expanded="true"] { color: var(--ink); }
  .lookset {
    display: none; position: absolute; top: 100%; left: 0; right: 0; flex-wrap: wrap; align-items: center; gap: 6px 18px;
    padding: 4px max(var(--gutter), env(safe-area-inset-right)) 14px max(var(--gutter), env(safe-area-inset-left));
    background: var(--wall); box-shadow: 0 14px 24px -18px rgba(0, 0, 0, .9);
  }
  .bar.open .lookset { display: flex; }
  .lookset .shapes { margin-left: -8px; }
  .lookset .tint { margin-left: -2px; overflow: visible; flex-wrap: wrap; gap: 0; }
  .lookset .motion { width: 44px; height: 44px; margin-left: auto; margin-right: -10px; }
  .shapes button { min-width: 44px; min-height: 44px; align-content: center; }
}

/* touch: comfortable targets for every control (phones, tablets, and any coarse pointer) */
@media (max-width: 820px), (pointer: coarse) {
  .sw { width: 32px; height: 32px; margin: 0; background: none; }
  .sw::before { content: ""; position: absolute; inset: 6px; border-radius: 50%; background: var(--c); }
  .sw::after { inset: 12px; }
  .sw.all { background: none; }
  .sw.all::before { background: conic-gradient(#57d9e0 0 25%, #ffb347 0 50%, #ff5a4a 0 75%, #7cf05a 0); }
  .sw[aria-checked="true"] { box-shadow: none; }
  .sw[aria-checked="true"]::before { box-shadow: 0 0 0 2px var(--wall), 0 0 0 3.5px var(--ink); }
  .lookset .sw { width: 36px; height: 36px; }
  .lookset .sw::before { inset: 8px; }
  .lookset .sw::after { inset: 14px; }
  .look .sw { width: 16px; height: 16px; background: var(--c); }
  .look .sw.all { background: conic-gradient(#57d9e0 0 25%, #ffb347 0 50%, #ff5a4a 0 75%, #7cf05a 0); }
  .look .sw::before { display: none; }
  .look .sw::after { inset: 5px; }
  .swatches { margin-left: -6px; gap: 0; }
  .states .txt, .reset, #shuffle { min-height: 36px; min-width: 36px; }
  .states { gap: 4px 16px; }
  .aspects button { min-width: 40px; min-height: 40px; align-content: center; }
  details.more summary { padding: 9px 0; }
  details.more[open] summary, .dl details.more[open] summary { margin-bottom: 4px; }
  .dd-btn { min-height: 40px; }
  .wh input, .seed input { padding: 8px 0; }
  .step a { min-width: 40px; min-height: 40px; display: inline-grid; place-items: center; }
  .step a.back { min-width: 0; }
  .get { min-height: 52px; }
  .source { padding: 13px 14px; }
  .opt { min-height: 40px; min-width: 36px; justify-content: center; }
  .sel select, #fq { min-height: 40px; }
  .refs-strip a { width: 88px; }
}

/* stacked pages: preview first and full width, controls below */
@media (max-width: 820px) {
  .stage, .ships .stage { height: auto; padding-top: 4px; }
  .prog.native .stage { place-items: start center; }
  .prog { padding-top: 8px; }
  .dock { padding-top: 14px; }
  /* the title shares its line with the previous/next arrows */
  .prog .dock { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; align-items: start; }
  .prog .dock > * { grid-column: 1 / -1; }
  .prog .dock > .step { grid-column: 2; grid-row: 1; margin: -6px -10px 0 0; }
  .prog .dock > h1 { grid-column: 1; grid-row: 1; }
  .dock h1 { margin-bottom: 18px; }
  .controls { gap: 8px; }
  .dl { margin-top: 22px; }
  .below { padding-top: 22px; }
  .fleet { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
  /* the wall: replicas take the width at their own proportions, panels keep one height but never spill */
  .shelf .tile { max-width: 100%; }
  .shelf .glass { height: auto; width: calc(var(--ar) * 220px); max-width: 100%; }
  .shelf.real .glass { height: auto; width: calc(var(--ar) * 280px); }
  .tiles { grid-template-columns: repeat(auto-fill, minmax(min(var(--tile-min, 300px), 100%), 1fr)); }
  .ref-detail { gap: 18px; padding-top: 8px; }
  .ref-detail figure { height: auto; max-height: 62vh; background: none; }
  .ref-meta { padding-top: 0; }
  .filters { gap: 6px 22px; padding: 10px 0 14px; }
}

/* phones */
@media (max-width: 560px) {
  :root { --gutter: 16px; --bar-h: 56px; }
  .bar { gap: 14px; }
  .lookset .tint { order: 2; }
  .lookset .motion { order: 1; }
  .logo svg { height: 28px; }
  .nav { gap: 14px; }
  .nav a { font-size: 11px; letter-spacing: .02em; }
  .bank { padding-top: 18px; }
  .bank h2 { margin-bottom: 10px; }
  body[data-shape="16x9"], body:not([data-shape]) { --tile-min: 150px; }
  body[data-shape="4x3"], body[data-shape="1x1"], body[data-shape="9x16"] { --tile-min: 120px; }
  body[data-shape="32x9"] { --tile-min: 300px; }
  .tiles { gap: 14px 10px; }
  .tile-name { font-size: 12px; margin-top: 5px; }
  .shelf { gap: 14px 10px; }
  .shelf .tile, .shelf.real .tile { flex: 1 1 100%; }
  .shelf .glass, .shelf.real .glass { width: 100%; }
  .bezel { padding: 8px; border-radius: 16px; }
  .bezel .glass { border-radius: 8px; }
  .dock h1 { font-size: 20px; }
  .row { grid-template-columns: 56px 1fr auto; }
  .fleet { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 10px; }
  .refs-big { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* lookbook: production and search on one line, type and colour as one sideways-scrolling line */
  .filters { display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr); gap: 2px 16px; padding: 6px 0 12px; }
  .sel { grid-column: 1; grid-row: 1; min-width: 0; }
  .sel select { max-width: 100%; text-overflow: ellipsis; }
  #fq { grid-column: 2; grid-row: 1; width: 100%; }
  .chips {
    display: flex; gap: 16px; grid-column: 1 / -1; grid-row: 2; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain;
    margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter);
  }
  .chips::-webkit-scrollbar { display: none; }
  .chips .opts { flex: none; gap: 14px; }
  .count { grid-column: 1 / -1; grid-row: 3; margin: 0; }
  .count:empty { display: none; }
  .masonry { columns: 2; column-gap: 8px; }
  .ref { margin-bottom: 12px; }
  .ref figcaption { font-size: 11px; }
}
@media (max-width: 360px) { .bar { gap: 10px; } .nav { gap: 6px; } }

/* the SVG frame guide over the ship viewer: outside the frame dimmed, the frame edge a hairline */
#viewer { position: relative; }
.frame-guide { position: absolute; pointer-events: none; box-shadow: 0 0 0 2000px rgba(32, 33, 35, .82); outline: 1px solid rgba(236, 236, 234, .55); z-index: 2; }
#viewer { overflow: hidden; }

/* the program page's scrubber, under the preview */
.scrub { display: flex; align-items: center; gap: 12px; margin-top: 10px; width: 100%; max-width: 100%; }
.scrub input[type=range] { flex: 1; }
.scrub output { min-width: 52px; text-align: right; font-size: 13px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.play { flex: none; width: 32px; height: 32px; border: 0; background: none; color: var(--ink-2); cursor: pointer; display: grid; place-items: center; }
.play:hover { color: var(--ink); }
.play svg { width: 13px; height: 13px; fill: currentColor; }
.play .i-play { display: none; }
.play[aria-pressed="true"] .i-play { display: block; }
.play[aria-pressed="true"] .i-pause { display: none; }
@media (max-width: 820px) { .play { width: 44px; height: 44px; } }

/* with the shape and colour controls gone, the pause sits at the right of the bar */
.bar .motion { margin-left: auto; }

/* program page, desktop: the preview and the panel share one screen height, so the animation never scrolls away while
   settings change; the settings scroll inside the panel and the download stays at its foot */
@media (min-width: 821px) {
  .prog:not(.ships) .dock {
    display: flex; flex-direction: column; max-height: calc(100vh - var(--bar-h) - 20px); padding-top: 8px;
  }
  .prog:not(.ships) .dock > .step, .prog:not(.ships) .dock > h1 { flex: none; }
  .prog:not(.ships) .dock h1 { margin-bottom: 20px; }
  .prog:not(.ships) .controls {
    flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; align-content: start;
    margin-right: -10px; padding: 2px 10px 18px 0; scrollbar-width: thin; scrollbar-color: var(--ink-3) transparent;
    mask-image: linear-gradient(to bottom, #000 calc(100% - 22px), transparent);
  }
  .prog:not(.ships) .dl { flex: none; margin-top: 0; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, .08); }
}
details.more.fx summary .on { margin-left: 10px; color: var(--ink-2); }
details.more.fx summary .on:empty { display: none; }
details.more.fx { display: grid; gap: 14px; }
details.more.fx[open] summary { margin-bottom: 0; }
.scrub .play + .play { margin-left: -10px; }
@media (min-width: 821px) { .prog.native:not(.ships) .stage { place-items: start center; } }

/* ---------- dropdowns (app.js dropdown): every choice of more than a few values. The trigger is the value on a hairline,
   like the number fields; the list opens on the wall's lifted surface. Ships and planets open a grid of their line art.
   Hover and the keyboard share one mark (.on); the chosen value carries a check (list) or a ring (grid), not colour alone. */
.dd { position: relative; min-width: 0; }
.dd-btn { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 30px; padding: 3px 0 5px; border: 0;
  border-bottom: 1px solid rgba(236, 236, 234, .2); background: none; color: var(--ink); font-size: 14px; font-variant-numeric: tabular-nums;
  text-align: left; cursor: pointer; }
.dd-btn:hover { border-bottom-color: var(--ink-3); }
.dd-btn[aria-expanded="true"] { border-bottom-color: var(--ink-2); }
.dd-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 2px; }
.dd-val { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dd-chev { flex: none; width: 12px; height: 12px; fill: none; stroke: var(--ink-3); stroke-width: 1.6; transition: transform .15s ease; }
.dd-btn:hover .dd-chev { stroke: var(--ink-2); }
.dd-btn[aria-expanded="true"] .dd-chev { transform: rotate(180deg); }
.dd-btn .dd-art { flex: none; width: 52px; height: 32px; }
.dd-art img, .dd-art canvas { display: block; width: 100%; height: 100%; object-fit: contain; }

.dd-pop { position: fixed; z-index: 60; max-width: min(360px, calc(100vw - 32px)); overflow-y: auto; overscroll-behavior: contain; padding: 6px;
  border-radius: 10px; background: var(--wall-lift); box-shadow: 0 0 0 1px rgba(255, 255, 255, .06), 0 20px 44px -14px rgba(0, 0, 0, .75);
  scrollbar-width: thin; scrollbar-color: var(--ink-3) transparent; --dd-from: -4px; animation: dd-in .12s ease-out; }
/* it arrives from the trigger's side; it leaves at once */
.dd-pop[data-side="above"] { --dd-from: 4px; }
@keyframes dd-in { from { opacity: 0; transform: translateY(var(--dd-from)); } }
.dd-group.bare { margin-top: 4px; padding-top: 4px; border-top: 1px solid rgba(255, 255, 255, .07); }
.dd-group.bare:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.dd-lab { display: block; padding: 8px 10px 4px; font-size: 12px; color: var(--ink-3); }
.dd-group:first-child .dd-lab { padding-top: 4px; }
.dd-opt { display: flex; align-items: center; gap: 12px; min-height: 32px; padding: 0 10px; border-radius: 6px; color: var(--ink-2); font-size: 14px;
  font-variant-numeric: tabular-nums; white-space: nowrap; cursor: pointer; user-select: none; }
.dd-opt.on { background: rgba(255, 255, 255, .06); color: var(--ink); }
.dd-opt[aria-selected="true"] { color: var(--ink); }
.dd-opt[aria-disabled="true"] { color: var(--ink-3); opacity: .6; cursor: default; }
.dd-check { flex: none; width: 12px; height: 12px; margin-left: auto; fill: none; stroke: var(--ink); stroke-width: 1.6; visibility: hidden; }
.dd-opt[aria-selected="true"] .dd-check { visibility: visible; }

/* the grid: ships and planets as line art, grouped by kind */
.dd-pop.dd-grid { max-width: none; padding: 12px 12px 14px; display: grid; gap: 12px; }
.dd-grid .dd-lab { padding: 0 2px 8px; }
.dd-grid .dd-group.bare { margin: 0; padding: 0; border: 0; }
.dd-grid .dd-items { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: 6px; }
.dd-grid .dd-opt { display: grid; gap: 5px; min-height: 0; padding: 6px; border-radius: 8px; font-size: 12px; white-space: normal; }
.dd-grid .dd-txt { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dd-grid .dd-opt .dd-art { aspect-ratio: 16 / 10; border-radius: 6px; background: #141517; overflow: hidden; padding: 4px; }
.dd-grid .dd-opt.on { background: rgba(255, 255, 255, .05); }
.dd-grid .dd-opt[aria-selected="true"] .dd-art { box-shadow: 0 0 0 1px var(--ink-2); }
@media (max-width: 560px) {
  .dd-pop, .dd-pop.dd-grid { left: 0; right: 0; bottom: 0; top: auto; width: auto; max-width: none; max-height: 72vh;
    border-radius: 14px 14px 0 0; padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
  .dd-grid .dd-items { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  .dd-chev { transition: none; }
  .dd-pop { --dd-from: 0px; animation-duration: .1s; }
}

/* Models keeps the preview primary; finding a subject sits above its library. */
.model-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.model-filters input { width: min(100%, 320px); background: transparent; border: 0; border-bottom: 1px solid var(--ink-3); padding: 8px 0; }
.model-filters .dd { width: 150px; }
.model-filters [role="status"] { color: var(--ink-2); font-size: 13px; }
.models .below { gap: 18px; }
.model-notice { font-size: 13px; color: var(--ink-2); margin: 14px 0 0; }
@media (max-width: 560px) {
  .model-filters input { flex: 1 1 100%; width: 100%; }
}

/* ---------- effects: a switch on each effect and one for all ---------- */
#fxs .fx-row { grid-template-columns: 26px 54px 1fr auto; }
#fxs .fx-row.off .lab, #fxs .fx-row.off output { color: var(--ink-3); opacity: .7; }
#fxs .fx-row.off input[type="range"] { opacity: .45; }
.fx-sw { flex: none; width: 22px; height: 12px; padding: 0; border: 0; border-radius: 6px; background: rgba(236, 236, 234, .16); cursor: pointer; position: relative;
  transition: background .15s ease; }
.fx-sw i { position: absolute; top: 2px; left: 2px; width: 8px; height: 8px; border-radius: 50%; background: var(--ink-3); transition: transform .15s ease, background .15s ease; }
.fx-sw[aria-checked="true"] { background: var(--ink-2); }
.fx-sw[aria-checked="true"] i { transform: translateX(10px); background: var(--wall); }
.fx-sw.some { background: rgba(236, 236, 234, .45); }
.fx-sw:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
#fxs summary { display: inline-flex; align-items: center; gap: 8px; }
#fxs summary .fx-all { order: 3; margin-left: 4px; }
@media (max-width: 560px) { .fx-sw { width: 30px; height: 18px; border-radius: 9px; } .fx-sw i { width: 14px; height: 14px; } .fx-sw[aria-checked="true"] i { transform: translateX(12px); } #fxs .fx-row { grid-template-columns: 34px 54px 1fr auto; } }
@media (prefers-reduced-motion: reduce) { .fx-sw, .fx-sw i { transition: none; } }

/* ---------- screen groups: tag facets on the reference wall, "+N" on a tile, tags and the same-screen strip on a reference ---------- */
.ref-bar .facets { grid-column: 1 / -1; padding-top: 10px; gap: 4px 16px; flex-wrap: wrap; }
.ref-bar .facets .opt { font-size: 13px; }
.ref-bar .facets .opt[aria-expanded="true"] { color: var(--ink); }
.ref-bar .facets .opt b { font-weight: 600; color: var(--ink); }
.ref .img { position: relative; }
.ref .more { position: absolute; left: 6px; bottom: 6px; padding: 1px 6px; border-radius: 4px; background: rgba(0, 0, 0, .62); color: var(--ink); font-size: 11px; line-height: 1.5; pointer-events: none; }
.ref-meta .tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 18px; }
.tag { font-size: 12px; color: var(--ink-2); text-decoration: none; padding: 2px 8px; border-radius: 4px; box-shadow: inset 0 0 0 1px var(--wall-lift); background: var(--wall-lift); }
.tag:hover { color: var(--ink); }
.same { padding: 34px 0 20px; }
.same h2 { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 14px; margin: 0 0 14px; font-family: var(--display); font-size: 14px; font-weight: 400; color: var(--ink); }
.same h2 span { font-size: 12px; letter-spacing: .04em; color: var(--ink-3); }
.same .gen { font-family: var(--font); font-size: 13px; color: var(--ink-2); text-decoration: none; }
.same .gen:hover { color: var(--ink); }