/* orbtchess.org: one stylesheet, no build step.
   The palette is the app's: the indigo of its icon, its blue tint, its board (BoardLight and
   BoardDark tinted toward the app color, see Design/COLORS.md) and its meaning colors
   (built blue, learned green, learning red, to do orange). */
:root {
  --bg: #f7f8fb;
  --surface: #ffffff;
  --surface-2: #eef1f6;
  --text: #0b0e14;
  --text-2: #4a5263;
  --text-3: #8a93a5;
  --line: rgba(15, 23, 42, 0.09);
  --track: rgba(120, 128, 145, 0.2);
  --blue: #007aff;
  --indigo: #5856d6;
  --green: #34c759;
  --red: #ff3b30;
  --orange: #ff9500;
  --tint: var(--blue);
  --tint-soft: rgba(0, 122, 255, 0.12);
  --sq-light: #cddcef;            /* the app's board, light square */
  --sq-dark: #7698c2;             /* the app's board, dark square */
  --ink: #0b3466;                 /* the board's arrows: the app color 55% toward black */
  --glow-1: rgba(88, 86, 214, 0.22);
  --glow-2: rgba(0, 122, 255, 0.18);
  --shadow: 0 30px 60px -24px rgba(16, 24, 48, 0.35), 0 8px 20px -12px rgba(16, 24, 48, 0.2);
  --frame: #12151c;
  --radius: 28px;
  --max: 1160px;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0b0e14;
    --surface: #131823;
    --surface-2: #1b2130;
    --text: #f2f4f8;
    --text-2: #a5adbd;
    --text-3: #6c7588;
    --line: rgba(255, 255, 255, 0.08);
    --track: rgba(150, 160, 180, 0.22);
    --blue: #0a84ff;
    --indigo: #7d7aff;
    --green: #30d158;
    --red: #ff453a;
    --orange: #ff9f0a;
    --tint-soft: rgba(10, 132, 255, 0.16);
    --sq-light: #b9cbe2;
    --sq-dark: #6987b0;
    --ink: #0a2f5c;
    --glow-1: rgba(110, 108, 255, 0.28);
    --glow-2: rgba(10, 132, 255, 0.2);
    --shadow: 0 30px 70px -24px rgba(0, 0, 0, 0.8);
    --frame: #05070b;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 72px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 17px/1.55 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased; overflow-x: clip;
}
a { color: var(--tint); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; height: auto; display: block; }
picture { display: block; }
h1, h2, h3 { margin: 0 0 0.4em; letter-spacing: -0.035em; line-height: 1.05; font-weight: 750; }
h1 { font-size: clamp(2.6rem, 7.2vw, 5.4rem); }
h2 { font-size: clamp(2rem, 4.8vw, 3.4rem); }
h3 { font-size: clamp(1.35rem, 2.2vw, 1.7rem); letter-spacing: -0.025em; line-height: 1.15; font-weight: 700; }
p { margin: 0 0 1em; }
.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 20px; }
@media (min-width: 760px) { .wrap { padding: 0 40px; } }
.eyebrow { font-size: 13px; font-weight: 650; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3); margin-bottom: 14px; }
.lede { font-size: clamp(1.1rem, 2vw, 1.35rem); color: var(--text-2); line-height: 1.5; }

/* Header */
.site-header {
  position: sticky; top: 0; z-index: 10;
  background: color-mix(in srgb, var(--bg) 75%, transparent);
  backdrop-filter: saturate(180%) blur(18px); -webkit-backdrop-filter: saturate(180%) blur(18px);
  border-bottom: 1px solid var(--line);
}
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; height: 60px; gap: 16px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--text); font-weight: 650; letter-spacing: -0.01em; }
.brand:hover { text-decoration: none; }
.brand img { width: 28px; height: 28px; border-radius: 7px; }
.site-nav { display: flex; align-items: center; gap: 24px; font-size: 15px; }
.site-nav a { color: var(--text-2); display: inline-flex; align-items: center; gap: 7px; }
.site-nav a:hover { color: var(--text); text-decoration: none; }
.site-nav .github { color: var(--text); background: var(--surface); border: 1px solid var(--line); padding: 7px 14px; border-radius: 999px; }
@media (max-width: 640px) { .site-nav .wide { display: none; } }

/* Buttons: capsules, as in the app */
.cta { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.app-store img { height: 52px; width: auto; }
.button {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 52px;
  padding: 0 24px; border-radius: 999px; font-weight: 650; font-size: 16px;
  background: var(--tint); color: #fff; border: 1px solid transparent;
  transition: transform 0.15s ease, filter 0.15s ease;
}
.button:hover { text-decoration: none; filter: brightness(1.08); transform: translateY(-1px); }
.button.ghost { background: var(--surface); color: var(--text); border-color: var(--line); }

/* Hero: the app's board as a fading backdrop, two soft glows */
.hero { position: relative; padding: 96px 0 0; isolation: isolate; }
.hero-bg { position: absolute; inset: 0 0 30% 0; z-index: -1; overflow: hidden; }
.hero-bg::before {
  content: ""; position: absolute; inset: -10%;
  background: repeating-conic-gradient(var(--sq-dark) 0 25%, var(--sq-light) 0 50%) 50% 0 / 96px 96px;
  opacity: 0.12;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000 0%, transparent 75%);
  mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000 0%, transparent 75%);
}
.hero-bg::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(40% 50% at 30% 20%, var(--glow-1), transparent 70%),
              radial-gradient(40% 50% at 75% 35%, var(--glow-2), transparent 70%);
}
.hero-inner { text-align: center; display: flex; flex-direction: column; align-items: center; }
.hero h1 { max-width: 15ch; }
.hero .lede { max-width: 640px; margin: 8px auto 32px; }
.hero .cta { justify-content: center; }
.pill {
  display: inline-flex; align-items: center; font-size: 14px; font-weight: 600; color: var(--text-2);
  background: var(--surface); border: 1px solid var(--line); padding: 6px 14px; border-radius: 999px; margin-bottom: 28px;
}

.stage-wrap { perspective: 1600px; margin-top: 64px; }
.stage { position: relative; max-width: 1000px; margin: 0 auto; padding-bottom: 6%; transform-origin: 50% 0; }
.device img { border: 10px solid var(--frame); box-shadow: var(--shadow); }
.device.ipad { width: 86%; }
.device.ipad img { border-radius: 30px; }
.device.iphone { position: absolute; right: 0; bottom: 0; width: 23%; }
.device.iphone img { border-radius: 38px; border-width: 7px; }
@media (max-width: 640px) {
  .stage-wrap { margin-top: 40px; }
  .device img { border-width: 5px; }
  .device.ipad img { border-radius: 16px; }
  .device.iphone { width: 27%; }
  .device.iphone img { border-width: 4px; border-radius: 20px; }
}

.section-head { text-align: center; margin-bottom: 56px; }
.section-head h2 { margin: 0; }

/* Steps: numbered, in the app's meaning colors */
.step { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; font-weight: 750; font-size: 15px; color: #fff; background: var(--blue); }
.step.accent { background: var(--indigo); }
.step.todo { background: var(--orange); }
.step.learned { background: var(--green); }
.kicker { font-size: 14px; font-weight: 700; letter-spacing: 0.02em; margin: 0 0 10px; }
.kicker.built { color: var(--blue); }
.kicker.accent { color: var(--indigo); }
.kicker.todo { color: var(--orange); }
.kicker.learned { color: var(--green); }

/* How it works: four rows, each step's text beside its close-up, alternating sides. On phones
   each row stacks: text, then its close-up. */
.story { padding-top: 120px; }
.zigzag { list-style: none; margin: 0; padding: 0; display: grid; gap: 56px; position: relative; }
.zz-row { display: grid; gap: 28px; align-items: center; }
.zz-text h3 { font-size: clamp(1.7rem, 3vw, 2.4rem); }
.zz-text > p:not(.kicker) { color: var(--text-2); font-size: 1.1rem; max-width: 46ch; margin: 0; }
.zz-text .step { margin-bottom: 18px; }
@media (min-width: 900px) {
  .zigzag { gap: 120px; }
  .zz-row { grid-template-columns: 1fr 1fr; gap: 96px; }
  .zz-row.flip .zz-text { order: 2; }
  .zz-text { max-width: 440px; justify-self: end; }
  .zz-row.flip .zz-text { justify-self: start; }
}

/* Close-ups of one part of the app, drawn in HTML like the app (its board colors, its
   cburnett pieces, its grouped cards), so they stay sharp and follow light and dark */
.focus { width: 100%; }
.app-card, .focus .group {
  width: 100%; max-width: 440px; margin: 0 auto; background: var(--surface); border-radius: 26px;
  box-shadow: 0 0 0 1px var(--line), var(--shadow); overflow: hidden;
}
.focus .group { padding: 18px 0 16px; }
.focus .group .cells { margin: 0 14px; }
.app-card-head { display: flex; justify-content: space-between; align-items: baseline; padding: 16px 18px 10px; }
.app-card-head span:first-child { font-weight: 700; }
.app-card-head span:last-child { font-size: 13px; color: var(--text-3); }

.board { position: relative; display: grid; grid-template-columns: repeat(8, 1fr); aspect-ratio: 1; width: 100%; }
.board .sq { position: relative; display: block; }
.board .sq.l { background: var(--sq-light); }
.board .sq.d { background: var(--sq-dark); }
.board .sq.last::after { content: ""; position: absolute; inset: 0; background: var(--blue); opacity: 0.45; }
.board .sq img { position: absolute; inset: 4%; width: 92%; height: 92%; z-index: 1; }
.board .arrows { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; }
.board .arrows polygon { fill: var(--ink); }

.explorer { font-variant-numeric: tabular-nums; padding-bottom: 8px; }
.ex-row { display: grid; grid-template-columns: 3.2em 3em 1fr 5.4em; align-items: center; gap: 10px; padding: 10px 18px; border-top: 1px solid var(--line); }
.ex-row b { font-size: 1.1rem; }
.ex-row .ev { font-size: 14px; font-weight: 600; }
.ex-head { font-size: 11px; font-weight: 600; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.04em; border-top: 0; padding-top: 0; }
.ex-head span:last-child { text-align: right; }
.wdl { display: flex; height: 20px; border-radius: 6px; overflow: hidden; font-size: 11px; font-weight: 600; box-shadow: 0 0 0 1px var(--line); }
.wdl s { display: grid; place-items: center; width: var(--p); text-decoration: none; }
.wdl .w { background: #fff; color: #222; }
.wdl .dr { background: #9aa0aa; }
.wdl .b { background: #26282d; color: #fff; }
.games { font-size: 13px; text-align: right; white-space: nowrap; }
.games em { font-style: normal; color: var(--text-3); }

.engine .lines { padding: 0 14px 12px; display: grid; gap: 6px; }
.line { display: flex; gap: 10px; align-items: center; font-size: 14px; white-space: nowrap; overflow: hidden; }
.line .eval { flex: none; font-weight: 700; font-size: 13px; background: var(--surface-2); padding: 2px 7px; border-radius: 6px; }

.study-moves { padding: 14px 18px 4px; font-size: 15px; }
.study-moves span { color: var(--text-3); }
.study-moves .sp { display: inline-block; width: 8px; }
.study-moves b { background: var(--tint-soft); padding: 3px 8px; border-radius: 8px; }
.study-prompt { display: flex; align-items: center; gap: 8px; padding: 8px 18px 18px; color: var(--blue); font-weight: 600; }
.study-prompt .spark { font-size: 18px; }
.study-prompt .due { margin-left: auto; display: flex; gap: 10px; font-variant-numeric: tabular-nums; }
.due .new, .new { color: var(--blue); }
.due .lrn, .lrn { color: var(--red); }
.due .rev { color: var(--green); }

.progress { background: var(--surface-2); padding: 14px 14px 16px; box-shadow: 0 0 0 1px var(--line); }
.pg-label { font-size: 14px; font-weight: 600; color: var(--text-3); padding: 6px 8px 8px; }
.pg-card { background: var(--surface); border-radius: 18px; padding: 14px 16px; display: grid; gap: 10px; margin-bottom: 8px; }
.pg-top { display: flex; justify-content: space-between; }
.pg-top .gap { color: var(--orange); font-weight: 600; }
.pg-row { display: flex; justify-content: space-between; border-top: 1px solid var(--line); padding-top: 10px; }
.muted { color: var(--text-3); }
.studied { display: flex; height: 6px; border-radius: 3px; overflow: hidden; background: var(--track); }
.studied s { display: block; width: var(--w); }
.studied .mature { background: var(--green); }
.studied .young { background: color-mix(in srgb, var(--green) 55%, white); }
.studied .learning { background: var(--red); }
.legend { list-style: none; padding: 0; margin: 0; display: flex; gap: 14px; font-size: 12px; color: var(--text-3); }
.legend li::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 5px; background: var(--track); }
.legend .mature::before { background: var(--green); }
.legend .young::before { background: color-mix(in srgb, var(--green) 55%, white); }
.legend .learning::before { background: var(--red); }
.due-text { font-weight: 600; }

.tile .focus { margin-top: auto; }
@media (max-width: 480px) { .ex-row { grid-template-columns: 2.8em 2.6em 1fr 4.6em; gap: 8px; padding: 9px 14px; } .wdl { font-size: 10px; } .line { font-size: 12.5px; } }

/* Features bento */
.features { padding-top: 140px; }
.bento { display: grid; gap: 20px; grid-template-columns: 1fr; }
@media (min-width: 900px) {
  .bento { grid-template-columns: repeat(6, 1fr); }
  .t-gaps, .t-offline, .t-files, .t-works-offline { grid-column: span 3; }
  .t-ipad { grid-column: span 6; }
}
.tile {
  position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 28px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 32px;
}
.tile h3 { margin-bottom: 8px; }
.tile > .group { margin-top: auto; }
.tile-text p:not(.kicker) { color: var(--text-2); margin: 0; max-width: 52ch; }
.crop-phone { width: min(300px, 80%); margin: auto auto -32px; height: 420px; overflow: hidden; }
.crop-phone img { border: 7px solid var(--frame); border-bottom: 0; border-radius: 38px 38px 0 0; box-shadow: var(--shadow); }
.crop-tablet img { border: 8px solid var(--frame); border-radius: 22px; box-shadow: var(--shadow); }
@media (min-width: 900px) {
  .t-ipad { flex-direction: row; align-items: center; padding: 40px 0 40px 40px; }
  .t-ipad .tile-text { flex: 0 0 30%; }
  .crop-tablet { flex: 1; margin-right: -14%; }
  .crop-tablet img { border-right: 0; border-radius: 22px 0 0 22px; }
}
@media (max-width: 560px) { .tile { padding: 24px; border-radius: 22px; } .crop-phone { margin-bottom: -24px; height: 360px; } }

/* Coverage databases: the progress card's style, one band per rating range, one picked */
.db-bands { display: flex; gap: 3px; }
.db-bands i { flex: 1; height: 6px; border-radius: 3px; background: var(--track); }
.db-bands i.on { background: var(--orange); }

/* Grouped lists: the app's inset grouped style */
.group { width: 100%; font-variant-numeric: tabular-nums; }
.group-header { font-size: 14px; font-weight: 600; color: var(--text-3); padding: 0 18px 8px; }
.group-footer { font-size: 13px; color: var(--text-3); padding: 10px 18px 0; }
.cells { background: var(--surface-2); border-radius: 20px; overflow: hidden; }
.cell { display: flex; align-items: center; gap: 14px; min-height: 52px; padding: 11px 18px; position: relative; }
.cell + .cell::before { content: ""; position: absolute; top: 0; left: 18px; right: 0; border-top: 1px solid var(--line); }
.cell .title { font-weight: 650; min-width: 4em; }
.cell .value { margin-left: auto; color: var(--text-2); font-size: 14px; white-space: nowrap; }
.cell .value.ok { color: var(--blue); }
.cell .value.gap { color: var(--orange); font-weight: 650; }
.bar { flex: 1; min-width: 40px; height: 6px; border-radius: 3px; background: var(--track); overflow: hidden; display: block; }
.bar s { display: block; height: 100%; width: var(--w); background: var(--blue); border-radius: 3px; transform-origin: 0 50%; }
.check { flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 800; color: #fff; background: var(--green); }
.doc { flex: none; font-size: 9px; font-weight: 750; letter-spacing: 0.04em; color: var(--blue); width: 30px; height: 38px; border-radius: 6px; display: grid; place-items: end center; padding-bottom: 5px; background: var(--tint-soft); }
@media (max-width: 480px) { .cell { gap: 10px; padding: 10px 14px; } .cell .title { min-width: 3.4em; font-size: 15px; } .cell .value { font-size: 12.5px; } }

/* Other platforms */
.platforms { padding-top: 140px; }
.platforms-card {
  display: grid; gap: 28px; align-items: center; padding: 40px; border-radius: var(--radius);
  background: var(--surface); border: 1px dashed color-mix(in srgb, var(--text-3) 60%, transparent);
}
.platforms-card h2 { font-size: clamp(1.7rem, 3.4vw, 2.4rem); }
.platforms-card .lede { margin: 0; font-size: 1.1rem; }
@media (min-width: 900px) { .platforms-card { grid-template-columns: 1.4fr 1fr; padding: 48px; } }
.platforms-side { display: flex; flex-direction: column; gap: 20px; align-items: flex-start; }
.roadmap { list-style: none; padding: 0; margin: 0; width: 100%; }
.roadmap li { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.roadmap li:first-child { padding-top: 0; }
.roadmap .mark { flex: none; width: 22px; height: 22px; border-radius: 50%; border: 2px dashed color-mix(in srgb, var(--text-3) 70%, transparent); display: grid; place-items: center; font-size: 12px; font-weight: 800; }
.roadmap .done .mark { border: 0; background: var(--green); color: #fff; }
.roadmap .state { margin-left: auto; font-size: 14px; color: var(--text-3); }
.roadmap .done .state { color: var(--green); font-weight: 600; }
.roadmap li:not(.done) > span:nth-child(2) { color: var(--text-2); }
@media (max-width: 560px) { .platforms-card { padding: 28px 24px; } }

/* Open source */
.open-source { padding-top: 140px; padding-bottom: 120px; }
.open-source .section-head .lede { max-width: 640px; margin: 16px auto 0; }
.os-grid { display: grid; gap: 20px; margin-bottom: 40px; }
@media (min-width: 900px) { .os-grid { grid-template-columns: repeat(3, 1fr); } }
.os-item { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; }
.os-item h3 { font-size: 1.25rem; margin-bottom: 8px; }
.os-item p { color: var(--text-2); margin: 0; }
.nowrap { white-space: nowrap; }
.open-source .cta { justify-content: center; }
.credits { margin-top: 40px; color: var(--text-3); font-size: 15px; text-align: center; }

/* Footer */
.site-footer { border-top: 1px solid var(--line); padding: 32px 0 48px; font-size: 14px; color: var(--text-3); }
.site-footer .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.site-footer nav a, .site-footer .legal a { color: var(--text-2); }
.site-footer .legal { width: 100%; }

/* Text pages (privacy, support, contact) */
.page { max-width: 760px; padding-top: 72px; padding-bottom: 120px; }
.page h1 { font-size: clamp(2.2rem, 5vw, 3.2rem); }
.page h2 { font-size: 1.5rem; margin-top: 2em; }
.page .updated { color: var(--text-3); font-size: 15px; }
.page ul { padding-left: 1.2em; }
.page li { margin-bottom: 0.5em; }
.page code { font: 0.9em ui-monospace, SFMono-Regular, Menlo, monospace; background: var(--surface-2); padding: 1px 6px; border-radius: 6px; }
.callout { background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: 20px 24px; margin: 24px 0; }
.callout p:last-child { margin: 0; }
details { border-bottom: 1px solid var(--line); padding: 16px 0; }
details summary { cursor: pointer; font-weight: 650; }
details[open] summary { margin-bottom: 8px; }
details p:last-child { margin-bottom: 0; }

/* Motion. Transform only: nothing starts hidden, so if an animation never runs the content is
   simply in place. Off for people who ask for reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: scroll()) {
    /* The hero devices start tilted back and lie flat as you scroll */
    .stage { animation: tilt linear both; animation-timeline: view(); animation-range: entry 20% cover 50%; }
    @keyframes tilt { from { transform: rotateX(18deg) scale(0.92); } to { transform: none; } }

    /* Tiles rise into place; coverage bars grow from a sliver */
    .tile, .zz-row .focus { animation: rise linear both; animation-timeline: view(); animation-range: entry 0% entry 70%; }
    @keyframes rise { from { transform: translateY(48px) scale(0.98); } to { transform: none; } }
    .bar s { animation: grow linear both; animation-timeline: view(); animation-range: entry 30% cover 45%; }
    @keyframes grow { from { transform: scaleX(0.15); } to { transform: none; } }
  }
}