/* Tiny Lab components. Every colour, size and duration comes from tokens.css. */

/* Bevel recipes, built from the bevel tokens. Re-declared on every themed element so nested themes work. */
:root, [data-theme] {
  --tl-raised: inset -1px -1px 0 var(--bevel-edge), inset 1px 1px 0 var(--bevel-hi), inset -2px -2px 0 var(--bevel-lo), inset 2px 2px 0 var(--face);
  --tl-pressed: inset 1px 1px 0 var(--bevel-edge), inset -1px -1px 0 var(--bevel-hi), inset 2px 2px 0 var(--bevel-lo), inset -2px -2px 0 var(--face);
  --tl-sunken: inset 1px 1px 0 var(--bevel-lo), inset -1px -1px 0 var(--bevel-hi), inset 2px 2px 0 var(--bevel-edge), inset -2px -2px 0 var(--face);
  --tl-thin-in: inset 1px 1px 0 var(--bevel-lo), inset -1px -1px 0 var(--bevel-hi);
  --tl-thin-out: inset -1px -1px 0 var(--bevel-lo), inset 1px 1px 0 var(--bevel-hi);
  --tl-frame: inset -1px -1px 0 var(--bevel-edge), inset 1px 1px 0 var(--face), inset -2px -2px 0 var(--bevel-lo), inset 2px 2px 0 var(--bevel-hi);
}

body { margin: 0; background: var(--desktop); color: var(--ink); font-family: var(--font-sans); -webkit-font-smoothing: antialiased; }
.tl-surface { background: var(--window); color: var(--ink); padding: var(--space-5); }
.tl-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.tl-stack { display: flex; flex-direction: column; gap: var(--space-3); }
.tl-btn, .tl-tool, .tl-titlebar, .tl-menubar, .tl-menu, .tl-statusbar, .tl-tab, .tl-field-label, .tl-slider-label, .tl-check, .tl-led-wrap, .tl-progress-head, .tl-swatch-name, .tl-slot-name { font-variant-ligatures: none; }
.tl-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Icon */
.tl-icon { display: inline-block; flex: none; fill: currentColor; shape-rendering: crispEdges; vertical-align: middle; }
.tl-icon.is-colour { fill: none; }
:disabled .tl-icon.is-colour, .is-disabled .tl-icon.is-colour { filter: grayscale(1) opacity(0.45); }

/* Button */
.tl-btn { appearance: none; border: 0; border-radius: var(--radius-0); margin: 0; min-width: 88px; height: 30px; padding: 0 var(--space-4); background: var(--face); color: var(--ink); font-family: var(--font-pixel); font-size: 16px; line-height: 16px; font-weight: 400; box-shadow: var(--tl-raised); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 6px; white-space: nowrap; transition: box-shadow var(--duration-press) var(--ease-step); }
.tl-btn > span, .tl-btn > svg { position: relative; }
.tl-btn:active:not(:disabled), .tl-btn.is-pressed { box-shadow: var(--tl-pressed); }
.tl-btn:active:not(:disabled) > span, .tl-btn:active:not(:disabled) > svg, .tl-btn.is-pressed > span, .tl-btn.is-pressed > svg { top: 1px; left: 1px; }
.tl-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.tl-btn-primary { background: var(--primary); color: var(--on-primary); }
.tl-btn-danger { background: var(--accent); color: var(--on-accent); }
.tl-btn-secondary { background: var(--secondary); color: var(--on-secondary); }
/* Large: a tall button with a 32px colour icon, a label and a one-line caption. For a panel's main actions. */
.tl-btn-lg { height: auto; min-height: 52px; padding: var(--space-3) var(--space-4); justify-content: flex-start; gap: var(--space-3); text-align: left; white-space: normal; }
.tl-btn-lg.is-full { display: flex; width: 100%; }
.tl-btn-text { display: grid; gap: 3px; min-width: 0; }
.tl-btn-sub { font-family: var(--font-sans); font-size: 12px; line-height: 14px; font-weight: 500; opacity: 0.8; }
.tl-btn-lg:disabled .tl-btn-sub { opacity: 1; }
.tl-btn.is-default { box-shadow: 0 0 0 1px var(--bevel-edge), var(--tl-raised); }
.tl-btn.is-default:active:not(:disabled) { box-shadow: 0 0 0 1px var(--bevel-edge), var(--tl-pressed); }
.tl-btn-sm { height: 24px; min-width: 0; padding: 0 var(--space-3); font-size: 14px; }
.tl-btn:disabled, .tl-btn-secondary:disabled { background: var(--face); color: var(--ink-disabled); text-shadow: 1px 1px 0 var(--bevel-hi); cursor: default; }
.tl-btn:disabled svg { filter: drop-shadow(1px 1px 0 var(--bevel-hi)); }

/* Toolbar */
.tl-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 2px; padding: 3px var(--space-2); background: var(--face); box-shadow: inset 0 1px 0 var(--bevel-hi), inset 0 -1px 0 var(--bevel-lo); }
.tl-tool { appearance: none; border: 0; border-radius: var(--radius-0); margin: 0; min-width: 32px; height: 32px; padding: 0 var(--space-2); display: inline-flex; align-items: center; justify-content: center; gap: 6px; background: transparent; color: var(--ink); font-family: var(--font-pixel); font-size: 14px; line-height: 16px; cursor: pointer; }
.tl-tool > * { position: relative; }
.tl-tool:hover:not(:disabled) { box-shadow: var(--tl-thin-out); }
.tl-tool:active:not(:disabled), .tl-tool[aria-pressed="true"] { box-shadow: var(--tl-thin-in); }
.tl-tool[aria-pressed="true"] { background: var(--well); }
.tl-tool:active:not(:disabled) > * { top: 1px; left: 1px; }
.tl-tool:focus-visible { outline: 2px solid var(--focus); outline-offset: 0; }
.tl-tool:disabled { color: var(--ink-disabled); cursor: default; }
.tl-tool:disabled svg { filter: drop-shadow(1px 1px 0 var(--bevel-hi)); }
.tl-toolbar-sep { width: 2px; height: 24px; margin: 0 var(--space-2); box-shadow: inset 1px 0 0 var(--bevel-lo), inset -1px 0 0 var(--bevel-hi); }
.tl-toolbar-end { margin-left: auto; display: flex; align-items: center; gap: 2px; }
.tl-toolbar.is-big { gap: var(--space-2); padding: var(--space-2) var(--space-3); }
.tl-toolbar.is-big .tl-toolbar-sep { height: 48px; }
.tl-toolbar.is-big .tl-tool { flex-direction: column; gap: 3px; min-width: 64px; height: auto; padding: 5px var(--space-2) 4px; background: var(--face); box-shadow: var(--tl-raised); }
.tl-toolbar.is-big .tl-tool:hover:not(:disabled) { box-shadow: var(--tl-raised); background: var(--window); }
.tl-toolbar.is-big .tl-tool:active:not(:disabled), .tl-toolbar.is-big .tl-tool[aria-pressed="true"] { box-shadow: var(--tl-pressed); background: var(--well); }
.tl-toolbar.is-big .tl-tool > span { font-size: 14px; line-height: 16px; white-space: nowrap; }
.tl-toolbar.is-big .tl-tool:disabled > span { text-shadow: 1px 1px 0 var(--bevel-hi); }

/* PanelBar: the title bar of a panel inside a window (a film-box band). */
.tl-panelbar { display: flex; align-items: center; gap: var(--space-2); min-height: 24px; padding: 2px var(--space-2); background: linear-gradient(90deg, var(--panelbar), var(--panelbar-end)); color: var(--on-panelbar); font-family: var(--font-pixel); font-size: 16px; line-height: 20px; font-weight: 700; font-variant-ligatures: none; user-select: none; }
.tl-panelbar-title { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.tl-panelbar-end { display: flex; align-items: center; gap: var(--space-2); font-weight: 400; font-size: 14px; }

/* Window */
.tl-window { position: relative; display: flex; flex-direction: column; min-width: 0; background: var(--window); color: var(--ink); padding: 3px; box-shadow: var(--tl-frame), var(--shadow-window); }
.tl-titlebar { position: relative; display: flex; align-items: center; gap: var(--space-2); height: 24px; padding: 0 3px 0 var(--space-2); background: var(--titlebar); color: var(--on-titlebar); font-family: var(--font-pixel); font-size: 16px; line-height: 20px; font-weight: 700; user-select: none; }
.tl-titlebar::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 50%; background: var(--titlebar-gloss); }
.tl-titlebar > * { position: relative; }
.tl-window.is-inactive .tl-titlebar, .tl-window.is-inactive .tl-titlebar::before { background: var(--titlebar-inactive); }
.tl-window.is-inactive .tl-titlebar { color: var(--on-titlebar-inactive); }
.tl-title { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.tl-titlebtns { display: flex; gap: 0; }
.tl-titlebtn { appearance: none; border: 0; border-radius: var(--radius-0); margin: 0; width: 22px; height: 20px; padding: 0; display: grid; place-items: center; background: var(--face); color: var(--ink); box-shadow: var(--tl-raised); cursor: pointer; }
.tl-titlebtn.is-close { margin-left: 2px; }
.tl-titlebtn:active { box-shadow: var(--tl-pressed); }
.tl-titlebtn:active > svg { position: relative; top: 1px; left: 1px; }
.tl-titlebtn:focus-visible { outline: 2px solid var(--focus-inverse); outline-offset: 1px; }
.tl-window-chrome { display: flex; flex-direction: column; }
.tl-window-body { position: relative; flex: 1; min-height: 0; padding: var(--space-4); }
.tl-window-body.is-flush { padding: 0; }
.tl-flash { position: absolute; inset: 0; pointer-events: none; background: var(--bevel-hi); opacity: 0; animation: tl-flash var(--duration-flash) var(--ease-flash); }
@keyframes tl-flash { from { opacity: 0.9; } to { opacity: 0; } }

/* MenuBar */
.tl-menubar { position: relative; display: flex; padding: 2px 0; font-family: var(--font-pixel); font-size: 16px; line-height: 16px; }
.tl-menubar-item { position: relative; }
.tl-menubar-btn { appearance: none; border: 0; margin: 0; padding: 4px var(--space-3); background: transparent; color: var(--ink); font: inherit; cursor: pointer; }
.tl-menubar-btn:hover, .tl-menubar-btn[aria-expanded="true"] { background: var(--select); color: var(--on-select); }
.tl-menubar-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.tl-mnemonic { text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
.tl-menu { position: absolute; z-index: 20; top: 100%; left: 0; min-width: 240px; padding: 3px; background: var(--window); color: var(--ink); box-shadow: var(--tl-frame), var(--shadow-menu); }
.tl-menu-row { appearance: none; border: 0; margin: 0; width: 100%; display: grid; grid-template-columns: 20px 1fr auto; align-items: center; gap: var(--space-2); padding: 4px var(--space-3) 4px var(--space-2); background: transparent; color: var(--ink); font: inherit; text-align: left; white-space: nowrap; cursor: pointer; }
.tl-menu-row:hover:not(:disabled), .tl-menu-row:focus-visible { background: var(--select); color: var(--on-select); outline: none; }
.tl-menu-row:disabled { color: var(--ink-disabled); text-shadow: 1px 1px 0 var(--bevel-hi); cursor: default; }
.tl-menu-key { font-family: var(--font-pixel); font-size: 14px; }
.tl-menu-sep { height: 2px; margin: 3px 2px; box-shadow: inset 0 1px 0 var(--bevel-lo), inset 0 -1px 0 var(--bevel-hi); }

/* StatusBar */
.tl-statusbar { display: flex; gap: 2px; padding-top: 2px; font-family: var(--font-pixel); font-size: 14px; line-height: 16px; color: var(--ink); }
.tl-status-cell { display: flex; align-items: center; gap: 6px; padding: 3px 6px; box-shadow: var(--tl-thin-in); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tl-status-cell.is-grow { flex: 1; min-width: 0; }

/* Dialog */
.tl-dialog { width: 400px; max-width: 100%; }
.tl-dialog-body { display: grid; grid-template-columns: 32px 1fr; gap: var(--space-5); align-items: start; padding: var(--space-5) var(--space-5) var(--space-4); font-size: 14px; line-height: 20px; }
.tl-dialog-body.no-icon { grid-template-columns: 1fr; }
.tl-dialog-msg { display: grid; gap: var(--space-2); }
.tl-dialog-msg p { margin: 0; }
.tl-dialog-icon.is-error { color: var(--status-error); }
.tl-dialog-icon.is-warn { color: var(--status-warn); }
.tl-dialog-icon.is-info { color: var(--status-ok); }
.tl-dialog-actions { display: flex; justify-content: flex-end; gap: var(--space-3); padding: 0 var(--space-5) var(--space-5); }

/* Tabs */
.tl-tablist { display: flex; padding-left: 2px; position: relative; z-index: 1; }
.tl-tab { appearance: none; border: 0; border-radius: var(--radius-0); position: relative; top: 2px; margin: 0; padding: 4px var(--space-4) 6px; background: var(--window); color: var(--ink); font-family: var(--font-pixel); font-size: 16px; line-height: 16px; box-shadow: inset 1px 1px 0 var(--bevel-hi), inset -1px 0 0 var(--bevel-edge), inset -2px 0 0 var(--bevel-lo); cursor: pointer; }
.tl-tab[aria-selected="true"] { top: 0; padding-bottom: 8px; margin: 0 -2px; z-index: 2; }
.tl-tab:focus-visible { outline: 1px dotted var(--ink); outline-offset: -5px; }
.tl-tabpanel { position: relative; background: var(--window); box-shadow: var(--tl-frame); padding: var(--space-5); }

/* Field */
.tl-field { display: grid; gap: var(--space-2); align-content: start; min-width: 0; }
.tl-field-label { font-family: var(--font-pixel); font-size: 16px; line-height: 16px; color: var(--ink); }
.tl-input-wrap { display: flex; align-items: center; height: 30px; background: var(--well); box-shadow: var(--tl-sunken); padding: 0 var(--space-3); gap: var(--space-2); }
.tl-input-wrap:focus-within { outline: 2px solid var(--focus); outline-offset: 2px; }
.tl-input { flex: 1; min-width: 0; border: 0; outline: 0; padding: 0; background: transparent; color: var(--ink); font-family: var(--font-sans); font-size: 14px; line-height: 20px; }
.tl-input.is-mono { font-family: var(--font-mono); font-size: 12px; }
.tl-input::placeholder { color: var(--ink-muted); }
.tl-input-suffix { font-family: var(--font-mono); font-size: 12px; color: var(--ink-muted); }
.tl-field-hint { font-size: 12px; line-height: 16px; font-weight: 500; color: var(--ink-muted); }
.tl-field.is-error .tl-field-hint { color: var(--status-error); }
.tl-field.is-error .tl-input-wrap { box-shadow: var(--tl-sunken), inset 0 0 0 3px var(--status-error); }

/* Slider */
.tl-slider { display: grid; grid-template-columns: 1fr auto; gap: var(--space-2) var(--space-3); align-items: center; }
.tl-slider-label { grid-column: 1 / -1; font-family: var(--font-pixel); font-size: 16px; line-height: 16px; }
.tl-slider-track { display: grid; gap: 2px; }
.tl-range { -webkit-appearance: none; appearance: none; width: 100%; height: 24px; margin: 0; background: transparent; cursor: pointer; }
.tl-range::-webkit-slider-runnable-track { height: 6px; background: var(--well); box-shadow: var(--tl-sunken); }
.tl-range::-moz-range-track { height: 6px; background: var(--well); box-shadow: var(--tl-sunken); }
.tl-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 12px; height: 22px; margin-top: -8px; border: 0; border-radius: var(--radius-0); background: var(--face); box-shadow: var(--tl-raised); }
.tl-range::-moz-range-thumb { width: 12px; height: 22px; border: 0; border-radius: var(--radius-0); background: var(--face); box-shadow: var(--tl-raised); }
.tl-range:active::-webkit-slider-thumb { background: var(--primary); }
.tl-range:active::-moz-range-thumb { background: var(--primary); }
.tl-range:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.tl-ticks { display: flex; justify-content: space-between; padding: 0 5px; height: 6px; }
.tl-ticks i { width: 1px; height: 6px; background: var(--ink); }
.tl-ticks i:nth-child(even) { height: 3px; }
/* Ramp: the track shows what the slider does to the photo. Steps: a button at each end nudges the value. */
.tl-slider.has-steps .tl-slider-track { grid-template-columns: 20px 1fr 20px; align-items: center; column-gap: 2px; }
.tl-slider.has-steps .tl-ticks { grid-column: 2; }
.tl-step { appearance: none; border: 0; border-radius: var(--radius-0); margin: 0; width: 20px; height: 22px; padding: 0; display: grid; place-items: center; background: var(--face); color: var(--ink); box-shadow: var(--tl-raised); cursor: pointer; }
.tl-step::before { content: ""; width: 0; height: 0; border-top: 4px solid transparent; border-bottom: 4px solid transparent; }
.tl-step.is-down::before { border-right: 4px solid currentColor; }
.tl-step.is-up::before { border-left: 4px solid currentColor; }
.tl-step:active:not(:disabled) { box-shadow: var(--tl-pressed); }
.tl-step:active:not(:disabled)::before { transform: translate(1px, 1px); }
.tl-step:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.tl-step:disabled { color: var(--ink-disabled); cursor: default; }
.tl-slider[class*="is-ramp-"] .tl-range { height: 26px; }
.tl-slider[class*="is-ramp-"] .tl-range::-webkit-slider-runnable-track { height: 14px; background: var(--tl-ramp); }
.tl-slider[class*="is-ramp-"] .tl-range::-moz-range-track { height: 14px; background: var(--tl-ramp); }
.tl-slider[class*="is-ramp-"] .tl-range::-webkit-slider-thumb { width: 14px; height: 26px; margin-top: -6px; }
.tl-slider[class*="is-ramp-"] .tl-range::-moz-range-thumb { width: 14px; height: 26px; }
.tl-slider.is-ramp-light { --tl-ramp: linear-gradient(90deg, var(--ramp-dark), var(--ramp-light)); }
.tl-slider.is-ramp-highlights { --tl-ramp: linear-gradient(90deg, var(--ramp-grey), var(--ramp-light)); }
.tl-slider.is-ramp-shadows { --tl-ramp: linear-gradient(90deg, var(--ramp-dark), var(--ramp-grey)); }
.tl-slider.is-ramp-contrast { --tl-ramp: linear-gradient(90deg, var(--ramp-grey), var(--ramp-light)) top / 100% 50% no-repeat, linear-gradient(90deg, var(--ramp-grey), var(--ramp-dark)) bottom / 100% 50% no-repeat; }
.tl-slider.is-ramp-warmth { --tl-ramp: linear-gradient(90deg, var(--ramp-cool), var(--ramp-light), var(--ramp-warm)); }
.tl-slider.is-ramp-tint { --tl-ramp: linear-gradient(90deg, var(--ramp-green), var(--ramp-light), var(--ramp-magenta)); }
.tl-slider.is-ramp-colour { --tl-ramp: linear-gradient(90deg, var(--ramp-grey), transparent 70%), linear-gradient(90deg, var(--kodak-red), var(--kodak-yellow), var(--ramp-green), var(--ramp-cool), var(--ramp-magenta)); }
.tl-slider.is-ramp-grain { --tl-ramp: linear-gradient(90deg, var(--ramp-grey), transparent), repeating-conic-gradient(var(--ramp-dark) 0 25%, var(--ramp-light) 0 50%) 0 0 / 4px 4px; }
.tl-slider.is-ramp-amount { --tl-ramp: linear-gradient(90deg, var(--well), var(--primary)); }
.tl-slider[class*="is-ramp-"] .tl-range:disabled { filter: grayscale(1); opacity: 0.5; cursor: default; }
/* Typing: the readout is a button; click it to type a value into an LCD-styled box. */
.tl-slider.is-typing > .tl-lcd, .tl-slider.is-typing > [role="button"] { cursor: text; }
.tl-slider.is-typing > .tl-lcd:hover, .tl-slider.is-typing > [role="button"]:hover .tl-lcd { outline: 1px dotted var(--lcd-ink); outline-offset: -4px; }
.tl-slider.is-typing > .tl-lcd:focus-visible, .tl-slider.is-typing > [role="button"]:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.tl-lcd-input { box-sizing: border-box; width: 64px; height: 22px; margin: 0; padding: 3px 6px; border: 0; border-radius: var(--radius-0); background: var(--lcd); color: var(--lcd-ink); caret-color: var(--lcd-ink); box-shadow: var(--tl-sunken); font-family: var(--font-dot); font-size: 16px; line-height: 16px; font-weight: 900; text-align: right; }
.tl-lcd-input:focus { outline: 2px solid var(--focus); outline-offset: 2px; }
.tl-lcd-input::selection { background: var(--lcd-ink); color: var(--lcd); }

/* Checkbox */
.tl-check { position: relative; display: inline-flex; align-items: center; gap: var(--space-3); font-family: var(--font-pixel); font-size: 16px; line-height: 16px; color: var(--ink); cursor: pointer; user-select: none; }
.tl-check input { position: absolute; left: 0; top: 50%; width: 18px; height: 18px; margin: -9px 0 0; opacity: 0; cursor: pointer; }
.tl-check-box { flex: none; width: 18px; height: 18px; display: grid; place-items: center; background: var(--well); color: var(--ink); box-shadow: var(--tl-sunken); }
.tl-check-box svg { visibility: hidden; }
.tl-check input:checked + .tl-check-box svg { visibility: visible; }
.tl-check input:active + .tl-check-box { background: var(--face); }
.tl-check input:focus-visible + .tl-check-box { outline: 2px solid var(--focus); outline-offset: 2px; }
.tl-check.is-disabled { color: var(--ink-disabled); text-shadow: 1px 1px 0 var(--bevel-hi); cursor: default; }
.tl-check.is-disabled .tl-check-box { background: var(--face); color: var(--ink-disabled); }

/* Lcd */
.tl-lcd { display: inline-grid; gap: 3px; padding: 6px var(--space-3); background: var(--lcd); color: var(--lcd-ink); box-shadow: var(--tl-sunken); vertical-align: middle; }
.tl-lcd-label { font-family: var(--font-display); font-size: 9px; line-height: 10px; font-weight: 800; letter-spacing: 0.1em; color: var(--lcd-ink); }
.tl-lcd-digits { position: relative; font-family: var(--font-dot); font-size: 36px; line-height: 36px; font-weight: 900; white-space: pre; }
.tl-lcd-ghost { position: absolute; left: 0; top: 0; color: var(--lcd-ghost); }
.tl-lcd-lit { position: relative; }
.tl-lcd.is-sm { padding: 3px 6px; gap: 2px; }
.tl-lcd.is-sm .tl-lcd-digits { font-size: 16px; line-height: 16px; }

/* Led */
.tl-led { display: inline-block; flex: none; width: 10px; height: 10px; border-radius: var(--radius-round); background: var(--led-off); box-shadow: 0 0 0 1px var(--bevel-edge); vertical-align: middle; }
.tl-led.is-on, .tl-led.is-busy { background: var(--led-on); }
.tl-led.is-charge { background: var(--accent); }
.tl-led.is-error { background: var(--status-error); }
.tl-led.is-busy, .tl-led.is-error { animation: tl-blink var(--duration-blink) var(--ease-blink) infinite; }
@keyframes tl-blink { from { opacity: 1; } to { opacity: 0.15; } }
.tl-led-wrap { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-pixel); font-size: 14px; line-height: 16px; }

/* Progress */
.tl-progress { display: grid; gap: var(--space-2); }
.tl-progress-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); font-family: var(--font-pixel); font-size: 14px; line-height: 16px; }
.tl-progress-count { font-family: var(--font-dot); font-weight: 900; font-size: 16px; line-height: 16px; color: var(--ink); }
.tl-progress-bar { display: flex; gap: 2px; height: 24px; padding: 4px; background: var(--well); box-shadow: var(--tl-sunken); overflow: hidden; }
.tl-progress.is-sm .tl-progress-bar { height: 14px; padding: 3px; }
.tl-chunk { flex: 1; min-width: 0; }
.tl-chunk.is-on { background: var(--primary); box-shadow: inset -1px -1px 0 var(--bevel-edge); animation: tl-chunk-in var(--duration-tick) var(--ease-step); }
.tl-progress.is-indeterminate .tl-chunk.is-on { animation: none; }
.tl-progress-bar.is-marquee { position: relative; }
.tl-progress-bar.is-marquee .tl-chunk.is-on { animation: none; }
.tl-marquee { position: absolute; top: 4px; bottom: 4px; left: 4px; width: 20%; display: flex; gap: 2px; animation: tl-marquee calc(var(--duration-tick) * 16) steps(16, end) infinite; }
.tl-marquee i { flex: 1; background: var(--primary); box-shadow: inset -1px -1px 0 var(--bevel-edge); }
@keyframes tl-chunk-in { from { transform: scaleY(0.25); } to { transform: scaleY(1); } }
@keyframes tl-marquee { from { left: -20%; } to { left: 100%; } }
.tl-progress-detail { font-size: 12px; line-height: 16px; font-weight: 500; color: var(--ink-muted); }

/* FilmStrip */
.tl-film { display: flex; gap: 0; overflow-x: auto; background: var(--film); padding: 0 var(--space-2); scrollbar-color: var(--face) var(--film); }
.tl-film.is-sheet { flex-wrap: wrap; overflow: visible; padding: var(--space-2); row-gap: var(--space-3); }
.tl-frame { appearance: none; border: 0; margin: 0; flex: none; display: flex; flex-direction: column; align-items: stretch; gap: 3px; padding: 4px 6px; background: transparent; color: var(--datestamp); font: inherit; cursor: pointer; }
.tl-frame:focus-visible { outline: 2px solid var(--focus-inverse); outline-offset: -2px; }
.tl-holes { display: flex; justify-content: space-between; height: 6px; padding: 0 3px; }
.tl-holes i { width: 8px; height: 6px; background: var(--window); border-radius: var(--radius-1); }
.tl-frame-img { position: relative; width: 120px; height: 90px; background: var(--canvas); border-radius: var(--radius-1); overflow: visible; }
.tl-frame.is-sm .tl-frame-img { width: 80px; height: 60px; }
.tl-frame-img img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-1); }
.tl-frame[aria-pressed="true"] .tl-frame-img { outline: 3px solid var(--primary); outline-offset: 2px; }
.tl-frame-tick { position: absolute; top: -6px; right: -6px; width: 18px; height: 18px; display: grid; place-items: center; background: var(--primary); color: var(--on-primary); box-shadow: 0 0 0 1px var(--bevel-edge); }
.tl-frame-tag { position: absolute; left: 4px; bottom: 4px; display: inline-flex; align-items: center; gap: 3px; padding: 1px 4px; background: var(--film); color: var(--datestamp); font-family: var(--font-mono); font-size: 10px; line-height: 14px; }
.tl-frame-edge { display: flex; justify-content: space-between; padding: 0 2px; font-family: var(--font-dot); font-weight: 900; font-size: 12px; line-height: 12px; color: var(--datestamp); }

/* FilterSwatch */
.tl-swatch { appearance: none; border: 0; margin: 0; width: 120px; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 6px 4px; background: transparent; color: var(--ink); font: inherit; text-align: center; cursor: pointer; }
.tl-swatch-thumb { position: relative; width: 104px; height: 78px; padding: 2px; background: var(--canvas); box-shadow: var(--tl-sunken); }
.tl-swatch-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.tl-swatch.is-pixel .tl-swatch-thumb img { image-rendering: pixelated; }
.tl-swatch-name { padding: 2px 4px; font-family: var(--font-pixel); font-size: 16px; line-height: 16px; }
.tl-swatch[aria-pressed="true"] .tl-swatch-name { background: var(--select); color: var(--on-select); }
.tl-swatch[aria-pressed="true"] .tl-swatch-thumb { outline: 2px solid var(--select); outline-offset: 2px; }
.tl-swatch:focus-visible { outline: 1px dotted var(--ink); outline-offset: 0; }
.tl-swatch-meta { display: flex; align-items: center; gap: var(--space-2); font-size: 12px; line-height: 16px; font-weight: 500; color: var(--ink-muted); }
.tl-slotchip { display: inline-block; padding: 2px 4px 1px; background: var(--lcd); color: var(--lcd-ink); font-family: var(--font-dot); font-weight: 900; font-size: 12px; line-height: 12px; }

/* SlotManager */
.tl-slots { display: grid; gap: var(--space-5); }
.tl-slotgroup { display: grid; gap: var(--space-3); }
.tl-slotgroup-head { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.tl-slotgroup-title { margin: 0; font-family: var(--font-display); font-size: 24px; line-height: 1; font-weight: 800; }
.tl-slotgroup-hint { font-size: 12px; line-height: 16px; font-weight: 500; color: var(--ink-muted); }
.tl-slotgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: var(--space-3); }
.tl-slot { appearance: none; border: 0; border-radius: var(--radius-0); margin: 0; position: relative; display: grid; gap: 6px; padding: var(--space-3) var(--space-3) var(--space-2); background: var(--face); color: var(--ink); box-shadow: var(--tl-raised); font: inherit; text-align: left; cursor: pointer; }
.tl-slot:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.tl-slot[aria-pressed="true"] { box-shadow: var(--tl-pressed); background: var(--well); }
.tl-slot.is-target { background: var(--well); box-shadow: var(--tl-sunken); }
.tl-slot-top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.tl-slot-thumb { position: relative; aspect-ratio: 4 / 3; background: var(--canvas); box-shadow: var(--tl-sunken); padding: 2px; }
.tl-slot-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.tl-slot-thumb.is-pixel img { image-rendering: pixelated; }
.tl-slot.is-empty .tl-slot-thumb { background: var(--well); display: grid; place-items: center; color: var(--ink-muted); }
.tl-slot-name { font-family: var(--font-pixel); font-size: 14px; line-height: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tl-slot-state { display: flex; align-items: center; gap: 6px; font-size: 12px; line-height: 16px; font-weight: 500; color: var(--ink-muted); }
.tl-slot-state.is-ok { color: var(--status-ok); }
.tl-slot-state.is-warn { color: var(--status-warn); }
.tl-slot-state.is-error { color: var(--status-error); }
.tl-slot-new { padding: 1px 4px; background: var(--primary); color: var(--on-primary); box-shadow: 0 0 0 1px var(--bevel-edge); font-family: var(--font-display); font-weight: 800; font-size: 9px; line-height: 12px; letter-spacing: 0.08em; }
.tl-ants { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.tl-ants rect { fill: none; stroke: var(--ink); stroke-width: 2; stroke-dasharray: 4 4; animation: tl-ants calc(var(--duration-tick) * 8) steps(8, end) infinite; }
@keyframes tl-ants { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -16; } }
.tl-slots-foot { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; padding-top: var(--space-4); box-shadow: inset 0 1px 0 var(--bevel-lo), inset 0 2px 0 var(--bevel-hi); }
.tl-slots-foot .tl-progress { flex: 1; min-width: 200px; }
.tl-slots-foot-note { flex: 1; min-width: 160px; font-size: 12px; line-height: 16px; font-weight: 500; color: var(--ink-muted); }

/* DeviceStatus */
.tl-device { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--space-5); padding: var(--space-4) var(--space-5); background: var(--face); color: var(--ink); box-shadow: var(--tl-raised); }
.tl-device-glyph { display: block; width: 96px; height: 64px; shape-rendering: crispEdges; }
.tl-device-glyph .g-edge { fill: var(--bevel-edge); }
.tl-device-glyph .g-lens { fill: var(--canvas); }
.tl-device-glyph .g-glass { fill: var(--led-off); }
.tl-device-glyph .g-hi { fill: var(--bevel-hi); }
.tl-device-glyph .g-off { fill: var(--well); }
.tl-device-glyph.is-off .g-edge { fill: var(--ink-muted); }
.tl-device-info { display: grid; gap: var(--space-2); min-width: 0; }
.tl-device-name { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; font-family: var(--font-display); font-weight: 800; font-size: 24px; line-height: 1; }
.tl-device-facts { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); font-size: 14px; line-height: 20px; }
.tl-device-facts b { font-weight: 650; }
.tl-device-card { max-width: 320px; }
.tl-device-actions { display: flex; flex-direction: column; gap: var(--space-2); }

/* EmptyState */
.tl-empty { display: grid; justify-items: start; gap: var(--space-4); padding: var(--space-8) var(--space-7); background: var(--desktop); color: var(--on-desktop); }
.tl-empty-kicker { font-family: var(--font-display); font-size: 12px; line-height: 16px; font-weight: 800; letter-spacing: 0.06em; }
.tl-empty-title { margin: 0; font-family: var(--font-display); font-size: 40px; line-height: 0.95; font-weight: 900; letter-spacing: -0.01em; }
.tl-empty .tl-btn-primary { background: var(--select); color: var(--on-select); }
.tl-empty-text { margin: 0; max-width: 420px; font-size: 14px; line-height: 20px; }
/* ColorWell: a sunken well with the swatch and its hex; opens the picker (map, hue strip, hex field). The map and
   strip show colour itself, so their gradients are colour math, not theme colours. */
.tl-colorwell { appearance: none; border: 0; margin: 0; display: inline-flex; align-items: center; gap: var(--space-2); height: 30px;
  padding: 0 var(--space-3) 0 var(--space-2); background: var(--well); color: var(--ink); font: inherit; box-shadow: var(--tl-sunken); cursor: pointer; }
.tl-colorwell:disabled { cursor: default; color: var(--ink-disabled); }
.tl-colorwell:disabled .tl-colorwell-swatch { opacity: 0.35; }
.tl-colorwell:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.tl-colorwell-swatch { width: 28px; height: 20px; box-shadow: inset 0 0 0 1px var(--bevel-edge); }
.tl-colorpop { position: fixed; z-index: 50; display: grid; gap: var(--space-3); width: 232px; padding: var(--space-3);
  background: var(--window); color: var(--ink); box-shadow: var(--tl-frame), var(--shadow-menu); }
.tl-colorpop-map { position: relative; height: 150px; cursor: crosshair; touch-action: none; outline-offset: 2px;
  background: linear-gradient(to top, rgb(0 0 0), transparent), linear-gradient(to right, rgb(255 255 255), transparent), var(--tl-hue);
  box-shadow: inset 0 0 0 1px var(--bevel-edge); }
.tl-colorpop-hue { position: relative; height: 16px; cursor: ew-resize; touch-action: none; outline-offset: 2px; box-shadow: inset 0 0 0 1px var(--bevel-edge);
  background: linear-gradient(to right, hsl(0 100% 50%), hsl(60 100% 50%), hsl(120 100% 50%), hsl(180 100% 50%), hsl(240 100% 50%), hsl(300 100% 50%), hsl(360 100% 50%)); }
.tl-colorpop-map:focus-visible, .tl-colorpop-hue:focus-visible { outline: 2px solid var(--focus); }
.tl-colorpop-dot { position: absolute; width: 12px; height: 12px; margin: -6px 0 0 -6px; pointer-events: none;
  box-shadow: 0 0 0 1px var(--bevel-edge), inset 0 0 0 2px var(--bevel-hi), inset 0 0 0 3px var(--bevel-edge); }
.tl-colorpop-bar { position: absolute; top: -3px; bottom: -3px; width: 6px; margin-left: -3px; pointer-events: none; background: var(--face); box-shadow: var(--tl-raised); }
.tl-colorpop-row { display: flex; align-items: center; gap: var(--space-3); }
.tl-colorpop-row .tl-input-wrap { flex: 1; min-width: 0; }
.tl-colorpop-row .tl-input { width: 100%; }
.tl-colorpop-pair { display: flex; flex: none; box-shadow: 0 0 0 1px var(--bevel-edge); }
.tl-colorpop-swatch { width: 28px; height: 28px; }

/* Mark: the little 4:3 frame from the logo. Outer band logo-tiny, inner band ink (logo-lab on the desktop),
   see-through middle. Sized in units: 4 x 3 units, bands half a unit. */
.tl-mark { --tl-mark-u: var(--space-3); --tl-mark-out: var(--logo-tiny); --tl-mark-in: var(--ink); display: inline-block; flex: none;
  width: calc(4 * var(--tl-mark-u)); height: calc(3 * var(--tl-mark-u)); vertical-align: middle;
  box-shadow: inset 0 0 0 calc(var(--tl-mark-u) / 2) var(--tl-mark-out), inset 0 0 0 var(--tl-mark-u) var(--tl-mark-in); }
.tl-mark.is-sm { --tl-mark-u: var(--space-2); }
.tl-mark.is-lg { --tl-mark-u: var(--space-5); }
.tl-mark.on-desktop, .tl-empty .tl-mark { --tl-mark-in: var(--logo-lab); }
.tl-mark.is-busy { animation: tl-mark-busy var(--duration-blink) var(--ease-blink) infinite; }
@keyframes tl-mark-busy { to { box-shadow: inset 0 0 0 calc(var(--tl-mark-u) / 2) var(--tl-mark-out); } }
@media (prefers-reduced-motion: reduce) { .tl-mark.is-busy { animation: none; } }
.tl-empty-stripes { display: flex; gap: 0; height: 8px; width: 120px; }
.tl-empty-stripes i { flex: 1; }
.tl-empty-stripes i:nth-child(1) { background: var(--accent); }
.tl-empty-stripes i:nth-child(2) { background: var(--bevel-edge); }
.tl-empty-stripes i:nth-child(3) { background: var(--primary); box-shadow: inset 0 0 0 1px var(--bevel-edge); }

/* Win95 scrollbars inside Tiny Lab scroll areas */
.tl-film::-webkit-scrollbar, .tl-scroll::-webkit-scrollbar { width: 16px; height: 16px; }
.tl-film::-webkit-scrollbar-track, .tl-scroll::-webkit-scrollbar-track { background: var(--well); }
.tl-film::-webkit-scrollbar-thumb, .tl-scroll::-webkit-scrollbar-thumb { background: var(--face); box-shadow: var(--tl-raised); }

@media (prefers-reduced-motion: reduce) {
  .tl-led.is-busy, .tl-led.is-error, .tl-ants rect, .tl-chunk.is-on, .tl-marquee, .tl-flash { animation: none; }
  .tl-btn { transition: none; }
}