:root {
  color-scheme: dark;
  font: 16px/1.6 system-ui, sans-serif;
  color: #f8f1ed;
  background: #100e12;
  --muted: #c7b8bd;
  --accent: #ffab8e;
  --line: #ffffff23;
}
* { box-sizing: border-box; }
body { margin: 0; background: radial-gradient(ellipse at 67% 8%, #421f2d, transparent 60%); }
a { color: inherit; }
a:focus-visible, summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 5px; }
.shell { width: min(100% - 3rem, 64rem); margin-inline: auto; }
.top, .bottom, .section-title { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; }
.top { padding-block: 1.25rem; border-bottom: 1px solid var(--line); }
.top a, .bottom a, .browse { text-decoration: none; }
.top a:hover, .bottom a:hover, .browse:hover { text-decoration: underline; }
.wordmark { font-size: 1.5rem; font-weight: 850; letter-spacing: -.06em; }
.wordmark span { font-weight: 450; }
.wordmark .dot { color: var(--accent); }
.hero { padding-block: clamp(3rem, 9vw, 7rem) 3.5rem; }
.eyebrow, .section-title span { color: var(--accent); font-size: .72rem; font-weight: 750; letter-spacing: .15em; margin: 0; }
h1 { font-size: clamp(3rem, 10vw, 7.2rem); line-height: .99; letter-spacing: -.075em; margin: .22em 0; }
h1 em { color: var(--accent); font-style: normal; }
.hero > p:not(.eyebrow), .platform p:not(.eyebrow), .bottom { color: var(--muted); }
.hero > p:not(.eyebrow) { font-size: 1.1rem; max-width: 32rem; margin: 1.45rem 0; }
.browse { font-weight: 700; }
.browse span { margin-left: .35rem; color: var(--accent); }
.section-title { padding-bottom: .75rem; }
h2, h3 { line-height: 1.15; margin: 0; letter-spacing: -.04em; }
h3 { font-size: 1.7rem; margin-top: .25rem; }
.platform { display: grid; grid-template-columns: minmax(0, 1fr) minmax(11rem, .5fr); align-items: start; gap: 1.25rem; border: 1px solid var(--line); border-radius: 1.35rem; padding: clamp(1.25rem, 4vw, 2rem); background: #ffffff07; }
.platform p { margin-bottom: 0; }
summary, .continue { font-weight: 700; cursor: pointer; }
summary { border: 1px solid var(--line); border-radius: .85rem; padding: .65rem 1rem; background: #ffffff0c; }
summary:hover { background: #ffffff16; }
.continue { display: inline-block; margin-top: .65rem; color: var(--accent); }
.bottom { padding-block: 1.6rem; margin-top: 3rem; border-top: 1px solid var(--line); font-size: .88rem; flex-wrap: wrap; }
@media (max-width: 36rem) {
  .shell { width: calc(100% - 2rem); }
  .platform { grid-template-columns: 1fr; }
}