/* Afterimage: photo-mode theme, layered over style.css (chrome.js adds the screen texture layer and ‹ › steppers).
   A classic editor layout (menu bar, tool options, tool strip, canvas, panels, status bar) drawn the way a
   console game's photo mode draws its menu: nothing sits on a panel. Everything floats straight over a
   mid slate backdrop, in one pale teal: text, values, arrows, icons, dotted dividers. Hovered and
   selected rows get a translucent blue bar you can see the backdrop through. A sharp, fine scanline and pixel
   texture with a faint colour fringe runs through every piece of UI, so it reads as a hologram; the photo
   itself stays clean. Setting rows read label ┊ ‹ value ›; the slider is hidden behind the value (drag
   across it to scrub). Set in M PLUS 1p (fonts/, SIL Open Font License). Dark only. */
@font-face { font-family: "M PLUS 1p"; src: url("fonts/MPlus1p-300.woff2") format("woff2"); font-weight: 300; font-display: swap; }
@font-face { font-family: "M PLUS 1p"; src: url("fonts/MPlus1p-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "M PLUS 1p"; src: url("fonts/MPlus1p-500.woff2") format("woff2"); font-weight: 500 700; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url("fonts/InstrumentSans-500.woff2") format("woff2"); font-weight: 500; font-display: block; }   /* the wordmark only (OFL, fonts/InstrumentSans-OFL.txt) */
:root {
  /* re-map style.css tokens so anything not restyled below still lands in this theme */
  --desk: transparent;
  --paper: transparent;
  --ink: #b9e5ec;
  --rule: rgba(185, 229, 236, 0.3);
  --faint: rgba(185, 229, 236, 0.12);
  --soft: transparent;
  --mute: #9ccad1;
  --drop: transparent;
  --desk-drop: transparent;
  --pasteboard: transparent;
  --yellow: #b9e5ec;
  --yellow-tint: transparent;
  --green: #b9e5ec;
  --red: #ff9d92;
  --blue: #2a78c8;
  --font-sans: "M PLUS 1p", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "M PLUS 1p", "Helvetica Neue", Arial, sans-serif;

  --teal: #b9e5ec;
  --teal-dim: #9ccad1;
  --teal-faint: rgba(185, 229, 236, 0.28);
  --bar: linear-gradient(180deg, rgba(58, 150, 240, 0.44) 0%, rgba(24, 116, 214, 0.36) 45%, rgba(16, 96, 196, 0.34) 100%);
  --bar-edge: inset 0 1px 0 rgba(150, 210, 255, 0.42), inset 0 -1px 0 rgba(8, 36, 70, 0.2);
  /* the lit bar: a bright leading edge, a crisp top highlight, a hairline rim and a soft blue bloom */
  --bar-glow: inset 2px 0 0 rgba(214, 244, 255, 0.95), inset 0 1px 0 rgba(176, 226, 255, 0.7), inset 0 -1px 0 rgba(8, 36, 70, 0.22),
              0 0 0 1px rgba(110, 185, 255, 0.28), 0 0 20px -2px rgba(64, 156, 255, 0.55), 0 0 44px -8px rgba(64, 156, 255, 0.35);
  /* a narrow band of light that sweeps across the bar as it lands */
  --sheen: linear-gradient(100deg, transparent 38%, rgba(220, 244, 255, 0.28) 49%, rgba(220, 244, 255, 0.05) 55%, transparent 62%);
  --lit: #e4f8fb;
  --lit-glow: 0 0 10px rgba(150, 215, 255, 0.55), 0 1px 0 rgba(10, 20, 26, 0.35);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --snap: cubic-bezier(0.2, 0.9, 0.1, 1);
  --spring: cubic-bezier(0.3, 1.18, 0.4, 1);
  interpolate-size: allow-keywords;
  --box: rgba(200, 222, 228, 0.16);
  --shade: 0 1px 0 rgba(10, 20, 26, 0.35);   /* crisp: a hard 1px drop for legibility, no glow */
  --holo:
    repeating-linear-gradient(0deg, rgba(8, 18, 24, 0.07) 0 1px, transparent 1px 2px);
  --split: 48%;
  --dots: repeating-linear-gradient(180deg, rgba(185, 229, 236, 0.75) 0 1.5px, transparent 1.5px 4px);
  --chev-l: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 22'%3E%3Cpath d='M10 1 1.8 11 10 21' fill='none' stroke='%23b9e5ec' stroke-width='1.3'/%3E%3C/svg%3E");
  --chev-r: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 22'%3E%3Cpath d='M1 1l8.2 10L1 21' fill='none' stroke='%23b9e5ec' stroke-width='1.3'/%3E%3C/svg%3E");

  --chart-ink: #b9e5ec; --chart-soft: rgba(185, 229, 236, .4); --chart-fill: rgba(185, 229, 236, .14); --chart-grid: rgba(185, 229, 236, .16);
  --chart-extent: rgba(185, 229, 236, .08); --chart-tick: rgba(185, 229, 236, .55); --chart-label: #9ccad1; --chart-mark: #2a78c8;
  --chart-font: 400 10px "M PLUS 1p", Arial, sans-serif;
  --holo-layer: 1;
  --ds-steppers: 1;
  --nav-sound: 1;
  color-scheme: dark;
}
body {
  color: var(--teal);
  font: 400 15px/1.3 var(--font-sans); letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
  text-shadow: var(--shade);
  background:
    radial-gradient(ellipse 60% 42% at 50% 40%, rgba(255, 255, 255, 0.1), transparent 72%),
    linear-gradient(180deg, #5f666c 0%, #585f65 40%, #4d5359 64%, #43494f 100%);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
}
button, input, select { text-shadow: inherit; }
:focus-visible { outline: 1px solid var(--teal); outline-offset: -1px; }
kbd { font: 400 13px var(--font-sans); color: var(--teal-dim); }
::selection { background: rgba(52, 122, 192, 0.7); color: #fff; }
* { scrollbar-width: thin; scrollbar-color: var(--teal) transparent; }
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: var(--dots) center / 1px 100% no-repeat; }
::-webkit-scrollbar-thumb { background: var(--teal); border-left: 1px solid transparent; border-right: 1px solid transparent; background-clip: padding-box; }

/* ---------- layout: the classic editor grid, nothing boxed ---------- */
.app { gap: 10px 26px; padding: 16px 28px 12px; grid-template-columns: 196px minmax(0, 1fr) 380px; }
.menubar, .optionsbar, .tools, .viewport, .panel, .statusbar { background: transparent; border: 0; box-shadow: none; }
.calib, .hud, .finder, .scanbar, .hints, .info { display: none; }

/* the hologram: one sharp scanline + pixel texture across the whole screen, cut out around the visible
   photo (chrome.js keeps --hx/--hy/--hw/--hh on the photo's rectangle). Dialogs sit in the top layer, so
   they carry their own copy. */
.holo-layer {
  position: fixed; inset: 0; z-index: 45; pointer-events: none; background: var(--holo);
  -webkit-mask: linear-gradient(#000 0 0), linear-gradient(#000 0 0) var(--hx, 0) var(--hy, 0) / var(--hw, 0) var(--hh, 0) no-repeat;
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) exclude, linear-gradient(#000 0 0) var(--hx, 0) var(--hy, 0) / var(--hw, 0) var(--hh, 0) no-repeat;
}
.window::after { content: ""; position: absolute; inset: 0; z-index: 6; pointer-events: none; background: var(--holo); }
.tools { position: relative; }

/* the row: what every list item, setting and menu entry is built from. The dotted divider is painted in the
   row's own background; the lit bar is a separate layer (::before) that scales in on the GPU, so hovering never
   repaints the row. Rows isolate so the bar sits under their text but over the divider. */
.tool, .row-item, .adj summary, .param, .menu-pop button, .hist-stats div {
  position: relative; isolation: isolate; min-height: 34px; margin: 0; border: 0; border-radius: 0; box-shadow: none;
  font: 400 15px/1.2 var(--font-sans); color: var(--teal); text-align: left; outline: none; filter: none;
  background: transparent; transition: color .12s linear, text-shadow .12s linear;
}
.row-item, .row-item:hover, .adj summary, .param, .menu-pop button, .menu-pop button:hover, .hist-stats div {
  background: var(--dots) var(--split) 3px / 1px calc(100% - 6px) no-repeat;
}
.tool:hover, .tool[aria-pressed=true] { background: transparent; }
.tool::before, .row-item::before, .adj summary::before, .param::before, .menu-pop button::before, .hist-stats div::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; display: block;
  width: auto; height: auto; margin: 0; border: 0; border-radius: 0; font: inherit;
  background: var(--sheen) 135% 0 / 260% 100% no-repeat, var(--bar);
  box-shadow: var(--bar-glow);
  opacity: 0; transform: scaleX(0.001); transform-origin: left center;
  /* leaving: a quick fade, then the bar resets out of sight */
  transition: opacity .14s linear, transform 0s linear .14s;
  backface-visibility: hidden;
}
.tool:hover, .row-item:hover, .adj summary:hover, .param:hover, .param:focus-within,
.menu-pop button:hover, .menu-pop button:focus-visible, .row-item[aria-pressed=true] {
  z-index: 2; color: var(--lit); text-shadow: var(--lit-glow);
}
.tool:hover::before, .row-item:hover::before, .adj summary:hover::before, .param:hover::before, .param:focus-within::before,
.menu-pop button:hover::before, .menu-pop button:focus-visible::before, .row-item[aria-pressed=true]::before {
  opacity: 1; transform: scaleX(1);
  /* arriving: snaps open from the left, a sheen crosses once */
  transition: transform .2s var(--snap), opacity .05s linear;
  animation: sheen .7s var(--ease-out) .06s both;
}
.tool[aria-pressed=true]::before, .tool[aria-pressed=true]:hover::before { opacity: 0; transform: scaleX(0.001); animation: none; }
/* the base sheet rotates an open section's marker; that layer is the bar here */
.adj[open] summary:not(:hover)::before { transform: scaleX(0.001); }
@keyframes sheen { from { background-position: 135% 0, 0 0; } to { background-position: -35% 0, 0 0; } }
.keytable tr { transition: background-color .12s linear; }
.keytable tr:hover { background: rgba(24, 116, 214, 0.36); box-shadow: var(--bar-edge); color: var(--lit); }

/* ---------- menu bar: small spaced title, glyph tabs with an underline each ---------- */
.menubar { gap: 26px; padding: 0; align-items: flex-end; }
.wordmark { font: 400 11px/1 var(--font-sans); letter-spacing: 0.34em; text-transform: uppercase; color: var(--teal-dim); padding-bottom: 12px; }
.menus { gap: 6px; }
.menu-btn {
  min-width: 92px; height: 40px; padding: 0 14px; gap: 9px; background: transparent; border: 0; border-radius: 0;
  box-shadow: inset 0 -3px 0 var(--teal-faint); font: 400 15px var(--font-sans); color: var(--teal);
  transition: box-shadow .15s;
}
.menu-btn { transition: box-shadow .26s var(--ease-out), background-color .2s, color .15s, text-shadow .15s; }
.menu-btn:hover, .menu-btn[aria-expanded=true] { background: var(--bar); box-shadow: var(--bar-glow), inset 0 -3px 0 var(--lit); color: var(--lit); text-shadow: var(--lit-glow); }
.menu-btn::before, .menu-btn[aria-expanded=true]::before { /* filled glyph per menu */
  content: ""; width: 20px; height: 20px; flex: none; border: 0; border-radius: 0; box-shadow: none; background: currentColor;
  -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat;
}
.menu:nth-child(1) { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M1.5 4.5h6l2 2h9v10h-17z'/%3E%3C/svg%3E"); }
.menu:nth-child(2) { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M1.5 5h17v1.6h-17zM1.5 13.4h17V15h-17z'/%3E%3Ccircle cx='7' cy='5.8' r='2.8'/%3E%3Ccircle cx='13' cy='14.2' r='2.8'/%3E%3C/svg%3E"); }
.menu:nth-child(3) { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M10 4C5 4 1.5 10 1.5 10S5 16 10 16s8.5-6 8.5-6S15 4 10 4zm0 9.2a3.2 3.2 0 1 1 0-6.4 3.2 3.2 0 0 1 0 6.4z'/%3E%3C/svg%3E"); }
.menu:nth-child(4) { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M10 1.5a8.5 8.5 0 1 0 0 17 8.5 8.5 0 0 0 0-17zM9 14h2v2H9zm1-10a3.3 3.3 0 0 0-3.3 3.3h2A1.3 1.3 0 1 1 10.8 8.5c-1.1.5-1.8 1.4-1.8 2.7v.8h2v-.6c0-.5.3-.9.8-1.2A3.3 3.3 0 0 0 10 4z'/%3E%3C/svg%3E"); }

/* dropdowns float too, over a light haze so the rows stay readable */
.menu-pop {
  opacity: 1; transform: translateY(0);
  transition: opacity .14s var(--ease-out), transform .2s var(--snap), display .2s allow-discrete;
  top: calc(100% + 6px); min-width: 300px; padding: 4px 0; border: 0; box-shadow: none; gap: 0;
  background: rgba(38, 46, 52, 0.62); -webkit-backdrop-filter: blur(18px) saturate(1.2); backdrop-filter: blur(18px) saturate(1.2); box-shadow: 0 18px 40px -16px rgba(0, 0, 0, 0.45);
}
.menu-pop button { display: grid; grid-template-columns: calc(var(--split) - 14px) 1fr; align-items: center; height: 34px; padding: 0 14px; }
.menu-pop kbd { justify-self: center; font: 400 15px var(--font-sans); color: var(--teal); }
#soundToggle[aria-checked=false] { opacity: 0.5; }
.menu-pop hr { margin: 4px 14px; border: 0; height: 1px; background: var(--teal-faint); }

/* ---------- tool options: floating prompts ---------- */
.optionsbar { gap: 10px; padding: 0 0 4px; }
.opt-tool { min-width: 0; font: 500 15px var(--font-sans); color: var(--teal); }
.opt-sep { background: var(--dots) center / 1px 100% no-repeat; width: 1px; }
.opt-hint { font: 400 14px var(--font-sans); color: var(--teal-dim); }
.btn {
  min-height: 0; height: 28px; padding: 0 12px; gap: 7px; background: transparent; border: 1px solid rgba(185, 229, 236, 0.65); border-radius: 0; box-shadow: none;
  font: 400 14px/1 var(--font-sans); letter-spacing: 0.01em; text-transform: none; color: var(--teal); transition: background-color .15s;
}
.btn:hover, .btn:active, .btn[aria-pressed=true] { background: var(--bar); border-color: rgba(200, 238, 255, 0.8); box-shadow: var(--bar-glow); transform: none; filter: none; color: var(--lit); text-shadow: var(--lit-glow); }
.btn { transition: box-shadow .26s var(--ease-out), border-color .2s, color .15s, text-shadow .15s; }
.btn-yellow, .btn-green { background: var(--bar); border-color: rgba(190, 232, 255, 0.55); box-shadow: var(--bar-edge); }
.btn-yellow:hover, .btn-green:hover { background: var(--bar); filter: brightness(1.15); box-shadow: var(--bar-glow); }
.btn-sm { height: 22px; padding: 0 9px; font-size: 13px; }
.arrow { display: none; }
.btn-group { gap: 6px; }
.led { width: 7px; height: 7px; border-radius: 0; background: transparent; border: 1px solid currentColor; }
.btn-led[aria-pressed=true] .led, #sLed { background: var(--teal); border-color: var(--teal); }
#sLed.busy { background: #2a78c8; border-color: #2a78c8; }

/* ---------- section headers: a translucent box with a glyph and a title ---------- */
.tools::before, .panel-h, .sub-h, .window-title {
  display: flex; align-items: center; gap: 10px; min-height: 34px; margin: 0 0 6px; padding: 0 12px;
  background: var(--box); border: 0; box-shadow: inset 2px 0 0 var(--teal); font: 500 15px/1 var(--font-sans); letter-spacing: 0.02em; text-transform: none; color: var(--teal);
}
.panel-h { justify-content: flex-start; }
.panel-h::before {
  content: ""; position: static; width: 20px; height: 20px; flex: none; opacity: 1; background: var(--teal);
  -webkit-mask: var(--glyph) center / contain no-repeat; mask: var(--glyph) center / contain no-repeat;
}
.panel:has(#hist) { --glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 5.5a4.5 4.5 0 0 1 0 9z'/%3E%3Cpath fill-rule='evenodd' d='M10 4a6 6 0 1 0 0 12 6 6 0 0 0 0-12zm0 1.5a4.5 4.5 0 1 1 0 9 4.5 4.5 0 0 1 0-9z'/%3E%3Cpath d='M9.3 0h1.4v2.5H9.3zM9.3 17.5h1.4V20H9.3zM0 9.3h2.5v1.4H0zM17.5 9.3H20v1.4h-2.5z'/%3E%3C/svg%3E"); }
.panel:has(#adjust) { --glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M10 1a9 9 0 1 0 0 18 9 9 0 0 0 0-18zm0 4.2 2.1 3.6H7.9zm4.2 2.9 1.2 4-4.1-.3zm-8.4 0 2.9 3.7-4.1.3zm1.7 6.1h5l-2.5 2.6z'/%3E%3C/svg%3E"); }
.panel-h .sub-actions { margin-left: auto; display: flex; gap: 6px; }
.panel-h .adj-reset { margin-left: 10px; }
/* a section's Reset sits just left of its chevron, over the value column */
.adj summary .sec-reset {
  position: absolute; right: 34px; top: 50%; z-index: 1; height: 22px; margin: -11px 0 0; padding: 0 9px;
  background: transparent; border: 1px solid rgba(185, 229, 236, 0.6); border-radius: 0; color: var(--teal);
  font: 400 12px/20px var(--font-sans); letter-spacing: 0.02em; cursor: pointer;
  transition: background-color .15s, box-shadow .2s var(--ease-out), color .12s;
}
.adj summary .sec-reset:hover { background: var(--bar); border-color: rgba(200, 238, 255, 0.8); box-shadow: var(--bar-glow); color: var(--lit); }
.adj summary .sec-reset:active { transform: translateY(1px) scale(0.97); }
.adj.changed summary .switch { margin-right: 96px; }   /* make room beside the switch */
.panel-meta { margin-left: auto; font: 400 13px var(--font-sans); color: var(--teal-dim); text-transform: none; }
.panel-h + * { margin-top: 0; }

/* ---------- tool strip: labelled rows, a blue bar slides to the active one ---------- */
.tools { align-items: stretch; gap: 0; padding: 0; }
.tools::before { content: "Tools"; }
.tools hr { width: auto; height: 1px; margin: 6px 12px; border: 0; background: var(--teal-faint); }
.tool-glider { position: absolute; z-index: 0; background: var(--bar); box-shadow: var(--bar-glow); pointer-events: none; }
.tool-glider { left: 0; top: 0; will-change: transform; }
.tool-glider.ready { transition: transform .32s var(--spring), height .2s var(--snap); }
.tool { z-index: 1; width: 100%; height: 36px; display: flex; align-items: center; gap: 12px; padding: 0 12px; }
.tool[aria-pressed=true] { box-shadow: none; transform: none; color: var(--lit); text-shadow: var(--lit-glow); }
.tool svg { width: 20px; height: 20px; stroke: currentColor; stroke-width: 1.5; }
.tool svg .fill { fill: currentColor; }
.tool-name { flex: 1; text-align: left; }
.tool-key { position: static; font: 400 13px var(--font-sans); color: var(--teal-dim); }

/* ---------- canvas ---------- */
.ruler-corner { font: 400 9px/18px var(--font-sans); color: var(--teal-dim); background: transparent; border: 0; }
.stage { background: transparent; }
.pasteboard canvas { outline: 1px solid rgba(185, 229, 236, 0.3); box-shadow: 0 40px 50px -34px rgba(8, 14, 18, 0.6), 0 80px 90px -70px rgba(8, 14, 18, 0.4); }
.before-tag { top: 16px; background: var(--bar); color: var(--teal); border: 0; box-shadow: var(--bar-edge); padding: 7px 16px; font: 400 15px/1 var(--font-sans); }
.before-tag .led { display: none; }
.drop { background: rgba(40, 46, 52, 0.6); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.drop-box { background: transparent; border: 1px dashed var(--teal); box-shadow: none; padding: 20px 34px; font: 400 20px var(--font-sans); color: var(--teal); }
.drop-box small { font: 400 13px var(--font-sans); color: var(--teal-dim); }
.empty-canvas { width: min(400px, 100%); padding: 0; background: transparent; border: 0; box-shadow: none; align-items: flex-start; gap: 10px; }
.empty-title { width: 100%; display: flex; align-items: center; min-height: 34px; padding: 0 12px; background: var(--box); box-shadow: inset 2px 0 0 var(--teal); font: 500 15px/1 var(--font-sans); color: var(--teal); }
.empty-title::after { content: none; }
.empty-text { margin: 4px 12px 4px; font: 300 20px/1.35 var(--font-sans); color: var(--teal); }
.empty-canvas .btn { margin-left: 12px; }
.empty-formats { margin: 0 12px; font: 400 13px var(--font-sans); color: var(--teal-dim); }

/* ---------- panels ---------- */
.panels { gap: 22px; padding: 0 6px 0 0; }
.panel { padding: 0; }

/* histogram */
.hist { height: 84px; border: 0; background: transparent; box-shadow: inset 0 -1px 0 var(--teal-faint); }
.hist-axis { margin: 4px 0 4px; padding: 0 2px; font: 400 11px var(--font-sans); color: var(--teal-dim); }
.hist-stats { display: block; margin: 0; border: 0; box-shadow: none; }
.hist-stats div { display: grid; grid-template-columns: var(--split) 1fr; align-items: center; padding: 0 12px; border: 0; min-height: 30px; }
.hist-stats dt { font: 400 15px var(--font-sans); color: var(--teal); }
.hist-stats dd { justify-self: center; margin: 0; font: 400 15px var(--font-sans); color: var(--teal); }
.hist-stats dd.warn { color: var(--red); }

/* looks */
.rows { display: block; border: 0; box-shadow: none; background: transparent; }
.row-item { width: 100%; height: 34px; display: grid; grid-template-columns: 18px calc(var(--split) - 44px) 1fr; align-items: center; gap: 12px; padding: 0 12px; }
.rows > :first-child .row-item, .rows > .row-item:first-child { border-top: 0; }
.row-item .led { display: none; }
.row-item .sw { height: 9px; outline: 1px solid rgba(185, 229, 236, 0.4); }
.row-item .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row-item .tag { justify-self: center; font: 400 15px var(--font-sans); color: var(--teal); text-transform: capitalize; }
.row-item[aria-pressed=true] { font-weight: 400; }
.urow .row-item { padding-right: 70px; }
.urow .del { right: 10px; z-index: 1; background: transparent; border: 1px solid rgba(185, 229, 236, 0.6); border-radius: 0; color: var(--teal); font: 400 11px/1 var(--font-sans); padding: 3px 6px; }
.urow .del:hover { background: var(--bar); box-shadow: var(--bar-glow); }
.urow .del.armed { background: #c4493a; border-color: transparent; color: #fff; }
.sub-h { margin-top: 14px; justify-content: space-between; }
.sub-actions { gap: 6px; }
.empty { margin: 0; padding: 6px 12px; background: transparent; border: 0; font: 400 13px/1.45 var(--font-sans); color: var(--teal-dim); }
.saveform { margin: 8px 0 0; gap: 10px; padding: 0 12px; }
.saveform input { flex: 1; height: 30px; padding: 0; background: transparent; border: 0; border-bottom: 1px solid var(--teal-faint); box-shadow: none; font: 400 15px var(--font-sans); color: var(--teal); caret-color: var(--teal); }
.saveform input::placeholder { color: var(--teal-dim); }
.saveform input:focus { outline: none; border-bottom-color: var(--teal); }

/* adjustments: category rows open in place, one at a time */
.adj { margin: 0; }
.adj summary { height: 36px; display: grid; grid-template-columns: calc(var(--split) - 12px) 1fr; align-items: center; gap: 0; padding: 0 12px; cursor: pointer; }
.adj summary::after { content: ""; position: absolute; right: 12px; top: 50%; width: 11px; height: 22px; margin-top: -11px; background: var(--chev-r) center / contain no-repeat; transition: transform .24s var(--snap); }
/* sections open with a short height ease */
.adj::details-content { block-size: 0; overflow: clip; transition: block-size .24s var(--ease-out), content-visibility .24s allow-discrete; }
.adj[open]::details-content { block-size: auto; }
.adj[open] summary::after { transform: rotate(90deg); }
.adj[open] summary .adj-t { font-weight: 500; }
.adj-rule { display: none; }
.adj.off .adj-t { opacity: 0.55; }
.adj summary:hover .adj-t { opacity: 1; }
/* a section's on/off switch reads as ‹ On › / ‹ Off › */
.adj summary .switch { justify-self: center; margin-right: 26px; }
.switch span { width: auto; height: auto; border: 0; background: transparent !important; box-shadow: none; padding: 0 22px; font: 400 15px var(--font-sans); color: var(--teal); }
.switch span::before { content: "Off"; }
.switch input:checked + span::before { content: "On"; }
.switch span::after { content: ""; position: absolute; inset: 0; width: auto; height: auto; top: 0; left: 0; border: 0; border-radius: 0; opacity: 1; transform: none; transition: none;
  background: var(--chev-l) left center / 9px 18px no-repeat, var(--chev-r) right center / 9px 18px no-repeat !important; }
.switch input:checked + span::after { left: 0; }
.switch input:focus-visible + span { outline: 1px solid var(--teal); outline-offset: 2px; }

.params { background: transparent; padding: 0 0 6px; }
.param {
  display: grid; grid-template-columns: calc(var(--split) - 12px) 30px minmax(0, 1fr) 30px; grid-template-areas: "label prev value next";
  gap: 0; min-height: 34px; padding: 0 0 0 12px;
}
.param label { grid-area: label; min-width: 0; font: 400 15px var(--font-sans); color: var(--teal); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 10px; }
.param.changed label { font-weight: 500; }
.param.changed label::before { content: ""; display: inline-block; width: 4px; height: 4px; margin: 0 7px 0 0; vertical-align: 3px; border-radius: 0; background: currentColor; }
/* the slider stays, invisible, across the value: drag to scrub */
.param input[type=range] { grid-area: value; align-self: stretch; height: auto; width: 100%; margin: 0; opacity: 0; cursor: ew-resize; z-index: 1; }
.param .num { grid-area: value; justify-self: center; z-index: 2; gap: 3px; pointer-events: none; }
.num input { width: 5.5ch; pointer-events: auto; background: transparent; border: 0; box-shadow: none; padding: 0; text-align: right; font: 400 15px var(--font-sans); color: var(--teal); }
.num input:focus { background: transparent; outline: none; text-decoration: underline; }
.num i { font: 400 12px var(--font-sans); color: var(--teal-dim); width: auto; }
.param select { grid-area: value; width: 100%; }
.ds-step { align-self: stretch; padding: 0; border: 0; cursor: pointer; background: var(--chev-l) center / 11px 22px no-repeat; }
.ds-prev { grid-area: prev; }
.ds-next { grid-area: next; background-image: var(--chev-r); }
.ds-step:hover { background-color: rgba(185, 229, 236, 0.08); }
select {
  appearance: none; -webkit-appearance: none; background: transparent; border: 0; box-shadow: none; border-radius: 0;
  height: 32px; padding: 0 8px; text-align: center; text-align-last: center; font: 400 15px var(--font-sans); color: var(--teal); cursor: pointer;
}
option { background: #2c3439; color: var(--teal); text-shadow: none; }

/* gradient map + colour rows */
.ramp { height: 5px; margin: 2px 12px 6px; border: 0; }
.stops { gap: 0; column-gap: 8px; margin: 0; padding: 4px 12px 8px; }
.stops label { font: 400 13px var(--font-sans); color: var(--teal-dim); }
.stops label.changed span { color: var(--teal); }
.stops input, .param-color input[type=color] { height: 22px; border: 1px solid rgba(185, 229, 236, 0.55); background: transparent; box-shadow: none; padding: 1px; }
.stops code, .param-color code { font: 400 12px var(--font-sans); color: var(--teal-dim); }
.param-color { grid-template-columns: calc(var(--split) - 12px) 30px 60px minmax(0, 1fr); grid-template-areas: "label . swatch code"; }
.param-color input[type=color] { grid-area: swatch; width: 52px; }
.param-color code { grid-area: code; padding-left: 12px; }
.frames-ctl { margin: 0; padding: 6px 12px 10px; }
.frames-info { font: 400 13px var(--font-sans); color: var(--teal-dim); }
.frames-btns { gap: 6px; }

/* ---------- status bar ---------- */
.statusbar { padding-top: 6px; box-shadow: inset 0 1px 0 var(--teal-faint); font: 400 13px/1 var(--font-sans); color: var(--teal); }
.cell { padding: 4px 16px 3px 0; margin-right: 6px; border: 0; }
.cell b { font: 400 12px var(--font-sans); color: var(--teal-dim); }

/* ---------- notification ---------- */
.toast {
  right: 28px; bottom: 44px; max-width: min(400px, calc(100vw - 32px));
  background: var(--bar); color: var(--teal); border: 0; box-shadow: var(--bar-edge);
  padding: 10px 16px; font: 400 15px/1.35 var(--font-sans);
}
.toast::before { content: none; }

/* ---------- dialogs ---------- */
.window { background: rgba(38, 46, 52, 0.7); -webkit-backdrop-filter: blur(20px) saturate(1.2); backdrop-filter: blur(20px) saturate(1.2); color: var(--teal); border: 0; box-shadow: 0 24px 60px -18px rgba(0, 0, 0, 0.5); min-width: min(460px, calc(100vw - 32px)); padding: 10px; }
.window::backdrop { background: rgba(30, 36, 40, 0.4); }
.window-title { justify-content: space-between; }
.window-title span { background: transparent; padding: 0; font: inherit; color: inherit; }
.window-title .btn { border: 0; }
.keytable { border-collapse: collapse; }
.keytable td { padding: 0 12px; height: 34px; border: 0; font: 400 15px var(--font-sans); color: inherit; }
.keytable td:first-child { width: var(--split); background: var(--dots) right center / 1px 70% no-repeat; }
.keytable td:last-child { text-align: center; }
.keytable kbd { color: inherit; font-size: 15px; }

/* ---------- video transport + export (video.css) ---------- */
.transport { left: 0; right: 0; bottom: 0; gap: 8px; padding: 8px 12px; background: transparent; color: var(--teal); border: 0; box-shadow: inset 0 1px 0 var(--teal-faint); font: 400 14px var(--font-sans); }
.tp-btn { background: transparent; color: var(--teal); border: 1px solid rgba(185, 229, 236, 0.65); border-radius: 0; font: 400 13px var(--font-sans); min-height: 24px; }
.tp-btn:hover, .tp-btn[aria-pressed="true"] { background: var(--bar); box-shadow: var(--bar-edge); }
.tp-export { background: var(--bar); }
.tp-time, .tp-meta { font: 400 14px var(--font-sans); }
.tp-meta { color: var(--teal-dim); }
.vx-summary, .vx-status, .vx-note { font: 400 14px var(--font-sans); color: var(--teal-dim); }

/* ---------- range inputs outside setting rows (video scrubber) ---------- */
input[type=range]::-webkit-slider-runnable-track { height: 2px; border: 0; background: linear-gradient(90deg, var(--teal) var(--p, 0%), var(--teal-faint) var(--p, 0%)); }
input[type=range]::-moz-range-track { height: 2px; border: 0; background: linear-gradient(90deg, var(--teal) var(--p, 0%), var(--teal-faint) var(--p, 0%)); }
input[type=range]::-webkit-slider-thumb { width: 3px; height: 14px; margin-top: -6px; background: var(--teal); border: 0; border-radius: 0; box-shadow: none; }
input[type=range]::-moz-range-thumb { width: 3px; height: 14px; background: var(--teal); border: 0; border-radius: 0; box-shadow: none; }

@media (max-width: 900px) {
  .app { padding: 14px 16px; }
  .tools { flex-direction: row; flex-wrap: wrap; }
  .tools::before, .tools hr { display: none; }
  .tool { width: auto; flex: 1 1 auto; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- feel: dropdowns drop in, presses give a little ---------- */
@starting-style { .menu-pop { opacity: 0; transform: translateY(-6px); } }
.btn, .menu-btn { transition: box-shadow .2s var(--ease-out), border-color .15s, color .12s, text-shadow .12s, transform .1s var(--snap); }
.btn:active, .menu-btn:active { transform: translateY(1px) scale(0.985); transition-duration: .05s; }
.ds-step { transition: transform .12s var(--snap); }
.ds-prev:active { transform: translateX(-2px); }
.ds-next:active { transform: translateX(2px); }
.tool svg { transition: transform .2s var(--snap); }
.tool:active svg { transform: scale(0.9); }
.panels, .strip-scroll, .menu-pop { overscroll-behavior: contain; }
body { text-rendering: optimizeLegibility; font-kerning: normal; }

/* ---------- look settings: the look's name, section tabs, one section's rows ---------- */
#settingsPanel .panel-h { white-space: nowrap; }
#settingsPanel .look-title { font-weight: 500; overflow: hidden; text-overflow: ellipsis; }
#settingsPanel .panel-meta { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
#settingsPanel .panel-h .btn { flex: none; }
.sec-tabs { gap: 2px; margin: 4px 0 8px; }
.sec-tab {
  position: relative; display: flex; align-items: center; gap: 7px; padding: 8px 11px 9px; background: transparent; border: 0; border-radius: 0;
  box-shadow: inset 0 -2px 0 var(--teal-faint); font: 400 14px var(--font-sans); color: var(--teal-dim); cursor: pointer;
  transition: box-shadow .2s var(--ease-out), color .12s, text-shadow .12s;
}
.sec-tab:hover { color: var(--lit); box-shadow: inset 0 -2px 0 var(--teal); }
.sec-tab[aria-selected=true], .sec-more[aria-pressed=true] {
  background: var(--bar); color: var(--lit); text-shadow: var(--lit-glow);
  box-shadow: inset 0 -2px 0 var(--lit), inset 0 1px 0 rgba(176, 226, 255, 0.6), 0 0 18px -6px rgba(64, 156, 255, 0.6);
}
.sec-tab:active { transform: translateY(1px); }
.sec-more { margin-left: auto; padding: 8px 12px 9px; font-size: 16px; line-height: 1; }
/* the open section's header is a label bar: name, its on/off, its Reset */
#adjust .adj summary { height: 30px; cursor: default; font-size: 13px; color: var(--teal-dim); }
#adjust .adj summary::after { display: none; }
#adjust .adj summary:hover::before { opacity: 0; transform: scaleX(0.001); animation: none; }
#adjust .adj summary .adj-t { font-weight: 400; }
#adjust .adj[open] { animation: section-in .22s var(--ease-out) both; }
@keyframes section-in { from { opacity: 0; transform: translateX(6px); } to { opacity: 1; transform: none; } }
.saveform { margin-top: 14px; padding-top: 10px; box-shadow: inset 0 1px 0 var(--teal-faint); }

/* ---------- look strip: thumbnails of the photo under it ---------- */
.lookstrip { padding: 6px 0 2px; }
.strip-scroll { gap: 10px; padding: 8px 4px 10px; scrollbar-width: none; }   /* no scrollbar: it would add height only where tiles overflow */
.strip-scroll::-webkit-scrollbar { display: none; }
.strip-set { gap: 10px; }
.strip-set + .strip-set { padding-left: 14px; border-left: 0; background: var(--dots) 0 8px / 1px calc(100% - 16px) no-repeat; }
.lookstrip .row-item {
  width: 112px; min-height: 0; height: auto; gap: 5px; padding: 0; background: none; box-shadow: none; font-size: 13px;
  transition: transform .2s var(--snap), color .12s, text-shadow .12s;
}
.lookstrip .row-item::before { display: none; }
.lookstrip .row-item:hover { transform: translateY(-2px); background: none; box-shadow: none; }
.lookstrip .th { height: 66px; outline: 1px solid rgba(185, 229, 236, 0.3); outline-offset: 0; transition: outline-color .15s, box-shadow .25s var(--ease-out); }
.lookstrip .row-item:hover .th { outline-color: var(--teal); box-shadow: 0 0 14px -4px rgba(64, 156, 255, 0.7); }
.lookstrip .row-item[aria-pressed=true] { background: none; box-shadow: none; color: var(--lit); text-shadow: var(--lit-glow); }
.lookstrip .row-item[aria-pressed=true] .th { outline: 2px solid var(--lit); box-shadow: 0 0 0 1px rgba(110, 185, 255, 0.35), 0 0 22px -2px rgba(64, 156, 255, 0.75); }
.lookstrip .row-item { position: relative; }
.lookstrip .row-item[aria-pressed=true]::after { /* a lit bar under the chosen look, drawn in the strip's padding so no tile grows */
  content: ""; position: absolute; left: 0; right: 0; bottom: -6px; top: auto; width: auto; height: 2px; margin: 0; background: var(--lit); box-shadow: 0 0 10px rgba(120, 190, 255, 0.9);
}
.lookstrip .row-item .sw { height: 2px; outline: 0; opacity: 0.8; }
.lookstrip .row-item .nm { padding: 0 1px; }
.lookstrip .urow .del { top: 4px; right: 4px; padding: 1px 5px; background: rgba(38, 46, 52, 0.7); }
.strip-meta { font: 400 12px var(--font-sans); color: var(--teal-dim); padding: 0 4px; }
.strip-cats { gap: 2px; margin: 0 0 2px; }
.strip-cat {
  display: flex; align-items: baseline; gap: 6px; padding: 6px 11px 7px; background: transparent; border: 0; border-radius: 0;
  box-shadow: inset 0 -2px 0 var(--teal-faint); font: 400 13px var(--font-sans); color: var(--teal-dim); cursor: pointer;
  transition: box-shadow .2s var(--ease-out), color .12s, text-shadow .12s;
}
.strip-cat .n { font-size: 11px; opacity: 0.7; }
.strip-cat:hover { color: var(--lit); box-shadow: inset 0 -2px 0 var(--teal); }
.strip-cat[aria-pressed=true] {
  background: var(--bar); color: var(--lit); text-shadow: var(--lit-glow);
  box-shadow: inset 0 -2px 0 var(--lit), inset 0 1px 0 rgba(176, 226, 255, 0.6), 0 0 18px -6px rgba(64, 156, 255, 0.6);
}
.lookstrip .row-item[hidden], .lookstrip .urow[hidden] { display: none; }

/* ---------- Texture / LUT pickers ---------- */
.pick-grid { gap: 8px; padding: 4px 12px 12px; animation: section-in .22s var(--ease-out) both; }
.pick-head { font: 400 12px var(--font-sans); color: var(--teal-dim); padding: 2px 0 2px; }
.pick-head { cursor: pointer; }
.pick-head:hover { color: var(--lit); }
.pick-close { width: 22px; height: 18px; padding: 0; color: var(--teal); display: grid; place-items: center; }
.pick-close::after { content: ""; width: 6px; height: 6px; margin-top: 3px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-135deg); }   /* a chevron up: fold away */
.pick-head:hover .pick-close { color: var(--lit); }
.pick-sw { gap: 4px; font: 400 12px var(--font-sans); color: var(--teal-dim); transition: transform .2s var(--snap), color .12s; }
.pick-sw canvas { outline: 1px solid rgba(185, 229, 236, 0.3); transition: outline-color .15s, box-shadow .25s var(--ease-out), opacity .2s; }
.pick-sw:hover { transform: translateY(-2px); color: var(--lit); }
.pick-sw:hover canvas { outline-color: var(--teal); box-shadow: 0 0 14px -4px rgba(64, 156, 255, 0.7); }
.pick-sw[aria-selected=true] { color: var(--lit); text-shadow: var(--lit-glow); }
.pick-sw[aria-selected=true] canvas { outline: 2px solid var(--lit); box-shadow: 0 0 0 1px rgba(110, 185, 255, 0.35), 0 0 20px -2px rgba(64, 156, 255, 0.75); }
.pick-sw.busy canvas { opacity: 0.35; }
.pick-grid.missing::after { font: 400 13px var(--font-sans); color: var(--teal-dim); }
/* the value of a picker row reads as a button: ‹ 06 ▾ › */
.has-picker select { text-decoration: underline dotted rgba(185, 229, 236, 0.5); text-underline-offset: 4px; }

/* ---------- look strength: a standing row above the section tabs ---------- */
#strengthRow { margin: 2px 0 4px; }
#strengthRow label { font-weight: 500; }

.pick-del { background: rgba(20, 28, 32, 0.75); color: var(--teal); transition: opacity .15s; }
.pick-del:hover { color: var(--lit); background: rgba(196, 73, 58, 0.85); }
.pick-add .plus { outline: 1px dashed rgba(185, 229, 236, 0.45); color: var(--teal); font-size: 24px; font-weight: 300; transition: outline-color .15s, box-shadow .25s var(--ease-out); }
.pick-add:hover .plus { outline-color: var(--teal); box-shadow: 0 0 14px -4px rgba(64, 156, 255, 0.7); color: var(--lit); }

/* ---------- crop tool ---------- */
.crop-box { outline: 1px solid var(--lit); box-shadow: 0 0 0 200vmax rgba(10, 16, 20, 0.62), 0 0 18px rgba(64, 156, 255, 0.45); }
.crop-box i { width: 12px; height: 12px; margin: -6px 0 0 -6px; background: var(--lit); box-shadow: 0 0 10px rgba(120, 190, 255, 0.9); }
.crop-box i[data-h="n"], .crop-box i[data-h="s"] { width: 22px; height: 4px; margin: -2px 0 0 -11px; }
.crop-box i[data-h="e"], .crop-box i[data-h="w"] { width: 4px; height: 22px; margin: -11px 0 0 -2px; }
.crop-thirds { opacity: 0.55; }
.crop-opts { gap: 6px; }
.crop-opts .btn[aria-pressed=true] { background: var(--bar); color: var(--lit); box-shadow: var(--bar-glow); }
.crop-size { font: 400 13px var(--font-sans); color: var(--teal-dim); }

/* ---------- guided editing ---------- */
.guide-toggle { top: 4px; }
.guide-toggle[aria-pressed=true] { background: var(--bar); color: var(--lit); box-shadow: var(--bar-glow); border-color: rgba(200, 238, 255, 0.8); }
.guide-steps { gap: 2px; }
.guide-step {
  padding: 6px 12px 7px; border: 0; border-radius: 0; background: transparent; box-shadow: inset 0 -2px 0 var(--teal-faint);
  font: 400 13px var(--font-sans); color: var(--teal-dim); transition: box-shadow .2s var(--ease-out), color .12s;
}
.guide-step b { font-weight: 500; color: var(--teal-dim); }
.guide-step small { color: var(--teal); opacity: 0.8; }
.guide-step:hover { color: var(--lit); box-shadow: inset 0 -2px 0 var(--teal); }
.guide-step[aria-current=true] { background: var(--bar); color: var(--lit); text-shadow: var(--lit-glow); box-shadow: inset 0 -2px 0 var(--lit), inset 0 1px 0 rgba(176, 226, 255, 0.6), 0 0 18px -6px rgba(64, 156, 255, 0.6); }
.guide-step[aria-current=true] b, .guide-step[aria-current=true] small { color: var(--lit); }
.guide-hint { font: 400 13px var(--font-sans); color: var(--teal-dim); margin: 8px 4px 6px; }
.guide-opts { gap: 8px; padding: 2px 4px 10px; }
.guide-opt {
  min-width: 108px; padding: 9px 11px; border: 1px solid rgba(185, 229, 236, 0.3); background: rgba(200, 222, 228, 0.06);
  font: 400 13px var(--font-sans); color: var(--teal); transition: transform .2s var(--snap), border-color .15s, box-shadow .25s var(--ease-out), color .12s;
}
.guide-opt i { height: 4px; }
.guide-opt small { color: var(--teal-dim); }
.guide-opt:hover { transform: translateY(-2px); border-color: var(--teal); color: var(--lit); box-shadow: 0 0 14px -4px rgba(64, 156, 255, 0.7); }
.guide-opt[aria-pressed=true] { outline: 0; border-color: var(--lit); color: var(--lit); text-shadow: var(--lit-glow); background: var(--bar); box-shadow: var(--bar-glow); }
.guide-nav .btn[disabled] { opacity: 0.35; pointer-events: none; }
.pasteboard.bordered canvas#gl { outline: 0; }
.pasteboard canvas.overlay-canvas { outline: 0 !important; box-shadow: none !important; }

/* ---------- export dialog ---------- */
.export-form { padding: 6px 6px 8px; }
.ex-row { min-height: 38px; }
.ex-label { font: 400 15px var(--font-sans); color: var(--teal-dim); }
.ex-seg { gap: 4px; }
.ex-seg span { height: 32px; padding: 0 14px; border: 0; font: 400 15px var(--font-sans); color: var(--teal); box-shadow: inset 0 0 0 1px var(--teal-faint);
  transition: background-color 0.12s var(--snap), box-shadow 0.12s var(--snap), color 0.12s var(--snap); }
.ex-seg label:hover span { background: rgba(24, 116, 214, 0.22); box-shadow: var(--bar-edge); color: var(--lit); }
.ex-seg input:checked + span { background: var(--bar); box-shadow: var(--bar-glow); color: var(--lit); text-shadow: var(--lit-glow); }
.ex-range input[type=number], .ex-size input, .ex-name input {
  height: 32px; padding: 0 8px; background: rgba(185, 229, 236, 0.06); border: 0; border-radius: 0; box-shadow: inset 0 -1px 0 var(--teal-faint);
  font: 400 15px var(--font-sans); color: var(--teal);
}
.ex-range input[type=number]:focus, .ex-size input:focus, .ex-name input:focus { outline: none; box-shadow: inset 0 -2px 0 var(--teal); }
.ex-size select { text-align: left; text-align-last: left; padding: 0 10px; background: rgba(185, 229, 236, 0.06); box-shadow: inset 0 -1px 0 var(--teal-faint); }
.ex-name span { font: 400 15px var(--font-sans); color: var(--teal-dim); }
.ex-checks label { min-height: 28px; font: 400 15px var(--font-sans); }
.ex-checks span::before { border: 0; box-shadow: inset 0 0 0 1px var(--teal); }
.ex-checks input:checked + span::before { background: var(--teal); box-shadow: inset 0 0 0 1px var(--teal), inset 0 0 0 3px rgba(38, 46, 52, 0.9); }
.ex-summary { font: 400 14px var(--font-sans); color: var(--teal-dim); padding-top: 8px; box-shadow: inset 0 1px 0 var(--teal-faint); }
.ex-actions .btn { min-width: 108px; justify-content: center; }

/* ---------- basic dials, Advanced ---------- */
.basic { margin: 2px 0 0; }
.adv-toggle { min-height: 34px; margin-top: 10px; padding: 0 12px; border: 0; box-shadow: inset 0 1px 0 var(--teal-faint); font: 400 15px var(--font-sans); color: var(--teal-dim); letter-spacing: 0.02em;
  transition: color 0.12s var(--snap), background-color 0.12s var(--snap); }
.adv-toggle:hover { color: var(--lit); background: rgba(24, 116, 214, 0.18); }
.adv-toggle[aria-expanded=true] { color: var(--teal); }
.adv-toggle::after { width: 6px; height: 6px; border-width: 0 1.5px 1.5px 0; transition: transform 0.2s var(--snap); }
.adv-meta { font: 400 13px var(--font-sans); color: var(--teal-dim); }

/* ---------- split tone pairs ---------- */
.tone-pairs { gap: 8px 6px; padding: 6px 12px 10px; }
.tone-sw { font: 400 12px var(--font-sans); color: var(--teal-dim); transition: color 0.12s var(--snap); }
.tone-sw i { height: 24px; outline: 1px solid var(--teal-faint); outline-offset: 0; transition: outline-color 0.12s var(--snap), box-shadow 0.15s var(--snap); }
.tone-sw:hover { color: var(--lit); }
.tone-sw:hover i { outline-color: rgba(200, 238, 255, 0.8); box-shadow: 0 0 14px -4px rgba(64, 156, 255, 0.6); }
.tone-sw[aria-selected=true] { color: var(--lit); text-shadow: var(--lit-glow); }
.tone-sw[aria-selected=true] i { outline: 2px solid var(--lit); box-shadow: 0 0 16px -4px rgba(64, 156, 255, 0.7); }

/* ---------- room for the photo: a slim tool rail, one-row options bar ---------- */
@media (min-width: 901px) {
  .app { grid-template-columns: 52px minmax(0, 1fr) 380px; }
  .app.panels-off { grid-template-columns: 0 minmax(0, 1fr) 0; column-gap: 0; }
  .tools::before { display: none; }
  .tool { height: 44px; padding: 0; justify-content: center; gap: 0; }
  .tool-name, .tool-key { display: none; }
  .tools hr { margin: 6px 8px; }
}
.optionsbar { flex-wrap: nowrap; }
.opt-hint { flex: 1 1 0; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.opt-grow { flex: 0 0 4px; }
.optionsbar:has(#cropOpts:not([hidden])) .opt-grow { flex: 1 1 0; }   /* the hint hides while cropping: keep Export at the right edge */
.panel-fold:hover { color: var(--lit); background: rgba(24, 116, 214, 0.18); }
.panel-fold:focus-visible { outline: 1px solid var(--teal); outline-offset: -1px; }

/* split before / after in the theme's light */
.split-line::before { background: var(--lit); box-shadow: 0 0 10px rgba(110, 185, 255, 0.7), 0 0 0 1px rgba(8, 20, 30, 0.35); }
.split-grip { background: rgba(38, 46, 52, 0.75); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: inset 0 0 0 1.5px var(--lit), 0 0 16px -2px rgba(64, 156, 255, 0.7); }
.split-grip::before { border-right-color: var(--lit); }
.split-grip::after { border-left-color: var(--lit); }
.split-ui.dragging .split-grip { background: var(--bar); }
.split-tag { top: 12px; padding: 3px 10px; font: 400 13px var(--font-sans); letter-spacing: 0.03em; background: rgba(30, 38, 44, 0.55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: var(--teal); box-shadow: inset 2px 0 0 var(--teal); }
.strip-meta { display: none; }   /* the count and keys are in the shortcuts list (?); the height goes to the photo */

/* ---------- favourites, hidden categories, vary ---------- */
.lookstrip .row-item .fav { top: 5px; left: 5px; width: 22px; height: 22px; font-size: 13px; color: var(--teal); background: rgba(30, 38, 44, 0.6); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: opacity 0.12s var(--snap), color 0.12s var(--snap), text-shadow 0.12s var(--snap); }
.lookstrip .row-item .fav:hover { color: var(--lit); text-shadow: var(--lit-glow); }
.lookstrip .row-item.is-fav .fav { color: var(--lit); text-shadow: 0 0 8px rgba(150, 215, 255, 0.9); }
.vary-btn { margin-left: 10px; flex: none; }

/* ---------- open photos (tool rail) ---------- */
.photo-tile { background: rgba(185, 229, 236, 0.06); border: 0; box-shadow: inset 0 0 0 1px var(--teal-faint); color: var(--teal-dim); font: 500 10px var(--font-sans);
  transition: box-shadow 0.15s var(--snap), opacity 0.15s var(--snap); opacity: 0.72; }
.photo-tile:hover { opacity: 1; box-shadow: inset 0 0 0 1px rgba(200, 238, 255, 0.8), 0 0 14px -4px rgba(64, 156, 255, 0.6); }
.photo-tile[aria-current=true] { opacity: 1; outline: 0; box-shadow: 0 0 0 2px var(--lit), 0 0 16px -3px rgba(64, 156, 255, 0.8); }
.photo-x { background: rgba(30, 38, 44, 0.75); color: var(--teal); }
.photo-add { font: 300 20px var(--font-sans); color: var(--teal-dim); box-shadow: inset 0 0 0 1px var(--teal-faint); }
.photo-add:hover { color: var(--lit); }

/* ---------- crisper type ----------
   The scanline texture sits behind the interface instead of over it, so text and icons draw clean on top of a
   textured surface (dialogs the same). No 1px drop under text; glows stay on lit items only. The dim teal is
   lifted for contrast, the smallest text is a pixel larger, and the menu underline is a hairline. */
.holo-layer { z-index: 0; }
.app { position: relative; z-index: 1; }
.window { isolation: isolate; }
.window::after { z-index: -1; }
:root {
  --shade: none;
  --lit-glow: 0 0 8px rgba(150, 215, 255, 0.5);
  --teal-dim: #acd8de;
}
.menu-btn { box-shadow: inset 0 -1px 0 rgba(185, 229, 236, 0.32); }
.lookstrip .row-item .nm { font-size: 13px; }
.strip-cat .n { font-size: 12px; }
.statusbar { font-size: 13px; }
.statusbar .cell b { font-size: 13px; }
#histPanel.folded .panel-meta { display: none; }

/* ---------- one icon set: 20px grid, 1.5px outline, round caps and joins, no fills ---------- */
.menu:nth-child(1) { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 6a1.5 1.5 0 0 1 1.5-1.5h3.6l2 2H16a1.5 1.5 0 0 1 1.5 1.5v6.5A1.5 1.5 0 0 1 16 16H4a1.5 1.5 0 0 1-1.5-1.5z'/%3E%3C/svg%3E"); }
.menu:nth-child(2) { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h2.5M9.5 6H17M3 14h8.5M16.5 14h.5'/%3E%3Ccircle cx='7.5' cy='6' r='2'/%3E%3Ccircle cx='14.5' cy='14' r='2'/%3E%3C/svg%3E"); }
.menu:nth-child(3) { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1.8 10s3-5.5 8.2-5.5S18.2 10 18.2 10s-3 5.5-8.2 5.5S1.8 10 1.8 10z'/%3E%3Ccircle cx='10' cy='10' r='2.5'/%3E%3C/svg%3E"); }
.menu:nth-child(4) { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10' cy='10' r='7.5'/%3E%3Cpath d='M7.9 7.9a2.2 2.2 0 1 1 3 2c-.6.3-.9.8-.9 1.4v.3'/%3E%3Cpath d='M10 14.1v.1'/%3E%3C/svg%3E"); }
.panel:has(#hist) { --glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 16.5h15'/%3E%3Cpath d='M3 15.5c2.2 0 3-7.5 5.2-7.5s2.4 5 4.4 5 2.2-3.5 4.4-3.5'/%3E%3C/svg%3E"); }
.panel:has(#adjust) { --glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='7.5' cy='8' r='4.5'/%3E%3Ccircle cx='12.5' cy='8' r='4.5'/%3E%3Ccircle cx='10' cy='12.5' r='4.5'/%3E%3C/svg%3E"); }
.tool svg { fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- gradient map palettes ---------- */
.pal-grid { gap: 8px 6px; padding: 6px 12px 10px; }
.pal-sw { font: 400 12px var(--font-sans); color: var(--teal-dim); transition: color 0.12s var(--snap); }
.pal-sw i { height: 20px; outline: 1px solid var(--teal-faint); transition: outline-color 0.12s var(--snap), box-shadow 0.15s var(--snap); }
.pal-sw:hover { color: var(--lit); }
.pal-sw:hover i { outline-color: rgba(200, 238, 255, 0.8); box-shadow: 0 0 14px -4px rgba(64, 156, 255, 0.6); }
.pal-sw[aria-selected=true] { color: var(--lit); text-shadow: var(--lit-glow); }
.pal-sw[aria-selected=true] i { outline: 2px solid var(--lit); box-shadow: 0 0 16px -4px rgba(64, 156, 255, 0.7); }

/* ---------- wordmark: the tile (a white disc with two blue trails, its afterimage) and the name ---------- */
.wordmark { display: inline-flex; align-items: center; gap: 9px; padding-bottom: 10px; }
.wordmark .wm-mark { width: 22px; height: 22px; flex: none; }
.wordmark .wm-word { font: 500 14px/1 "Instrument Sans", var(--font-sans); letter-spacing: -0.01em; text-transform: none; color: var(--lit); }

/* ---------- the sequence bar ---------- */
.seq-tabs { gap: 2px; margin: 0 0 8px; }
.seq-tab { position: relative; padding: 6px 14px 7px 10px; border: 0; box-shadow: inset 0 -2px 0 var(--teal-faint); font: 400 15px var(--font-sans); color: var(--teal-dim);
  transition: box-shadow .2s var(--ease-out), color .12s, background-color .12s; }
.seq-tab .seq-n { font: 500 11px var(--font-sans); color: var(--teal-dim); }
.seq-tab .seq-name { color: var(--teal); }
.seq-tab.set .seq-n { color: var(--lit); text-shadow: 0 0 6px rgba(150, 215, 255, 0.8); }
.seq-tab:hover { box-shadow: inset 0 -2px 0 var(--teal); }
.seq-tab:hover .seq-name { color: var(--lit); }
.seq-tab[aria-current=true] { background: var(--bar); box-shadow: inset 0 -2px 0 var(--lit), inset 0 1px 0 rgba(176, 226, 255, 0.6), 0 0 18px -6px rgba(64, 156, 255, 0.6); }
.seq-tab[aria-current=true] .seq-name, .seq-tab[aria-current=true] .seq-n { color: var(--lit); text-shadow: var(--lit-glow); }
.seq-head { margin: 0 0 6px; }
.seq-opts { gap: 10px; padding: 4px 2px 10px; }
.seq-opt .th { height: 66px; outline: 1px solid rgba(185, 229, 236, 0.3); transition: outline-color .15s, box-shadow .25s var(--ease-out); }
.seq-opt:hover { transform: translateY(-2px); }
.seq-opt:hover .th { outline-color: var(--teal); box-shadow: 0 0 14px -4px rgba(64, 156, 255, 0.7); }
.seq-opt[aria-pressed=true] { color: var(--lit); text-shadow: var(--lit-glow); }
.seq-opt[aria-pressed=true] .th { outline: 2px solid var(--lit); box-shadow: 0 0 0 1px rgba(110, 185, 255, 0.35), 0 0 22px -2px rgba(64, 156, 255, 0.75); }
.seq-opt .nm { font: 400 13px var(--font-sans); color: var(--teal); padding: 0 1px; }
.seq-opt[aria-pressed=true] .nm { color: var(--lit); }
.seq-opt.seq-act .th { position: relative; display: grid; place-items: center; background: rgba(185, 229, 236, 0.06); }
.seq-opt.seq-act .th::after { content: ""; width: 26px; height: 26px; background: var(--teal); -webkit-mask: center / contain no-repeat; mask: center / contain no-repeat; }
.seq-opt.seq-act:hover .th::after { background: var(--lit); }
.seq-opt .th.ic-crop::after { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 2v12.5H18'/%3E%3Cpath d='M2 5.5h12.5V18'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 2v12.5H18'/%3E%3Cpath d='M2 5.5h12.5V18'/%3E%3C/svg%3E"); }
.seq-opt .th.ic-export::after { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 13V3M6 7l4-4 4 4'/%3E%3Cpath d='M3.5 12.5v3a1.5 1.5 0 0 0 1.5 1.5h10a1.5 1.5 0 0 0 1.5-1.5v-3'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 13V3M6 7l4-4 4 4'/%3E%3Cpath d='M3.5 12.5v3a1.5 1.5 0 0 0 1.5 1.5h10a1.5 1.5 0 0 0 1.5-1.5v-3'/%3E%3C/svg%3E"); }
.seq-opt .th.ic-save::after { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 3v10M6 9l4 4 4-4'/%3E%3Cpath d='M3.5 12.5v3a1.5 1.5 0 0 0 1.5 1.5h10a1.5 1.5 0 0 0 1.5-1.5v-3'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 3v10M6 9l4 4 4-4'/%3E%3Cpath d='M3.5 12.5v3a1.5 1.5 0 0 0 1.5 1.5h10a1.5 1.5 0 0 0 1.5-1.5v-3'/%3E%3C/svg%3E"); }
.seq-opt .th.ic-preset::after { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='7.5' cy='8' r='4.5'/%3E%3Ccircle cx='12.5' cy='8' r='4.5'/%3E%3Ccircle cx='10' cy='12.5' r='4.5'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='7.5' cy='8' r='4.5'/%3E%3Ccircle cx='12.5' cy='8' r='4.5'/%3E%3Ccircle cx='10' cy='12.5' r='4.5'/%3E%3C/svg%3E"); }

/* ---------- stage 1: the photo on flat neutral grey ----------
   Colour and contrast are judged against what surrounds the photo, so the area behind it is a flat, untinted grey
   (no gradient, no scanlines), as in Lightroom and Capture One. The styled slate stays on the panels and chrome. */
.viewport { background: #3c3c3c; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25); }
.pasteboard canvas { box-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.6); }
.seq-tab.edited .seq-name::after { background: var(--lit); box-shadow: 0 0 6px rgba(150, 215, 255, 0.8); }
.lookstrip.folded .seq-tab[aria-current=true] { box-shadow: inset 0 -2px 0 var(--teal); background: rgba(24, 116, 214, 0.18); }
.app.focus-full .viewport { box-shadow: none; }

/* ---------- section tabs: the note when a step has nothing yet ---------- */
.sec-empty { font: 400 13px var(--font-sans); color: var(--teal-dim); padding: 0 12px; flex: 1; }

/* ---------- scope pips: which steps a preset fills ---------- */
.lookstrip .row-item .pips, .br-tile .pips { position: absolute; left: 5px; top: 56px; z-index: 1; display: flex; gap: 2px; pointer-events: none; }
.pips i { width: 6px; height: 3px; background: rgba(20, 26, 30, 0.55); box-shadow: 0 0 0 1px rgba(185, 229, 236, 0.35); }
.pips i.on { background: var(--teal); box-shadow: 0 0 0 1px rgba(20, 26, 30, 0.5); }

/* ---------- browse all ---------- */
.strip-browse { margin-left: auto; color: var(--teal); }
.browse { position: absolute; inset: 0; z-index: 30; display: flex; flex-direction: column; background: rgba(30, 36, 40, 0.97); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.browse[hidden] { display: none; }
.br-head { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid rgba(185, 229, 236, 0.18); }
.br-head input[type=search] { flex: none; width: 200px; height: 30px; padding: 0 10px; background: rgba(0, 0, 0, 0.25); border: 1px solid rgba(185, 229, 236, 0.4); color: var(--lit); font: 400 14px var(--font-sans); outline: 0; }
.br-head input[type=search]:focus { border-color: var(--teal); box-shadow: 0 0 0 1px var(--teal); }
.br-cats { display: flex; gap: 2px; flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.br-cats .strip-cat { flex: none; }
.br-grid { flex: 1; overflow: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 16px 12px; padding: 16px; align-content: start; }
.br-tile { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 0; background: none; border: 0; color: var(--teal); font: 400 13px var(--font-sans); text-align: left; cursor: pointer; }
.br-tile[hidden] { display: none; }
.br-tile .th { display: block; aspect-ratio: 108 / 66; background: #555 center / cover; outline: 1px solid rgba(185, 229, 236, 0.3); transition: outline-color .15s, box-shadow .25s var(--ease-out); }
.br-tile .pips { top: auto; bottom: 28px; }
.br-tile .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.br-tile:hover { color: var(--lit); }
.br-tile:hover .th { outline-color: var(--teal); box-shadow: 0 0 14px -4px rgba(64, 156, 255, 0.7); }
.br-tile[aria-selected=true] { color: var(--lit); }
.br-tile[aria-selected=true] .th { outline: 2px solid var(--lit); }
.br-tile .fav { position: absolute; top: 5px; left: 5px; width: 22px; height: 22px; display: grid; place-items: center; font-size: 13px; color: var(--teal); background: rgba(30, 38, 44, 0.6); opacity: 0; transition: opacity .12s; }
.br-tile:hover .fav, .br-tile.is-fav .fav { opacity: 1; }
.br-tile.is-fav .fav { color: var(--lit); }
.br-empty { padding: 24px 16px; color: var(--teal-dim); font: 400 14px var(--font-sans); }

/* ---------- palette tools ---------- */
.pal-acts { display: flex; gap: 6px; padding: 0 12px 10px; }

/* ---------- long steps: group chips and a grid ---------- */
.seq-groups { flex: 1; min-width: 0; display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; margin: 0; }
.seq-groups[hidden] { display: none; }
.seq-groups .strip-cat { flex: none; }
.seq-opt[hidden] { display: none; }
.seq-opts.grid { flex-wrap: wrap; overflow-x: hidden; overflow-y: auto; max-height: 268px; scroll-snap-type: none; align-content: flex-start; }
#seqGrid[aria-pressed=true] { background: var(--bar); color: var(--lit); box-shadow: var(--bar-glow); }

/* ---------- crop, Lightroom-style: whole edges grab, grids while dragging, straighten ---------- */
.crop-box i { background: transparent; box-shadow: none; z-index: 1; }
.crop-box i::after { content: ""; position: absolute; background: var(--lit); box-shadow: 0 0 8px rgba(120, 190, 255, 0.8); }
.crop-box i[data-h="nw"], .crop-box i[data-h="ne"], .crop-box i[data-h="se"], .crop-box i[data-h="sw"] { width: 26px; height: 26px; margin: -13px 0 0 -13px; z-index: 2; }
.crop-box i[data-h="nw"]::after, .crop-box i[data-h="ne"]::after, .crop-box i[data-h="se"]::after, .crop-box i[data-h="sw"]::after { left: 8px; top: 8px; width: 10px; height: 10px; }
.crop-box i[data-h="n"], .crop-box i[data-h="s"] { left: 0 !important; width: 100%; height: 14px; margin: -7px 0 0 0; }
.crop-box i[data-h="e"], .crop-box i[data-h="w"] { top: 0 !important; height: 100%; width: 14px; margin: 0 0 0 -7px; }
.crop-box i[data-h="n"]::after, .crop-box i[data-h="s"]::after { left: calc(50% - 12px); top: 5px; width: 24px; height: 4px; }
.crop-box i[data-h="e"]::after, .crop-box i[data-h="w"]::after { top: calc(50% - 12px); left: 5px; width: 4px; height: 24px; }
.crop-thirds, .crop-fine { opacity: 0; transition: opacity .15s; }
.crop-ui.dragging .crop-thirds { opacity: 0.6; }
.crop-fine { position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(90deg, rgba(255,255,255,.28) 1px, transparent 1px), linear-gradient(180deg, rgba(255,255,255,.28) 1px, transparent 1px);
  background-size: 12.5% 12.5%; }
.crop-ui.rotating .crop-fine { opacity: 1; }
.crop-ui { cursor: default; }
.crop-box { cursor: move; }
#gl { transform-origin: 50% 50%; }
.crop-angle { display: inline-flex; align-items: center; gap: 6px; font: 400 13px var(--font-sans); color: var(--teal); }
.crop-angle input { width: 120px; }
.crop-angle span { min-width: 42px; color: var(--lit); font-variant-numeric: tabular-nums; }
.crop-ui { overflow: visible; }
.crop-opts { flex-wrap: nowrap; gap: 4px; }
.crop-opts .btn-sm { padding-left: 7px; padding-right: 7px; }
.crop-angle input { width: 90px; }
.crop-size { min-width: 0; }
.crop-size { white-space: nowrap; }

/* ---------- batch: apply to all, and photos that got the look ---------- */
.photo-tile { position: relative; }
.photo-all { font: 500 12px var(--font-sans); color: var(--teal); letter-spacing: .04em; }
.photo-all:hover { color: var(--lit); }
.photo-edited { position: absolute; right: 3px; bottom: 3px; width: 6px; height: 6px; border-radius: 50%; background: var(--lit); box-shadow: 0 0 6px rgba(150, 215, 255, .9); pointer-events: none; }
.photo-tile.picked { outline: 2px solid var(--teal); outline-offset: 1px; }
.photo-tile.picked[aria-current=true] { outline-color: var(--lit); box-shadow: 0 0 12px -2px rgba(64, 156, 255, .8); }

/* ---------- what this look does ---------- */
.recipe { display: flex; flex-direction: column; gap: 2px; padding: 6px 12px 10px; border-bottom: 1px solid rgba(185, 229, 236, .15); }
.recipe[hidden] { display: none; }
.recipe-sec { display: grid; gap: 1px; padding: 5px 8px; background: none; border: 0; text-align: left; cursor: pointer; color: var(--teal); font: 400 12px/1.35 var(--font-sans); }
.recipe-sec b { font-weight: 500; color: var(--lit); font-size: 13px; }
.recipe-sec:hover { background: rgba(185, 229, 236, .06); }
.recipe-empty { margin: 4px 8px; color: var(--teal-dim); font: 400 12px var(--font-sans); }
.recipe-btn[aria-pressed=true] { background: var(--bar); color: var(--lit); box-shadow: var(--bar-glow); }

/* ---------- about & credits ---------- */
.about-win { width: min(620px, calc(100vw - 32px)); }
.about { padding: 4px 22px 20px; max-height: 70vh; overflow: auto; font: 400 13px/1.55 var(--font-sans); color: var(--teal); }
.about h3 { margin: 16px 0 4px; font: 500 13px var(--font-sans); color: var(--lit); letter-spacing: .04em; text-transform: uppercase; }
.about p, .about ul { margin: 0 0 8px; }
.about ul { padding-left: 18px; }
.about a { color: var(--lit); }
.about-lead { font-size: 15px; color: var(--lit); }

/* ---------- first run: tour cards; look descriptions ---------- */
.tour-card { position: fixed; z-index: 60; width: 300px; padding: 12px 14px; background: rgba(28, 36, 42, .97); border: 1px solid var(--teal); box-shadow: 0 0 0 1px rgba(0,0,0,.3), 0 0 28px -6px rgba(64, 156, 255, .7); font: 400 13px/1.5 var(--font-sans); color: var(--teal); }
.tour-card[hidden] { display: none; }
.tour-card b { display: block; margin: 2px 0 4px; color: var(--lit); font-weight: 500; font-size: 14px; }
.tour-card p { margin: 0 0 10px; }
.tour-n { font-size: 11px; color: var(--teal-dim); }
.tour-btns { display: flex; justify-content: flex-end; gap: 6px; }
.tour-target { outline: 2px solid var(--lit) !important; outline-offset: 3px; box-shadow: 0 0 22px -4px rgba(64, 156, 255, .8); border-radius: 2px; }
.recipe-desc { margin: 2px 8px 6px; color: var(--lit); font: 400 13px var(--font-sans); }
/* white balance eyedropper, at the end of the Temperature label */
.param > .wb-pick { grid-area: label; justify-self: end; align-self: center; z-index: 3; margin-right: 8px; width: 22px; height: 22px; padding: 0; display: grid; place-items: center; border: 0; background: transparent; color: var(--teal-dim); cursor: pointer; }
.param > .wb-pick:hover, .param > .wb-pick:focus-visible { color: var(--teal); }

/* ---------- polish: contrast and slider tracks ---------- */
/* a deeper slate, so the pale teal reads at 5:1 or better everywhere (the area round the photo stays neutral grey) */
body {
  background:
    radial-gradient(ellipse 60% 42% at 50% 40%, rgba(255, 255, 255, 0.07), transparent 72%),
    linear-gradient(180deg, #4e555b 0%, #484f55 40%, #40464c 64%, #393f45 100%);
  background-attachment: fixed;
}
.adj.off .adj-t { opacity: 0.72; }
/* a hairline track under each value: where it sits in its range, filled from its neutral point (ticked when that's mid-range) */
.param { --tfill: var(--teal); --tbase: rgba(185, 229, 236, 0.2); --ttick: transparent; }
.param.mid-zero { --ttick: var(--teal-dim); }
.param:hover { --tfill: var(--lit); --tbase: rgba(185, 229, 236, 0.3); }
.param:has(> input[type=range])::after {
  content: ""; grid-area: value; align-self: end; height: 7px; margin: 0 6px 2px; pointer-events: none;
  background:
    linear-gradient(var(--ttick), var(--ttick)) var(--tz, 0%) 0 / 1px 7px no-repeat,
    linear-gradient(90deg, transparent min(var(--tz, 0%), var(--tp, 0%)), var(--tfill) min(var(--tz, 0%), var(--tp, 0%)) max(var(--tz, 0%), var(--tp, 0%)), transparent max(var(--tz, 0%), var(--tp, 0%))) 0 100% / 100% 2px no-repeat,
    linear-gradient(var(--tbase), var(--tbase)) 0 100% / 100% 2px no-repeat;
}
/* inside the tabs a section needs no title: the tab names it. A section that switches on and off keeps its switch;
   the open section's Reset lives in the tab bar */
#adjust .adj:not(:has(> summary .switch)) > summary { display: none; }
#adjust .adj > summary .adj-t { font-size: 0; }
#adjust .adj > summary .adj-t::before { content: "Effect"; font-size: 15px; color: var(--teal); }
#adjust .adj > summary .sec-reset { display: none; }
#settingsPanel:not(:has(#adjust .adj[open].changed)) .tab-reset { display: none; }
#settingsPanel:has(#adjust .adj[open].changed) .sec-more { margin-left: 0; }
.tab-reset { margin-left: auto; font-size: 13px; }
/* the tool's hint text is in its tooltip; the bar keeps its spacing */
.opt-hint { visibility: hidden; }
#sFile { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

/* ---------- film strip: every open photo, under the steps ---------- */
.app { grid-template-rows: auto auto minmax(0, 1fr) auto auto auto;
  grid-template-areas: "menu menu menu" "opts opts opts" "tools view panels" "tools strip panels" "tools film panels" "status status status"; }
.app:has(> #photoStrip[hidden]) { grid-template-rows: auto auto minmax(0, 1fr) auto 0 auto; row-gap: 10px; }
.app:has(> #photoStrip[hidden]) > .statusbar { margin-top: -10px; }
.app.focus-full.focus-full { grid-template-rows: 0 0 minmax(0, 1fr) 0 0 0; }
.filmstrip { grid-area: film; min-width: 0; display: flex; flex-direction: column; gap: 6px; padding: 8px 0 0; box-shadow: inset 0 1px 0 var(--teal-faint); }
.filmstrip[hidden] { display: none; }
.film-head { display: flex; align-items: center; gap: 14px; min-width: 0; height: 26px; }
.film-title { font: 500 13px var(--font-sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--teal); white-space: nowrap; }
.film-title b { font-weight: 400; color: var(--teal-dim); margin-left: 4px; letter-spacing: 0; }
.film-sel { font-size: 13px; color: var(--lit); text-shadow: var(--lit-glow); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.film-actions { margin-left: auto; display: flex; gap: 6px; flex: none; }
.film-tiles { display: flex; gap: 8px; overflow-x: auto; padding: 3px 3px 6px; scrollbar-width: thin; }
.filmstrip .photo-tile { width: 92px; height: 62px; flex: none; position: relative; display: grid; place-items: center; padding: 0; overflow: visible;
  background: rgba(185, 229, 236, 0.06); border: 0; box-shadow: inset 0 0 0 1px var(--teal-faint); cursor: pointer; opacity: 0.85; transition: opacity .15s, box-shadow .2s var(--ease-out); }
.filmstrip .photo-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.filmstrip .photo-tile:hover { opacity: 1; box-shadow: 0 0 0 1px rgba(200, 238, 255, 0.8), 0 0 14px -4px rgba(64, 156, 255, 0.6); }
.filmstrip .photo-tile[aria-current=true] { opacity: 1; box-shadow: 0 0 0 2px var(--lit), 0 0 16px -3px rgba(64, 156, 255, 0.8); }
.filmstrip .photo-tile.picked { opacity: 1; outline: 0; box-shadow: 0 0 0 2px var(--teal); }
.filmstrip .photo-tile.picked[aria-current=true] { box-shadow: 0 0 0 2px var(--lit), 0 0 16px -3px rgba(64, 156, 255, 0.8); }
.photo-ext { font: 500 11px var(--font-sans); color: var(--teal-dim); letter-spacing: 0.06em; }
/* the group check: a ring on hover, filled when the photo is in the group */
.photo-pick { position: absolute; top: 4px; left: 4px; width: 18px; height: 18px; border-radius: 50%; box-sizing: border-box;
  border: 1.5px solid rgba(228, 248, 251, 0.9); background: rgba(30, 38, 44, 0.55); opacity: 0; transition: opacity .12s; }
.photo-tile:hover .photo-pick, .photo-tile.picked .photo-pick { opacity: 1; }
.photo-tile.picked .photo-pick { background: var(--lit) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5 9.3l2.6 2.6L13 6.5' fill='none' stroke='%231c2a33' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat; border-color: var(--lit); }
.photo-pick:hover { border-color: #fff; }
.filmstrip .photo-x { top: 4px; right: 4px; width: 18px; height: 18px; font-size: 13px; }
/* the × drawn, not typed: a text × sits wherever the font puts it, never quite in the middle of its box */
.photo-x { font-size: 0 !important; display: flex !important; align-items: center; justify-content: center; padding: 0; }
.photo-x::before { content: ""; flex: none; width: 10px; height: 10px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 2l8 8M10 2l-8 8' stroke='black' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 2l8 8M10 2l-8 8' stroke='black' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.filmstrip .photo-edited { right: 5px; bottom: 5px; }
@media (max-width: 900px) {
  .app, .app:has(> #photoStrip[hidden]) { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; grid-template-areas: "menu" "opts" "tools" "view" "strip" "film" "panels" "status"; padding: 12px 14px; column-gap: 0; }
  .film-head { flex-wrap: wrap; height: auto; }
  .film-actions { margin-left: 0; flex-wrap: wrap; }
}
/* the look's name never shrinks to a letter: when the buttons don't fit beside it, they drop to a line of their own */
#settingsPanel .panel-h { flex-wrap: wrap; row-gap: 6px; }
#settingsPanel .panel-h .look-title { flex: 0 1 auto; min-width: min(100%, 9em); overflow: hidden; text-overflow: ellipsis; }

/* ---------- photos as a column beside the tools (wide screens): the steps keep the width under the photo ---------- */
@media (min-width: 901px) {
  .app {
    grid-template-columns: 52px 132px minmax(0, 1fr) 380px; grid-template-rows: auto auto minmax(0, 1fr) auto auto;
    grid-template-areas: "menu menu menu menu" "opts opts opts opts" "tools film view panels" "tools film strip panels" "status status status status";
  }
  .app:has(> #photoStrip[hidden]) {
    grid-template-columns: 52px minmax(0, 1fr) 380px; grid-template-rows: auto auto minmax(0, 1fr) auto auto;
    grid-template-areas: "menu menu menu" "opts opts opts" "tools view panels" "tools strip panels" "status status status";
  }
  .app:has(> #photoStrip[hidden]) > .statusbar { margin-top: 0; }
  /* Tab (panels off) and full screen leave just the photo */
  #app.panels-off.panels-off, #app.focus-full.focus-full {
    grid-template-areas: "menu menu menu" "opts opts opts" "tools view panels" "tools strip panels" "status status status";
  }
  #app.panels-off.panels-off { grid-template-columns: 0 minmax(0, 1fr) 0; column-gap: 0; }
  #app.focus-full.focus-full { grid-template-columns: 0 minmax(0, 1fr) 0; grid-template-rows: 0 0 minmax(0, 1fr) 0 0; }
  #app.panels-off > .filmstrip { display: none; }

  .filmstrip { flex-direction: column; gap: 8px; min-height: 0; padding: 0 0 2px; box-shadow: none; }
  .film-head { flex-direction: column; align-items: flex-start; gap: 2px; height: auto; flex: none; }
  .film-sel { font-size: 12px; white-space: normal; }
  .film-tiles { flex: 1 1 0; min-height: 0; flex-direction: column; gap: 8px; overflow-x: hidden; overflow-y: auto; padding: 3px; }
  .filmstrip .photo-tile { width: 100%; height: 80px; }
  .film-actions { flex: none; display: flex; flex-direction: column; gap: 6px; margin: 0; padding-top: 8px; box-shadow: inset 0 1px 0 var(--teal-faint); }
  .film-actions .btn { width: 100%; justify-content: center; font-size: 12px; padding-left: 4px; padding-right: 4px; }
}
@media (max-width: 900px) {
  .film-actions { display: flex; flex-wrap: wrap; gap: 6px; }
}

/* ---------- before the first photo: the whole workspace, waiting ----------
   Everything is in place from the start (as Lightroom opens straight into its workspace), so the first photo fills
   it in instead of rebuilding the screen. Until then the controls are dimmed and inert; the canvas asks for a photo. */
.app.no-photo > .tools, .app.no-photo > .lookstrip, .app.no-photo > .panels,
.app.no-photo .optionsbar > :not(.opt-grow) { opacity: 0.38; pointer-events: none; filter: saturate(0.6); }
/* the value sits exactly over the middle of its track; its unit hangs just after it, so it doesn't push the number off centre */
.param .num { position: relative; }
.param .num input { text-align: center; }
.param .num i { position: absolute; left: 100%; top: 50%; transform: translateY(-45%); margin-left: 1px; }
.param .num input { field-sizing: content; width: auto; min-width: 1ch; max-width: 7ch; }

/* the look's header is one line: its name, how many settings changed, then three quiet icons (What it does, Randomise, Reset) */
#settingsPanel .panel-h { flex-wrap: nowrap; align-items: center; }
#settingsPanel .panel-h .look-title { min-width: 0; }
#settingsPanel .panel-h #adjMeta { margin-left: auto; white-space: nowrap; }
.look-icons { display: flex; gap: 2px; margin-left: 10px; flex: none; }
#adjMeta:empty + .look-icons { margin-left: auto; }
.icon-btn { width: 26px; height: 26px; padding: 0; display: grid; place-items: center; background: none; border: 0; color: var(--teal-dim); cursor: pointer; }
.icon-btn::before { content: ""; width: 18px; height: 18px; background: currentColor; -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; }
.icon-btn:hover, .icon-btn[aria-pressed=true] { color: var(--lit); filter: drop-shadow(0 0 6px rgba(150, 215, 255, 0.6)); }
.icon-btn[hidden] { display: none; }
.recipe-btn.icon-btn { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10' cy='10' r='7.5'/%3E%3Cpath d='M10 9v4.5'/%3E%3Ccircle cx='10' cy='6.4' r='.4' fill='black'/%3E%3C/svg%3E"); }
.vary-btn.icon-btn { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='14' height='14' rx='3'/%3E%3Ccircle cx='7' cy='7' r='.9' fill='black'/%3E%3Ccircle cx='13' cy='13' r='.9' fill='black'/%3E%3Ccircle cx='10' cy='10' r='.9' fill='black'/%3E%3Ccircle cx='13' cy='7' r='.9' fill='black'/%3E%3Ccircle cx='7' cy='13' r='.9' fill='black'/%3E%3C/svg%3E"); }
.adj-reset.icon-btn { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8.5h8a4.5 4.5 0 0 1 0 9H8'/%3E%3Cpath d='M7 5 3.8 8.5 7 12'/%3E%3C/svg%3E"); }
/* each thumbnail fills its tile exactly, whatever the photo's shape (portrait photos spilled into the next tile) */
.filmstrip .photo-tile { overflow: hidden; }
.filmstrip .photo-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* the free demo (tools/demo.sh): locked looks show their colours and a lock, and a way to the full app sits by the name */
.lookstrip .row-item.locked { color: var(--teal-dim); }
.lookstrip .row-item.locked .th { position: relative; opacity: 0.45; filter: saturate(0.6); }
.lookstrip .row-item.locked::after {
  content: ""; position: absolute; top: 23px; left: 50%; width: 20px; height: 20px; margin-left: -10px; background: var(--lit);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4.5' y='9' width='11' height='8' rx='1.5'/%3E%3Cpath d='M7 9V6.5a3 3 0 0 1 6 0V9'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4.5' y='9' width='11' height='8' rx='1.5'/%3E%3Cpath d='M7 9V6.5a3 3 0 0 1 6 0V9'/%3E%3C/svg%3E") center / contain no-repeat;
}
.lookstrip .row-item.locked:hover .th { opacity: 0.7; }
.demo-buy { display: inline-flex; align-items: center; gap: 10px; padding: 0 12px 12px 0; font: 400 13px var(--font-sans); color: var(--lit); text-decoration: none; }
.demo-buy:hover { text-shadow: var(--lit-glow); }
.demo-chip { padding: 2px 8px; font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; background: var(--bar); box-shadow: var(--bar-edge); }
.pasteboard .demo-mark { position: absolute; z-index: 2; pointer-events: none; transform-origin: 50% 50%; }

/* the open step's own controls, beside Grid / Back / Next: hold the eye to see the photo without the step */
.seq-peek { width: 30px; padding: 0; display: grid; place-items: center; }
.seq-peek::before { content: ""; display: block; width: 18px; height: 18px; margin: 0; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1.8 10s3-5.5 8.2-5.5S18.2 10 18.2 10s-3 5.5-8.2 5.5S1.8 10 1.8 10z'/%3E%3Ccircle cx='10' cy='10' r='2.5'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1.8 10s3-5.5 8.2-5.5S18.2 10 18.2 10s-3 5.5-8.2 5.5S1.8 10 1.8 10z'/%3E%3Ccircle cx='10' cy='10' r='2.5'/%3E%3C/svg%3E") center / contain no-repeat; }
.seq-peek:active { color: var(--lit); background: var(--bar); box-shadow: var(--bar-glow); }
.look-icons .icon-btn { margin: 0; }
.look-icons .recipe-btn[aria-pressed=true] { background: none; box-shadow: none; }
#settingsPanel .panel-h #adjMeta { display: none; }   /* "(modified)" is in the name, and each changed setting is marked */
#settingsPanel .panel-h .look-icons { margin-left: auto; }

/* ---------- the picker: the open step's options (or the presets) as a grid in the side panel ---------- */
.picker { padding: 4px 0 10px; margin: 0 0 6px; box-shadow: inset 0 -1px 0 var(--teal-faint); }
.picker:not(:has(> :not([hidden]):not(.empty))) { display: none; }
.picker .seq-groups, .picker .strip-cats { display: flex; flex-wrap: wrap; gap: 2px 2px; overflow: visible; margin: 0 4px 8px; }
.picker .seq-groups[hidden] { display: none; }
.picker .seq-opts, .picker .strip-scroll {
  display: block; max-height: min(46vh, 440px); overflow-x: hidden; overflow-y: auto; padding: 4px 6px 6px;
  scroll-snap-type: none; scrollbar-width: thin;
}
.picker .seq-opts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 8px; align-content: start; }
.picker .seq-opts[hidden] { display: none; }
.picker .strip-set { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 8px; }
.picker .strip-set + .strip-set { margin-top: 14px; padding: 14px 0 0; background: none; box-shadow: inset 0 1px 0 var(--teal-faint); }
.picker .seq-opt, .picker .row-item { width: auto; min-width: 0; }
.picker .seq-opt .th, .picker .row-item .th { height: auto; aspect-ratio: 3 / 2; }
.picker .seq-opt .nm, .picker .row-item .nm { font-size: 12.5px; }
.picker .row-item .pips { top: auto; bottom: 26px; }
/* the step strip under the photo keeps just the steps and Back / Next */
.lookstrip:not(.picker) .seq-head { justify-content: flex-end; margin: 4px 0 0; }
#picker.seq-step .strip-cats, #picker.seq-step .strip-scroll, #picker.seq-step .empty { display: none; }
/* under the photo: the steps and Back / Next on one line */
.lookstrip:not(.picker) { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.lookstrip:not(.picker) .seq-tabs { flex: 1 1 auto; min-width: 0; margin: 0; }
.lookstrip:not(.picker) .seq-head { margin: 0; flex: none; }
.lookstrip:not(.picker) .strip-meta { display: none; }
.lookstrip:not(.picker) .seq-head { margin-left: auto; }
.picker .seq-opts, .picker .strip-scroll { max-height: min(36vh, 400px); }
#picker:not(.seq-step) .seq-groups { display: none; }

/* ---------- the steps read as a path: Presets (optional start) | Base › Colour › … › Export ---------- */
.seq-tabs { align-items: stretch; gap: 0; }
.seq-tab { padding: 6px 10px 7px; }
.seq-tab.passed { box-shadow: inset 0 -2px 0 var(--teal); }
.seq-tab.passed .seq-name { color: var(--teal); }
.seq-tab.set .seq-name::after, .seq-tab.edited .seq-name::after {   /* the step holds something */
  content: ""; display: inline-block; width: 5px; height: 5px; margin-left: 6px; vertical-align: 3px; border-radius: 50%;
  background: var(--lit); box-shadow: 0 0 6px rgba(150, 215, 255, 0.8);
}
.seq-sep { flex: none; width: 14px; align-self: stretch; box-shadow: inset 0 -2px 0 var(--teal-faint); position: relative; }
.seq-sep.passed { box-shadow: inset 0 -2px 0 var(--teal); }
.seq-sep::before {
  content: ""; position: absolute; left: 2px; top: 50%; width: 10px; height: 14px; margin-top: -8px; background: var(--teal-dim); opacity: .7;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 14'%3E%3Cpath d='M3 2l5 5-5 5' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 14'%3E%3Cpath d='M3 2l5 5-5 5' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.seq-sep.passed::before { background: var(--teal); opacity: 1; }
/* Presets stands apart: a starting point, not a step you have to pass */
.seq-sep-start { width: 22px; box-shadow: none; }
.seq-sep-start::before { left: 10px; width: 1px; height: 18px; margin-top: -10px; -webkit-mask: none; mask: none; background: var(--teal-faint); opacity: 1; }
#seqNext::after { content: "›"; margin-left: 6px; font-size: 15px; line-height: 0; }
/* the open step's eye and Reset sit with its options */
.picker-tools { display: flex; justify-content: flex-end; gap: 6px; margin: 0 4px 6px; float: right; }
#picker:not(.seq-step) .picker-tools { display: none; }
.picker .seq-groups { margin-right: 4px; }
#seqBack { width: 30px; padding: 0; font-size: 16px; }
.seq-tab { padding: 6px 9px 7px; }
.seq-sep { width: 12px; }
.seq-sep::before { left: 1px; }
.lookstrip:not(.picker) { flex-wrap: nowrap; }
.lookstrip:not(.picker) .seq-tabs { overflow-x: auto; }
/* in a step the panel is just the chosen effect: the whole-look Amount and dials live on Presets, and an effect has no
   on/off row (None turns it off; moving a setting turns it on) */
#settingsPanel.step-mode #strengthRow, #settingsPanel.step-mode #basicRows { display: none; }
#adjust .adj > summary { display: none !important; }
/* hover is a quiet outline; only the chosen option is lit, so the two never look alike */
.picker .seq-opt:hover, .picker .row-item:hover { transform: none; }
.picker .seq-opt:not([aria-pressed=true]):hover .th, .picker .row-item:not([aria-pressed=true]):hover .th { outline-color: rgba(185, 229, 236, 0.7); box-shadow: none; }
.picker .seq-opt[aria-pressed=true] .nm::before, .picker .row-item[aria-pressed=true] .nm::before { content: "✓ "; }
/* group and category chips: one line beside the step's eye and Reset (scrolling sideways if there are many), no counts */
.picker .seq-groups, .picker .strip-cats { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
.picker .seq-groups::-webkit-scrollbar, .picker .strip-cats::-webkit-scrollbar { display: none; }
.picker .strip-cat { flex: none; white-space: nowrap; }
.picker .strip-cat .n { display: none; }
.picker .strip-browse { margin-left: auto; }
.picker .seq-groups.more, .picker .strip-cats.more { -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
.picker .seq-groups.more.end, .picker .strip-cats.more.end { -webkit-mask-image: none; mask-image: none; }
/* the picker is a header row (chips left, the step's eye and Reset right) over a full-width grid, so the tools
   never squeeze the thumbnails */
.picker { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 6px; align-items: start; }
.picker > * { grid-column: 1 / -1; }
.picker > .seq-groups { grid-column: 1; grid-row: 1; }
.picker > .picker-tools { grid-column: 2; grid-row: 1; float: none; margin: 0 4px 8px 0; }
.picker > .seq-opts, .picker > .strip-cats, .picker > .strip-scroll, .picker > .empty { grid-row: auto; }
/* names wrap to two lines instead of being cut off */
.picker .seq-opt .nm, .picker .row-item .nm { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.25; }
/* the film kit is one section in two steps: its LUT belongs to Colour, its texture and grain to Grain & texture */
#settingsPanel[data-step="texture"] .param:has(#c-anLut), #settingsPanel[data-step="texture"] .param:has(#c-anLutAmt) { display: none; }
/* texture is one control, the Texture row in Grain: the Film section keeps only its grain and LUT */
#adjust .param:has(#c-anTex) { display: none; }
.tex-rows .param[hidden] { display: none; }
#settingsPanel[data-step="colour"] .param:has(#c-anTex), #settingsPanel[data-step="colour"] .param:has(#c-anTexAmt), #settingsPanel[data-step="colour"] .param:has(#c-anBase) { display: none; }

/* ---------- the stepper, at the top of the side panel: STEP ┊ ‹ Grain & texture ›, and the path as segments ---------- */
.stepper { margin: 0 0 10px; }
.step-row { display: grid; grid-template-columns: calc(var(--split) - 12px) 1px 34px minmax(0, 1fr) 34px; align-items: center; height: 42px; padding-left: 12px;
  background: var(--bar); box-shadow: var(--bar-glow); }
.step-l { font: 500 11px var(--font-sans); letter-spacing: 0.18em; color: var(--teal-dim); }
.step-dv { align-self: stretch; background: var(--dots); width: 1px; }
.step-name { text-align: center; font: 500 16px var(--font-sans); color: var(--lit); text-shadow: var(--lit-glow); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.step-chev { align-self: stretch; padding: 0; border: 0; background: transparent; cursor: pointer; color: var(--lit); font-size: 0; }
.step-chev::before { content: ""; display: block; width: 11px; height: 22px; margin: auto; background: currentColor;
  -webkit-mask: var(--chev-l) center / contain no-repeat; mask: var(--chev-l) center / contain no-repeat; }
#stepNext::before { -webkit-mask-image: var(--chev-r); mask-image: var(--chev-r); }
.step-chev:disabled { opacity: 0.3; cursor: default; }
.step-chev:not(:disabled):hover { filter: drop-shadow(0 0 6px rgba(150, 215, 255, 0.8)); }
.step-track { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 4px; padding: 8px 12px 0; }
.step-sg { padding: 0; border: 0; background: transparent; cursor: pointer; display: flex; flex-direction: column; align-items: stretch; gap: 5px; min-width: 0; }
.step-sg i { display: block; height: 3px; background: var(--teal-faint); transition: background-color .15s, box-shadow .2s var(--ease-out); }
.step-sg span { font: 400 10px var(--font-sans); color: var(--teal-dim); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.step-sg.done i { background: var(--teal); }
.step-sg.cur i { background: var(--lit); box-shadow: 0 0 8px rgba(150, 215, 255, 0.9); }
.step-sg.cur span { color: var(--lit); font-weight: 500; }
.step-sg:hover i { background: var(--teal); }
.step-sg:hover span { color: var(--lit); }

/* ---------- layout: the steps live in the side panel; open photos run along the bottom, under the photo ---------- */
@media (min-width: 901px) {
  .app, .app:has(> #photoStrip[hidden]) {
    grid-template-columns: 52px minmax(0, 1fr) 380px; grid-template-rows: auto auto minmax(0, 1fr) auto auto;
    grid-template-areas: "menu menu menu" "opts opts opts" "tools view panels" "film film panels" "status status status";
  }
  .app:has(> #photoStrip[hidden]) { grid-template-rows: auto auto minmax(0, 1fr) 0 auto; }
  .app:has(> #photoStrip[hidden]) > .statusbar { margin-top: -10px; }
  #app.panels-off.panels-off, #app.focus-full.focus-full {
    grid-template-areas: "menu menu menu" "opts opts opts" "tools view panels" "film film panels" "status status status";
  }
  #app.focus-full.focus-full { grid-template-rows: 0 0 minmax(0, 1fr) 0 0; }
  .lookstrip:not(.picker) { display: none !important; }   /* the old step bar: its steps are in the side panel now */

  .filmstrip { flex-direction: row; align-items: center; gap: 12px; padding: 8px 0 0; box-shadow: inset 0 1px 0 var(--teal-faint); min-height: 0; }
  .film-head { flex-direction: column; align-items: flex-start; gap: 2px; flex: none; height: auto; }
  .film-tiles { flex: 1 1 auto; min-width: 0; flex-direction: row; gap: 8px; overflow-x: auto; overflow-y: hidden; padding: 3px; }
  .filmstrip .photo-tile { width: 96px; height: 64px; flex: none; }
  .film-actions { flex: none; flex-direction: row; gap: 6px; padding-top: 0; box-shadow: none; }
  .film-actions .btn { width: auto; font-size: 12.5px; padding-left: 10px; padding-right: 10px; }
}
/* the track reads as tabs: each step is a target with its own hover, the line under it showing the path */
.step-track { gap: 2px; padding: 6px 0 0; }
.step-sg { gap: 0; padding: 0; }
.step-sg span { order: -1; font-size: 11.5px; padding: 6px 0 5px; color: var(--teal); transition: color .12s, background-color .12s; }
.step-sg i { height: 2px; }
.step-sg:hover span { background: rgba(24, 116, 214, 0.22); color: var(--lit); }
.step-sg:hover i { background: var(--teal); box-shadow: 0 0 6px rgba(150, 215, 255, 0.6); }
.step-sg.cur span { background: var(--bar); color: var(--lit); text-shadow: var(--lit-glow); box-shadow: inset 0 1px 0 rgba(176, 226, 255, 0.6); }
.step-sg:focus-visible { outline: 1px solid var(--teal); outline-offset: 1px; }

/* ---------- three places: photos on the left, finished looks under the photo, building and adjusting on the right ---------- */
@media (min-width: 901px) {
  .app {
    grid-template-columns: 52px 132px minmax(0, 1fr) 380px; grid-template-rows: auto auto minmax(0, 1fr) auto auto;
    grid-template-areas: "menu menu menu menu" "opts opts opts opts" "tools film view panels" "tools film strip panels" "status status status status";
  }
  .app:has(> #photoStrip[hidden]) {
    grid-template-columns: 52px minmax(0, 1fr) 380px; grid-template-rows: auto auto minmax(0, 1fr) auto auto;
    grid-template-areas: "menu menu menu" "opts opts opts" "tools view panels" "tools strip panels" "status status status";
  }
  .app:has(> #photoStrip[hidden]) > .statusbar { margin-top: 0; }
  #app.panels-off.panels-off, #app.focus-full.focus-full {
    grid-template-columns: 0 minmax(0, 1fr) 0; grid-template-areas: "menu menu menu" "opts opts opts" "tools view panels" "tools strip panels" "status status status";
  }
  #app.panels-off > .lookstrip:not(.picker) { display: none !important; }
  .lookstrip:not(.picker) { display: flex !important; flex-direction: column; align-items: stretch; gap: 6px; flex-wrap: nowrap; }
  .lookstrip:not(.picker) .seq-tabs, .lookstrip:not(.picker) .seq-head, .lookstrip:not(.picker) .strip-meta { display: none !important; }
  #lookStrip.seq-step .strip-cats { display: flex !important; }
  #lookStrip.seq-step .strip-scroll { display: flex !important; }
  /* the photos column again (vertical) */
  .filmstrip { flex-direction: column; gap: 8px; min-height: 0; padding: 0 0 2px; box-shadow: none; }
  .film-head { flex-direction: column; align-items: flex-start; gap: 2px; height: auto; flex: none; }
  .film-tiles { flex: 1 1 0; min-height: 0; flex-direction: column; gap: 8px; overflow-x: hidden; overflow-y: auto; padding: 3px; }
  .filmstrip .photo-tile { width: 100%; height: 80px; }
  .film-actions { flex: none; display: flex; flex-direction: column; gap: 6px; margin: 0; padding-top: 8px; box-shadow: inset 0 1px 0 var(--teal-faint); }
  .film-actions .btn { width: 100%; justify-content: center; font-size: 12px; padding-left: 4px; padding-right: 4px; }
}
.looks-bar { display: flex; align-items: center; gap: 14px; min-width: 0; padding-top: 6px; box-shadow: inset 0 1px 0 var(--teal-faint); }
.looks-title { font: 500 12px var(--font-sans); letter-spacing: 0.16em; color: var(--lit); flex: none; }
.looks-bar .strip-cats { flex: 1; min-width: 0; margin: 0; flex-wrap: nowrap; overflow: hidden; }
.looks-bar .strip-cat .n { display: none; }
.looks-bar .strip-browse { margin-left: auto; }

/* ---------- a look is a holo card: a foil edge, its name on a glass plate, a collection mark ---------- */
#lookStrip .strip-scroll { gap: 14px; padding: 8px 4px 10px; }
#lookStrip .strip-set { gap: 14px; }
#lookStrip .row-item {
  --foil: conic-gradient(from 210deg, #8fe9ff, #b49cff, #ff9fd1, #ffd99a, #9dffcf, #8fe9ff);
  position: relative; width: 104px; padding: 2px; border-radius: 3px; background: var(--foil); overflow: hidden; gap: 0;
  filter: saturate(0.7) brightness(0.96); transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out), filter .2s;
}
#lookStrip .row-item .th { height: auto; aspect-ratio: 4 / 5; border-radius: 2px; outline: 0; box-shadow: none; }
#lookStrip .row-item .sw, #lookStrip .row-item .pips, #lookStrip .row-item .led, #lookStrip .row-item .tag { display: none; }
#lookStrip .row-item .nm, #lookStrip .row-item .mk {
  position: absolute; left: 2px; right: 2px; z-index: 1; padding: 0 7px; color: #f2fbfd; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-transform: uppercase; pointer-events: none;
}
#lookStrip .row-item .nm { bottom: 16px; font: 500 10.5px var(--font-sans); letter-spacing: 0.12em; }
#lookStrip .row-item .mk { bottom: 4px; font: 400 8.5px var(--font-sans); letter-spacing: 0.16em; color: rgba(214, 240, 246, 0.75); }
#lookStrip .row-item::before {   /* the glass plate the name sits on */
  content: ""; display: block; position: absolute; left: 2px; right: 2px; bottom: 2px; height: 46px; z-index: 1; border-radius: 0 0 2px 2px; pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(12, 20, 26, 0.78) 45%, rgba(12, 20, 26, 0.92)); opacity: 1; transform: none; animation: none;
}
#lookStrip .row-item::after {   /* the light that sweeps across on hover */
  content: ""; position: absolute; inset: -30%; z-index: 2; pointer-events: none; opacity: 0;
  background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, 0.34) 48%, rgba(190, 230, 255, 0.1) 54%, transparent 62%);
  transform: translateX(-60%); transition: none; height: auto; width: auto; bottom: auto; box-shadow: none;
}
#lookStrip .row-item:hover { transform: translateY(-5px); filter: saturate(1); box-shadow: 0 14px 26px -12px rgba(0, 0, 0, 0.7), 0 0 22px -6px rgba(180, 156, 255, 0.55); background: var(--foil); }
#lookStrip .row-item:hover::after { opacity: 1; transform: translateX(60%); transition: transform .7s var(--ease-out), opacity .2s; }
#lookStrip .row-item[aria-pressed=true] {   /* the look you're using: lit, lifted, glowing */
  filter: saturate(1.1); transform: translateY(-3px); background: var(--foil);
  box-shadow: 0 0 0 1px rgba(228, 248, 251, 0.75), 0 0 24px -2px rgba(143, 233, 255, 0.75), 0 0 54px -12px rgba(180, 156, 255, 0.6);
}
#lookStrip .row-item[aria-pressed=true] .th { outline: 0; box-shadow: none; }
#lookStrip .row-item .fav { z-index: 3; }
#lookStrip .row-item:focus-visible { outline: 1px solid var(--lit); outline-offset: 2px; }
@media (min-width: 901px) { .filmstrip { align-items: stretch; } }

/* the plate sits at the bottom (an older rule pinned every row's ::before to the top) */
#lookStrip .row-item::before { top: auto; inset: auto 2px 2px 2px; width: auto; }
/* hover: holographic foil that shifts with the pointer, and a glare where the light catches it */
#lookStrip .row-item::after {
  inset: 2px; transform: none; opacity: 0; border-radius: 2px; z-index: 2; mix-blend-mode: color-dodge;
  background:
    radial-gradient(circle at var(--mx, 50%) var(--my, 30%), rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 42%),
    linear-gradient(115deg, transparent 18%, rgba(143, 233, 255, 0.55) 32%, rgba(180, 156, 255, 0.5) 42%, rgba(255, 159, 209, 0.5) 52%, rgba(255, 217, 154, 0.45) 62%, rgba(157, 255, 207, 0.4) 72%, transparent 86%)
      calc(100% - var(--mx, 50%)) calc(100% - var(--my, 30%)) / 260% 260% no-repeat;
  transition: opacity .25s var(--ease-out);
}
#lookStrip .row-item:hover::after { opacity: 0.85; transform: none; }
#lookStrip .row-item:hover { filter: saturate(1.15) brightness(1.04); }
#lookStrip .row-item:hover::after { opacity: 0.6; }
/* no line across the card: the plate inherited the lit bar's edge highlight */
#lookStrip .row-item::before { box-shadow: none; border: 0; }
/* pearl foil, not a rainbow: silver and pale teal, the interface's own light */
#lookStrip .row-item { --foil: conic-gradient(from 210deg, #e4f8fb, #8fbfcc, #d6eef5, #6f9aa6, #eaf7fa, #9fd0dc, #e4f8fb); }
#lookStrip .row-item::after {
  mix-blend-mode: soft-light;
  background:
    radial-gradient(circle at var(--mx, 50%) var(--my, 30%), rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0) 45%),
    linear-gradient(115deg, transparent 30%, rgba(228, 248, 251, 0.45) 46%, rgba(185, 229, 236, 0.2) 54%, transparent 68%)
      calc(100% - var(--mx, 50%)) calc(100% - var(--my, 30%)) / 240% 240% no-repeat;
}
#lookStrip .row-item:hover::after { opacity: 0.55; }
#lookStrip .row-item:hover { box-shadow: 0 14px 26px -12px rgba(0, 0, 0, 0.7), 0 0 20px -6px rgba(150, 215, 255, 0.5); }
#lookStrip .row-item[aria-pressed=true] { box-shadow: 0 0 0 1px rgba(228, 248, 251, 0.75), 0 0 22px -2px rgba(143, 233, 255, 0.6); }
/* ---------- premium: the looks as a display case ---------- */
.looks-bar { box-shadow: none; }
.looks-title { letter-spacing: 0.26em; }
.looks-title b { font-weight: 400; letter-spacing: 0; color: #5f8a94; margin-left: 8px; font-size: 11px; }
/* the tray the cards stand on: dark glass, a hairline of light along its top, the row fading out at either end */
#lookStrip .strip-scroll {
  gap: 16px; padding: 14px 18px 22px;
  background:
    linear-gradient(90deg, rgba(185, 229, 236, 0), rgba(185, 229, 236, 0.14) 30%, rgba(185, 229, 236, 0.14) 70%, rgba(185, 229, 236, 0)) top / 100% 1px no-repeat,
    radial-gradient(ellipse 60% 110% at 30% 100%, rgba(64, 156, 255, 0.09), transparent 70%),
    linear-gradient(180deg, rgba(8, 14, 18, 0.1), rgba(4, 8, 11, 0.5));
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 22px, #000 calc(100% - 56px), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 22px, #000 calc(100% - 56px), transparent);
}
#lookStrip .strip-set { gap: 16px; }
/* the card: a thinner, sharper foil whose shine turns toward the pointer */
#lookStrip .row-item {
  --foil: conic-gradient(from var(--ang, 210deg), #f4fdff 0deg, #8db7c3 50deg, #d9eef4 110deg, #5f8894 170deg, #e8f6f9 230deg, #93c4d0 300deg, #f4fdff 360deg);
  width: 108px; padding: 1.5px; border-radius: 4px; filter: none;
  transition: transform .45s cubic-bezier(.2, .9, .2, 1), box-shadow .45s cubic-bezier(.2, .9, .2, 1), filter .3s;
}
/* the photo set into the card: an inner frame and a soft vignette */
#lookStrip .row-item .th { position: relative; border-radius: 3px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22), inset 0 0 22px rgba(0, 0, 0, 0.45); }
#lookStrip .row-item::before { inset: auto 1.5px 1.5px 1.5px; height: 52px; border-radius: 0 0 3px 3px;
  background: linear-gradient(180deg, rgba(10, 16, 21, 0), rgba(10, 16, 21, 0.72) 42%, rgba(10, 16, 21, 0.94)); }
#lookStrip .row-item::after { inset: 1.5px; border-radius: 3px; }
#lookStrip .row-item:hover::after { opacity: 0.6; }
/* names in their own case so long ones fit; only the collection mark is set in capitals */
#lookStrip .row-item .nm { bottom: 17px; text-transform: none; font: 500 11px var(--font-sans); letter-spacing: 0.03em; padding: 0 8px; }
#lookStrip .row-item .mk { bottom: 5px; font-size: 8px; letter-spacing: 0.22em; color: rgba(214, 240, 246, 0.62); padding: 0 8px; }
/* hover: the card rises toward you and its edge catches the light */
#lookStrip .row-item:hover {
  transform: translateY(-7px) scale(1.025); filter: saturate(1.08) brightness(1.04);
  box-shadow: 0 22px 30px -16px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(228, 248, 251, 0.25), 0 0 26px -8px rgba(150, 215, 255, 0.55);
}
/* the look you're using: lit from beneath, a pool of light on the glass */
#lookStrip .row-item[aria-pressed=true] {
  transform: translateY(-4px); filter: none;
  box-shadow: 0 0 0 1px rgba(228, 248, 251, 0.85), 0 0 18px -2px rgba(143, 233, 255, 0.65), 0 18px 34px -10px rgba(64, 156, 255, 0.55);
}
#lookStrip .row-item[aria-pressed=true] .nm { color: #fff; text-shadow: 0 0 10px rgba(150, 215, 255, 0.8); }
@media (prefers-reduced-motion: reduce) { #lookStrip .row-item, #lookStrip .row-item:hover { transition: none; transform: none; } }

/* ---------- sliders: a marker where the value is, on every one; the zero point is a quiet tick behind it ---------- */
.param.mid-zero { --ttick: rgba(185, 229, 236, 0.35); }
.param:has(> input[type=range])::after {
  height: 9px;
  background:
    linear-gradient(var(--tfill), var(--tfill)) var(--tp, 0%) 100% / 2px 5px no-repeat,
    linear-gradient(var(--ttick), var(--ttick)) var(--tz, 0%) 100% / 1px 4px no-repeat,
    linear-gradient(90deg, transparent min(var(--tz, 0%), var(--tp, 0%)), var(--tfill) min(var(--tz, 0%), var(--tp, 0%)) max(var(--tz, 0%), var(--tp, 0%)), transparent max(var(--tz, 0%), var(--tp, 0%))) 0 100% / 100% 2px no-repeat,
    linear-gradient(var(--tbase), var(--tbase)) 0 100% / 100% 2px no-repeat;
}
/* the Colour step's Strength, under its options once a grade is picked */
.picker > .step-amt { margin: 10px 0 0; }
.picker > .step-amt[hidden] { display: none; }

/* ---------- the photos column: Photos 3 · All · + on top, two plain actions underneath ---------- */
.filmstrip .film-head { flex-direction: row; align-items: center; gap: 8px; height: 26px; flex: none; }
.film-add { flex: none; margin-left: auto; padding: 0; border: 0; background: none; color: var(--teal-dim); font: 400 13px var(--font-sans); cursor: pointer; }
/* the + is drawn, not typed: the font's plus sits low in its line, so a glyph is never quite centred in the box */
.film-add { width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; font-size: 0; }   /* flex: the (hidden) "+" text takes no row of its own */
.film-add::before { content: ""; width: 12px; height: 12px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M6 0v12M0 6h12' stroke='black' stroke-width='1.4'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M6 0v12M0 6h12' stroke='black' stroke-width='1.4'/%3E%3C/svg%3E") center / contain no-repeat; }
.film-add:hover::before, .film-add:focus-visible::before { filter: drop-shadow(0 0 4px rgba(150, 215, 255, 0.8)); }
.film-add:hover, .film-add:focus-visible { color: var(--lit); text-shadow: var(--lit-glow); }
.filmstrip .film-sel { flex: none; margin-top: -4px; }
.filmstrip .film-sel:empty { display: none; }
.filmstrip .film-actions { flex-direction: column; gap: 0; padding-top: 6px; }
.film-act { display: block; width: 100%; padding: 7px 2px; border: 0; background: none; text-align: left; color: var(--teal); font: 400 13px var(--font-sans); cursor: pointer; }
.film-act:hover, .film-act:focus-visible { color: var(--lit); text-shadow: var(--lit-glow); }

/* ---------- shuffle, not dice: a new variation of the look ---------- */
.seed-btn.icon-btn { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16.5 10a6.5 6.5 0 1 1-1.9-4.6'/%3E%3Cpath d='M16.5 2.5v3.5H13'/%3E%3C/svg%3E"); }
.vary-btn.icon-btn { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h2.5c3.5 0 5.5 8 9 8H17M3 14h2.5c1.4 0 2.5-1.3 3.4-3M11.1 9c.9-1.7 2-3 3.4-3H17M15 4l2 2-2 2M15 12l2 2-2 2'/%3E%3C/svg%3E"); }

/* ---------- research pass: conventions from Lightroom, Capture One, Darkroom, VSCO ---------- */
/* editing several photos together is a visible mode over the photo, with Done to end it (Capture One, Lightroom Auto Sync) */
.group-bar { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); z-index: 6; display: flex; align-items: center; gap: 14px;
  padding: 6px 8px 6px 14px; background: rgba(28, 58, 92, 0.92); box-shadow: 0 0 0 1px rgba(143, 233, 255, 0.55), 0 0 18px -4px rgba(64, 156, 255, 0.7);
  color: var(--lit); font: 500 13px var(--font-sans); white-space: nowrap; }
.group-bar[hidden] { display: none; }
.group-bar button { padding: 3px 10px; border: 0; background: rgba(228, 248, 251, 0.14); color: #fff; font: 500 12.5px var(--font-sans); cursor: pointer; }
.group-bar button:hover { background: rgba(228, 248, 251, 0.26); }
/* Reset all lives with the adjustments, away from Export (Lightroom's Reset at the foot of the Develop panel) */
.panel-foot { position: sticky; bottom: 0; z-index: 2; display: flex; justify-content: flex-end; padding: 10px 0 6px; margin-top: 8px;
  background: linear-gradient(180deg, rgba(64, 70, 76, 0), rgba(64, 70, 76, 0.94) 40%); }
/* the look's Amount sits with the looks (Lightroom's Amount above its presets, VSCO's strength on the strip) */
.looks-bar #strengthRow { flex: 0 0 200px; margin: 0 0 0 auto; padding: 0 0 0 8px; min-height: 28px; grid-template-columns: auto 22px minmax(0, 1fr) 22px; }
.looks-bar #strengthRow label { font-size: 13px; padding-right: 6px; }
.looks-bar #strengthRow[hidden] { display: none; }
.looks-bar:has(#strengthRow:not([hidden])) .strip-browse { margin-left: 0; }
/* the histogram is opt-in (View ▸ Histogram), as in looks-first editors */
#histPanel[hidden] { display: none; }
/* Shuffle says what it does; reset is a circular arrow, kept apart from undo's hook */
.look-icons .vary-btn.icon-btn { width: auto; grid-auto-flow: column; gap: 5px; padding: 0 6px 0 4px; font: 400 12.5px var(--font-sans); }
.look-icons .vary-btn.icon-btn::before { width: 16px; height: 16px; }
.adj-reset.icon-btn { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.2 11.5A6 6 0 1 0 5.8 5.8'/%3E%3Cpath d='M5.5 2.8v3.4h3.4'/%3E%3C/svg%3E"); }

/* ---------- room for the photo: the looks fold to their bar, and get smaller on short screens ---------- */
button.looks-title { padding: 0; border: 0; background: none; cursor: pointer; display: inline-flex; align-items: center; }
button.looks-title::after { content: ""; width: 7px; height: 7px; margin-left: 10px; border-right: 1.3px solid var(--teal-dim); border-bottom: 1.3px solid var(--teal-dim); transform: translateY(-2px) rotate(45deg); transition: transform .2s var(--ease-out); }
button.looks-title[aria-expanded=false]::after { transform: translateY(1px) rotate(-135deg); }
button.looks-title:hover, button.looks-title:focus-visible { color: #fff; text-shadow: var(--lit-glow); }
.looks-now { display: none; font: 400 14px var(--font-sans); color: var(--lit); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
#lookStrip.folded .looks-now { display: block; }
#lookStrip.folded .strip-cats, #lookStrip.folded .strip-scroll { display: none !important; }
#lookStrip.folded .looks-bar { padding-bottom: 4px; }
@media (max-height: 860px) {
  #lookStrip .strip-scroll { padding: 9px 14px 10px; gap: 10px; }
  #lookStrip .strip-set { gap: 10px; }
  #lookStrip .row-item { width: 72px; }
  #lookStrip .row-item .nm { font-size: 9.5px; bottom: 13px; padding: 0 5px; }
  #lookStrip .row-item .mk { font-size: 6.5px; bottom: 4px; padding: 0 5px; letter-spacing: 0.16em; }
  #lookStrip .row-item::before { height: 36px; }
  #lookStrip .row-item:hover { transform: translateY(-5px) scale(1.02); }
}
.looks-bar .strip-cats { align-items: center; }
.looks-bar .strip-cat { white-space: nowrap; }
.app.focus-full > .lookstrip, .app.focus-full > .lookstrip:not(.picker) { display: none !important; }   /* F: the photo alone */

/* ---------- the right panel in two levels: the path of steps, then the step (its options, then its effects) ----------
   One navigator (the STEP ‹ › pager did the same job as the tabs). The path reads as a flow, a dot marks each step
   that holds an edit (as Lightroom marks edited panels), and Next at the foot walks it for beginners. */
#stepper .step-row { display: none; }
#stepper .step-sg { flex: 1 1 0; position: relative; display: grid; place-items: center; margin-right: -6px; padding: 0 4px 0 10px;
  background: rgba(185, 229, 236, 0.07); clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 50%, calc(100% - 9px) 100%, 0 100%, 9px 50%); transition: background-color .15s; }
#stepper .step-sg:first-child { padding-left: 4px; clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 50%, calc(100% - 9px) 100%, 0 100%); }
#stepper .step-sg:last-child { margin-right: 0; }
#stepper .step-sg i { display: none; }
#stepper .step-sg span { order: 0; padding: 0; background: none !important; box-shadow: none !important; font: 400 12.5px var(--font-sans); color: var(--teal-dim); text-shadow: none; }
#stepper .step-sg:hover { background: rgba(185, 229, 236, 0.14); }
#stepper .step-sg:hover span { color: var(--lit); }
#stepper .step-sg.cur { background: linear-gradient(180deg, rgba(58, 150, 240, 0.62), rgba(16, 96, 196, 0.52)); }
#stepper .step-sg.cur span { color: #fff; font-weight: 500; text-shadow: var(--lit-glow); }
#stepper .step-sg.ed::after { content: ""; position: absolute; bottom: 5px; left: 50%; width: 4px; height: 4px; margin-left: 1px; border-radius: 50%; background: var(--teal); }
#stepper .step-sg.cur.ed::after { background: #fff; }
/* the step's effects: each a section that opens and closes in place, one open at a time (Lightroom's Solo mode) */
#adjust .adj:not(.shown) { display: none; }
#adjust .adj.shown { box-shadow: inset 0 1px 0 var(--teal-faint); }
#adjust .adj.shown > summary { display: flex !important; align-items: center; gap: 8px; height: 36px; padding: 0 8px 0 12px; cursor: pointer; }
#adjust .adj.shown > summary:hover::before { opacity: 1; transform: scaleX(1); background: rgba(185, 229, 236, 0.07); box-shadow: none; }
#adjust .adj.shown > summary .adj-t { font: 400 14px var(--font-sans); color: var(--teal); display: inline-flex; align-items: center; }
#adjust .adj.shown[open] > summary .adj-t { color: var(--lit); font-weight: 500; }
#adjust .adj.shown > summary .adj-t::before { content: ""; width: 6px; height: 6px; margin: 0 11px 0 1px; font-size: 0; border-right: 1.3px solid var(--teal-dim); border-bottom: 1.3px solid var(--teal-dim);
  transform: rotate(-45deg); transition: transform .2s var(--ease-out); }
#adjust .adj.shown[open] > summary .adj-t::before { transform: translateY(-2px) rotate(45deg); }
#adjust .adj.shown > summary .switch { margin: 0 0 0 auto; }
#adjust .adj.shown.changed > summary .sec-reset { display: inline-block; margin-left: auto; font: 400 12.5px var(--font-sans); color: var(--teal-dim); background: none; border: 0; padding: 4px 6px; cursor: pointer; }
#adjust .adj.shown.changed > summary .sec-reset:hover { color: var(--lit); }
#adjust .adj.shown.changed > summary .sec-reset + .switch { margin-left: 4px; }
#adjust .adj.shown[open] { padding-bottom: 6px; }
/* ＋ More … settings, after the effects it adds to */
#secTabs { margin: 0; padding: 0; box-shadow: inset 0 1px 0 var(--teal-faint); }
#secTabs .sec-more { margin: 0; padding: 9px 12px; border: 0; background: none; box-shadow: none; font: 400 13px var(--font-sans); color: var(--teal-dim); cursor: pointer; text-align: left; }
#secTabs .sec-more:hover { color: var(--lit); }
/* the panel's foot: Reset all on the right */
.panel-foot { justify-content: space-between; gap: 8px; }
.panel-foot .reset-btn { margin-left: auto; }
#adjust .adj.shown > summary { background: none; }
#adjust .adj.shown:not([open]) { display: block; }   /* closed sections show their header (style.css hid them for tabs) */

/* a narrow looks bar (small window, or the photos column beside it) puts the categories on their own line instead of
   squeezing them out */
#lookStrip { container-type: inline-size; container-name: looks; }
@container looks (max-width: 680px) {
  .looks-bar { flex-wrap: wrap; row-gap: 2px; }
  .looks-bar .strip-cats { order: 3; flex: 1 1 100%; }
}
/* small cards show the name alone, on up to two lines (the collection mark is decoration; Lightroom and VSCO show just the name) */
@media (max-height: 860px) {
  #lookStrip .row-item .mk { display: none; }
  #lookStrip .row-item .nm { bottom: 5px; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.2; letter-spacing: 0.02em; }
}
/* the step's eye, off: lit, and crossed through */
.seq-peek[aria-pressed=true] { color: var(--lit); background: var(--bar); box-shadow: var(--bar-glow); }
.seq-peek[aria-pressed=true]::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1.8 10s3-5.5 8.2-5.5S18.2 10 18.2 10s-3 5.5-8.2 5.5S1.8 10 1.8 10z'/%3E%3Ccircle cx='10' cy='10' r='2.5'/%3E%3Cpath d='M3 17 17 3'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1.8 10s3-5.5 8.2-5.5S18.2 10 18.2 10s-3 5.5-8.2 5.5S1.8 10 1.8 10z'/%3E%3Ccircle cx='10' cy='10' r='2.5'/%3E%3Cpath d='M3 17 17 3'/%3E%3C/svg%3E"); }
.filmstrip .film-actions[hidden] { display: none; }

/* ---------- tools at the start of the options bar: Hand, Crop and Frame sit with Fit/Fill/100%/200% and Before/Split,
   right above the photo they act on (New seed is with the look, beside Shuffle) ---------- */
.optionsbar > .tools { flex: none; display: flex; flex-direction: row; align-items: center; gap: 2px; padding: 0; margin-right: 2px; }
.optionsbar > .tools::before, .optionsbar > .tools hr { display: none; }
.optionsbar > .tools .tool { width: 40px; height: 30px; padding: 0; justify-content: center; gap: 0; }
.optionsbar > .tools .tool-name, .optionsbar > .tools .tool-key { display: none; }
.optionsbar > .opt-tool { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.app.no-photo .optionsbar > .tools { opacity: 0.38; pointer-events: none; filter: saturate(0.6); }
@media (min-width: 901px) {
  .app {
    grid-template-columns: 132px minmax(0, 1fr) 380px;
    grid-template-areas: "menu menu menu" "opts opts opts" "film view panels" "film strip panels" "status status status";
  }
  .app:has(> #photoStrip[hidden]) {
    grid-template-columns: minmax(0, 1fr) 380px;
    grid-template-areas: "menu menu" "opts opts" "view panels" "strip panels" "status status";
  }
  #app.panels-off.panels-off, #app.focus-full.focus-full {
    grid-template-columns: 0 minmax(0, 1fr) 0; grid-template-areas: "menu menu menu" "opts opts opts" "film view panels" "film strip panels" "status status status";
  }
  #app.focus-full.focus-full > .filmstrip { display: none; }
}
/* while cropping, the crop's own controls need the bar: Before and Split step aside until it's applied */
.optionsbar:has(#cropOpts:not([hidden])) :is(#beforeBtn, #splitBtn, .opt-sep:has(+ #beforeBtn)) { display: none; }

/* ---------- the steps as the look's recipe: a row per step saying what's in it, the current one open in place ---------- */
#stepper .step-track { display: block; height: auto; margin: 2px 0 0; padding: 0; }
/* the card: a tile per step, all the same size, four to a row; filled tiles have a brighter outline, empty ones dimmed
   ("+ Add"), the open one is the lit bar */
.rc-card { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; padding: 2px 6px 8px; }
.rc-row { position: relative; display: grid; grid-template-rows: auto 1fr; gap: 2px; min-width: 0; height: 58px; padding: 6px 6px 5px; border: 0;
  background: none; text-align: left; cursor: pointer; color: rgba(185, 229, 236, 0.5); box-shadow: inset 0 0 0 1px rgba(185, 229, 236, 0.18); }
.rc-top { display: flex; align-items: center; gap: 5px; min-width: 0; }
.rc-row svg, .rc-tab svg { flex: none; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.rc-row svg .dots, .rc-tab svg .dots { fill: currentColor; stroke: none; }
.rc-row b { font: 400 9px var(--font-sans); letter-spacing: 0.14em; white-space: nowrap; overflow: hidden; }
.rc-sum { align-self: end; font: 400 12px/1.15 var(--font-sans); color: var(--lit); overflow: hidden; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.rc-row.empty { opacity: 0.62; }
.rc-row.empty .rc-sum { color: var(--teal); }
.rc-row.used { color: var(--teal); box-shadow: inset 0 0 0 1px rgba(185, 229, 236, 0.42); }
.rc-row:hover { background: rgba(24, 116, 214, 0.18); color: #fff; opacity: 1; }
.rc-row.cur { background: var(--bar); box-shadow: var(--bar-glow); color: #fff; opacity: 1; cursor: default; }
.rc-row.cur .rc-sum { color: #fff; text-shadow: var(--lit-glow); }
.rc-row:focus-visible, .rc-tab:focus-visible { outline: 1px solid var(--teal); outline-offset: -1px; }
/* a filled tile's eye shows on hover, in its top corner: it hides the step to compare */
.rc-row .rc-eye { display: none; position: absolute; top: 3px; right: 3px; width: 17px; height: 17px; background: var(--teal); cursor: pointer;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1.8 10s3-5.5 8.2-5.5S18.2 10 18.2 10s-3 5.5-8.2 5.5S1.8 10 1.8 10z'/%3E%3Ccircle cx='10' cy='10' r='2.5'/%3E%3C/svg%3E") center / 14px no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1.8 10s3-5.5 8.2-5.5S18.2 10 18.2 10s-3 5.5-8.2 5.5S1.8 10 1.8 10z'/%3E%3Ccircle cx='10' cy='10' r='2.5'/%3E%3C/svg%3E") center / 14px no-repeat; }
.rc-row.used:not(.cur):hover .rc-eye, .rc-row.peek .rc-eye { display: block; }
.rc-row .rc-eye:hover { background: #fff; }
.rc-row.peek .rc-eye { background: #8fe9ff; -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1.8 10s3-5.5 8.2-5.5S18.2 10 18.2 10s-3 5.5-8.2 5.5S1.8 10 1.8 10z'/%3E%3Ccircle cx='10' cy='10' r='2.5'/%3E%3Cpath d='M3 17 17 3'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1.8 10s3-5.5 8.2-5.5S18.2 10 18.2 10s-3 5.5-8.2 5.5S1.8 10 1.8 10z'/%3E%3Ccircle cx='10' cy='10' r='2.5'/%3E%3Cpath d='M3 17 17 3'/%3E%3C/svg%3E"); }
.rc-row.peek .rc-sum { opacity: 0.45; text-decoration: line-through; text-decoration-color: rgba(185, 229, 236, 0.5); }
/* the strip: the card folded while you're in a step's settings, pinned to the top of the panel (it takes no room in
   the flow, so folding never moves what you're looking at) */
.rc-strip { position: sticky; top: 0; z-index: 3; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; height: 38px; margin-bottom: -38px;
  padding: 4px 6px; background: #3f464c; box-shadow: inset 0 -1px 0 rgba(185, 229, 236, 0.2), 0 8px 14px -8px rgba(0, 0, 0, 0.5);
  visibility: hidden; opacity: 0; transition: opacity 0.12s, visibility 0s 0.12s; }
.rc-strip.on { visibility: visible; opacity: 1; transition: opacity 0.12s; }
.rc-tab { position: relative; display: flex; align-items: center; justify-content: center; padding: 0; border: 0; background: none; cursor: pointer; color: rgba(185, 229, 236, 0.5); }
.rc-tab.used { color: var(--teal); }
.rc-tab.used::after { top: 3px; right: calc(50% - 16px); }
.rc-tab:hover { color: #fff; background: rgba(24, 116, 214, 0.18); }
.rc-tab.cur { background: var(--bar); box-shadow: var(--bar-glow); color: #fff; }
/* the open step's heading: its name and everything in it */
.rc-head { display: flex; align-items: baseline; gap: 10px; padding: 0 8px 8px 6px; min-width: 0; }
.rc-head b { flex: none; font: 400 10.5px var(--font-sans); letter-spacing: 0.18em; color: var(--teal-dim); }
.rc-head span { font: 500 15px var(--font-sans); color: var(--lit); text-shadow: var(--lit-glow); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rc-head[hidden] { display: none; }
.step-open * { scroll-margin-top: 44px; scroll-margin-bottom: 38px; }
/* the open step: its options, amount and settings, under the card */
.step-open { padding: 10px 0 8px 6px; margin-bottom: 2px; background: rgba(24, 116, 214, 0.06); box-shadow: inset 2px 0 0 rgba(143, 233, 255, 0.5), inset 0 -1px 0 rgba(185, 229, 236, 0.12); }
.step-open .picker { margin-bottom: 4px; }

.panel-foot { background: #40474d; box-shadow: inset 0 1px 0 rgba(185, 229, 236, 0.14); }   /* solid, now the rows stack on it */

/* ---------- fixes from the UX test (2026-10-05) ---------- */
/* a saved look's delete sits in the corner */
#lookStrip .urow .del { top: 5px; right: 5px; z-index: 4; }
/* Apply look to all waits for a look */
.film-act:disabled { opacity: 0.4; cursor: default; color: var(--teal-dim); text-shadow: none; }
/* a message's action (Undo) */
.toast-act { margin-left: 10px; padding: 2px 10px; border: 1px solid rgba(228, 248, 251, 0.6); background: transparent; color: #fff; font: 400 13px var(--font-sans); cursor: pointer; }
.toast-act:hover { background: rgba(228, 248, 251, 0.16); }
/* the look's Amount sits under its name in the panel (it used to squeeze the pack tabs) */
#settingsPanel #strengthRow:not([hidden]) { display: grid; margin: 4px 0 6px; }
#settingsPanel #strengthRow[hidden] { display: none; }
/* menus: each item on one line, the shortcut right-aligned after it */
.menu-pop { min-width: 320px; }
.menu-pop button { grid-template-columns: max-content 1fr; column-gap: 24px; white-space: nowrap; }
.menu-pop kbd { justify-self: end; }
/* menus: no dotted divider (the shortcut sits at the far right, so a divider at the split ran through longer names) */
.menu-pop button, .menu-pop button:hover { background: transparent; }
/* the Before tag shows over the photo */
.before-tag { z-index: 8; }
/* crop on a narrow window: tighter aspect buttons, the angle without its label and the size readout hidden, so Cancel and Apply stay on screen */
@media (max-width: 1280px) {
  .crop-opts { gap: 2px; }
  .crop-opts .btn-sm { padding-left: 5px; padding-right: 5px; }
  .crop-opts .crop-size, .optionsbar:has(#cropOpts:not([hidden])) .opt-hint { display: none; }
  .crop-opts .crop-angle { font-size: 0; }
  .crop-opts .crop-angle input { width: 70px; }
  .crop-opts .crop-angle span { font-size: 12px; }
}
/* Save as your own look, in the look header */
.save-look.icon-btn { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 3.5h10v13l-5-3.5-5 3.5z'/%3E%3Cpath d='M10 6.5v4.5M7.75 8.75h4.5'/%3E%3C/svg%3E"); }
/* the shortcuts list fits a 900px window */
#keys td { padding-top: 3px; padding-bottom: 3px; font-size: 13px; }
#keys kbd { font-size: 12.5px; }
.before-tag { color: #fff; text-shadow: var(--lit-glow); }
@media (max-width: 1280px) { .optionsbar:has(#cropOpts:not([hidden])) .btn-group[aria-label="Zoom"], .optionsbar:has(#cropOpts:not([hidden])) .opt-sep { display: none; } }
/* Browse all stays whole at the end of the pack tabs; the tabs scroll under it */
.looks-bar .strip-browse { position: sticky; right: 0; z-index: 1; flex: none; background: linear-gradient(90deg, rgba(70, 77, 83, 0), #464d53 14px); padding-left: 18px; }
/* a step's options: three rows, then "Show all N options" opens the rest in place; the panel is the only scroll */
.picker .seq-opts { max-height: none; overflow: visible; }
.picker .seq-opt.over { display: none; }
.seq-more { display: block; width: 100%; margin: 8px 0 2px; padding: 7px 0; border: 0; background: none; box-shadow: inset 0 1px 0 var(--teal-faint), inset 0 -1px 0 var(--teal-faint);
  color: var(--teal); font: 400 13px var(--font-sans); cursor: pointer; grid-column: 1 / -1; }
.seq-more:hover { color: #fff; background: rgba(24, 116, 214, 0.18); }
.seq-more[hidden] { display: none; }
/* a section the step shows stays, even switched off or unused (so it can be switched back on) */
#adjust:not(.all) .adj.shown[data-used="0"] { display: block; }
/* the pack tabs scroll sideways (fading at the edge); Browse all sits after them, always whole */
.looks-bar .strip-cats { overflow-x: auto; scrollbar-width: none; }
.looks-bar .strip-cats.more:not(.end) { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); }
.looks-bar .strip-cats::-webkit-scrollbar { display: none; }
.looks-bar > .strip-browse { position: static; flex: none; background: none; padding-left: 11px; margin-left: 4px; }
/* messages sit over the photo's lower edge, not on Reset all */
.toast { right: auto; left: calc((100vw - 380px) / 2); transform: translateX(-50%); bottom: 60px; max-width: min(560px, calc(100vw - 32px));
  background: #2a5f9e; box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45), inset 0 0 0 1px rgba(160, 205, 255, 0.35); color: #fff; }   /* solid: nothing behind it shows through */
/* no side panel beside the photo (one column, or the one-effect embed): the middle of the screen */
@media (max-width: 900px) { .toast { left: 16px; right: 16px; width: fit-content; margin-inline: auto; transform: none; } }
html.embed .toast { left: 16px; right: 16px; width: fit-content; margin-inline: auto; transform: none; top: 12px; bottom: auto; }   /* at the top: the control bar wraps to two rows on a phone */

/* ---------- export progress (export.js): the Export button fills as the photo exports, says the step and time, and
   cancels on click; then a moment of "Exported" before it's the button again ---------- */
.export-btn.exporting, .export-btn.exported { position: relative; overflow: hidden; width: 230px; display: inline-flex; align-items: center;
  justify-content: space-between; gap: 8px; text-align: left; font-variant-numeric: tabular-nums; }
.export-btn .xb-fill { position: absolute; inset: 0; z-index: 0; background: rgba(58, 150, 240, 0.55); transform-origin: 0 50%; transform: scaleX(0);
  transition: transform 0.6s var(--ease-out); pointer-events: none; }
.export-btn .xb-label { position: relative; z-index: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.export-btn .xb-x { position: relative; z-index: 1; font-size: 15px; line-height: 1; opacity: 0.8; }
.export-btn.exporting:hover .xb-x { opacity: 1; }
.export-btn.exported .xb-x { display: none; }
.export-btn.exported .xb-fill { background: rgba(58, 150, 240, 0.75); }
@media (prefers-reduced-motion: reduce) { .export-btn .xb-fill { transition: none; } }

/* ---------- the GPU took the context away (app.js, in the browser; the desktop app reloads by itself) ---------- */
.gl-lost {
  position: fixed; left: 50%; top: 40%; z-index: 80; transform: translate(-50%, -50%); width: min(440px, calc(100vw - 32px));
  padding: 16px 20px 18px; background: rgba(38, 46, 52, 0.92); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  color: var(--teal); box-shadow: 0 24px 60px -18px rgba(0, 0, 0, 0.5); font: 400 14px/1.45 var(--font-sans);
}
.gl-lost p { margin: 0 0 12px; }
.gl-lost .gl-lost-title { color: var(--lit); font-size: 16px; }

/* ---------- accessibility: a focus ring that stands out, and header text at 4.5:1 or better ---------- */
:focus-visible, .panel-fold:focus-visible { outline: 2px solid var(--lit); outline-offset: -2px; }
.switch input:focus-visible + span, #lookStrip .row-item:focus-visible { outline-width: 2px; outline-color: var(--lit); }
.step-sg:focus-visible { outline: 2px solid var(--lit); outline-offset: -2px; }   /* inside: the step row clips anything outside */
/* the look's header in the side panel: the box a shade darker, so its name (6.7:1) and buttons (5.4:1) read */
#settingsPanel .panel-h { background: linear-gradient(rgba(20, 28, 34, 0.25), rgba(20, 28, 34, 0.25)), var(--box); }
#settingsPanel .panel-h .look-title { color: var(--lit); }
#settingsPanel .panel-h .icon-btn { color: var(--teal); }
#settingsPanel .panel-h .icon-btn:hover, #settingsPanel .panel-h .icon-btn[aria-pressed=true] { color: var(--lit); }
.looks-title b { color: var(--teal); }   /* the count by LOOKS (was 2:1) */

/* ---------- licence (licence.js): the gate while locked, Help ▸ Licence once unlocked ---------- */
.licence-win { width: min(520px, calc(100vw - 32px)); }
.licence { padding: 18px 20px 20px; font: 400 14px/1.45 var(--font-sans); color: var(--teal); }
.licence-lead { margin: 0 0 14px; color: var(--lit); font-size: 15px; }
.licence-row { display: flex; gap: 8px; }
.licence-row input { flex: 1; min-width: 0; height: 34px; padding: 0 10px; border: 0; background: rgba(20, 28, 34, 0.55); box-shadow: inset 0 0 0 1px var(--teal-faint);
  color: var(--lit); font: 400 14px var(--font-mono, monospace); letter-spacing: 0.04em; }
.licence-row input:focus { outline: none; box-shadow: inset 0 0 0 1px var(--lit), 0 0 12px -4px rgba(64, 156, 255, 0.6); }
.licence-msg { min-height: 20px; margin: 10px 0 0; color: var(--lit); }
.licence-links { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 14px 0 0; }
.licence-links a { color: var(--teal); }
.licence-links a:hover { color: #fff; }
.licence-info dl { display: grid; grid-template-columns: max-content 1fr; gap: 4px 16px; margin: 0 0 14px; }
.licence-info dt { color: var(--teal-dim); }
.licence-info dd { margin: 0; color: var(--lit); overflow-wrap: anywhere; }
.licence-note { margin: 0 0 12px; color: var(--teal-dim); }
.licence-win::backdrop { background: rgba(20, 26, 30, 0.55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }

/* the brand lockup in a window (About, Licence): the tile with the name, a size up from the top bar's */
.lockup { display: flex; align-items: center; gap: 12px; margin: 2px 0 14px; }
.lockup-mark { width: 34px; height: 34px; flex: none; }
.lockup-word { font: 500 22px/1 "Instrument Sans", var(--font-sans); letter-spacing: -0.01em; color: var(--lit); }

/* ---------- the photo column's selection: a tick on every photo (always there, not only on hover), All/None by the
   count, and once any are ticked a box saying how many with what to do with them ---------- */
.filmstrip .photo-pick { opacity: 1; top: 6px; left: 6px; width: 16px; height: 16px; border-radius: 0; border: 1.5px solid rgba(255, 255, 255, 0.9);
  background: rgba(10, 14, 18, 0.35); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6); }
.filmstrip .photo-tile.picked .photo-pick { background: #3a96f0 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.6 8.2l2.8 2.8 6-6' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 13px no-repeat;
  border-color: #fff; }
.filmstrip .photo-pick-here { cursor: default; }
.filmstrip .film-actions { display: flex; flex-direction: column; gap: 6px; margin: 8px 0 0; padding: 10px; flex: none;
  background: rgba(58, 150, 240, 0.14); box-shadow: inset 0 0 0 1px rgba(110, 180, 255, 0.4); }
.filmstrip .film-actions[hidden] { display: none; }
.film-sel-n { font: 400 13px var(--font-sans); color: var(--lit); margin-bottom: 2px; }
.filmstrip .film-act { width: 100%; height: 30px; padding: 0 8px; display: flex; align-items: center; justify-content: center; text-align: center;
  border: 0; box-shadow: inset 0 0 0 1px rgba(185, 229, 236, 0.45); background: none; color: var(--lit); font: 400 13px var(--font-sans); cursor: pointer; white-space: nowrap; }
.filmstrip .film-act:hover:not(:disabled) { background: rgba(24, 116, 214, 0.18); }
.filmstrip .film-act:disabled { opacity: 0.45; cursor: default; }
.filmstrip .film-act-go { background: var(--bar); box-shadow: var(--bar-edge); color: #fff; }
.filmstrip .film-act-go:hover { filter: brightness(1.12); background: var(--bar); }

/* export: what it's for, a preview of the result, and the settings behind a fold */
.export-win { width: min(920px, calc(100vw - 32px)); }
.ex-h { display: block; margin-bottom: 8px; font: 400 13px var(--font-sans); letter-spacing: .04em; text-transform: uppercase; color: var(--teal-dim); }
.ex-for { padding: 6px 0 14px; box-shadow: inset 0 -1px 0 var(--teal-faint); }
.ex-dests { display: flex; flex-wrap: wrap; gap: 6px; }
.ex-dest { position: relative; cursor: pointer; }
.ex-dest input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.ex-dest span { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-width: 104px; height: 78px; padding: 12px 14px; box-sizing: border-box; white-space: nowrap;
  font: 400 14px var(--font-sans); color: var(--teal); text-align: center; box-shadow: inset 0 0 0 1px var(--teal-faint); overflow: hidden; }
.ex-dest svg { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.ex-dest:hover span { background: rgba(24, 116, 214, 0.22); box-shadow: var(--bar-edge); color: var(--lit); }
.ex-dest input:checked + span { background: var(--bar); box-shadow: var(--bar-glow); color: var(--lit); text-shadow: var(--lit-glow); }
.ex-dest input:focus-visible + span { outline: 2px solid var(--teal); outline-offset: 1px; }
.ex-dest-own span { box-shadow: inset 0 0 0 1px var(--teal-faint), inset 0 -2px 0 var(--teal-faint); }
.ex-main { display: grid; grid-template-columns: 280px 1fr; gap: 22px; padding: 16px 0; align-items: start; }
.ex-main:has(.ex-prev[hidden]) { grid-template-columns: 1fr; }
.ex-prev { display: grid; place-items: center; gap: 8px; min-height: 200px; padding: 10px; background: rgba(0, 0, 0, 0.28); box-shadow: inset 0 0 0 1px var(--teal-faint); }
.ex-prev[hidden] { display: none; }
.ex-prev canvas { display: block; max-width: 100%; box-shadow: 0 0 0 1px rgba(185, 229, 236, 0.18); touch-action: none; }
.ex-prev canvas.ex-drag { cursor: grab; }
.ex-prev canvas.ex-drag:active { cursor: grabbing; }
.ex-prev-hint { font: 400 13px var(--font-sans); color: var(--teal-dim); }
.ex-prev-hint[hidden] { display: none; }
.ex-opts { display: grid; gap: 14px; align-content: start; min-width: 0; }
.ex-group[hidden], .ex-bcol[hidden], .ex-for[hidden] { display: none; }
.ex-group .ex-seg span { flex-direction: column; justify-content: center; line-height: 1.1; }
.ex-group .ex-seg small { font-size: 11px; color: var(--teal-dim); }
.ex-group .ex-seg input:checked + span small { color: inherit; opacity: .8; }
.ex-bcol { margin-top: 8px; }
.ex-bcol span.ex-swatch { width: 32px; padding: 0; }
.ex-sw-white { background: #fff !important; }
.ex-sw-black { background: #000 !important; }
.ex-bcol input:checked + .ex-swatch { box-shadow: 0 0 0 2px var(--teal), inset 0 0 0 1px rgba(128, 128, 128, .5) !important; }
.ex-opts .ex-summary { padding-top: 12px; margin: 0; color: var(--teal); }
/* a destination with nothing to choose (Full quality, Archive): no second rule under the cards */
.ex-opts:not(:has(.ex-group:not([hidden]))) .ex-summary { box-shadow: none; padding-top: 0; }
.ex-main:has(.ex-prev[hidden]):not(:has(.ex-group:not([hidden]))) { padding-top: 10px; }
.ex-summary b { font-weight: 500; color: var(--lit); }
.ex-dot { margin: 0 .45em; color: var(--teal-faint); }
.ex-check { margin: 0; font: 400 14px var(--font-sans); padding: 8px 10px; box-shadow: inset 2px 0 0 currentColor; }
.ex-check[hidden] { display: none; }
.ex-check.ok { color: #7fd6a4; } .ex-check.fair { color: #e8c76a; } .ex-check.low { color: #ef8a7a; }
.ex-note { margin: 0; font: 400 14px var(--font-sans); color: var(--teal-dim); }
.ex-adv { box-shadow: inset 0 1px 0 var(--teal-faint); padding-top: 4px; }
.ex-adv > summary { cursor: pointer; padding: 10px 0; font: 400 14px var(--font-sans); color: var(--teal-dim); list-style: none; }
.ex-adv > summary::-webkit-details-marker { display: none; }
.ex-adv > summary::before { content: "▸"; display: inline-block; width: 1.2em; transition: transform .15s; }
.ex-adv[open] > summary::before { transform: rotate(90deg); }
.ex-adv > summary:hover { color: var(--lit); }
.ex-actions { align-items: center; }
.ex-preset { display: flex; gap: 6px; align-items: center; }
.ex-preset input { height: 32px; width: 160px; padding: 0 8px; border: 0; background: rgba(185, 229, 236, 0.06); color: var(--lit); font: 400 14px var(--font-sans); box-shadow: inset 0 -1px 0 var(--teal-faint); }
.ex-preset [hidden] { display: none; }
.ex-grow { flex: 1; }
@media (max-width: 700px) { .ex-main { grid-template-columns: 1fr; } .ex-dest span { width: 92px; height: auto; min-height: 76px; padding: 10px 6px; font-size: 13px; white-space: normal; } }
.ex-it { white-space: nowrap; }

/* ---------- phones and small tablets: nothing wider than the screen ---------- */
@media (max-width: 900px) {
  .app > * { min-width: 0; }
  .menus { overflow-x: auto; scrollbar-width: none; flex-wrap: nowrap; max-width: 100%; }
  .menus::-webkit-scrollbar, .optionsbar::-webkit-scrollbar { display: none; }
  .optionsbar { overflow-x: auto; scrollbar-width: none; max-width: 100%; }
  .optionsbar > * { flex: none; }
  .opt-tool { margin-right: 10px; }
  .lookstrip, .seq-tabs, .looks-bar { min-width: 0; max-width: 100%; }
  .looks-bar { flex-wrap: wrap; row-gap: 4px; }
  #lookStrip { flex-wrap: wrap; row-gap: 6px; }
  #lookStrip > * { flex: 1 1 100%; min-width: 0; }
}

/* ---------- the photo column's select mode (Select / Done), as in Photos ---------- */
.film-select { margin-left: auto; flex: none; height: 24px; padding: 0 10px; border: 0; background: none; box-shadow: inset 0 0 0 1px rgba(185, 229, 236, 0.35);
  color: var(--teal); font: 400 13px var(--font-sans); cursor: pointer; }
.film-select:hover { color: var(--lit); box-shadow: inset 0 0 0 1px rgba(185, 229, 236, 0.65); }
.film-select[aria-pressed=true] { background: var(--bar); box-shadow: var(--bar-edge); color: #fff; }
.film-select[hidden] { display: none; }
/* round ticks while selecting; photos left out dim */
.filmstrip.selecting .photo-pick { opacity: 1; top: 7px; left: 7px; width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, 0.95);
  background: rgba(10, 14, 18, 0.4); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6); }
.filmstrip.selecting .photo-tile.picked .photo-pick { background: #3a96f0 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.6 8.2l2.8 2.8 6-6' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 13px no-repeat; border-color: #fff; }
.filmstrip.selecting .photo-tile:not(.picked) img { opacity: 0.55; transition: opacity .15s; }
.filmstrip.selecting .photo-tile:not(.picked):hover img { opacity: 0.85; }
.filmstrip.selecting .photo-tile.picked { box-shadow: 0 0 0 2px #3a96f0; }
.filmstrip.selecting .photo-tile[aria-current=true].picked { box-shadow: 0 0 0 2px var(--lit), 0 0 0 4px #3a96f0; }
.film-sel-row { display: flex; align-items: center; gap: 6px; margin-bottom: 2px; }
.film-sel-row .film-sel-n { flex: 1; margin: 0; }
.film-link { border: 0; background: none; padding: 0; color: var(--teal); font: 400 12px var(--font-sans); cursor: pointer; }
.film-link:hover:not(:disabled) { color: var(--lit); text-decoration: underline; }
.film-link:disabled { opacity: 0.4; cursor: default; }
.film-sep { color: var(--teal-dim); font-size: 12px; }
.film-act-row { display: flex; gap: 6px; }
.film-act-row .film-act { flex: 1; min-width: 0; }
.filmstrip .film-act-rm { color: #ffb3a8; box-shadow: inset 0 0 0 1px rgba(255, 150, 130, 0.45); }
.filmstrip .film-act-rm:hover:not(:disabled) { background: rgba(255, 120, 100, 0.12); }
/* the column is narrow: Select gets a row of its own under the title, and the box stacks */
.filmstrip .film-head:has(.film-select:not([hidden])) { flex-wrap: wrap; height: auto; row-gap: 8px; }
.film-select { flex: 1 1 100%; margin-left: 0; height: 28px; }
.film-sel-row { flex-wrap: wrap; row-gap: 2px; }
.film-sel-row .film-sel-n { flex: 1 1 100%; }
.film-act-row { flex-direction: column; }
/* the status light only while something is happening (loading, developing, exporting); idle, the bar stays quiet */
.statusbar .cell:has(> #sLed:not(.busy)) { visibility: hidden; }