@import url("https://fonts.googleapis.com/css2?family=Inter+Tight:ital,wght@0,400..800;1,400..800&family=Inter:ital,opsz,wght@0,14..32,400..800;1,14..32,400..800&family=DM+Mono:wght@400;500&display=swap");

:root {
  --paper: #F4F6F3;
  --surface: #FFFFFF;
  --ink: #0B0D12;
  --muted: #555B66;
  --line: #DCE1E6;
  --accent: #0785D1;
  --accent-ink: #FFFFFF;
  --link: #000B67;
  --frame: #05070C;
  --caption: #FFFFFF;
  --arrow-1: #0785D1;
  --arrow-2: #000B67;
  --frame-aspect: 480 / 360;

  --display: "Inter Tight", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --body: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: "DM Mono", ui-monospace, "SF Mono", Menlo, monospace;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #060A24; --surface: #0C1338; --ink: #F4F6F3; --muted: #A6AECA; --line: #1C2660;
    --accent: #2BA3EC; --accent-ink: #021024; --link: #8CCBF5; --frame: #03050F; --caption: #FFFFFF;
    --arrow-1: #0B8AD8; --arrow-2: #2337A6;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #060A24; --surface: #0C1338; --ink: #F4F6F3; --muted: #A6AECA; --line: #1C2660;
  --accent: #2BA3EC; --accent-ink: #021024; --link: #8CCBF5; --frame: #03050F; --caption: #FFFFFF;
  --arrow-1: #0B8AD8; --arrow-2: #2337A6;
  color-scheme: dark;
}

.wordmark {
  font-family: var(--display); font-weight: 500; color: #FFFFFF;
  font-size: clamp(38px, 6.4vw, 66px); line-height: 1; letter-spacing: -.015em;
  display: flex; flex-direction: column; align-items: flex-start;
}
.wordmark mark, .wordmark .rest { display: block; padding: .26em 0 .34em; color: #FFFFFF; }
.wordmark mark {
  background: var(--arrow-1); padding-left: 1.05em; padding-right: .4em;
  clip-path: polygon(0 50%, .8em 0, .8em 16%, 100% 16%, 100% 84%, .8em 84%, .8em 100%);
}
.wordmark .rest {
  background: var(--arrow-2); margin: -.512em 0 0 1.5em;   padding-left: .4em; padding-right: 1.05em;
  clip-path: polygon(0 16%, calc(100% - .8em) 16%, calc(100% - .8em) 0, 100% 50%, calc(100% - .8em) 100%, calc(100% - .8em) 84%, 0 84%);
}
.results-head h2, .ptitle h3 { font-weight: 600; letter-spacing: -.015em; }
.btn:not(.ghost) { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn:not(.ghost):hover { background: var(--arrow-2); border-color: var(--arrow-2); color: #FFFFFF; }