:root{color-scheme:dark;--ink:#e0dccb;--line:#cbc9d05c;background:#11152d;color:var(--ink);font-family:Georgia,'Times New Roman',serif}
.reset-button{position:absolute;top:calc(14px + env(safe-area-inset-top));left:calc(50% + 54px);width:44px;height:44px;padding:7px;border:0;background:transparent;color:var(--ink);z-index:1}
.reset-button svg{display:block;width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.25;stroke-linecap:round;stroke-linejoin:round}
.reset-button .reset-ring{opacity:.45;stroke-width:.75}
.reset-button:hover .reset-ring{opacity:1}
.reset-button:disabled{opacity:.2;cursor:default;pointer-events:none}
@media(max-height:450px){.reset-button{top:8px;left:calc(50% + 44px)}}
*{box-sizing:border-box}body{margin:0;height:100svh;display:grid;place-items:center}
.mat{position:relative;isolation:isolate;width:min(100%,520px);height:100svh;display:grid;grid-template-columns:56px minmax(0,1fr) 56px;grid-template-rows:84px minmax(0,1fr);column-gap:2px;padding:calc(12px + env(safe-area-inset-top)) 12px calc(16px + env(safe-area-inset-bottom));background:radial-gradient(ellipse at 30% 35%,#4a52a14a,transparent 60%),repeating-linear-gradient(0deg,#ffffff04 0 1px,transparent 1px 3px),repeating-linear-gradient(90deg,#0000000b 0 1px,transparent 1px 3px),#28358b;box-shadow:inset 0 0 55px #14134088;border:5px solid #495aa0;border-radius:9px}
.mat:before{content:'';position:absolute;inset:6px;border:1px solid var(--line);pointer-events:none;z-index:-1}
.hp-values{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;padding:0 3px 12px;border-bottom:1px solid #cbc9d033;margin-bottom:12px}.hp-values output{font-size:64px;line-height:1;font-variant-numeric:tabular-nums;letter-spacing:-3px;text-shadow:0 2px 12px #090b3755}
.hp-track{display:flex;flex-direction:column;align-items:center;justify-content:space-between;min-height:0;position:relative;padding:0 3px}.hp-track:before{content:'';position:absolute;top:22px;bottom:22px;width:1px;background:var(--line);z-index:-1}
button{font:inherit;color:inherit;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}.hp-track button{flex:0 1 46px;min-height:0;width:46px;border-radius:50%;border:1px solid #d6d4c473;background:#293787;font-size:20px;padding:0;line-height:1;position:relative}.hp-track button.active{color:#28316e;background:#e0dccb;border:1px solid #f3efdf;box-shadow:inset 0 0 0 3px #e0dccb,inset 0 0 0 4px #5e6490;font-weight:bold}
#dial{width:100%;height:100%;min-height:0;align-self:center;overflow:visible}.tick{cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}.tick .hit{fill:transparent;stroke:none}.tick .selection{fill:none;stroke:transparent}.tick .symbol{stroke:#e0dccb;fill:none;stroke-width:1.5}.tick.selected .selection{fill:#eee0a7;stroke:#fff7d6;stroke-width:2.5;filter:drop-shadow(0 0 6px #f7d77f99)}.tick.selected .symbol{stroke:#343478;stroke-width:2}.tick.selected .symbol [fill]{fill:#343478;fill-opacity:1}.orbit{fill:none;stroke:#d2ccba;stroke-width:.8;opacity:.42}.speck{fill:#ded5b1;opacity:.75}
button:focus-visible{outline:2px solid #fff3bf;outline-offset:3px}
/* SVG image bounds include the source photograph. Use the local circle for focus. */
.tick:focus,.tick:focus-visible{outline:none}
.tick:focus-visible .selection{stroke:#fff3bf;stroke-width:3;stroke-dasharray:3 3}
button:active{filter:brightness(1.2)}.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
body{height:auto;min-height:100svh}
.mat{width:min(100%,900px);height:min(100svh,1100px);grid-template-columns:clamp(56px,10vw,82px) minmax(0,1fr) clamp(56px,10vw,82px);grid-template-rows:clamp(54px,10svh,96px) minmax(0,1fr) clamp(54px,10svh,96px);padding:calc(12px + env(safe-area-inset-top)) calc(12px + env(safe-area-inset-right)) calc(12px + env(safe-area-inset-bottom)) calc(12px + env(safe-area-inset-left))}
.hp-value{grid-column:2;justify-self:center;align-self:center;font-size:clamp(48px,9svh,84px);line-height:1;font-variant-numeric:tabular-nums;letter-spacing:-2px;text-shadow:0 2px 12px #090b3755}
#hp0{grid-row:1;transform:rotate(180deg)}
#hp1{grid-row:3}
#track0{grid-column:1;grid-row:1/-1;transform:rotate(180deg)}
#track1{grid-column:3;grid-row:1/-1}
#dial{grid-column:2;grid-row:2}
.hp-track button{--mark-size:clamp(28px,6.2svh,62px);flex:0 0 auto;width:var(--mark-size);height:var(--mark-size);font-size:calc(var(--mark-size) * .46);display:grid;place-items:center;white-space:nowrap;font-variant-numeric:tabular-nums;letter-spacing:0}
.hp-track button:first-child{font-size:calc(var(--mark-size) * .38)}
@media(min-width:600px) and (min-height:600px){body{padding:16px}.mat{height:min(calc(100svh - 32px),1100px)}}
@media(max-width:599px){
  .mat{grid-template-columns:42px minmax(0,1fr) 42px;column-gap:0;padding-left:calc(8px + env(safe-area-inset-left));padding-right:calc(8px + env(safe-area-inset-right))}
  .hp-track{padding-left:0;padding-right:0}
  .hp-track button{--mark-size:clamp(30px,4.8svh,40px)}
}
@media(max-height:450px){.mat{grid-template-rows:42px minmax(0,1fr) 42px;padding-top:8px;padding-bottom:8px}.hp-value{font-size:42px}.hp-track button{--mark-size:clamp(24px,7.5svh,32px)}}

.official-mark{filter:url(#mark-ink);pointer-events:none}.tick.selected .selection{fill:#eee0a733;stroke:#fff0b5;stroke-width:3}.tick.selected .official-mark{filter:url(#mark-ink) drop-shadow(0 0 2px #fff5c9)}#phase{filter:url(#phase-ink);pointer-events:none}

.official-mark,.tick.selected .official-mark{overflow:hidden;filter:none}.official-mark image{filter:var(--night-filter)}
.day-night-divider{fill:none;stroke:#d2ccba;stroke-width:.8;stroke-opacity:.35;pointer-events:none}
.chronos-orbits{pointer-events:none}
.chronos-orbits .orbit{stroke:#d2ccba;stroke-width:.8;opacity:.35}

/* Pale lavender field mat, synchronized with the selected chronos position. */
:root[data-theme="day"]{color-scheme:light;--ink:#62596f;--line:#81758c66;background:#eeecef;color:var(--ink)}
[data-theme="day"] .mat{background:radial-gradient(ellipse at 30% 35%,#f5f1f566,transparent 60%),repeating-linear-gradient(0deg,#ffffff0b 0 1px,transparent 1px 3px),repeating-linear-gradient(90deg,#61516e08 0 1px,transparent 1px 3px),#cec7d5;border-color:#aba0b8;box-shadow:inset 0 0 55px #81728f44}
[data-theme="day"] .hp-value{text-shadow:0 2px 12px #ffffff44}
[data-theme="day"] .hp-track button{color:#62596f;background:#d4cedb;border-color:#968aa699}
[data-theme="day"] .hp-track button.active{color:#faf6fc;background:#655574;border-color:#584766;box-shadow:inset 0 0 0 3px #655574,inset 0 0 0 4px #d9cde2}
[data-theme="day"] .official-mark image{filter:var(--day-filter)}
.phase-day{visibility:hidden}
[data-theme="day"] .phase-day{visibility:visible}
[data-theme="day"] .phase-night{visibility:hidden}
[data-theme="day"] #phase{filter:url(#day-phase-ink)}
[data-theme="day"] .tick.selected .selection{fill:#f8efff88;stroke:#766087;filter:drop-shadow(0 0 5px #ffffffaa)}
[data-theme="day"] .chronos-orbits .orbit,[data-theme="day"] .day-night-divider{stroke:#786c87}

[data-theme="day"] button:focus-visible{outline-color:#766087}
[data-theme="day"] .tick:focus-visible .selection{stroke:#766087}