/* The rendering lenses share the observatory's typography and mineral colors. */
.observatory .canvas-topline { gap: 15px; z-index: 8; }
.render-lenses { display: flex; align-items: center; gap: 3px; padding: 3px; margin-right: auto; border: 1px solid var(--border); border-radius: 7px; background: var(--abyss); }
.render-lenses button { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 5px 9px; min-height: 28px; color: var(--text-muted); font: 10px var(--font-display); border-radius: 4px; white-space: nowrap; transition: color .2s, background .2s; }
.render-lenses button > span { font-size: 14px; line-height: 1; }
.render-lenses button:hover { color: var(--text); background: var(--surface); }
.render-lenses button[aria-pressed="true"] { color: var(--life); background: var(--elevated); box-shadow: 0 1px 6px #0001; }
.render-lenses button:focus-visible, #resetTimeCamera:focus-visible { outline: 2px solid var(--life); outline-offset: 2px; }
.observatory #timeCanvas { position: absolute; z-index: 1; max-width: none; max-height: none; border: 0; cursor: grab; touch-action: none; outline-offset: 4px; }
.observatory #timeCanvas:active { cursor: grabbing; }
.observatory #timeCanvas:focus-visible { outline: 1px solid var(--life); }
.observatory #timeCanvas[hidden], .time-view-controls[hidden] { display: none; }
.observatory .time-guide { display: none; }
[data-render-view="time"] #gameCanvas { visibility: hidden; pointer-events: none; }
[data-render-view="time"] #fieldGuide, [data-render-view="time"] .zoom-controls, [data-render-view="time"] .cell-age-key, [data-render-view="time"] #canvasContextHint { display: none; }
[data-render-view="time"] .has-field-guide .time-guide { display: block; }
.time-guide { z-index: 3; }
.time-guide h2 { font-size: 39px; }
.time-strata-mark { position: relative; width: 65px; height: 70px; margin: 25px 0 10px; }
.time-strata-mark i { position: absolute; top: 0; left: 10px; width: 42px; height: 24px; border: 1px solid var(--life); transform: rotate(-30deg) skewX(30deg); opacity: .85; background: var(--life-glow); }
.time-strata-mark i:nth-child(2) { top: 9px; opacity: .6; }
.time-strata-mark i:nth-child(3) { top: 18px; opacity: .4; }
.time-strata-mark i:nth-child(4) { top: 27px; opacity: .25; }
.time-strata-mark i:nth-child(5) { top: 36px; opacity: .12; }
.time-view-controls { position: absolute; z-index: 4; bottom: 122px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; max-width: calc(100% - 30px); padding: 6px 9px 6px 13px; background: color-mix(in srgb, var(--abyss) 90%, transparent); border: 1px solid var(--border); border-radius: 7px; color: var(--text-muted); font: 9px var(--font-mono); white-space: nowrap; }
#timeLayerCount { color: var(--life); }
.time-controls-divider { width: 1px; height: 11px; background: var(--border-light); }
#resetTimeCamera { display: flex; align-items: center; justify-content: center; width: 26px; height: 24px; border-radius: 4px; color: var(--text-dim); font-size: 19px; }
#resetTimeCamera:hover { background: var(--elevated); color: var(--life); }
.observatory .field-actions > button:disabled { opacity: .3; cursor: default; }
.observatory .population-graph { height: 107px; padding-top: 11px; padding-bottom: 6px; }
.observatory #graphCanvas { height: 65px; min-height: 65px; flex: 1; width: 100%; display: block; }
.observatory .graph-header { height: 15px; }
.signal-legend { margin-left: auto; margin-right: 15px; display: flex; align-items: center; gap: 5px; color: var(--text-muted); font: 8px var(--font-mono); }
.signal-legend i { display: inline-block; width: 3px; height: 7px; margin-left: 8px; background: var(--life); opacity: .85; }
.signal-legend i:nth-of-type(2) { background: #ca9387; }
[data-theme="light"] .signal-legend i:nth-of-type(2) { background: #a76256; }
.observatory .field-caption { bottom: 122px; }
.observatory .canvas-container { padding-bottom: 147px; }
.observatory .zoom-controls { bottom: 161px; }
.observatory .coordinate-sw { bottom: 161px; }
.observatory.focus-mode .canvas-container { padding-bottom: 147px; }
[data-render-view="time"] .field-caption { bottom: 122px; }
[data-render-view="time"] .time-view-controls { bottom: 154px; }
@media (max-width: 1250px) {
  .observatory .canvas-kicker .field-kicker-text { display: none; }
  .observatory .canvas-kicker { gap: 0; }
  .observatory .canvas-topline { gap: 10px; }
}
@media (max-width: 900px) {
  .observatory .canvas-kicker { display: none; }
  .observatory .canvas-topline { gap: 5px; padding: 0 8px; }
  .render-lenses { gap: 1px; padding: 2px; }
  .render-lenses button { padding: 5px 7px; font-size: 10px; min-height: 28px; gap: 4px; }
  .render-lenses button > span { font-size: 12px; }
  .observatory .canvas-container { padding-bottom: 64px; }
  .observatory.focus-mode .canvas-container { padding-bottom: 97px; }
  .observatory .field-caption, [data-render-view="time"] .field-caption { bottom: 24px; }
  [data-render-view="time"] .time-view-controls { bottom: 22px; left: auto; right: 9px; transform: none; padding: 3px 5px 3px 9px; gap: 7px; font-size: 8px; }
  [data-render-view="time"] .field-caption > * { display: none; }
  [data-render-view="time"] .field-caption #mobileResetSceneBtn { display: block; }
  [data-render-view="time"] .time-guide, [data-render-view="time"] .has-field-guide .time-guide { display: none; }
  .observatory .zoom-controls { bottom: 18px; }
}
@media (max-width: 380px) {
  .render-lenses button { padding: 5px 6px; gap: 3px; font-size: 9px; }
  .observatory .field-actions { gap: 0; }
  .observatory .field-actions > button, .observatory .palette-picker summary { min-width: 26px; width: 26px; }
}
@media (max-width: 900px) and (max-height: 640px) {
  .observatory .canvas-container { padding-bottom: 47px; }
  .observatory .field-caption, [data-render-view="time"] .field-caption { bottom: 15px; }
  .observatory .zoom-controls { bottom: 9px; }
  [data-render-view="time"] .time-view-controls { bottom: 8px; }
}
@media (max-width: 900px) and (max-height: 500px) and (orientation: landscape) {
  .observatory .canvas-container, .observatory.focus-mode .canvas-container { padding: 44px 68px 45px; }
  .observatory .zoom-controls { bottom: 49px; }
  [data-render-view="time"] .time-view-controls { bottom: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .render-lenses button { transition: none; }
}
.time-depth-control { display: flex; align-items: center; gap: 7px; padding-left: 5px; }
.time-depth-control > span { font-size: 8px; }
.time-depth-control input { width: 66px; height: 3px; accent-color: var(--life); cursor: pointer; }
.time-depth-control input:focus-visible { outline: 2px solid var(--life); outline-offset: 4px; }
#saveTimePrint { display: flex; align-items: center; justify-content: center; width: 26px; height: 24px; border-radius: 4px; color: var(--text-dim); }
#saveTimePrint svg { width: 16px; height: 16px; }
#saveTimePrint:hover { background: var(--elevated); color: var(--life); }
#saveTimePrint:focus-visible { outline: 2px solid var(--life); outline-offset: 2px; }
#saveTimePrint[aria-busy="true"] { opacity: .5; cursor: progress; }
@media (max-width: 900px) {
  #timeInteractionHint, .time-depth-control > span { display: none; }
  .time-depth-control { padding-left: 0; }
  .time-depth-control input { width: 58px; }
}
.time-depth-control input::-webkit-slider-runnable-track { height: 3px; border-radius: 2px; background: var(--border-light); }
.time-depth-control input::-webkit-slider-thumb { -webkit-appearance: none; width: 10px; height: 10px; border-radius: 50%; margin-top: -3.5px; background: var(--life); box-shadow: 0 0 0 3px var(--life-glow); }
.time-depth-control input::-moz-range-track { height: 3px; border-radius: 2px; background: var(--border-light); }
.time-depth-control input::-moz-range-thumb { width: 10px; height: 10px; border: 0; border-radius: 50%; background: var(--life); }
@media (max-width: 900px) {
  .observatory[data-render-view="time"] #mobileSceneSelect { display: none; }
  .observatory[data-render-view="time"] .field-caption { right: auto; bottom: 26px; z-index: 5; }
  .observatory[data-render-view="time"] #mobileResetSceneBtn { width: 28px; height: 28px; margin: 0; }
}
@media (max-width: 900px) and (max-height: 640px) {
  .observatory[data-render-view="time"] .field-caption { bottom: 10px; }
}
@media (max-width: 900px) and (max-height: 500px) and (orientation: landscape) {
  [data-render-view="time"] .time-view-controls { right: 74px; }
}
.time-depth-control output { min-width: 32px; color: var(--life); font: 8px var(--font-mono); text-align: right; }
.time-history-note { position: absolute; bottom: 199px; left: 50%; transform: translateX(-50%); z-index: 4; max-width: calc(100% - 36px); padding: 5px 9px; border-radius: 4px; color: var(--text-muted); background: color-mix(in srgb, var(--deep) 86%, transparent); font: 8px var(--font-mono); text-align: center; white-space: nowrap; }
.time-history-note[hidden], .observatory:not([data-render-view="time"]) .time-history-note { display: none; }
@media (max-width: 900px) {
  [data-render-view="time"] .time-view-controls { gap: 5px; }
  .time-depth-control { gap: 4px; }
  .time-depth-control input { width: 44px; }
  .time-depth-control output { min-width: 25px; font-size: 7px; }
  .time-history-note { bottom: 64px; font-size: 7px; }
}
@media (max-width: 900px) and (max-height: 640px) {
  .time-history-note { bottom: 49px; }
}

/* Additional coordinates stay in a quiet studio beside the sculpture. */
.time-studio { position: absolute; z-index: 12; right: 18px; bottom: 195px; width: 258px; max-height: calc(100% - 265px); padding: 20px; overflow-y: auto; overscroll-behavior: contain; color: var(--text); background: var(--abyss); border: 1px solid var(--border-light); border-radius: 12px; box-shadow: 0 12px 50px #0003; scrollbar-width: thin; scrollbar-color: var(--border-light) transparent; }
.time-studio[hidden], .repeat-observation[hidden] { display: none; }
.has-field-guide .time-studio { top: 145px; bottom: auto; left: 38px; right: auto; width: 179px; max-height: calc(100% - 273px); padding: 0 3px 3px 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
[data-time-studio="open"][data-render-view="time"] .time-guide { display: none; }
.time-studio-heading, .studio-history-heading { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.time-studio .eyebrow { font: 7px var(--font-mono); letter-spacing: .13em; color: var(--text-muted); }
#closeTimeStudio { width: 24px; height: 24px; color: var(--text-muted); font: 19px var(--font-display); border-radius: 4px; }
#closeTimeStudio:hover { color: var(--text); background: var(--surface); }
.time-studio h3 { margin: 8px 0 10px; font: 32px/1.06 var(--font-editorial); letter-spacing: -.025em; white-space: nowrap; }
.time-studio h3 em { font-weight: 400; color: var(--life); }
.time-studio-intro { margin: 0 0 18px; color: var(--text-muted); font: 10px/1.7 var(--font-display); text-wrap: pretty; }
.time-form-switch, .time-projection-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; padding: 3px; border: 1px solid var(--border); border-radius: 6px; background: var(--abyss); }
.time-form-switch { margin: 0; }
.time-projection-switch { margin: 0 0 14px; }
.time-form-switch button, .time-projection-switch button { min-height: 27px; padding: 5px 6px; color: var(--text-muted); font: 9px var(--font-display); border-radius: 3px; }
.time-form-switch button:hover, .time-projection-switch button:hover { color: var(--text); background: var(--surface); }
.time-form-switch button[aria-pressed="true"], .time-projection-switch button[aria-pressed="true"] { background: var(--elevated); color: var(--life); }
.time-form-hint { min-height: 25px; margin: 7px 0 10px; color: var(--text-muted); font: 9px/1.4 var(--font-display); text-wrap: pretty; }
.studio-slider-label { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin: 0 0 5px; font: 10px var(--font-display); color: var(--text-dim); }
.studio-slider-label output { color: var(--life); font: 9px var(--font-mono); }
.studio-slider { display: block; appearance: none; -webkit-appearance: none; width: 100%; height: 18px; margin: 0; background: transparent; accent-color: var(--life); cursor: pointer; }
.studio-slider::-webkit-slider-runnable-track { height: 2px; background: var(--border-light); border-radius: 2px; }
.studio-slider::-webkit-slider-thumb { -webkit-appearance: none; height: 10px; width: 10px; margin-top: -4px; border-radius: 50%; background: var(--life); box-shadow: 0 0 0 3px var(--life-glow); }
.studio-slider::-moz-range-track { height: 2px; background: var(--border-light); }
.studio-slider::-moz-range-thumb { height: 10px; width: 10px; border: 0; border-radius: 50%; background: var(--life); }
.studio-slider:disabled { opacity: .3; cursor: default; }
.age-axis-key, .time-range-labels { display: flex; align-items: center; justify-content: space-between; gap: 9px; color: var(--text-muted); font: 7px var(--font-mono); margin: 2px 0 18px; }
.age-axis-key i { flex: 1; height: 1px; background: linear-gradient(90deg, var(--life-glow), var(--life)); opacity: .5; }
.crowding-axis-key i { background: repeating-linear-gradient(90deg, var(--life) 0 1px, transparent 1px 4px); }
.studio-history-heading { padding-top: 13px; margin: 0 0 13px; border-top: 1px solid var(--border); }
#timeFollowLive { display: flex; align-items: center; gap: 5px; min-height: 24px; padding: 4px 7px; color: var(--text-muted); border: 1px solid var(--border); border-radius: 20px; font: 8px var(--font-mono); }
#timeFollowLive i { width: 4px; height: 4px; border-radius: 50%; background: currentColor; }
#timeFollowLive[aria-pressed="true"] { color: var(--life); background: var(--life-glow); }
#timeFollowLive:hover { border-color: var(--life); }
.time-range-labels { margin: 1px 0 9px; }
.time-studio-hint { min-height: 26px; margin: 0; font: 9px/1.6 var(--font-display); color: var(--text-muted); }
.studio-camera-actions { display: flex; align-items: center; gap: 6px; margin-top: 7px; }
.studio-camera-actions button, #resetTimeCamera.studio-reset-camera { display: flex; align-items: center; justify-content: center; gap: 6px; width: auto; min-height: 28px; height: auto; margin: 0; padding: 4px 9px; border: 1px solid var(--border); border-radius: 5px; color: var(--text-muted); font: 16px/1 var(--font-display); }
.studio-camera-actions button:hover { color: var(--life); background: var(--elevated); }
.studio-camera-actions button[aria-pressed="true"] { color: var(--life); background: var(--life-glow); border-color: var(--border-light); }
.studio-camera-actions button span, .studio-reset-camera span { font: 9px var(--font-display); }
#timeTurntable { font: 9px/1 var(--font-display); }
#timeTurntable span { font: 16px/1 var(--font-display); }
#timeStudioToggle { display: flex; align-items: center; justify-content: center; width: 28px; height: 24px; border: 1px solid transparent; border-radius: 4px; font: 9px var(--font-mono); color: var(--text-dim); }
#timeStudioToggle:hover, #timeStudioToggle[aria-expanded="true"] { background: var(--elevated); color: var(--life); }
#timeStudioToggle.has-projection { color: var(--life); border-color: var(--border-light); }
.time-studio button:focus-visible, .studio-slider:focus-visible, #timeStudioToggle:focus-visible { outline: 2px solid var(--life); outline-offset: 3px; }
.repeat-observation { position: absolute; z-index: 8; top: 116px; left: 39px; display: flex; align-items: center; gap: 5px; padding: 3px 7px; color: var(--life); background: var(--life-glow); border: 1px solid var(--border); border-radius: 20px; font: 8px var(--font-mono); }
.repeat-observation > span:first-child { font-size: 11px; }
.repeat-policy { display: flex; align-items: center; gap: 7px; min-height: 26px; margin: 9px 0 0; color: var(--text-muted); font: 10px var(--font-display); cursor: pointer; }
.repeat-policy input { width: 13px; height: 13px; margin: 0; accent-color: var(--life); cursor: pointer; }
.repeat-policy input:focus-visible { outline: 2px solid var(--life); outline-offset: 3px; }
.repeat-policy:has(input:disabled) { opacity: .45; cursor: default; }
.repeat-policy-note { margin-left: auto; font: 8px var(--font-mono); opacity: .7; }
.sheet-repeat-policy { margin: 12px 0 0; min-height: 44px; font-size: 13px; }
.sheet-repeat-policy input { width: 16px; height: 16px; }
@media (max-height: 850px) and (min-width: 901px) {
  .has-field-guide .time-studio { top: 133px; max-height: calc(100% - 255px); }
  .has-field-guide .time-studio h3 { font-size: 27px; margin: 7px 0 10px; }
  .has-field-guide .time-studio-intro { display: none; }
  .has-field-guide .time-projection-switch { margin-bottom: 12px; }
  .has-field-guide .age-axis-key { margin-bottom: 11px; }
  .repeat-observation { top: 106px; }
}
@media (max-width: 900px) {
  .time-studio, .has-field-guide .time-studio { top: auto; left: auto; right: 9px; bottom: 62px; width: min(290px, calc(100% - 18px)); max-height: calc(100% - 117px); padding: 15px 18px; border: 1px solid var(--border-light); border-radius: 10px; background: var(--abyss); box-shadow: 0 12px 50px #0005; }
  .time-studio h3, .time-studio-intro { display: none; }
  .time-studio-heading { position: sticky; top: -15px; z-index: 2; min-height: 34px; margin: -15px -18px 8px; padding: 5px 13px 5px 18px; background: var(--abyss); border-bottom: 1px solid var(--border); }
  #closeTimeStudio { width: 30px; height: 30px; }
  .time-studio .eyebrow { font-size: 8px; }
  .time-projection-switch { grid-template-columns: repeat(4, 1fr); margin-bottom: 11px; }
  .time-projection-switch button { font-size: 9px; padding: 5px 2px; min-height: 32px; }
  .time-form-switch button { min-height: 31px; font-size: 10px; }
  .time-form-hint { min-height: 0; margin: 5px 0 8px; }
  .studio-slider-label { margin-bottom: 3px; }
  .studio-slider { height: 22px; }
  .studio-slider::-webkit-slider-thumb { width: 14px; height: 14px; margin-top: -6px; }
  .studio-slider::-moz-range-thumb { width: 14px; height: 14px; }
  .age-axis-key { margin-bottom: 10px; }
  .studio-history-heading { padding-top: 6px; margin-bottom: 6px; }
  .time-range-labels { margin-bottom: 6px; }
  .time-studio-hint { min-height: 0; line-height: 1.4; }
  .studio-camera-actions { margin-top: 9px; }
  .studio-camera-actions button, #resetTimeCamera.studio-reset-camera { min-height: 32px; padding: 5px 12px; }
  .repeat-observation { top: 54px; left: auto; right: 17px; font-size: 7px; }
}
@media (max-width: 900px) and (max-height: 640px) {
  .time-studio, .has-field-guide .time-studio { bottom: 48px; max-height: calc(100% - 99px); }
}
@media (max-width: 900px) and (max-height: 500px) and (orientation: landscape) {
  .time-studio, .has-field-guide .time-studio { position: fixed; top: 50px; right: 74px; bottom: auto; max-height: calc(100dvh - 62px); }
  .repeat-observation { top: 52px; right: 77px; }
}
@media (min-width: 901px) {
  .has-field-guide .time-studio-intro { display: none; }
  [data-render-view="time"][data-time-studio="open"] .has-field-guide .field-caption { left: 236px; }
  .has-field-guide .time-studio h3 { font-size: 28px; margin: 0 0 5px; }
  .has-field-guide .time-form-switch button { min-height: 24px; }
  .has-field-guide .time-form-hint { min-height: 13px; margin: 6px 0 8px; }
  .has-field-guide .time-projection-switch { margin-bottom: 9px; }
  .has-field-guide .time-projection-switch button { min-height: 22px; padding-block: 4px; }
  .has-field-guide .studio-slider-label { margin-bottom: 3px; }
  .has-field-guide .age-axis-key { margin-bottom: 7px; }
  .has-field-guide .studio-history-heading { padding-top: 6px; margin-bottom: 7px; }
  .has-field-guide .studio-camera-actions { margin-top: 5px; }
  .has-field-guide .studio-camera-actions button, .has-field-guide #resetTimeCamera.studio-reset-camera { min-height: 26px; padding: 3px 8px; }
}

/* The first Play lifts the actual flat frame into the live history camera. */
[data-render-view="time"][data-camera-reveal="true"] #gameCanvas { visibility: visible; position: relative; z-index: 2; opacity: calc(1 - var(--camera-reveal, 0)); pointer-events: none; }
[data-camera-reveal="true"] #timeCanvas { opacity: var(--camera-reveal, 0); }
.time-orbit-toggle { display: flex; align-items: center; justify-content: center; gap: 4px; min-height: 24px; padding: 3px 7px; border: 1px solid var(--border); border-radius: 4px; color: var(--text-dim); font: 8px var(--font-mono); }
.time-orbit-toggle > span:first-child { font-size: 12px; }
.time-orbit-toggle[aria-pressed="true"] { color: var(--life); border-color: var(--border-light); background: var(--life-glow); }
.time-orbit-toggle:hover { color: var(--life); background: var(--elevated); }
.time-orbit-toggle:focus-visible { outline: 2px solid var(--life); outline-offset: 3px; }
.orbit-compact-label { display: none; }
@media (max-width: 900px) {
  .time-orbit-toggle { gap: 3px; padding: 3px 5px; font-size: 7px; }
  .time-orbit-toggle > span:first-child, .orbit-full-label { display: none; }
  .orbit-compact-label { display: inline; }
  [data-render-view="time"] .time-view-controls { gap: 4px; padding-left: 7px; max-width: calc(100% - 62px); }
  /* Keep the restart target clear even when the empty-history prompt is longer
     than a generation count. Only the status may wrap; controls stay usable. */
  .time-view-controls > :not(#timeLayerCount) { flex-shrink: 0; }
  #timeLayerCount { min-width: 0; white-space: normal; line-height: 1.4; }
  [data-render-view="time"] .time-depth-control input { width: 33px; }
}
@media (max-width: 900px) and (max-height: 500px) and (orientation: landscape) {
  [data-render-view="time"] .time-view-controls { max-width: calc(100% - 127px); }
}
@media (prefers-reduced-motion: reduce) {
  [data-camera-reveal="true"] #gameCanvas { visibility: hidden; }
  [data-camera-reveal="true"] #timeCanvas { opacity: 1; }
}