:root {
  --ink: #171a31;
  --blue: #162ad8;
  --dark-blue: #0d177b;
  --shell: #e0e3ec;
  --sheet: #f8f9fe;
  --lime: #d1fb43;
  --muted: #424a6b;
  --rule: #aaaecd;
  --width: 1116px;
  color-scheme: light;
  font-family: "Space Mono", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  color: var(--ink);
  background: #eff0f7;
}
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; }
a { color: var(--dark-blue); text-underline-offset: .23em; }
a:hover { text-decoration-thickness: .15em; }
a:focus-visible, summary:focus-visible { outline: 3px solid #6b3500; outline-offset: 4px; }
p { margin: 0; }
img { display: block; width: 100%; height: auto; }
.skip { position: absolute; z-index: 2; left: .5rem; top: -5rem; padding: .6rem; background: #fff; }
.skip:focus { top: .5rem; }
.wrap { width: min(calc(100% - 3rem), var(--width)); margin-inline: auto; }
.top { border-bottom: 1px solid #afb5d5; background: #f7f7fc; }
.top .wrap { display: flex; min-height: 67px; align-items: center; justify-content: space-between; gap: 1rem; }
.top nav, .foot nav { display: flex; flex-wrap: wrap; gap: .8rem 1.5rem; }
.top nav a, .foot nav a { font-size: .91rem; font-weight: 650; }
.wordmark { color: var(--blue); font-family: Arial Black, "Arial", sans-serif; font-size: 1.49rem; font-weight: 950; letter-spacing: -.08em; font-style: italic; text-decoration: none; white-space: nowrap; }
.wordmark::before { content: ''; display: inline-block; width: 15px; height: 15px; margin-right: 9px; transform: skew(-17deg); background: var(--lime); border: 2px solid var(--blue); box-shadow: 3px 3px 0 var(--blue); }
.home-lead { padding: 52px 0 46px; background: radial-gradient(ellipse at 82% 24%, #c4cbff, transparent 59%), radial-gradient(circle, #aab0d5 1px, transparent 1.4px) 0 0 / 9px 9px, #e9ebfb; border-bottom: 1px solid var(--rule); }
.window { border: 2px solid #303367; border-radius: 9px 9px 3px 3px; box-shadow: 0 1px 0 #fff inset, 7px 9px 0 #5a62a580, 0 18px 45px #21267c22; overflow: hidden; background: var(--shell); }
.window-bar { min-height: 41px; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0 14px; border-bottom: 1px solid #102295; color: #fff; background: linear-gradient(#455dff 2%, #283ada 49%, #1828ba 100%); font: 700 .8rem/1.4 "Courier Prime", "Courier New", monospace; letter-spacing: .09em; }
.chrome { display: flex; gap: 5px; }
.chrome i { width: 12px; height: 12px; border: 1px solid #fff9; background: #cfd4ff; border-radius: 2px; }
.chrome i:last-child { background: var(--lime); }
.window-body { display: grid; grid-template-columns: 1fr 1.03fr; gap: 14px; padding: 14px; }
.hero-copy { align-self: center; padding: clamp(12px, 3vw, 38px); }
.hero-copy h1 { margin: 0 0 16px; color: var(--blue); font: 950 clamp(2.65rem, 5vw, 5rem)/.92 Arial, sans-serif; letter-spacing: -.085em; }
.hero-copy h1 span { display: block; margin-top: 14px; color: var(--ink); font: 850 clamp(1.55rem, 2.9vw, 2.55rem)/1.12 system-ui, sans-serif; letter-spacing: -.04em; }
.hero-copy > p { max-width: 29rem; color: var(--muted); font-size: .97rem; line-height: 1.64; }
.systems { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.35rem; }
.systems a { flex: 1 1 max-content; padding: .74rem .55rem; border: 1px solid #373f85; border-radius: 3px; box-shadow: 2px 3px 0 #7b85b6; background: linear-gradient(#fff, #e6e9ff); font-weight: 850; color: #192987; text-align: center; text-decoration: none; }
.systems a:first-child { background: linear-gradient(#e2ff8d, #cdf33c); }
.systems a:hover { background: #fff; box-shadow: 0 0 0 #7b85b6; transform: translate(1px, 2px); }
.apple { display: inline-block; margin-top: 1rem; font-size: .85rem; font-weight: 680; }
.hero-shot { margin: 0; position: relative; min-width: 0; min-height: 360px; border: 2px solid #202445; background: #26378e; overflow: hidden; }
.hero-shot img { height: 100%; width: 100%; position: absolute; inset: 0; object-fit: cover; object-position: 51% 54%; }
.hero-shot figcaption { position: absolute; bottom: 0; right: 0; padding: 5px 9px; background: var(--lime); color: #1d2841; font: 700 .72rem/1.3 "Courier Prime", "Courier New", monospace; letter-spacing: .035em; }
.home-row, .question-block { padding: 45px 0; }
.home-row + .home-row, .question-block { border-top: 1px solid var(--rule); }
.frame { background: var(--sheet); }
.section-grid { display: grid; grid-template-columns: minmax(170px,.78fr) 1.8fr; gap: 2.4rem; align-items: start; }
h2 { margin: 0 0 .6rem; font-size: clamp(1.32rem, 2.5vw, 1.75rem); letter-spacing: -.04em; line-height: 1.3; color: #182476; }
.section-grid > div:first-child p { font-size: .92rem; line-height: 1.65; color: var(--muted); margin-top: .9rem; }
.check-list { margin: 0; padding: 0; list-style: none; counter-reset: check; }
.check-list li { display: grid; grid-template-columns: auto 1fr; column-gap: 14px; padding: .7rem 0; border-bottom: 1px solid var(--rule); counter-increment: check; line-height: 1.6; }
.check-list li:first-child { padding-top: .15rem; }
.check-list li::before { content: "0" counter(check); grid-row: span 2; color: var(--dark-blue); font: 700 .82rem/2 "Courier Prime", "Courier New", monospace; }
.check-list b { color: #152385; }
.check-list span { color: var(--muted); font-size: .88rem; }
.guide-rows { display: grid; gap: 0; border-top: 2px solid var(--blue); }
.guide-rows a { display: block; padding: 1.3rem .8rem 1.1rem; border-bottom: 1px solid var(--rule); font-weight: 850; font-size: 1.05rem; }
.guide-rows a span { display: block; margin-bottom: .25rem; color: var(--muted); font: 700 .75rem/1.3 "Courier Prime", "Courier New", monospace; }
details { border-bottom: 1px solid var(--rule); }
summary { padding: .9rem .2rem; cursor: pointer; color: #182476; font-weight: 820; }
details p { padding: 0 .2rem .85rem; color: var(--muted); line-height: 1.6; }
.foot { background: #171e60; color: #f1f2ff; padding: 30px 0; }
.foot .wrap { display: flex; align-items: start; justify-content: space-between; gap: 1.2rem; }
.foot p { max-width: 610px; font-size: .88rem; line-height: 1.62; }
.foot a,.foot span { color: #fff; }
.subhead { background: #dbe1ff; padding: 39px 0 32px; border-bottom: 1px solid var(--rule); }
.subhead h1 { margin: .8rem 0; font: 900 clamp(1.8rem, 4vw, 3.15rem)/1.17 system-ui, sans-serif; color: var(--dark-blue); letter-spacing: -.048em; overflow-wrap: anywhere; }
.subhead p { line-height: 1.72; color: var(--muted); max-width: 60ch; }
.crumb { display: flex; flex-wrap: wrap; gap: .6rem; font-size: .84rem; font-weight: 700; }
.crumb a::after { content: "/"; color: var(--muted); display: inline-block; margin-inline-start: .6rem; font-weight: normal; }
.content-pane { max-width: 768px; margin: 0 auto; padding: 32px 0 56px; }
.content-pane section { border-top: 1px solid var(--rule); margin-top: 22px; padding-top: 22px; scroll-margin-top: 12px; }
.content-pane section:target { border-top: 4px solid var(--blue); padding-top: 19px; }
.content-pane p, .content-pane li { line-height: 1.83; overflow-wrap: anywhere; }
.content-pane p + p { margin-top: .8rem; }
.content-pane ul, .content-pane ol { padding-left: 1.45rem; }
.content-pane .systems { margin: 0 0 2rem; }
.more { display: flex; gap: 1.3rem; flex-wrap: wrap; border-top: 1px solid var(--rule); margin-top: 2rem; padding-top: 1.1rem; }
time { display: inline-block; margin-top: .65rem; font: .83rem "Courier Prime", monospace; color: var(--muted); }
code { font-family: "Courier Prime", "Courier New", monospace; overflow-wrap: anywhere; }
@media (max-width: 720px) {
  .wrap { width: min(calc(100% - 1.5rem), var(--width)); }
  .top .wrap { min-height: 58px; }
  .top nav { gap: .65rem; }
  .top nav a { font-size: .8rem; }
  .home-lead { padding: 23px 0 26px; }
  .window { box-shadow: 3px 4px 0 #5a62a560; }
  .window-body { grid-template-columns: 1fr; gap: 12px; padding: 10px; }
  .hero-copy { padding: 11px 9px 5px; }
  .hero-shot { min-height: 0; aspect-ratio: 1.48; }
  .hero-copy h1 { font-size: 3.25rem; }
  .hero-copy > p { font-size: .89rem; }
  .systems a { min-height: 44px; }
  .section-grid { grid-template-columns: 1fr; gap: 1rem; }
  .home-row, .question-block { padding: 28px 0; }
  .foot .wrap { display: grid; }
}
@media (prefers-reduced-motion: no-preference) {
  .systems a { transition: transform .13s, box-shadow .13s, background .13s; }
  .hero-shot img { animation: image-in 240ms ease-out both; }
  @keyframes image-in { from { filter: contrast(1.28) saturate(1.28); } to { filter: none; } }
}