:root { color-scheme: dark; font: 16px/1.6 system-ui, sans-serif; background: #0a1018; color: #d9e5ee; }
* { box-sizing: border-box; }
body { margin: 0; }
header, main, footer { width: min(1080px, 100%); margin: auto; padding: 1.4rem; }
header { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; border-bottom: 1px solid #314352; }
header span, footer { color: #93a9ba; font-size: .8rem; letter-spacing: .08em; }
a { color: #69ead1; text-underline-offset: .2em; }
h1 { font-size: clamp(1.8rem, 6vw, 3rem); line-height: 1.15; }
h2 { margin-top: 2rem; }
p { max-width: 85ch; }
form { padding: 1rem; background: #101d29; border: 1px solid #314352; border-radius: .4rem; margin: 1rem 0; }
label { display: grid; gap: .4rem; max-width: 35rem; }
input { font: inherit; background: #07111b; color: inherit; border: 1px solid #597486; border-radius: .3rem; padding: .65rem; min-width: 0; width: 100%; }
button { font: inherit; font-weight: 650; padding: .7rem 1rem; color: #07111b; background: #69ead1; border: 0; border-radius: .3rem; cursor: pointer; text-align: left; max-width: 100%; }
:focus-visible { outline: 3px solid #ffc679; outline-offset: 4px; }
pre { padding: 1rem; max-height: 40rem; overflow: auto; background: #07111b; border: 1px solid #314352; border-radius: .4rem; white-space: pre-wrap; overflow-wrap: anywhere; font: .85rem/1.5 ui-monospace, monospace; }
li { padding: .4rem 0; overflow-wrap: anywhere; }
footer { border-top: 1px solid #314352; margin-top: 2rem; }
.live-card { border: 1px solid #314352; border-radius: .7rem; padding: clamp(1rem, 3vw, 2rem); background: #101d29; margin: 1.5rem 0; scroll-margin-top: 1rem; }
.live-card h2 { margin-top: .5rem; }
.live-progress { color: #93a9ba; letter-spacing: .12em; font-size: .8rem; }
progress { width: 100%; height: .45rem; accent-color: #69ead1; }
.live-navigation { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; margin-top: 2rem; padding-top: 1rem; border-top: 1px solid #314352; }
.live-comparison { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); gap: 1.5rem; }
.live-comparison > section { min-width: 0; }
.live-button { display: inline-block; padding: .65rem 1rem; border: 1px solid #69ead1; border-radius: .3rem; margin: .3rem .5rem .3rem 0; }
button:disabled { opacity: .55; cursor: not-allowed; }
details { margin: 1rem 0; }
summary { cursor: pointer; color: #69ead1; }
@supports selector(:has(*)) {
  .live-story .live-card { display: none; }
  .live-story .live-card:first-of-type { display: block; }
  .live-story:has(:target) .live-card:first-of-type { display: none; }
  .live-story .live-card:target, .live-story .live-card:has(:target), .live-story:has(#live-read-all:target) .live-card { display: block; }
}
@media print {
  .live-story .live-card, .live-story:has(:target) .live-card:first-of-type { display: block !important; break-inside: avoid; }
  .live-navigation, nav[aria-label="Walkthrough steps"] { display: none; }
  pre { max-height: none; }
}