.preview-section { padding-bottom: 54px; }
.preview-heading { margin-bottom: 30px; }
.preview-heading h2 { max-width: 16ch; }
.preview-heading > p { max-width: 46ch; }
.preview-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.72fr) minmax(245px, .58fr);
  gap: clamp(24px, 4.5vw, 68px);
  align-items: center;
}
.preview-viewer { min-width: 0; }
.preview-stage {
  position: relative;
  min-height: 390px;
  aspect-ratio: 1.58;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid #5d5144;
  background: radial-gradient(ellipse at 50% 47%, #3a3730, #25231f 73%);
  cursor: grab;
  touch-action: pan-y;
}
.preview-stage:active { cursor: grabbing; }
.preview-stage canvas,
.preview-stage iframe { position: absolute; inset: 0; width: 100%; height: 100%; display: block; border: 0; }
.preview-stage canvas { touch-action: pan-y; }
.preview-stage iframe { display: none; background: #25231f; }
.preview-stage.is-live iframe { display: block; }
.preview-stage.is-live canvas,
.preview-stage.is-live .offline-preview-ui,
.preview-stage.is-live .preview-fallback { display: none; }
.preview-fallback {
  position: absolute;
  z-index: 2;
  top: 16px;
  left: 17px;
  padding: 6px 8px;
  border: 1px solid #71604a;
  background: #24221ee8;
  color: #f1c876;
  font: 9px/1.4 var(--mono);
  letter-spacing: .035em;
}
.preview-fallback.is-hidden { display: none; }
.offline-preview-ui { position: absolute; inset: 0; pointer-events: none; }
.preview-layer-tags { position: absolute; top: 14px; left: 14px; display: grid; gap: 5px; }
.preview-layer-tags span { padding: 7px 9px; border: 1px solid #8a703c; background: #24221edc; color: var(--paper); font: 8px/1.3 var(--mono); }
.preview-layer-tags span + span { border-color: #655c4f; }
.preview-ray-card {
  position: absolute;
  top: 14px;
  left: 50%;
  width: min(245px, 32%);
  display: grid;
  gap: 4px;
  padding: 9px 11px 10px;
  transform: translateX(-50%);
  border: 1px solid #5d5144;
  border-radius: 8px;
  background: #24221ee8;
  color: var(--paper);
  font: 8px/1.35 var(--mono);
}
.preview-ray-card b { color: #e2b45c; letter-spacing: .08em; }
.preview-ray-card > i { height: 2px; overflow: hidden; margin-top: 2px; background: #514b41; }
.preview-ray-card > i > span { display: block; width: 35%; height: 100%; background: #e2b45c; transition: width .25s linear; }
.preview-fin-plan { position: absolute; top: 73px; right: 13px; width: 154px; display: grid; gap: 8px; padding: 9px 10px; border: 1px solid #5d5144; border-radius: 9px; background: #24221edc; color: var(--paper); font: 8px/1.35 var(--mono); }
.preview-fin-plan b { color: #d2a249; letter-spacing: .08em; }
.preview-fin-plan > span { color: #ddd5c9; }
.preview-fin-plan > div { display: flex; height: 42px; align-items: end; justify-content: space-around; border-bottom: 1px solid #b6aa98; }
.preview-fin-plan i { display: block; width: 2px; height: 24px; background: #d2a249; transform-origin: bottom; }
.preview-fin-plan i:nth-child(2), .preview-fin-plan i:nth-child(4) { height: 34px; }
.preview-date { position: absolute; bottom: 15px; left: 16px; padding: 7px 9px; border: 1px solid #655c4f; background: #24221edc; color: var(--paper); font: 9px/1.2 var(--mono); font-variant-numeric: tabular-nums; }
.preview-stage-foot { position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%); color: #c9bdaa; font: 8px/1.3 var(--mono); white-space: nowrap; }
.preview-controls { display: flex; min-height: 54px; align-items: center; flex-wrap: wrap; gap: 6px; padding-top: 9px; color: var(--light); font: 9px/1.3 var(--mono); }
.preview-control-set { display: inline-flex; gap: 3px; padding: 3px; border: 1px solid #5d5144; border-radius: 7px; }
.preview-control-set button { min-height: 34px; padding: 5px 9px; border: 1px solid transparent; border-radius: 5px; background: transparent; color: #d8d0c4; font: 9px/1.2 var(--mono); cursor: pointer; }
.preview-control-set button[aria-pressed="true"] { border-color: #d2a249; background: #d2a24922; color: #f1c876; }
.preview-control-set button:hover { color: var(--paper); }
.preview-control-set button:focus-visible,
.preview-controls > button:focus-visible { outline: 2px solid #e8ab87; outline-offset: 2px; }
.preview-control-hint { flex: 1 1 auto; min-width: 80px; text-align: right; }
.preview-controls > button { min-width: 38px; min-height: 38px; padding: 0 9px; border: 1px solid #726557; background: transparent; color: var(--paper); font: 11px/1 var(--mono); cursor: pointer; }
.preview-controls > button:hover { border-color: #e8ab87; color: #e8ab87; }
.preview-brief { padding: 8px 0 0; }
.preview-brief .label { color: #e8ab87; }
.preview-brief > p:not(.label) { max-width: 39ch; margin-top: 12px; color: var(--light); font-size: 13px; line-height: 1.65; }
.preview-brief dl { margin: 24px 0 22px; border-top: 1px solid #5d5144; }
.preview-brief dl > div { display: grid; grid-template-columns: 34px 1fr; gap: 12px; padding: 9px 0; border-bottom: 1px solid #5d5144; }
.preview-brief dt { color: #e8ab87; font: 10px/1.4 var(--mono); }
.preview-brief dd { margin: 0; color: var(--paper); font: 12px/1.4 var(--mono); }
.preview-brief .primary-action { display: inline-flex; align-items: center; gap: 18px; margin-top: 1px; background: #e8ab87; color: #211c17; }
.preview-brief .primary-action:hover { background: var(--paper); }
.preview-brief small { display: block; margin-top: 13px; color: #c9bdaa; font: 9px/1.5 var(--mono); }

@media (max-width: 900px) {
  .preview-grid { grid-template-columns: minmax(0, 1.35fr) minmax(220px, .65fr); gap: 28px; }
  .preview-stage { min-height: 340px; }
  .preview-ray-card { width: min(210px, 34%); }
}
@media (max-width: 700px) {
  .preview-grid { grid-template-columns: 1fr; gap: 24px; }
  .preview-stage { min-height: 0; aspect-ratio: 1.12; }
  .preview-brief { max-width: 540px; }
  .preview-brief dl { margin-top: 18px; }
}
@media (max-width: 480px) {
  .preview-stage { aspect-ratio: .96; }
  .preview-layer-tags { top: 9px; left: 9px; }
  .preview-layer-tags span { padding: 5px 6px; font-size: 7px; }
  .preview-ray-card { top: 9px; width: 35%; padding: 6px 7px; font-size: 7px; }
  .preview-fin-plan { top: 68px; right: 8px; width: 128px; padding: 7px; font-size: 7px; }
  .preview-date { bottom: 8px; left: 8px; padding: 6px; font-size: 8px; }
  .preview-stage-foot { display: none; }
  .preview-controls { gap: 5px; }
  .preview-cycle-set { margin-left: auto; }
  .preview-control-hint { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .preview-ray-card > i > span { transition: none; }
}

#previewContextToggle { min-width: 82px; }

/* The live study reads as one instrument: model, mode, timeline and context. */
.preview-section {
  padding-top: clamp(48px, 6vw, 82px);
  padding-bottom: clamp(42px, 5vw, 64px);
}

.preview-heading {
  grid-template-columns: minmax(0, 1.1fr) minmax(280px, .9fr);
  align-items: end;
  gap: clamp(24px, 5vw, 80px);
  margin-bottom: clamp(28px, 4vw, 46px);
}

.preview-heading h2 {
  max-width: 16ch;
  font-size: clamp(48px, 6vw, 88px);
  line-height: .94;
  text-wrap: balance;
}

.preview-heading > p {
  max-width: 48ch;
  font-size: 16px;
  line-height: 1.55;
}

.preview-grid {
  grid-template-columns: minmax(0, 1.68fr) minmax(250px, .62fr);
  gap: clamp(26px, 4.2vw, 64px);
  align-items: stretch;
}

.preview-stage {
  min-height: 390px;
  max-height: 700px;
  aspect-ratio: 1.62;
  border-color: #62594e;
  background: radial-gradient(ellipse at 50% 46%, #3b3831 0, #25231f 74%);
}

.preview-controls {
  display: grid;
  grid-template-columns: auto auto auto minmax(90px, 1fr) auto;
  align-items: end;
  gap: clamp(7px, 1.2vw, 14px);
  min-height: 0;
  margin-top: 12px;
  padding-top: 13px;
  border-top: 1px solid #5d5144;
}

.preview-control-group {
  display: grid;
  align-content: end;
  gap: 5px;
  min-width: 0;
}

.preview-control-label {
  color: #c9bdaa;
  font: 8px/1.25 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
}

.preview-control-set {
  gap: 0;
  padding: 2px;
  border-radius: 3px;
}

.preview-control-set button {
  min-height: 38px;
  padding: 6px 10px;
  border-radius: 2px;
  font-size: 10px;
  white-space: nowrap;
  transition: color 160ms ease, background-color 160ms ease, border-color 160ms ease;
}

.preview-control-set button[aria-pressed="true"] {
  border-color: #e8ab87;
  background: #e8ab87;
  color: #211c17;
}

.preview-control-set button:disabled {
  color: #91877b;
  cursor: not-allowed;
  opacity: .62;
}

.preview-context-group > button,
.preview-view-controls > button {
  min-height: 42px;
  border: 1px solid #726557;
  border-radius: 2px;
  background: transparent;
  color: var(--paper);
  font: 10px/1.2 var(--mono);
  cursor: pointer;
  transition: color 160ms ease, background-color 160ms ease, border-color 160ms ease;
}

.preview-context-group > button {
  padding: 0 10px;
  white-space: nowrap;
}

.preview-view-controls {
  display: flex;
  align-items: end;
  gap: 4px;
}

.preview-view-controls > button {
  min-width: 40px;
  padding: 0 9px;
}

.preview-context-group > button:hover,
.preview-view-controls > button:hover {
  border-color: #e8ab87;
  color: #e8ab87;
}

.preview-view-controls > button:active,
.preview-context-group > button:active {
  transform: scale(.97);
}

.preview-controls button:focus-visible {
  outline: 2px solid #e8ab87;
  outline-offset: 3px;
}

.preview-control-hint {
  max-width: 24ch;
  color: #c9bdaa;
  font: 9px/1.4 var(--mono);
}

.preview-brief {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  padding: 8px 0 0 clamp(18px, 2vw, 30px);
  border-left: 1px solid #5d5144;
}

.preview-brief > p:not(.label) {
  max-width: 36ch;
  margin-top: 12px;
  font-size: 14px;
  line-height: 1.6;
}

.preview-brief dl {
  width: 100%;
  margin: 24px 0 20px;
}

.preview-brief dl > div {
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 8px;
  padding: 11px 0;
}

.preview-brief dt {
  font-size: 9px;
  letter-spacing: .04em;
}

.preview-brief dd {
  font: 11px/1.45 var(--mono);
}

.preview-brief .primary-action {
  gap: 20px;
  margin-top: auto;
  padding-inline: 16px;
}

.preview-brief small {
  max-width: 37ch;
  margin-top: 12px;
  font: 11px/1.5 var(--sans);
}

@media (max-width: 1050px) {
  .preview-heading {
    grid-template-columns: minmax(0, 1.1fr) minmax(250px, .9fr);
  }

  .preview-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 26px;
  }

  .preview-stage {
    max-height: 660px;
  }

  .preview-brief {
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    grid-template-areas:
      "kicker details"
      "summary details"
      "action note";
    align-items: start;
    gap: 8px 32px;
    padding: 20px 0 0;
    border-top: 1px solid #5d5144;
    border-left: 0;
  }

  .preview-brief .label { grid-area: kicker; }
  .preview-brief > p:not(.label) { grid-area: summary; }
  .preview-brief dl { grid-area: details; margin: 0; }
  .preview-brief .primary-action { grid-area: action; margin-top: 8px; }
  .preview-brief small { grid-area: note; margin-top: 10px; }
}

@media (max-width: 700px) {
  .preview-section { padding-top: 42px; }
  .preview-heading {
    grid-template-columns: minmax(0, 1fr);
    gap: 17px;
    margin-bottom: 24px;
  }
  .preview-heading h2 { max-width: 16ch; font-size: clamp(44px, 11vw, 66px); }
  .preview-heading > p { max-width: 50ch; font-size: 15px; }
  .preview-stage { min-height: 0; max-height: none; aspect-ratio: 1.12; }
  .preview-controls {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 11px 10px;
  }
  .preview-cycle-set { margin-left: 0; }
  .preview-control-set button { min-height: 42px; padding-inline: 9px; }
  .preview-context-group { grid-column: 1; }
  .preview-view-controls { grid-column: 2; justify-self: end; }
  .preview-control-hint { grid-column: 1 / -1; max-width: none; }
  .preview-brief {
    display: block;
    padding-top: 19px;
  }
  .preview-brief dl { margin: 18px 0; }
  .preview-brief .primary-action { margin-top: 4px; }
}

@media (max-width: 480px) {
  .preview-stage { aspect-ratio: 1.04; }
  .preview-controls { gap: 10px 8px; }
  .preview-control-hint { display: block; text-align: left; }
  .preview-control-set button { padding-inline: 7px; font-size: 9px; }
  .preview-context-group > button { padding-inline: 8px; font-size: 9px; }
  .preview-view-controls > button { min-width: 38px; padding-inline: 7px; }
}

@media (prefers-reduced-motion: reduce) {
  .preview-controls button,
  .preview-brief .primary-action,
  .preview-ray-card > i > span { transition: none; }
}

/* Simulation time stays legible above either the local canvas or live model. */
.preview-clock {
  position: absolute;
  z-index: 5;
  top: 14px;
  left: 14px;
  display: grid;
  grid-template-columns: 38px auto;
  align-items: center;
  gap: 10px;
  min-width: 148px;
  min-height: 58px;
  padding: 7px 11px;
  border: 1px solid #71604a;
  border-radius: 3px;
  background: rgba(36, 34, 30, .94);
  color: var(--paper);
  pointer-events: none;
  font-variant-numeric: tabular-nums;
}
.preview-clock-face { width: 38px; height: 38px; overflow: visible; fill: none; stroke: #d2a249; stroke-width: 1.15; }
.preview-clock-ticks { stroke: #b6aa98; stroke-width: 1.1; }
.preview-clock-hand { stroke: #f4efe6; stroke-linecap: round; stroke-width: 1.6; transform: rotate(var(--clock-hour-angle, 0deg)); transform-box: view-box; transform-origin: 50% 50%; transition: transform 220ms cubic-bezier(.2,.75,.25,1); }
.preview-clock-hand-minute { stroke: #e8ab87; stroke-width: 1.2; transform: rotate(var(--clock-minute-angle, 0deg)); }
.preview-clock-pin { fill: #e8ab87; stroke: none; }
.preview-clock-reading { display: grid; justify-items: start; gap: 1px; }
.preview-clock-kicker { color: #d2a249; font: 7px/1.2 var(--mono); letter-spacing: .13em; }
.preview-clock-time { color: var(--paper); font: 500 19px/.98 var(--mono); letter-spacing: -.07em; }
.preview-clock-date { color: #c9bdaa; font: 8px/1.25 var(--mono); letter-spacing: .08em; }
.preview-stage.is-live .preview-clock { display: grid; }
.offline-preview-ui .preview-layer-tags { top: 82px; }
.offline-preview-ui .preview-layer-tags span { max-width: 228px; }
@media (max-width: 480px) {
  .preview-clock { top: 8px; left: 8px; grid-template-columns: 33px auto; gap: 7px; min-width: 142px; min-height: 52px; padding: 5px 8px; }
  .preview-clock-face { width: 33px; height: 33px; }
  .preview-clock-time { font-size: 17px; }
  .preview-ray-card { top: 8px; right: 8px; left: auto; width: calc(100% - 168px); min-width: 130px; max-width: 190px; padding: 7px; transform: none; }
  .preview-fin-plan { top: 86px; }
  .offline-preview-ui .preview-layer-tags { top: 145px; left: 8px; width: max-content; max-width: calc(100% - 160px); }
  .offline-preview-ui .preview-layer-tags span { max-width: 100%; padding: 5px 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
@media (prefers-reduced-motion: reduce) {
  .preview-clock-hand { transition: none; }
}

.preview-control-set .preview-mode-link { display: inline-flex; min-height: 38px; align-items: center; padding: 6px 10px; border: 1px solid transparent; border-radius: 2px; color: #d8d0c4; font: 10px/1.2 var(--mono); text-decoration: none; white-space: nowrap; transition: color 160ms ease, background-color 160ms ease, border-color 160ms ease; }
.preview-control-set .preview-mode-link:hover { color: var(--paper); }
.preview-control-set .preview-mode-link:focus-visible { outline: 2px solid #e8ab87; outline-offset: 2px; }

.preview-stage[data-analysis="wind"] .preview-clock { display:none; }
.preview-control-set button:disabled, .preview-controls > button:disabled { opacity:.42; cursor:default; }

/* Live loading and error messages remain visible above the embedded viewer. */
.preview-stage.is-live .preview-fallback { display:block; z-index:8; top:auto; bottom:76px; left:18px; max-width:calc(100% - 36px); }
.preview-stage.is-live .preview-fallback.is-hidden { display:none; }
.preview-retry { position:absolute; z-index:9; left:18px; bottom:32px; min-height:36px; padding:7px 12px; border:1px solid #e8ab87; background:#25231f; color:#f4efe6; font:11px var(--mono); cursor:pointer; }
.preview-retry[hidden] { display:none; }
.preview-retry:focus-visible { outline:2px solid #e8ab87; outline-offset:3px; }

/* Homepage wind controls share the existing study panel's typography and rules. */
.preview-wind-panel { min-width:0; margin:24px 0; padding:22px 0 0; border:0; border-top:1px solid #5d5144; color:var(--paper); }
.preview-wind-panel[hidden] { display:none; }
.preview-wind-panel legend { padding:0 12px 0 0; font:14px/1.4 var(--mono); color:#e8ab87; }
.preview-wind-slider { display:grid; gap:13px; margin-bottom:22px; font:12px/1.4 var(--mono); }
.preview-wind-slider > span { display:flex; justify-content:space-between; gap:12px; }
.preview-wind-slider output { color:#e8ab87; font-variant-numeric:tabular-nums; white-space:nowrap; }
.preview-wind-slider input { width:100%; min-height:24px; margin:0; accent-color:#e8ab87; cursor:pointer; }
.preview-wind-check { display:flex; gap:10px; align-items:center; font:12px/1.4 var(--mono); cursor:pointer; }
.preview-wind-check input { width:17px; height:17px; margin:0; accent-color:#e8ab87; }
.preview-wind-panel > .preview-wind-check { margin-bottom:20px; }
.preview-wind-actions { display:flex; gap:16px; align-items:center; justify-content:space-between; flex-wrap:wrap; }
.preview-wind-actions button { min-height:42px; padding:10px 14px; border:1px solid #726557; background:transparent; color:var(--paper); font:12px/1.3 var(--mono); cursor:pointer; }
.preview-wind-actions button:hover { border-color:#e8ab87; }
.preview-wind-panel input:focus-visible, .preview-wind-panel button:focus-visible { outline:2px solid #e8ab87; outline-offset:4px; }
.preview-wind-panel:disabled { opacity:.5; }
.preview-wind-panel input:disabled, .preview-wind-panel button:disabled { cursor:default; opacity:.5; }
@media (max-width:700px) { .preview-wind-panel { max-width:540px; } }

.preview-wind-panel { width:100%; box-sizing:border-box; }
@media (min-width:701px) and (max-width:1050px) { .preview-brief { grid-template-areas:"kicker details" "summary details" "controls controls" "action note"; } .preview-wind-panel { grid-area:controls; } }