/* baadev.com. One theme per system preference (or the one picked in the palette), one accent, one radius scale:
   the palette 20px, its rows 10px, board cells 5px, controls full pill. The hero is a full screen of dots that folds
   into the palette as you scroll. */

@font-face {
  font-family: "Geist";
  src: url("/assets/fonts/Geist-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --bg: #f3f4f4;
  --fg: #121416;
  --muted: #5d636a;
  --line: rgba(18, 20, 22, 0.1);
  --tile: #e9ebec;
  --cell: #dfe2e4;
  --cell-open: #f7f8f8;
  --accent: #e5522b;
  --focus: #e5522b;
  --panel: color-mix(in srgb, var(--bg) 70%, #fff 30%);
  --panel-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset, 0 30px 80px -40px rgba(20, 22, 26, 0.35), 0 8px 24px -16px rgba(20, 22, 26, 0.2);
  --r-cell: 5px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --pad: clamp(16px, 4vw, 48px);
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0c0d0f;
    --fg: #eceeef;
    --muted: #959ca4;
    --line: rgba(236, 238, 239, 0.12);
    --tile: #15171a;
    --cell: #1f2226;
    --cell-open: #0f1113;
    --accent: #ff6a3d;
    --focus: #ff6a3d;
    --panel: color-mix(in srgb, var(--bg) 88%, #fff 12%);
    --panel-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 30px 80px -40px rgba(0, 0, 0, 0.8);
  }
}
/* A theme picked in the palette (assets/theme.js) wins over the system one. */
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] {
  --bg: #0c0d0f;
  --fg: #eceeef;
  --muted: #959ca4;
  --line: rgba(236, 238, 239, 0.12);
  --tile: #15171a;
  --cell: #1f2226;
  --cell-open: #0f1113;
  --accent: #ff6a3d;
  --focus: #ff6a3d;
  --panel: color-mix(in srgb, var(--bg) 88%, #fff 12%);
  --panel-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 30px 80px -40px rgba(0, 0, 0, 0.8);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background-color 0.5s var(--ease), color 0.5s var(--ease);
}

a { color: inherit; text-decoration: none; }

:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 6px; }

.skip {
  position: absolute; left: var(--pad); top: -60px; z-index: 30;
  padding: 10px 16px; border-radius: 999px; background: var(--fg); color: var(--bg);
}
.skip:focus { top: 12px; }

/* Bar */
.bar {
  position: absolute; inset: 0 0 auto 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  height: 64px; padding: 0 var(--pad);
  padding-top: env(safe-area-inset-top);
  pointer-events: none;
}
.bar > * { pointer-events: auto; }
.mark { display: inline-flex; width: 28px; height: 28px; color: var(--fg); transition: transform 0.4s var(--ease); }
.mark svg { width: 100%; height: 100%; fill: currentColor; }
.mark .mark-accent { fill: var(--accent); transition: transform 0.5s var(--ease); transform-origin: 17.5px 6.5px; }
.mark:hover { transform: rotate(-8deg); }
.mark:hover .mark-accent { transform: scale(0.72); }
.bar-nav { display: flex; align-items: center; gap: 6px; }
.lang, .gh-icon {
  display: inline-flex; align-items: center; justify-content: center;
  height: 36px; min-width: 36px; padding: 0 12px; border-radius: 999px;
  border: 1px solid var(--line); background: color-mix(in srgb, var(--bg) 72%, transparent);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  color: var(--fg); font: 600 13px/1 "Geist", ui-sans-serif, system-ui, sans-serif; letter-spacing: 0.02em;
  cursor: pointer; transition: border-color 0.25s var(--ease), transform 0.25s var(--ease);
}
.gh-icon { padding: 0; width: 36px; }
.gh-icon svg { width: 16px; height: 16px; fill: currentColor; }
.lang:hover, .gh-icon:hover { border-color: color-mix(in srgb, var(--fg) 40%, transparent); }
.lang:active, .gh-icon:active { transform: scale(0.96); }

/* The palette */
.cmdk {
  position: relative; width: 100%; max-width: 1180px; border-radius: 20px; overflow: hidden;
  background: var(--panel); border: 1px solid var(--line); box-shadow: var(--panel-shadow);
  animation: cmdk-in 0.9s var(--ease) both;
}
@keyframes cmdk-in { from { opacity: 0; transform: translateY(14px) scale(0.985); } }
.cmdk-field { display: flex; align-items: center; gap: 12px; height: 60px; padding: 0 18px; border-bottom: 1px solid var(--line); cursor: text; }
.cmdk-field svg { width: 18px; height: 18px; fill: var(--muted); flex: none; }
.cmdk-field input {
  flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; color: var(--fg);
  font: 500 17px/1 "Geist", ui-sans-serif, system-ui, sans-serif; letter-spacing: -0.01em;
}
.cmdk-field input::placeholder { color: var(--muted); }
.cmdk kbd {
  display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 6px;
  border-radius: 6px; border: 1px solid var(--line); background: color-mix(in srgb, var(--fg) 4%, transparent);
  font: 600 11.5px/1 "Geist", ui-sans-serif, system-ui, sans-serif; color: var(--muted);
}
.cmdk-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); height: 420px; }
.cmdk-list { position: relative; list-style: none; margin: 0; padding: 8px; height: 100%; overflow: auto; }
.cmdk-group { padding: 12px 10px 6px; font-size: 12px; font-weight: 600; color: var(--muted); letter-spacing: 0.01em; }
.cmdk-item {
  position: relative; z-index: 1; display: flex; align-items: center; gap: 12px; height: 44px; padding: 0 10px;
  border-radius: 10px; cursor: pointer; font-size: 15px; font-weight: 520; color: var(--fg);
}
.cmdk-item.enter { animation: item-in 0.42s var(--ease) both; animation-delay: calc(var(--i, 0) * 22ms); }
@keyframes item-in { from { opacity: 0; transform: translateY(4px); } }
.cmdk-item svg { width: 18px; height: 18px; fill: currentColor; color: var(--muted); flex: none; transition: color 0.2s var(--ease); }
.cmdk-item[aria-selected="true"] svg { color: var(--fg); }
.cmdk-item .hint { margin-left: auto; font-size: 13px; color: var(--muted); font-weight: 450; }
.cmdk-item mark { background: none; color: var(--accent); font-weight: 650; }
.cmdk-hl {
  position: absolute; left: 8px; right: 8px; top: 0; height: 44px; border-radius: 10px; z-index: 0;
  background: color-mix(in srgb, var(--fg) 7%, transparent);
  transition: transform 0.34s cubic-bezier(0.2, 0.9, 0.25, 1), opacity 0.2s var(--ease);
}
.cmdk-empty { padding: 28px 18px; color: var(--muted); font-size: 15px; }

/* The palette's preview: a project picture, a line of text or the board */
.cmdk-preview {
  position: relative; border-left: 1px solid var(--line); overflow: hidden; background: color-mix(in srgb, var(--fg) 2.5%, transparent);
  /* A size container: the board measures itself against the pane's height as well as its width. */
  container-type: size;
}
.pv {
  position: absolute; inset: 14px; margin: 0; border-radius: 14px; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transform: scale(0.965); transition: opacity 0.38s var(--ease), transform 0.6s var(--ease);
  pointer-events: none;
}
.pv.on { opacity: 1; transform: none; pointer-events: auto; }
.pv img { width: 100%; height: 100%; object-fit: cover; }
.pv-text { background: color-mix(in srgb, var(--fg) 4%, transparent); }
.pv-big { font-size: clamp(18px, 1.6vw, 24px); font-weight: 560; letter-spacing: -0.02em; color: var(--muted); text-align: center; padding: 0 20px; }
.pv-big b { color: var(--fg); font-weight: 650; }
.pv-mines { flex-direction: column; gap: 10px; background: color-mix(in srgb, var(--fg) 3%, transparent); }
/* The board is square, so it fits when its side fits both ways: the pane less the inset (2 × 14px), the gap and the
   line under it. Older WebViews without container units get the width rule and a pane tall enough for it. */
.pv-mines .mines { width: min(78%, 260px); }
@supports (width: 1cqh) {
  .pv-mines .mines { width: min(calc(100cqw - 64px), 260px, calc(100cqh - 74px)); }
}

.cmdk-foot { display: flex; align-items: center; gap: 18px; height: 44px; padding: 0 18px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--muted); }
.cmdk-foot kbd { margin-right: 4px; }
.cmdk-toast { margin-left: auto; color: var(--fg); font-weight: 600; opacity: 0; transform: translateY(4px); transition: opacity 0.3s var(--ease), transform 0.3s var(--ease); }
.cmdk-toast.on { opacity: 1; transform: none; }

/* Minesweeper board */
.mines {
  --n: 6;
  display: grid; grid-template-columns: repeat(var(--n), 1fr);
  gap: 4px; width: min(78%, 260px);
  touch-action: manipulation;
  user-select: none; -webkit-user-select: none;
}
.mines button {
  aspect-ratio: 1; border: 0; padding: 0; margin: 0;
  border-radius: var(--r-cell);
  background: var(--cell);
  color: var(--fg); font: 650 15px/1 "Geist", ui-sans-serif, system-ui, sans-serif;
  cursor: pointer;
  transition: background-color 0.25s var(--ease), transform 0.2s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.mines button:hover:not([data-open]) { background: color-mix(in srgb, var(--cell) 70%, var(--fg) 12%); }
.mines button:active:not([data-open]) { transform: scale(0.92); }
.mines button[data-open] { background: var(--cell-open); cursor: default; animation: pop 0.35s var(--ease) both; animation-delay: var(--d, 0ms); }
.mines button[data-n="1"] { color: var(--fg); }
.mines button[data-n="2"] { color: color-mix(in srgb, var(--fg) 78%, var(--accent)); }
.mines button[data-n="3"], .mines button[data-n="4"], .mines button[data-n="5"] { color: var(--accent); }
.mines button[data-mine]::after,
.mines button[data-flag]::after {
  content: ""; display: block; margin: auto; width: 38%; height: 38%; border-radius: 50%; background: var(--accent);
}
.mines button[data-flag]::after { border-radius: 2px; transform: rotate(45deg); width: 30%; height: 30%; }
.mines-state { min-height: 1.4em; color: var(--fg); font-size: 14px; font-weight: 600; }
.mines-state button {
  margin-left: 6px; padding: 4px 12px; border-radius: 999px; border: 1px solid var(--line);
  background: transparent; color: var(--fg); font: 600 13px/1.2 "Geist", ui-sans-serif, system-ui, sans-serif; cursor: pointer;
}
@keyframes pop { from { transform: scale(0.6); opacity: 0.4; } to { transform: none; opacity: 1; } }

/* Projects: a short list */
.work { max-width: 1440px; margin: 0 auto; padding: clamp(40px, 8vh, 96px) var(--pad) clamp(56px, 10vh, 112px); }
.work-h { margin: 0 0 18px; font-size: 15px; font-weight: 600; color: var(--muted); letter-spacing: 0; }
.plist { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; max-width: 980px; }
.prow {
  display: grid; grid-template-columns: 56px minmax(120px, 0.6fr) minmax(0, 1.4fr) 20px; align-items: center; gap: 18px;
  padding: 10px 12px; margin: 0 -12px; border-radius: 14px;
  transition: background-color 0.3s var(--ease);
}
.prow:hover { background: color-mix(in srgb, var(--tile) 80%, transparent); }
.prow > img, .pthumb-grid { width: 56px; height: 56px; border-radius: 12px; object-fit: cover; transition: transform 0.5s var(--ease); }
.prow:hover > img, .prow:hover .pthumb-grid { transform: scale(1.06) rotate(-2deg); }
.pthumb-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; padding: 9px; background: var(--tile); }
.pthumb-grid i { display: block; border-radius: 3px; background: var(--cell); }
.pthumb-grid i:nth-child(5) { background: var(--accent); }
.pname { font-size: 19px; font-weight: 620; letter-spacing: -0.02em; }
.pline { color: var(--muted); font-size: 15px; line-height: 1.4; }
.arrow { width: 16px; height: 16px; fill: currentColor; color: var(--muted); transition: transform 0.4s var(--ease), color 0.3s var(--ease); }
.prow:hover .arrow { transform: translate(3px, -3px); color: var(--fg); }

/* Footer */
.foot {
  max-width: 1440px; margin: 0 auto;
  display: flex; flex-wrap: wrap; gap: 12px 28px; align-items: center; justify-content: space-between;
  padding: 28px var(--pad) calc(36px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  color: var(--muted); font-size: 14px;
}
.foot-gh { color: var(--fg); background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size 0.4s var(--ease); }
.foot-gh:hover { background-size: 100% 1px; }

/* The sequence. Scrolling (or ⌘K, /) folds the word into the palette: the dots run onto the palette's outline and
   rows, then the real palette fades in over them. Esc, or scrolling back, undoes it. */
.seq { position: relative; height: 245vh; }
/* The small viewport (Safari's toolbars shown): the stage never sits under them and does not resize while they
   slide away, which would rebuild the dots mid-scroll. */
.seq-stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.seq-dots {
  position: absolute; inset: 0; display: block; width: 100%; height: 100%; cursor: pointer; touch-action: pan-y; outline: none;
  -webkit-tap-highlight-color: transparent;
}
.seq-dots:focus-visible { box-shadow: inset 0 0 0 2px var(--focus); }
.seq-intro { position: absolute; left: max(var(--pad), env(safe-area-inset-left)); bottom: calc(8vh + env(safe-area-inset-bottom)); pointer-events: none; }
.seq-name { margin: 0; font-size: clamp(20px, 1.8vw, 26px); font-weight: 640; letter-spacing: -0.025em; }
.seq-role { margin: 4px 0 0; font-size: clamp(16px, 1.3vw, 18px); font-weight: 540; }
.seq-lede { color: var(--muted); font-weight: 450; }
.who-sep { color: var(--muted); font-weight: 400; margin: 0 8px; }
.seq-go {
  position: absolute; right: max(var(--pad), env(safe-area-inset-right)); bottom: calc(8vh + env(safe-area-inset-bottom)); display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 14px; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--muted);
  font: 500 13.5px/1 "Geist", ui-sans-serif, system-ui, sans-serif; cursor: pointer;
  transition: color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.seq-go:hover { color: var(--fg); border-color: color-mix(in srgb, var(--fg) 25%, transparent); }
.seq-go svg { width: 14px; height: 14px; fill: currentColor; animation: seq-nudge 2.4s var(--ease) infinite; }
@keyframes seq-nudge { 0%, 60%, 100% { transform: none; } 30% { transform: translateY(3px); } }
.seq-go-touch { display: none; }
@media (hover: none) { .seq-go-desk { display: none; } .seq-go-touch { display: inline; } }
.seq-cmdk {
  position: absolute; left: 50%; top: 50%;
  width: min(880px, calc(100% - 2 * var(--pad)));
  width: min(880px, calc(100% - 2 * max(var(--pad), env(safe-area-inset-left), env(safe-area-inset-right))));
  /* --s is the fold's last bit of scale, set from the scroll (site.js). */
  transform: translate(-50%, -50%) scale(var(--s, 1)); opacity: 0; visibility: hidden; animation: none;
}
.seq-cmdk.shown { visibility: visible; }

/* 404 */
.nf { min-height: 100dvh; display: grid; place-content: center; padding: 0 var(--pad); text-align: center; }
.nf-code { margin: 0; font-size: clamp(96px, 20vw, 220px); font-weight: 640; letter-spacing: -0.065em; line-height: 0.9; }
.nf p { margin: 20px 0 0; font-size: 17px; }

/* Phone */
@media (max-width: 820px) {
  .seq { height: 230vh; }
  .seq-intro { bottom: calc(14vh + env(safe-area-inset-bottom)); right: max(var(--pad), env(safe-area-inset-right)); }
  .seq-go { left: max(var(--pad), env(safe-area-inset-left)); right: auto; bottom: calc(6vh + env(safe-area-inset-bottom)); }
  .cmdk kbd, .cmdk-foot { display: none; }
  /* On a phone the palette follows its content. It hangs from the top of the screen (centred, it would jump with
     every letter typed), the list is as tall as its rows, the board pane sits under it while a game is on, and the
     whole palette fits the small viewport, scrolling the list if it must. */
  .seq-cmdk {
    top: calc(16px + env(safe-area-inset-top)); transform: translateX(-50%) scale(var(--s, 1));
    display: flex; flex-direction: column;
    max-height: calc(100vh - 32px);
    max-height: calc(100svh - 32px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  }
  .cmdk-field { flex: none; }
  .cmdk-body { display: flex; flex-direction: column; flex: 0 1 auto; min-height: 0; height: auto; }
  .cmdk-list { flex: 0 1 auto; min-height: 0; height: auto; }
  .cmdk-preview { display: none; flex: none; border-left: 0; border-top: 1px solid var(--line); height: 330px; height: min(330px, 46svh); }
  .cmdk.playing .cmdk-preview { display: block; }
  .prow { grid-template-columns: 52px minmax(0, 1fr) 18px; grid-template-rows: auto auto; gap: 2px 14px; }
  .prow > img, .pthumb-grid { grid-row: 1 / 3; width: 52px; height: 52px; }
  .pname { grid-column: 2; font-size: 17px; }
  .pline { grid-column: 2; grid-row: 2; font-size: 14px; }
  .prow .arrow { grid-column: 3; grid-row: 1 / 3; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .seq { height: auto; }
  .seq-stage { position: relative; height: auto; overflow: visible; padding: 88px 0 40px; }
  .seq-dots { position: relative; inset: auto; height: 46vh; }
  .seq-intro { position: static; margin: 12px var(--pad) 0; }
  .seq-go { display: none; }
  .seq-cmdk { position: relative; left: auto; top: auto; transform: none; opacity: 1; visibility: visible; margin: 32px auto 0; }
}