/* HatchMatch, running in the page.
   Three phones, one app. Every screen is laid out in the iPhone's own
   393 by 852 points and scaled to the device it sits in, so the numbers
   below are the app's numbers: theme/theme.ts, components/results/tokens.ts,
   components/camera/ui.ts and the screens that use them. Kode Mono is the
   app's only typeface. */

@font-face {
  font-family: "Kode Mono";
  src: url("/assets/lab/kode-mono.ttf") format("truetype");
  font-weight: 400 700;
  font-display: swap;
}

/* ── the device ─────────────────────────────────────────────────
   Titanium edge, black bezel, island. The screen keeps 393 by 852. */
.iph-slot {
  container-type: inline-size;
  width: 100%;
}
.iph {
  position: relative;
  padding: 3.4cqw;
  border-radius: 16cqw;
  background: #0c0d0e;
  box-shadow:
    inset 0 0 0 1.5px #45474b,
    inset 0 0 0 3px #1d1e20,
    0 1px 2px rgb(20 20 15 / 0.2),
    0 32px 64px rgb(20 20 15 / 0.2);
}
.iph-screen {
  position: relative;
  aspect-ratio: 393 / 852;
  overflow: hidden;
  border-radius: 12.6cqw;
  background: #081215;
  isolation: isolate;
}
.iph-ui {
  position: absolute;
  top: 0;
  left: 0;
  width: 393px;
  height: 852px;
  overflow: hidden;
  transform-origin: 0 0;
}
.iph-island {
  position: absolute;
  top: 11px;
  left: 50%;
  z-index: 40;
  width: 124px;
  height: 36px;
  margin-left: -62px;
  border-radius: 20px;
  background: #000;
  pointer-events: none;
}
.iph-status {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 39;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 54px;
  padding: 4px 32px 0 48px;
  color: #fff;
  pointer-events: none;
}
.iph-status b {
  font: 600 17px/1 -apple-system, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
  letter-spacing: -0.01em;
}
.iph-status svg {
  width: 66px;
  height: 12px;
}

/* ── the app ────────────────────────────────────────────────── */
.hmp {
  --ink: #081215;
  --c1: rgb(232 223 213 / 0.94);
  --c2: rgb(232 223 213 / 0.84);
  --c3: rgb(232 223 213 / 0.56);
  --c4: rgb(232 223 213 / 0.44);
  --hair: rgb(232 223 213 / 0.08);
  --hair2: rgb(232 223 213 / 0.1);
  --bord: rgb(232 223 213 / 0.12);
  --bord2: rgb(232 223 213 / 0.16);
  --fill: rgb(232 223 213 / 0.04);
  --fill2: rgb(232 223 213 / 0.11);
  --or: #ff7124;
  --or-tint: rgb(255 113 36 / 0.1);
  --or-tint2: rgb(255 113 36 / 0.14);
  --or-bord: rgb(255 113 36 / 0.32);
  --or-bord2: rgb(255 113 36 / 0.45);
  --pad: 24px;
  --e: cubic-bezier(0.22, 0.61, 0.36, 1);
  position: absolute;
  inset: 0;
  font-family: "Kode Mono", ui-monospace, Menlo, monospace;
  font-weight: 400;
  color: var(--c1);
  background: var(--ink);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
}
.hmp :where(*),
.hmp :where(*)::before,
.hmp :where(*)::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
.hmp :where(button) {
  appearance: none;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
}
.hmp :where(button):focus-visible {
  outline: 2px solid var(--or);
  outline-offset: 2px;
}
.hmp svg.ic {
  display: block;
  flex: none;
  fill: currentColor;
}
.hmp svg.sf {
  fill: none;
}
.hmp img {
  display: block;
  max-width: none;
}

/* one screen at a time; the next slides over the last, as a push */
.hmp-scr {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--ink);
}
.hmp-scr.is-in {
  animation: hmp-push 340ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.hmp-scr.is-back {
  animation: hmp-pop 300ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.hmp-scr.is-fade {
  animation: hmp-fade 400ms var(--e) both;
}
@keyframes hmp-push {
  from {
    transform: translateX(100%);
  }
}
@keyframes hmp-pop {
  from {
    transform: translateX(-28%);
    opacity: 0.6;
  }
}
@keyframes hmp-fade {
  from {
    opacity: 0;
  }
}
.hmp-scroll {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
}
.hmp-scroll::-webkit-scrollbar {
  display: none;
}

/* type scale T, components/results/tokens.ts */
.t-eye {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 2.2px;
  text-transform: uppercase;
  color: var(--c3);
}
.t-glab {
  font-size: 8px;
  font-weight: 500;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--c4);
}
.t-chip {
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--c4);
}
.t-list {
  font-size: 15px;
  font-weight: 500;
  color: var(--c1);
}
.t-body {
  font-size: 14px;
  line-height: 23px;
  color: var(--c2);
}
.t-bsm {
  font-size: 13px;
  line-height: 21px;
  color: var(--c2);
}
.t-sup {
  font-size: 12px;
  line-height: 19px;
  color: var(--c3);
}
.or {
  color: var(--or);
}

/* ── the tab bar: iOS 26, Liquid Glass ───────────────────────── */
.hmp-tabs {
  position: absolute;
  left: 50%;
  bottom: 22px;
  z-index: 20;
  display: flex;
  gap: 2px;
  padding: 4px;
  transform: translateX(-50%);
  border-radius: 34px;
  background: rgb(30 38 44 / 0.58);
  box-shadow:
    inset 0 0.5px 0 rgb(255 255 255 / 0.22),
    inset 0 0 0 0.5px rgb(255 255 255 / 0.12),
    0 10px 30px rgb(0 0 0 / 0.35);
  backdrop-filter: blur(18px) saturate(1.5);
  -webkit-backdrop-filter: blur(18px) saturate(1.5);
  touch-action: none;
  transition: transform 260ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.hmp-tabs.is-press {
  transform: translateX(-50%) scale(1.03);
}
/* the lens: the outer rides along the bar, the inner swells and stretches */
.hmp-lens {
  position: absolute;
  top: 4px;
  left: 0;
  width: 76px;
  height: calc(100% - 8px);
  z-index: 0;
  transform: translateX(var(--x, 4px));
  transition: transform 520ms cubic-bezier(0.34, 1.4, 0.5, 1);
  pointer-events: none;
}
.hmp-tabs.is-drag .hmp-lens {
  transition: transform 90ms linear;
}
.hmp-tabs.is-still .hmp-lens,
.hmp-tabs.is-still .hmp-lens span {
  transition: none;
}
.hmp-lens span {
  position: absolute;
  inset: 0;
  border-radius: 28px;
  background: rgb(255 255 255 / 0.1);
  box-shadow:
    inset 0 0.5px 0 rgb(255 255 255 / 0.18),
    inset 0 0 0 0.5px rgb(255 255 255 / 0.06);
  transition:
    transform 320ms cubic-bezier(0.34, 1.56, 0.64, 1),
    background-color 220ms var(--e),
    box-shadow 220ms var(--e);
}
.hmp-tabs.is-press .hmp-lens span {
  transform: scale(1.22, 1.18);
  background: rgb(255 255 255 / 0.16);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.42),
    inset 0 -1px 0 rgb(255 255 255 / 0.1),
    inset 0 0 0 0.5px rgb(255 255 255 / 0.2),
    0 8px 22px rgb(0 0 0 / 0.32);
  backdrop-filter: blur(2px) saturate(1.8) brightness(1.15);
  -webkit-backdrop-filter: blur(2px) saturate(1.8) brightness(1.15);
}
/* on the way to a new tab it stretches along its path, then gathers */
.hmp-lens.is-goo span {
  animation: hmp-goo 520ms cubic-bezier(0.34, 1.2, 0.5, 1);
}
@keyframes hmp-goo {
  30% {
    transform: scale(1.34, 0.9);
  }
  65% {
    transform: scale(0.94, 1.05);
  }
}
.hmp-tab {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  width: 76px;
  padding: 7px 0 6px;
  border-radius: 28px;
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  transition: color 180ms var(--e);
}
.hmp-tab .ic {
  width: 25px;
  height: 25px;
}
.hmp-tab.is-on {
  color: var(--or);
}

/* ── the header over the tab screens ─────────────────────────── */
.hmp-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 58px 16px 8px;
}
.hmp-av {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #d4632a;
  color: #f5ede0;
  font-size: 16px;
  font-weight: 700;
}
.hmp-tok {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 12px;
  border-radius: 18px;
  background: rgb(8 18 21 / 0.55);
  box-shadow: inset 0 0 0 0.5px rgb(245 237 224 / 0.14);
  font-size: 17px;
  font-weight: 700;
  color: #f5ede0;
}
.hmp-tok i {
  width: 32px;
  height: 32px;
  background: #d4632a;
  -webkit-mask: url("/assets/hm-proto/stonefly.webp") center / contain no-repeat;
  mask: url("/assets/hm-proto/stonefly.webp") center / contain no-repeat;
}

/* ── home ────────────────────────────────────────────────────── */
.home {
  background: linear-gradient(160deg, #081215 0%, #0b171b 55%, #272d4e 100%);
}
.home-bg {
  position: absolute;
  inset: -16px;
  animation: home-drift 12s linear infinite alternate;
}
.home-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@keyframes home-drift {
  to {
    transform: translateY(-8px);
  }
}
.home-top,
.home-bot {
  position: absolute;
  left: 0;
  right: 0;
  pointer-events: none;
}
.home-top {
  top: 0;
  height: 320px;
  background: linear-gradient(180deg, rgb(8 18 21 / 0.55) 0%, rgb(8 18 21 / 0.22) 35%, rgb(8 18 21 / 0) 100%);
}
.home-bot {
  bottom: 0;
  height: 640px;
  background: linear-gradient(180deg, rgb(8 18 21 / 0) 0%, rgb(8 18 21 / 0.38) 58%, rgb(8 18 21 / 0.88) 100%);
}
.home-head {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2;
}
.home-over {
  position: absolute;
  top: 149px;
  left: 22px;
  right: 22px;
  z-index: 2;
}
.home-mark {
  width: 85%;
  height: auto;
  margin-bottom: 22px;
}
.home-sub {
  max-width: 370px;
  font-size: 15px;
  line-height: 21px;
  font-weight: 500;
  color: rgb(232 223 213 / 0.92);
  opacity: 0.9;
  animation: rv-rise 360ms cubic-bezier(0.2, 0.7, 0.2, 1) 80ms both;
}
.home-scrim {
  position: absolute;
  inset: 0;
  z-index: 24;
  background: #020a0c;
  opacity: 0;
  pointer-events: none;
  transition: opacity 320ms var(--e);
}
.home.is-open .home-scrim {
  opacity: 0.72;
  pointer-events: auto;
  cursor: pointer;
}
.home-card {
  position: absolute;
  top: 269px;
  left: 22px;
  width: 349px;
  height: 306px;
  z-index: 25;
  overflow: hidden;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgb(0 0 0 / 0.35);
  transition: top 360ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.home.is-open .home-card {
  top: 64px;
  height: auto;
  max-height: 740px;
  overflow: auto;
  scrollbar-width: none;
}
.home-host {
  opacity: 0;
  transition: opacity 400ms var(--e);
}
.home-card.is-ready .home-host {
  opacity: 1;
}
.home-wait {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: rgb(8 18 21 / 0.6);
  box-shadow: inset 0 0 0 0.5px var(--bord);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c4);
  transition: opacity 300ms var(--e);
}
.home-card.is-ready .home-wait {
  opacity: 0;
  pointer-events: none;
}
.home-cta {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 121px;
  z-index: 3;
  padding: 24px 0;
}
.home-cta p {
  margin-top: 12px;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--or);
}

/* ── camera ──────────────────────────────────────────────────── */
.cam {
  background: #000;
  touch-action: none;
  cursor: crosshair;
}
.cam-feed {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.cam-feed img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 61% 50%;
  transform: scale(var(--z, 1));
  transition: transform 120ms linear;
}
.cam-word {
  position: absolute;
  top: 58px;
  left: 0;
  right: 0;
  z-index: 3;
  text-align: center;
  font-size: 18px;
  line-height: 22px;
  font-weight: 700;
  letter-spacing: -0.2px;
  color: rgb(232 223 213 / 0.92);
  pointer-events: none;
}
.cam-box {
  position: absolute;
  left: 50%;
  top: 388px;
  z-index: 3;
  width: 243px;
  height: 243px;
  transform: translate(-50%, -50%);
  pointer-events: none;
  transition: opacity 200ms var(--e);
}
.cam-box i {
  position: absolute;
  width: 26px;
  height: 26px;
  border: 0 solid rgb(255 255 255 / 0.9);
}
.cam-box i:nth-child(1) {
  top: 0;
  left: 0;
  border-width: 2px 0 0 2px;
  border-top-left-radius: 8px;
}
.cam-box i:nth-child(2) {
  top: 0;
  right: 0;
  border-width: 2px 2px 0 0;
  border-top-right-radius: 8px;
}
.cam-box i:nth-child(3) {
  bottom: 0;
  left: 0;
  border-width: 0 0 2px 2px;
  border-bottom-left-radius: 8px;
}
.cam-box i:nth-child(4) {
  bottom: 0;
  right: 0;
  border-width: 0 2px 2px 0;
  border-bottom-right-radius: 8px;
}
.cam-label {
  position: absolute;
  bottom: calc(100% + 26px);
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.3px;
  color: #fff;
  text-shadow: 0 0 4px rgb(0 0 0 / 0.6);
}
.cam-chips {
  position: absolute;
  top: calc(100% + 44px);
  left: 50%;
  display: flex;
  gap: 8px;
  transform: translateX(-50%);
}
.cam-chips span {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgb(8 18 21 / 0.55);
  box-shadow: inset 0 0 0 1px rgb(232 223 213 / 0.22);
  white-space: nowrap;
  font-size: 11.5px;
  font-weight: 600;
  color: #fff;
}
.cam-chips .ic {
  width: 13px;
  height: 13px;
}
.cam-zoom {
  position: absolute;
  top: 570px;
  left: 50%;
  z-index: 4;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgb(8 18 21 / 0.65);
  transform: translateX(-50%);
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  opacity: 0;
  transition: opacity 300ms var(--e) 700ms;
  pointer-events: none;
}
.cam-zoom.is-on {
  opacity: 1;
  transition-delay: 0s;
  transition-duration: 0s;
}
.cam-focus {
  position: absolute;
  z-index: 4;
  width: 64px;
  height: 64px;
  margin: -32px 0 0 -32px;
  border: 1.5px solid #fff;
  border-radius: 6px;
  pointer-events: none;
  animation: cam-focus 800ms ease both;
}
@keyframes cam-focus {
  0% {
    opacity: 0;
    transform: scale(1.25);
  }
  15% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
.cam-scrim {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 360px;
  z-index: 2;
  background: linear-gradient(180deg, rgb(0 0 0 / 0) 0%, rgb(0 0 0 / 0.22) 50%, rgb(0 0 0 / 0.72) 100%);
  pointer-events: none;
}
.cam-bot {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 104px;
  z-index: 5;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 18px 0;
}
.cam-side {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  width: 88px;
  height: 56px;
  border-radius: 16px;
  background: rgb(0 0 0 / 0.22);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.1);
  color: #e4eef0;
  transition: transform 90ms var(--e), opacity 90ms var(--e);
}
.cam-side span {
  font-size: 11px;
  font-weight: 600;
  color: rgb(232 223 213 / 0.85);
}
.cam-side .ic {
  width: 22px;
  height: 22px;
}
.cam-side:active {
  opacity: 0.85;
  transform: scale(0.98);
}
.cam-side.is-on {
  background: var(--or);
  box-shadow: none;
  color: var(--ink);
}
.cam-side.is-on span {
  color: var(--ink);
}
.cam-shut {
  display: grid;
  place-items: center;
  width: 78px;
  height: 78px;
  border-radius: 50%;
  box-shadow:
    inset 0 0 0 4px var(--or),
    0 10px 18px rgb(0 0 0 / 0.24);
}
.cam-shut i {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: var(--or);
  transition: transform 120ms var(--e);
}
.cam-shut:active {
  opacity: 0.92;
}
.cam-shut:active i {
  transform: scale(0.92);
}
.cam-flash {
  position: absolute;
  inset: 0;
  z-index: 30;
  background: #000;
  animation: cam-flash 260ms ease-out both;
  pointer-events: none;
}
@keyframes cam-flash {
  from {
    opacity: 0.85;
  }
  to {
    opacity: 0;
  }
}

/* ── loading: the river ──────────────────────────────────────── */
.rv {
  display: grid;
  place-items: center;
  text-align: center;
  color: #fff;
  background: radial-gradient(120% 90% at 50% 100%, #2d67a9 0%, #0b2558 55%, #050a18 100%);
}
.rv-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 800ms var(--e);
}
.rv.has-river .rv-canvas {
  opacity: 1;
}
.rv-scrim {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 360px;
  height: 220px;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse at center, rgb(6 22 30 / 0.42) 0%, rgb(6 22 30 / 0.18) 45%, transparent 72%);
  pointer-events: none;
}
.rv-mark {
  position: absolute;
  top: 64px;
  left: 0;
  right: 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgb(255 255 255 / 0.72);
}
.rv-stage {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: translateY(-6px);
}
.rv-eyebrow {
  margin-bottom: 10px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgb(255 255 255 / 0.62);
}
.rv-line {
  font-size: 28px;
  font-weight: 500;
  line-height: 1.2;
  text-shadow: 0 1px 18px rgb(0 20 30 / 0.45);
}
.rv-line span {
  display: inline-block;
  animation: rv-rise 550ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
@keyframes rv-rise {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}
.rv-dots {
  display: flex;
  gap: 6px;
  margin-top: 14px;
}
.rv-dots i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgb(255 255 255 / 0.35);
  transition: background-color 200ms var(--e);
}
.rv-dots i.on {
  background: #fff;
}
.rv-fade {
  position: absolute;
  inset: 0;
  background: var(--ink);
  opacity: 0;
  pointer-events: none;
  transition: opacity 400ms var(--e);
}
.rv.is-fading .rv-fade {
  opacity: 1;
}

/* ── result: app/result.tsx ──────────────────────────────────── */
.hr-hero {
  position: relative;
  height: 392px;
  cursor: zoom-in;
}
.hr-hero > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hr-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgb(8 18 21 / 0.55) 0%, rgb(8 18 21 / 0) 28%, rgb(8 18 21 / 0.5) 62%, #081215 100%);
  pointer-events: none;
}
.hr-caps {
  position: absolute;
  top: 64px;
  left: 16px;
  right: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: default;
}
.hr-cap,
.hr-cat {
  display: flex;
  align-items: center;
  border-radius: 23px;
  background: rgb(8 18 21 / 0.55);
  box-shadow: inset 0 0 0 0.5px var(--bord2);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.hr-cap {
  padding: 6px;
}
.hr-cap button {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  color: var(--c1);
}
.hr-cap .ic {
  width: 18px;
  height: 18px;
}
.hr-cap button + button .ic {
  width: 16px;
  height: 16px;
}
.hr-cat {
  gap: 8px;
  height: 46px;
  padding: 0 18px;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--c1);
}
.hr-cat i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--or);
}
.hr-titleblock {
  position: absolute;
  left: var(--pad);
  right: var(--pad);
  bottom: 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}
.hr-titlerow {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 12px;
}
.hr-title {
  font-size: 30px;
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.6px;
  color: var(--c1);
}
.hr-title.is-lg {
  font-size: 34px;
  letter-spacing: -0.68px;
}
.hr-edit {
  display: flex;
  align-items: center;
  gap: 5px;
  flex: none;
  padding-bottom: 5px;
}
.hr-edit .ic {
  width: 10px;
  height: 10px;
  color: var(--c3);
}
.hr-grid {
  display: grid;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  border-top: 0.5px solid var(--hair2);
  border-bottom: 0.5px solid var(--hair2);
}
.hr-grid.is-cont {
  border-top: 0;
}
.hr-grid > div {
  padding: 14px 16px 16px;
}
.hr-grid > div:first-child {
  padding-left: var(--pad);
}
.hr-grid > div:last-child {
  padding-right: var(--pad);
}
.hr-grid > div + div {
  border-left: 0.5px solid var(--hair2);
}
.hr-val {
  margin-top: 8px;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.25;
  color: var(--c1);
}
.hr-val.or {
  color: var(--or);
}
.hr-ruler {
  position: relative;
  display: block;
  height: 11px;
  margin-top: 7px;
}
.hr-ruler::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 2px;
  height: 7px;
  background: repeating-linear-gradient(90deg, rgb(232 223 213 / 0.28) 0 1px, transparent 1px 5px);
}
.hr-ruler i {
  position: absolute;
  top: 0;
  left: 0;
  width: 2px;
  height: 11px;
  background: var(--or);
  transform: translateX(var(--at, 0px));
  transition: transform 900ms var(--e);
}
.hr-sec {
  padding: 28px var(--pad) 24px;
  border-bottom: 0.5px solid var(--hair2);
}
.hr-sec.is-last {
  border-bottom: 0;
  padding-bottom: 150px;
}
.hr-sub {
  margin-top: 8px;
}
.hr-chips {
  display: flex;
  gap: 8px;
  margin: 16px calc(var(--pad) * -1) 0;
  padding: 0 var(--pad);
  overflow-x: auto;
  scrollbar-width: none;
  scroll-behavior: smooth;
}
.hr-chips::-webkit-scrollbar {
  display: none;
}
.hr-chip {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 12px 16px;
  border-radius: 22px;
  box-shadow: inset 0 0 0 0.5px var(--bord);
  font-size: 12px;
  line-height: 1.2;
  color: var(--c2);
  transition: background-color 140ms var(--e), box-shadow 140ms var(--e);
}
.hr-chip.is-rec {
  box-shadow: inset 0 0 0 0.5px var(--or-bord);
}
.hr-chip.is-rec::after {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--or);
}
.hr-chip[aria-pressed="true"] {
  background: var(--fill2);
  box-shadow: inset 0 0 0 0.5px var(--bord2);
  color: var(--c1);
}
.hr-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-top: 22px;
}
.hr-rig {
  font-size: 19px;
  font-weight: 500;
  color: var(--c1);
}
.hr-note {
  margin-top: 6px;
  font-size: 9px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--c4);
}
.hr-note.or {
  color: var(--or);
}
.hr-mine {
  flex: none;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 11px 14px;
  border-radius: 20px;
  box-shadow: inset 0 0 0 0.5px var(--bord);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--c2);
}
.hr-mine .ic {
  width: 11px;
  height: 11px;
}
.hr-mine[aria-pressed="true"] {
  background: var(--or-tint);
  box-shadow: inset 0 0 0 0.5px var(--or-bord2);
  color: var(--or);
}
.hr-steps {
  list-style: none;
  margin-top: 10px;
}
.hr-steps li {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 8px;
  padding: 15px 0;
  border-top: 0.5px solid var(--hair);
  font-size: 14px;
  line-height: 23px;
  color: var(--c2);
  animation: rv-rise 360ms var(--e) both;
  animation-delay: calc(var(--i, 0) * 50ms);
}
.hr-steps b {
  font-weight: 500;
  font-size: 12px;
  line-height: 23px;
  color: var(--or);
}
.hr-pairs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}
.hr-pairs span {
  white-space: nowrap;
  padding: 9px 13px;
  border-radius: 18px;
  box-shadow: inset 0 0 0 0.5px var(--bord);
  font-size: 12px;
  color: var(--c2);
}
.hr-mt {
  margin-top: 30px;
}
.hr-tabs {
  display: flex;
  gap: 6px;
  margin-top: 14px;
}
.hr-tabs button {
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--c4);
  transition: background-color 140ms var(--e), color 140ms var(--e);
}
.hr-tabs button[aria-selected="true"] {
  background: var(--fill2);
  color: var(--c1);
}
.hr-lab2 {
  margin-top: 22px;
}
.hr-p {
  margin-top: 8px;
}
.hr-feats,
.hr-sims,
.tie {
  list-style: none;
  margin-top: 10px;
}
.hr-feats li {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 12px;
  padding: 13px 0;
  border-top: 0.5px solid var(--hair);
}
.hr-feats b {
  line-height: 19px;
}
.hr-sims li button {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) 16px;
  gap: 8px;
  width: 100%;
  padding: 14px 0;
  border-top: 0.5px solid var(--hair);
  text-align: left;
}
.hr-sims li:last-child button {
  border-bottom: 0.5px solid var(--hair);
}
.hr-sims em {
  font-style: normal;
  font-size: 12px;
  font-weight: 500;
  line-height: 21px;
  color: var(--c4);
}
.hr-sims .ic {
  width: 16px;
  height: 16px;
  margin-top: 3px;
  color: var(--c4);
}
.hr-sims .is-picked .ic {
  color: var(--or);
}
.hr-undo {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  padding: 12px 12px 12px 14px;
  border-radius: 12px;
  background: var(--or-tint);
  box-shadow: inset 0 0 0 0.5px var(--or-bord);
  animation: rv-rise 300ms var(--e) both;
}
.hr-undo p {
  flex: 1;
  font-size: 12px;
  line-height: 18px;
  color: var(--c2);
}
.hr-undo button:first-of-type {
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 1.4px;
  color: var(--or);
}
.hr-undo .ic {
  width: 14px;
  height: 14px;
  color: var(--c3);
}
.hr-retake {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-top: 34px;
  padding-top: 18px;
  border-top: 0.5px solid var(--hair2);
}
.hr-pill {
  flex: none;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  border-radius: 20px;
  box-shadow: inset 0 0 0 0.5px var(--bord);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--c2);
}
.hr-pill .ic {
  width: 13px;
  height: 13px;
}
.hr-bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 6;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) 72px;
  align-items: center;
  height: 98px;
  padding: 54px 12px 0;
  background: var(--ink);
  border-bottom: 0.5px solid var(--hair2);
  opacity: 0;
  pointer-events: none;
}
.hr-bar.is-on {
  pointer-events: auto;
}
.hr-bar button {
  color: var(--c1);
}
.hr-bar .ic {
  width: 22px;
  height: 22px;
}
.hr-bar b {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
  font-size: 15px;
  font-weight: 500;
  color: var(--c1);
}
.hr-bar em {
  font-style: normal;
  font-size: 15px;
  font-weight: 500;
  text-align: right;
  color: var(--or);
}
.hr-dock {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 7;
  padding: 56px 18px 34px;
  background: linear-gradient(180deg, rgb(8 18 21 / 0) 0%, rgb(8 18 21 / 0.72) 45%, #081215 72%);
  pointer-events: none;
}
.hm-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 58px;
  overflow: hidden;
  border: 1px solid var(--ink);
  border-radius: 12px;
  background: linear-gradient(180deg, #fc8142 0%, #a1410f 100%);
  color: var(--ink);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.31);
  pointer-events: auto;
  transition: transform 90ms var(--e);
}
.hm-btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 6px;
  background: linear-gradient(180deg, rgb(255 255 255 / 0.51), rgb(255 255 255 / 0));
}
.hm-btn:active {
  transform: scale(0.97);
}

/* insect body, HatchView.tsx */
.tie-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: 30px;
}
.tie {
  margin-top: 14px;
}
.tie li {
  display: flex;
  gap: 14px;
  padding: 13px 0;
  border-top: 0.5px solid var(--hair);
}
.tie li:last-child {
  border-bottom: 0.5px solid var(--hair);
}
.tie-rank {
  display: grid;
  place-items: center;
  flex: none;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  border-radius: 50%;
  background: #2a2c2e;
  font-size: 9px;
  font-weight: 500;
  color: var(--c2);
}
.tie li:first-child .tie-rank {
  background: var(--or);
  color: var(--ink);
}
.tie-txt {
  flex: 1;
  min-width: 0;
}
.tie-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
}
.tie-row .t-chip.or {
  color: var(--or);
}
.tie-txt .t-sup {
  margin-top: 6px;
}
.tie-hint {
  margin-top: 14px;
}

/* ── flybox: app/(tabs)/flybox.tsx ────────────────────────────── */
.fb {
  background: var(--ink);
}
.fb-top {
  position: relative;
  z-index: 3;
  padding: 0 20px 14px;
  border-bottom: 0.5px solid var(--hair2);
  background: var(--ink);
}
.fb-title {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding-top: 10px;
  overflow: hidden;
  transform-origin: 0 0;
}
.fb-count {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 10px;
}
.fb-count b {
  font-size: 30px;
  font-weight: 500;
  letter-spacing: -0.6px;
  line-height: 1;
  color: var(--c1);
}
.fb-sort {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 14px;
  border-radius: 20px;
  box-shadow: inset 0 0 0 0.5px var(--bord);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 1.4px;
  color: var(--c2);
}
.fb-sort .ic {
  width: 12px;
  height: 12px;
}
.fb-search {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 44px;
  margin-top: 18px;
  padding: 0 8px 0 14px;
  border-radius: 12px;
  background: var(--fill);
  box-shadow: inset 0 0 0 0.5px var(--bord);
  color: var(--c3);
}
.fb-search > .ic {
  width: 16px;
  height: 16px;
}
.fb-search input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: none;
  font: 600 14px "Kode Mono", ui-monospace, monospace;
  color: var(--c1);
  user-select: text;
  -webkit-user-select: text;
}
.fb-search input::placeholder {
  color: var(--c3);
  font-weight: 500;
}
.fb-clear {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 10px;
  color: var(--c3);
}
.fb-clear .ic {
  width: 16px;
  height: 16px;
}
.fb-clear[hidden] {
  display: none;
}
.fb-filters {
  display: flex;
  gap: 8px;
  margin: 12px -20px 0;
  padding: 0 20px;
  overflow-x: auto;
  scrollbar-width: none;
}
.fb-filters::-webkit-scrollbar {
  display: none;
}
.fb-filter {
  flex: none;
  padding: 10px 14px;
  border-radius: 20px;
  box-shadow: inset 0 0 0 0.5px var(--bord);
  white-space: pre;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 1.4px;
  color: var(--c4);
  transition: background-color 140ms var(--e), box-shadow 140ms var(--e);
}
.fb-filter[aria-pressed="true"] {
  background: var(--or-tint2);
  box-shadow: inset 0 0 0 0.5px var(--or-bord2);
  color: var(--or);
}
.fb-list {
  top: 0;
  padding-bottom: 140px;
}
.fb-date {
  padding: 26px 20px 12px;
  color: var(--or);
}
.fb-row {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 13px 20px;
  border-top: 0.5px solid var(--hair);
  text-align: left;
  transition: background-color 120ms var(--e);
}
.fb-row:active {
  background: var(--fill);
}
.fb-row[aria-disabled="true"] {
  cursor: default;
}
.fb-thumb {
  flex: none;
  width: 58px;
  height: 58px;
  overflow: hidden;
  border-radius: 10px;
  background: rgb(232 223 213 / 0.08);
}
.fb-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.fb-mid {
  flex: 1;
  min-width: 0;
}
.fb-name {
  display: flex;
  align-items: center;
  gap: 8px;
}
.fb-name b {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 15px;
  font-weight: 500;
  color: var(--c1);
}
.fb-name b.is-unnamed {
  color: var(--c3);
}
.fb-pen {
  display: grid;
  place-items: center;
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  box-shadow: inset 0 0 0 0.5px var(--bord);
  color: var(--c3);
}
.fb-pen.is-or {
  box-shadow: inset 0 0 0 0.5px var(--or-bord);
  color: var(--or);
}
.fb-pen .ic {
  width: 12px;
  height: 12px;
}
.fb-type {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding: 6px 10px;
  border-radius: 8px;
  background: var(--or-tint);
  box-shadow: inset 0 0 0 0.5px var(--or-bord);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 1.4px;
  color: var(--or);
}
.fb-type::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
}
.fb-type.is-none {
  background: none;
  box-shadow: inset 0 0 0 0.5px var(--bord);
  color: var(--c3);
}
.fb-val {
  flex: none;
  text-align: right;
}
.fb-val b {
  display: block;
  font-size: 20px;
  font-weight: 700;
  color: var(--c1);
}
.fb-val b.or {
  color: var(--or);
}
.fb-val span {
  display: block;
  margin-top: 4px;
}
.fb-empty {
  padding: 60px 40px;
  text-align: center;
}
.fb-empty .ic {
  width: 28px;
  height: 28px;
  margin: 0 auto 14px;
  color: var(--c3);
}
.fb-empty b {
  display: block;
  font-size: 17px;
  font-weight: 500;
  color: var(--c1);
}
.fb-empty .t-sup {
  margin-top: 8px;
}
.fb-empty button {
  margin-top: 18px;
  padding: 10px 14px;
  border-radius: 20px;
  box-shadow: inset 0 0 0 0.5px var(--bord);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--c2);
}
.fb-fade {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 4;
  height: 120px;
  background: linear-gradient(180deg, rgb(8 18 21 / 0) 0%, rgb(8 18 21 / 0.85) 55%, #081215 100%);
  pointer-events: none;
}

/* the photo, full screen */
.hmp-view {
  position: absolute;
  inset: 0;
  z-index: 35;
  display: grid;
  place-items: center;
  background: #000;
  cursor: zoom-out;
  animation: hmp-fade 220ms var(--e) both;
}
.hmp-view img {
  width: 100%;
  height: auto;
}
.hmp-view span {
  position: absolute;
  top: 64px;
  right: 16px;
  padding: 10px 16px;
  border-radius: 999px;
  background: rgb(8 18 21 / 0.55);
  box-shadow: inset 0 0 0 0.5px var(--bord2);
  font-size: 12px;
  font-weight: 600;
  color: var(--c1);
}

@media (prefers-reduced-motion: reduce) {
  .hmp *,
  .hmp *::before,
  .hmp *::after {
    animation: none !important;
    transition: none !important;
  }
}