:root {
  color-scheme: dark;
  --text: #edf6f8;
  --muted: #a4b9c5;
  --cyan: #a8e8e1;
  --sun: #ffc896;
  --line: #a4d0df24;
  --mono: ui-monospace, Consolas, monospace;
  background: #0a1119;
  color: var(--text);
  font-family: system-ui, -apple-system, sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100svh; isolation: isolate; position: relative; }
body::before { content: ''; position: absolute; inset: 0 0 auto; height: 820px; z-index: -1; pointer-events: none; background: radial-gradient(ellipse at 74% 24%, #193642 0%, #0d1923 42%, transparent 74%); }
.shell { width: min(1100px, calc(100% - 72px)); margin-inline: auto; }
a { color: inherit; text-decoration: none; }
button, input, select { color: inherit; font: inherit; }
button, select, input[type=range], summary { cursor: pointer; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible { outline: 2px solid var(--cyan); outline-offset: 4px; }
.header { min-height: 71px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--line); }
.brand { display: inline-flex; align-items: center; gap: 9px; font-size: 17px; letter-spacing: -.03em; font-weight: 650; }
.top-link, .quiet { display: inline-flex; align-items: center; gap: 9px; border: 1px solid var(--line); background: #ffffff05; color: #d7e8eb; border-radius: 7px; padding: 8px 11px; font-size: 12px; white-space: nowrap; }
.top-link:hover, .quiet:hover { background: #b6e8ec14; }
.top-link span { color: var(--cyan); }
.hero { display: flex; justify-content: space-between; align-items: end; gap: 28px; padding: 43px 0 30px; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; font: 500 10px/1.5 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: #b4d1da; }
.hero .eyebrow { margin: 0 0 12px; }
.dot { display: inline-block; flex: 0 0 auto; width: 6px; height: 6px; border-radius: 50%; background: var(--sun); box-shadow: 0 0 14px #ffb77788; }
h1 { margin: 0; font: 400 clamp(55px, 7vw, 97px)/.94 Georgia, serif; letter-spacing: -.072em; }
h1 em { color: #b7e4e8; font-weight: 400; }
.intro { max-width: 300px; margin: 0 0 3px; color: var(--muted); font-size: 14px; line-height: 1.6; }
.panel { background: linear-gradient(145deg,#142632,#101b25 67%); border: 1px solid #a4d0df35; border-radius: 16px; box-shadow: 0 18px 60px #0005; padding: 17px 21px 15px; }
.toolbar { display: flex; flex-wrap: wrap; align-items: end; gap: 9px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.control { display: flex; flex-direction: column; gap: 4px; }
.control span, .metrics span { color: var(--muted); font: 500 10px/1.4 var(--mono); letter-spacing: .10em; text-transform: uppercase; }
.control select, .control input { max-width: 100%; min-height: 35px; background: #0b151e; border: 1px solid #a4d0df33; border-radius: 7px; padding: 5px 9px; font-size: 13px; }
.control select { min-width: 140px; }
.quiet { min-height: 35px; }
.coordinates { margin: 0 0 7px auto; color: #a1bac7; font: 10px var(--mono); white-space: nowrap; }
.metrics { display: grid; grid-template-columns: 1fr 1fr 1.2fr; gap: 10px; padding: 14px 0 12px; }
.metrics div { background: #0c17217a; border: 1px solid var(--line); border-radius: 9px; padding: 10px 12px; min-width: 0; }
.metrics strong { display: block; margin-top: 2px; font: 550 clamp(24px,4vw,40px)/1.1 system-ui,sans-serif; font-variant-numeric: tabular-nums; letter-spacing: -.045em; white-space: nowrap; }
.metrics div:first-child strong { color: #ffd4b0; }
.metrics .length strong { color: var(--cyan); }
.sky { position: relative; height: clamp(146px, 19vw, 215px); margin-bottom: 7px; border-radius: 9px; overflow: hidden; background: radial-gradient(ellipse at 53% 43%, #293d49, transparent 66%), linear-gradient(#152d40,#101c2a 49.8%,#0a1420 50%); }
.sky-head { position: absolute; z-index: 1; inset: 8px 9px auto; display: flex; justify-content: space-between; align-items: center; gap: 6px; pointer-events: none; }
.sky-head .eyebrow { font-size: 9px; }
.badge { color: #f9d5b7; border: 1px solid #ffc89632; border-radius: 6px; background: #101b28e6; padding: 4px 6px; font: 10px var(--mono); }
.solar-chart { width: 100%; height: 100%; display: block; }
.chart-grid, .year-grid { stroke: #a9d8e02e; stroke-width: 1; fill: none; vector-effect: non-scaling-stroke; }
.horizon { position: absolute; left: 8px; top: calc(50% + 4px); font: 9px var(--mono); color: #a3bcca; background: #0b1823ad; border-radius: 3px; padding: 2px 4px; }
.sun-dot { position: absolute; width: 11px; height: 11px; border-radius: 50%; background: #ffd4ab; box-shadow: 0 0 11px #ffbb8d,0 0 26px #ffbc7c9a; transform: translate(-50%,-50%); }
.phase-strip { display: flex; min-height: 9px; border-radius: 5px; overflow: hidden; background: #24354a; }
.phase-strip span { flex-grow: 0; flex-shrink: 0; }
.day { background: #9cdad5; }
.twilight { background: #9b87bd; }
.night { background: #293f59; }
.hour-axis { position: relative; height: 23px; margin-top: 5px; color: #a4b9c5; font: 10px var(--mono); }
.hour-axis span { position: absolute; transform: translateX(-50%); }
.hour-axis span:first-child { transform: none; }
.hour-axis span:last-child { transform: translateX(-100%); }
.chart-foot { display: flex; justify-content: space-between; gap: 9px; font-size: 11px; color: var(--muted); }
.legend { display: flex; gap: 13px; flex-wrap: wrap; }
.legend span { display: flex; gap: 5px; align-items: center; }
.legend i { width: 9px; height: 9px; display: inline-block; border-radius: 2px; }
.date-track { display: grid; grid-template-columns: auto minmax(0, 1fr) 112px; gap: 12px; align-items: center; margin-top: 11px; padding-top: 10px; border-top: 1px solid var(--line); color: #b6c8cf; font-size: 11px; }
.date-track input { margin: 0; width: 100%; accent-color: #a6e5de; }
.date-track output { text-align: right; color: var(--cyan); }
.year { margin-top: 14px; border: 1px solid var(--line); border-radius: 12px; background: #101c26; }
.year summary { display: flex; justify-content: space-between; align-items: center; gap: 14px; list-style: none; padding: 12px 17px; }
.year summary::-webkit-details-marker { display: none; }
.year summary strong { display: block; margin-top: 3px; font-size: 17px; letter-spacing: -.025em; }
.expand { display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid var(--line); border-radius: 7px; color: var(--cyan); transition: transform .2s; }
.year[open] .expand { transform: rotate(45deg); }
.year-body { padding: 1px 17px 14px; }
.year-body p { color: var(--muted); margin: 3px 0 12px; font-size: 12px; line-height: 1.5; }
.year-plot { display: grid; grid-template-columns: 37px minmax(0,1fr); gap: 5px; height: 165px; }
.year-labels { display: flex; flex-direction: column; justify-content: space-between; font: 10px var(--mono); color: var(--muted); }
#year-chart { width: 100%; height: 100%; cursor: crosshair; }
.months { display: flex; justify-content: space-between; gap: 2px; margin: 5px 0 0 42px; color: var(--muted); font: 10px var(--mono); }
.footer { display: flex; justify-content: space-between; align-items: start; gap: 16px; padding-block: 17px 22px; color: var(--muted); font-size: 11px; }
.footer a { color: #b3e4e2; white-space: nowrap; }
.footer a:hover { text-decoration: underline; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media(max-width: 740px) {
  .shell { width: calc(100% - 34px); }
  .header { min-height: 60px; }
  .hero { display: block; padding: 32px 0 20px; }
  h1 { font-size: clamp(45px, 10vw, 68px); }
  .intro { margin: 10px 0 0; max-width: 420px; }
  .panel { padding: 12px; }
  .coordinates { flex: 1 1 100%; margin: 1px 0 0; }
  .metrics strong { font-size: clamp(21px,5vw,33px); }
}
@media(max-width: 410px) {
  .shell { width: calc(100% - 22px); }
  .brand { font-size: 15px; }
  .toolbar { gap: 6px; }
  .control select { min-width: 110px; }
  .control input { width: 121px; }
  .quiet { padding-inline: 6px; }
  .metrics { gap: 5px; }
  .metrics div { padding: 8px 6px; }
  .metrics span { font-size: 8px; letter-spacing: .04em; }
  .metrics strong { font-size: clamp(17px,5vw,21px); }
  .hour-axis span { font-size: 8px; }
  .date-track { grid-template-columns: minmax(0,1fr) auto; gap: 7px; }
  .date-track input { grid-row: 2; grid-column: 1 / -1; }
  .months span:nth-child(even) { display: none; }
  .footer { flex-wrap: wrap; }
}
@media(prefers-reduced-motion: reduce) { .expand { transition: none; } }