/* ============================================================
   Damian Rebman — portfolio
   ============================================================ */

:root {
  --ink-light: #1a1712;          /* text on light sections */
  --ink-dark: #f2f0f7;           /* text on dark sections */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: "Inter", system-ui, sans-serif;
  background-color: #efeadf; /* JS cross-fades this per section */
  transition: background-color 0.6s ease;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* No global grain overlay: a full-page translucent layer above
   animating content forces continuous full-viewport recompositing,
   which starves software renderers into blank/stale frames. */

.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 clamp(20px, 5vw, 48px);
}

/* ============ header ============ */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 18px clamp(20px, 4vw, 40px);
  color: #fff;
  transition: color 0.5s ease;
}
.site-header.on-light { color: var(--ink-light); }
/* Outline rather than filled, so it reads as one quiet affordance against
   every section colour instead of a button that has to be re-tinted. */
.site-contact {
  color: inherit;
  text-decoration: none;
  font-family: "IBM Plex Mono", monospace;
  font-size: 12.5px;
  letter-spacing: 0.06em;
  padding: 7px 16px;
  border: 1px solid currentColor;
  border-radius: 999px;
  opacity: 0.6;
  transition: opacity 0.2s;
}
.site-contact:hover { opacity: 1; }

/* ============ text selection, tinted per section ============ */
::selection { background: #2a2a24; color: #efeadf; }
.safeyum ::selection { background: #f65fec; color: #391d5b; }
.sapho ::selection { background: #5b4bd4; color: #ece9f7; }
.yorick ::selection { background: #a89be8; color: #0a090f; }
.notable ::selection { background: #7a3bd6; color: #fdf8ec; }
.gotaction ::selection { background: #6d74ff; color: #18181a; }

/* ============ reveal animation ============ */
/* Content is only ever hidden when JS is running (html.js),
   so a script failure can never blank the page. */
.reveal {
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
}
.js .reveal:not(.in) {
  opacity: 0;
  transform: translateY(26px);
}

/* ============ hero ============ */
.hero {
  min-height: 100svh;
  display: flex;
  align-items: center;
  color: var(--ink-light);
}
.hero .container { max-width: 1280px; }
.hero-inner { padding-top: 10vh; }
.hero-kicker {
  font-family: "IBM Plex Mono", monospace;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.6;
  margin-bottom: 22px;
}
.hero-intro {
  font-size: clamp(18px, 2.1vw, 23px);
  line-height: 1.55;
  max-width: 660px;
  opacity: 0.8;
  margin-bottom: 30px;
}
.hero-title {
  font-family: "Archivo", sans-serif;
  font-weight: 900;
  font-size: clamp(48px, 8vw, 106px);
  line-height: 0.96;
  letter-spacing: -0.03em;
  margin-bottom: 34px;
}
.hero-sub {
  font-size: clamp(18px, 2.1vw, 23px);
  line-height: 1.55;
  max-width: 660px;
  opacity: 0.8;
  margin-bottom: 18px;
}
.hero-note { margin-bottom: 40px; }
.hero-intro a,
.hero-sub a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid rgba(26, 23, 18, 0.35);
  padding-bottom: 1px;
  transition: border-color 0.2s;
}
.hero-intro a:hover,
.hero-sub a:hover { border-color: currentColor; }
.hero-index {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 14px;
  align-items: center;
  font-family: "IBM Plex Mono", monospace;
  font-size: 14px;
}
.hero-index a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid rgba(26, 23, 18, 0.3);
  padding-bottom: 2px;
  transition: border-color 0.2s;
}
.hero-index a:hover { border-color: currentColor; }
.hero-index span { opacity: 0.35; }
.hero-scroll {
  display: block;
  margin-top: 9vh;
  font-size: 22px;
  color: inherit;
  text-decoration: none;
  opacity: 0.4;
  animation: bob 2.4s ease-in-out infinite;
  width: fit-content;
  transition: opacity 0.2s;
}
.hero-scroll:hover { opacity: 0.9; }
@keyframes bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(10px); }
}

/* ============ project sections (shared) ============ */
.project {
  min-height: 92svh;
  display: flex;
  align-items: center;
  padding: clamp(80px, 12vh, 140px) 0;
}
.project-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(40px, 6vw, 90px);
  align-items: center;
  width: 100%;
}

.project-mark {
  display: block;
  width: auto;
  margin-bottom: 22px;
}
.project-mark.rounded { border-radius: 10px; }

.project-label {
  font-family: "IBM Plex Mono", monospace;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.55;
  margin-top: 30px;
}
.project-title {
  font-family: "Archivo", sans-serif;
  font-weight: 900;
  font-size: clamp(44px, 6vw, 76px);
  letter-spacing: -0.02em;
  line-height: 1;
  margin-bottom: 20px;
}
.project-body {
  font-size: clamp(16.5px, 1.8vw, 18px);
  line-height: 1.65;
  opacity: 0.85;
  max-width: 520px;
}
.project-cta {
  display: inline-block;
  margin-top: 28px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 13.5px;
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
  opacity: 0.9;
  transition: opacity 0.2s;
}
.project-cta:hover { opacity: 1; }
.safeyum .project-cta { color: #f65fec; }
.yorick .project-cta { color: #a89be8; }
.sapho .project-cta { color: #5b4bd4; }

/* section themes */
[data-theme="dark"] { color: var(--ink-dark); }
[data-theme="light"] { color: var(--ink-light); }

/* Tall screens show two sections at once, but the body has one background.
   A section whose theme disagrees with the current bg flips its text to the
   legible ink, riding the same 0.6s the bg crossfade takes. */
[data-bg] { transition: color 0.6s ease; }
body.bg-light [data-theme="dark"] { color: var(--ink-light); }
body.bg-dark [data-theme="light"] { color: var(--ink-dark); }

/* ============ SafeYum ============ */
/* The app scene from the SafeYum marketing site, ported from its Vue
   component. Every colour, radius and string in here comes from the app
   repo via that component, so it is the app rather than an impression of
   it. Scoped under .sy-scene; its generic class names are the component's
   own. The phone is laid out at a true 410px and scaled by --s, which
   main.js sets from the column width. */
.sy-off { display: none !important; }

/* Values from src/lib/theme.js. */

  .sy-scene {
    --ink: rgb(57, 29, 91);
    --ink-100: rgb(109, 83, 141);
    --ink-200: rgb(157, 139, 174);
    --ink-400: rgba(109, 83, 141, 0.35);
    --paper: rgba(255, 255, 255, 0.8);
    --paper-100: rgba(255, 255, 255, 0.25);
    --cta: rgb(246, 95, 236);
    --cta-200: rgba(246, 95, 236, 0.2);
    --success: rgb(124, 154, 88);
    --caution: rgb(201, 144, 21);
    --shadow-card: 0 10px 24px rgba(57, 29, 91, 0.16);
    --shadow-cta: 0 10px 16px rgba(246, 95, 236, 0.55);

    /* Fills whatever box the page gives it. The page decides how wide the
       scene should be; the scene only decides how tall it has to be to keep
       the phone's proportions. */
    --s: 0.78;
    position: relative;
    width: 100%;
    height: calc(812px * var(--s));
    font-family: "Lexend", system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
  }

/* Out of flow, so the unscaled 410px box can never widen the column or
     push a page into horizontal scroll. */

  .sy-scene .phone {
    position: absolute;
    top: 0;
    left: 0;
    width: 410px;
    height: 812px;
    padding: 10px;
    border-radius: 56px;
    background: linear-gradient(160deg, #4c2a72 0%, #2a1442 55%, #3d2160 100%);
    box-shadow:
      0 2px 0 rgba(255, 255, 255, 0.18) inset,
      0 30px 70px rgba(20, 8, 38, 0.55),
      0 6px 18px rgba(20, 8, 38, 0.4);
    transform: scale(var(--s));
    transform-origin: top left;
  }
  .sy-scene .screen {
    position: relative;
    height: 100%;
    border-radius: 46px;
    /* clip, not hidden, so nothing can ever scroll the sheet into view and
       break the frame. hidden first as the fallback. */
    overflow: hidden;
    overflow: clip;
    display: flex;
    flex-direction: column;
    color: var(--ink);
  }

/* Background.js, verbatim, as a data URI so both surfaces can share one
     copy without duplicating the gradient defs or colliding on their ids. */

  .sy-scene .backdrop {
    position: absolute;
    inset: 0;
    background:
      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 440 956'><rect width='440' height='956' fill='%23D9DCEC'/><circle cx='379' cy='160' r='231' fill='url(%23a)'/><circle cx='73' cy='697' r='306' fill='url(%23b)'/><circle cx='395' cy='473' r='287' fill='url(%23c)'/><circle cx='73' cy='-33' r='231' fill='url(%23d)'/><defs><radialGradient id='a' cx='0' cy='0' r='1' gradientUnits='userSpaceOnUse' gradientTransform='translate(379 160) rotate(90) scale(231)'><stop offset='.206731' stop-color='%239AA5E1' stop-opacity='.5'/><stop offset='1' stop-color='%239AA5E1' stop-opacity='0'/></radialGradient><radialGradient id='b' cx='0' cy='0' r='1' gradientUnits='userSpaceOnUse' gradientTransform='translate(73 697) rotate(90) scale(306)'><stop offset='.206731' stop-color='%239AA5E1' stop-opacity='.75'/><stop offset='1' stop-color='%239AA5E1' stop-opacity='0'/></radialGradient><radialGradient id='c' cx='0' cy='0' r='1' gradientUnits='userSpaceOnUse' gradientTransform='translate(395 473) rotate(90) scale(287)'><stop offset='.206731' stop-color='%23EBBBF0' stop-opacity='.4'/><stop offset='1' stop-color='%239AA5E1' stop-opacity='0'/></radialGradient><radialGradient id='d' cx='0' cy='0' r='1' gradientUnits='userSpaceOnUse' gradientTransform='translate(73 -33) rotate(90) scale(231)'><stop offset='.206731' stop-color='%23EBBBF0' stop-opacity='.4'/><stop offset='1' stop-color='%239AA5E1' stop-opacity='0'/></radialGradient></defs></svg>")
      center / cover no-repeat;
  }

/* Two stacked screens. Capture is presented as a full-screen modal in the
     app, so it slides over Home rather than replacing it. */

  .sy-scene .surface {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
  }
  .sy-scene .capture {
    z-index: 10;
    transition: transform 0.42s cubic-bezier(0.32, 0.72, 0, 1);
  }
  .sy-scene .capture.closed {
    transform: translateY(100%);
  }

/* Sits above both surfaces and below the system chrome. */

  .sy-scene .veil {
    z-index: 20;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.34s ease;
  }
  .sy-scene .veil.on {
    opacity: 1;
  }

/* A tap you can actually see. The scale-down alone was too quiet to read as
     a press at the size these scenes are shown. */

  .sy-scene .pressable {
    position: relative;
  }
  .sy-scene .pressable.pressed::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 54px;
    height: 54px;
    margin: -27px 0 0 -27px;
    border-radius: 999px;
    background: rgba(57, 29, 91, 0.13);
    box-shadow: inset 0 0 0 2px rgba(57, 29, 91, 0.34);
    pointer-events: none;
    animation: sy-tap 0.55s ease-out both;
  }

/* On the magenta controls a dark ring disappears, so it flips to light. */

  .sy-scene .confirm.pressed::after, .sy-scene .today-log.pressed::after, .sy-scene .count-it.pressed::after {
    background: rgba(255, 255, 255, 0.3);
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.75);
  }

/* ---------- chrome ---------- */

  .sy-scene .statusbar {
    position: relative;
    flex: none;
    height: 54px;
    padding: 14px 34px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .sy-scene .clock {
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.2px;
  }
  .sy-scene .status-icons {
    display: flex;
    align-items: center;
    gap: 6px;
    fill: var(--ink);
  }
  .sy-scene .bars {
    width: 18px;
    height: 12px;
  }
  .sy-scene .battery {
    width: 24px;
    height: 12px;
  }
  .sy-scene .battery .shell {
    fill: none;
    stroke: var(--ink);
    stroke-width: 1.2;
    opacity: 0.45;
  }
  .sy-scene .header {
    position: relative;
    flex: none;
    height: 56px;
    padding: 0 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .sy-scene .side, .sy-scene .close {
    width: 32px;
    height: 32px;
  }
  .sy-scene .close {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--paper-100);
    fill: var(--ink-100);
  }
  .sy-scene .member {
    display: flex;
    align-items: center;
    gap: 8px;
  }

/* avatarPalette[0] */

  .sy-scene .avatar {
    width: 24px;
    height: 24px;
    border-radius: 999px;
    background: #e7def4;
    color: #6d538d;
    font-size: 12px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .sy-scene .member-name {
    font-size: 15px;
    font-weight: 600;
  }
  .sy-scene .home-indicator {
    position: absolute;
    z-index: 30;
    left: 50%;
    bottom: 9px;
    transform: translateX(-50%);
    width: 140px;
    height: 5px;
    border-radius: 999px;
    background: rgba(57, 29, 91, 0.35);
  }

/* ---------- home (InsightsScreen) ---------- */

  .sy-scene .home-header {
    position: relative;
    flex: none;
    height: 64px;
    padding: 0 22px; /* layout.gutter */
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .sy-scene .home-avatar {
    width: 44px;
    height: 44px;
    border-radius: 22px;
    background: #e7def4;
    color: #6d538d;
    font-size: 18px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .sy-scene .home-gear {
    fill: var(--ink-100);
    display: flex;
  }
  .sy-scene .home-scroll {
    position: relative;
    flex: 1;
    min-height: 0;
    padding: 0 22px 30px;
    overflow: hidden;
  }
  .sy-scene .home-hero {
    margin: 24px 0 16px;
    font-size: 28px;
    font-weight: 900;
    letter-spacing: -0.7px;
    line-height: 33px;
  }
  .sy-scene .journal-section, .sy-scene .section {
    margin-bottom: 24px;
  }

/* The app scrolls, so its trailing section margin is never seen. Here it is
     just dead space at the bottom of a fixed screen, and dropping it is what
     lets the food lists sit fully in frame. */

  .sy-scene .home-scroll > .section:last-child {
    margin-bottom: 0;
  }
  .sy-scene .section-head {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 8px;
    fill: var(--ink-100);
  }
  .sy-scene .section-label {
    flex: 1;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--ink-200);
  }
  .sy-scene .calendar-pill {
    display: flex;
    align-items: center;
    gap: 4px;
    background: var(--paper-50);
    border-radius: 999px;
    padding: 5px 10px;
    font-size: 12px;
    font-weight: 600;
    color: var(--ink-100);
    fill: var(--ink-100);
  }

/* common/Card */

  .sy-scene .paper-card {
    background: var(--paper);
    border-radius: 22px;
    padding: 16px;
    box-shadow: var(--shadow-card);
  }
  .sy-scene .today-label-row {
    display: flex;
    align-items: center;
    gap: 4px;
    fill: var(--ink-100);
  }
  .sy-scene .today-label {
    flex: 1;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1px;
    color: var(--ink-200);
  }
  .sy-scene .today-date {
    font-size: 12px;
    font-weight: 500;
    color: var(--ink-200);
  }
  .sy-scene .today-body-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
  }
  .sy-scene .today-text {
    flex: 1;
    min-width: 0;
  }
  .sy-scene .today-summary {
    font-size: 16px;
    font-weight: 600;
  }
  .sy-scene .today-sub {
    margin-top: 2px;
    font-size: 14px;
    color: var(--ink-200);
  }
  .sy-scene .today-log {
    flex: none;
    display: flex;
    align-items: center;
    gap: 4px;
    background: var(--cta);
    border-radius: 999px;
    padding: 8px 16px;
    color: #fff;
    fill: #fff;
    font-size: 14px;
    font-weight: 600;
    transition:
      transform 0.12s ease,
      filter 0.12s ease;
  }
  .sy-scene .today-log.pressed {
    transform: scale(0.94);
    filter: brightness(0.9);
  }

/* Not .caret: that is the typing cursor further down. */

  .sy-scene .row-caret {
    fill: var(--ink-400);
    flex: none;
  }

/* NewFoodCard */

  .sy-scene .new-food {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 8px;
    animation: sy-rise 0.3s cubic-bezier(0.2, 0.7, 0.3, 1) both;
  }
  .sy-scene .nf-head {
    display: flex;
    align-items: flex-start;
    gap: 8px;
  }
  .sy-scene .nf-body {
    flex: 1;
    min-width: 0;
  }
  .sy-scene .nf-title {
    font-size: 16px;
    font-weight: 700;
  }
  .sy-scene .nf-desc {
    margin-top: 1px;
    font-size: 12px;
    color: var(--ink-200);
  }
  .sy-scene .nf-x {
    fill: var(--ink-400);
    flex: none;
  }
  .sy-scene .nf-actions {
    display: flex;
    gap: 6px;
  }
  .sy-scene .nf-btn {
    flex: 1;
    min-height: 34px;
    border-radius: 999px;
    padding: 8px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 600;
    transition:
      transform 0.12s ease,
      filter 0.12s ease;
  }
  .sy-scene .nf-btn.pressed {
    transform: scale(0.95);
    filter: brightness(0.94);
  }
  .sy-scene .nf-btn.safe {
    background: rgba(124, 154, 88, 0.16);
    color: #5e7a45;
  }
  .sy-scene .nf-btn.trigger {
    background: rgba(201, 144, 21, 0.16);
    color: #9a7416;
  }
  .sy-scene .nf-btn.trial {
    background: rgba(246, 95, 236, 0.12);
    color: #c13bb8;
  }

/* Food lists */

  .sy-scene .food-lists {
    display: flex;
    gap: 8px;
  }
  .sy-scene .food-list {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--paper);
    border-radius: 16px;
    padding: 10px 16px;
  }
  .sy-scene .shield {
    fill: var(--success);
  }
  .sy-scene .warn {
    fill: var(--caution);
  }
  .sy-scene .fl-label {
    flex: 1;
    font-size: 14px;
    font-weight: 600;
  }
  .sy-scene .fl-count {
    font-size: 16px;
    font-weight: 700;
  }

/* Scoped under .home so it beats the base .toast rule further down. */

  .sy-scene .home .toast {
    top: 118px; /* insets.top + 64, as the app passes it */
  }

/* ---------- body ---------- */

  .sy-scene .body {
    position: relative;
    flex: 1;
    min-height: 0;
    padding: 0 16px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
  }

/* CaptureScreen empty state */

  .sy-scene .empty {
    margin-bottom: auto;
    padding-top: 40px;
  }
  .sy-scene .hero-prompt {
    font-size: 28px;
    font-weight: 900;
    letter-spacing: -0.7px;
    line-height: 33px;
    max-width: 300px;
  }
  .sy-scene .try-label {
    margin-top: 30px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.6px;
    color: var(--ink-200);
  }
  .sy-scene .try-row {
    padding: 7px 0;
    font-size: 15px;
    color: var(--ink-100);
  }
  .sy-scene .thread {
    padding-bottom: 16px;
  }
  .sy-scene .bubble-wrap {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 16px;
  }
  .sy-scene .bubble-user {
    max-width: 82%;
    background: var(--cta);
    color: #fff;
    font-size: 15px;
    line-height: 21px;
    padding: 13px 16px;
    border-radius: 20px 20px 6px 20px;
    animation: sy-rise 0.28s ease both;
  }

/* EditableConfirmation, inside the confirmation bubble */

  .sy-scene .card {
    background: #fff;
    border-radius: 20px 20px 20px 6px;
    padding: 24px;
    box-shadow: var(--shadow-card);
    animation: sy-rise 0.34s cubic-bezier(0.2, 0.7, 0.3, 1) both;
  }
  .sy-scene .card.leaving {
    animation: sy-sink 0.3s ease both;
  }
  .sy-scene .edit-hint {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 8px;
    font-size: 12px;
    color: var(--ink-200);
    fill: var(--ink-200);
  }
  .sy-scene .for-member {
    font-size: 14px;
    font-weight: 600;
    color: var(--ink-100);
    margin-bottom: 8px;
  }
  .sy-scene .meal-block {
    margin-bottom: 8px;
  }
  .sy-scene .meal-header {
    display: flex;
    align-items: center;
    margin-bottom: 4px;
    fill: var(--ink-100);
  }
  .sy-scene .meal-label {
    margin-left: 4px;
    font-size: 14px;
    font-weight: 700;
  }
  .sy-scene .bullet-row {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 4px 0;
    font-size: 15px;
    font-weight: 500;
  }
  .sy-scene .dot {
    width: 6px;
    height: 6px;
    border-radius: 3px;
    background: var(--cta);
    flex: none;
  }
  .sy-scene .obs-section {
    margin-top: 4px;
    padding-top: 4px;
    border-top: 1px solid var(--ink-400);
  }

/* ---------- trial associations ---------- */

  .sy-scene .trial-section {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid #eeeeee;
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

/* The reassurance the whole card exists to deliver, so it reads loud. */

  .sy-scene .trial-counts-card {
    background: var(--cta-200);
    border-radius: 8px;
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    animation: sy-rise 0.26s cubic-bezier(0.2, 0.7, 0.3, 1) both;
  }
  .sy-scene .trial-counts-header {
    display: flex;
    align-items: center;
    gap: 6px;
  }
  .sy-scene .trial-counts-check {
    width: 18px;
    height: 18px;
    border-radius: 9px;
    background: var(--cta);
    fill: #fff;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .sy-scene .trial-counts-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--cta);
  }
  .sy-scene .trial-counts-meta {
    margin-left: 24px;
    font-size: 12px;
    font-weight: 600;
    color: var(--ink-100);
  }
  .sy-scene .trial-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    fill: var(--ink-100);
  }

/* Yoga measures a Text against the width actually available, so in the app
     this line keeps the flask, the question and the button together and wraps
     the words. CSS instead sizes the span to its max content and, under
     flex-wrap, bumps it to a line of its own before it ever shrinks. A zero
     flex-basis is what gets the app's behaviour back. */

  .sy-scene .trial-text {
    flex: 1 1 0;
    min-width: 0;
    font-size: 14px;
    font-weight: 500;
    color: var(--ink-100);
  }
  .sy-scene .count-it {
    flex: none;
    padding: 4px 8px;
    border-radius: 999px;
    background: var(--cta);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    transition:
      transform 0.12s ease,
      filter 0.12s ease;
  }
  .sy-scene .count-it.pressed {
    transform: scale(0.94);
    filter: brightness(0.9);
  }
  .sy-scene .actions {
    display: flex;
    align-items: stretch;
    gap: 8px;
    margin-top: 16px;
  }
  .sy-scene .confirm {
    flex: 1;
    height: 46px;
    border-radius: 16px;
    background: var(--cta);
    box-shadow: var(--shadow-cta);
    color: #fff;
    fill: #fff;
    font-size: 14px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    transition:
      transform 0.12s ease,
      box-shadow 0.12s ease;
  }
  .sy-scene .confirm.pressed {
    transform: scale(0.98);
    box-shadow: 0 4px 10px rgba(246, 95, 236, 0.4);
  }
  .sy-scene .edit-toggle {
    width: 46px;
    height: 46px;
    border-radius: 16px;
    background: var(--paper-100);
    display: flex;
    align-items: center;
    justify-content: center;
    fill: var(--ink-100);
  }

/* SaveToast */

  .sy-scene .toast {
    position: absolute;
    top: 104px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    border-radius: 16px;
    padding: 10px 16px;
    box-shadow: var(--shadow-card);
    font-size: 14px;
    font-weight: 600;
    /* Held back until the card has finished leaving. Landing together let you
       read "Saving…" and "Logged" in the same frame. */
    animation: sy-toast-in 0.34s cubic-bezier(0.2, 1.2, 0.4, 1) 0.26s both;
  }
  .sy-scene .ok {
    fill: var(--success);
  }

/* ---------- input ---------- */

  .sy-scene .input-area {
    position: relative;
    flex: none;
    /* The bottom inset the app pads for, which is also where the home
       indicator sits. */
    padding: 8px 16px 30px;
  }
  .sy-scene .input-row {
    display: flex;
    align-items: flex-end;
    gap: 8px;
  }
  .sy-scene .input-pill {
    flex: 1;
    min-height: 46px;
    background: var(--paper);
    border-radius: 999px;
    padding: 12px 16px;
    font-size: 16px;
    line-height: 22px;
  }
  .sy-scene .placeholder {
    color: var(--ink-200);
  }
  .sy-scene .caret {
    display: inline-block;
    width: 2px;
    height: 17px;
    margin-left: 1px;
    vertical-align: text-bottom;
    background: var(--cta);
    animation: blink 1.1s steps(1) infinite;
  }
  .sy-scene .send {
    flex: none;
    width: 46px;
    height: 46px;
    border-radius: 999px;
    background: var(--paper-100);
    fill: var(--ink-200);
    display: flex;
    align-items: center;
    justify-content: center;
    transition:
      background 0.18s ease,
      box-shadow 0.18s ease;
  }
  .sy-scene .send.active {
    background: var(--cta);
    fill: #fff;
    box-shadow: var(--shadow-cta);
  }
  .sy-scene .thinking {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 46px;
    padding-left: 4px;
    font-size: 16px;
    color: var(--ink-100);
  }
  .sy-scene .spinner {
    width: 18px;
    height: 18px;
    border-radius: 999px;
    border: 2px solid rgba(246, 95, 236, 0.25);
    border-top-color: var(--cta);
    animation: spin 0.7s linear infinite;
  }

/* ---------- system alert ---------- */

  .sy-scene .alert-layer {
    position: absolute;
    inset: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.2);
    animation: sy-fade 0.22s ease both;
  }
  .sy-scene .alert {
    width: 270px;
    border-radius: 14px;
    overflow: hidden;
    background: rgba(250, 250, 250, 0.94);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    color: #000;
    text-align: center;
    animation: sy-alert-in 0.24s cubic-bezier(0.2, 0.9, 0.3, 1) both;
  }
  .sy-scene .alert-copy {
    padding: 19px 16px 15px;
  }
  .sy-scene .alert-title {
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -0.2px;
  }
  .sy-scene .alert-message {
    margin-top: 3px;
    font-size: 13px;
    line-height: 18px;
  }
  .sy-scene .alert-button {
    border-top: 0.5px solid rgba(60, 60, 67, 0.29);
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    color: #007aff;
    transition: background 0.12s ease;
  }
  .sy-scene .alert-button.cancel {
    font-weight: 600;
  }
  .sy-scene .alert-button.pressed {
    background: rgba(0, 0, 0, 0.08);
  }

/* ---------- icons ---------- */

  .sy-scene .i12 {
    width: 12px;
    height: 12px;
  }
  .sy-scene .i13 {
    width: 13px;
    height: 13px;
    flex: none;
  }
  .sy-scene .i14 {
    width: 14px;
    height: 14px;
  }
  .sy-scene .i15 {
    width: 15px;
    height: 15px;
    flex: none;
  }
  .sy-scene .i16 {
    width: 16px;
    height: 16px;
  }
  .sy-scene .i17 {
    width: 17px;
    height: 17px;
    flex: none;
  }
  .sy-scene .i22 {
    width: 22px;
    height: 22px;
  }
  .sy-scene .i18 {
    width: 18px;
    height: 18px;
  }
  .sy-scene .i20 {
    width: 20px;
    height: 20px;
  }

  /* ---------- motion ---------- */
  @keyframes sy-rise {
    from {
      opacity: 0;
      transform: translateY(10px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  @keyframes sy-sink {
    from {
      opacity: 1;
      transform: translateY(0);
    }
    to {
      opacity: 0;
      transform: translateY(8px);
    }
  }
  @keyframes sy-toast-in {
    from {
      opacity: 0;
      transform: translate(-50%, -12px);
    }
    to {
      opacity: 1;
      transform: translate(-50%, 0);
    }
  }
  @keyframes sy-alert-in {
    from {
      opacity: 0;
      transform: scale(1.14);
    }
    to {
      opacity: 1;
      transform: scale(1);
    }
  }
  @keyframes sy-fade {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
  @keyframes sy-tap {
    from {
      transform: scale(0.3);
      opacity: 0.9;
    }
    to {
      transform: scale(1.75);
      opacity: 0;
    }
  }
  @keyframes blink {
    50% {
      opacity: 0;
    }
  }
  @keyframes spin {
    to {
      transform: rotate(360deg);
    }
  }
  .sy-scene.still .card, .sy-scene.still .bubble-user, .sy-scene.still .toast, .sy-scene.still .trial-counts-card, .sy-scene.still .new-food, .sy-scene.still .alert, .sy-scene.still .alert-layer, .sy-scene.still .spinner, .sy-scene.still .caret {
    animation: none;
  }
  .sy-scene.still .capture, .sy-scene.still .veil {
    transition: none;
  }
  .sy-scene.still .pressable.pressed::after {
    animation: none;
    display: none;
  }

  /* No breakpoints for the fit: --s is measured from the container, so the
     phone tracks a window drag continuously instead of stepping. */

/* ============ Yorick ============ */
.yorick { font-family: "IBM Plex Mono", monospace; }
.yorick .project-title { font-family: "IBM Plex Mono", monospace; font-weight: 500; letter-spacing: 0; }
.yorick .project-body { font-family: "Inter", sans-serif; }

/* Drawn dictation scene. Pill glass values are the app's own (copied from
   the marketing site, which copies prototypes/pills verbatim) — anything
   that drifts from those is a bug, not a choice. */
.yk-scene {
  --bone-rgb: 236, 229, 216;
  --glow-rgb: 216, 195, 156;
  position: relative;
  max-width: 400px;
  margin-inline: auto;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.yk-app {
  background: #1c1c20;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
}
.yk-apphead {
  height: 34px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 13px;
  font-size: 11px;
  font-weight: 600;
  color: #85858f;
  background: #17171b;
  border-bottom: 1px solid #26262c;
}
.yk-tl { display: flex; gap: 5px; }
.yk-tl i { width: 8px; height: 8px; border-radius: 50%; }
.yk-tl i:nth-child(1) { background: #ff5f57; }
.yk-tl i:nth-child(2) { background: #febc2e; }
.yk-tl i:nth-child(3) { background: #28c840; }
.yk-body { padding: 44px 18px 24px; }
.yk-field {
  font-size: 13.5px;
  line-height: 1.6;
  color: rgba(242, 240, 247, 0.92);
  min-height: 86px;
}
.yk-caret {
  display: inline-block;
  width: 2px;
  height: 15px;
  background: #a89be8;
  vertical-align: text-bottom;
  animation: blink 1.1s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }
.yk-ph { color: #6f6f7a; }
.yk-typed { display: none; }
.yk-field.filled .yk-typed { display: inline; animation: fadein 0.18s ease both; }
.yk-field.filled .yk-ph, .yk-field.filled .empty { display: none; }
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }
.yk-stack { position: absolute; display: flex; pointer-events: none; z-index: 4; }
.yk-pill {
  position: relative;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 5px 11px;
  color: #fff;
  /* the 4px corner IS the pointer: it sits on the caret */
  border-radius: 12px 14.5px 14.5px 4px;
  background: rgba(0, 0, 0, 0.85);
  -webkit-backdrop-filter: blur(31px) saturate(1.6);
  backdrop-filter: blur(31px) saturate(1.6);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.21),
              0 0.5px 2.5px rgba(0, 0, 0, 0.16),
              0 0 var(--halo-b, 10px) rgba(var(--glow-rgb), var(--halo-o, 0.16));
  transition: opacity 0.2s ease-out, transform 0.3s ease-out;
}
.yk-pill::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  pointer-events: none;
  background: linear-gradient(to bottom,
    rgba(var(--bone-rgb), 0.26), rgba(var(--bone-rgb), 0.08));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}
.yk-pill.out { opacity: 0; transform: translateY(-6px); }
.yk-logo { width: 16px; height: 19px; opacity: 0.75; display: flex; align-items: center; flex: none; }
.yk-logo svg { width: 16px; height: 16px; display: block; }
.yk-eq { display: flex; gap: 2px; }
.yk-eq .col { display: flex; flex-direction: column; gap: 2px; }
.yk-eq .d {
  width: 2.5px;
  height: 2.5px;
  border-radius: 50%;
  background: rgb(var(--glow-rgb));
  opacity: 0.18;
  transition: opacity 80ms ease-out;
}
.yk-tzone { display: none; align-items: center; }
.yk-pill.transcribing .yk-eq { display: none; }
.yk-pill.transcribing .yk-tzone { display: flex; }
.yk-spinner {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  flex: none;
  border: 1.6px solid rgba(255, 255, 255, 0.25);
  border-top-color: #fff;
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ============ Got Action ============ */
/* Two drawn phones, lifted from the Got Action marketing site, which lifts
   its palette and components from the app itself. Everything is scoped under
   .ga-scene so these generic class names cannot leak into the page. The
   scene is laid out at its natural 456px and scaled to fit by main.js. */
/* flex-start so the scaled scene keeps its natural height instead of being
   stretched by the row; overflow guards the scaled edges. */
.ga-fit {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  overflow: hidden;
}
.ga-scene {
  width: 456px;
  flex: none;
  --bg: #030303;
  --bg-100: #121212;
  --bg-200: #222222;
  --ink: #f9f9f9;
  --ink-100: #a1a0a0;
  --ink-200: #6b6b6b;
  --green: #599c2d;
  --msg-out: #595B83;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --mono: "SF Mono", ui-monospace, Menlo, Consolas, monospace;
  font-family: var(--sans);
  line-height: 1.6;
  transform-origin: top center;
}
.ga-scene * { box-sizing: border-box; }

/* ---------- the two phones, drawn and animated ----------
   Left phone posts a game; right phone gets the ping on its home screen,
   opens the post, and the two settle the stakes. Every screen follows the
   app's own components: PostsScreen (wordmark header, search, floating tab
   bar), CreatePostScreen (sheet, parsed draft, radius pills), PostDetails
   (avatar hero) and ConversationView (bubbles, composer). */
.ga-scene .duo { display: flex; gap: 16px; align-items: flex-start; }
.ga-scene .mini {
  width: 220px; flex: none; border-radius: 32px; background: #0a0a0a;
  border: 1px solid #2a2a2a; padding: 7px;
  box-shadow: 0 22px 54px rgba(0,0,0,.6), 0 2px 8px rgba(0,0,0,.5);
}
.ga-scene .mini.b { margin-top: 62px; }
.ga-scene .mscreen {
  position: relative; border-radius: 26px; background: var(--bg);
  overflow: hidden; aspect-ratio: 402 / 874;
}
.ga-scene .sbar {
  position: absolute; top: 0; left: 0; right: 0; z-index: 5;
  display: flex; align-items: center; justify-content: space-between;
  padding: 9px 18px 0; font-size: 9px; font-weight: 600; color: var(--ink);
}
.ga-scene .sbar .glyphs { display: flex; gap: 3px; align-items: center; }

.ga-scene .scr { position: absolute; inset: 0; padding-top: 30px; display: none; }
.ga-scene .scr.on { display: flex; flex-direction: column; }

/* --- phone A: the feed (PostsScreen) --- */
.ga-scene .feed { padding-top: 0; }
.ga-scene .feed .mark { margin: 40px auto 0; display: block; text-align: center;
  font-size: 15px; font-weight: 900; font-style: italic; letter-spacing: .12em;
  color: var(--ink); }
.ga-scene .feed .search {
  margin: 16px 10px 12px; display: flex; align-items: center; gap: 5px;
  background: var(--bg-100); border: 1px solid var(--bg-200); border-radius: 9px;
  padding: 7px 9px; font-size: 8.5px; color: var(--ink-200);
  white-space: nowrap; overflow: hidden;
}
.ga-scene .feed .search svg { flex: none; }
.ga-scene .msgbtn { position: absolute; top: 30px; right: 10px; width: 24px; height: 24px;
  border-radius: 50%; background: var(--bg-100); border: 1px solid var(--bg-200);
  display: flex; align-items: center; justify-content: center; }
.ga-scene .cards { padding: 0 10px; display: flex; flex-direction: column; gap: 13px; }
.ga-scene .card { display: flex; gap: 8px; align-items: flex-start; }
.ga-scene .card .av { width: 26px; height: 26px; border-radius: 7px; flex: none;
  color: #fff; font-size: 10px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; }
.ga-scene .card .nm { font-size: 10px; font-weight: 600; color: var(--ink); }
.ga-scene .card .fg { font-size: 8px; color: var(--ink-100); margin-left: 4px; font-weight: 400; }
.ga-scene .card .wd { font-size: 9px; line-height: 1.45; color: var(--ink-100); margin-top: 1px; }
.ga-scene .card .mt { font-size: 8px; color: var(--ink-200); margin-top: 2px; }

/* floating bottom bar: blur circles + the black plus (MainNavigator) */
.ga-scene .tabbar { position: absolute; left: 0; right: 0; bottom: 0; z-index: 4;
  display: flex; align-items: center; justify-content: space-around;
  padding: 10px 0 18px; }
.ga-scene .tabc { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--bg-200);
  background: rgba(18,18,18,.55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center; }
.ga-scene .plusbtn { width: 34px; height: 34px; border-radius: 10px; background: var(--ink);
  display: flex; align-items: center; justify-content: center;
  transition: transform .15s ease; }
.ga-scene .plusbtn.press { transform: scale(.88); }
/* after posting, the plus becomes the app's active-post pill */
.ga-scene .activepill { display: none; background: var(--ink); border-radius: 10px;
  padding: 5px 12px; text-align: center; transition: transform .15s ease; }
.ga-scene .activepill .l1 { font-size: 7.5px; font-weight: 600; color: var(--bg); }
.ga-scene .activepill .l2 { font-size: 7px; color: var(--ink-200); }
.ga-scene .feed.posted .plusbtn { display: none; }
.ga-scene .feed.posted .activepill { display: block; }

/* --- phone A: the compose sheet (CreatePostScreen) --- */
.ga-scene .sheet {
  position: absolute; left: 0; right: 0; bottom: 0; top: 22px; z-index: 6;
  background: var(--bg); border: 1px solid var(--bg-100); border-bottom: none;
  border-radius: 14px 14px 0 0; display: flex; flex-direction: column;
  box-shadow: 0 -8px 30px rgba(0,0,0,.6);
  transform: translateY(103%);
  transition: transform .5s cubic-bezier(.2,.8,.25,1);
}
.ga-scene .sheet.up { transform: none; }
.ga-scene .grab { width: 26px; height: 4px; border-radius: 2px; background: var(--bg-200);
  margin: 8px auto 6px; flex: none; }
.ga-scene .sheet-head { display: flex; align-items: center; justify-content: space-between;
  padding: 0 12px 6px; flex: none; }
.ga-scene .sheet-head .t { font-size: 11.5px; font-weight: 700; color: var(--ink); }
.ga-scene .sheet-head .x { width: 18px; height: 18px; border-radius: 50%; background: var(--bg-100);
  color: var(--ink); font-size: 8px; display: flex; align-items: center;
  justify-content: center; }
.ga-scene .helper { margin: 0 12px 8px; font-size: 8.5px; line-height: 1.5; color: var(--ink-100); }
.ga-scene .minput {
  margin: 0 12px; padding: 8px 9px; min-height: 58px; border-radius: 10px;
  border: 1px solid var(--bg-200); background: var(--bg-100);
  font-size: 10px; line-height: 1.5; color: var(--ink); flex: none;
}
.ga-scene .minput .ph { color: var(--ink-200); }
.ga-scene .minput.typing .ph { display: none; }
.ga-scene .mcaret { display: inline-block; width: 1.5px; height: 10px; background: var(--ink);
  vertical-align: text-bottom; margin-left: 1px; opacity: 0;
  animation: blink 1.1s steps(1) infinite; }
.ga-scene .mcaret.live { opacity: 1; }
.ga-scene .sec { margin: 10px 12px 0; flex: none; }
.ga-scene .sec .lbl { font-size: 9px; font-weight: 700; color: var(--ink); margin-bottom: 5px; }
.ga-scene .chips { display: flex; flex-wrap: wrap; gap: 4px; }
.ga-scene .chips span { border: 1px solid var(--bg-200); background: var(--bg-100);
  border-radius: 999px; padding: 2.5px 8px; font-size: 8px; color: var(--ink);
  opacity: 0; transform: translateY(4px);
  transition: opacity .3s ease, transform .3s ease; }
.ga-scene .pdraft.in .chips span { opacity: 1; transform: none; }
.ga-scene .pdraft.in .chips span:nth-child(2) { transition-delay: .1s; }
.ga-scene .pdraft.in .chips span:nth-child(3) { transition-delay: .2s; }
.ga-scene .pdraft.in .chips span:nth-child(4) { transition-delay: .3s; }
.ga-scene .pills { display: flex; gap: 4px; }
.ga-scene .pills span { border: 1px solid var(--bg-200); background: var(--bg-100);
  border-radius: 999px; padding: 2.5px 8px; font-size: 8px; color: var(--ink); }
.ga-scene .pills span.sel { background: var(--ink); border-color: var(--ink); color: var(--bg);
  font-weight: 600; }
.ga-scene .locline { margin: 10px 12px 0; font-size: 7.5px; color: var(--ink-200); flex: none; }
.ga-scene .sheet-foot { margin-top: auto; border-top: 1px solid var(--bg-100);
  padding: 8px 12px 14px; flex: none; }
.ga-scene .mbtn { background: var(--ink); color: var(--bg); border-radius: 9px; padding: 8px 0;
  text-align: center; font-size: 10px; font-weight: 700;
  transition: transform .12s ease, opacity .12s ease; }
.ga-scene .mbtn.press { transform: scale(.97); opacity: .8; }
/* created state swaps in inside the sheet */
.ga-scene .sheet .compose, .ga-scene .sheet .done { display: none; flex: 1; flex-direction: column; min-height: 0; }
.ga-scene .sheet[data-mode="compose"] .compose { display: flex; }
.ga-scene .sheet[data-mode="done"] .done { display: flex; }
.ga-scene .done { align-items: center; justify-content: center; padding: 20px; }
.ga-scene .done .ok { width: 38px; height: 38px; border-radius: 50%; border: 3px solid var(--green);
  color: var(--green); font-size: 16px; font-weight: 700; display: flex;
  align-items: center; justify-content: center; margin-bottom: 12px; }
.ga-scene .done p { font-size: 10px; line-height: 1.55; color: var(--ink);
  text-align: center; max-width: 150px; margin-bottom: 14px; }
.ga-scene .done .mbtn { align-self: stretch; }

/* --- phone B: home screen with a stock-style wallpaper --- */
.ga-scene .home { padding: 40px 14px 10px; justify-content: space-between;
  background:
    radial-gradient(120% 90% at 20% 12%, rgba(64,120,240,.85), rgba(64,120,240,0) 55%),
    radial-gradient(110% 90% at 85% 35%, rgba(150,70,220,.8), rgba(150,70,220,0) 60%),
    radial-gradient(130% 100% at 45% 90%, rgba(235,90,160,.75), rgba(235,90,160,0) 62%),
    linear-gradient(200deg, #0b1030, #1a1040 55%, #2a0f38);
}
.ga-scene .icons { display: grid; grid-template-columns: repeat(4, 1fr); gap: 11px 9px; }
.ga-scene .ig { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.ga-scene .ic { width: 100%; aspect-ratio: 1; border-radius: 22%;
  box-shadow: 0 2px 5px rgba(0,0,0,.28); }
.ga-scene .ig i { width: 60%; height: 4px; border-radius: 2px; background: rgba(255,255,255,.5); }
.ga-scene .c1 { background: linear-gradient(160deg, #58b1ff, #0a63d8); }
.ga-scene .c2 { background: linear-gradient(160deg, #4cd964, #1f9d43); }
.ga-scene .c3 { background: linear-gradient(160deg, #ffb340, #ff5e3a); }
.ga-scene .c4 { background: linear-gradient(160deg, #c47ef0, #7326ab); }
.ga-scene .c5 { background: linear-gradient(160deg, #ff6482, #c11c4f); }
.ga-scene .c6 { background: linear-gradient(160deg, #64d2ff, #2a91d8); }
.ga-scene .c7 { background: linear-gradient(160deg, #ffd60a, #eb9c00); }
.ga-scene .c8 { background: linear-gradient(160deg, #e5e5ea, #9a9aa0); }
.ga-scene .pagedots { display: flex; justify-content: center; gap: 4px; margin: 8px 0; }
.ga-scene .pagedots i { width: 4px; height: 4px; border-radius: 50%; background: rgba(255,255,255,.9); }
.ga-scene .pagedots i + i { background: rgba(255,255,255,.35); }
.ga-scene .dock { border-radius: 16px; background: rgba(255,255,255,.22);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  padding: 8px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; }
.ga-scene .dock .ic { box-shadow: 0 2px 5px rgba(0,0,0,.22); }

/* the push banner, dropped over the home screen */
.ga-scene .bnotif {
  position: absolute; top: 26px; left: 7px; right: 7px; z-index: 6;
  border-radius: 12px; background: #2a2a2ecc;
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  padding: 7px 9px; display: flex; gap: 7px; align-items: flex-start;
  box-shadow: 0 8px 22px rgba(0,0,0,.5);
  opacity: 0; transform: translateY(-56px);
  transition: opacity .4s ease, transform .45s cubic-bezier(.2,.8,.3,1);
}
.ga-scene .bnotif.in { opacity: 1; transform: none; }
.ga-scene .bnotif.press { transform: scale(.965); transition: transform .15s ease; }
.ga-scene .gicon { width: 22px; height: 22px; border-radius: 5px; flex: none;
  background: var(--bg); border: 1px solid #3a3a3e;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  color: #fff; font-weight: 900; line-height: 1; letter-spacing: .02em; }
.ga-scene .gicon b { font-size: 6px; } .gicon i { font-size: 4.5px; font-style: normal; }
.ga-scene .bnotif .body { flex: 1; }
.ga-scene .bnotif .row1 { display: flex; justify-content: space-between; align-items: baseline; }
.ga-scene .bnotif .t { font-size: 8.5px; font-weight: 700; color: #fff; }
.ga-scene .bnotif .when { font-size: 7.5px; color: rgba(255,255,255,.55); }
.ga-scene .bnotif .b { font-size: 8.5px; line-height: 1.4; color: rgba(255,255,255,.85); }

/* --- phone B: the post (PostDetailsScreen hero) + thread --- */
.ga-scene .post { padding-top: 0; }
.ga-scene .phero { position: relative; height: 38%; flex: none;
  background:
    radial-gradient(80% 70% at 70% 25%, rgba(255,255,255,.16), transparent 60%),
    radial-gradient(90% 80% at 25% 75%, rgba(30,80,60,.65), transparent 65%),
    linear-gradient(150deg, #3d6b5a, #16241e 80%);
  overflow: hidden; }
.ga-scene .phero::before { content: ""; position: absolute; width: 90px; height: 90px;
  border-radius: 50%; background: rgba(255,255,255,.10); top: 14%; left: 52%; }
.ga-scene .phero::after { content: ""; position: absolute; width: 120px; height: 120px;
  border-radius: 24px; background: rgba(0,0,0,.18); transform: rotate(24deg);
  top: 46%; left: 8%; }
.ga-scene .phero .shade { position: absolute; left: 0; right: 0; bottom: 0; height: 62%;
  background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,.56) 41%, rgba(0,0,0,.9) 66%); }
.ga-scene .phero .who { position: absolute; left: 10px; right: 10px; bottom: 8px; }
.ga-scene .phero .who .nm { font-size: 15px; font-weight: 700; color: #fff; }
.ga-scene .phero .who .fg { font-size: 9px; font-weight: 400; color: rgba(255,255,255,.75);
  margin-left: 4px; }
.ga-scene .phero .who .mt { font-size: 8.5px; color: rgba(255,255,255,.8); margin-top: 1px; }
.ga-scene .backbtn { position: absolute; top: 32px; left: 8px; z-index: 7; width: 20px; height: 20px;
  border-radius: 50%; background: rgba(0,0,0,.5); color: #fff; font-size: 10px;
  display: flex; align-items: center; justify-content: center; }
.ga-scene .porig { padding: 8px 10px 0; font-size: 9px; line-height: 1.45; color: var(--ink-100);
  flex: none; }

/* --- threads (ConversationView) --- */
.ga-scene .thead { padding: 4px 10px 8px; border-bottom: 1px solid var(--bg-100); flex: none;
  display: flex; align-items: center; gap: 8px; }
.ga-scene .thead .rbtn { width: 22px; height: 22px; border-radius: 50%; background: var(--bg-200);
  color: var(--ink); font-size: 10px; flex: none;
  display: flex; align-items: center; justify-content: center; }
.ga-scene .thead .mid { flex: 1; text-align: center; }
.ga-scene .thead .name { font-size: 11px; font-weight: 700; color: var(--ink); }
.ga-scene .thead .name .fg { font-size: 8.5px; font-weight: 400; color: var(--ink-200); margin-left: 3px; }
.ga-scene .thead .ctx { font-size: 8px; color: var(--ink-200); margin-top: 1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ga-scene .msgs { flex: 1; padding: 10px 10px 4px; display: flex; flex-direction: column;
  justify-content: flex-end; gap: 9px; overflow: hidden; min-height: 0; }
.ga-scene .mrow { display: flex; flex-direction: column; opacity: 0; transform: translateY(7px) scale(.97);
  transition: opacity .3s ease, transform .3s cubic-bezier(.2,.8,.3,1); }
.ga-scene .mrow.show { opacity: 1; transform: none; }
.ga-scene .mrow.in { align-items: flex-start; }
.ga-scene .mrow.out { align-items: flex-end; }
.ga-scene .mrow .who { font-size: 7.5px; color: var(--ink-200); margin: 0 6px 2px; }
.ga-scene .bub { max-width: 78%; border-radius: 12px; padding: 6px 9px; font-size: 10px;
  line-height: 1.45; }
.ga-scene .mrow.in .bub { background: var(--bg-200); color: var(--ink); }
.ga-scene .mrow.out .bub { background: var(--msg-out); color: #fff; }
/* Linear-style composer: text on top of a single rounded card (the app's) */
.ga-scene .mcomposer {
  flex: none; margin: 0 8px 10px; border-radius: 11px; background: var(--bg-100);
  border: 1px solid var(--bg-200); padding: 7px 9px; font-size: 10px;
  color: var(--ink); display: flex; align-items: center; min-height: 30px;
}
.ga-scene .mcomposer .ph { color: var(--ink-200); }
.ga-scene .mcomposer.typing .ph { display: none; }
.ga-scene .mcomposer .txt { flex: 1; }
.ga-scene .senddot { flex: none; width: 16px; height: 16px; border-radius: 50%;
  background: var(--bg-200); color: var(--ink-100); font-size: 9px;
  display: flex; align-items: center; justify-content: center; margin-left: 6px;
  transition: background .15s ease, color .15s ease, transform .12s ease; }
.ga-scene .mcomposer.typing .senddot { background: var(--ink); color: var(--bg); }
.ga-scene .senddot.press { transform: scale(.85); }

/* ============ Sapho ============ */
/* Drawn context-chat scene: the assistant answers from the SOT file. */
.sp-chat {
  max-width: 420px;
  margin-inline: auto;
  background: #fbfaff;
  border: 1px solid rgba(35, 33, 46, 0.2);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(35, 33, 46, 0.25);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.sp-apphead {
  height: 34px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 13px;
  font-size: 11px;
  font-weight: 600;
  color: #6a6a72;
  background: #f4f4f6;
  border-bottom: 1px solid #e2e2e6;
}
.sp-tl { display: flex; gap: 5px; }
.sp-tl i { width: 8px; height: 8px; border-radius: 50%; }
.sp-tl i:nth-child(1) { background: #ff5f57; }
.sp-tl i:nth-child(2) { background: #febc2e; }
.sp-tl i:nth-child(3) { background: #28c840; }
.sp-thread {
  padding: 20px 16px 18px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 14px;
  min-height: 224px;
}
.sp-msg {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.35s var(--ease), transform 0.35s var(--ease);
}
.sp-msg.in { opacity: 1; transform: none; }
.sp-av {
  flex: none;
  width: 21px;
  height: 21px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9.5px;
  font-weight: 700;
  background: #23212e;
  color: #d6d3e0;
}
.sp-av.bot { background: rgba(91, 75, 212, 0.14); color: #5b4bd4; }
.sp-msg p {
  font-size: 12.5px;
  line-height: 1.55;
  max-width: 44ch;
  color: #2b2936;
}
.sp-src {
  display: inline-block;
  margin-top: 7px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 10px;
  padding: 3px 8px;
  border-radius: 6px;
  background: rgba(91, 75, 212, 0.1);
  color: #5b4bd4;
}
.sp-read {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-left: 30px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 10.5px;
  color: #6a6580;
  opacity: 0;
  transition: opacity 0.35s var(--ease);
}
.sp-read.in { opacity: 1; }
.sp-spin {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  flex: none;
  border: 1.5px solid rgba(91, 75, 212, 0.25);
  border-top-color: #5b4bd4;
  animation: spin 0.7s linear infinite;
}

/* ============ Notable ============ */
.notable { color: #211a05; }
.notable .project-tagline { color: #7a3bd6; }
.nt-card {
  background: #fdf8ec;
  border: 2px solid #211a05;
  border-radius: 20px;
  padding: 26px;
  max-width: 400px;
  margin-inline: auto;
  box-shadow: 8px 8px 0 #211a05;
}
.nt-day {
  font-family: "IBM Plex Mono", monospace;
  font-size: 12px;
  letter-spacing: 0.12em;
  opacity: 0.55;
  margin-bottom: 14px;
}
.nt-q {
  font-family: "Archivo", sans-serif;
  font-weight: 800;
  font-size: 24px;
  margin-bottom: 12px;
}
.nt-a {
  font-family: "Newsreader", serif;
  font-style: italic;
  font-size: 18px;
  line-height: 1.4;
  padding: 12px 16px;
  background: rgba(122, 59, 214, 0.09);
  border-left: 3px solid #7a3bd6;
  border-radius: 0 10px 10px 0;
  margin-bottom: 20px;
}
.nt-turns { display: flex; gap: 6px; margin-bottom: 18px; }
.nt-turns i {
  width: 14px; height: 14px;
  border-radius: 50%;
  border: 2px solid #211a05;
  background: transparent;
}
.nt-turns i.used { background: #7a3bd6; border-color: #7a3bd6; }
.nt-input {
  border: 2px solid rgba(33, 26, 5, 0.35);
  border-radius: 12px;
  padding: 12px 16px;
  font-size: 14px;
  opacity: 0.55;
}

/* ============ Track record ============ */
.record {
  padding: clamp(90px, 14vh, 160px) 0;
  color: var(--ink-light);
}
.record .container { max-width: 880px; }
.record ::selection { background: #b0430a; color: #efeadf; }
.record-copy { margin-bottom: 48px; }
.record-copy .project-body { max-width: 560px; }
.record-list {
  list-style: none;
  border-top: 1px solid rgba(26, 23, 18, 0.16);
}
.record-row {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr) auto;
  gap: 4px 24px;
  align-items: baseline;
  padding: 15px 0;
  border-bottom: 1px solid rgba(26, 23, 18, 0.16);
  font-size: 15.5px;
}
.record-years {
  font-family: "IBM Plex Mono", monospace;
  font-size: 12.5px;
  opacity: 0.55;
  white-space: nowrap;
}
.record-post { opacity: 0.85; }
.record-post b { font-weight: 600; opacity: 1; }
.record-note {
  font-family: "IBM Plex Mono", monospace;
  font-size: 12px;
  letter-spacing: 0.04em;
  opacity: 0.5;
  white-space: nowrap;
}
.record-links {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 36px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 14px;
}
.record-links a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid rgba(26, 23, 18, 0.3);
  padding-bottom: 2px;
  transition: border-color 0.2s;
}
.record-links a:hover { border-color: currentColor; }
.record-links span { opacity: 0.35; }
@media (max-width: 640px) {
  .record-row {
    grid-template-columns: 1fr;
    gap: 2px;
    padding: 13px 0;
  }
  .record-note { display: none; }
}

/* ============ Footer ============ */
/* Tall enough to own the viewport midpoint at the bottom of the page, so
   the bg reliably goes dark before its light text is on screen alone. */
.footer {
  min-height: 62svh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(100px, 16vh, 180px) 0;
  color: var(--ink-dark);
}
.footer-inner { text-align: center; }
.footer-big {
  font-family: "Archivo", sans-serif;
  font-weight: 900;
  font-size: clamp(38px, 6vw, 72px);
  letter-spacing: -0.02em;
  margin-bottom: 20px;
}
.footer-mail {
  color: inherit;
  font-size: clamp(16px, 2vw, 20px);
  font-family: "IBM Plex Mono", monospace;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.35);
  padding-bottom: 3px;
  transition: border-color 0.2s;
}
.footer-mail:hover { border-color: currentColor; }
.footer-fine { margin-top: 60px; font-size: 12px; opacity: 0.4; }

/* ============ responsive ============ */
@media (max-width: 820px) {
  .project { min-height: auto; }
  .project-inner { grid-template-columns: 1fr; gap: 44px; }
}

/* respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { transition: none; }
  .js .reveal:not(.in) { opacity: 1; transform: none; }
  .yk-wave i, .hero-scroll { animation: none; }
  body { transition: none; }
}