/* Pentimento — interface. Pigment-named tokens; the accent follows the current style. */
:root {
  --lamp: #100f0e;          /* lamp black: app ground */
  --umber: #181614;         /* panel surface */
  --umber-2: #211e1b;       /* raised surface, inputs */
  --umber-3: #2b2723;       /* hover */
  --bone: #ece6db;          /* primary text, like gesso */
  --bone-2: #b9b1a5;        /* secondary text */
  --bone-3: #847c71;        /* labels */
  --line: rgba(236, 230, 219, 0.075);
  --line-2: rgba(236, 230, 219, 0.14);
  --accent: #3a5ba8;        /* set from the current style */
  --accent-ink: #f4f1ea;
  --vermilion: #e2492f;     /* recording */
  /* one family throughout: Albert Sans, light for display, regular and medium for the interface */
  --sans: 'Albert Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --r-card: 7px;
  --r-ctl: 5px;
  --side-l: 272px;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; background: var(--lamp); color: var(--bone); }
body { font: 400 13px/1.45 var(--sans); -webkit-font-smoothing: antialiased; font-variant-numeric: tabular-nums; overflow: hidden; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 1.5px solid var(--bone); outline-offset: 2px; }
::selection { background: var(--accent); color: var(--accent-ink); }

.app {
  display: grid;
  height: 100vh; height: 100dvh;
  grid-template-columns: var(--side-l) minmax(0, 1fr);
  grid-template-rows: 52px minmax(0, 1fr) auto;
  grid-template-areas: "top top" "left stage" "dock dock";
}

/* ───────── top bar ───────── */
.topbar { grid-area: top; display: flex; align-items: center; gap: 24px; padding: 0 16px 0 20px; border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: 16px; min-width: 0; flex: 0 0 auto; }
/* the wordmark: a P whose stem is a painter's brush and whose bowl is the gold it laid, beside
   PENTIMENTO in Noto Serif Display; drawn as outlines, so no font loads */
.wordmark-h { margin: 0; font-size: inherit; font-weight: inherit; line-height: 0; }
.wordmark { display: block; }
.brand-note { font-size: 12px; color: var(--bone-3); white-space: nowrap; margin-top: 2px; }
.work { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; gap: 14px; min-width: 0; }
.work-title { background: transparent; border: 0; border-bottom: 1px solid transparent; font: 400 17px/1.2 var(--sans); letter-spacing: -0.005em; color: var(--bone); text-align: center; width: min(38ch, 40vw); padding: 2px 4px; }
.work-title:hover { border-bottom-color: var(--line-2); }
.work-title:focus { outline: none; border-bottom-color: var(--bone-3); }
.work-meta { font-size: 12px; color: var(--bone-3); white-space: nowrap; }
.top-actions { display: flex; gap: 4px; flex: 0 0 auto; }
.icon-btn { width: 34px; height: 34px; display: inline-grid; place-items: center; border: 0; background: transparent; border-radius: 50%; color: var(--bone-2); }
.icon-btn:hover { background: var(--umber-2); color: var(--bone); }
.icon-btn svg { width: 20px; height: 20px; }

/* ───────── panels ───────── */
.panel { overflow-y: auto; overflow-x: hidden; background: var(--umber); scrollbar-width: thin; scrollbar-color: var(--umber-3) transparent; }
.panel.left { grid-area: left; border-right: 1px solid var(--line); }
.sec { padding: 18px 18px 20px; }
.sec + .sec { border-top: 1px solid var(--line); }
.sec-title { margin: 0 0 12px; font: 500 12px/1.3 var(--sans); color: var(--bone-2); letter-spacing: 0.01em; }
.field { margin-top: 14px; }
.field:first-of-type { margin-top: 0; }
.label { display: flex; justify-content: space-between; align-items: baseline; font-size: 12px; color: var(--bone-3); margin-bottom: 7px; }
.val { color: var(--bone-2); font-size: 12px; }

/* drop zone */
.drop { position: relative; display: grid; place-items: center; height: 158px; border-radius: var(--r-card); background: var(--umber-2); overflow: hidden; cursor: pointer; transition: background 0.2s; }
.drop:hover, .drop.over { background: var(--umber-3); }
.drop.over { box-shadow: inset 0 0 0 1.5px var(--accent); }
.drop img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: none; background: #0c0b0a; }
.drop.has img { display: block; }
.drop.has .drop-empty { display: none; }
.drop-empty { display: flex; flex-direction: column; gap: 4px; text-align: center; padding: 18px; }
.drop-big { font: 400 16px/1.25 var(--sans); letter-spacing: -0.005em; }
.drop-small { font-size: 12px; color: var(--bone-3); }
.samples { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; margin-top: 8px; }
.samples button { aspect-ratio: 1; border: 0; padding: 0; border-radius: 3px; overflow: hidden; background: var(--umber-2); opacity: 0.74; transition: opacity 0.15s; }
.samples button:hover, .samples button.on { opacity: 1; }
.samples button.on { box-shadow: 0 0 0 1.5px var(--bone); }
.samples img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* segmented controls */
.seg { display: flex; background: var(--umber-2); border-radius: var(--r-ctl); padding: 2px; gap: 2px; }
.seg button { flex: 1 1 auto; border: 0; background: transparent; color: var(--bone-2); padding: 5px 8px; border-radius: 3px; font-size: 12px; white-space: nowrap; }
.seg button:hover { color: var(--bone); }
.seg button.on { background: var(--bone); color: var(--lamp); }
.seg-wrap { flex-wrap: wrap; }
.seg-wrap button { flex: 1 0 28%; }

/* sliders */
input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 18px; background: transparent; margin: 0; }
input[type=range]::-webkit-slider-runnable-track { height: 2px; background: linear-gradient(to right, var(--bone-2) var(--fill, 50%), var(--line-2) var(--fill, 50%)); border-radius: 2px; }
input[type=range]::-moz-range-track { height: 2px; background: var(--line-2); border-radius: 2px; }
input[type=range]::-moz-range-progress { height: 2px; background: var(--bone-2); }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 12px; margin-top: -5px; border-radius: 50%; background: var(--bone); border: 0; box-shadow: 0 0 0 3px var(--umber); }
input[type=range]::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; background: var(--bone); border: 0; }
.size-presets { display: flex; gap: 6px; margin-top: 8px; }
.size-presets button { flex: 1; border: 1px solid var(--line-2); background: transparent; color: var(--bone-3); border-radius: 999px; padding: 3px 0; font-size: 11px; }
.size-presets button:hover { color: var(--bone); border-color: var(--bone-3); }

/* style chip and pop-up: the catalogue stays one click away without taking a column */
.style-chip { display: inline-flex; align-items: center; gap: 9px; flex: 0 0 auto; height: 34px; padding: 0 12px 0 4px; border: 1px solid var(--line-2); border-radius: 999px; background: transparent; color: var(--bone); }
.style-chip:hover, .style-chip[aria-expanded="true"] { background: var(--umber-2); border-color: rgba(236,230,219,0.26); }
.sc-sw { width: 26px; height: 26px; border-radius: 50%; background: var(--accent); box-shadow: inset 0 0 0 1px rgba(236,230,219,0.12); }
.sc-name { font: 500 14px/1 var(--sans); white-space: nowrap; }
.sc-chev { width: 9px; height: 6px; color: var(--bone-2); }
.style-pop { position: fixed; z-index: 40; top: 58px; left: 50%; transform: translateX(-50%); width: min(1180px, calc(100vw - 32px)); max-height: calc(100vh - 76px); overflow-y: auto; padding: 18px 20px 20px; border-radius: 10px; background: var(--umber); box-shadow: 0 30px 90px rgba(0,0,0,0.6), 0 0 0 1px var(--line-2); scrollbar-width: thin; scrollbar-color: var(--umber-3) transparent; }
.sp-head { display: flex; justify-content: space-between; align-items: baseline; }
.sp-hint { font-size: 11.5px; color: var(--bone-3); }
.sp-params { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 8px 28px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.sp-about .sec-title { margin-bottom: 6px; }
.sp-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 22px; align-content: start; }
.sp-fields .field { margin-top: 0; }

/* style catalogue */
.catalogue { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 12px 10px; }
@media (max-width: 1240px) { .catalogue { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.card { position: relative; border: 0; padding: 0; background: transparent; text-align: left; border-radius: var(--r-card); }
.card .thumb { position: relative; display: block; aspect-ratio: 4 / 3; border-radius: 5px; overflow: hidden; background: var(--umber-2); }
.card canvas, .card .ph { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; }
.card .ph { display: grid; place-items: center; font: 300 24px var(--sans); color: var(--bone-3); }
.card .name { display: block; margin-top: 7px; font: 500 13.5px/1.2 var(--sans); color: var(--bone); }
.card .move { display: block; font-size: 11px; color: var(--bone-3); margin-top: 1px; }
.card:hover .thumb { box-shadow: 0 0 0 1px var(--line-2); }
.card.on .thumb { box-shadow: 0 0 0 2px var(--accent), 0 0 0 4px var(--umber); }
.card.on .name { color: var(--bone); }
.card .key { position: absolute; top: 5px; right: 6px; font-size: 10px; color: rgba(236,230,219,0.7); text-shadow: 0 1px 2px #000; }
.card.loading .thumb::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(236,230,219,0.06) 50%, transparent 70%); background-size: 200% 100%; animation: sheen 1.6s linear infinite; }
@keyframes sheen { from { background-position: 150% 0; } to { background-position: -50% 0; } }
.text-btn { border: 0; background: transparent; color: var(--bone-2); font-size: 12px; padding: 2px 0; text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; }
.text-btn:hover { color: var(--bone); text-decoration-color: var(--bone-3); }
.style-blurb { margin: 0 0 12px; color: var(--bone-2); font: 400 14px/1.5 var(--sans); max-width: 46ch; }
.style-blurb em { color: var(--bone-3); font-style: normal; font: 400 11.5px/1.4 var(--sans); display: block; margin-top: 6px; }

/* ───────── stage / monitor ───────── */
.stage { grid-area: stage; position: relative; display: grid; place-items: center; min-height: 0; overflow: hidden; background: radial-gradient(120% 90% at 50% 45%, #171513 0%, #0b0a09 70%); }
.monitor { position: relative; line-height: 0; box-shadow: 0 30px 80px rgba(0,0,0,0.55); }
.monitor canvas { display: block; background: #050505; }
.hud { position: absolute; left: 14px; top: 12px; right: 14px; display: flex; gap: 14px; font: 500 11px/1 var(--sans); color: rgba(236,230,219,0.62); pointer-events: none; opacity: 0; transition: opacity 0.4s; }
.app.hud-on .hud { opacity: 1; }
.hud-speed { margin-left: auto; }
/* play or pause, answered on the picture itself: a white sign that swells and fades */
.flash { position: absolute; left: 50%; top: 50%; z-index: 2; width: clamp(68px, 8vmin, 108px); aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%; color: #fff; background: rgba(10, 9, 8, 0.46); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14), 0 10px 34px rgba(0, 0, 0, 0.28); opacity: 0; transform: translate(-50%, -50%); pointer-events: none; }
.flash svg { grid-area: 1 / 1; width: 52%; height: 52%; display: none; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.25)); }
.flash[data-k="play"] .f-play, .flash[data-k="pause"] .f-pause { display: block; }
.flash.go { animation: flash 0.72s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
@keyframes flash {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.82); }
  16% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  55% { opacity: 1; transform: translate(-50%, -50%) scale(1.04); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.22); }
}
@media (prefers-reduced-motion: reduce) { .flash.go { opacity: 1; } }
/* the design credit, set like the credit line under a photograph: in the margin below the
   picture, on its right edge; it leaves with the rest of the interface when the film plays */
.credit { position: absolute; top: calc(100% + 9px); right: 0; font: 500 10px/1 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap; color: rgba(236,230,219,0.34); text-decoration: none; transition: color 0.2s; }
.credit:hover { color: var(--bone); }
.credit:focus-visible { color: var(--bone); outline: 1px solid var(--bone-3); outline-offset: 4px; border-radius: 2px; }
.app.clean .credit, .app.immersive .credit { display: none; }
.rec-badge { position: absolute; right: 14px; top: 12px; display: flex; align-items: center; gap: 7px; padding: 5px 9px; border-radius: 999px; background: rgba(10,9,8,0.7); font: 500 12px/1 var(--sans); line-height: 1; }
.rec-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--vermilion); display: inline-block; }
.rec-badge .rec-dot { animation: pulse 1.2s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: 0.35; } }
.prep { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(8,7,6,0.55); backdrop-filter: blur(3px); line-height: 1.4; }
.prep-card { width: min(320px, 80%); }
.prep-title { font: 300 20px/1.2 var(--sans); letter-spacing: -0.01em; margin-bottom: 14px; }
.prep-bar { height: 2px; background: var(--line-2); border-radius: 2px; overflow: hidden; }
.prep-bar span { display: block; height: 100%; width: 0; background: var(--bone); transition: width 0.25s; }
.prep-step { margin-top: 10px; font-size: 12px; color: var(--bone-3); }
.empty { position: absolute; inset: 0; display: grid; align-content: center; justify-items: center; text-align: center; padding: 24px; line-height: 1.45; pointer-events: none; }
.empty-title { margin: 0 0 10px; font: 300 28px/1.15 var(--sans); letter-spacing: -0.015em; }
.empty-text { margin: 0; max-width: 46ch; color: var(--bone-2); }
.app.ready .empty, .app.has-source .empty { display: none; }

/* ───────── dock ───────── */
.dock { grid-area: dock; border-top: 1px solid var(--line); background: var(--umber); padding: 12px 18px 14px; display: grid; gap: 12px; }
.transport { display: flex; align-items: center; gap: 12px; }
.play { width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--bone); color: var(--lamp); display: grid; place-items: center; flex: 0 0 auto; }
.play:hover { background: #fff; }
.play svg { width: 18px; height: 18px; }
.play .i-pause { display: none; }
.app.playing .play .i-pause { display: block; }
.app.playing .play .i-play { display: none; }
.tc { font-size: 13px; color: var(--bone-2); white-space: nowrap; flex: 0 0 auto; }
.tc .d { display: inline-block; width: 0.68em; text-align: center; }
.tc-sep { margin: 0 6px; color: var(--bone-3); }
.timeline { position: relative; flex: 1 1 auto; min-width: 0; height: 64px; border-radius: 5px; background: var(--umber-2); cursor: pointer; overflow: hidden; touch-action: none; }
.timeline canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.tl-head { position: absolute; top: 0; bottom: 0; left: 0; width: 2px; margin-left: -1px; background: var(--bone); pointer-events: none; box-shadow: 0 0 0 1px rgba(0,0,0,0.35); will-change: transform; }
.direct { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 28px; }
.dgroup { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.dfield { display: flex; flex-direction: column; min-width: 0; }
.dfield .label { margin-bottom: 5px; }
select { -webkit-appearance: none; appearance: none; background: var(--umber-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23b9b1a5' stroke-width='1.3'/%3E%3C/svg%3E") no-repeat right 9px center / 9px 6px; border: 0; border-radius: var(--r-ctl); padding: 6px 28px 6px 10px; font-size: 12.5px; min-width: 96px; }
select:hover { background-color: var(--umber-3); }
.toggles { gap: 6px; }
.tog { border: 1px solid var(--line-2); background: transparent; color: var(--bone-3); border-radius: 999px; padding: 6px 12px; font-size: 12px; }
.tog:hover { color: var(--bone-2); }
.tog.on { color: var(--bone); border-color: rgba(236,230,219,0.38); background: rgba(236,230,219,0.06); }
.actions { margin-left: auto; gap: 8px; }
.btn { border: 1px solid var(--line-2); background: var(--umber-2); color: var(--bone); border-radius: var(--r-ctl); padding: 8px 14px; font-size: 12.5px; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.btn:hover { background: var(--umber-3); }
.btn.primary { background: var(--bone); color: var(--lamp); border-color: var(--bone); font-weight: 500; }
.btn.primary:hover { background: #fff; }
.btn.rec.on { border-color: var(--vermilion); }
.btn:disabled { opacity: 0.4; cursor: default; }

/* dialogs */
.dlg { border: 0; padding: 0; background: var(--umber); color: var(--bone); border-radius: 10px; width: min(460px, calc(100vw - 32px)); box-shadow: 0 40px 120px rgba(0,0,0,0.7), 0 0 0 1px var(--line-2); }
.dlg::backdrop { background: rgba(5,4,4,0.6); backdrop-filter: blur(2px); }
.dlg-body { padding: 22px 22px 18px; }
.dlg-title { margin: 0 0 6px; font: 400 20px/1.2 var(--sans); letter-spacing: -0.01em; }
.dlg-text { margin: 0 0 16px; color: var(--bone-2); max-width: 52ch; }
.dlg-text.small { font-size: 12px; color: var(--bone-3); margin-top: 12px; }
.dlg-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 14px; }
.dlg-grid select { width: 100%; }
.check { display: flex; gap: 8px; align-items: center; color: var(--bone-2); margin: 6px 0; font-size: 12.5px; }
.check input { accent-color: var(--bone); }
.dlg-note { color: var(--bone-3); font-size: 12px; min-height: 1em; margin: 8px 0 0; }
.dlg-progress { margin-top: 14px; }
.dlg-step { margin-top: 8px; font-size: 12px; color: var(--bone-3); }
.dlg-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }
.keys { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; margin: 6px 0 0; }
.keys dt { color: var(--bone); font-weight: 500; }
.keys dd { margin: 0; color: var(--bone-2); }
.toast { position: fixed; z-index: 60; left: 50%; bottom: 128px; transform: translate(-50%, 12px); background: var(--bone); color: var(--lamp); padding: 9px 14px; border-radius: 6px; font-size: 12.5px; opacity: 0; pointer-events: none; transition: opacity 0.25s, transform 0.25s; max-width: min(520px, 90vw); }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* clean viewing */
.app.clean { grid-template-columns: 0 minmax(0, 1fr); grid-template-rows: 0 minmax(0, 1fr) 0; }
.app.clean .topbar, .app.clean .panel, .app.clean .dock { visibility: hidden; overflow: hidden; border: 0; padding: 0; }

/* playing: full screen, the film alone; any movement brings the controls back over it */
.app.immersive { grid-template-columns: 0 minmax(0, 1fr); grid-template-rows: 0 minmax(0, 1fr) 0; }
.app.immersive .stage { position: fixed; inset: 0; z-index: 1; background: #000; }
.app.immersive .monitor { box-shadow: none; }
.app.immersive .topbar, .app.immersive .panel.left, .app.immersive .dock { position: fixed; z-index: 30; -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); transition: opacity 0.35s ease, transform 0.35s ease; }
.app.immersive .topbar { top: 0; left: 0; right: 0; height: 52px; background: rgba(16, 15, 14, 0.8); }
.app.immersive .panel.left { top: 52px; left: 0; bottom: var(--dock-h, 150px); width: var(--side-l); background: rgba(24, 22, 20, 0.84); }
.app.immersive .dock { left: 0; right: 0; bottom: 0; background: rgba(24, 22, 20, 0.84); }
.app.immersive.ui-off .topbar { opacity: 0; transform: translateY(-10px); pointer-events: none; }
.app.immersive.ui-off .panel.left { opacity: 0; transform: translateX(-14px); pointer-events: none; }
.app.immersive.ui-off .dock { opacity: 0; transform: translateY(10px); pointer-events: none; }
.app.immersive.ui-off .hud, .app.immersive.ui-off .rec-badge { opacity: 0; }
.app.immersive.ui-off .stage { cursor: none; }

/* before and after */
.compare { position: absolute; inset: 0; z-index: 6; display: grid; place-items: center; background: rgba(9, 8, 7, 0.96); line-height: 1.4; }
.cmp-frame { position: relative; line-height: 0; box-shadow: 0 30px 80px rgba(0,0,0,0.6); cursor: ew-resize; touch-action: none; user-select: none; }
.cmp-frame canvas { display: block; width: 100%; height: 100%; }
#cmpPhoto { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--x, 50%)) 0 0); }
.cmp-handle { position: absolute; top: 0; bottom: 0; left: var(--x, 50%); width: 2px; margin-left: -1px; background: var(--bone); box-shadow: 0 0 0 1px rgba(0,0,0,0.25); }
.cmp-handle span { position: absolute; top: 50%; left: 50%; width: 36px; height: 36px; margin: -18px 0 0 -18px; display: grid; place-items: center; border-radius: 50%; background: var(--bone); color: var(--lamp); box-shadow: 0 4px 16px rgba(0,0,0,0.4); }
.cmp-handle span svg { width: 20px; height: 20px; }
.cmp-handle:focus-visible { outline: none; }
.cmp-handle:focus-visible span { outline: 1.5px solid var(--bone); outline-offset: 3px; }
.cmp-tag { position: absolute; top: 12px; padding: 5px 10px; border-radius: 999px; background: rgba(10, 9, 8, 0.62); color: var(--bone); font: 500 11.5px/1 var(--sans); pointer-events: none; }
.cmp-l { left: 12px; }
.cmp-r { right: 12px; }
.cmp-wait { position: absolute; width: min(320px, 70%); }
.cmp-wait .prep-title { font: 300 18px/1.2 var(--sans); margin-bottom: 12px; }
.cmp-close { position: absolute; top: 12px; right: 12px; background: rgba(24, 22, 20, 0.8); }

/* narrow screens: panels become drawers over the stage */
@media (max-width: 1180px) {
  :root { --side-l: 240px; }
  .brand-note { display: none; }
  .work-meta { display: none; }
}
@media (max-width: 960px) {
  .app { grid-template-columns: minmax(0, 1fr); grid-template-rows: 52px minmax(0, 1fr) auto auto; grid-template-areas: "top" "stage" "dock" "panels"; overflow-y: auto; height: auto; min-height: 100vh; }
  body { overflow: auto; }
  .stage { min-height: 56vh; }
  .panel.left { grid-area: auto; border: 0; border-top: 1px solid var(--line); overflow: visible; }
  .catalogue { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sp-params, .sp-fields { grid-template-columns: 1fr; }
  .work-meta { display: none; }
  .actions { margin-left: 0; }
}
/* phones: the top bar keeps the wordmark, the style and the controls a phone can use */
@media (max-width: 600px) {
  .topbar { gap: 10px; padding: 0 8px 0 14px; }
  .wordmark { width: 137px; height: 23px; }
  .work-title, #btnHelp { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* while recording or rendering, everything that would change the film is set aside */
.app.locked [inert] { opacity: 0.42; transition: opacity 0.2s ease; }

/* ───────── light ───────── */
.moods { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px 6px; }
.mood { border: 0; padding: 0; background: transparent; text-align: left; color: var(--bone-2); }
.mood .sw { display: block; height: 34px; border-radius: 5px; box-shadow: inset 0 0 0 1px rgba(236,230,219,0.06); }
.mood .mn { display: block; margin-top: 5px; font-size: 11.5px; line-height: 1.2; }
.mood:hover { color: var(--bone); }
.mood:hover .sw { box-shadow: inset 0 0 0 1px var(--line-2); }
.mood.on { color: var(--bone); }
.mood.on .sw { box-shadow: 0 0 0 1.5px var(--bone), 0 0 0 3px var(--umber); }
.mood-note { margin: 12px 0 0; font-size: 12px; line-height: 1.45; color: var(--bone-3); max-width: 34ch; min-height: 3em; }

/* ───────── direction ───────── */
.pin-btn[aria-pressed="true"] { color: var(--bone); background: var(--umber-3); }
.shotbar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 14px; padding: 10px 12px; border-radius: 6px; background: var(--umber-2); box-shadow: inset 0 0 0 1px var(--line); }
.shotbar select { background-color: var(--umber-3); }
.shotbar select:hover { background-color: #34302b; }
.sb-id { display: flex; flex-direction: column; min-width: 150px; margin-right: 6px; }
.sb-name { font: 400 17px/1.15 var(--sans); letter-spacing: -0.005em; color: var(--bone); }
.sb-meta { font-size: 11.5px; color: var(--bone-3); margin-top: 3px; }
.sb-actions { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.free-only { display: none !important; }
.app.free .free-only { display: inline-flex !important; }
.app.free label.free-only { display: flex !important; }
#btnMove.on { border-color: var(--vermilion); }
#btnMove .rec-dot { opacity: 0.55; }
#btnMove.on .rec-dot { opacity: 1; animation: pulse 1.2s ease-in-out infinite; }
.move-badge { top: 44px; }