.date-guess-form{padding:18px 24px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:0 16px;align-items:center}
.date-axis-ui{grid-column:1/-1}
#content:has(.date-axis-ui) .demo-banner{padding:10px 16px;margin-bottom:14px}
#content:has(.date-axis-ui) .demo-banner>div{display:flex;align-items:center;flex-wrap:wrap;gap:4px 16px}
#content:has(.date-axis-ui) .demo-banner strong{white-space:nowrap}
#content:has(.date-axis-ui) .demo-banner p{display:none}
#content:has(.date-axis-ui) .demo-banner strong{font-size:12px}
#content:has(.date-axis-ui) .page-heading{margin:0 0 14px}
#content:has(.date-axis-ui) .page-heading h1{font-size:26px;margin-bottom:0}
.date-card .artwork{height:clamp(160px,25dvh,280px);max-height:none}
.date-axis-ui{--axis-color:#e5d264;--axis-green:#85bb98;--axis-red:#d8827b}
.date-axis-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:8px}
.date-choice-label{display:block;color:var(--muted);font-size:11px;letter-spacing:1px;text-transform:uppercase;margin-bottom:5px}
.date-choice-year{display:block;font-size:30px;font-weight:600;line-height:1.2;letter-spacing:-.7px;font-variant-numeric:tabular-nums;color:var(--text)}
.date-choice-year small{font-size:12px;font-weight:400;color:var(--muted);letter-spacing:0;margin-left:5px}
.date-zoom{display:flex;align-items:center;gap:4px;flex:none}
.date-zoom button,.date-nudge{display:inline-grid;place-items:center;width:34px;height:34px;min-height:34px;padding:0;border:1px solid var(--line);background:transparent;color:var(--text);font:inherit;cursor:pointer}
.date-zoom button:hover,.date-nudge:hover{background:var(--surface2)}
.date-zoom button:disabled,.date-nudge:disabled{opacity:.3;cursor:default}
.date-zoom .date-fit{width:auto;padding:0 10px;font-size:11px;color:var(--muted);margin-left:3px}
.date-zoom-level{font-size:11px;font-variant-numeric:tabular-nums;color:var(--muted);min-width:35px;text-align:center}
.date-ruler{position:relative;height:96px;isolation:isolate;user-select:none;margin:8px 0 0}
.date-ruler-inner{position:absolute;inset:0 14px;pointer-events:none}
.date-ruler-track{position:absolute;top:51px;left:0;right:0;height:3px;background:#5a5b65;border-radius:3px}
.date-ruler-fill{position:absolute;top:51px;left:0;height:3px;background:var(--axis-color);opacity:.5;border-radius:3px}
.date-ruler-tick{position:absolute;top:41px;transform:translateX(-50%);height:23px;width:1px;background:#7e7e88}
.date-ruler-tick.minor{top:47px;height:11px;background:#4e4f59}
.date-ruler-tick span{position:absolute;top:31px;left:50%;transform:translateX(-50%);font-size:11px;line-height:1;white-space:nowrap;color:var(--muted);font-variant-numeric:tabular-nums}
.date-ruler-tick.edge-start span{left:0;transform:none}.date-ruler-tick.edge-end span{left:auto;right:0;transform:none}
.date-ruler input[type=range]{appearance:none;-webkit-appearance:none;position:absolute;z-index:3;left:0;top:29px;width:100%;height:46px;padding:0;margin:0;border:0;background:transparent;cursor:grab;touch-action:none;outline:none;box-shadow:none}
.date-ruler input[type=range]:active{cursor:grabbing}
.date-ruler input[type=range]::-webkit-slider-runnable-track{height:3px;background:transparent}
.date-ruler input[type=range]::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;height:28px;width:28px;border:3px solid var(--surface);border-radius:50%;background:var(--axis-color);box-shadow:0 0 0 1px var(--axis-color);margin-top:-12.5px}
.date-ruler input[type=range]::-moz-range-track{height:3px;background:transparent}
.date-ruler input[type=range]::-moz-range-thumb{height:22px;width:22px;border:3px solid var(--surface);border-radius:50%;background:var(--axis-color);box-shadow:0 0 0 1px var(--axis-color)}
.date-ruler.is-empty input[type=range]::-webkit-slider-thumb{background:#797a85;box-shadow:0 0 0 1px #797a85}
.date-ruler.is-empty input[type=range]::-moz-range-thumb{background:#797a85;box-shadow:0 0 0 1px #797a85}
.date-ruler.is-empty .date-ruler-fill{opacity:0}
.date-ruler input:disabled{cursor:default}
.date-ruler-bubble{position:absolute;top:0;left:clamp(36px,var(--date-position),calc(100% - 36px));transform:translateX(-50%);padding:4px 7px;min-width:42px;text-align:center;font-size:12px;font-variant-numeric:tabular-nums;color:var(--axis-color);background:var(--surface2);border:1px solid var(--line);opacity:0;transition:opacity .12s;white-space:nowrap}
.date-ruler.is-dragging .date-ruler-bubble{opacity:1}
.date-precision{height:21px;display:flex;align-items:center;justify-content:center;gap:18px;font-size:10px;line-height:1;color:var(--muted);font-variant-numeric:tabular-nums;visibility:hidden}
.date-precision span{position:relative;min-width:24px;text-align:center}.date-precision span::before{content:'';position:absolute;top:-9px;left:50%;width:1px;height:5px;background:var(--line)}
.date-precision span.is-current{color:var(--axis-color)}
.date-axis-ui:has(.is-dragging) .date-precision{visibility:visible}
.date-axis-footer{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:3px 0 14px;min-height:34px}
.date-nudges{display:flex;align-items:center;gap:7px;flex:none}.date-nudges span{font-size:10px;color:var(--muted)}
.date-axis-hint{font-size:11px;color:var(--muted);line-height:1.4;margin:0;text-align:right}
.date-answer-band{position:absolute;top:46px;height:13px;min-width:3px;background:#85bb9840;border:1px solid #85bb9870;border-radius:2px}
.date-answer-zone{position:absolute;top:43px;height:19px;min-width:4px;border-radius:2px;background:var(--zone-color);opacity:.8}
.date-answer-zone.outer{--zone-color:#d58b4d}
.date-answer-zone.near{--zone-color:#e3c75c}
.date-answer-zone.correct{--zone-color:#85bb98}
.date-zone-legend{display:flex;gap:8px 16px;flex-wrap:wrap;font-size:11px;line-height:1.5;margin:0 0 14px;color:var(--muted)}
.date-zone-legend span{display:flex;align-items:center;gap:5px}.date-zone-legend i{width:9px;height:9px;background:#85bb98}
.date-zone-legend .near i{background:#e3c75c}.date-zone-legend .outer i{background:#d58b4d}
.date-true-mark{position:absolute;top:28px;width:2px;height:35px;transform:translateX(-50%);background:var(--axis-green);z-index:4}
.date-true-mark::before{content:'';position:absolute;top:-3px;left:-3px;width:8px;height:8px;background:var(--axis-green);transform:rotate(45deg)}
.date-result-legend{display:flex;gap:18px;flex-wrap:wrap;font-size:11px;margin:0 0 14px;color:var(--muted)}
.date-result-legend span{display:flex;gap:6px;align-items:center}.date-result-legend i{display:inline-block;width:7px;height:7px;background:var(--axis-color);border-radius:50%}.date-result-legend .correct i{background:var(--axis-green);border-radius:0}
.date-axis-ui.has-miss{--axis-color:var(--axis-red)}
.date-guess-form .date-caption{font-size:11px;margin:0;line-height:1.5}
.date-guess-form>.button{width:auto;min-height:46px;padding-left:24px;padding-right:24px}
@media(max-width:760px){.date-guess-form{padding:16px 14px 14px;gap:0 10px}.date-axis-heading{gap:8px}.date-choice-year{font-size:25px}.date-choice-label{font-size:10px}.date-zoom{gap:3px}.date-zoom button{width:32px;height:36px}.date-zoom .date-fit{width:auto;padding:0 7px}.date-zoom-level{display:none}.date-ruler-tick span{font-size:10px}.date-axis-hint{font-size:10px;max-width:175px}.date-nudge{width:36px;height:36px}.date-result-legend{gap:10px;font-size:10px}.date-precision{gap:12px}.date-axis-footer{margin-bottom:12px}.date-guess-form .date-caption{font-size:10px}.date-guess-form>.button{padding:10px 12px;min-height:44px}#content:has(.date-axis-ui) .page-heading h1{font-size:24px}}