:root {
  color-scheme: light;
  --paper: #f4efe6;
  --ink: #27211b;
  --muted: #6d6257;
  --rule: #c9bfb1;
  --orange: #bb6c39;
  --red: #b52832;
  --blue: #214373;
  --nubiforme-blue: #486f8a;
  --green: #4b7847;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: Athelas, Georgia, "Times New Roman", serif;
  line-height: 1.42;
}

main { width: min(1180px, calc(100% - 40px)); height: 100dvh; margin: 0 auto; padding: 26px 0 24px; }
.page-header { position: relative; margin-bottom: 6px; }
h1, h2, p { margin-top: 0; }
h1 { margin-bottom: 6px; color: var(--blue); font-size: 45px; font-weight: 400; line-height: 1; }
.page-header p { color: var(--nubiforme-blue); font-size: 17px; }
.language-menu { position: absolute; z-index: 7; top: 87px; left: 0; display: block; width: 126px; color: var(--ink); font-size: 13px; line-height: 1.2; }
.language-select-button { position: relative; width: 100%; height: 32px; margin: 0; padding: 3px 24px 3px 7px; overflow: hidden; border: 1px solid var(--rule); background: var(--paper); color: var(--ink); font: inherit; text-align: left; text-overflow: ellipsis; white-space: nowrap; }
.language-select-button::after { content: ""; position: absolute; right: 9px; top: 11px; width: 6px; height: 6px; border-right: 1px solid var(--ink); border-bottom: 1px solid var(--ink); transform: rotate(45deg); }
.language-select-menu { position: absolute; z-index: 48; top: 100%; left: 0; width: 100%; border: 1px solid var(--rule); background: var(--paper); box-shadow: 0 5px 14px rgba(39, 33, 27, .12); }
.language-select-menu[hidden], .language-select-native { display: none; }
.language-select-menu button { width: 100%; height: 29px; margin: 0; padding: 4px 7px; border: 0; background: var(--paper); color: var(--ink); font: inherit; text-align: left; }
.language-select-menu button:hover, .language-select-menu button[aria-selected="true"] { background: #eee7dc; color: var(--red); }
h2 { color: var(--orange); font-size: 21px; font-weight: 400; }
.eyebrow, .technical, .status, .field-help { color: var(--muted); }
.eyebrow { margin-bottom: 5px; font-size: 13px; letter-spacing: .08em; }

.instrument-layout { display: grid; grid-template-columns: minmax(0, 760px) minmax(310px, 350px); gap: 38px; align-items: start; margin-top: -48px; }
.clock-column { min-width: 0; position: relative; display: flex; flex-direction: column; align-items: center; }
#hiparco-clock { display: block; width: min(100%, calc(100dvh - 125px)); height: auto; overflow: visible; user-select: none; touch-action: none; }
.time-controls { position: relative; display: grid; grid-template-columns: 30px 30px 30px minmax(0, 1fr) 52px; width: 100%; gap: 4px; margin: 10px 0 0; padding: 0; border: 0; }
.time-controls::before { content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 1px; background: var(--rule); }
.time-controls button, .time-controls select { min-width: 0; height: 32px; margin: 0; padding: 2px 4px; font-size: 13px; }
.time-controls select {
  appearance: none;
  border: 1px solid var(--rule);
  border-radius: 0;
  background-color: var(--paper);
  background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%);
  background-position: calc(100% - 10px) 13px, calc(100% - 6px) 13px;
  background-repeat: no-repeat;
  background-size: 4px 4px, 4px 4px;
  padding-right: 17px;
}
.time-controls select option { background: var(--paper); color: var(--ink); }
.time-controls .now-button { text-transform: lowercase; }
.time-controls .now-button, .here-button, #play-time { color: var(--nubiforme-blue); }
.time-controls .now-button:active, .here-button:active { color: var(--nubiforme-blue); font-size: 14px; font-weight: 700; }
#play-time:active { color: var(--nubiforme-blue); font-weight: 700; }
#play-time.is-playing { font-size: 16px; }
#reverse-time, #forward-time { color: var(--ink); }
#reverse-time.direction-active, #forward-time.direction-active { color: var(--nubiforme-blue); }
.clock-caption { position: fixed; z-index: 6; left: max(20px, calc((100vw - 1180px) / 2)); bottom: 10px; display: flex; width: auto; justify-content: flex-start; gap: 20px; margin: 0; color: var(--muted); font-size: 12px; }
.export-open { position: fixed; z-index: 20; left: max(20px, calc((100vw - 1180px) / 2)); bottom: 42px; display: grid; place-items: center; width: 36px; height: 36px; margin: 0; padding: 7px; border: 1px solid var(--rule); background: var(--paper); color: var(--ink); line-height: 1; }
.export-open svg { display: block; width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: square; stroke-linejoin: miter; }
.cosmology-toggle { position: absolute; z-index: 5; right: 5px; top: 4px; display: inline-flex; align-items: center; gap: 9px; color: var(--muted); font-size: 14px; user-select: none; }
.cosmology-toggle-switch { position: relative; width: 42px; height: 20px; margin: 0; padding: 0; border: 0; background: transparent; }
.cosmology-toggle-track { position: absolute; left: 5px; top: 50%; width: 32px; height: 1px; background: var(--muted); transform: translateY(-50%); }
.cosmology-toggle-knob { position: absolute; left: 0; top: 50%; width: 10px; height: 10px; border-radius: 50%; background: var(--muted); transform: translateY(-50%); }
.cosmology-toggle-switch[aria-pressed="true"] .cosmology-toggle-knob { left: 32px; }
.zodiac-mode-toggle { position: absolute; z-index: 5; right: 5px; top: 29px; display: inline-flex; align-items: center; gap: 9px; color: var(--muted); font-size: 14px; user-select: none; }
.zodiac-mode-toggle-switch { position: relative; width: 42px; height: 20px; margin: 0; padding: 0; border: 0; background: transparent; }
.zodiac-mode-toggle-track { position: absolute; left: 5px; top: 50%; width: 32px; height: 1px; background: var(--muted); transform: translateY(-50%); }
.zodiac-mode-toggle-knob { position: absolute; left: 0; top: 50%; width: 10px; height: 10px; border-radius: 50%; background: var(--muted); transform: translateY(-50%); }
.zodiac-mode-toggle-switch[aria-pressed="true"] .zodiac-mode-toggle-knob { left: 32px; }
.hands-toggle { position: absolute; z-index: 5; right: 5px; top: 55px; }
.hands-toggle { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 14px; line-height: 1; user-select: none; }
.hands-toggle input, .unknown-time input { appearance: none; display: inline-block; width: 13px; height: 13px; margin: 0; padding: 0; border: 1px solid var(--rule); border-radius: 0; background: var(--paper); }
.hands-toggle input:checked { border-color: var(--muted); background: var(--muted); box-shadow: inset 0 0 0 3px var(--paper); }
.unknown-time input:checked { border-color: var(--muted); background: var(--muted); box-shadow: inset 0 0 0 3px var(--paper); }
.hands-toggle input:focus, .unknown-time input:focus { outline: 0; }
#hiparco-clock.hands-hidden .planet-hand, #hiparco-clock.hands-hidden .factor-hand { visibility: hidden; }

.house-boundary { stroke: var(--rule); stroke-width: 1; }
.house-ring { fill: none; stroke: var(--muted); stroke-width: 1; }
.inner-house-ring { fill: none; stroke: var(--muted); stroke-width: .8; }
.house-label { fill: var(--muted); font: 14px Athelas, Georgia, serif; text-anchor: middle; dominant-baseline: middle; }
.zodiac-band { fill: var(--paper); }
.zodiac-ring { fill: none; stroke: var(--ink); stroke-width: .8; }
.zodiac-boundary { stroke: var(--ink); stroke-width: .75; opacity: .75; }
.zodiac-center-boundary { stroke: var(--muted); stroke-width: 1; }
.zodiac-label { fill: var(--blue); font: 27px "Times New Roman", "Noto Sans Symbols 2", serif; text-anchor: middle; dominant-baseline: middle; }
.zodiac-label.active { font-size: 33px; font-weight: 700; }
#zodiac-layer.active .zodiac-ring { stroke: var(--blue); stroke-width: 1.8; }
#zodiac-layer.active .zodiac-boundary { stroke: var(--blue); stroke-width: 1.35; opacity: 1; }
#zodiac-layer.active .degree-tick { stroke: var(--blue); stroke-width: .75; opacity: .85; }
.degree-tick { stroke: var(--ink); stroke-width: .42; opacity: .55; }
.axis-asc, .axis-mc { stroke: var(--ink); stroke-width: 1.45; }
.axis-label, .axis-label.mc { fill: var(--ink); font: 13px Athelas, Georgia, serif; letter-spacing: .06em; text-anchor: middle; dominant-baseline: middle; }
.axis-asc, .axis-mc, .axis-label { pointer-events: none; }
.planet-hand { stroke: var(--ink); stroke-width: 1.05; stroke-linecap: round; }
.planet-terminal { fill: var(--paper); stroke: var(--ink); stroke-width: 1.25; }
.planet-glyph { fill: var(--red); font: 22px "Times New Roman", "Noto Sans Symbols 2", serif; text-anchor: middle; dominant-baseline: middle; }
.planet-glyph.sun-glyph { font-size: 26px; }
.planet-hand-group.active .planet-hand { stroke: var(--red); stroke-width: 1.8; }
.planet-hand-group.active .planet-terminal { r: 19px; stroke: var(--red); stroke-width: 1.8; }
.planet-hand-group.active .planet-glyph { font-size: 27px; }
.planet-hand, .planet-terminal, .planet-glyph { pointer-events: none; }
.planet-hit { fill: transparent; stroke: none; cursor: grab; touch-action: none; }
.planet-hit:active, #hiparco-clock.dragging { cursor: grabbing; }
.factor-hand { stroke: var(--ink); stroke-width: .8; stroke-linecap: round; pointer-events: none; }
.factor-terminal { fill: var(--paper); stroke: var(--ink); stroke-width: 1; pointer-events: none; }
.factor-glyph { fill: var(--green); font: 16px "Times New Roman", "Noto Sans Symbols 2", serif; text-anchor: middle; dominant-baseline: middle; pointer-events: none; }
.factor-hit { fill: transparent; stroke: none; cursor: grab; touch-action: none; }
.factor-hand-group.active .factor-hand { stroke: var(--green); stroke-width: 1.5; }
.factor-hand-group.active .factor-terminal { r: 12px; stroke: var(--green); stroke-width: 1.5; }
.zodiac-hit { fill: none; stroke: transparent; stroke-width: 48; cursor: grab; touch-action: none; }
#hiparco-clock.houses-hidden .zodiac-hit { pointer-events: none; cursor: default; }
#hiparco-clock.houses-hidden .zodiac-ring,
#hiparco-clock.houses-hidden .zodiac-boundary,
#hiparco-clock.houses-hidden .degree-tick { stroke: var(--muted); }
.aspect-line { fill: none; stroke-width: .7; opacity: .8; pointer-events: none; }
.aspect-line.conjunction { stroke: var(--nubiforme-blue); }
.aspect-line.sextile { stroke: var(--green); }
.aspect-line.square { stroke: var(--red); }
.aspect-line.trine { stroke: var(--blue); }
.aspect-line.opposition { stroke: var(--orange); }
.center-outer { fill: var(--paper); stroke: var(--ink); stroke-width: 1.5; }
.center-inner { fill: var(--ink); }
.center-outer.night { fill: var(--ink); }
.center-inner.night { fill: var(--paper); }
.eclipse-field { fill: transparent; pointer-events: none; }
#hiparco-clock.eclipse-active .eclipse-field { fill: var(--ink); }
#hiparco-clock.eclipse-active .planet-terminal { fill: var(--ink); }
#hiparco-clock.eclipse-active .planet-hand,
#hiparco-clock.eclipse-active .planet-terminal { stroke: var(--paper); }
#hiparco-clock.eclipse-active .planet-glyph { fill: var(--paper); }

.controls-column { width: 100%; min-width: 0; padding-top: 2px; }
form { position: relative; display: grid; width: 100%; min-width: 0; gap: 10px; padding-bottom: 10px; border-bottom: 0; }
form::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--rule); }
.field-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.time-field-heading { display: grid; grid-template-columns: auto 1fr auto; align-items: center; width: 100%; }
.unknown-time { display: inline-flex; align-items: center; justify-self: end; gap: 5px; color: var(--muted); white-space: nowrap; }
.unknown-time input { flex: 0 0 13px; }
.time-separator { display: inline-block; justify-self: center; line-height: 1; transform: translateY(-.02em); }
.time-picker { position: relative; }
.time-picker > input:disabled { border-color: var(--rule); background: #e7e1d8; color: var(--muted); cursor: default; opacity: .72; }
.time-picker > input, .date-button, .coordinate-panel input { font-size: 13px; }
.time-picker > input { padding-right: 34px; }
.time-picker-toggle { position: absolute; z-index: 2; top: 4px; right: 2px; bottom: 2px; width: 30px; height: auto; margin: 0; padding: 0; border: 0; background: var(--paper); }
.time-picker-toggle::after { content: ""; position: absolute; left: 11px; top: 11px; width: 6px; height: 6px; border-right: 1px solid var(--ink); border-bottom: 1px solid var(--ink); transform: rotate(45deg); }
.time-picker-menu { position: absolute; z-index: 50; top: 100%; left: 0; display: grid; grid-template-columns: 1fr 1fr; width: 100%; height: 147px; overflow: hidden; border: 1px solid var(--rule); background: var(--paper); box-shadow: 0 5px 14px rgba(39, 33, 27, .12); }
.time-picker-menu[hidden] { display: none; }
.time-picker-column { height: 145px; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scroll-snap-type: y mandatory; }
.time-picker-column + .time-picker-column { border-left: 1px solid var(--rule); }
.time-picker-column button { width: 100%; height: 29px; margin: 0; padding: 4px 8px; border: 0; background: var(--paper); color: var(--ink); font-size: 12px; text-align: center; scroll-snap-align: center; }
.time-picker-column button:hover, .time-picker-column button[aria-selected="true"] { background: #eee7dc; color: var(--red); }
label, .field-label { color: var(--muted); font-size: 14px; }
input, select, button {
  display: block; width: 100%; height: 36px; margin-top: 3px; padding: 7px 8px;
  border: 1px solid var(--rule); border-radius: 0; background: var(--paper); color: var(--ink); font: inherit;
}
input[type="hidden"] { display: none; }
input:focus, select:focus, button:focus { outline: 0; }
button { cursor: pointer; }
button:disabled { cursor: wait; opacity: .55; }
.cosmology-toggle-switch:focus, .zodiac-mode-toggle-switch:focus,
.hands-toggle input:focus, .aspect-switch input:focus, .factor-switch input:focus,
.unknown-time input:focus { outline: 0; }
.cosmology-toggle:has(.cosmology-toggle-switch[aria-pressed="false"]) > span:first-child,
.cosmology-toggle:has(.cosmology-toggle-switch[aria-pressed="true"]) > span:last-child,
.zodiac-mode-toggle:has(.zodiac-mode-toggle-switch[aria-pressed="false"]) > span:first-child,
.zodiac-mode-toggle:has(.zodiac-mode-toggle-switch[aria-pressed="true"]) > span:last-child,
.hands-toggle:has(input:checked) { color: var(--orange); }
.field-help { margin: 0; font-size: 13px; white-space: nowrap; }
.location-fields { min-width: 0; }
.location-mode { position: relative; display: flex; align-items: flex-end; width: 100%; height: 21px; margin: 0; }
.location-mode::after { content: ""; position: absolute; z-index: 0; left: 0; right: 0; bottom: 0; height: 1px; background: var(--rule); }
.location-mode button { position: relative; z-index: 1; flex: 1 1 50%; width: auto; height: 21px; margin: 0; padding: 0 0 4px; border: 0; border-bottom: 1px solid var(--rule); color: var(--muted); font-size: 14px; line-height: 17px; text-align: left; }
.location-mode button:last-child { text-align: right; }
.location-mode button.active { border-bottom-color: var(--red); color: var(--red); }
.location-entry { display: grid; grid-template-columns: minmax(0, 1fr) 52px; gap: 4px; min-width: 0; }
.location-panel { display: grid; gap: 12px; min-width: 0; }
.locality-panel { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.coordinate-panel { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
.coordinate-panel input:focus::placeholder { color: transparent; }
.location-panel[hidden] { display: none; }
.location-panel input, .location-panel button { margin-top: 10px; }
.here-button { width: 52px; height: 36px; margin: 10px 0 0; padding: 2px 4px; font-size: 13px; text-transform: lowercase; }
.location-picker { position: relative; min-width: 0; }
.location-picker > input, .location-menu-button { font-size: 12px; }
.location-menu-button { position: relative; padding-right: 22px; overflow: hidden; text-align: left; text-overflow: ellipsis; white-space: nowrap; }
.location-menu-button::after { content: ""; position: absolute; right: 9px; top: 12px; width: 6px; height: 6px; border-right: 1px solid var(--ink); border-bottom: 1px solid var(--ink); transform: rotate(45deg); }
.location-menu { position: absolute; z-index: 55; top: 100%; left: 0; width: 100%; max-height: 230px; overflow-y: auto; border: 1px solid var(--rule); background: var(--paper); box-shadow: 0 5px 14px rgba(39, 33, 27, .12); }
.location-menu[hidden] { display: none; }
.location-menu button { width: 100%; height: 29px; margin: 0; padding: 4px 8px; overflow: hidden; border: 0; background: var(--paper); color: var(--ink); font-size: 12px; text-align: left; text-overflow: ellipsis; white-space: nowrap; }
.location-menu button:hover, .location-menu button[aria-selected="true"] { background: #eee7dc; color: var(--red); }
.location-menu button.typeahead-match { background: #eee7dc; }
.place-menu { width: min(340px, 160%); }
.place-menu button small { color: var(--muted); font-size: inherit; }
.place-menu button.fuzzy::before { content: "≈ "; color: var(--orange); }
.location-help { min-height: 17px; overflow: hidden; text-overflow: ellipsis; }
.date-field { position: relative; min-width: 0; }
.field-label { display: block; }
.date-field-heading { display: flex; align-items: baseline; justify-content: space-between; }
.date-era-toggle { display: inline-flex; align-items: center; gap: 5px; color: var(--muted); font-size: 10px; line-height: 1; user-select: none; }
.date-era-toggle-switch { position: relative; width: 30px; height: 14px; margin: 0; padding: 0; border: 0; background: transparent; }
.date-era-toggle-track { position: absolute; left: 4px; top: 50%; width: 22px; height: 1px; background: var(--muted); transform: translateY(-50%); }
.date-era-toggle-knob { position: absolute; left: 0; top: 50%; width: 8px; height: 8px; border-radius: 50%; background: var(--muted); transform: translateY(-50%); }
.date-era-toggle-switch[aria-pressed="true"] .date-era-toggle-knob { left: 22px; }
.date-era-toggle:has(.date-era-toggle-switch[aria-pressed="false"]) > span:first-child,
.date-era-toggle:has(.date-era-toggle-switch[aria-pressed="true"]) > span:last-child { color: var(--orange); }
.date-control { position: relative; }
.date-button { min-width: 0; padding-right: 34px; text-align: left; }
.date-picker-toggle { position: absolute; z-index: 2; top: 4px; right: 2px; bottom: 2px; width: 30px; height: auto; margin: 0; padding: 0; border: 0; background: var(--paper); }
.date-picker-toggle::after { content: ""; position: absolute; left: 11px; top: 11px; width: 6px; height: 6px; border-right: 1px solid var(--ink); border-bottom: 1px solid var(--ink); transform: rotate(45deg); }
.house-select { position: relative; display: block; }
.house-select-button { position: relative; width: 100%; min-width: 0; padding-right: 22px; overflow: hidden; font-size: 14px; text-align: left; text-overflow: ellipsis; white-space: nowrap; }
.house-select-button::after { content: ""; position: absolute; right: 9px; top: 13px; width: 6px; height: 6px; border-right: 1px solid var(--ink); border-bottom: 1px solid var(--ink); transform: rotate(45deg); }
.house-select-menu { position: absolute; z-index: 40; top: 100%; left: 0; width: 100%; max-height: 290px; overflow-y: auto; border: 1px solid var(--rule); background: var(--paper); box-shadow: 0 5px 14px rgba(39, 33, 27, .12); }
.house-select-menu[hidden], .house-select-native { display: none; }
.house-select-menu button { height: 29px; margin: 0; padding: 4px 8px; border: 0; background: var(--paper); color: var(--ink); font-size: 12px; text-align: left; }
.time-step-select { position: relative; display: block; min-width: 0; }
.time-step-native { display: none; }
.time-controls .time-step-button { position: relative; width: 100%; padding: 2px 18px 2px 6px; text-align: left; }
.time-step-button::after { content: ""; position: absolute; right: 8px; top: 11px; width: 6px; height: 6px; border-right: 1px solid var(--ink); border-bottom: 1px solid var(--ink); transform: rotate(45deg); }
.time-step-menu { position: absolute; z-index: 45; left: 0; top: 100%; width: 100%; border: 1px solid var(--rule); background: var(--paper); box-shadow: 0 5px 14px rgba(39, 33, 27, .12); }
.time-step-menu[hidden] { display: none; }
.time-step-menu button { width: 100%; height: 27px; margin: 0; padding: 3px 6px; border: 0; background: var(--paper); color: var(--ink); font-size: 12px; text-align: left; white-space: nowrap; }
.time-step-menu button:hover, .time-step-menu button[aria-selected="true"] { background: #eee7dc; color: var(--red); }
.time-step-divider { display: block; height: 1px; margin: 3px 6px; background: var(--rule); }
.house-select-menu button:hover, .house-select-menu button[aria-selected="true"] { background: #eee7dc; color: var(--red); }
.sidereal-select { position: relative; display: block; }
.sidereal-select-button { position: relative; padding-right: 22px; overflow: hidden; font-size: 14px; text-align: left; text-overflow: ellipsis; white-space: nowrap; }
.sidereal-select-button::after { content: ""; position: absolute; right: 9px; top: 13px; width: 6px; height: 6px; border-right: 1px solid var(--ink); border-bottom: 1px solid var(--ink); transform: rotate(45deg); }
.sidereal-select-menu { position: absolute; z-index: 42; top: 100%; left: 0; width: 100%; max-height: 230px; overflow-y: auto; border: 1px solid var(--rule); background: var(--paper); box-shadow: 0 5px 14px rgba(39, 33, 27, .12); }
.sidereal-select-menu[hidden], .sidereal-select-native { display: none; }
.sidereal-select-menu button { width: 100%; height: 29px; margin: 0; padding: 4px 8px; overflow: hidden; border: 0; background: var(--paper); color: var(--ink); font-size: 12px; text-align: left; text-overflow: ellipsis; white-space: nowrap; }
.sidereal-select-menu button:hover, .sidereal-select-menu button[aria-selected="true"] { background: #eee7dc; color: var(--red); }
.sidereal-select.disabled .sidereal-select-button { border-color: var(--rule); background: #e7e1d8; color: var(--muted); cursor: default; opacity: .7; }
.sidereal-select.disabled .sidereal-select-button::after { border-color: var(--muted); }
.calendar { position: absolute; z-index: 30; top: 100%; left: 0; width: 100%; padding: 8px; border: 1px solid var(--rule); background: var(--paper); box-shadow: 0 5px 14px rgba(39, 33, 27, .12); }
.calendar[hidden] { display: none; }
.calendar-header { display: grid; grid-template-columns: 20px minmax(0, 1fr) 52px 20px; gap: 2px; align-items: center; margin-bottom: 6px; text-align: center; }
.calendar-header button, .calendar-day { width: 100%; height: 25px; margin: 0; padding: 0; border: 0; background: transparent; }
.calendar-header select, .calendar-header input { height: 25px; margin: 0; padding: 2px; border: 0; font-size: 10px; }
.calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; }
.calendar-weekday { color: var(--muted); font-size: 10px; text-align: center; }
.calendar-day { font-size: 11px; }
.calendar-day:hover { background: #eee7dc; }
.calendar-day.selected { background: var(--ink); color: var(--paper); }
.readout { width: 100%; min-width: 0; justify-self: stretch; padding-top: 14px; }
.readout > [role="tabpanel"], #results, #results table, #aspects-table, #elements-table, #factors-table, #dignities-table, .aspect-grid, .elements-grid, .factors-grid, .dignities-grid { width: 100%; max-width: none; }
.readout-tabs { position: relative; display: flex; align-items: flex-end; justify-content: space-between; width: 100%; min-height: 30px; margin-bottom: 7px; }
.readout-tabs::after { content: ""; position: absolute; z-index: 0; left: 0; right: 0; bottom: 0; height: 1px; background: var(--rule); }
.readout-tab { position: relative; z-index: 1; flex: 0 0 auto; width: auto; height: auto; margin: 0; padding: 0 0 5px; border: 0; border-radius: 0; background: transparent; color: var(--muted); font-size: 17px; text-align: center; white-space: nowrap; }
#positions-tab { text-align: left; }
#factors-tab, #dignities-tab { text-align: right; }
.readout-tab.active { color: var(--red); }
.readout-tab.active::after, .dignity-mode button.active::after {
  content: "";
  position: absolute;
  z-index: 2;
  right: calc(-1 * var(--segment-right, 0px));
  bottom: 0;
  left: calc(-1 * var(--segment-left, 0px));
  height: 1px;
  background: var(--red);
}
.readout-tab[hidden] { display: none; }
.aspects-heading { display: flex; align-items: center; justify-content: flex-end; min-height: 18px; margin-bottom: 4px; color: var(--muted); font-size: 12px; }
.aspect-switch { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; white-space: nowrap; }
.aspect-switch input, .factor-switch input {
  appearance: none;
  display: inline-block;
  width: 14px;
  height: 14px;
  margin: 0;
  padding: 0;
  border: 1px solid var(--rule);
  border-radius: 0;
  background: var(--paper);
  vertical-align: middle;
}
.aspect-switch input:checked, .factor-switch input:checked {
  border-color: var(--muted);
  background: var(--muted);
  box-shadow: inset 0 0 0 3px var(--paper);
}
.aspect-switch input:focus, .factor-switch input:focus { outline: 0; }
.factors-heading { display: flex; align-items: center; justify-content: flex-end; min-height: 18px; margin-bottom: 4px; color: var(--muted); font-size: 12px; }
.factor-switch { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; white-space: nowrap; }
.factors-grid { width: 100%; table-layout: fixed; font-size: 13px; font-variant-numeric: tabular-nums; }
.factors-grid tr { height: 30px; }
.factors-grid th { width: 29%; }
.factors-grid .factor-relations { width: 45%; height: 30px; padding: 1px 4px; overflow: hidden; }
.factors-grid .factor-position { width: 26%; white-space: nowrap; }
.factor-relations { color: var(--muted); }
.factor-relations-inner { display: flex; width: 100%; height: 28px; align-content: center; align-items: center; justify-content: flex-start; flex-wrap: wrap; overflow: hidden; }
.factor-aspect { display: inline-flex; align-items: center; gap: 1px; margin: 1px 2px 1px 0; font-family: "Times New Roman", "Noto Sans Symbols 2", serif; font-size: 11px; white-space: nowrap; }
.factor-aspect b { color: var(--ink); font-size: 11px; font-weight: 400; }
.factor-aspect.conjunction { color: var(--nubiforme-blue); }
.factor-aspect.sextile { color: var(--green); }
.factor-aspect.square { color: var(--red); }
.factor-aspect.trine { color: var(--blue); }
.factor-aspect.opposition { color: var(--orange); }
.aspect-grid { width: 100%; margin-top: 5px; border-collapse: collapse; table-layout: fixed; }
.aspect-grid th, .aspect-grid td { width: auto; min-width: 0; height: 29px; padding: 0; border: 1px solid var(--rule); text-align: center; vertical-align: middle; line-height: 1; }
.aspect-grid .aspect-body { color: var(--ink); background: rgba(201, 191, 177, .12); font-family: "Times New Roman", "Noto Sans Symbols 2", serif; font-size: 18px; font-weight: 400; }
.aspect-grid .aspect-empty { background: transparent; }
.aspect-cell span { display: block; font-family: "Times New Roman", "Noto Sans Symbols 2", serif; font-size: 15px; }
.aspect-cell small { display: block; margin-top: 1px; color: var(--muted); font-size: 8px; line-height: 1; }
.aspect-cell.conjunction span { color: var(--nubiforme-blue); }
.aspect-cell.sextile span { color: var(--green); }
.aspect-cell.square span { color: var(--red); }
.aspect-cell.trine span { color: var(--blue); }
.aspect-cell.opposition span { color: var(--orange); }
.elements-grid { width: 100%; margin-top: 7px; border-collapse: collapse; table-layout: fixed; }
.elements-grid th, .elements-grid td { padding: 3px; border: 1px solid var(--rule); text-align: center; vertical-align: middle; line-height: 1; }
.elements-grid thead th { width: calc((100% - 42px) / 4); height: 34px; color: var(--ink); font: 21px "Times New Roman", "Noto Sans Symbols 2", serif; }
.elements-grid thead .element-fire { color: var(--red); }
.elements-grid thead .element-earth { color: var(--orange); }
.elements-grid thead .element-air { color: var(--green); }
.elements-grid thead .element-water { color: var(--blue); }
.elements-grid thead th:first-child, .elements-grid tbody th { width: 42px; }
.elements-grid tbody th { height: 72px; color: var(--muted); font-size: 10px; }
.elements-grid td { height: 72px; font: 16px "Times New Roman", "Noto Sans Symbols 2", serif; }
.element-contents { display: flex; width: 100%; height: 64px; align-content: center; align-items: center; justify-content: center; flex-wrap: wrap; gap: 3px 6px; overflow: hidden; }
.element-contents span { display: inline-block; min-width: 15px; white-space: nowrap; }
.dignity-mode {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  width: 100%;
  height: 23px;
  margin-bottom: 5px;
}
.dignity-mode::after { content: ""; position: absolute; z-index: 0; left: 0; right: 0; bottom: 0; height: 1px; background: var(--rule); }
.dignity-mode button {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  width: auto;
  height: 23px;
  margin: 0;
  padding: 0 0 4px;
  border: 0;
  border-bottom: 0;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  line-height: 18px;
  text-align: center;
}
.dignity-mode button:first-child { text-align: left; }
.dignity-mode button:last-child { text-align: right; }
.dignity-mode button.active { color: var(--red); }
.dignities-grid { table-layout: fixed; font-size: 13px; }
.dignities-grid tr { height: 30px; border-bottom: 1px solid var(--rule); }
.dignities-grid th { box-sizing: border-box; width: 30%; padding-left: 4px; white-space: nowrap; }
.dignities-grid td { padding: 2px 4px; }
.dignities-grid .dignity-conditions { box-sizing: border-box; width: 58%; color: var(--muted); white-space: nowrap; }
.dignities-grid .dignity-score { box-sizing: border-box; width: 12%; padding-right: 6px; color: var(--ink); text-align: right; }
.dignity-token { white-space: nowrap; }
.dignity-token + .dignity-token::before { content: " · "; color: var(--rule); }
.dignity-token.positive { color: var(--blue); }
.dignity-token.negative { color: var(--red); }
.dignity-token.peregrine { color: var(--green); font-style: italic; }
.dispositors-grid, .receptions-grid, .conditions-grid, .almuten-grid { width: 100%; table-layout: fixed; font-size: 12px; }
.dispositors-grid tbody tr { height: 32px; border-bottom: 1px solid var(--rule); }
.receptions-grid tbody tr { height: 40px; border-bottom: 1px solid var(--rule); }
.conditions-grid tbody tr { height: 40px; border-bottom: 1px solid var(--rule); }
.almuten-grid tbody tr { height: 40px; border-bottom: 1px solid var(--rule); }
.dispositors-grid tbody th, .receptions-grid tbody th, .conditions-grid tbody th, .almuten-grid tbody th { box-sizing: border-box; width: 30%; height: inherit; padding: 4px; white-space: nowrap; }
.dispositors-grid .dispositor-chain { box-sizing: border-box; width: 70%; height: 32px; padding: 4px; overflow: hidden; font-family: "Times New Roman", "Noto Sans Symbols 2", serif; font-size: 15px; white-space: nowrap; }
.receptions-grid .reception-relations-cell { box-sizing: border-box; width: 70%; height: 40px; padding: 3px 4px; overflow: hidden; line-height: 1.25; }
.conditions-grid .condition-list {
  box-sizing: border-box;
  width: 70%;
  height: 40px;
  padding: 3px 4px;
  overflow: hidden;
  line-height: 1.25;
  text-align: right;
}
.condition-token { display: inline-block; color: var(--muted); white-space: nowrap; }
.condition-token + .condition-token::before { content: " · "; color: var(--rule); }
.condition-token.positive { color: var(--blue); }
.condition-token.negative { color: var(--red); }
.condition-token.warning { color: var(--orange); }
.almuten-grid .almuten-result { box-sizing: border-box; width: 70%; height: 40px; padding: 3px 6px; text-align: right; }
.almuten-winner { color: var(--blue); font: 18px "Times New Roman", "Noto Sans Symbols 2", serif; }
.almuten-tie { margin: 0 5px; color: var(--orange); }
.almuten-result b { margin-left: 7px; color: var(--ink); font-weight: 400; }
.almuten-result.tied b { color: var(--orange); }
.almuten-grid .almuten-synthesis { height: 40px; border-top: 1px solid var(--ink); }
.almuten-synthesis th { color: var(--muted); font-style: italic; }
.almuten-grid .synthesis-result {
  box-sizing: border-box;
  width: 70%;
  height: 40px;
  padding: 3px 6px;
  overflow: hidden;
  text-align: right;
  white-space: nowrap;
}
.synthesis-token { color: var(--muted); white-space: nowrap; }
.synthesis-token + .synthesis-token::before { content: " · "; color: var(--rule); }
.synthesis-token b { color: inherit; font-weight: 400; }
.synthesis-token.leader { color: var(--blue); }
.chain-arrow { margin: 0 3px; color: var(--rule); font-family: inherit; font-size: 10px; }
.final-dispositor { color: var(--blue); }
.dispositor-chain small { margin-left: 3px; color: var(--muted); font-family: inherit; font-size: 8px; }
.reception-relations {
  display: flex;
  width: 100%;
  height: 34px;
  align-content: center;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 2px 7px;
  overflow: hidden;
}
.reception-token { display: inline-flex; align-items: center; gap: 2px; color: var(--muted); white-space: nowrap; }
.reception-token > b { color: var(--ink); font: 15px "Times New Roman", "Noto Sans Symbols 2", serif; font-weight: 400; }
.reception-codes { display: inline-flex; gap: 1px; color: var(--blue); }
.reception-codes i { font-style: normal; font-size: 10px; }
.mutual-reception { color: var(--orange); font-size: 11px; }
.reception-no-aspect { color: var(--rule); }
.reception-aspect { font: 12px "Times New Roman", "Noto Sans Symbols 2", serif; }
.reception-aspect sup { margin-left: 1px; color: var(--muted); font: 7px Georgia, serif; vertical-align: super; }
.reception-aspect.conjunction { color: var(--nubiforme-blue); }
.reception-aspect.sextile { color: var(--green); }
.reception-aspect.square { color: var(--red); }
.reception-aspect.trine { color: var(--blue); }
.reception-aspect.opposition { color: var(--orange); }
table { width: 100%; border-collapse: collapse; font-size: 15px; font-variant-numeric: tabular-nums; }
th, td { padding: 1px 0; text-align: left; font-weight: 400; }
th { width: 43%; }
#results th { text-align: left; }
#results td { text-align: right; }
#results table { table-layout: fixed; }
#results th, #results td { width: 50%; }
.factors-grid .factor-position { text-align: right; }
.position-planet-glyph { color: var(--red); font-family: "Times New Roman", "Noto Sans Symbols 2", serif; }
.position-factor-glyph { color: var(--green); font-family: "Times New Roman", "Noto Sans Symbols 2", serif; }
.readout-zodiac { color: var(--blue); font: 18px/1 "Times New Roman", "Noto Sans Symbols 2", serif; }
.readout-house { display: inline-block; min-width: 25px; margin-left: 7px; color: var(--muted); font-size: 13px; text-align: right; }
.export-overlay { position: fixed; z-index: 100; inset: 0; display: grid; place-items: center; padding: 22px; background: rgba(39, 33, 27, .72); }
.export-overlay[hidden] { display: none; }
body.export-opened { overflow: hidden; }
.export-dialog { display: grid; grid-template-rows: auto auto minmax(0, 1fr); width: min(680px, calc(100vw - 44px)); height: min(920px, calc(100dvh - 44px)); padding: 14px; border: 1px solid var(--ink); background: var(--paper); box-shadow: 0 12px 36px rgba(0, 0, 0, .25); }
.export-dialog-header { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--rule); }
.export-dialog-header h2 { margin: 0 0 6px; color: var(--blue); }
.export-close { display: grid; place-items: center; width: 28px; height: 28px; margin: 0 0 6px; padding: 0; border: 0; font-size: 22px; line-height: 1; }
.export-options { display: grid; grid-template-columns: minmax(240px, 1fr) auto auto; gap: 14px; align-items: end; padding: 10px 0; }
.export-options input { height: 32px; }
.export-name-field { display: block; }
.export-gender, .export-actions { display: flex; gap: 5px; }
.export-gender button { display: grid; place-items: center; width: 34px; height: 32px; margin: 0; padding: 0; font: 20px/1 "Times New Roman", serif; }
.export-gender button.active { border-color: var(--red); color: var(--red); }
.export-actions button { width: 104px; height: 32px; margin: 0; padding: 2px 7px; font-size: 13px; }
.export-preview { display: grid; min-height: 0; overflow: hidden; place-items: center; border: 1px solid var(--rule); background: #e9e1d6; }
.export-preview canvas { display: block; width: 100%; height: 100%; min-width: 0; min-height: 0; object-fit: contain; background: transparent; filter: drop-shadow(0 2px 5px rgba(39, 33, 27, .14)); }
td { text-align: right; }
tr.separator th, tr.separator td { padding-top: 8px; }
tr.angle-spacer { height: 18px; }
tr.angle-spacer th, tr.angle-spacer td { height: 18px; padding: 0; font-size: 0; line-height: 0; }
.technical { margin: 8px 0 0; font-size: 12px; }
.status { margin: 8px 0 0; font-size: 13px; }
.status:empty { display: none; }

@media (min-width: 921px) and (min-height: 680px) {
  body { overflow: hidden; }
}

@media (max-width: 920px) {
  main { width: min(760px, calc(100% - 32px)); height: auto; margin-top: 0; padding-top: 30px; }
  .instrument-layout { grid-template-columns: 1fr; gap: 28px; margin-top: 0; }
  .clock-caption { position: static; width: auto; margin: 3px 18px 0; }
  .export-open { position: static; width: 36px; margin: 5px 18px; }
  .export-dialog { width: calc(100vw - 20px); height: calc(100dvh - 20px); padding: 9px; }
  .export-options { grid-template-columns: 1fr; gap: 8px; }
  .export-gender, .export-actions { justify-content: flex-start; }
  .controls-column { max-width: 560px; width: 100%; margin: 0 auto; }
}

@media (max-width: 520px) {
  main { width: calc(100% - 22px); }
  h1 { font-size: 38px; }
  .clock-caption { margin: 2px 18px 0; font-size: 12px; }
  .field-pair { grid-template-columns: 1fr; }
  .house-label { font-size: 13px; }
  .zodiac-label { font-size: 24px; }
}