/* Amrita — Scene Builder (the interactive clay set) · owned by js/setlab.js */

.setlab {
  --sl-ink: #fff;
  --sl-ink-2: rgba(255, 255, 255, .74);
  --sl-ink-3: rgba(255, 255, 255, .52);
  --sl-glass: rgba(30, 33, 42, .36);
  --sl-glass-hi: rgba(30, 33, 42, .5);
  --sl-line: rgba(255, 255, 255, .2);
  --sl-dark: #1f222b;
  --sl-mono: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
  --sl-sans: "Inter Tight", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --sl-r: 28px;
  --sl-thumb: 14px;
  position: relative;
  width: 100%;
  height: clamp(560px, 86vh, 940px);
  /* never taller than the screen it sits on (a phone on its side is only ~390 px tall) */
  height: clamp(min(560px, calc(100svh - 24px)), 86svh, 940px);
  container-type: inline-size;
  container-name: sl;
  color: var(--sl-ink);
  font-family: var(--sl-sans);
  -webkit-tap-highlight-color: transparent;
}

.sl {
  position: absolute; inset: 0; overflow: hidden; isolation: isolate;
  border-radius: var(--sl-r);
  background: radial-gradient(120% 90% at 50% 18%, #c6c9d0 0%, #a9adb7 60%, #9ea3ae 100%);
  box-shadow: 0 60px 120px -40px rgba(38, 42, 56, .5), 0 18px 40px -24px rgba(38, 42, 56, .35);
}
.sl::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 6;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .26);
  transition: box-shadow .4s ease;
}
.sl.is-exploring::after { box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .78); }

/* ---------- stage ---------- */
.sl-stage { position: absolute; inset: 0; outline: none; }
.sl-stage:focus-visible { outline: 2px solid #fff; outline-offset: -5px; border-radius: var(--sl-r); }
.sl-canvas {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block;
  cursor: grab; opacity: 0; transition: opacity .9s ease;
}
.sl-canvas:active { cursor: grabbing; }
.sl.is-ready .sl-canvas { opacity: 1; }

/* the first impression while the set builds: a still of the wireframe set the live scene grows from */
.sl-poster {
  position: absolute; inset: 0; pointer-events: none;
  background: url("../assets/img/setlab-poster.webp") center 40% / cover no-repeat;
  opacity: .96; transition: opacity 1.2s ease .9s;
}
.sl.is-ready .sl-poster { opacity: 0; }
.sl.is-failed .sl-poster { opacity: .5; }

.sl-loading {
  position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 14px; text-align: center;
  font-family: var(--sl-mono); font-size: 10.5px; letter-spacing: .26em; text-transform: uppercase; color: var(--sl-ink);
  transition: opacity .7s ease; pointer-events: none; padding: 24px;
}
.sl-loading span { padding: 9px 16px; border-radius: 999px; background: rgba(30, 33, 42, .32); border: 1px solid rgba(255, 255, 255, .2); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.sl-loading i { position: relative; display: block; width: 160px; height: 1px; background: rgba(255, 255, 255, .28); overflow: hidden; }
.sl-loading i::after { content: ""; position: absolute; inset: 0; width: 40%; background: #fff; animation: sl-load 1.6s cubic-bezier(.6, 0, .3, 1) infinite; }
@keyframes sl-load { from { transform: translateX(-100%); } to { transform: translateX(250%); } }
.sl.is-ready .sl-loading { opacity: 0; }
.sl.is-ready.is-lost .sl-loading { opacity: 1; }
/* a lost GPU context: the poster comes back under "Restoring the set" until the scene is rebuilt */
.sl.is-lost .sl-canvas { opacity: 0; transition: none; }
.sl.is-ready.is-lost .sl-poster { opacity: .96; transition-delay: 0s; transition-duration: .3s; }
.sl.is-failed .sl-loading { opacity: 1; letter-spacing: .12em; line-height: 1.7; max-width: 34em; margin: auto; }
.sl.is-failed .sl-loading i { display: none; }
.sl.is-failed .sl-panel, .sl.is-failed .sl-top__r { display: none; }

/* ---------- labels drawn over the set (cameras, marks, the hero prop) ---------- */
.sl-labels { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 1; }
.sl-glabel {
  position: absolute; left: 0; top: 0; display: flex; align-items: baseline; gap: 8px; white-space: nowrap;
  padding: 5px 9px; border-radius: 9px;
  font-family: var(--sl-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  background: rgba(24, 27, 36, .5); border: 1px solid rgba(255, 255, 255, .32);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  opacity: 0; will-change: transform, opacity;
}
.sl-glabel b { font-weight: 500; }
.sl-glabel span { opacity: .62; font-size: 9px; }
.sl-glabel--soft { background: rgba(24, 27, 36, .32); border-color: rgba(255, 255, 255, .2); }

/* ---------- top row ---------- */
.sl-top {
  position: absolute; z-index: 3; top: 18px; left: 18px; right: 18px;
  display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; pointer-events: none;
}
.sl-top > * { pointer-events: auto; }
.sl-top__r { display: flex; align-items: center; gap: 8px; }
.sl-tag, .sl-hud {
  margin: 0; display: inline-flex; align-items: center; gap: 10px; min-height: 36px; padding: 0 14px; border-radius: 999px;
  font-family: var(--sl-mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; white-space: nowrap;
  background: var(--sl-glass); border: 1px solid var(--sl-line);
  -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4);
}
.sl-tag__look { opacity: .6; }
.sl-tag__look::before { content: "/"; margin-right: 10px; opacity: .6; }
.sl-dot { width: 7px; height: 7px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 0 rgba(255, 255, 255, .7); animation: sl-pulse 2.4s ease-out infinite; }
@keyframes sl-pulse { 0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, .6); } 80%, 100% { box-shadow: 0 0 0 9px rgba(255, 255, 255, 0); } }
.sl-hud { font-variant-numeric: tabular-nums; gap: 8px; }
.sl-hud b { font-weight: 500; }
.sl-hud i { font-style: normal; opacity: .45; }
.sl-hud__it { white-space: nowrap; }
.sl-hud em { font-style: normal; opacity: .6; }

.sl-explore {
  appearance: none; display: inline-flex; align-items: center; justify-content: center; min-height: 36px; padding: 0 16px; border-radius: 999px;
  font-family: var(--sl-mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--sl-ink); cursor: pointer; white-space: nowrap;
  background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .5);
  -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4);
  transition: background .25s, color .25s, border-color .25s;
}
.sl-explore:hover { background: rgba(255, 255, 255, .26); border-color: #fff; }
.sl-explore[aria-pressed="true"] { background: #fff; color: var(--sl-dark); border-color: #fff; }
.sl-explore__b, .sl-explore[aria-pressed="true"] .sl-explore__a { display: none; }
.sl-explore[aria-pressed="true"] .sl-explore__b { display: inline; }

.sl-hint {
  position: absolute; z-index: 4; left: 50%; top: 66px; max-width: calc(100% - 32px); margin: 0;
  transform: translate(-50%, -6px); opacity: 0; pointer-events: none; text-align: center;
  padding: 9px 14px; border-radius: 999px; font-family: var(--sl-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  background: var(--sl-glass-hi); border: 1px solid var(--sl-line);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  transition: opacity .35s ease, transform .35s ease;
}
.sl.has-hint .sl-hint { opacity: 1; transform: translate(-50%, 0); }

/* ---------- the control bar ---------- */
.sl-panel {
  position: absolute; z-index: 3; left: 16px; right: 16px; bottom: 16px; box-sizing: border-box;
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; padding: 10px 18px 10px 10px; border-radius: 22px;
  background: var(--sl-glass); border: 1px solid var(--sl-line);
  -webkit-backdrop-filter: blur(22px) saturate(1.5); backdrop-filter: blur(22px) saturate(1.5);
  box-shadow: 0 20px 50px -18px rgba(16, 18, 26, .45);
}
.sl-sheetbar { display: contents; }
.sl-grab { display: none; }

.sl-cams { display: flex; gap: 3px; padding: 3px; border-radius: 16px; background: rgba(255, 255, 255, .07); flex: 0 0 auto; }
.sl-cam {
  appearance: none; border: 0; margin: 0; background: transparent; color: inherit; cursor: pointer; text-align: left;
  display: grid; gap: 3px; padding: 8px 12px; border-radius: 13px; min-width: 0;
  font-family: var(--sl-mono); transition: background .2s, color .2s;
}
.sl-cam b { font-size: 11px; font-weight: 500; letter-spacing: .14em; }
.sl-cam span { font-size: 9.5px; letter-spacing: .05em; opacity: .62; white-space: nowrap; }
.sl-cam em { font-style: normal; }
.sl-cam:hover { background: rgba(255, 255, 255, .12); }
.sl-cam[aria-pressed="true"] { background: #fff; color: var(--sl-dark); }
.sl-cam[aria-pressed="true"] span { opacity: .7; }

.sl-fields { display: flex; align-items: center; gap: 22px; flex: 1 1 560px; min-width: 0; }
.sl-more { display: contents; }
.sl-field { flex: 1 1 0; min-width: 120px; }
.sl-field__row {
  display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 2px;
  font-family: var(--sl-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
}
.sl-field__row label { opacity: .72; white-space: nowrap; }
.sl-field__row output { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ranges */
.sl input[type="range"] {
  --p: 0%;
  -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 22px; margin: 0; background: transparent; cursor: pointer;
}
.sl input[type="range"]:focus { outline: none; }
.sl input[type="range"]::-webkit-slider-runnable-track { height: 2px; border-radius: 2px; background: linear-gradient(90deg, #fff var(--p), rgba(255, 255, 255, .28) var(--p)); }
.sl input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; width: var(--sl-thumb); height: var(--sl-thumb); margin-top: calc(1px - var(--sl-thumb) / 2); border-radius: 50%; border: 0;
  background: #fff; box-shadow: 0 0 0 4px rgba(255, 255, 255, .16), 0 2px 8px rgba(0, 0, 0, .25); transition: transform .2s ease, box-shadow .2s ease;
}
.sl input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.18); }
.sl input[type="range"]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px var(--sl-dark), 0 0 0 5px #fff; }
.sl input[type="range"]::-moz-range-track { height: 2px; border-radius: 2px; background: rgba(255, 255, 255, .28); }
.sl input[type="range"]::-moz-range-progress { height: 2px; border-radius: 2px; background: #fff; }
.sl input[type="range"]::-moz-range-thumb { width: var(--sl-thumb); height: var(--sl-thumb); border: 0; border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px rgba(255, 255, 255, .16); }
.sl input[type="range"]:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 3px var(--sl-dark), 0 0 0 5px #fff; }
/* the look and the hour draw their own ranges: clay into colour, dawn into night */
.sl-field--look input[type="range"]::-webkit-slider-runnable-track { height: 3px; background: linear-gradient(90deg, #ddd9d1 0%, #e9cdbf 38%, #efbfac 52%, #2e8b88 74%, #b31f29 100%); }
.sl-field--look input[type="range"]::-moz-range-track { height: 3px; background: linear-gradient(90deg, #ddd9d1 0%, #e9cdbf 38%, #efbfac 52%, #2e8b88 74%, #b31f29 100%); }
.sl-field--look input[type="range"]::-moz-range-progress { background: transparent; }
.sl-field--time input[type="range"]::-webkit-slider-runnable-track { height: 3px; background: linear-gradient(90deg, #f2b79a 0%, #9cc3ea 30%, #8fb8e6 40%, #ffbf7a 62%, #e0805f 75%, #33386a 86%, #0e1330 100%); }
.sl-field--time input[type="range"]::-moz-range-track { height: 3px; background: linear-gradient(90deg, #f2b79a 0%, #9cc3ea 30%, #8fb8e6 40%, #ffbf7a 62%, #e0805f 75%, #33386a 86%, #0e1330 100%); }
.sl-field--time input[type="range"]::-moz-range-progress { background: transparent; }
.sl-field--look input[type="range"]::-webkit-slider-thumb, .sl-field--time input[type="range"]::-webkit-slider-thumb { margin-top: calc(1.5px - var(--sl-thumb) / 2); }

/* ticks under a range */
.sl-ticks { position: relative; height: 15px; }
.sl-ticks > * {
  position: absolute; top: 0; left: calc(var(--sl-thumb) / 2 + var(--x) * (100% - var(--sl-thumb))); transform: translateX(-50%);
  appearance: none; margin: 0; padding: 1px 3px; border: 0; border-radius: 5px; background: none; color: inherit; cursor: default;
  font-family: var(--sl-mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; opacity: .52; white-space: nowrap; line-height: 13px;
}
.sl-field--look .sl-ticks > :first-child, .sl-field--time .sl-ticks > :first-child { left: 0; transform: none; padding-left: 0; }
.sl-field--look .sl-ticks > :last-child, .sl-field--time .sl-ticks > :last-child { left: 100%; transform: translateX(-100%); padding-right: 0; }
button.sl-tick { cursor: pointer; transition: opacity .2s, background .2s; }
/* a finger-sized hit area around each small tick, without changing the layout */
button.sl-tick::before { content: ""; position: absolute; inset: -5px -6px -7px; }
button.sl-tick:hover { opacity: 1; }
button.sl-tick:focus-visible, .sl-cam:focus-visible, .sl-toggle:focus-visible, .sl-explore:focus-visible, .sl-grab:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.sl-toggle {
  appearance: none; flex: 0 0 auto; display: inline-flex; align-items: center; gap: 9px; min-height: 36px; padding: 0 14px; border-radius: 13px; cursor: pointer;
  font-family: var(--sl-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; color: inherit;
  background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .18); transition: background .2s, border-color .2s;
}
.sl-toggle:hover { background: rgba(255, 255, 255, .14); }
.sl-toggle__box { position: relative; width: 14px; height: 14px; border-radius: 4px; border: 1.5px solid rgba(255, 255, 255, .8); transition: background .2s; }
.sl-toggle[aria-pressed="true"] { border-color: rgba(255, 255, 255, .55); background: rgba(255, 255, 255, .16); }
.sl-toggle[aria-pressed="true"] .sl-toggle__box { background: #fff; border-color: #fff; }
.sl-toggle[aria-pressed="true"] .sl-toggle__box::after { content: ""; position: absolute; left: 3.5px; top: 0.5px; width: 3.5px; height: 7.5px; border: solid var(--sl-dark); border-width: 0 1.8px 1.8px 0; transform: rotate(45deg); }

.sl-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- mid widths: two rows ---------- */
@container sl (max-width: 1140px) {
  .sl-panel { padding: 10px 14px 10px 10px; }
  .sl-fields { flex-basis: 100%; padding: 0 4px 2px; }
}

/* ---------- phones and narrow frames: a bottom sheet ---------- */
@container sl (max-width: 759px) {
  .setlab, .sl { --sl-thumb: 24px; }
  .sl { border-radius: 22px; }
  .sl-poster { background-image: url("../assets/img/setlab-poster-tall.webp"); background-position: center top; }
  .sl-top { top: 10px; left: 10px; right: 10px; }
  .sl-tag { display: none; }
  .sl-top__r { width: 100%; justify-content: space-between; }
  .sl-hud { min-height: 38px; padding: 0 10px; font-size: 9px; letter-spacing: .06em; gap: 5px; }
  .sl-explore { min-height: 44px; padding: 0 14px; font-size: 9.5px; letter-spacing: .1em; }
  .sl-hint { top: 62px; border-radius: 16px; line-height: 1.5; }

  .sl-panel { left: 8px; right: 8px; bottom: 8px; display: block; padding: 2px 10px 12px; border-radius: 20px; }
  /* the sheet's top row: the handle, and Explore within thumb reach */
  .sl-sheetbar { display: flex; align-items: center; gap: 8px; padding: 4px 0 6px; }
  .sl-sheetbar .sl-explore { flex: none; min-height: 44px; }
  .sl-grab {
    appearance: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; flex: 1 1 auto; min-width: 0; min-height: 44px;
    margin: 0; padding: 6px 0 4px; border: 0; background: none; color: inherit; cursor: pointer;
    font-family: var(--sl-mono); font-size: 9px; letter-spacing: .18em; text-transform: uppercase;
  }
  /* an open sheet never covers more than ~55 % of the frame: the cameras step aside, and the rest scrolls inside */
  .sl.is-more .sl-panel { max-height: calc(var(--sl-stage-h, 640px) * .55); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
  .sl.is-more .sl-panel::-webkit-scrollbar { display: none; }
  .sl.is-more .sl-cams { display: none; }
  .sl.is-more .sl-fields { margin-top: 0; }
  .sl-grab__bar { width: 38px; height: 4px; border-radius: 4px; background: rgba(255, 255, 255, .55); }
  .sl-grab__t { opacity: .7; }
  .sl-grab__t::after { content: " ▴"; }
  .sl.is-more .sl-grab__t::after { content: " ▾"; }
  .sl-cams { overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; border-radius: 15px; }
  .sl-cams::-webkit-scrollbar { display: none; }
  .sl-cams { justify-content: space-between; }
  .sl-cam { flex: 1 0 auto; min-height: 48px; padding: 8px 10px; scroll-snap-align: start; text-align: center; justify-items: center; }
  .sl-cam b { font-size: 10.5px; letter-spacing: .1em; }
  .sl-cam span { font-size: 9px; }
  .sl-cam em { display: none; }
  .sl-fields { display: block; margin-top: 8px; padding: 0 4px; }
  .sl-field { margin-top: 6px; }
  .sl input[type="range"] { height: 40px; }
  .sl-ticks { height: 22px; }
  .sl-ticks > * { font-size: 9.5px; line-height: 20px; padding: 0 6px; }
  .sl-more {
    display: block; max-height: 0; overflow: hidden; opacity: 0; visibility: hidden;
    transition: max-height .45s cubic-bezier(.2, .7, .1, 1), opacity .3s ease, visibility 0s linear .45s;
  }
  .sl.is-more .sl-more { max-height: 340px; opacity: 1; visibility: visible; transition: max-height .45s cubic-bezier(.2, .7, .1, 1), opacity .3s ease .05s, visibility 0s; }
  .sl-toggle { margin-top: 12px; min-height: 46px; width: 100%; justify-content: center; }
  .sl-glabel { font-size: 9px; padding: 4px 7px; }
}

/* phones: no text under 12 px (every label in the set is mono) */
@container sl (max-width: 759px) {
  .sl-hud { flex-wrap: wrap; white-space: normal; row-gap: 2px; column-gap: 6px; min-height: 38px; padding: 6px 12px; border-radius: 19px; font-size: 12px; letter-spacing: .03em; line-height: 1.35; }
  .sl-explore, .sl-sheetbar .sl-explore { font-size: 12px; letter-spacing: .08em; }
  .sl-hint, .sl-loading, .sl.is-failed .sl-loading { font-size: 12px; letter-spacing: .08em; }
  .sl-grab { font-size: 12px; letter-spacing: .12em; }
  .sl-cam b { font-size: 12px; letter-spacing: .06em; }
  .sl-cam span { font-size: 12px; letter-spacing: 0; }
  .sl-field__row { font-size: 12px; letter-spacing: .08em; }
  .sl-ticks { height: 24px; }
  .sl-ticks > * { font-size: 12px; letter-spacing: .04em; line-height: 22px; padding: 0 4px; }
  .sl-toggle { font-size: 12px; letter-spacing: .1em; }
  .sl-glabel, .sl-glabel span { font-size: 12px; letter-spacing: .06em; }
  .sl-glabel { padding: 4px 8px; gap: 6px; }
}

@container sl (max-width: 345px) {
  .sl-explore__w { display: none; }
}

/* the smallest phones: five equal camera buttons, FREE always in view */
@container sl (max-width: 360px) {
  .sl-cams { display: grid; grid-template-columns: repeat(5, 1fr); overflow: visible; }
  .sl-cam { min-width: 0; padding: 8px 2px; }
  .sl-cam b { font-size: 12px; letter-spacing: 0; white-space: nowrap; }
  .sl-cam span { display: none; }
}

/* a phone on its side (and any very short window): the set fills the screen, one slim row of controls */
@media (orientation: landscape) and (max-height: 500px) {
  .setlab { height: calc(100vh - 16px); height: calc(100svh - 16px); }
  .sl { border-radius: 18px; }
  .sl-top { top: 8px; left: 8px; right: 8px; }
  .sl-tag { display: none; }
  .sl-top__r { width: 100%; justify-content: space-between; }
  .sl-hud { min-height: 34px; padding: 0 12px; font-size: 12px; letter-spacing: .03em; gap: 6px; }
  .sl-explore { min-height: 40px; padding: 0 14px; font-size: 12px; letter-spacing: .08em; }
  .sl-hint { top: 52px; font-size: 12px; letter-spacing: .08em; }
  .sl-loading, .sl.is-failed .sl-loading { font-size: 12px; letter-spacing: .08em; }
  .sl-field__row, .sl-toggle { font-size: 12px; letter-spacing: .08em; }
  .sl-ticks > *, .sl-more .sl-ticks > * { font-size: 12px; letter-spacing: .04em; }
  .sl-glabel, .sl-glabel span { font-size: 12px; letter-spacing: .06em; }

  .sl-panel { left: 8px; right: 8px; bottom: 8px; display: flex; flex-wrap: nowrap; align-items: center; gap: 10px; padding: 6px 8px 6px 6px; border-radius: 18px; max-height: none; overflow: visible; }
  .sl.is-more .sl-panel { max-height: none; overflow: visible; }
  .sl-cams, .sl.is-more .sl-cams { display: flex; order: 1; flex: 0 0 auto; overflow: visible; border-radius: 13px; }
  .sl-cam { flex: 0 0 auto; min-height: 40px; padding: 4px 9px; text-align: center; justify-items: center; gap: 1px; }
  .sl-cam b { font-size: 12px; letter-spacing: .04em; }
  .sl-cam span { display: block; font-size: 12px; letter-spacing: 0; }
  .sl-cam em { display: none; }
  .sl-fields { order: 2; display: block; flex: 1 1 auto; min-width: 110px; margin: 0; padding: 0 2px; }
  .sl-field--look { margin: 0; }
  .sl-field--look .sl-ticks { display: none; }
  .sl-field__row { margin-bottom: 0; }
  .sl input[type="range"] { height: 28px; }
  .sl-sheetbar { order: 3; display: flex; padding: 0; }
  .sl-grab {
    appearance: none; display: inline-flex; flex-direction: row; align-items: center; justify-content: center; gap: 6px; width: auto; min-height: 40px; padding: 0 12px;
    margin: 0; border-radius: 12px; cursor: pointer; color: inherit; white-space: nowrap;
    font-family: var(--sl-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
    background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .18);
  }
  .sl-grab__bar { display: none; }
  .sl-grab__t { opacity: .85; }
  .sl-grab__t::after { content: " ▴"; }
  .sl.is-more .sl-grab__t::after { content: " ▾"; }
  .sl.is-more .sl-grab { background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .5); }
  /* time of day, lens and the camera map open as a small glass card above the bar */
  .sl-more, .sl.is-more .sl-more {
    position: absolute; right: 0; bottom: calc(100% + 8px); width: min(400px, 100%); max-height: none; overflow: visible;
    display: block; padding: 10px 14px 12px; border-radius: 18px;
    background: var(--sl-glass-hi); border: 1px solid var(--sl-line);
    -webkit-backdrop-filter: blur(22px) saturate(1.5); backdrop-filter: blur(22px) saturate(1.5);
    box-shadow: 0 20px 50px -18px rgba(16, 18, 26, .5);
  }
  .sl-more { opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .25s ease, transform .3s ease, visibility 0s linear .3s; }
  .sl.is-more .sl-more { opacity: 1; visibility: visible; transform: none; transition: opacity .25s ease, transform .3s ease, visibility 0s; }
  .sl-more .sl-field { margin-top: 2px; }
  .sl-more .sl-field + .sl-field { margin-top: 8px; }
  .sl-more .sl-ticks { height: 20px; }
  .sl-more .sl-ticks > * { line-height: 18px; }
  .sl-toggle { margin-top: 8px; min-height: 40px; width: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .sl *, .sl *::before, .sl *::after { transition: none !important; animation: none !important; }
}

/* before the set's script has arrived, the empty root already shows the set as a wireframe still */
.setlab:empty {
  border-radius: var(--sl-r);
  /* no image here: the poster belongs to the mounted set, which the page mounts only as the section approaches */
  background: radial-gradient(120% 90% at 50% 18%, #c6c9d0 0%, #a9adb7 60%, #9ea3ae 100%);
  box-shadow: 0 60px 120px -40px rgba(38, 42, 56, .5), 0 18px 40px -24px rgba(38, 42, 56, .35), inset 0 0 0 1px rgba(255, 255, 255, .26);
}
.setlab:empty::after {
  content: "Building the set"; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); white-space: nowrap;
  padding: 9px 16px; border-radius: 999px; background: rgba(30, 33, 42, .32); border: 1px solid rgba(255, 255, 255, .2);
  font-family: var(--sl-mono); font-size: 10.5px; letter-spacing: .26em; text-transform: uppercase; color: #fff;
}
@media (max-width: 759px) {
  .setlab:empty { border-radius: 22px; }
  .setlab:empty::after { font-size: 12px; letter-spacing: .16em; }
}