:root {
  color-scheme: dark;
  font: 16px/1.5 system-ui, sans-serif;
  --bg: #111526;
  --panel: #191e32;
  --line: #343b56;
  --ink: #f4f3ff;
  --muted: #b6bcd5;
  --accent: #bdeecb;
}
* { box-sizing: border-box; }
body { margin: 0; color: var(--ink); background: var(--bg); }
.shell { width: min(100% - 2rem, 65rem); margin-inline: auto; }
.top, .row, .actions, .form-row { display: flex; align-items: center; gap: .75rem; }
.top, .row { justify-content: space-between; }
.top { padding-block: 1.25rem; flex-wrap: wrap; }
.brand { color: var(--ink); text-decoration: none; font-size: .85rem; font-weight: 800; letter-spacing: .2em; }
.brand span { color: var(--accent); font-size: 1.55rem; vertical-align: middle; margin-right: .35rem; }
button, input, .action-link { font: inherit; color: inherit; border: 1px solid var(--line); border-radius: .65rem; padding: .55rem .85rem; background: #13182a; }
button { cursor: pointer; }
button:hover, .action-link:hover { border-color: var(--accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.primary { background: var(--accent); color: #17291f; font-weight: 700; }
.hero { position: relative; isolation: isolate; overflow: hidden; background: linear-gradient(145deg,#24294a,#171b30 64%); border: 1px solid var(--line); border-radius: 1.6rem; }
.hero-content { position: relative; padding: clamp(1.25rem, 5vw, 3.75rem); }
.orbit { position: absolute; right: -4rem; top: -9rem; width: clamp(22rem, 54vw, 36rem); aspect-ratio: 1; border-radius: 50%; opacity: .48; background: repeating-radial-gradient(circle, transparent 0 24px,#858bd150 25px 26px,transparent 27px 40px),radial-gradient(circle,#7886ce75,transparent 64%); }
.eyebrow { letter-spacing: .18em; color: var(--accent); font-size: .75rem; font-weight: 800; }
h1 { font-size: clamp(1.5rem, 4vw, 2.4rem); margin: .4rem 0 1rem; }
.counter { font-size: clamp(5rem, 16vw, 11rem); letter-spacing: -.09em; line-height: .93; margin: 0 0 .5rem -.045em; font-weight: 750; font-variant-numeric: tabular-nums; }
.unit { font-size: 1.25rem; color: var(--muted); margin: 0; }
.breakdown { display: grid; grid-template-columns: repeat(3,1fr); gap: .65rem; border-top: 1px solid var(--line); margin-top: 1.65rem; padding-top: 1.15rem; }
.breakdown strong, .breakdown span { display: block; }
.breakdown strong { font-size: clamp(1rem, 2.5vw, 1.55rem); }
.breakdown span, .small, footer { color: var(--muted); font-size: .875rem; }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 1.1rem; padding: clamp(1rem,3vw,1.5rem); min-width: 0; }
.progress-panel, .details { margin-top: 1rem; }
h2 { margin: 0; font-size: 1.1rem; }
.accent { color: var(--accent); }
progress { display: block; appearance: none; width: 100%; height: .65rem; border: none; border-radius: 99px; overflow: hidden; background: #353d57; margin: .9rem 0 .55rem; }
progress::-webkit-progress-bar { background: #353d57; }
progress::-webkit-progress-value { background: #bdeecb; }
progress::-moz-progress-bar { background: #bdeecb; }
#start-form { margin-top: 1.2rem; }
#start-form label { display: block; margin-bottom: .5rem; }
.form-row { flex-wrap: wrap; }
input:not([type=checkbox]) { min-width: 0; max-width: 100%; }
#milestone-name { flex: 1 1 11rem; }
.details { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
fieldset { padding: 0; border: 0; margin: 0 0 1rem; }
fieldset label { display: block; margin: .5rem 0; }
input[type=checkbox] { accent-color: var(--accent); }
ul { padding: 0; list-style: none; margin-bottom: 0; }
li { display: flex; gap: .5rem; align-items: center; justify-content: space-between; padding-block: .5rem; border-top: 1px solid var(--line); }
li label { display: flex; align-items: baseline; gap: .5rem; overflow-wrap: anywhere; }
li:has(:checked) label span { text-decoration: line-through; color: var(--muted); }
footer { padding: 1.3rem 0; }
dialog { max-width: min(30rem,100% - 2rem); border: 1px solid var(--line); border-radius: 1rem; background: var(--panel); color: var(--ink); padding: 1.5rem; }
dialog::backdrop { background: #090b16c9; }
dt { font-weight: 700; } dd { margin: .25rem 0 .8rem; }
.sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); }
body.compact .shell { max-width: 32rem; }
body.compact .hero-content { padding: 1.25rem; }
body.compact .counter { font-size: clamp(4rem, 15vw, 6rem); }
body.compact :is(.details, #start-form, footer) { display: none; }
@media (max-width: 42rem) {
  .details { grid-template-columns: 1fr; }
  .top :is(button, .action-link) { font-size: .8rem; padding-inline: .55rem; }
  .breakdown span { font-size: .75rem; }
}
.action-link { display: inline-block; text-decoration: none; }
.actions { flex-wrap: wrap; }
.widget-guides ol { padding-left: 1.4rem; }
.widget-guides li { display: list-item; border: 0; }
.widget-guides a:not(.action-link) { color: var(--accent); }
#script-text { width: 100%; margin-top: .5rem; font: .85rem monospace; }