:root {
  color-scheme: dark;
  --bg: #100e10;
  --rose: #ddbaa5;
  --text: #e6c7b4;
  --muted: #bc9b8c;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-synthesis: none;
  -webkit-text-size-adjust: 100%;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-width: 240px; min-height: 100%; background: var(--bg); }
body { color: var(--text); }
.app {
  height: 100vh;
  height: 100dvh;
  padding: var(--safe-top) var(--safe-right) var(--safe-bottom) var(--safe-left);
  position: relative;
  isolation: isolate;
  background: radial-gradient(ellipse at 50% 43%, #2e1e211f 0, transparent 66%), var(--bg);
}
.app::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: -1; opacity: .11;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23fff' filter='url(%23n)' opacity='.18' d='M0 0h180v180H0z'/%3E%3C/svg%3E");
}
.composition {
  --ring: min(74vw, 296px, calc((100vh - var(--safe-top) - var(--safe-bottom) - 192px) / 1.9));
  --ring: min(74vw, 296px, calc((100dvh - var(--safe-top) - var(--safe-bottom) - 192px) / 1.9));
  width: 100%; height: 100%; max-width: 480px; margin: auto;
  display: grid; grid-template-rows: minmax(112px, 1fr) auto minmax(72px, 1fr);
}
.masthead { align-self: center; text-align: center; padding-bottom: 8px; }
h1 { font: 400 64px/1.1 "Baskerville", "Times New Roman", serif; letter-spacing: .5px; margin: 0 0 15px; color: var(--rose); text-shadow: 0 0 35px #bd827324; }
h1 span { font-size: .73em; font-style: italic; margin: 0 .08em; }
.masthead p { display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 12px; line-height: 1.4; font-weight: 400; letter-spacing: 2.3px; white-space: nowrap; margin: 0; color: var(--muted); }
.tagline-dot { display: inline-block; flex: none; width: 4px; height: 4px; border-radius: 50%; background: currentColor; font-size: 0; }
.timers { display: flex; flex-direction: column; align-items: center; }
.timer {
  position: relative; width: var(--ring); height: var(--ring); aspect-ratio: 1 / 1;
  flex: none; border-radius: 50%; container-type: inline-size;
}
.timer-adjusted { margin-top: calc(var(--ring) * -.10); }
.ring { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ring-track { fill: none; stroke: url(#rose); stroke-width: 1.25; }
.ring-inner { fill: none; stroke: #b68a74; stroke-width: .45; opacity: .15; }
.orbit { transform-origin: 150px 150px; will-change: transform; }
.orbit-met { animation: orbit 48s linear infinite; }
.orbit-adjusted { animation: orbit 67s linear infinite reverse; animation-delay: -23s; }
.tracer-artwork { pointer-events: none; }
@keyframes orbit { from { transform: rotate(-38deg); } to { transform: rotate(322deg); } }
.timer-content { position: absolute; inset: 0; display: flex; align-items: center; flex-direction: column; justify-content: center; padding-top: 1cqw; }
.timer h2 { font-weight: 400; font-size: max(7.5px, 3.35cqw); letter-spacing: clamp(.6px, .5cqw, 1.45px); color: #c9aa99; margin: 0 0 4.2cqw; }
.counter { text-align: center; font-variant-numeric: tabular-nums lining-nums; }
.calendar { display: grid; grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr) 1px minmax(0, 1fr); column-gap: 2.2cqw; width: 84cqw; margin-inline: auto; }
.calendar-divider { width: 1px; height: 20cqw; margin-top: 1.5cqw; background: linear-gradient(to bottom, transparent, #c69c8566 25%, #e9c7aeaa 50%, #c69c8566 75%, transparent); }
.major-unit { display: flex; flex-direction: column; align-items: center; }
.major-unit > span:first-child { font: 400 24cqw/.84 "Baskerville", "Times New Roman", serif; letter-spacing: -.8px; color: #e9ccb9; }
.unit { display: block; font: 400 max(7px, 2.45cqw)/1.2 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; letter-spacing: 1.8px; color: #c1a091; }
.major-unit .unit { margin: 3.4cqw 0 5.1cqw; letter-spacing: clamp(.8px, .5cqw, 1.5px); }
.clock { display: flex; align-items: flex-start; justify-content: center; gap: 2cqw; }
.clock > div { width: 18cqw; }
.clock [data-unit] { font-size: 7.1cqw; font-weight: 300; line-height: 1; color: #e0c2b1; }
.clock .unit { font-size: max(7px, 2.5cqw); letter-spacing: clamp(.4px, .3cqw, .9px); margin-top: 2.1cqw; }
.colon { font: 300 5.2cqw/1 -apple-system, sans-serif; color: #9d7566; }
.ring-note { font-size: max(6px, 2.4cqw); font-weight: 400; letter-spacing: clamp(.4px, .35cqw, 1.15px); margin: 6cqw 0 0; color: #af8d7e; }
.ring-note time { margin-left: 4px; }
.footer { display: flex; align-items: center; justify-content: center; }
.footer p { display: flex; align-items: center; gap: 17px; font-size: 14px; letter-spacing: 3.8px; color: #d7b29c; margin: 0; padding-left: 3.8px; }
.footer p span { width: 72px; height: 2px; background: linear-gradient(to left, #ffe1c8, #e8a08f 28%, #ae625969 64%, transparent); filter: drop-shadow(0 0 4px #ef8d77a6) drop-shadow(0 0 10px #db73534d); }
.footer p span:last-child { transform: rotate(180deg); }
button { font: inherit; cursor: pointer; touch-action: manipulation; }
.about-button { position: absolute; right: calc(5px + var(--safe-right)); bottom: calc(4px + var(--safe-bottom)); width: 44px; height: 44px; border: 0; background: transparent; color: #b29283; display: grid; place-items: center; }
.about-button svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.2; stroke-linecap: round; }
button:focus-visible { outline: 2px solid #e6c7b4; outline-offset: -3px; border-radius: 5px; }
dialog { background: #191417; border: 1px solid #62443b; border-radius: 18px; color: var(--text); width: min(88vw, 370px); max-height: calc(100dvh - var(--safe-top) - var(--safe-bottom) - 32px); padding: 32px 27px; overflow: auto; box-shadow: 0 20px 100px #0009; }
dialog::backdrop { background: #080608cc; backdrop-filter: blur(8px); }
.close-button { position: absolute; top: 6px; right: 6px; width: 44px; height: 44px; color: var(--text); border: 0; background: none; font-size: 27px; font-weight: 200; }
.eyebrow { color: var(--muted); font-size: 9px; letter-spacing: 3px; }
dialog h2 { font: 400 30px/1.1 "Baskerville", "Times New Roman", serif; margin: 16px 0 26px; }
.story-dates { font-size: 13px; }
.story-dates > div { padding: 12px 0; border-top: 1px solid #63423755; display: grid; grid-template-columns: 1fr 1.25fr; gap: 10px; }
.story-dates dt { color: var(--muted); }
.story-dates dd { margin: 0; line-height: 1.6; }
.story-dates dd span { font-size: 11px; color: var(--muted); }
.explanation, .install p { font-size: 12px; line-height: 1.65; color: #cbb3a7; }
strong { color: #e6c7b4; font-weight: 500; }
.install { margin-top: 25px; padding-top: 20px; border-top: 1px solid #63423755; }
.install h3 { font: 400 23px "Baskerville", "Times New Roman", serif; margin: 0 0 8px; }
.motion-button { min-height: 44px; background: transparent; border: 1px solid #88614f; border-radius: 6px; color: var(--text); padding: 10px 14px; margin-top: 10px; font-size: 12px; width: 100%; }
.home-install { text-align: center; padding: 34px 28px 25px; }
.home-install-close { position: absolute; top: 6px; right: 6px; width: 44px; height: 44px; color: var(--text); border: 0; background: none; font-size: 27px; font-weight: 200; }
.home-install-icon { display: block; margin: 0 auto 18px; border-radius: 14px; box-shadow: 0 0 24px #d98e7d12; }
.home-install h2 { font-size: 34px; margin: 0 0 12px; }
.home-install > p { font-size: 13px; line-height: 1.6; margin: 0; color: #cbb3a7; }
.home-install-steps { text-align: left; padding-left: 22px; margin: 24px 0; color: #cbb3a7; font-size: 13px; line-height: 1.65; }
.home-install-steps li { padding-left: 4px; margin: 11px 0; }
.home-install-steps li::marker { color: var(--muted); font-variant-numeric: tabular-nums; }
.home-install-steps svg { width: 17px; height: 17px; fill: none; stroke: #e6c7b4; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; vertical-align: -3px; margin-left: 4px; }
.home-install-dismiss { width: 100%; min-height: 44px; padding: 11px 16px; border: 1px solid #88614f; border-radius: 7px; background: #c28e7010; color: var(--text); font-size: 13px; }
.no-script { position: fixed; bottom: 50%; left: 10%; width: 80%; padding: 20px; background: #191417; text-align: center; }
.motion-paused .orbit { animation-play-state: paused; }
body.page-hidden .orbit { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .orbit { animation: none; } }
@media (max-height: 700px) {
  .composition { --ring: min(72vw, 280px, calc((100dvh - var(--safe-top) - var(--safe-bottom) - 150px) / 1.9)); grid-template-rows: minmax(88px,1fr) auto minmax(50px,1fr); }
  h1 { font-size: 50px; margin-bottom: 11px; }
  .masthead p { font-size: 10px; letter-spacing: 2px; }
  .footer p { font-size: 12px; }
}
@media (max-width: 340px) {
  .timer h2 { letter-spacing: .7px; }
  .footer p { gap: 12px; }
  .footer p span { width: 52px; }
}
@media (orientation: landscape) and (max-height: 550px) {
  .composition { --ring: min(40vw, calc(100dvh - var(--safe-top) - var(--safe-bottom) - 112px)); max-width: 760px; grid-template-rows: 76px auto 36px; }
  .timers { flex-direction: row; justify-content: center; }
  .timer-adjusted { margin-top: 0; margin-left: calc(var(--ring) * -.08); }
  h1 { font-size: 38px; margin-bottom: 4px; }
  .masthead { padding: 0; }
}
/* At high browser zoom, reflow for readability instead of clipping content. */
@media (max-height: 420px) and (orientation: portrait) {
  .app { height: auto; min-height: 100dvh; }
  .composition { --ring: 74vw; grid-template-rows: 110px auto 80px; }
}