/* Aetherworks — iso-glow 3D. Colour only through tokens; --heat and --volt are set from JS. */
:root {
  color-scheme: dark;
  --bg: #121314; --panel: rgba(22, 23, 24, .86); --line: #26292b; --line-hi: #34383b;
  --ink: #c9d0db; --ink-hi: #eef1f4; --dim: #7d8796; --faint: #4a5059;
  --heat: #ff9a3d; --volt: #6cdcff; --accent: var(--heat);
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  --gut: 16px; --panel-solid: #161718;
}
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #e9eaea; --panel: rgba(246, 246, 245, .9); --line: #d6d8d8; --line-hi: #c3c6c8;
  --ink: #2b2e30; --ink-hi: #101213; --dim: #6b7075; --faint: #a3a8ac; --panel-solid: #f6f6f5;
}
:root[data-theme="ink"] {
  color-scheme: light;
  --bg: #f1e8d6; --panel: rgba(246, 239, 225, .92); --line: #e0d4bd; --line-hi: #cdbfa6;
  --ink: #3a2a1c; --ink-hi: #1e140a; --dim: #7a6650; --faint: #b0a088; --panel-solid: #f6efe1;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--ink); font: 12px/1.5 var(--mono); overflow: hidden; -webkit-font-smoothing: antialiased; }
#stage, #stage canvas { position: fixed; inset: 0; display: block; touch-action: none; outline: none; }
button { font: inherit; color: inherit; }
.ui { position: fixed; z-index: 2; }
body.clean .ui, body.clean #callout { display: none !important; }

/* top bar */
#top { top: var(--gut); left: max(var(--gut), env(safe-area-inset-left)); right: max(var(--gut), env(safe-area-inset-right)); display: flex; justify-content: space-between; align-items: center; gap: 12px; pointer-events: none; }
#top > * { pointer-events: auto; }
.brand { display: flex; align-items: center; gap: 9px; color: var(--ink-hi); letter-spacing: .16em; text-transform: uppercase; font-size: 12px; font-weight: 600; }
.brand svg { width: 22px; height: 22px; }
.brand .h { stroke: var(--heat); } .brand .v { stroke: var(--volt); }
.brand em { font-style: normal; font-weight: 400; color: var(--dim); letter-spacing: .12em; font-size: 10.5px; padding-left: 9px; border-left: 1px solid var(--line-hi); }
.tools { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.swatches { display: flex; align-items: center; gap: 2px; padding: 2px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel); }
.swatches button { all: unset; cursor: pointer; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; }
.swatches button i { width: 12px; height: 12px; border-radius: 50%; background: linear-gradient(135deg, var(--a) 0 50%, var(--b) 50% 100%); transition: transform .2s; }
.swatches button:hover i { transform: scale(1.18); }
.swatches button[aria-checked="true"] { box-shadow: 0 0 0 1px var(--ink) inset; }
.swatches button:focus-visible { box-shadow: 0 0 0 2px var(--ink) inset; }
.pill, .round { all: unset; cursor: pointer; height: 28px; display: flex; align-items: center; gap: 6px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel); color: var(--dim); }
.pill { padding: 0 11px 0 9px; }
.pill span { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.round { width: 28px; justify-content: center; }
.pill svg, .round svg { width: 14px; height: 14px; }
.pill:hover, .round:hover { color: var(--ink); border-color: var(--line-hi); }
.pill:focus-visible, .round:focus-visible { outline: 1px solid var(--ink); outline-offset: 2px; }
.pill[aria-pressed="true"] { color: var(--heat); border-color: var(--heat); box-shadow: 0 0 0 1px var(--heat) inset; }
#sound .mute { display: none; }
#wtime { color: var(--heat); }
#sound[aria-pressed="false"] .wave { display: none; }
#sound[aria-pressed="false"] .mute { display: inline; }

/* left: the machines */
#nav { top: 64px; left: max(var(--gut), env(safe-area-inset-left)); width: 196px; display: flex; flex-direction: column; gap: 4px; }
#nav h3, #panel h3 { margin: 6px 2px 1px; font-size: 10px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--faint); }
#nav h3:first-child, #panel h3:first-child { margin-top: 0; }
#nav button { all: unset; cursor: pointer; display: flex; align-items: center; gap: 9px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); color: var(--dim); }
#nav button b { font-weight: 400; color: var(--faint); font-size: 11px; }
#nav button:hover { color: var(--ink); border-color: var(--line-hi); }
#nav button:focus-visible { outline: 1px solid var(--ink); outline-offset: 1px; }
#nav button[aria-current="true"] { color: var(--ink-hi); border-color: var(--heat); box-shadow: 0 0 0 1px var(--heat) inset; }
#nav button[aria-current="true"] b { color: var(--heat); }

/* right: the selected machine's controls */
#panel { top: 64px; right: max(var(--gut), env(safe-area-inset-right)); width: 206px; display: flex; flex-direction: column; gap: 6px; max-height: calc(100vh - 140px); overflow: auto; scrollbar-width: none; }
#panel:empty { display: none; }
#panel button { all: unset; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); color: var(--dim); user-select: none; -webkit-user-select: none; touch-action: manipulation; }
#panel button:hover { color: var(--ink); border-color: var(--line-hi); }
#panel button:focus-visible { outline: 1px solid var(--ink); outline-offset: 1px; }
#panel button kbd { font: inherit; font-size: 10px; color: var(--faint); border: 1px solid var(--line); border-radius: 4px; padding: 0 5px; }
#panel button.on { color: var(--ink-hi); border-color: var(--heat); box-shadow: 0 0 0 1px var(--heat) inset; }
#panel button.on.volt { border-color: var(--volt); box-shadow: 0 0 0 1px var(--volt) inset; }
#panel .pair { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
#panel .pair button { justify-content: center; }
#panel .rng { display: grid; gap: 4px; padding: 7px 10px 9px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); color: var(--dim); }
#panel .rng div { display: flex; justify-content: space-between; }
#panel .rng output { color: var(--ink-hi); }
#panel .rng input { width: 100%; accent-color: var(--heat); margin: 0; }
#panel .rng.volt input { accent-color: var(--volt); }
#panel .gauge { padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); color: var(--dim); display: grid; gap: 3px; }
#panel .gauge div { display: flex; justify-content: space-between; gap: 8px; }
#panel .gauge b { font-weight: 400; color: var(--ink-hi); }
#panel .gauge .bar { height: 2px; background: var(--line); border-radius: 2px; position: relative; overflow: hidden; }
#panel .gauge .bar i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--heat); }
#panel .gauge .bar i.volt { background: var(--volt); }

/* bottom-left: what this is */
#info { left: max(var(--gut), env(safe-area-inset-left)); bottom: 22px; width: min(372px, calc(100vw - 2 * var(--gut))); padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); }
#info .tag { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--faint); }
#info h1 { margin: 2px 0 4px; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--heat); font-weight: 600; }
#info p { margin: 0; color: var(--dim); line-height: 1.55; }

#read { right: max(var(--gut), env(safe-area-inset-right)); bottom: 14px; color: var(--dim); font-size: 11px; letter-spacing: .04em; text-align: right; max-width: 60vw; }
#credit { right: max(var(--gut), env(safe-area-inset-right)); bottom: 32px; color: var(--faint); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; text-decoration: none; }
#credit:hover { color: var(--dim); }

/* hover callout */
#callout { position: fixed; z-index: 3; pointer-events: none; opacity: 0; transition: opacity .12s; max-width: 260px; padding: 7px 10px; border: 1px solid var(--line-hi); border-radius: 8px; background: var(--panel); display: grid; gap: 2px; }
#callout.on { opacity: 1; }
#callout b { color: var(--ink-hi); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; font-size: 11px; }
#callout span { color: var(--dim); }
#callout i { font-style: normal; color: var(--heat); }
#callout i:empty { display: none; }

/* works vs bay */
body.bay .works-only, body.works .bay-only { display: none !important; }

/* ── the top bar: the works' name; Works · Looks · Camera ▾ · sound · help · ☰ ── */
#works-name { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; margin-left: 2px; padding: 2px 4px 2px 10px; border-left: 1px solid var(--line-hi); color: var(--ink); font-size: 11px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; max-width: 30vw; }
#works-name span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#works-name svg, .pill .chev { width: 12px; height: 12px; flex: none; }
#works-name:hover { color: var(--ink-hi); }
#works-name:focus-visible { outline: 1px solid var(--ink); outline-offset: 2px; border-radius: 4px; }
#works-btn[aria-expanded="true"], #cam-btn[aria-expanded="true"], #menu-btn[aria-expanded="true"], #sound[aria-expanded="true"] { color: var(--ink-hi); border-color: var(--line-hi); background: var(--line); }
#cam-btn.on { color: var(--heat); border-color: var(--heat); }
.menuwrap { position: relative; display: flex; }
.dropmenu { position: absolute; top: calc(100% + 8px); right: 0; z-index: 9; min-width: 252px; display: grid; gap: 1px; padding: 6px; border: 1px solid var(--line-hi); border-radius: 12px; background: var(--panel-solid); box-shadow: 0 18px 50px rgba(0, 0, 0, .35); }
.dropmenu[hidden] { display: none; }
.dropmenu h4 { margin: 8px 10px 3px 30px; font-size: 9.5px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--faint); }
.dropmenu h4:first-child { margin-top: 3px; }
.dropmenu > button[role^="menuitem"] { all: unset; box-sizing: border-box; cursor: pointer; display: grid; grid-template-columns: 14px 1fr auto; column-gap: 8px; padding: 6px 10px 6px 8px; border-radius: 8px; }
.dropmenu > button kbd { grid-column: 3; grid-row: 1; align-self: center; font: inherit; font-size: 9.5px; color: var(--faint); border: 1px solid var(--line-hi); border-radius: 4px; padding: 0 5px; line-height: 15px; }
.dropmenu > button[role^="menuitem"]::before { content: ""; grid-row: 1 / span 2; align-self: center; justify-self: center; width: 6px; height: 6px; border-radius: 50%; }
.dropmenu > button[aria-pressed="true"]::before { background: var(--heat); box-shadow: 0 0 6px var(--heat); }
.dropmenu > button b { grid-column: 2; font-weight: 500; color: var(--ink); font-size: 11.5px; letter-spacing: .02em; }
.dropmenu > button small { grid-column: 2; color: var(--dim); font-size: 10px; letter-spacing: .02em; }
.dropmenu > button:hover, .dropmenu > button:focus-visible { background: var(--line); }
.dropmenu > button:hover b, .dropmenu > button[aria-pressed="true"] b { color: var(--ink-hi); }
.dropmenu hr { border: 0; border-top: 1px solid var(--line); margin: 5px 6px; }
.dropmenu .lk-switch { padding: 7px 8px; }
.dropmenu .lk-switch b { font-weight: 500; font-size: 11.5px; }
.dropmenu .lk-switch small { display: block; color: var(--dim); font-size: 10px; }
.dropmenu .lk-switch:hover { background: var(--line); }
.dm-q { display: flex; align-items: center; gap: 2px; padding: 5px 8px 5px 30px; }
.dm-q span { flex: 1; color: var(--ink); font-size: 11.5px; }
.dm-q button { all: unset; cursor: pointer; padding: 3px 8px; border-radius: 999px; color: var(--dim); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; }
.dm-q button:hover { color: var(--ink); background: var(--line); }
.dm-q button[aria-pressed="true"] { color: var(--ink-hi); box-shadow: 0 0 0 1px var(--heat) inset; }

/* ── the Works window: Surprise me first, then the ready-mades as pictures, and an empty hall ── */
#works-win { position: fixed; inset: 0; z-index: 11; display: grid; place-items: center; padding: 24px; background: color-mix(in srgb, var(--bg) 78%, transparent); }
#works-win[hidden] { display: none; }
.ww-card { width: min(1000px, 100%); max-height: calc(100vh - 48px); overflow: auto; scrollbar-width: thin; display: grid; gap: 14px; padding: 18px 20px 16px; border: 1px solid var(--line-hi); border-radius: 14px; background: var(--panel-solid); box-shadow: 0 24px 70px rgba(0, 0, 0, .45); }
.ww-card header { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.ww-card h2 { margin: 0; font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-hi); font-weight: 600; }
.ww-card header p { margin: 4px 0 0; color: var(--dim); }
.ww-x { all: unset; cursor: pointer; display: grid; padding: 5px; border-radius: 7px; color: var(--dim); }
.ww-x svg { width: 15px; height: 15px; }
.ww-x:hover, .ww-x:focus-visible { color: var(--ink); background: var(--line); }
.ww-body { display: grid; gap: 12px; }
.ww-surprise { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 10px; border: 1px solid color-mix(in srgb, var(--heat) 55%, transparent); border-radius: 12px; background: color-mix(in srgb, var(--heat) 8%, transparent); }
.ww-go { all: unset; cursor: pointer; display: flex; align-items: center; gap: 12px; padding: 9px 18px 9px 11px; border-radius: 10px; background: var(--heat); color: #1a1208; }
.ww-go svg { width: 30px; height: 30px; flex: none; }
.ww-go b { display: block; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; }
.ww-go small { display: block; font-size: 10.5px; opacity: .78; max-width: 320px; }
.ww-go:hover { filter: brightness(1.08); }
.ww-go:focus-visible { outline: 2px solid var(--ink-hi); outline-offset: 2px; }
.ww-gos { width: 100%; display: flex; flex-wrap: wrap; gap: 10px; }
.ww-gos .ww-go { flex: 1 1 280px; }
/* the second kind: a look of its own — outlined */
.ww-go.ww-go2 { background: none; color: var(--ink-hi); box-shadow: inset 0 0 0 1.5px var(--heat); }
.ww-go2 svg { color: var(--heat); }
.ww-go2:hover { background: color-mix(in srgb, var(--heat) 12%, transparent); filter: none; }
.ww-themes { flex: 1; min-width: 240px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.ww-themes span { margin-right: 4px; color: var(--dim); font-size: 10.5px; }
.ww-themes button { all: unset; cursor: pointer; padding: 3px 10px; border: 1px solid var(--line-hi); border-radius: 999px; color: var(--ink); font-size: 10.5px; }
.ww-themes button:hover, .ww-themes button:focus-visible { border-color: var(--heat); color: var(--ink-hi); }
.ww-themes button[aria-checked="true"] { border-color: var(--heat); background: color-mix(in srgb, var(--heat) 18%, transparent); color: var(--ink-hi); }
.ww-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; }
.ww-item { all: unset; box-sizing: border-box; cursor: pointer; display: grid; grid-template-rows: auto auto 1fr auto; gap: 3px; padding: 6px 6px 9px; border: 1px solid var(--line); border-radius: 11px; background: var(--panel); }
.ww-item img, .ww-pic { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; margin-bottom: 5px; border-radius: 7px; object-fit: cover; background: #0c0c0d; }
.ww-pic { display: grid; place-items: center; border: 1px dashed var(--line-hi); background: none; color: var(--dim); }
.ww-pic svg { width: 28px; height: 28px; }
.ww-item b { padding: 0 4px; color: var(--ink-hi); font-weight: 500; font-size: 11.5px; letter-spacing: .04em; }
.ww-item span { padding: 0 4px; color: var(--dim); font-size: 10.5px; line-height: 1.4; }
.ww-item em { padding: 0 4px; font-style: normal; color: var(--faint); font-size: 10px; letter-spacing: .04em; }
.ww-item:hover { border-color: var(--line-hi); }
.ww-item:hover img { filter: brightness(1.12); }
.ww-item:focus-visible { outline: 1px solid var(--ink); outline-offset: 2px; }
.ww-item[aria-current="true"] { border-color: var(--heat); box-shadow: 0 0 0 1px var(--heat) inset; }
.ww-item[aria-current="true"] em { color: var(--heat); }
.ww-card footer { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; color: var(--faint); font-size: 10.5px; }
#ww-own { width: auto; margin-left: auto; padding: 6px 10px; border: 1px solid var(--line); border-radius: 10px; gap: 12px; }
@media (max-width: 640px), (max-height: 500px) { #ww-own small { display: none; } .ww-card header { flex-wrap: wrap; } }
#ww-own:hover { border-color: var(--line-hi); }
.ww-item .ww-look { display: flex; align-items: center; gap: 6px; margin: 2px 4px 0; font-style: normal; color: var(--dim); font-size: 10px; letter-spacing: .04em; }
.ww-item .ww-look .lk-chip { width: 18px; height: 12px; border-radius: 3px; }
#works-win.keep-look .ww-look { opacity: .45; }
/* the Works window's sections: yours (each card with rename, duplicate and delete), the ready-mades */
.ww-sec { display: grid; gap: 7px; }
.ww-sec h3 { margin: 0; display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; font-size: 10.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-hi); }
.ww-sec h3 small { font-size: 10.5px; font-weight: 400; letter-spacing: .02em; text-transform: none; color: var(--faint); }
.ww-own { position: relative; padding: 0; grid-template-rows: none; }
.ww-hit { all: unset; box-sizing: border-box; cursor: pointer; display: grid; grid-template-rows: auto auto 1fr; gap: 3px; padding: 6px 6px 9px; border-radius: 11px; }
.ww-hit:focus-visible { outline: 1px solid var(--ink); outline-offset: 2px; }
.ww-hit:hover img { filter: brightness(1.12); }
.ww-own > .ww-hit b { padding: 0 4px; color: var(--ink-hi); font-weight: 500; font-size: 11.5px; letter-spacing: .04em; }
.ww-own > .ww-hit em { padding: 0 4px; }
.ww-own[aria-current="true"] > .ww-hit em { color: var(--heat); }
.ww-acts { position: absolute; top: 11px; right: 11px; display: flex; gap: 3px; opacity: 0; transition: opacity .15s; }
.ww-own:hover .ww-acts, .ww-own:focus-within .ww-acts { opacity: 1; }
@media (pointer: coarse) { .ww-acts { opacity: 1; } }
.ww-acts button { all: unset; cursor: pointer; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 7px; background: color-mix(in srgb, var(--panel-solid) 88%, transparent); color: var(--ink); box-shadow: 0 2px 8px rgba(0, 0, 0, .35); }
.ww-acts button svg { width: 14px; height: 14px; }
.ww-acts button:hover, .ww-acts button:focus-visible { color: var(--ink-hi); background: var(--panel-solid); outline: 1px solid var(--line-hi); }
.ww-acts button[data-act="del"]:hover { color: #ff8f7a; }
.ww-ask { position: absolute; inset: auto 0 0 0; display: grid; gap: 7px; padding: 10px; border-top: 1px solid var(--line-hi); border-radius: 0 0 11px 11px; background: var(--panel-solid); }
.ww-ask label { display: grid; gap: 4px; color: var(--faint); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; }
.ww-ask input { box-sizing: border-box; width: 100%; padding: 5px 8px; border: 1px solid var(--line-hi); border-radius: 7px; background: var(--panel); color: var(--ink-hi); font: inherit; font-size: 11.5px; letter-spacing: .02em; text-transform: none; }
.ww-ask input:focus { outline: none; border-color: var(--heat); }
.ww-ask p { margin: 0; color: var(--ink); font-size: 11px; line-height: 1.45; }
.ww-ask span { display: flex; gap: 6px; }
.ww-ask button { all: unset; cursor: pointer; padding: 4px 11px; border: 1px solid var(--line-hi); border-radius: 999px; color: var(--ink); font-size: 10.5px; letter-spacing: .06em; }
.ww-ask button:hover, .ww-ask button:focus-visible { border-color: var(--ink); color: var(--ink-hi); }
.ww-ask .ww-yes { border-color: var(--heat); background: var(--heat); color: #1a1208; }
.ww-ask .ww-yes.ww-del { border-color: #c4553f; background: #c4553f; color: #fff; }
.ww-ask .ww-yes:hover { filter: brightness(1.08); color: inherit; }

/* the Build chooser */
#build-choose { position: fixed; inset: 0; z-index: 11; display: grid; place-items: center; padding: 24px; background: color-mix(in srgb, var(--bg) 78%, transparent); }
#build-choose[hidden] { display: none; }
.bc-card { width: min(640px, 100%); max-height: calc(100vh - 48px); overflow: auto; scrollbar-width: thin; display: grid; gap: 12px; padding: 18px 20px 14px; border: 1px solid var(--line-hi); border-radius: 14px; background: var(--panel-solid); box-shadow: 0 24px 70px rgba(0, 0, 0, .45); animation: panelin .25s ease both; }
.bc-card header { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.bc-card h2 { margin: 0; font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-hi); font-weight: 600; }
.bc-card header p { margin: 4px 0 0; color: var(--dim); }
.bc-opts { display: grid; gap: 8px; }
.bc-opt { all: unset; box-sizing: border-box; display: grid; grid-template-columns: 44px 1fr; align-items: start; gap: 14px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 11px; background: var(--panel); color: var(--ink); }
button.bc-opt { cursor: pointer; }
.bc-opt[hidden] { display: none; }
.bc-opt > svg { width: 44px; height: 44px; color: var(--dim); }
.bc-opt b { display: block; color: var(--ink-hi); font-weight: 500; font-size: 12px; letter-spacing: .06em; }
.bc-opt small { display: block; margin-top: 3px; color: var(--dim); font-size: 11px; line-height: 1.5; }
.bc-opt q { color: var(--ink); quotes: '“' '”'; }
button.bc-opt:hover, button.bc-opt:focus-visible { border-color: var(--heat); }
button.bc-opt:hover > svg, button.bc-opt:focus-visible > svg { color: var(--ink-hi); }
button.bc-opt:focus-visible { outline: 1px solid var(--heat); outline-offset: 1px; }
.bc-guide { border-color: color-mix(in srgb, var(--heat) 55%, transparent); background: color-mix(in srgb, var(--heat) 8%, transparent); }
.bc-sizes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.bc-sizes button { all: unset; cursor: pointer; padding: 5px 12px; border: 1px solid var(--line-hi); border-radius: 999px; color: var(--ink); font-size: 11px; letter-spacing: .04em; }
.bc-sizes button em { font-style: normal; color: var(--faint); font-size: 10px; margin-left: 3px; }
.bc-sizes button:hover, .bc-sizes button:focus-visible { border-color: var(--heat); color: var(--ink-hi); }
.bc-sizes button:focus-visible { outline: 1px solid var(--heat); }
.bc-skip { display: flex; align-items: flex-start; gap: 8px; color: var(--faint); font-size: 10.5px; line-height: 1.45; cursor: pointer; }
.bc-skip input { margin: 1px 0 0; accent-color: var(--heat); }
.bc-skip:hover { color: var(--dim); }

/* the guided first works: a card by the top right, while building */
#guide { position: fixed; z-index: 6; top: 64px; right: max(var(--gut), env(safe-area-inset-right)); width: min(330px, calc(100vw - 2 * var(--gut))); padding: 11px 13px 12px; border: 1px solid var(--heat); border-radius: 11px; background: var(--panel-solid); box-shadow: 0 14px 40px rgba(0, 0, 0, .35); }
#guide[hidden] { display: none; }
#guide.on { animation: panelin .3s ease both; }
#guide header { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
#guide .gd-tag { font-size: 9.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--heat); }
#guide .gd-x { all: unset; cursor: pointer; display: grid; padding: 3px; border-radius: 6px; color: var(--faint); }
#guide .gd-x svg { width: 13px; height: 13px; }
#guide .gd-x:hover, #guide .gd-x:focus-visible { color: var(--ink); background: var(--line); }
#guide .gd-dots { display: flex; gap: 4px; margin: 7px 0 2px; }
#guide .gd-dots i { flex: 1; height: 3px; border-radius: 2px; background: var(--line-hi); }
#guide .gd-dots i.done { background: var(--heat); }
#guide .gd-dots i.skip { background: repeating-linear-gradient(90deg, var(--line-hi) 0 3px, transparent 3px 5px); }
#guide .gd-dots i.now { background: var(--ink); }
#guide h3 { margin: 6px 0 3px; color: var(--ink-hi); font-size: 12.5px; font-weight: 600; letter-spacing: .04em; }
#guide p { margin: 0 0 9px; color: var(--ink); line-height: 1.55; font-size: 11.5px; }
#guide p b, #guide li b { color: var(--ink-hi); font-weight: 600; }
#guide kbd { padding: 0 4px; border: 1px solid var(--line-hi); border-radius: 4px; font: inherit; font-size: 10px; }
#guide .gd-next { margin: 0 0 10px; padding-left: 16px; color: var(--ink); font-size: 11px; line-height: 1.5; }
#guide .gd-next li { margin: 2px 0; }
#guide .gd-acts { display: flex; gap: 6px; flex-wrap: wrap; }
#guide .gd-acts button { all: unset; cursor: pointer; padding: 4px 12px; border: 1px solid var(--line-hi); border-radius: 999px; color: var(--ink); font-size: 10.5px; letter-spacing: .06em; }
#guide .gd-acts button:hover, #guide .gd-acts button:focus-visible { border-color: var(--ink); color: var(--ink-hi); }
#guide .gd-acts .gd-go { border-color: var(--heat); background: var(--heat); color: #1a1208; }
#guide .gd-acts .gd-go:hover { filter: brightness(1.08); }
body.cine #guide, body.rec #guide, body.photo #guide, body.touring #guide, body.journeying #guide { display: none; }
/* (a machine's controls on the right: the guide stands beside them) */
@media (min-width: 641px) and (min-height: 501px) { body:has(#panel:not(:empty)) #guide { right: calc(max(var(--gut), env(safe-area-inset-right)) + 218px); } }

/* ── the level built on (on the tool bar, with a gallery): the floor or the gallery ── */
#levels { display: inline-flex; margin: 0 4px; border: 1px solid var(--line-hi); border-radius: 999px; overflow: hidden; align-self: center; }
#levels[hidden] { display: none; }
#levels button { all: unset; cursor: pointer; padding: 5px 11px; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }
#levels button[aria-checked="true"] { background: var(--heat); color: #1a1208; }
#levels button:not([aria-checked="true"]):hover, #levels button:focus-visible { color: var(--ink-hi); background: var(--line); }

/* ── Orders: the card while one is on (top right, as the guide's), and the board ── */
#order { position: fixed; z-index: 6; top: 64px; right: max(var(--gut), env(safe-area-inset-right)); width: min(300px, calc(100vw - 2 * var(--gut))); padding: 11px 13px 12px; border: 1px solid var(--line-hi); border-radius: 11px; background: var(--panel-solid); box-shadow: 0 14px 40px rgba(0, 0, 0, .35); }
#order[hidden] { display: none; }
#order.on { animation: panelin .3s ease both; }
#order header { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
#order .od-tag { font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--heat); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#order .gd-x { all: unset; cursor: pointer; display: grid; padding: 3px; border-radius: 6px; color: var(--faint); }
#order .gd-x svg { width: 13px; height: 13px; }
#order .gd-x:hover, #order .gd-x:focus-visible { color: var(--ink); background: var(--line); }
#order h3 { margin: 6px 0 6px; color: var(--ink-hi); font-size: 12.5px; font-weight: 600; letter-spacing: .03em; line-height: 1.4; }
#order .od-rows { list-style: none; margin: 0 0 7px; padding: 0; display: grid; gap: 6px; }
#order .od-rows li { display: grid; grid-template-columns: 1fr auto; gap: 3px 8px; font-size: 11px; color: var(--ink); }
#order .od-rows b { color: var(--ink-hi); font-weight: 600; font-variant-numeric: tabular-nums; }
#order .od-rows i { grid-column: 1 / -1; height: 4px; border-radius: 2px; background: linear-gradient(90deg, var(--heat) calc(var(--k) * 100%), var(--line-hi) 0); }
#order p { margin: 0 0 6px; font-size: 11px; line-height: 1.5; color: var(--ink); }
#order .od-time b { color: var(--ink-hi); font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: .02em; }
#order .od-pace { color: var(--dim); } #order .od-pace.ok { color: var(--ink); }
#order .od-res { font-size: 12.5px; font-weight: 600; color: var(--ink-hi); } #order .od-res.ok::before { content: '✓ '; color: var(--heat); } #order .od-res.late { color: var(--dim); }
#order .od-fault { color: var(--ink-hi); } #order .od-fault::before { content: '! '; color: var(--heat); font-weight: 700; } #order .od-fault.ok::before { content: '✓ '; }
#order .od-hint { color: var(--dim); font-size: 10.5px; }
#order .gd-acts { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 2px; }
#order .gd-acts button { all: unset; cursor: pointer; padding: 4px 12px; border: 1px solid var(--line-hi); border-radius: 999px; color: var(--ink); font-size: 10.5px; letter-spacing: .06em; }
#order .gd-acts button:hover, #order .gd-acts button:focus-visible { border-color: var(--ink); color: var(--ink-hi); }
#order .gd-acts .od-go { border-color: var(--heat); background: var(--heat); color: #1a1208; }
#order .gd-acts .od-go:hover { filter: brightness(1.08); }
body.rec #order, body.photo #order, body.guiding #order { display: none; }
@media (min-width: 641px) and (min-height: 501px) { body:has(#panel:not(:empty)) #order { right: calc(max(var(--gut), env(safe-area-inset-right)) + 218px); } }
/* (building: beside the output and the problems, which stand at the right) */
@media (min-width: 641px) and (min-height: 501px) { body.building #order { right: calc(max(var(--gut), env(safe-area-inset-right)) + 272px); } body.building #order .od-hint { display: none; } }
/* what kind an order is */
.od-kind { display: inline-block; flex: none; padding: 1px 7px; border: 1px solid var(--line-hi); border-radius: 999px; font-style: normal; font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); white-space: nowrap; }
.od-kind.od-tune { border-color: var(--volt); color: var(--ink-hi); }
.od-kind.od-build { border-color: var(--heat); color: var(--ink-hi); }
.od-kind.od-mend { border-color: var(--heat); background: var(--heat); color: #1a1208; }
#order .od-hint .od-kind { margin-right: 4px; }
#orders-win { position: fixed; inset: 0; z-index: 11; display: grid; place-items: center; padding: 24px; background: color-mix(in srgb, var(--bg) 78%, transparent); }
#orders-win[hidden] { display: none; }
.ow-card { width: min(780px, 100%); }
.ow-card header { align-items: center; }
.ow-card header > div { flex: 1; }
.ow-count { color: var(--heat); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
.ow-card footer b { color: var(--dim); font-weight: 500; }
.od-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.od-row { display: grid; grid-template-columns: 92px 1fr auto auto; align-items: center; gap: 10px; padding: 7px 8px 7px 10px; border: 1px solid var(--line); border-radius: 9px; background: var(--panel); }
.od-row[aria-current="true"] { border-color: var(--heat); box-shadow: 0 0 0 1px var(--heat) inset; }
.od-row .od-kind { justify-self: start; }
.od-what { display: grid; gap: 1px; min-width: 0; }
.od-what b { color: var(--ink-hi); font-weight: 500; font-size: 11.5px; letter-spacing: .02em; }
.od-what small { color: var(--dim); font-size: 10.5px; }
.od-done { font-style: normal; font-size: 10px; color: var(--heat); white-space: nowrap; }
.od-take { all: unset; cursor: pointer; padding: 4px 12px; border: 1px solid var(--line-hi); border-radius: 999px; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-hi); white-space: nowrap; }
.od-take:hover, .od-take:focus-visible { border-color: var(--heat); }
.od-row:not(.filled) .od-take { border-color: var(--heat); }
.od-wait { padding: 8px 10px; border: 1px dashed var(--line-hi); border-radius: 9px; color: var(--dim); font-size: 11px; }
.ow-here h3 { color: var(--heat); }

/* ── the Works window's codes ── */
.ww-coderow { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ww-code { display: flex; flex: 1 1 300px; gap: 6px; }
.ww-code input { flex: 1; min-width: 0; padding: 6px 10px; border: 1px solid var(--line-hi); border-radius: 999px; background: color-mix(in srgb, var(--bg) 70%, transparent); color: var(--ink-hi); font: inherit; font-size: 11px; }
.ww-code input:focus { outline: none; border-color: var(--ink); }
.ww-btn { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border: 1px solid var(--line-hi); border-radius: 999px; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-hi); white-space: nowrap; }
.ww-btn svg { width: 14px; height: 14px; }
.ww-btn:hover, .ww-btn:focus-visible { border-color: var(--ink); background: var(--line); }
.ww-codemsg { margin: 0; color: var(--dim); font-size: 10.5px; }
.ww-codemsg[hidden], .ww-codebox[hidden] { display: none; }
.ww-codebox { display: flex; flex-direction: column; gap: 6px; }
.ww-codebox textarea { height: 90px; resize: vertical; font: 10px/1.4 var(--mono); padding: 8px; border: 1px solid var(--line-hi); border-radius: 8px; background: color-mix(in srgb, var(--bg) 70%, transparent); color: var(--ink-hi); word-break: break-all; }
.ww-codebox .ww-btn { align-self: flex-end; }
#lib button.flash { animation: libflash 1.6s ease both; }
@keyframes libflash { 0%, 60% { border-color: var(--heat); box-shadow: 0 0 0 2px color-mix(in srgb, var(--heat) 45%, transparent); } 100% { box-shadow: none; } }
#ww-open { all: unset; cursor: pointer; padding: 4px 11px; border: 1px solid var(--line-hi); border-radius: 999px; color: var(--ink); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; }
#ww-open:hover, #ww-open:focus-visible { border-color: var(--heat); color: var(--ink-hi); }

/* ── watching and building: the library, the tools, the problems and the overlays only while building ── */
body.works:not(.building) #libwrap, body.works:not(.building) #tools, body.works:not(.building) #side { display: none; }
body.works.building #info, body.works.building #build-btn { display: none; }
#build-btn { all: unset; cursor: pointer; display: flex; align-items: center; gap: 8px; padding: 9px 20px 9px 16px; border-radius: 999px; background: var(--heat); color: #1a1208; font-size: 11.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; box-shadow: 0 6px 22px color-mix(in srgb, var(--heat) 28%, transparent); }
#build-btn svg { width: 16px; height: 16px; }
#build-btn:hover { filter: brightness(1.08); }
#build-btn:focus-visible { outline: 2px solid var(--ink-hi); outline-offset: 3px; }
#tools button svg { width: 15px; height: 15px; flex: none; }
#tools #build-done { color: var(--heat); }
#tools #build-done:hover { background: color-mix(in srgb, var(--heat) 15%, transparent); }
/* the library's search, and categories that fold */
#lib-q { font: inherit; font-size: 11px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); color: var(--ink-hi); outline: none; }
#lib-q::placeholder { color: var(--faint); }
#lib-q:focus { border-color: var(--line-hi); }
body.lib-shut #lib-q { display: none; }
.lib-cat { display: flex; flex-direction: column; gap: 4px; }
.lib-cat[hidden], #lib button[hidden] { display: none; }
#lib .lib-h { all: unset; cursor: pointer; display: flex; justify-content: space-between; align-items: center; margin-top: 4px; padding: 2px 4px 0; color: var(--faint); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; }
#lib .lib-cat:first-child .lib-h { margin-top: 0; }
#lib .lib-h em { font-style: normal; font-size: 9.5px; letter-spacing: .04em; }
#lib .lib-h:hover { color: var(--ink); }
#lib .lib-h:focus-visible { outline: 1px solid var(--ink); border-radius: 4px; }
#lib .lib-cat.shut .lib-h { color: var(--dim); }
#lib .lib-cat.shut:not(.found) > button[data-id] { display: none; }
/* the works' card: two things to do with it */
.info-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.info-acts button { all: unset; cursor: pointer; display: flex; align-items: center; gap: 7px; padding: 8px 14px; border: 1px solid var(--line-hi); border-radius: 999px; color: var(--ink-hi); font-size: 11px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; }
.info-acts button svg { width: 14px; height: 14px; flex: none; }
.info-acts button.accent { background: var(--heat); border-color: var(--heat); color: #1a1208; font-weight: 600; }
.info-acts button.accent:hover, .info-acts button.accent:focus-visible { filter: brightness(1.08); color: #1a1208; }
.info-acts button[hidden] { display: none; }
.info-acts button:not(.accent):hover, .info-acts button:not(.accent):focus-visible { border-color: var(--ink); background: var(--line); }
#info.machine .info-acts { display: none; }
/* the colour key, in the Looks panel under the lights */
/* the setting: where the works stands, and what the hall's windows look out on */
.lk-settings { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.lk-settings button { all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; gap: 7px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; color: var(--ink); font-size: 10.5px; }
.lk-settings svg { width: 18px; height: 18px; flex: none; color: var(--dim); }
.lk-settings button:hover, .lk-settings button:focus-visible { background: var(--line); color: var(--ink-hi); }
.lk-settings button[aria-checked="true"] { border-color: var(--heat); color: var(--ink-hi); }
.lk-settings button[aria-checked="true"] svg { color: var(--heat); }
.lk-viewrow[hidden] { display: none; }
.lk-views { flex-wrap: wrap; }
.lk-light { flex-wrap: wrap; }
.lk-legend { display: grid; gap: 3px; margin: 0 2px 10px; color: var(--faint); font-size: 10px; letter-spacing: .04em; }
.lk-legend span { display: flex; align-items: center; gap: 7px; }
.lk-legend i { width: 16px; height: 2px; border-radius: 1px; }
.lk-legend i.h { background: var(--heat); }
.lk-legend i.v { background: var(--volt); }

/* left: the machine library — a card per machine with its picture, what it takes and makes, what it needs */
#libwrap { top: 64px; left: max(var(--gut), env(safe-area-inset-left)); width: 236px; display: flex; flex-direction: column; gap: 6px; max-height: calc(100vh - 64px - 290px); }
#lib-toggle { all: unset; cursor: pointer; display: flex; justify-content: space-between; align-items: center; padding: 5px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); color: var(--dim); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; }
#lib-toggle svg { width: 12px; height: 12px; transition: transform .2s; }
#lib-toggle:hover { color: var(--ink); border-color: var(--line-hi); }
#lib-toggle:focus-visible { outline: 1px solid var(--ink); outline-offset: 1px; }
body.lib-shut #lib { display: none; }
body.lib-shut #lib-toggle svg { transform: rotate(-90deg); }
#lib { display: flex; flex-direction: column; gap: 4px; overflow: auto; scrollbar-width: none; min-height: 0; }
#lib h3 { margin: 4px 2px 0; font-size: 10px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--faint); }
#lib h3:first-child { margin-top: 0; }
#lib button { all: unset; cursor: pointer; display: grid; grid-template-columns: 76px 1fr; grid-template-rows: auto 1fr auto; column-gap: 8px; row-gap: 1px; padding: 5px 9px 6px 3px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); color: var(--dim); }
#lib img { grid-row: 1 / span 3; width: 76px; height: 52px; object-fit: contain; align-self: center; }
#lib img:not([src]) { visibility: hidden; }
#lib .t { font-weight: 500; color: var(--ink); font-size: 11px; letter-spacing: .02em; }
#lib .f { color: var(--dim); font-size: 10.5px; line-height: 1.35; }
#lib .n { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 2px; }
#lib .n em { margin-left: auto; font-style: normal; color: var(--faint); font-size: 10px; white-space: nowrap; }
#lib .n i { font-style: normal; font-size: 9.5px; letter-spacing: .04em; padding: 0 5px; border-radius: 4px; border: 1px solid currentColor; line-height: 14px; }
#lib .n i.h { color: var(--heat); } #lib .n i.v { color: var(--volt); }
#lib button:hover { border-color: var(--line-hi); }
#lib button:hover .t { color: var(--ink-hi); }
#lib button:focus-visible { outline: 1px solid var(--ink); outline-offset: 1px; }
#lib button[aria-current="true"] { border-color: var(--heat); box-shadow: 0 0 0 1px var(--heat) inset; }
#lib button[aria-current="true"] .t { color: var(--heat); }
/* what goes next, for the machine chosen or just set down */
#lib .lib-next[hidden] { display: none; }
#lib .lib-next { display: flex; flex-direction: column; gap: 4px; padding: 7px 6px 6px; margin-bottom: 4px; border: 1px solid color-mix(in srgb, var(--heat) 45%, var(--line)); border-radius: 10px; background: color-mix(in srgb, var(--heat) 5%, transparent); }
#lib .lib-next h3 { margin: 0 3px 1px; color: var(--heat); }
#lib .lib-next button { grid-template-columns: 56px 1fr; grid-template-rows: auto 1fr; padding: 4px 8px 5px 3px; }
#lib .lib-next img { grid-row: 1 / span 2; width: 56px; height: 38px; }
#lib .lib-next .f { color: var(--ink); }
#lib .lib-next .nx-steam .f { color: var(--heat); } #lib .lib-next .nx-power .f { color: var(--volt); }
#lib .lib-ok { margin: 0 3px; color: var(--dim); font-size: 10.5px; line-height: 1.4; }

/* bottom: the build tools, undo and redo, and what the current tool does */
#toolbar { left: 50%; transform: translateX(-50%); bottom: 34px; display: flex; flex-direction: column; align-items: center; gap: 6px; max-width: calc(100vw - 2 * var(--gut)); }
#tools { display: flex; align-items: center; gap: 2px; padding: 3px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); }
#tools button { all: unset; cursor: pointer; display: flex; align-items: center; gap: 6px; padding: 6px 9px; border-radius: 7px; color: var(--dim); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
#tools button kbd { font: inherit; font-size: 10px; color: var(--faint); border: 1px solid var(--line); border-radius: 4px; padding: 0 4px; }
#tools button.icon { padding: 6px 7px; }
#tools button.icon svg { width: 15px; height: 15px; }
#tools button:hover { color: var(--ink); background: var(--line); }
#tools button:disabled { color: var(--faint); opacity: .5; cursor: default; background: none; }
#tools button:focus-visible { outline: 1px solid var(--ink); }
#tools button[aria-pressed="true"] { color: var(--ink-hi); box-shadow: 0 0 0 1px var(--heat) inset; }
#tools .sep { width: 1px; align-self: stretch; margin: 4px 3px; background: var(--line); }
/* (on a dark pill, whatever is behind it — the scene in any look — and a little clear of what is below it) */
#hint { color: #d3d8df; font-size: 11.5px; letter-spacing: .03em; text-align: center; min-height: 15px; margin-bottom: 4px; padding: 5px 14px; border-radius: 999px; background: rgba(12, 13, 15, .68); box-shadow: 0 2px 10px rgba(0, 0, 0, .25); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
#hint:empty { padding: 0; min-height: 0; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
#panel button.danger:hover { color: var(--ink-hi); border-color: var(--line-hi); }
body.works #panel { max-height: calc(100vh - 330px); }

/* bottom-right: problems and overlays */
#side { right: max(var(--gut), env(safe-area-inset-right)); bottom: 56px; width: 260px; display: flex; flex-direction: column; align-items: stretch; gap: 6px; }
.siderow { display: flex; justify-content: flex-end; }
#probs-btn { all: unset; cursor: pointer; display: flex; align-items: center; gap: 7px; padding: 4px 11px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel); color: var(--faint); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; }
#probs-btn::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--faint); }
#probs-btn.has { color: var(--ink); } #probs-btn.has::before { background: var(--dim); }
#probs-btn.err { color: var(--ink-hi); border-color: var(--heat); } #probs-btn.err::before { background: var(--heat); box-shadow: 0 0 6px var(--heat); }
#probs-btn:hover { border-color: var(--line-hi); color: var(--ink); }
#probs-btn[aria-expanded="true"] { box-shadow: 0 0 0 1px var(--line-hi) inset; }
#probs-btn:focus-visible { outline: 1px solid var(--ink); outline-offset: 2px; }
#probs { max-height: calc(100vh - 470px); min-height: 90px; overflow: auto; scrollbar-width: none; padding: 10px 10px 8px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); }
#probs h3 { margin: 0 0 5px; font-size: 10px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--faint); }
#probs ul + h3 { margin-top: 10px; }
#probs ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
#probs li button { all: unset; cursor: pointer; display: grid; gap: 1px; width: 100%; box-sizing: border-box; padding: 5px 7px 5px 16px; border-radius: 6px; position: relative; }
#probs li button::before { content: ""; position: absolute; left: 5px; top: 10px; width: 5px; height: 5px; border-radius: 50%; background: var(--dim); }
#probs li.error button::before { background: var(--heat); }
#probs li.info button::before { background: var(--faint); }
#probs li button:hover { background: var(--line); }
#probs li button:focus-visible { outline: 1px solid var(--ink); }
#probs li b { font-weight: 400; color: var(--ink); }
#probs li span { color: var(--dim); font-size: 10.5px; }
#probs .none { margin: 0; color: var(--dim); }
/* a problem's Fix: what it would lay, at a click (its run on the floor while the pointer is on it); Fix all in the head */
#probs .p-fix { all: unset; cursor: pointer; display: inline-flex; align-items: baseline; gap: 6px; margin: 0 0 5px 16px; padding: 2px 10px 3px; border: 1px solid var(--heat); border-radius: 999px; color: var(--ink-hi); font-size: 10.5px; letter-spacing: .03em; }
#probs .p-fix i { font-style: normal; font-weight: 600; color: var(--heat); letter-spacing: .12em; text-transform: uppercase; font-size: 9.5px; }
#probs .p-fix.pick { border-color: var(--line-hi); color: var(--ink); }
#probs .p-fix:hover, #probs .p-fix:focus-visible { background: color-mix(in srgb, var(--heat) 16%, transparent); outline: none; }
#probs .p-fix.pick:hover, #probs .p-fix.pick:focus-visible { background: var(--line); }
#probs h3 { display: flex; align-items: center; justify-content: space-between; }
#probs .p-all { all: unset; cursor: pointer; padding: 2px 9px; border-radius: 999px; background: var(--heat); color: #1a1208; font-size: 9.5px; font-weight: 600; letter-spacing: .1em; }
#probs .p-all:hover, #probs .p-all:focus-visible { filter: brightness(1.08); }
/* what the works makes a minute */
#output[hidden] { display: none; }
#output { padding: 8px 10px 7px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); font-size: 10.5px; color: var(--dim); }
#output header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 4px; }
#output header b { font-weight: 500; color: var(--faint); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; }
#output header span { color: var(--faint); font-size: 10px; }
#output ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }
#output li { display: flex; justify-content: space-between; gap: 10px; }
#output li span { color: var(--ink); }
#output li b { font-weight: 600; color: var(--ink-hi); font-variant-numeric: tabular-nums; }
#output li:first-child b { color: var(--heat); }
#output li.out-sent { margin-top: 3px; padding-top: 3px; border-top: 1px solid var(--line); }
#output li.out-sent span { color: var(--dim); }
#output p { margin: 5px 0 0; line-height: 1.4; }
#output .out-none { margin: 0; }
#output .out-up { color: var(--ink-hi); } #output .out-up::first-letter { color: var(--heat); }
#output .out-down { color: var(--ink); }
#output .out-wait, #output .out-same { color: var(--faint); }
/* the build view's switch, beside the problems */
.siderow { justify-content: space-between; gap: 6px; }
#bv-btn { all: unset; cursor: pointer; display: flex; align-items: center; gap: 6px; padding: 4px 11px 4px 9px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel); color: var(--dim); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; }
#bv-btn svg { width: 13px; height: 13px; }
#bv-btn:hover { border-color: var(--line-hi); color: var(--ink); }
#bv-btn:focus-visible { outline: 1px solid var(--ink); outline-offset: 2px; }
#bv-btn[aria-pressed="true"] { color: var(--ink-hi); border-color: var(--heat); box-shadow: 0 0 0 1px var(--heat) inset; }
/* the history: every step, newest first */
#hist[hidden] { display: none; }
#hist { position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); z-index: 5; width: 280px; max-height: min(420px, 60vh); overflow: auto; scrollbar-width: none; padding: 8px 6px 6px; border: 1px solid var(--line-hi); border-radius: 12px; background: var(--panel-solid); display: grid; gap: 1px; }
#hist h3 { display: flex; justify-content: space-between; align-items: baseline; margin: 0 6px 5px; font-size: 10px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--faint); }
#hist h3 span { letter-spacing: .03em; text-transform: none; }
#hist button { all: unset; cursor: pointer; display: flex; align-items: center; gap: 8px; padding: 4px 8px; border-radius: 6px; color: var(--ink); font-size: 11px; line-height: 1.35; }
#hist button i { flex: none; width: 7px; height: 7px; border-radius: 50%; border: 1px solid var(--dim); }
#hist button:hover, #hist button:focus-visible { background: var(--line); color: var(--ink-hi); outline: none; }
#hist button[aria-current="true"] { color: var(--ink-hi); }
#hist button[aria-current="true"] i { background: var(--heat); border-color: var(--heat); }
#hist button.ahead { color: var(--faint); }
#hist button.ahead i { border-style: dashed; }
#hist button.start { color: var(--dim); }
#hist p { margin: 2px 8px; color: var(--faint); font-size: 10px; }
#overlays { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; padding: 3px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); }
#overlays button { all: unset; cursor: pointer; display: flex; justify-content: center; align-items: center; gap: 5px; padding: 5px 4px; border-radius: 7px; color: var(--dim); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; }
#overlays button kbd { font: inherit; font-size: 9.5px; color: var(--faint); border: 1px solid var(--line); border-radius: 4px; padding: 0 3px; }
#overlays button:hover { color: var(--ink); background: var(--line); }
#overlays button:focus-visible { outline: 1px solid var(--ink); }
#overlays button[aria-pressed="true"] { color: var(--ink-hi); box-shadow: 0 0 0 1px var(--heat) inset; }
#overlays button[data-o="power"][aria-pressed="true"] { box-shadow: 0 0 0 1px var(--volt) inset; }
#olegend[hidden], #probs[hidden] { display: none; }
#olegend { padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); display: grid; gap: 3px; color: var(--dim); font-size: 10.5px; }
#olegend b { font-weight: 500; color: var(--ink-hi); letter-spacing: .12em; text-transform: uppercase; font-size: 10px; }
#olegend .bar { display: block; height: 3px; border-radius: 2px; margin: 2px 0 3px; background: linear-gradient(90deg, color-mix(in srgb, var(--heat) 18%, transparent), var(--heat)); }
#olegend .bar.volt { background: linear-gradient(90deg, color-mix(in srgb, var(--volt) 18%, transparent), var(--volt)); }
#olegend .bar.goods { background: linear-gradient(90deg, var(--faint) 0 33%, color-mix(in srgb, var(--heat) 45%, transparent) 33% 66%, var(--heat) 66%); }

/* overlay labels on the floor, and the toast */
#olabels { position: fixed; inset: 0; z-index: 1; pointer-events: none; }
body.clean #olabels { display: none; }
#olabels div { position: absolute; white-space: nowrap; padding: 2px 7px; border: 1px solid var(--line-hi); border-radius: 6px; background: var(--panel); color: var(--ink-hi); font-size: 10.5px; letter-spacing: .03em; }
#olabels div.dim { color: var(--dim); border-color: var(--line); }
/* the port tags of the machine being placed: what goes in, what comes out, steam, current — bright where it would join */
#ptags { position: fixed; inset: 0; z-index: 1; pointer-events: none; }
body.clean #ptags, body.photo #ptags, body.rec #ptags { display: none; }
#ptags div { position: absolute; transform: translate(-50%, -130%); white-space: nowrap; padding: 1px 6px; border: 1px solid var(--line); border-radius: 5px; background: var(--panel); color: var(--dim); font-size: 10px; letter-spacing: .03em; }
#ptags div.goods.in::before { content: "→ "; } #ptags div.goods.out::after { content: " →"; }
#ptags div.steam { color: color-mix(in srgb, var(--heat) 70%, var(--dim)); }
#ptags div.power { color: color-mix(in srgb, var(--volt) 70%, var(--dim)); }
#ptags div.on { color: var(--ink-hi); border-color: var(--heat); }
#ptags div.power.on { border-color: var(--volt); }
#toast { position: fixed; z-index: 4; top: 60px; left: 50%; transform: translate(-50%, -6px); opacity: 0; pointer-events: none; transition: opacity .18s, transform .18s; padding: 6px 12px; border: 1px solid var(--line-hi); border-radius: 999px; background: var(--panel); color: var(--ink-hi); font-size: 11px; letter-spacing: .03em; }
#toast.on { opacity: 1; transform: translate(-50%, 0); }

/* the camera bar: what the camera is on, and how it films it */
#focus { top: 58px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 12px; max-width: min(900px, calc(100vw - 2 * var(--gut))); padding: 7px 8px 7px 16px; border: 1px solid var(--line-hi); border-radius: 14px; background: var(--panel); }
#focus[hidden] { display: none; }
.fc-head { display: grid; gap: 1px; min-width: 0; }
#fc-tag { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); white-space: nowrap; }
#fc-name { font-weight: 600; color: var(--ink-hi); font-size: 13px; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
#fc-text { color: var(--ink); font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 320px; }
#fc-modes { display: flex; gap: 2px; padding: 3px; border: 1px solid var(--line); border-radius: 11px; }
#fc-modes button, #fc-ov, #fc-x { all: unset; cursor: pointer; display: flex; align-items: center; gap: 6px; padding: 7px 11px; border-radius: 8px; color: var(--ink); font-size: 11px; letter-spacing: .07em; text-transform: uppercase; white-space: nowrap; }
#fc-ov, #fc-x { border: 1px solid var(--line-hi); }
#fc-modes svg, #fc-ov svg, #fc-x svg { width: 17px; height: 17px; flex: none; }
#fc-x svg { width: 14px; height: 14px; }
#fc-modes button:hover, #fc-ov:hover, #fc-x:hover { color: var(--ink-hi); background: var(--line); }
#fc-modes button[aria-pressed="true"] { color: var(--ink-hi); box-shadow: 0 0 0 1px var(--heat) inset; background: color-mix(in srgb, var(--heat) 10%, transparent); }
#fc-modes button:focus-visible, #fc-ov:focus-visible, #fc-x:focus-visible { outline: 1px solid var(--ink); }
/* filming: the builder steps aside */
body.cine #libwrap, body.cine #toolbar, body.cine #side, body.cine #info, body.cine #panel, body.cine #legend { display: none; }
/* the caption of a tour or a journey: what this is, in a sentence, and what to do next */
#jcap { left: max(var(--gut), env(safe-area-inset-left)); bottom: 28px; width: min(500px, calc(100vw - 2 * var(--gut))); padding: 16px 20px 18px; border: 1px solid var(--line-hi); border-left: 3px solid var(--volt); border-radius: 12px; background: var(--panel); overflow: hidden; opacity: 0; transform: translateY(6px); transition: opacity .35s, transform .35s; }
body.touring #jcap { border-left-color: var(--heat); }
#jcap.on { opacity: 1; transform: none; }
#jcap[hidden] { display: none; }
#jc-tag { font-size: 10.5px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--volt); }
body.touring #jc-tag { color: var(--heat); }
#jcap h2 { margin: 5px 0 7px; font-size: 21px; line-height: 1.2; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-hi); font-weight: 600; }
#jcap p { margin: 0; color: var(--ink); font-size: 14px; line-height: 1.5; }
.jc-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.jc-acts button { all: unset; cursor: pointer; display: flex; align-items: center; gap: 8px; padding: 9px 16px; border: 1px solid var(--line-hi); border-radius: 999px; color: var(--ink-hi); font-size: 11.5px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; }
.jc-acts button svg { width: 15px; height: 15px; }
.jc-acts button:hover, .jc-acts button:focus-visible { border-color: var(--ink); background: var(--line); }
.jc-acts button.accent { background: var(--heat); border-color: var(--heat); color: #1a1208; font-weight: 600; }
.jc-acts button.accent:hover, .jc-acts button.accent:focus-visible { filter: brightness(1.08); background: var(--heat); }
body:not(.touring) #jcap .tour-only, body:not(.journeying) #jcap .journey-only { display: none; }
/* how long this stop of the tour lasts, along the caption's foot */
.jc-time { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--heat); transform-origin: 0 50%; transform: scaleX(0); }
body.touring #jcap.on .jc-time { animation: jc-time var(--dur, 8s) linear forwards; }
body:not(.touring) .jc-time { display: none; }
@keyframes jc-time { to { transform: scaleX(1); } }
body.journeying #info, body.journeying #toolbar { display: none; }
@media (max-width: 1440px) {
  .brand em:not(#wtime) { display: none; }
  .brand em#wtime { border-left: 0; padding-left: 4px; }
}
#passport { right: max(var(--gut), env(safe-area-inset-right)); top: 110px; width: min(360px, calc(100vw - 2 * var(--gut))); max-height: calc(100vh - 220px); overflow: auto; scrollbar-width: none; padding: 14px 16px; border: 1px solid var(--line-hi); border-radius: 12px; background: var(--panel); z-index: 4; }
#passport[hidden] { display: none; }
#passport .tag { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--faint); }
#passport h2 { margin: 2px 0 4px; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-hi); font-weight: 600; }
#pp-made { margin: 0 0 10px; color: var(--dim); }
#pp-list { list-style: none; margin: 0; padding: 0 0 0 12px; border-left: 1px solid var(--line-hi); display: grid; gap: 9px; }
#pp-list li { display: grid; gap: 1px; position: relative; }
#pp-list li::before { content: ""; position: absolute; left: -15.5px; top: 5px; width: 6px; height: 6px; border-radius: 50%; background: var(--heat); }
#pp-list time { font-size: 10px; color: var(--faint); letter-spacing: .06em; }
#pp-list b { font-weight: 500; color: var(--ink); }
#pp-list span { color: var(--dim); font-size: 10.5px; }
#pp-x { all: unset; cursor: pointer; position: absolute; right: 10px; top: 10px; color: var(--dim); padding: 3px; border-radius: 6px; display: grid; }
#pp-x svg { width: 14px; height: 14px; }
#pp-x:hover { color: var(--ink); background: var(--line); }

/* the intro: titles over the film; everything else steps aside */
body.intro .ui, body.intro #olabels, body.intro #toast, body.intro #callout { display: none !important; }
#intro { position: fixed; inset: 0; z-index: 6; pointer-events: none; transition: opacity .6s; }
#intro.out { opacity: 0; }
#intro[hidden] { display: none; }
#intro-fade { position: absolute; inset: 0; background: #000; opacity: 1; }
/* (the title and the captions on dark panels, large, so they read over anything the camera is on — light text on
   them in any look, the light linework's too) */
#intro-title { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); text-align: center; opacity: 0; transition: opacity 1.2s; padding: clamp(18px, 3vw, 34px) clamp(22px, 5vw, 60px); border-radius: 18px; background: rgba(8, 8, 10, .66); box-shadow: 0 0 60px 30px rgba(8, 8, 10, .35); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); max-width: calc(100vw - 2 * var(--gut)); box-sizing: border-box; }
#intro-title.on { opacity: 1; }
#intro-title h1 { margin: 0; font-size: clamp(34px, 7vw, 86px); letter-spacing: .3em; text-transform: uppercase; font-weight: 600; color: #eef1f4; }
#intro-title p { margin: 14px 0 0; color: #dfe3e8; letter-spacing: .1em; font-size: clamp(14px, 1.7vw, 19px); text-transform: uppercase; }
#intro-title small { display: block; margin-top: 16px; color: #aab2bd; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; }
#intro-cap { position: absolute; left: max(var(--gut), 4vw); bottom: 78px; display: grid; gap: 6px; max-width: min(640px, calc(100vw - 2 * var(--gut))); padding: 16px 22px 18px; border-radius: 14px; background: rgba(8, 8, 10, .7); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-sizing: border-box; opacity: 0; transform: translateY(8px); transition: opacity .5s, transform .5s; }
#intro-cap.on { opacity: 1; transform: none; }
#intro-cap small { color: #8d96a3; font-size: 12px; letter-spacing: .2em; }
#intro-cap b { color: var(--heat); font-size: clamp(20px, 2.4vw, 28px); letter-spacing: .12em; text-transform: uppercase; font-weight: 600; }
#intro-cap span { color: #e6e9ee; font-size: clamp(15px, 1.6vw, 19px); line-height: 1.4; }
#intro-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: color-mix(in srgb, var(--line) 60%, transparent); }
#intro-bar { display: block; height: 100%; background: var(--heat); transform-origin: 0 50%; transform: scaleX(0); }
#intro-skip { all: unset; pointer-events: auto; cursor: pointer; position: absolute; right: max(var(--gut), 3vw); bottom: 24px; padding: 6px 14px; border: 1px solid var(--line-hi); border-radius: 999px; background: var(--panel); color: var(--ink); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }
#intro-skip:hover, #intro-skip:focus-visible { color: var(--ink-hi); border-color: var(--heat); }

@media (max-width: 1180px), (max-height: 760px) {
  body.works #info p { display: none; }
  #libwrap { max-height: calc(100vh - 64px - 90px); }
}
@media (max-width: 820px) {
  #libwrap { top: 96px; width: min(232px, 60vw); max-height: 50vh; }
  #toolbar { bottom: 28px; }
  #side { bottom: auto; top: 96px; width: min(240px, 46vw); }
  #overlays button kbd { display: none; }
  #hint { max-width: calc(100vw - 32px); }
  #nav { top: auto; bottom: 34px; width: auto; flex-direction: row; flex-wrap: wrap; right: var(--gut); }
  #nav h3 { display: none; }
  #nav button { padding: 4px 8px; font-size: 11px; }
  #panel { top: 58px; width: min(200px, 46vw); max-height: calc(100vh - 140px); }
  #credit { display: none; }
  #read { left: max(var(--gut), env(safe-area-inset-left)); bottom: 10px; font-size: 10px; text-align: left; max-width: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .pill span { display: none; }
  .brand em { display: none; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* ── recording (from City Kit) ── */
#rec-btn .dot { transition: fill .2s; }
#rec-btn.on { color: #ff4d4d; border-color: #ff4d4d; }
#rec-btn.on .dot { animation: recblink 1.2s steps(2, end) infinite; }
@keyframes recblink { 50% { opacity: .25; } }
@keyframes panelin { from { opacity: 0; transform: translateY(-4px); } }
#recp { top: 56px; right: var(--gut); width: 330px; max-width: calc(100vw - 2 * var(--gut)); padding: 10px 14px 14px; border: 1px solid var(--line-hi); border-radius: 12px; background: var(--panel-solid); z-index: 7; display: flex; flex-direction: column; gap: 8px; animation: panelin .18s ease both; }
#recp[hidden] { display: none; }
#recp header { display: flex; align-items: baseline; gap: 8px; padding-bottom: 4px; }
#recp header span { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--dim); margin-right: auto; }
#recp header small { font-size: 10px; color: var(--faint); letter-spacing: .06em; }
.rec-opt { display: grid; grid-template-columns: 54px 1fr; align-items: center; gap: 8px; }
.rec-opt > span { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }
#recp .chips, #trailer .chips, #photo-bar .chips { display: flex; flex-wrap: wrap; gap: 4px; }
#recp .chips button, #trailer .chips button, #photo-bar .chips button { all: unset; cursor: pointer; display: inline-flex; align-items: center; height: 24px; padding: 0 9px; border: 1px solid var(--line); border-radius: 999px; font-size: 10px; letter-spacing: .06em; color: var(--dim); }
#recp .chips button:hover, #trailer .chips button:hover, #photo-bar .chips button:hover { color: var(--ink-hi); border-color: var(--line-hi); }
#recp .chips button[aria-checked="true"], #recp .chips button[aria-pressed="true"], #trailer .chips button[aria-checked="true"], #trailer .chips button[aria-pressed="true"], #photo-bar .chips button[aria-checked="true"] { color: var(--accent); border-color: var(--accent); }
#recp .chips button:disabled { opacity: .35; cursor: default; }
#recp button:focus-visible, #trailer button:focus-visible, #rec-hud button:focus-visible, #rec-done button:focus-visible, #photo-bar button:focus-visible { outline: 1px solid var(--accent); outline-offset: 2px; }
.rec-note { margin: 2px 0 0; font-size: 10.5px; line-height: 1.5; color: var(--dim); }
.rec-go { all: unset; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 32px; padding: 0 14px; border-radius: 8px; background: var(--accent); color: #111; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; font-weight: 600; }
.rec-go i { width: 9px; height: 9px; border-radius: 50%; background: #c0201a; box-shadow: 0 0 0 2px rgba(0,0,0,.15); }
.rec-go:hover { filter: brightness(1.08); }
.rec-go:disabled { opacity: .4; cursor: default; filter: none; }
.rec-trailer { all: unset; cursor: pointer; display: flex; align-items: center; gap: 10px; margin: 0 0 4px; padding: 8px 10px; border: 1px solid var(--accent); border-radius: 9px; }
.rec-trailer svg { width: 18px; height: 18px; color: var(--accent); flex: none; }
.rec-trailer span { display: flex; flex-direction: column; gap: 1px; }
.rec-trailer b { font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-hi); }
.rec-trailer small { font-size: 10px; color: var(--dim); }
.rec-trailer:hover { background: var(--bg); }
#rec-hud { top: 12px; left: var(--gut); z-index: 8; display: flex; align-items: center; gap: 10px; height: 34px; padding: 0 6px 0 12px; border: 1px solid var(--line-hi); border-radius: 999px; background: var(--panel-solid); font-size: 11px; color: var(--dim); font-variant-numeric: tabular-nums; }
#rec-hud[hidden] { display: none; }
#rec-hud b { color: var(--ink-hi); font-weight: 500; letter-spacing: .04em; min-width: 34px; }
.rec-dot { width: 9px; height: 9px; border-radius: 50%; background: #ff4d4d; box-shadow: 0 0 8px #ff4d4d; animation: recblink 1.2s steps(2, end) infinite; }
.rec-bar { width: 110px; height: 3px; border-radius: 2px; background: var(--line); overflow: hidden; }
.rec-bar[hidden] { display: none; }
.rec-bar i { display: block; height: 100%; width: 0; background: var(--accent); transition: width .2s linear; }
#rec-hud button { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--line-hi); color: var(--ink); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }
#rec-hud button[hidden] { display: none; }
#rec-hud button svg { width: 11px; height: 11px; color: #ff4d4d; }
#rec-hud button:hover { color: var(--ink-hi); border-color: var(--ink); }
body.rec .brand, body.rec #libwrap, body.rec #toolbar, body.rec #side, body.rec #info, body.rec #legend, body.rec #credit, body.rec #read, body.rec #panel, body.rec #olabels { opacity: 0; pointer-events: none; }
body.rec #stage canvas { box-shadow: 0 0 0 1px var(--line-hi), 0 24px 70px rgba(0, 0, 0, .45); }
body.rec #focus { left: 50%; transform: translateX(-50%); bottom: 14px; top: auto; }
body.rec-titles #jcap { opacity: 0; }
body.rec-render #stage, body.rec-render #focus, body.rec-render #top .tools { pointer-events: none; }
body.rec-render #top .tools { opacity: .35; }
#rec-done { position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; padding: 24px; background: color-mix(in srgb, var(--bg) 70%, transparent); backdrop-filter: blur(6px); }
#rec-done[hidden] { display: none; }
.rec-card { width: min(720px, 100%); max-height: calc(100vh - 48px); display: flex; flex-direction: column; gap: 12px; padding: 16px; border: 1px solid var(--line-hi); border-radius: 14px; background: var(--panel-solid); }
.rec-card h2 { margin: 0; font-size: 11px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--dim); }
#rec-video { display: block; width: 100%; max-height: calc(100vh - 220px); object-fit: contain; border-radius: 8px; background: #000; }
#rec-done-info { margin: 0; font-size: 11px; color: var(--ink); font-variant-numeric: tabular-nums; }
.rec-acts { display: flex; gap: 8px; }
#rec-discard, #tr-preview, #tr-cancel, #pb-big { all: unset; cursor: pointer; height: 32px; padding: 0 14px; border-radius: 8px; border: 1px solid var(--line-hi); color: var(--ink); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; display: inline-flex; align-items: center; }
#rec-discard:hover, #tr-preview:hover, #tr-cancel:hover, #pb-big:hover { color: var(--ink-hi); border-color: var(--ink); }
#tr-go:disabled, #tr-preview:disabled { opacity: .4; cursor: default; }
@media (max-width: 520px) { #rec-hud span { display: none; } }

/* ── make a trailer ── */
#trailer { position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; padding: 20px; background: color-mix(in srgb, var(--bg) 72%, transparent); backdrop-filter: blur(6px); }
#trailer[hidden] { display: none; }
.nc-card { width: min(760px, 100%); max-height: calc(100vh - 40px); overflow: auto; padding: 14px 16px 16px; border: 1px solid var(--line-hi); border-radius: 14px; background: var(--panel-solid); }
.nc-card header { display: flex; align-items: center; }
.nc-card h2 { margin: 0 auto 0 0; font-size: 11px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--dim); }
.cp-x { all: unset; cursor: pointer; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 7px; color: var(--dim); }
.cp-x:hover { color: var(--ink-hi); background: var(--bg); }
.nc-row { display: grid; grid-template-columns: 58px 1fr; gap: 8px; align-items: center; }
.nc-row > span:first-child { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }
.nc-note { margin: 12px 0 0; font-size: 10.5px; color: var(--dim); line-height: 1.5; }
.nc-acts { display: flex; gap: 8px; margin-top: 12px; }
.tr-card { width: min(880px, 100%); }
.tr-body { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 18px; margin-top: 10px; }
.tr-left, .tr-right { min-width: 0; }
.tr-left .nc-row { margin-bottom: 6px; }
.tr-card h3 { margin: 12px 0 6px; font-size: 10px; font-weight: 400; letter-spacing: .16em; text-transform: uppercase; color: var(--dim); }
.tr-card h3 small { letter-spacing: .04em; text-transform: none; color: var(--faint); margin-left: 6px; }
.tr-card input { all: unset; flex: 1; min-width: 0; padding: 5px 9px; border: 1px solid var(--line-hi); border-radius: 7px; background: var(--bg); color: var(--ink-hi); font-size: 12px; }
.tr-card input:focus { border-color: var(--accent); }
.tr-list { list-style: none; margin: 0; padding: 0; max-height: 330px; overflow: auto; display: flex; flex-direction: column; gap: 3px; scrollbar-width: thin; }
.tr-list li { display: flex; align-items: center; gap: 6px; border: 1px solid var(--line); border-radius: 8px; padding: 2px 4px 2px 2px; }
.tr-list li.on { border-color: var(--line-hi); background: color-mix(in srgb, var(--bg) 60%, transparent); }
.tr-tick { all: unset; cursor: pointer; flex: 1; min-width: 0; display: flex; align-items: center; gap: 9px; padding: 5px 6px; border-radius: 6px; }
.tr-tick i { width: 12px; height: 12px; border-radius: 3px; border: 1px solid var(--line-hi); flex: none; box-sizing: border-box; }
.tr-tick[aria-checked="true"] i { background: var(--accent); border-color: var(--accent); }
.tr-tick span { display: flex; flex-direction: column; min-width: 0; }
.tr-tick b { font-size: 11.5px; font-weight: 500; color: var(--ink); }
.tr-tick b small { color: var(--faint); font-weight: 400; }
.tr-tick em { font-style: normal; font-size: 10px; color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tr-list li.on .tr-tick b { color: var(--ink-hi); }
.tr-move { display: flex; gap: 2px; }
.tr-move button { all: unset; cursor: pointer; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 5px; color: var(--dim); font-size: 12px; }
.tr-move button:hover:not(:disabled) { color: var(--ink-hi); background: var(--bg); }
.tr-move button:disabled { opacity: .25; cursor: default; }
.tr-right .nc-row { margin-bottom: 8px; }
@media (max-width: 760px) { .tr-body { grid-template-columns: 1fr; } .tr-list { max-height: 220px; } }

/* ── photograph ── */
#photo[aria-pressed="true"] { color: var(--heat); border-color: var(--heat); }
body.photo .ui:not(#photo-bar) { opacity: 0; pointer-events: none; }
body.photo #callout, body.photo #olabels { display: none; }
#photo-bar { position: fixed; z-index: 9; left: 50%; bottom: 18px; transform: translateX(-50%); width: max-content; display: flex; align-items: center; gap: 12px; padding: 8px 10px 8px 14px; max-width: calc(100vw - 2 * var(--gut)); flex-wrap: wrap; justify-content: center; border: 1px solid var(--line-hi); border-radius: 14px; background: var(--panel-solid); animation: panelin .18s ease both; }
#photo-bar[hidden] { display: none; }
/* on foot (ui/walk.js): a bar of what the keys do; on a phone, a stick to walk with. The view is the walker's: the
   build button, the works card (but for a machine you picked), the camera bar and the guide go while walking */
#walk-bar { position: fixed; z-index: 9; left: 50%; bottom: max(18px, env(safe-area-inset-bottom)); transform: translateX(-50%); width: max-content; max-width: calc(100vw - 2 * var(--gut)); display: flex; align-items: center; gap: 12px; padding: 7px 8px 7px 14px; border: 1px solid var(--line-hi); border-radius: 14px; background: var(--panel); animation: panelin .18s ease both; }
#walk-bar[hidden] { display: none; }
.wb-keys { font-size: 11px; color: var(--dim); letter-spacing: .02em; }
.wb-keys kbd { display: inline-block; min-width: 16px; padding: 1px 4px; margin-right: 2px; border: 1px solid var(--line-hi); border-radius: 4px; font: 10px var(--mono); color: var(--ink); text-align: center; }
.touch-keys { display: none; }
#walk-x { all: unset; cursor: pointer; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 8px; color: var(--dim); }
#walk-x:hover { color: var(--ink-hi); background: var(--bg); }
#walk-x:focus-visible { outline: 1px solid var(--accent); outline-offset: 2px; }
#walk-stick { display: none; position: fixed; z-index: 9; left: max(22px, env(safe-area-inset-left)); bottom: max(84px, calc(env(safe-area-inset-bottom) + 70px)); width: 116px; height: 116px; border-radius: 50%; border: 1px solid var(--line-hi); background: rgba(22, 23, 24, .42); touch-action: none; }
#walk-stick i { position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; background: var(--panel-solid); border: 1px solid var(--accent); box-shadow: 0 0 12px rgba(0, 0, 0, .4); }
body.walking #build-btn, body.walking #info:not(.machine), body.walking #focus, body.walking #guide, body.walking #hint { display: none; }
@media (pointer: coarse) {
  body.walking #walk-stick { display: block; }
  .wide-keys { display: none; }
  .touch-keys { display: inline; }
}
.pb-tag { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--dim); }
.pb-rng { display: flex; align-items: center; gap: 7px; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }
.pb-rng input { width: 96px; accent-color: var(--heat); }
#pb-x { all: unset; cursor: pointer; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 8px; color: var(--dim); }
#pb-x:hover { color: var(--ink-hi); background: var(--bg); }
#pb-guide { position: fixed; inset: 0; z-index: 3; pointer-events: none; }
#pb-guide[hidden] { display: none; }
#pb-guide i { position: absolute; background: color-mix(in srgb, var(--ink) 35%, transparent); }
#pb-guide i:nth-child(1) { left: 33.333%; top: 0; bottom: 0; width: 1px; }
#pb-guide i:nth-child(2) { left: 66.667%; top: 0; bottom: 0; width: 1px; }
#pb-guide i:nth-child(3) { top: 33.333%; left: 0; right: 0; height: 1px; }
#pb-guide i:nth-child(4) { top: 66.667%; left: 0; right: 0; height: 1px; }
body.flash #stage { animation: snapflash .35s ease-out; }
@keyframes snapflash { 0% { filter: brightness(2.2); } 100% { filter: none; } }

/* ── the perf HUD (` or ?perf=1) ── */
#perfhud { position: fixed; top: 56px; left: 50%; transform: translateX(-50%); z-index: 20; padding: 6px 9px; border: 1px solid var(--line-hi); border-radius: 8px; background: var(--panel-solid); font: 10px/1.55 var(--mono); color: var(--dim); font-variant-numeric: tabular-nums; pointer-events: none; white-space: nowrap; }
#perfhud[hidden] { display: none; }
#perfhud b { color: var(--ink-hi); font-weight: 500; }

/* ── help and credits ── */
#help, #credits { position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; padding: 20px; background: color-mix(in srgb, var(--bg) 72%, transparent); backdrop-filter: blur(6px); }
#help[hidden], #credits[hidden] { display: none; }
.help-card { width: min(900px, 100%); max-height: calc(100vh - 40px); overflow: auto; padding: 14px 18px 14px; border: 1px solid var(--line-hi); border-radius: 14px; background: var(--panel-solid); scrollbar-width: thin; }
.help-card header { display: flex; align-items: center; }
.help-card h2 { margin: 0 auto 0 0; font-size: 11px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--dim); }
.help-x { all: unset; cursor: pointer; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 7px; color: var(--dim); }
.help-x:hover, .help-x:focus-visible { color: var(--ink-hi); background: var(--bg); }
.help-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 6px 22px; margin-top: 8px; }
.help-grid h3 { margin: 8px 0 4px; font-size: 10px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--heat); }
.help-grid ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 5px; }
.help-grid li { color: var(--ink); font-size: 11.5px; line-height: 1.5; padding-left: 12px; position: relative; }
.help-grid li::before { content: ""; position: absolute; left: 0; top: 8px; width: 4px; height: 1px; background: var(--dim); }
.help-card kbd { font: inherit; font-size: 10px; color: var(--ink-hi); border: 1px solid var(--line-hi); border-radius: 4px; padding: 0 4px; white-space: nowrap; }
.help-card footer { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--line); color: var(--faint); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; }
#help-credits { all: unset; cursor: pointer; padding: 4px 10px; border: 1px solid var(--line-hi); border-radius: 999px; color: var(--ink); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; }
#help-credits:hover, #help-credits:focus-visible { color: var(--ink-hi); border-color: var(--heat); }
.help-q { display: flex; align-items: center; gap: 2px; }
.help-q span { margin-right: 8px; }
.help-q button { all: unset; cursor: pointer; padding: 4px 9px; border-radius: 999px; color: var(--dim); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; }
.help-q button:hover, .help-q button:focus-visible { color: var(--ink-hi); }
.help-q button[aria-pressed="true"] { color: var(--ink-hi); box-shadow: 0 0 0 1px var(--heat) inset; }
.cr-card { width: min(560px, 100%); }
.cr-title { margin: 18px 0 2px; text-align: center; font-size: 26px; letter-spacing: .3em; text-transform: uppercase; color: var(--ink-hi); font-weight: 600; }
.cr-line { margin: 0 0 16px; text-align: center; color: var(--dim); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
.cr-card dl { display: grid; grid-template-columns: 120px 1fr; gap: 9px 14px; margin: 0 0 6px; }
.cr-card dt { color: var(--faint); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; padding-top: 2px; }
.cr-card dd { margin: 0; color: var(--ink); font-size: 11.5px; line-height: 1.55; }
.cr-card a { color: var(--ink-hi); text-decoration: none; border-bottom: 1px solid var(--line-hi); }
.cr-card a:hover { border-color: var(--heat); }
@media (max-width: 520px) { .cr-card dl { grid-template-columns: 1fr; gap: 2px 0; } .cr-card dd { margin-bottom: 8px; } }

/* ── tips: one line at a time ── */
#tip { left: max(var(--gut), env(safe-area-inset-left)); bottom: 40px; z-index: 5; width: min(330px, calc(100vw - 2 * var(--gut))); padding: 10px 12px 9px; border: 1px solid var(--heat); border-radius: 10px; background: var(--panel-solid); box-shadow: 0 14px 40px rgba(0, 0, 0, .3); }
#tip[hidden] { display: none; }
#tip.on { animation: panelin .3s ease both; }
#tip .tip-tag { font-size: 9.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--heat); }
#tip p { margin: 3px 0 7px; color: var(--ink); line-height: 1.5; font-size: 11.5px; }
.tip-acts { display: flex; gap: 6px; }
.tip-acts button { all: unset; cursor: pointer; padding: 3px 9px; border: 1px solid var(--line-hi); border-radius: 999px; color: var(--ink); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.tip-acts button[data-a="off"] { border-color: transparent; color: var(--dim); }
.tip-acts button:hover, .tip-acts button:focus-visible { color: var(--ink-hi); border-color: var(--line-hi); }
body.touring #tip, body.journeying #tip, body.photo #tip, body.rec #tip { display: none; }
body.tip-on #info { visibility: hidden; }
@media (max-width: 1180px), (max-height: 760px) { #tip { bottom: 120px; } }
/* "Try this" under a machine's controls */
#panel .try { padding: 8px 10px; border: 1px dashed var(--line-hi); border-radius: 8px; color: var(--ink); font-size: 10.5px; line-height: 1.5; }
#panel .try b { display: block; font-size: 9.5px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--heat); margin-bottom: 2px; }

/* ── phones: icons in the top bar, the menus and the library as sheets, the tools with their names under them ── */
.narrow-only, #tools .brk { display: none !important; }
@media (max-width: 640px), (max-height: 500px) {
  .wide-only { display: none !important; }
  .dm-sw.narrow-only { display: grid !important; gap: 0; }
  #m-help.narrow-only { display: grid !important; }
  body.works #tools #lib-btn { display: flex !important; }
  body.works #top { left: max(10px, env(safe-area-inset-left)); right: max(10px, env(safe-area-inset-right)); top: max(10px, env(safe-area-inset-top)); gap: 8px; }
  body.works .brand { min-width: 0; gap: 4px; }
  body.works .brand-name, body.works #wtime { display: none !important; }
  body.works #works-name { border-left: 0; padding-left: 2px; max-width: 46vw; }
  body.works .tools { flex-wrap: nowrap; gap: 6px; }
  body.works .pill { width: 34px; height: 34px; padding: 0; justify-content: center; }
  body.works .pill span, body.works .pill .chev { display: none; }
  body.works .round { width: 34px; height: 34px; }
  .menuwrap { position: static; }
  .dropmenu { position: fixed; top: 56px; left: 10px; right: 10px; min-width: 0; max-height: calc(100vh - 80px); overflow: auto; }
  #works-win { padding: 0; place-items: stretch; }
  .ww-card { width: 100%; height: 100%; max-height: none; border: 0; border-radius: 0; padding: max(14px, env(safe-area-inset-top)) 12px 14px; align-content: start; }
  .ww-surprise { flex-direction: column; align-items: stretch; }
  .ww-go { justify-content: center; }
  .ww-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .ww-item span { display: none; }
  .ww-go small { display: none; }
  .ww-sec h3 small { display: none; }
  #build-choose { padding: 0; place-items: stretch; }
  .bc-card { width: 100%; height: 100%; max-height: none; border: 0; border-radius: 0; padding: max(14px, env(safe-area-inset-top)) 12px 14px; align-content: start; }
  .bc-opt { grid-template-columns: 34px 1fr; gap: 10px; padding: 10px 11px; }
  .bc-opt > svg { width: 34px; height: 34px; }
  #guide { top: calc(max(10px, env(safe-area-inset-top)) + 48px); left: max(10px, env(safe-area-inset-left)); right: max(10px, env(safe-area-inset-right)); width: auto; padding: 9px 11px 10px; }
  #guide p { margin-bottom: 7px; font-size: 11px; }
  body.works.building:not(.lib-shut) #guide { display: none; }
  #order { top: calc(max(10px, env(safe-area-inset-top)) + 48px); left: max(10px, env(safe-area-inset-left)); right: max(10px, env(safe-area-inset-right)); width: auto; padding: 9px 11px 10px; }
  #order .od-hint, #order .od-pace { display: none; }
  body.works.building:not(.lib-shut) #order { display: none; }
  #orders-win { padding: 0; place-items: stretch; }
  .ow-card { width: 100%; max-height: none; height: 100%; border: 0; border-radius: 0; padding: max(14px, env(safe-area-inset-top)) 12px 14px; align-content: start; }
  .ow-card header { flex-wrap: wrap; }
  .od-row { grid-template-columns: 1fr auto; gap: 4px 8px; }
  .od-row .od-kind { grid-column: 1 / -1; }
  .od-row .od-done { grid-column: 1; grid-row: 3; }
  .od-row .od-take { grid-column: 2; grid-row: 2 / 4; }
  .ww-themes { min-width: 0; flex: none; }
  /* watching: the works' card above the Build button */
  body.works #info { left: max(10px, env(safe-area-inset-left)); right: max(10px, env(safe-area-inset-right)); width: auto; bottom: 74px; padding: 10px 12px; }
  body.works #info p { display: none; }
  body.works #info.machine { display: none; }
  body.works #toolbar { bottom: max(14px, env(safe-area-inset-bottom)); left: 10px; right: 10px; transform: none; max-width: none; }
  body.works #hint { display: none; }
  /* building: the tools as a strip, the library a sheet above it */
  body.works #tools { max-width: 100%; flex-wrap: wrap; justify-content: center; gap: 0; row-gap: 2px; padding: 3px 2px; }
  body.works #tools button { flex-direction: column; gap: 2px; min-width: 42px; padding: 5px 1px 4px; font-size: 8px; letter-spacing: 0; }
  body.works #tools .sep { display: none; }
  body.works #tools .brk { display: block !important; flex-basis: 100%; height: 0; }
  /* (above the tool bar, however many rows it takes: --tbh, its height, kept by the app) */
  body.works.building #libwrap { top: auto; bottom: calc(var(--tbh, 88px) + 18px); left: max(10px, env(safe-area-inset-left)); right: max(10px, env(safe-area-inset-right)); width: auto; max-height: 52vh; padding: 8px; border: 1px solid var(--line-hi); border-radius: 12px; background: var(--panel-solid); z-index: 4; }
  body.works.building.lib-shut #libwrap { display: none; }
  body.works #lib-toggle { display: none; }
  body.works.lib-shut #lib-q { display: block; }
  body.works #side { top: auto; bottom: calc(var(--tbh, 88px) + 18px); right: max(10px, env(safe-area-inset-right)); width: auto; }
  body.works.building:not(.lib-shut) #side { display: none; }
  body.works #overlays, body.works #olegend, body.works #output { display: none; }
  #bv-btn { padding: 4px 9px; }
  #hist { position: fixed; left: 10px; right: 10px; bottom: calc(var(--tbh, 88px) + 32px); width: auto; transform: none; }
  body.works #probs { position: fixed; left: 10px; right: 10px; bottom: calc(var(--tbh, 88px) + 58px); max-height: 40vh; }
  body.works.building:not(.lib-shut) #panel { display: none; }
  body.works #panel { top: auto; bottom: 74px; left: max(10px, env(safe-area-inset-left)); right: max(10px, env(safe-area-inset-right)); width: auto; max-height: 42vh; z-index: 4; padding: 8px; border: 1px solid var(--line-hi); border-radius: 12px; background: var(--panel-solid); display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
  body.works #panel:empty { display: none; }
  body.works #panel h3, body.works #panel .try, body.works #panel .gauge, body.works #panel .rng, body.works #panel .pair { grid-column: 1 / -1; }
  body.works.building #panel { bottom: 106px; }
  body.works #read, body.works #credit { display: none; }
  body.works #focus { top: 54px; max-width: calc(100vw - 20px); flex-wrap: wrap; justify-content: center; row-gap: 4px; }
  body.works #fc-text { max-width: 60vw; }
  body.works #jcap { left: 10px; right: 10px; width: auto; bottom: max(14px, env(safe-area-inset-bottom)); padding: 13px 15px 15px; }
  body.works #jcap h2 { font-size: 17px; }
  body.works #jcap p { font-size: 13px; }
  body.works .jc-acts button { padding: 8px 13px; font-size: 10.5px; }
  body.works #fc-modes button span, body.works #fc-ov span { display: none; }
  body.works #fc-modes button, body.works #fc-ov, body.works #fc-x { padding: 7px 9px; }
  body.works #tip { bottom: 140px; left: 10px; right: 10px; width: auto; }
  body.works #toast { top: 54px; max-width: calc(100vw - 24px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #recp { top: 52px; right: 10px; left: 10px; width: auto; }
  #photo-bar { bottom: 10px; gap: 8px; padding: 8px; }
  .pb-rng input { width: 70px; }
}
/* phones held sideways: little height, so the bottom things shrink */
@media (max-height: 500px) {
  body.works #panel { max-height: 58vh; bottom: 58px; left: auto; width: min(360px, 52vw); }
  body.works #libwrap { max-height: calc(100vh - 70px); }
  body.works #tools button { padding: 4px 6px; }
}

/* ── the Looks panel ── */
#look[aria-expanded="true"] { color: var(--ink-hi); border-color: var(--heat); }
/* the drawer: docked on the right, full height under the top bar; the works slides aside to make room */
#looks.drawer { z-index: 12; top: 58px; right: 12px; bottom: 12px; width: 384px; display: flex; flex-direction: column; background: var(--panel); -webkit-backdrop-filter: blur(18px) saturate(1.15); backdrop-filter: blur(18px) saturate(1.15);
  border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 24px 64px rgba(0, 0, 0, .45), 0 2px 8px rgba(0, 0, 0, .22); overflow: hidden; animation: dw-in .28s cubic-bezier(.2, .8, .2, 1); }
#looks[hidden] { display: none; }
@keyframes dw-in { from { opacity: 0; transform: translateX(18px); } }
#stage { transition: transform .38s cubic-bezier(.2, .8, .2, 1); }
@media (min-width: 721px) and (min-height: 561px) { body.lk-open:not(.rec) #stage { transform: translateX(-196px); } }
.dw-grab { display: none; }
.dw-head { display: flex; align-items: center; gap: 10px; padding: 12px 12px 12px 14px; border-bottom: 1px solid var(--line); }
.dw-tabs { flex: 1; display: flex; gap: 2px; padding: 3px; border: 1px solid var(--line); border-radius: 11px; background: color-mix(in srgb, var(--bg) 70%, transparent); }
.dw-tabs button { all: unset; flex: 1; text-align: center; padding: 7px 0; border-radius: 8px; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); cursor: pointer; transition: background .15s, color .15s; }
.dw-tabs button:hover, .dw-tabs button:focus-visible { color: var(--ink-hi); }
.dw-tabs button[aria-selected="true"] { background: var(--line-hi); color: var(--ink-hi); }
.dw-x { all: unset; cursor: pointer; flex: none; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 9px; color: var(--dim); }
.dw-x svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.dw-x:hover, .dw-x:focus-visible { background: var(--line); color: var(--ink-hi); }
.dw-body { flex: 1; min-height: 0; overflow: auto; scrollbar-width: thin; overscroll-behavior: contain; }
.dw-pane[hidden] { display: none; }
/* sections: one open at a time; a closed one says what it is set to */
.acc + .acc { border-top: 1px solid var(--line); }
.acc-h { all: unset; box-sizing: border-box; width: 100%; display: flex; align-items: center; gap: 12px; padding: 15px 18px; cursor: pointer; transition: background .15s; }
.acc-h:hover { background: color-mix(in srgb, var(--line) 45%, transparent); }
.acc-h:focus-visible { box-shadow: inset 0 0 0 2px var(--heat); }
.acc-h .ic { flex: none; width: 17px; height: 17px; fill: none; stroke: var(--dim); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; transition: stroke .2s; }
.acc-h b { font-weight: 500; font-size: 12px; letter-spacing: .03em; color: var(--ink-hi); white-space: nowrap; }
.acc-h small { flex: 1; min-width: 0; display: flex; justify-content: flex-end; align-items: center; gap: 5px; font-size: 11px; color: var(--dim); white-space: nowrap; overflow: hidden; transition: opacity .2s; }
.acc-h .chev { flex: none; width: 12px; height: 12px; fill: none; stroke: var(--dim); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; transition: transform .22s; }
.acc.open .acc-h .chev { transform: rotate(180deg); }
.acc.open .acc-h .ic { stroke: var(--heat); }
.acc.open .acc-h small { opacity: 0; }
.acc-b { display: none; padding: 0 18px 20px; }
.acc.open .acc-b { display: block; animation: lk-in .22s ease; }
@keyframes lk-in { from { opacity: 0; transform: translateY(-4px); } }
.acc-b h4 { margin: 18px 0 9px; font-size: 9.5px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--dim); }
.acc-b > h4:first-child, .acc-b > .lk-off + h4 { margin-top: 0; }
.sd { flex: none; width: 10px; height: 10px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18); }
.lk-note { margin: 0 0 14px; font-size: 10.5px; line-height: 1.55; color: var(--dim); }
.lk-note[hidden] { display: none; }
.lk-off { display: none; margin: 0; font-size: 11px; line-height: 1.55; color: var(--ink); }
#looks.off .look-only .acc-b > :not(.lk-off) { display: none; }
#looks.off .look-only .lk-off { display: block; }
/* rows and sliders: a label, the control, its value */
.lk-row { display: grid; grid-template-columns: 84px minmax(0, 1fr); align-items: center; gap: 12px; min-height: 36px; font-size: 11px; color: var(--dim); }
.lk-slider { grid-template-columns: 84px minmax(0, 1fr) 46px; }
.lk-slider output { text-align: right; color: var(--ink); font-size: 11px; font-variant-numeric: tabular-nums; }
.lk-wear { grid-template-columns: auto minmax(0, 1fr) auto; }
#looks input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 20px; margin: 0; background: transparent; cursor: pointer; --v: 0%; }
#looks input[type=range]::-webkit-slider-runnable-track { height: 3px; border-radius: 2px; background: linear-gradient(90deg, var(--heat) 0 var(--v), var(--line-hi) var(--v) 100%); }
#looks input[type=range]::-moz-range-track { height: 3px; border-radius: 2px; background: linear-gradient(90deg, var(--heat) 0 var(--v), var(--line-hi) var(--v) 100%); }
#looks input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; margin-top: -5.5px; border-radius: 50%; background: var(--ink-hi); box-shadow: 0 0 0 3px var(--panel-solid), 0 1px 4px rgba(0, 0, 0, .4); transition: transform .12s; }
#looks input[type=range]::-moz-range-thumb { width: 14px; height: 14px; border: 0; border-radius: 50%; background: var(--ink-hi); box-shadow: 0 0 0 3px var(--panel-solid); }
#looks input[type=range]:hover::-webkit-slider-thumb { transform: scale(1.12); }
#looks input[type=range]:focus-visible { outline: none; }
#looks input[type=range]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px var(--panel-solid), 0 0 0 5px var(--heat); }
/* choices */
.lk-presets { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.lk-pre { all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; gap: 9px; min-width: 0; padding: 8px 9px; border: 1px solid var(--line); border-radius: 10px; color: var(--dim); font-size: 11px; line-height: 1.25; transition: background .15s, border-color .15s; }
.lk-pre span { overflow: hidden; text-overflow: ellipsis; hyphens: auto; -webkit-hyphens: auto; }
.lk-pre:hover, .lk-pre:focus-visible { background: var(--line); color: var(--ink-hi); }
.lk-pre[aria-checked="true"] { border-color: var(--heat); color: var(--ink-hi); background: color-mix(in srgb, var(--heat) 6%, transparent); }
.lk-chip { flex: none; width: 26px; height: 18px; border-radius: 5px; box-shadow: 0 0 0 1px var(--line-hi) inset; }
.lk-mine { display: grid; gap: 6px; }
.lk-my { display: flex; gap: 4px; }
.lk-my .lk-pre { flex: 1; }
.lk-del { all: unset; cursor: pointer; width: 26px; display: grid; place-items: center; border-radius: 8px; color: var(--dim); }
.lk-del:hover, .lk-del:focus-visible { color: var(--ink-hi); background: var(--line); }
.lk-none { margin: 0; font-size: 10.5px; color: var(--dim); line-height: 1.5; }
.lk-code { display: flex; gap: 6px; margin-top: 12px; }
.lk-code input, .lk-name input { flex: 1; min-width: 0; font: inherit; font-size: 11px; padding: 7px 10px; border: 1px solid var(--line-hi); border-radius: 9px; background: color-mix(in srgb, var(--bg) 70%, transparent); color: var(--ink-hi); outline: none; }
.lk-code input:focus, .lk-name input:focus { border-color: var(--heat); }
.lk-code button, .lk-name button, .lk-acts button, .lk-scenefoot button { all: unset; cursor: pointer; padding: 7px 12px; border: 1px solid var(--line-hi); border-radius: 999px; font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink); white-space: nowrap; transition: border-color .15s, color .15s; }
.lk-code button:hover, .lk-name button:hover, .lk-acts button:hover, .lk-scenefoot button:hover, .lk-code button:focus-visible, .lk-acts button:focus-visible, .lk-scenefoot button:focus-visible { border-color: var(--heat); color: var(--ink-hi); }
.lk-acts button:disabled { opacity: .4; cursor: default; border-color: var(--line); }
.lk-seg { display: flex; flex-wrap: wrap; gap: 5px; }
.lk-seg button { all: unset; cursor: pointer; padding: 5px 9px; border: 1px solid var(--line); border-radius: 8px; font-size: 11px; color: var(--dim); transition: background .15s, border-color .15s; }
.lk-seg button:hover, .lk-seg button:focus-visible { color: var(--ink-hi); background: var(--line); }
.lk-seg button[aria-checked="true"] { color: var(--ink-hi); border-color: var(--heat); background: color-mix(in srgb, var(--heat) 6%, transparent); }
.lk-dots { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 4px 0; }
.lk-dots button { all: unset; cursor: pointer; width: 18px; height: 18px; border-radius: 50%; box-shadow: 0 0 0 1px var(--line-hi) inset; }
.lk-dots button[aria-checked="true"], .lk-pick.on { box-shadow: 0 0 0 2px var(--panel-solid), 0 0 0 3.5px var(--heat); }
.lk-pick { position: relative; width: 18px; height: 18px; border-radius: 50%; cursor: pointer; background: conic-gradient(#e35 0 25%, #fc3 0 50%, #3c8 0 75%, #39f 0); }
.lk-pick input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer; }
.lk-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-bottom: 6px; }
.lk-tiles[hidden] { display: none; }
.lk-metal { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 10px; }
.lk-tiles button { all: unset; box-sizing: border-box; cursor: pointer; display: flex; flex-direction: column; gap: 5px; padding: 4px; border: 1px solid var(--line); border-radius: 10px; font-size: 10.5px; color: var(--dim); text-align: center; transition: background .15s, border-color .15s; }
.lk-tiles img { width: 100%; height: auto; aspect-ratio: 72 / 46; border-radius: 6px; background: var(--bg); display: block; }
.lk-tiles span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 2px 2px; }
.lk-tiles button:hover, .lk-tiles button:focus-visible { color: var(--ink-hi); background: var(--line); }
.lk-tiles button[aria-checked="true"] { border-color: var(--heat); color: var(--ink-hi); }
.lk-sub { display: inline-flex; gap: 2px; padding: 3px; margin: 0 0 12px; border: 1px solid var(--line); border-radius: 10px; }
.lk-sub button { all: unset; cursor: pointer; padding: 5px 16px; border-radius: 7px; font-size: 11px; color: var(--dim); }
.lk-sub button[aria-selected="true"] { background: var(--line-hi); color: var(--ink-hi); }
/* light moods as scraps of their sky */
.lk-moods { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 8px; margin: 0 0 16px; }
.lk-moods button { all: unset; box-sizing: border-box; cursor: pointer; display: flex; flex-direction: column; gap: 6px; font-size: 10.5px; color: var(--dim); text-align: center; }
.lk-moods i { height: 36px; border-radius: 9px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); transition: transform .15s, box-shadow .15s; }
.lk-moods button:hover i, .lk-moods button:focus-visible i { transform: translateY(-1px); }
.lk-moods button:hover, .lk-moods button:focus-visible { color: var(--ink-hi); }
.lk-moods button[aria-checked="true"] { color: var(--ink-hi); }
.lk-moods button[aria-checked="true"] i { box-shadow: 0 0 0 2px var(--panel-solid), 0 0 0 3.5px var(--heat); }
.lk-ticks { display: flex; justify-content: space-between; margin: -6px 54px 10px 96px; }
.lk-ticks i { font-style: normal; font-size: 9.5px; color: var(--faint); }
/* light cards: a stage light each, switched on and off, its strength */
.lk-cards { display: grid; gap: 10px; }
.lk-card { padding: 12px 14px 6px; border: 1px solid var(--line); border-radius: 12px; background: color-mix(in srgb, var(--line) 18%, transparent); transition: border-color .2s, background .2s; }
.lk-card.on { border-color: color-mix(in srgb, var(--heat) 50%, var(--line)); background: color-mix(in srgb, var(--heat) 5%, transparent); }
.lc-top { display: flex; align-items: center; gap: 10px; }
.lc-top b { flex: 1; font-weight: 500; font-size: 12px; color: var(--ink-hi); }
.lc-gels { display: flex; padding-right: 3px; }
.lc-gels i { width: 11px; height: 11px; margin-right: -3px; border-radius: 50%; box-shadow: 0 0 0 1.5px var(--panel-solid); }
.lc-on { all: unset; cursor: pointer; flex: none; width: 30px; height: 17px; border-radius: 999px; background: var(--line-hi); position: relative; transition: background .2s; }
.lc-on i { position: absolute; left: 2.5px; top: 2.5px; width: 12px; height: 12px; border-radius: 50%; background: var(--ink); transition: transform .2s; }
.lc-on[aria-checked="true"] { background: var(--heat); }
.lc-on[aria-checked="true"] i { transform: translateX(13px); background: var(--bg); }
.lc-on:focus-visible { box-shadow: 0 0 0 2px var(--panel-solid), 0 0 0 3.5px var(--heat); }
.lc-text { margin: 5px 0 2px; font-size: 10.5px; line-height: 1.45; color: var(--dim); }
.lk-card .lk-slider { grid-template-columns: 64px minmax(0, 1fr) 40px; min-height: 32px; }
.lk-card:not(.on) .lk-slider { opacity: .55; }
/* a card's More: how the light is set */
.lc-more { all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; gap: 6px; width: 100%; margin-top: 4px; padding: 8px 0 4px; border-top: 1px solid var(--line); font-size: 10.5px; letter-spacing: .04em; color: var(--dim); }
.lc-more:hover, .lc-more:focus-visible { color: var(--ink-hi); }
.lc-more .chev { width: 10px; height: 10px; fill: none; stroke: currentColor; stroke-width: 1.4; transition: transform .2s; }
.lc-more[aria-expanded="true"] .chev { transform: rotate(180deg); }
.lc-more[aria-expanded="true"] span::after { content: " — less"; color: var(--faint); }
.lc-x { padding: 2px 0 6px; }
.lc-x[hidden] { display: none; }
.lk-card .lc-row { grid-template-columns: 70px minmax(0, 1fr); min-height: 34px; }
.lk-card .lc-row.lk-slider { grid-template-columns: 70px minmax(0, 1fr) 40px; }
.lk-card .lk-seg button { padding: 4px 8px; font-size: 10.5px; }
.lc-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.lc-chips > button { all: unset; cursor: pointer; display: flex; padding: 5px 7px 5px 5px; border: 1px solid var(--line); border-radius: 8px; }
.lc-chips > button i { width: 10px; height: 10px; margin-right: -2px; border-radius: 50%; box-shadow: 0 0 0 1.5px var(--panel-solid); }
.lc-chips > button:hover, .lc-chips > button:focus-visible { background: var(--line); }
.lc-chips > button[aria-checked="true"] { border-color: var(--heat); }
.lc-from { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 4px 0; }
.lc-dial { flex: none; width: 46px; height: 46px; border-radius: 50%; cursor: grab; touch-action: none; }
.lc-dial:active { cursor: grabbing; }
.lc-dial:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--panel-solid), 0 0 0 3.5px var(--heat); }
.lc-dial svg { display: block; width: 100%; height: 100%; overflow: visible; }
.lc-dial .ring { fill: none; stroke: var(--dim); stroke-opacity: .55; }
.lc-dial .works { fill: var(--line-hi); }
.lc-dial .you { fill: var(--dim); }
.lc-dial .hand line { stroke: var(--heat); stroke-width: 2; stroke-linecap: round; }
.lc-dial .hand circle { fill: var(--heat); }
.lc-dial.view .hand { opacity: .45; }
.lc-swap { all: unset; justify-self: start; cursor: pointer; padding: 5px 10px; border: 1px solid var(--line); border-radius: 8px; font-size: 10.5px; color: var(--dim); }
.lc-swap:hover, .lc-swap:focus-visible { color: var(--ink-hi); background: var(--line); }
.lc-swap[aria-pressed="true"] { border-color: var(--heat); color: var(--ink-hi); }
.lc-pats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; padding: 4px 0; }
.lc-pats button { all: unset; box-sizing: border-box; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 7px 0 5px; border: 1px solid var(--line); border-radius: 9px; font-size: 9.5px; color: var(--dim); }
.lc-pats svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.lc-pats button:hover, .lc-pats button:focus-visible { color: var(--ink-hi); background: var(--line); }
.lc-pats button[aria-checked="true"] { border-color: var(--heat); color: var(--ink-hi); }
.lc-x .lc-dim { opacity: .4; }
.lc-house { margin-top: 14px; grid-template-columns: 96px minmax(0, 1fr) 40px; }
.lc-housenote { margin: 0; }
/* the footer: the look and its changes (Style, Light); the works (Scene) */
.dw-foot { flex: none; padding: 12px 16px; border-top: 1px solid var(--line); background: color-mix(in srgb, var(--panel-solid) 85%, transparent); }
.lk-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.lk-state { flex: 1 1 100%; min-width: 0; font-size: 11px; color: var(--ink-hi); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lk-acts, .lk-name { display: flex; gap: 6px; }
.lk-acts { margin-left: auto; }
.lk-name { flex: 1 1 100%; }
.lk-name[hidden], .lk-acts[hidden] { display: none; }
.lk-scenefoot { display: flex; align-items: center; gap: 12px; }
.lk-scenefoot > span { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.lk-scenefoot small { font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); }
.lk-scenefoot b { font-weight: 500; font-size: 11.5px; color: var(--ink-hi); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dw-pane .lk-scenefoot { margin: 6px 18px 20px; padding-top: 14px; border-top: 1px solid var(--line); }
/* a new look settling: the old picture held under a veil (shown only if it takes a moment) */
#scene-wait { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; pointer-events: none; opacity: 0; background: rgba(8, 8, 10, .3); transition: opacity .35s; }
#scene-wait.on { opacity: 1; transition: opacity .2s .15s; }
#scene-wait span { display: flex; align-items: center; gap: 10px; padding: 9px 16px; border: 1px solid var(--line-hi); border-radius: 999px; background: var(--panel-solid); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-hi); }
#scene-wait span::before { content: ""; width: 11px; height: 11px; border-radius: 50%; border: 1.5px solid var(--line-hi); border-top-color: var(--heat); animation: sw-spin .8s linear infinite; }
@keyframes sw-spin { to { transform: rotate(360deg); } }
/* your looks, above the tabs: each a tile of its style beside a scrap of its sky */
.dw-looks { flex: none; padding: 10px 16px 12px; border-bottom: 1px solid var(--line); }
.lw-head { display: flex; align-items: baseline; gap: 8px; margin: 0 2px 8px; }
.lw-head b { font-weight: 500; font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--dim); }
.lw-head small { font-size: 10px; color: var(--faint); }
.lw-row { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 3px 2px 2px; }
.lw-row::-webkit-scrollbar { display: none; }
.lw-look { position: relative; flex: none; }
.lw-look > button:first-child { all: unset; box-sizing: border-box; cursor: pointer; display: flex; flex-direction: column; gap: 5px; width: 76px; font-size: 10.5px; color: var(--dim); text-align: center; }
.lw-look span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lw-art { display: flex; height: 38px; border-radius: 9px; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
.lw-art i { flex: 1; }
.lw-look > button:hover, .lw-look > button:focus-visible, .lw-look > button[aria-current] { color: var(--ink-hi); }
.lw-look > button[aria-current] .lw-art { box-shadow: 0 0 0 2px var(--panel-solid), 0 0 0 3.5px var(--heat); }
.lw-add .lw-art { border: 1px dashed var(--line-hi); box-shadow: none; background: none; }
.lw-sep { flex: none; width: 1px; margin: 4px 2px 20px; background: var(--line-hi); }
/* Surprise look: a die on a warm tile */
.lw-dice .lw-art { align-items: center; justify-content: center; background: color-mix(in srgb, var(--heat) 14%, transparent); color: var(--heat); }
.lw-dice .lw-art svg { width: 24px; height: 24px; }
.lw-del { all: unset; cursor: pointer; position: absolute; top: -5px; right: -5px; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; line-height: 1; color: var(--ink); background: var(--panel-solid); box-shadow: 0 0 0 1px var(--line-hi); opacity: 0; transition: opacity .15s; }
.lw-look:hover .lw-del, .lw-del:focus-visible { opacity: 1; }
/* your styles and your lighting: chips, a + to save, a name asked for in place */
.lk-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.lk-chip2 { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 8px; }
.lk-chip2 > button:first-child { all: unset; cursor: pointer; padding: 5px 4px 5px 9px; font-size: 11px; color: var(--dim); }
.lk-chip2 > button:first-child[aria-pressed="true"] { color: var(--ink-hi); }
.lk-chip2:has([aria-pressed="true"]) { border-color: var(--heat); }
.lk-chip2 .lk-del { width: 20px; }
.lk-chipbtn { all: unset; cursor: pointer; padding: 5px 9px; border: 1px dashed var(--line-hi); border-radius: 8px; font-size: 11px; color: var(--dim); }
.lk-chipbtn:hover, .lk-chipbtn:focus-visible { color: var(--ink-hi); border-color: var(--heat); }
.lk-mine .lk-chipbtn { justify-self: start; }
.lk-ask { display: flex; gap: 6px; flex: 1 1 100%; margin-top: 2px; }
.lk-ask input { flex: 1; min-width: 0; font: inherit; font-size: 11px; padding: 6px 9px; border: 1px solid var(--line-hi); border-radius: 8px; background: color-mix(in srgb, var(--bg) 70%, transparent); color: var(--ink-hi); outline: none; }
.lk-ask input:focus { border-color: var(--heat); }
.lk-ask button { all: unset; cursor: pointer; padding: 5px 10px; border: 1px solid var(--line-hi); border-radius: 999px; font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink); }
.lk-ask button:hover { border-color: var(--heat); color: var(--ink-hi); }
.lk-state.msg { white-space: normal; }
.lk-undo { all: unset; cursor: pointer; margin-left: 6px; padding: 1px 8px; border: 1px solid var(--heat); border-radius: 999px; font-size: 10px; color: var(--ink-hi); }
.lk-rigs { margin-bottom: 14px; }
.lk-rigs button.unsuited { opacity: .42; }
.lk-rigs button.unsuited:hover, .lk-rigs button.unsuited:focus-visible { opacity: .8; }
.lw-head .lw-copy { all: unset; cursor: pointer; margin-left: auto; font-size: 10px; color: var(--dim); border-bottom: 1px dotted var(--line-hi); }
.lw-head .lw-copy:hover, .lw-head .lw-copy:focus-visible { color: var(--ink-hi); border-color: var(--heat); }
.lk-copybox { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.lk-copybox textarea { height: 120px; resize: vertical; font: inherit; font-size: 10px; line-height: 1.4; padding: 8px; border: 1px solid var(--line-hi); border-radius: 8px; background: color-mix(in srgb, var(--bg) 70%, transparent); color: var(--ink-hi); }
.lk-copybox button { all: unset; cursor: pointer; align-self: flex-end; padding: 5px 12px; border: 1px solid var(--line-hi); border-radius: 999px; font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink); }
.lk-followrow { min-height: 30px; margin-top: -4px; }
/* the sun: where it is (as you look, or fixed on its dial), how high, how strong */
.lk-sunangle[hidden] { display: none; }
.lk-hticks { position: relative; display: block; height: 12px; }
.lk-hticks i { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; }
.lk-hticks i:last-child { transform: translateX(-100%); }
#looks input[type=range].own::-webkit-slider-thumb { background: var(--dim); }
/* the scene's own controls, in the drawer */
#looks .lk-settings { grid-template-columns: 1fr 1fr; gap: 6px; }
#looks .lk-settings button { padding: 9px 10px; border-radius: 10px; font-size: 11px; }
#looks .lk-views { margin-bottom: 8px; }
#looks .swatches { justify-content: space-between; margin: 0 0 14px; }
#looks .lk-legend { margin: 0; font-size: 10.5px; gap: 6px; }
/* the atmosphere: four presets, then a slider for each effect, its track marked at the look's own and at Foundry */
.lk-apre { margin-bottom: 4px; }
.lk-arow { grid-template-columns: 104px minmax(0, 1fr) 40px; min-height: 34px; }
.lk-a-tint { grid-template-columns: 104px minmax(0, 1fr); }
.lk-track { position: relative; }
.lk-mk { position: absolute; bottom: 0; left: calc(7px + (100% - 14px) * var(--at)); width: 2px; height: 5px; margin-left: -1px; border-radius: 1px; background: var(--dim); pointer-events: none; }
.lk-mk.f { background: var(--heat); }
.lk-akey { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-top: 14px; font-size: 10px; color: var(--faint); }
.lk-akey .lk-mk { position: static; display: inline-block; height: 8px; margin: 0 6px 0 0; vertical-align: -1px; }
.lk-akey span:last-child { margin-left: auto; }
.lk-akey kbd { font: inherit; font-size: 9px; color: var(--dim); border: 1px solid var(--line-hi); border-radius: 4px; padding: 0 4px; margin-right: 3px; }
.lk-anote { display: none; }
#looks.off .lk-anote { display: block; }
#looks.off :is(.lk-a-haze, .lk-a-height, .lk-a-tint, .lk-a-dust) { opacity: .4; }
.lk-switch { all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 4px; border-radius: 9px; color: var(--ink); }
.lk-switch:hover, .lk-switch:focus-visible { background: var(--line); color: var(--ink-hi); }
.lk-switch b { display: inline-block; font-size: 11.5px; font-weight: 500; letter-spacing: .03em; }
.lk-switch kbd { margin-left: 7px; font: inherit; font-size: 9.5px; color: var(--faint); border: 1px solid var(--line-hi); border-radius: 4px; padding: 0 5px; line-height: 15px; vertical-align: 1px; }
.lk-switch small { display: block; margin-top: 2px; color: var(--dim); font-size: 10px; line-height: 1.35; }
.lk-switch svg { width: 14px; height: 14px; flex: none; margin: 0 2px 0 4px; }
.lk-switch span { flex: 1; }
.lk-switch i { flex: none; width: 26px; height: 14px; border-radius: 999px; background: var(--line-hi); position: relative; transition: background .2s; }
.lk-switch i::after { content: ""; position: absolute; left: 2px; top: 2px; width: 10px; height: 10px; border-radius: 50%; background: var(--ink); transition: transform .2s; }
.lk-switch[aria-pressed="true"] i { background: var(--heat); }
.lk-switch[aria-pressed="true"] i::after { transform: translateX(12px); background: var(--bg); }
/* on a phone: a sheet from the bottom, half the screen (or nearly all of it, from its handle); the works moves up */
@media (max-width: 720px), (max-height: 560px) {
  #looks.drawer { top: auto; left: 0; right: 0; bottom: 0; width: auto; height: 64vh; height: 64dvh; border-radius: 18px 18px 0 0; border-bottom: 0; padding-bottom: env(safe-area-inset-bottom); animation: sh-in .3s cubic-bezier(.2, .8, .2, 1); transition: height .3s cubic-bezier(.2, .8, .2, 1); }
  #looks.drawer.full { height: calc(100vh - 54px); height: calc(100dvh - 54px); }
  @keyframes sh-in { from { transform: translateY(40%); opacity: 0; } }
  .dw-grab { all: unset; display: flex; justify-content: center; padding: 9px 0 3px; cursor: pointer; }
  .dw-grab i { width: 40px; height: 4px; border-radius: 2px; background: var(--line-hi); }
  .dw-head { padding-top: 6px; }
  body.lk-open:not(.rec) #stage { transform: translateY(-22vh); }
  .acc-h { padding: 15px 16px; }
  .acc-b { padding: 0 16px 20px; }
}

/* ── the looks lab (the bay, ?bay&lab=1) ── */
#lab { top: 196px; bottom: 16px; left: max(var(--gut), env(safe-area-inset-left)); width: 272px; overflow: auto; padding: 10px 12px; border: 1px solid var(--line-hi); border-radius: 12px; background: var(--panel-solid); scrollbar-width: thin; }
#lab[hidden] { display: none; }
body.lab #info { display: none; }
#lab h3 { margin: 0 0 8px; font-size: 10px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--heat); }
#lab h4 { margin: 12px 0 4px; font-size: 9.5px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--dim); }
.lab-row { display: grid; grid-template-columns: 78px 1fr auto; align-items: center; gap: 6px; min-height: 26px; font-size: 10.5px; color: var(--ink); }
.lab-row input[type="range"] { width: 100%; accent-color: var(--heat); }
.lab-row input[type="color"] { width: 34px; height: 20px; padding: 0; border: 1px solid var(--line-hi); border-radius: 5px; background: none; }
.lab-row input[type="text"], .lab-row select { grid-column: 2 / 4; font: inherit; font-size: 10.5px; padding: 3px 6px; border: 1px solid var(--line-hi); border-radius: 6px; background: var(--bg); color: var(--ink-hi); }
.lab-row output { min-width: 32px; text-align: right; color: var(--dim); font-variant-numeric: tabular-nums; }
.lab-fam[hidden] { display: none; }
.lab-fam .lab-row span { padding-left: 10px; color: var(--dim); }
.lab-acts { display: flex; gap: 6px; margin-top: 12px; }
.lab-acts button { all: unset; cursor: pointer; padding: 5px 10px; border: 1px solid var(--line-hi); border-radius: 999px; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink); }
.lab-acts button:hover, .lab-acts button:focus-visible { border-color: var(--heat); color: var(--ink-hi); }
.lab-msg { margin: 8px 0 0; min-height: 1em; font-size: 10px; color: var(--dim); }
.lab-out { width: 100%; height: 160px; margin-top: 8px; font: 10px/1.4 ui-monospace, Menlo, monospace; color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 6px; resize: vertical; }