@font-face {
  font-family:JetBrains;
  src:url('../webfonts/JetBrainsMono-Regular.woff2') format('woff2');
  font-display:swap
}
@font-face {
  font-family:JetBrains;
  src:url('../webfonts/JetBrainsMono-Bold.woff2') format('woff2');
  font-weight:700;
  font-display:swap
}
:root {
  color-scheme:dark;
  --bg:#10100f;
  --panel:#191918;
  --text:#f5f3ee;
  --muted:#aaa9a3;
  --line:#393936;
  --accent:#ff5127
}
* {
  box-sizing:border-box
}
html {
  scroll-behavior:smooth
}
body {
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo','Malgun Gothic',sans-serif;
  line-height:1.65;
  word-break:keep-all
}
a {
  color:inherit;
  text-underline-offset:5px
}
img {
  display:block;
  max-width:100%;
  height:auto
}
h1,h2,h3,p,figure {
  margin:0
}
h1,h2,h3 {
  line-height:1.2
}
a:focus-visible,summary:focus-visible {
  outline:3px solid var(--accent);
  outline-offset:6px
}
main,header,footer {
  max-width:1248px;
  margin:auto;
  padding-inline:48px
}
.site-header {
  display:flex;
  align-items:center;
  gap:32px;
  min-height:104px;
  border-bottom:1px solid var(--line)
}
.wordmark {
  font:700 24px JetBrains,monospace;
  text-decoration:none;
  letter-spacing:-1.2px
}
.wordmark sup {
  font-size:11px;
  margin-left:3px
}
.index-label,.eyebrow,.back-link,figcaption>span,footer>span {
  font:11px/1.6 JetBrains,monospace;
  letter-spacing:1px
}
.index-label {
  margin-right:auto;
  color:var(--muted)
}
.back-link {
  text-decoration:none;
  font-size:12px
}
.back-link span {
  color:var(--accent);
  padding-left:12px
}
.hero {
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:80px;
  align-items:center;
  padding:88px 0 96px
}
.eyebrow {
  color:var(--muted);
  font-size:12px;
  letter-spacing:1.8px
}
.status-dot {
  display:inline-block;
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--accent);
  margin-right:9px
}
h1 {
  font:700 clamp(66px,7vw,102px)/1.1 JetBrains,monospace;
  letter-spacing:-7px;
  margin-top:24px
}
h1 sup {
  font-size:.18em;
  vertical-align:top;
  line-height:2.6;
  letter-spacing:0
}
.subtitle {
  margin:10px 0 34px;
  color:var(--muted);
  font-size:16px
}
.hero h2 {
  font-size:clamp(32px,3.7vw,48px);
  letter-spacing:-1.8px;
  line-height:1.3
}
.intro {
  max-width:420px;
  margin:24px 0 30px;
  font-size:16px;
  line-height:1.85;
  color:#c9c8c1
}
.button {
  display:inline-flex;
  min-height:54px;
  align-items:center;
  justify-content:space-between;
  gap:42px;
  padding:14px 22px;
  background:var(--accent);
  color:#130b07;
  border:1px solid var(--accent);
  font-weight:700;
  font-size:15px;
  text-decoration:none
}
.button:hover {
  background:#ff714f
}
.download-note {
  max-width:310px;
  margin-top:14px;
  color:var(--muted);
  font-size:12px
}
.hero-image {
  border:1px solid var(--line);
  padding:28px 28px 18px;
  background:#161615
}
.hero-image img {
  width:280px;
  margin:auto
}
.hero-image figcaption {
  display:flex;
  justify-content:space-between;
  gap:10px;
  margin-top:24px;
  color:var(--muted)
}
figcaption>span {
  font-size:9px;
  letter-spacing:.8px
}
.story,.questions {
  border-top:1px solid var(--line);
  padding:72px 0;
  display:grid;
  grid-template-columns:1fr 2fr;
  gap:48px
}
.story h2,.section-heading h2,.questions h2 {
  font-size:32px;
  line-height:1.4;
  letter-spacing:-1px
}
.feature-list {
  margin-top:38px
}
.feature-list>div {
  display:flex;
  gap:22px;
  padding:22px 0;
  border-top:1px solid var(--line)
}
.feature-number {
  font:12px JetBrains,monospace;
  color:var(--accent);
  padding-top:5px
}
.feature-list h3 {
  font-size:18px;
  font-weight:600;
  margin-bottom:8px
}
.feature-list p {
  color:var(--muted);
  font-size:15px
}
.screens {
  padding:64px 0 72px;
  border-top:1px solid var(--line)
}
.section-heading {
  display:grid;
  grid-template-columns:1fr 2fr;
  gap:48px;
  margin-bottom:40px
}
.screen-pair {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px
}
.screen-pair figure {
  background:var(--panel);
  border:1px solid var(--line);
  padding:36px
}
.screen-pair img {
  width:250px;
  margin:auto
}
.screen-pair figcaption {
  padding-top:28px;
  border-top:1px solid var(--line);
  margin-top:28px
}
.screen-pair figcaption>span {
  color:var(--accent);
  font-size:10px
}
.screen-pair figcaption p {
  margin-top:9px;
  font-size:15px
}
.caption-note {
  color:var(--muted);
  font-size:12px;
  margin-top:16px
}
.questions h2 {
  margin-bottom:24px
}
details {
  border-top:1px solid var(--line);
  padding:20px 0
}
details:last-child {
  border-bottom:1px solid var(--line)
}
summary {
  font-size:16px;
  cursor:pointer;
  min-height:24px
}
details p {
  margin-top:14px;
  color:var(--muted);
  font-size:15px;
  line-height:1.9
}
.closing {
  border-top:1px solid var(--line);
  padding:48px 0 72px;
  display:flex;
  gap:22px;
  align-items:center
}
.closing>div {
  margin-right:auto
}
.closing h2 {
  font-size:23px;
  letter-spacing:-.7px
}
.closing p {
  color:var(--muted);
  font-size:13px;
  margin-top:8px
}
footer {
  min-height:100px;
  display:flex;
  align-items:center;
  gap:24px;
  border-top:1px solid var(--line);
  font-size:12px;
  color:var(--muted)
}
footer .wordmark {
  font-size:18px;
  margin-right:auto
}
.skip-link {
  position:absolute;
  left:20px;
  top:-100px;
  background:var(--accent);
  color:#000;
  padding:12px;
  z-index:10
}
.skip-link:focus {
  top:12px
}
@media(max-width:900px) {
  main,header,footer {
    padding-inline:28px
  }
  .hero {
    gap:36px;
    padding:58px 0 64px
  }
  .hero-image {
    padding:18px
  }
  .hero-image figcaption {
    display:block
  }
  .hero-image figcaption span {
    display:block;
    margin-top:5px
  }
  .story,.questions,.section-heading {
    grid-template-columns:1fr 2fr;
    gap:24px
  }
  .closing {
    flex-wrap:wrap
  }
  .closing .button {
    margin-left:78px
  }
  .screen-pair figure {
    padding:24px
  }
}
@media(max-width:600px) {
  main,header,footer {
    padding-inline:22px
  }
  .site-header {
    min-height:80px;
    gap:18px
  }
  .index-label {
    display:none
  }
  .back-link {
    margin-left:auto;
    font-size:11px
  }
  .hero {
    grid-template-columns:1fr;
    gap:40px;
    padding-top:42px
  }
  .hero h1 {
    font-size:76px;
    letter-spacing:-5px
  }
  .hero h2 {
    font-size:36px
  }
  .hero-image {
    max-width:360px;
    width:100%;
    margin:auto;
    padding:24px
  }
  .hero-image img {
    width:221px
  }
  .hero-image figcaption {
    display:flex
  }
  .story,.questions,.section-heading {
    grid-template-columns:1fr;
    gap:20px
  }
  .story,.questions {
    padding:48px 0
  }
  .story h2,.section-heading h2,.questions h2 {
    font-size:27px
  }
  .screens {
    padding:48px 0
  }
  .screen-pair {
    grid-template-columns:1fr;
    gap:20px
  }
  .screen-pair img {
    width:221px
  }
  .closing {
    gap:16px;
    padding:36px 0 48px
  }
  .closing h2 {
    font-size:19px
  }
  .closing>img {
    width:42px;
    height:42px
  }
  .closing .button {
    margin:8px 0 0;
    width:100%
  }
  footer {
    flex-wrap:wrap;
    gap:14px;
    justify-content:space-between;
    padding-block:24px
  }
  footer .wordmark {
    flex-basis:100%;
    margin:0
  }
}
@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }
}