:root {
  --sky: #9cc3ea; --gold: #ffb319; --ink: #14202e; --ink-soft: #43546a; --paper: #f6faff; --line: #d3e1f0; --accent: #e8452c;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root { --ink: #e9f1fb; --ink-soft: #a9bbd0; --paper: #0f1722; --line: #243447; }
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font: 17px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}
.band { height: 14px; background: repeating-linear-gradient(-45deg, #14202e 0 12px, var(--gold) 12px 24px); }
main { max-width: 720px; margin: 0 auto; padding: 32px 16px 64px; }
h1 { font-size: 2rem; line-height: 1.15; margin: 0 0 4px; }
h2 { font-size: 1.3rem; margin: 2.2em 0 .4em; padding-top: .6em; border-top: 1px solid var(--line); }
h3 { font-size: 1.05rem; margin: 1.6em 0 .3em; }
.meta { color: var(--ink-soft); margin: 0 0 1.5em; }
.meta div { margin: 2px 0; }
a { color: inherit; text-decoration-color: var(--accent); text-underline-offset: 3px; overflow-wrap: anywhere; }
.short { background: color-mix(in srgb, var(--sky) 25%, transparent); border-left: 4px solid var(--sky); padding: 12px 16px; border-radius: 4px; }
ul { padding-left: 1.2em; }
li { margin: .3em 0; }
footer { color: var(--ink-soft); font-size: .9rem; margin-top: 3em; }
.home { text-align: center; }
.home ul { display: inline-block; text-align: left; }
.app-icon { border-radius: 28px; box-shadow: 0 8px 24px rgba(0, 0, 0, .25); margin: 8px 0 16px; }
.lead { font-size: 1.15rem; }
.soon { font-weight: 700; }