:root{color-scheme:light dark;--nav-height: 2.75rem;--nav-bg: #f6f6f7;--nav-fg: #1a1c1f;--nav-muted: rgb(0 0 0 / 55%);--nav-border: rgb(0 0 0 / 12%);--nav-input-bg: white;--page-bg: white;--grid-line: white;--empty-cell-bg: white;--decade-line-color: rgb(0 0 0 / 30%);--future-start: rgb(255 203 80);--future-end: rgb(218 95 38);--childhood-bg: #efefef;--highschool-bg: #ddd;--past-bg: #ccc;--near-expectancy-bg: #c4a070;--near-expectancy-childhood-bg: #dedede;--near-expectancy-highschool-bg: #cacaca;--near-expectancy-past-bg: #b5b5b5;--beyond-expectancy-bg: #aaa;--current-elapsed: #8cac8c;--current-remaining: green;--month-label-color: rgb(0 0 0 / 50%);--year-label-color: rgb(0 0 0 / 45%);--age-label-color: rgb(0 0 0 / 75%);--birthday-line-color: rgb(37 99 235 / 25%)}@media(prefers-color-scheme:dark){:root{--nav-bg: #16191d;--nav-fg: #e6e8eb;--nav-muted: rgb(255 255 255 / 60%);--nav-border: rgb(255 255 255 / 12%);--nav-input-bg: #1e2227;--page-bg: #101215;--grid-line: #101215;--empty-cell-bg: #101215;--decade-line-color: rgb(255 255 255 / 30%);--future-start: rgb(214 132 240);--future-end: rgb(67 28 120);--childhood-bg: #23262b;--highschool-bg: #2c3037;--past-bg: #383d45;--near-expectancy-bg: #584369;--near-expectancy-childhood-bg: #1e2126;--near-expectancy-highschool-bg: #272b31;--near-expectancy-past-bg: #30343a;--beyond-expectancy-bg: #474d56;--current-elapsed: #46614a;--current-remaining: #3fb950;--month-label-color: rgb(255 255 255 / 55%);--year-label-color: rgb(255 255 255 / 50%);--age-label-color: rgb(255 255 255 / 80%);--birthday-line-color: rgb(251 191 36 / 55%)}}body{background:var(--page-bg);margin:0;font-size:24px}.nav{box-sizing:border-box;height:var(--nav-height);display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:0 .75rem;background:var(--nav-bg);color:var(--nav-fg);border-bottom:1px solid var(--nav-border);font-family:system-ui,-apple-system,Segoe UI,sans-serif;font-size:.875rem;line-height:1}.nav__left{display:flex;align-items:center;gap:.75rem;min-width:0}.nav__back{display:inline-flex;align-items:center;gap:.35rem;color:var(--nav-muted);text-decoration:none;white-space:nowrap}.nav__back:hover,.nav__back:focus-visible{color:var(--nav-fg)}.nav__back-arrow{display:inline-block;transition:transform .15s ease}.nav__back:hover .nav__back-arrow,.nav__back:focus-visible .nav__back-arrow{transform:translate(-.25rem)}@media(prefers-reduced-motion:reduce){.nav__back-arrow{transition:none}}.nav__title{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.nav__field{display:flex;align-items:center;gap:.5rem}.nav__label,.nav__stat{color:var(--nav-muted);white-space:nowrap}.nav__stat strong{color:var(--nav-fg);font-weight:700}.nav__date{font:inherit;color:inherit;background:var(--nav-input-bg);border:1px solid var(--nav-border);border-radius:.25rem;padding:.25rem .4rem}.display{position:relative;width:100vw;--display-height: calc(100vh - var(--nav-height));height:var(--display-height);box-sizing:border-box;padding-top:var(--month-header-height);--label-width: 2.25rem;--month-header-height: 1.25rem}.month-labels{position:absolute;top:0;left:var(--label-width);right:0;height:var(--month-header-height);pointer-events:none;z-index:2}.year-labels{position:absolute;top:var(--month-header-height);left:0;width:var(--label-width);height:calc(var(--display-height) - var(--month-header-height));pointer-events:none;z-index:3}.age-labels{position:absolute;top:var(--month-header-height);left:var(--label-width);right:0;height:calc(var(--display-height) - var(--month-header-height));pointer-events:none;z-index:3}.birthday-marker{position:absolute;top:var(--month-header-height);left:var(--label-width);right:0;height:calc(var(--display-height) - var(--month-header-height));pointer-events:none;z-index:2}.birthday-marker__line{position:absolute;top:0;bottom:0;width:2px;margin-left:-1px;background:var(--birthday-line-color)}.month-label{position:absolute;top:0;height:100%;display:flex;align-items:center;justify-content:center;font-size:clamp(.35rem,.9vh,.6rem);font-weight:600;line-height:1;color:var(--month-label-color);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.row-label{position:absolute;width:var(--label-width);display:flex;align-items:center;justify-content:center;font-size:clamp(.45rem,1.1vh,.7rem);font-weight:600;line-height:1;color:var(--year-label-color)}.row-label--age{width:auto;height:auto;transform:translate(-50%,-50%);color:var(--age-label-color)}.row-label--year{left:0;height:auto;transform:translateY(-50%)}.week{box-sizing:border-box;height:1ex;background:var(--future-start)}.grid{position:relative;z-index:1;width:calc(100vw - var(--label-width));height:calc(var(--display-height) - var(--month-header-height));margin-top:0;margin-left:var(--label-width);border-collapse:collapse;background:var(--future-start);background:linear-gradient(90deg,var(--future-start) 0%,var(--future-end) 100%)}.grid td{border:1px solid var(--grid-line)}.grid td.pre-birthday{background:var(--empty-cell-bg)}.grid tr.past td,.grid tr.current td.past{background:var(--past-bg)}.grid tr.current td.current{background:linear-gradient(to right,var(--current-elapsed) 0 var(--day-of-week-percentage),var(--current-remaining) var(--day-of-week-percentage))}.grid tr.childhood td:not(.pre-birthday),.grid tr.post-childhood td:not(.pre-birthday){background:var(--childhood-bg)}.grid tr.highschool td:not(.pre-birthday){background:var(--highschool-bg)}.grid td.near-expectancy{background:var(--near-expectancy-bg)}.grid tr.past td.near-expectancy{background:var(--near-expectancy-past-bg)}.grid tr.childhood td.near-expectancy,.grid tr.post-childhood td.near-expectancy{background:var(--near-expectancy-childhood-bg)}.grid tr.highschool td.near-expectancy{background:var(--near-expectancy-highschool-bg)}.grid td.beyond-expectancy,.grid tr.past td.beyond-expectancy,.grid tr.current td.beyond-expectancy,.grid tr.childhood td.beyond-expectancy,.grid tr.post-childhood td.beyond-expectancy,.grid tr.highschool td.beyond-expectancy{background:var(--beyond-expectancy-bg)}.grid tr:nth-child(10n) td{border-bottom:1px solid var(--decade-line-color)}.grid tr td.nothing,.grid td.pre-birthday,.grid tr.past td.pre-birthday,.grid tr.current td.pre-birthday,.grid tr.current td.past.pre-birthday,.grid tr.current td.current.pre-birthday{background:var(--empty-cell-bg)}