:root {
  color-scheme: light;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Hiragino Sans", sans-serif;
  color: #182027;
  background: #e9edf0;
}

* { box-sizing: border-box; }

body { margin: 0; }

.page-shell {
  width: min(1320px, calc(100% - 32px));
  margin: 0 auto;
  padding: 34px 0 42px;
}

header { margin-bottom: 22px; }
.eyebrow { margin: 0 0 7px; color: #bf5415; font-size: .75rem; font-weight: 800; letter-spacing: .12em; }
h1 { margin: 0; font-size: clamp(1.45rem, 3vw, 2.25rem); line-height: 1.25; }
.intro { margin: 9px 0 0; color: #53616b; }

.controls, .transport {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid #d6dde1;
}
.controls { border-radius: 10px 10px 0 0; }
.transport { border-top: 0; border-radius: 0 0 10px 10px; }
.clip-picker { display: flex; align-items: center; gap: 9px; font-weight: 700; }
select { min-width: min(430px, 50vw); padding: 7px 9px; font: inherit; }
.factor-picker { display: flex; align-items: center; gap: 12px; margin: 0; padding: 0; border: 0; }
.factor-picker legend { float: left; margin-right: 10px; font-weight: 700; }
.factor-picker label { white-space: nowrap; }
button { padding: 8px 17px; border: 0; border-radius: 6px; background: #d85e17; color: white; font: inherit; font-weight: 800; cursor: pointer; }
button:disabled, input:disabled, select:disabled { cursor: not-allowed; opacity: .55; }
#seek { flex: 1; min-width: 140px; accent-color: #d85e17; }
#time-display { min-width: 94px; color: #45525b; font-variant-numeric: tabular-nums; }
.status { min-height: 1.4em; margin: 12px 0; color: #53616b; font-size: .9rem; }
.status.error { color: #a02121; }

.visuals { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.panel { min-width: 0; margin: 0; overflow: hidden; background: #fff; border: 1px solid #cfd7dc; border-radius: 10px; box-shadow: 0 2px 7px #17222d12; }
figcaption { padding: 11px 14px; font-weight: 800; font-size: .94rem; }
figcaption span { display: block; margin-top: 3px; color: #64727c; font-size: .78rem; font-weight: 500; }
canvas { display: block; width: 100%; height: auto; }
.silhouette-panel { background: #000; border-color: #1e1e1e; }
.silhouette-panel figcaption { color: #f5f5f0; }
.silhouette-panel figcaption span { color: #bababa; }

@media (max-width: 900px) {
  .visuals { grid-template-columns: 1fr; }
  .controls { align-items: flex-start; flex-wrap: wrap; }
  select { min-width: min(100%, 430px); }
}

@media (max-width: 560px) {
  .page-shell { width: min(100% - 20px, 1320px); padding-top: 20px; }
  .controls, .transport { padding: 12px; gap: 10px; }
  .transport { flex-wrap: wrap; }
  #seek { flex-basis: 58%; }
}