/* Cinematography course: tungsten amber and daylight blue. */
:root {
  --accent: #ffbf5a;
  --accent-2: #63c8ff;
  --accent-ink: #1a1003;
}

/* Letterbox bars on the course cover feel like a cinema screen. */
.course-hero__cover { background: #000; }

/* Frame guides drawn over a viewfinder are on the canvas; these are the legend chips. */
.legend { display: flex; flex-wrap: wrap; gap: 6px 16px; padding: 8px 14px; border-top: 1px solid var(--line); font-size: 12px; color: var(--ink-3); }
.legend i { display: inline-block; width: 10px; height: 10px; margin-right: 6px; border-radius: 2px; vertical-align: -1px; }
.legend .k-a { background: #ffbf5a; }
.legend .k-b { background: #63c8ff; }
.legend .k-c { background: #ff6a5c; }
.legend .k-d { background: #7ff5c8; }

/* Meter for exposure: a scale from −3 to +3 stops. */
.meter { position: relative; height: 34px; margin: 0 14px 12px; border: 1px solid var(--line-2); border-radius: 3px; background: linear-gradient(90deg, #10131a, #2a3446 40%, #56657d 50%, #2a3446 60%, #10131a); }
.meter span { position: absolute; top: 100%; transform: translateX(-50%); font-size: 10px; color: var(--ink-3); padding-top: 2px; }
.meter b { position: absolute; top: -4px; bottom: -4px; width: 3px; margin-left: -1.5px; background: var(--accent); box-shadow: 0 0 8px var(--accent); transition: left 160ms; }
.meter-wrap { padding: 12px 0 14px; border-top: 1px solid var(--line); }
.meter-wrap .ctl { padding: 0 14px 8px; }

.move-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 6px; }
.move-grid button { min-height: 44px; }

.lab__stage--portrait { display: grid; place-items: center; background: #050608; }
.lab__stage--portrait canvas { width: min(100%, 460px); image-rendering: auto; }

.lab__stage--cont { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.lab__stage--cont .shots { display: grid; gap: 2px; }
@media (max-width: 640px) { .lab__stage--cont { grid-template-columns: 1fr; } }