/* Sky Director was a light notebook around one dark camera frame, deliberately
   standalone so none of its rules reached the processing workspace. Standalone
   it stayed; light it no longer is. On a site that is dark in both colour
   schemes because the reader's eye is dark-adapted, one white page reads as a
   different product — which is what the operator called it on 2026-09-03. The
   camera frame it is built around was always dark; the notebook now matches the
   rest of the site and the tokens below are the site's own. The rules underneath
   are unchanged: everything speaks through these fourteen names. */
.sky-director-page {
  color-scheme: dark;
  --sky-page: #0d1015;
  --sky-card: #151a22;
  --sky-ink: #f2f4f8;
  --sky-soft: #aeb6c5;
  --sky-line: #2f3847;
  --sky-line-strong: #8494a4;
  --sky-primary: #d9a441;
  --sky-primary-dark: #e6b459;
  --sky-focus: #9fc2e8;
  --sky-warn: #e2a04a;
  --sky-night: #09131f;
  --sky-night-soft: #14283a;
  --sky-blue: #7fc8ee;
  --sky-gold: #f3b84d;
  --sky-green: #69d2ae;
  --sky-red: #ff8f78;
  background: var(--sky-page);
}

.sky-director-page body {
  overflow-x: clip;
  background: var(--sky-page);
  color: var(--sky-ink);
  font-family: var(--ui);
}

/* The frame comes from `.wrap` like every other route; this page used to set a
   width and a padding of its own, which put its brand six pixels off the site. */
.sky-director-page .sky-director-wrap { width: min(100%, var(--wrap)); }

.sky-director-page header.site-header {
  margin-bottom: clamp(1.25rem, 3vw, 2.5rem);
  border-bottom: 1px solid var(--sky-line);
}
.sky-director-page header.site-header a.brand,
.sky-director-page header.site-header nav a[aria-current="page"] { color: var(--sky-ink); }
.sky-director-page header.site-header nav a { color: var(--sky-primary-dark); }
.sky-director-page a { color: var(--sky-primary-dark); }
.sky-director-page .site-footer { color: var(--sky-soft); border-color: var(--sky-line); }
.sky-director-page .site-footer a { display: inline-flex; min-width: 44px; min-height: 44px; align-items: center; justify-content: center; }

.sky-skip {
  position: fixed;
  inset: 0 auto auto 0;
  z-index: 100;
  min-height: 44px;
  padding: 0.7rem 1rem;
  transform: translateY(-120%);
  background: var(--sky-card);
  color: var(--sky-ink);
  border: 2px solid var(--sky-focus);
  font: 700 0.9rem/1.3 var(--ui);
}
.sky-skip:focus { transform: translateY(0); }

.sky-director-page :is(a, button, input, select, [tabindex="0"]):focus-visible {
  outline: 3px solid var(--sky-focus);
  outline-offset: 3px;
}

.sky-intro { max-width: 64rem; margin-bottom: 1.5rem; }
.sky-intro .lede {
  max-width: 61rem;
  margin-bottom: 0.8rem;
  color: var(--sky-ink);
  font: 500 clamp(1rem, 1.6vw, 1.2rem)/1.55 var(--ui);
}
.sky-intro .eyebrow,
.sky-step {
  margin: 0 0 0.2rem;
  color: var(--sky-primary-dark);
  font: 750 0.72rem/1.3 var(--ui);
  letter-spacing: 0.11em;
  text-transform: uppercase;
}
.sky-intro h1 { max-width: 52rem; margin-bottom: 0.65rem; color: var(--sky-ink); }
.sky-intro-note { max-width: 58rem; color: var(--sky-soft); font: 0.93rem/1.55 var(--ui); }

.sky-director-layout { display: grid; gap: 1rem; align-items: start; }
@media (min-width: 66rem) {
  .sky-director-layout { grid-template-columns: minmax(28rem, 32rem) minmax(0, 1fr); gap: 1.25rem; }
  .sky-stage { position: sticky; top: 0.75rem; max-height: calc(100vh - 1.5rem); overflow-y: auto; scrollbar-gutter: stable; }
}

.sky-controls,
.sky-stage {
  min-width: 0;
  padding: clamp(0.9rem, 2vw, 1.25rem);
  border: 1px solid var(--sky-line);
  border-radius: 16px;
  background: var(--sky-card);
  box-shadow: 0 6px 20px rgba(27, 51, 70, 0.07);
}
.sky-controls-heading,
.sky-stage-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.6rem 1rem;
  margin-bottom: 0.9rem;
}
.sky-controls-heading h2,
.sky-stage-heading h2 { margin: 0; color: var(--sky-ink); }
.sky-local-badge {
  display: inline-flex;
  min-height: 32px;
  align-items: center;
  padding: 0.35rem 0.65rem;
  border: 1px solid #8bbbab;
  border-radius: 999px;
  background: #14231d;
  color: #7fb98a;
  font: 750 0.72rem/1.2 var(--ui);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.sky-controls fieldset {
  min-width: 0;
  margin: 0;
  padding: 1rem 0;
  border: 0;
  border-top: 1px solid var(--sky-line);
}
.sky-controls legend { padding: 0; color: var(--sky-ink); font: 750 1rem/1.35 var(--ui); }
.sky-controls .field-help { margin: 0.45rem 0 0.75rem; color: var(--sky-soft); font: 0.8rem/1.5 var(--ui); }
.sky-control-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.65rem; }
@media (min-width: 28rem) {
  .sky-control-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sky-wide-control { grid-column: 1 / -1; }
}
.sky-controls label { min-width: 0; color: var(--sky-ink); font: 700 0.78rem/1.35 var(--ui); }
.sky-controls label > span { display: block; color: var(--sky-soft); font-weight: 500; }
.sky-controls :is(input, select) {
  display: block;
  width: 100%;
  min-width: 0;
  min-height: 46px;
  margin-top: 0.3rem;
  padding: 0.55rem 0.65rem;
  border: 1px solid var(--sky-line-strong);
  border-radius: 8px;
  background: var(--sky-card);
  color: var(--sky-ink);
  font: 650 0.96rem/1.2 var(--data);
  font-variant-numeric: tabular-nums;
}
.sky-controls select { font-family: var(--ui); }
.sky-controls :is(input, select):hover { border-color: var(--sky-primary); }
.sky-controls :is(input, select)[aria-invalid="true"] { border-color: var(--sky-warn); box-shadow: 0 0 0 1px var(--sky-warn); }

.sky-action-block { padding-top: 0.25rem; }
.sky-primary-action,
.sky-secondary-action,
.sky-tertiary-action {
  display: inline-flex;
  min-width: 44px;
  min-height: 46px;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  padding: 0.7rem 1rem;
  cursor: pointer;
  font: 750 0.94rem/1.2 var(--ui);
}
.sky-primary-action { width: 100%; border: 1px solid var(--sky-primary); background: var(--sky-primary); color: #17120a; }
.sky-primary-action:hover { background: var(--sky-primary-dark); }
.sky-primary-action:disabled { cursor: not-allowed; opacity: 0.55; }
.sky-secondary-action { border: 1px solid var(--sky-primary); background: var(--sky-card); color: var(--sky-primary-dark); }
.sky-secondary-action:hover { background: #1b222d; }
.sky-tertiary-action { border: 1px solid var(--sky-line-strong); background: var(--sky-card); color: var(--sky-ink); }
.sky-tertiary-action:hover:not(:disabled) { border-color: var(--sky-primary); background: #1b222d; }
:is(.sky-secondary-action, .sky-tertiary-action):disabled { cursor: not-allowed; opacity: 0.58; }
.sky-status {
  min-height: 2.6rem;
  margin: 0.65rem 0 0;
  padding: 0.55rem 0.7rem;
  border-left: 3px solid var(--sky-primary);
  background: #141b24;
  color: var(--sky-soft);
  font: 0.82rem/1.45 var(--ui);
}
.sky-status[data-level="error"] { border-color: var(--sky-warn); background: #241a10; color: #e2a04a; }
.sky-status[data-level="success"] { border-color: #4f8f78; background: #14231d; color: #7fb98a; }

.sky-scene-id {
  max-width: 17rem;
  margin: 0;
  overflow-wrap: anywhere;
  color: var(--sky-soft);
  font: 0.72rem/1.4 var(--data);
  text-align: end;
}
.sky-visual {
  min-width: 0;
  overflow: hidden;
  border: 1px solid #2b4255;
  border-radius: 12px;
  background: var(--sky-night);
}
#sky-scene { display: block; width: 100%; height: auto; min-height: 15rem; background: var(--sky-night); }
#sky-scene :is(path, line, rect, circle, polygon) { vector-effect: non-scaling-stroke; }
#sky-scene:focus-visible { outline-color: var(--sky-gold); outline-offset: -5px; }
.sky-empty-frame { fill: var(--sky-night-soft); stroke: #3d5a70; stroke-width: 2; }
.sky-empty-text { fill: #e8f2f8; font: 650 25px/1.2 var(--ui); }
.sky-empty-subtext { fill: #9fb2c1; font: 17px/1.2 var(--ui); }
.sky-frame-background { fill: var(--sky-night); }
.sky-photo-backdrop { opacity: 0.56; pointer-events: none; }
.sky-frame-border { fill: none; stroke: #6f879a; stroke-width: 1.5; }
.sky-centre-line { stroke: #294257; stroke-width: 1; stroke-dasharray: 6 8; }
.sky-horizon-path { fill: none; stroke: var(--sky-gold); stroke-width: 2; stroke-linecap: round; }
.sky-trail-sequence { fill: none; stroke: rgba(127, 200, 238, 0.62); stroke-width: 2; stroke-linecap: round; }
.sky-trail-sequence.is-centre { stroke: var(--sky-blue); stroke-width: 3; }
.sky-trail-exposure { fill: none; stroke: var(--sky-green); stroke-width: 5; stroke-linecap: round; }
.sky-trail-gap { stroke: var(--sky-red); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 2 5; }
.sky-target-mark { fill: var(--sky-night); stroke: #ffffff; stroke-width: 2.5; }
.sky-target-cross { stroke: #ffffff; stroke-width: 1.5; }
.sky-pole-mark { fill: var(--sky-gold); stroke: var(--sky-night); stroke-width: 1.5; }
.sky-body-mark .sky-body-symbol { stroke-width: 4; }
.sky-sun-mark .sky-body-symbol { fill: var(--sky-gold); stroke: #fff0b8; }
.sky-moon-mark .sky-body-symbol { fill: #dce7ef; stroke: #ffffff; }
.sky-svg-label { fill: #eef7fc; paint-order: stroke; stroke: var(--sky-night); stroke-width: 5px; stroke-linejoin: round; font: 650 120px/1 var(--ui); }
.sky-body-label { font-size: 105px; }
.sky-orientation-overlay { pointer-events: none; }
.sky-orientation-guide { fill: none; stroke: #d7f5ff; stroke-width: 4; stroke-dasharray: 18 14; }
.sky-orientation-line { stroke: #d7f5ff; stroke-width: 5; stroke-linecap: round; }
.sky-orientation-arrow { fill: #d7f5ff; stroke: var(--sky-night); stroke-width: 2; }
.sky-orientation-centre { fill: var(--sky-night); stroke: #d7f5ff; stroke-width: 4; }
.sky-orientation-label { fill: #ffffff; paint-order: stroke; stroke: var(--sky-night); stroke-width: 5px; font: 650 84px/1 var(--ui); }
.sky-svg-note { fill: #b6c9d7; paint-order: stroke; stroke: var(--sky-night); stroke-width: 5px; font: 500 92px/1 var(--ui); }
.sky-detail-background { fill: #14283a; stroke: #47657d; stroke-width: 1.5; }
.sky-detail-heading { fill: #eef7fc; font: 700 100px/1 var(--ui); }
.sky-detail-values { fill: #b6c9d7; font: 500 82px/1 var(--data); }
.sky-detail-exposure { stroke: var(--sky-green); stroke-width: 7; stroke-linecap: round; }
.sky-detail-gap { stroke: var(--sky-red); stroke-width: 7; stroke-linecap: round; stroke-dasharray: 3 7; }

.sky-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem 0.9rem;
  margin: 0.6rem 0 0.9rem;
  color: var(--sky-soft);
  font: 0.72rem/1.3 var(--ui);
}
.sky-legend span { display: inline-flex; align-items: center; gap: 0.35rem; }
.sky-legend i { display: inline-block; width: 1.35rem; height: 0; border-top: 3px solid; }
.sky-legend .legend-horizon { border-color: var(--sky-focus); }
.sky-legend .legend-sequence { border-color: var(--sky-primary); }
.sky-legend .legend-exposure { border-color: #4f8f78; }
.sky-legend .legend-gap { border-color: #b74730; border-top-style: dashed; }
.sky-legend .legend-pole { width: 0.75rem; height: 0.75rem; border: 0; background: var(--sky-focus); transform: rotate(45deg); }
.sky-legend :is(.legend-sun, .legend-moon) { width: 0.78rem; height: 0.78rem; border: 2px solid; border-radius: 50%; }
.sky-legend .legend-sun { border-color: #9a6500; background: var(--sky-gold); }
.sky-legend .legend-moon { border-color: #687c8d; background: #2a3542; }

.sky-local-photo,
.sky-share {
  min-width: 0;
  margin-top: 0.9rem;
  padding: 0.85rem;
  border: 1px solid var(--sky-line);
  border-radius: 10px;
  background: var(--sky-card);
}
.sky-local-photo > header,
.sky-share > header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.45rem 0.85rem;
}
.sky-local-photo h3,
.sky-share h3 { margin: 0; color: var(--sky-ink); font: 750 1rem/1.3 var(--ui); }
.sky-local-photo > p,
.sky-share-copy,
.sky-share-next { margin: 0.55rem 0 0; color: var(--sky-soft); font: 0.78rem/1.5 var(--ui); }
.sky-local-photo-actions,
.sky-share-actions { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.55rem; margin-top: 0.75rem; }
.sky-local-photo-actions > *,
.sky-share-actions > * { flex: 1 1 13rem; }
.sky-file-action {
  display: grid;
  gap: 0.35rem;
  min-width: 0;
  color: var(--sky-ink);
  font: 700 0.76rem/1.35 var(--ui);
}
.sky-file-action input[type="file"] {
  display: block;
  width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: 0.45rem;
  border: 1px solid var(--sky-line-strong);
  border-radius: 7px;
  background: var(--sky-card);
  color: var(--sky-soft);
  font: 0.72rem/1.3 var(--ui);
}
.sky-local-photo-status,
.sky-share-status {
  min-height: 2.2rem;
  margin: 0.65rem 0 0;
  padding: 0.5rem 0.65rem;
  border-left: 3px solid var(--sky-primary);
  background: var(--sky-card);
  color: var(--sky-soft);
  font: 0.75rem/1.45 var(--ui);
}
:is(.sky-local-photo-status, .sky-share-status)[data-level="error"] { border-color: var(--sky-warn); background: #241a10; color: #e2a04a; }
:is(.sky-local-photo-status, .sky-share-status)[data-level="success"] { border-color: #4f8f78; background: #14231d; color: #7fb98a; }

.sky-share { margin-bottom: 0.9rem; border-color: #46536a; background: #141b24; }
.sky-share-preview {
  display: block;
  width: 100%;
  margin-top: 0.65rem;
  padding: 0.65rem;
  border: 1px solid #90acbe;
  border-radius: 8px;
  background: var(--sky-card);
  color: var(--sky-ink);
  font: 0.76rem/1.45 var(--data);
  overflow-wrap: anywhere;
}
.sky-share-consent {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.55rem;
  align-items: start;
  margin-top: 0.7rem;
  color: var(--sky-ink);
  font: 0.77rem/1.45 var(--ui);
}
.sky-share-consent input { width: 44px; height: 44px; margin: 0; }
.sky-share-next { font-size: 0.72rem; }

.sky-qr {
  min-width: 0;
  margin-top: 0.85rem;
  padding-top: 0.85rem;
  border-top: 1px solid #90acbe;
}
.sky-qr h4 {
  margin: 0;
  color: var(--sky-ink);
  font: 750 0.92rem/1.35 var(--ui);
}
.sky-qr code {
  color: var(--sky-ink);
  font: 650 0.72rem/1.35 var(--data);
  overflow-wrap: anywhere;
}
.sky-qr-generate {
  width: 100%;
  margin-top: 0.75rem;
}
.sky-qr-result {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  gap: 0.65rem;
  margin-top: 0.75rem;
  padding: clamp(0.55rem, 2vw, 0.85rem);
  border: 1px solid #90acbe;
  border-radius: 10px;
  background: var(--sky-card);
}
.sky-qr-result[hidden] { display: none; }
.sky-qr-canvas {
  box-sizing: border-box;
  width: min(34rem, calc(100vw - 4.5rem));
  max-width: 100%;
  min-width: 0;
  justify-self: center;
  aspect-ratio: 1;
  padding: clamp(0.25rem, 1vw, 0.5rem);
  overflow: hidden;
  background: #ffffff;
}
.sky-qr-svg {
  display: block;
  width: 100%;
  max-width: 100%;
  height: 100%;
  /* THE QUIET ZONE IS THE ELEMENT'S OWN, NOT THE PAGE'S. Scaled up, the element
     is larger than the square its viewBox draws, and the uncovered edge used to
     show a light page. On a dark one that edge is dark, the quiet zone is gone
     and the code stops decoding. */
  background: #ffffff;
  color: #000000;
}
.sky-qr-background { fill: #ffffff; }
.sky-qr-pixels { fill: #000000; }
.sky-qr-link {
  display: inline-flex;
  min-width: 44px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--sky-primary);
  border-radius: 8px;
  text-align: center;
  font: 700 0.78rem/1.35 var(--ui);
}

.sky-orientation {
  min-width: 0;
  min-height: 17.5rem;
  margin: 0 0 0.9rem;
  padding: 0.85rem;
  border: 1px solid var(--sky-line);
  border-radius: 10px;
  background: var(--sky-card);
}
.sky-orientation > header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.45rem 0.85rem;
}
.sky-orientation h3 { margin: 0; color: var(--sky-ink); font: 750 1rem/1.3 var(--ui); }
.sky-orientation-badge {
  display: inline-flex;
  min-height: 32px;
  align-items: center;
  padding: 0.3rem 0.65rem;
  border: 1px solid var(--sky-line-strong);
  border-radius: 999px;
  background: var(--sky-card);
  color: var(--sky-soft);
  font: 750 0.7rem/1.2 var(--ui);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.sky-orientation[data-state="active"] .sky-orientation-badge { border-color: #4f8f78; background: #14231d; color: #7fb98a; }
.sky-orientation[data-state="denied"] .sky-orientation-badge,
.sky-orientation[data-state="unavailable"] .sky-orientation-badge,
.sky-orientation[data-state="error"] .sky-orientation-badge { border-color: var(--sky-warn); background: #241a10; color: #e2a04a; }
.sky-orientation-copy { margin: 0.55rem 0 0; color: var(--sky-soft); font: 0.78rem/1.5 var(--ui); }
.sky-orientation-actions { display: flex; flex-wrap: wrap; gap: 0.55rem; margin-top: 0.75rem; }
.sky-orientation-actions :is(button) { flex: 1 1 11rem; }
.sky-orientation-status,
.sky-orientation-reading {
  display: block;
  width: 100%;
  overflow-wrap: anywhere;
  color: var(--sky-soft);
  font: 0.76rem/1.45 var(--ui);
}
.sky-orientation-status { min-height: 2.3rem; margin: 0.7rem 0 0; }
.sky-orientation-reading {
  min-height: 2.65rem;
  margin-top: 0.45rem;
  padding: 0.55rem 0.65rem;
  border-left: 3px solid var(--sky-line-strong);
  background: var(--sky-card);
  font-family: var(--data);
  font-variant-numeric: tabular-nums;
}
.sky-orientation[data-state="active"] .sky-orientation-reading { border-color: #4f8f78; color: var(--sky-ink); }

.sky-text-alternative {
  max-width: none;
  margin: 0 0 0.8rem;
  color: var(--sky-ink);
  font: 0.9rem/1.55 var(--ui);
}
.sky-result-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.55rem; }
@media (min-width: 32rem) { .sky-result-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 78rem) { .sky-result-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.sky-result-grid article { min-width: 0; padding: 0.75rem; border: 1px solid var(--sky-line); border-radius: 9px; background: var(--sky-card); }
.sky-result-grid :is(span, strong, small) { display: block; }
.sky-result-grid span { color: var(--sky-soft); font: 0.72rem/1.3 var(--ui); }
.sky-result-grid strong { margin-top: 0.2rem; overflow-wrap: anywhere; color: var(--sky-ink); font: 750 0.98rem/1.3 var(--data); }
.sky-result-grid small { margin-top: 0.2rem; color: var(--sky-soft); font: 0.7rem/1.4 var(--ui); }

.sky-ephemeris {
  min-width: 0;
  margin-top: 0.9rem;
  padding: 0.85rem;
  border: 1px solid #aab9c6;
  border-radius: 10px;
  background: var(--sky-card);
}
.sky-ephemeris > header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.4rem 0.9rem;
}
.sky-ephemeris h3 { margin: 0; color: var(--sky-ink); font: 750 1rem/1.3 var(--ui); }
#sky-twilight-sample {
  max-width: 28rem;
  margin: 0;
  color: var(--sky-soft);
  font: 650 0.72rem/1.45 var(--data);
  font-variant-numeric: tabular-nums;
  text-align: end;
}
.sky-ephemeris-limit,
.sky-ephemeris-text { color: var(--sky-soft); font: 0.76rem/1.48 var(--ui); }
.sky-ephemeris-limit { margin: 0.45rem 0 0; }
.sky-ephemeris-text { margin: 0.55rem 0 0; }
.sky-ephemeris-bodies { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.55rem; margin-top: 0.65rem; }
@media (min-width: 32rem) { .sky-ephemeris-bodies { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sky-ephemeris-bodies article {
  min-width: 0;
  min-height: 6.3rem;
  padding: 0.7rem;
  border: 1px solid var(--sky-line);
  border-radius: 8px;
  background: var(--sky-card);
}
.sky-ephemeris-bodies :is(span, strong, small) { display: block; }
.sky-ephemeris-bodies span { color: var(--sky-soft); font: 0.7rem/1.3 var(--ui); }
.sky-ephemeris-bodies strong { margin-top: 0.2rem; color: var(--sky-ink); font: 750 0.9rem/1.35 var(--data); font-variant-numeric: tabular-nums; }
.sky-ephemeris-bodies small { margin-top: 0.2rem; color: var(--sky-soft); font: 0.68rem/1.38 var(--ui); }

.sky-table-scroll {
  max-width: 100%;
  margin-top: 0.9rem;
  overflow-x: auto;
  border: 1px solid var(--sky-line);
  border-radius: 9px;
  background: var(--sky-card);
}
.sky-data-table { width: 100%; min-width: 44rem; border-collapse: collapse; color: var(--sky-ink); font: 0.76rem/1.35 var(--ui); }
.sky-data-table caption { padding: 0.65rem 0.75rem; color: var(--sky-soft); font-weight: 650; text-align: left; }
.sky-data-table :is(th, td) { padding: 0.55rem 0.65rem; border-top: 1px solid var(--sky-line); text-align: right; font-variant-numeric: tabular-nums; }
.sky-data-table :is(th, td):first-child { position: sticky; left: 0; background: var(--sky-card); text-align: left; }
.sky-data-table thead th { background: #1b222d; color: var(--sky-soft); }
.sky-data-table thead th:first-child { background: #1b222d; }
.sky-data-table tr[data-centre="true"] td { background: #141b24; font-weight: 700; }
.sky-twilight-scroll { margin-top: 0.65rem; }
.sky-twilight-table { min-width: 35rem; }
.sky-twilight-table :is(th, td) { text-align: left; }

.sky-export-panel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem 1rem;
  margin-top: 0.9rem;
  padding: 0.85rem;
  border: 1px solid #8bbbab;
  border-radius: 9px;
  background: #14231d;
}
.sky-export-panel h3 { margin: 0 0 0.2rem; color: var(--sky-ink); font: 750 0.95rem/1.3 var(--ui); }
.sky-export-panel p { max-width: 38rem; margin: 0; color: var(--sky-soft); font: 0.76rem/1.45 var(--ui); }

.sky-limitations { margin-top: 0.9rem; padding: 0.85rem 0.95rem; border-left: 4px solid var(--sky-focus); background: #141b24; }
.sky-limitations h3 { margin: 0 0 0.45rem; color: var(--sky-ink); font: 750 0.95rem/1.3 var(--ui); }
.sky-limitations ul { margin: 0; padding-left: 1.1rem; color: var(--sky-soft); font: 0.78rem/1.5 var(--ui); }
.sky-limitations li { max-width: none; }

@media (max-width: 27.99rem) {
  .sky-controls, .sky-stage { padding: 0.8rem; border-radius: 12px; }
  .sky-stage-heading { display: block; }
  .sky-scene-id { margin-top: 0.35rem; text-align: start; }
  #sky-twilight-sample { text-align: start; }
  #sky-scene { min-height: 12rem; }
  .sky-export-panel { align-items: stretch; }
  .sky-secondary-action { width: 100%; }
  .sky-local-photo-actions > *,
  .sky-share-actions > * { flex-basis: 100%; width: 100%; }
  .sky-orientation { min-height: 21rem; }
  .sky-orientation-actions :is(button) { width: 100%; flex-basis: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .sky-director-page *,
  .sky-director-page *::before,
  .sky-director-page *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}

@media (prefers-contrast: more) {
  .sky-director-page { --sky-line: #728292; --sky-line-strong: #c3cbd8; }
  .sky-controls, .sky-stage, .sky-result-grid article { box-shadow: none; }
}