:root {
  color-scheme: dark;
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  background: #000;
  color: #fff;
  -webkit-font-smoothing: antialiased;
  --accent: #b8a0f0;
  --line: #2b2b2b;
}
* { box-sizing: border-box; }
body { margin: 0; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--accent); }
a:focus-visible { outline: 2px solid var(--accent); outline-offset: 7px; }
::selection { background: #67509a; color: #fff; }
p, figure { margin: 0; }
.page { max-width: 1440px; margin: auto; padding-inline: clamp(24px, 5.28vw, 76px); }
.skip-link { position: absolute; top: 12px; left: 24px; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; background: #000; z-index: 10; }
.skip-link:focus { width: auto; height: auto; padding: 12px; clip-path: none; }
.header { min-height: 108px; display: flex; align-items: center; gap: 60px; border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: 13px; font-size: 1.625rem; font-weight: 600; letter-spacing: -1px; }
.brand img { display: block; width: 44px; height: 44px; }
.tagline { flex: 1; color: #aaa; font-size: .875rem; }
.availability { margin-left: auto; font-size: .875rem; }
.hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 535px); gap: 60px; align-items: center; padding: 74px 0 68px; }
.eyebrow { margin-bottom: 27px; color: #bca7e5; font: .75rem/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 2px; text-transform: uppercase; }
h1 { margin: 0; font-size: clamp(4.25rem, 7.3vw, 6.5625rem); font-weight: 500; line-height: .98; letter-spacing: -.06em; }
h1 span { color: var(--accent); }
.description { max-width: 465px; margin: 30px 0 35px; font-size: 1.3125rem; line-height: 1.5; letter-spacing: -.025em; color: #bbb; }
.shortcut { display: flex; flex-wrap: wrap; align-items: center; gap: 21px; color: #c6c6c6; font-size: 1rem; }
.keycaps { display: flex; gap: 8px; color: #fff; }
.keycaps kbd { display: grid; place-items: center; min-width: 44px; height: 44px; border: 1px solid #555; border-bottom-width: 3px; border-radius: 7px; background: #101010; font-family: inherit; font-size: 1.25rem; line-height: 1; }
.note { margin-top: 27px; color: #aaa; font-size: .8125rem; line-height: 1.5; }
/* A still example of Cel's overlay, rather than a second set of app controls. */
.demo { min-width: 0; border: 1px solid #4a404e; border-radius: 12px; background: #211b25; transform: rotate(2deg); }
.chrome { min-height: 40px; display: flex; align-items: center; padding: 10px 16px; gap: 14px; color: #d0c9d1; font-size: .75rem; line-height: 1.35; }
.chrome > span:last-child { margin-inline: auto; text-align: center; }
.window-dots { display: flex; flex: none; gap: 6px; }
.window-dots i { width: 7px; height: 7px; background: #74687b; border-radius: 50%; }
.paper { background: #d3c0ab; color: #272020; border-radius: 0 0 11px 11px; padding: 30px 44px; }
.paper-top { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; }
.paper-top > span:first-child { font: .75rem/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; text-transform: uppercase; letter-spacing: 1px; }
.hint { background: #19171d; border: 1px solid #595160; color: #fff; font-size: .75rem; line-height: 1.4; padding: 10px 13px; border-radius: 50px; white-space: nowrap; box-shadow: 0 3px 18px #0003; }
.hint kbd { font-family: inherit; margin-left: 7px; }
.paper-title { margin: 35px 0 28px; font: 4.625rem/.95 Georgia, "Times New Roman", serif; letter-spacing: -.055em; }
.paper-body { font: 1.6875rem/1.65 Georgia, "Times New Roman", serif; }
.selection { background: #8f93db; position: relative; padding: 3px 0; box-shadow: -3px 0 #8f93db, 3px 0 #8f93db; white-space: nowrap; }
.selection::before, .selection::after { content: ""; position: absolute; width: 2px; height: 100%; top: 0; background: #3f48be; }
.selection::before { left: -4px; }
.selection::after { right: -4px; }
.cursor { position: absolute; right: -25px; bottom: -31px; pointer-events: none; }
.paper-footer { margin-top: 39px; padding-top: 22px; border-top: 1px solid #8e7e70; font-size: .75rem; line-height: 1.5; letter-spacing: 1px; text-transform: uppercase; }
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; list-style: none; margin: 0 0 50px; padding: 0; }
.steps li { border-top: 1px solid #333; padding-top: 20px; display: flex; gap: 20px; }
.step-number { color: #b29bd9; font: .75rem/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; margin-top: 3px; }
.steps h2 { font-size: 1.0625rem; line-height: 1.5; font-weight: 400; margin: 0; }
.steps p { font-size: .875rem; line-height: 1.5; color: #aaa; margin-top: 9px; }
.footer { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 20px; border-top: 1px solid var(--line); padding: 26px 0 46px; color: #aaa; font-size: .8125rem; line-height: 1.5; }
.footer a span { margin-left: 5px; }
@media (max-width: 1150px) {
  .hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 44px; }
  .paper { padding: 28px; }
  .paper-title { font-size: clamp(3rem, 5.2vw, 4.625rem); }
  .paper-body { font-size: clamp(1.125rem, 1.9vw, 1.6875rem); }
  .paper-top { gap: 14px; }
  .hint { padding: 8px 12px; }
  .steps { gap: 24px; }
}
@media (max-width: 800px) {
  .header { min-height: 90px; gap: 24px; }
  .tagline { display: none; }
  .hero { grid-template-columns: minmax(0, 1fr); gap: 56px; padding: 48px 0 56px; }
  h1 { font-size: clamp(4.25rem, 13vw, 6.5625rem); }
  .description { max-width: 500px; font-size: 1.1875rem; margin: 25px 0 28px; }
  .demo { width: min(100%, 535px); justify-self: center; }
  .paper { padding: 28px 32px; }
  .paper-title { font-size: clamp(3.25rem, 9vw, 4.625rem); }
  .paper-body { font-size: clamp(1.125rem, 4.1vw, 1.6875rem); }
  .steps { grid-template-columns: 1fr; gap: 24px; margin-bottom: 38px; }
  .steps li { padding-top: 18px; }
  .footer { justify-content: flex-start; column-gap: 28px; row-gap: 12px; padding-bottom: 32px; }
}
@media (max-width: 380px) {
  .page { padding-inline: 20px; }
  h1 { font-size: 3.875rem; }
  .paper { padding: 24px; }
  .paper-title { font-size: 3rem; }
  .paper-body { font-size: 1.0625rem; }
  .chrome { padding-inline: 12px; gap: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; }
}
/* Text pages such as /privacy. */
.prose { max-width: 680px; padding: 74px 0 80px; }
.prose h1 { font-size: clamp(2.75rem, 5vw, 4rem); margin-bottom: 30px; }
.prose h2 { font-size: 1.0625rem; font-weight: 500; margin: 40px 0 10px; }
.prose p { font-size: 1.125rem; line-height: 1.6; color: #bbb; }
.prose a { color: var(--accent); }