/* Nanobeasts components. Classes are prefixed nb-. Every value comes from tokens.css. */
.nb-wrap { width: 100%; max-width: var(--max-width); margin-inline: auto; padding-inline: var(--gutter); box-sizing: border-box; }
.nb-eyebrow { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-lab); font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--mint); }
.nb-h { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.045em; line-height: 1.02; color: var(--ink); margin: 0; text-wrap: balance; }
.nb-h em { font-style: normal; color: var(--mint); } /* hero only: one mint word per page */
.nb-lede { font-family: var(--font-body); font-size: 20px; line-height: 1.55; font-weight: 500; color: var(--ink-secondary); margin: 0; max-width: 36em; text-wrap: pretty; }
.nb-section-header { display: grid; gap: var(--space-4); max-width: 760px; }
.nb-section-header.is-center { text-align: center; justify-items: center; margin-inline: auto; }
.nb-section-header .nb-h { font-size: clamp(32px, 22px + 3vw, 56px); }

.nb-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: 52px; padding: 0 var(--space-5); border-radius: var(--radius-pill); font-family: var(--font-body); font-weight: 800; font-size: 16px; text-decoration: none; border: 0; cursor: pointer; transition: transform .2s ease, box-shadow .2s ease; }
.nb-btn--primary { background: var(--mint); color: var(--on-mint); }
.nb-btn--primary:hover { background: #7ff0de; }
.nb-btn--secondary { background: var(--lab-200); color: var(--ink); }
.nb-btn--link { background: none; padding: 0 var(--space-1); min-height: 44px; color: var(--ink); border-bottom: 2px solid var(--mint); border-radius: 0; }
.nb-btn:focus-visible, .nb-store:focus-visible, .nb-stage:focus-visible, .nb-tab:focus-visible, .nb-chip:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 3px; }

.nb-store { display: inline-flex; align-items: center; gap: 10px; min-height: 56px; padding: 8px 20px 8px 16px; border-radius: var(--radius-md); background: #000; color: #fff; text-decoration: none; border: 1px solid var(--lab-200); box-sizing: border-box; }
.nb-store svg { width: 24px; height: 24px; flex: none; }
.nb-store span { display: grid; line-height: 1.1; text-align: left; }
.nb-store small { font: 600 11px var(--font-body); opacity: .85; }
.nb-store b { font: 600 20px -apple-system, "SF Pro Display", var(--font-body); letter-spacing: -0.01em; }

.nb-pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: var(--radius-pill); font-family: var(--font-body); font-weight: 700; font-size: 13px; font-variant-numeric: tabular-nums; color: var(--mint); background: var(--mint-soft); border: 1px solid var(--mint); }
.nb-pill--quiet { color: var(--ink-secondary); background: var(--lab-200); border-color: var(--line); }
.nb-type { display: inline-flex; align-items: center; line-height: 1.2; padding: 3px 10px; border-radius: var(--radius-pill); font: 800 12px var(--font-body); color: var(--on-type); background: var(--t, var(--type-normal)); }

.nb-phone { position: relative; width: 100%; max-width: 280px; aspect-ratio: 720 / 1560; border-radius: var(--radius-phone); padding: 9px; box-sizing: border-box; background: linear-gradient(150deg, #43484c, #111315 38%, #2a2e31); box-shadow: var(--device), inset 0 0 0 1.5px rgba(255,255,255,.1); }
.nb-phone > img, .nb-phone > video { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; border-radius: 37px; background: #000; }

.nb-card { background: var(--lab-100); border: 1px solid var(--line); border-radius: var(--radius-xl); box-shadow: var(--lift); }
.nb-step { display: grid; grid-template-rows: auto 1fr; gap: var(--space-5); padding: var(--space-6) var(--space-6) 0; overflow: hidden; min-width: 0; }
.nb-step__title { font: 700 28px/1.12 var(--font-display); letter-spacing: -0.035em; color: var(--ink); margin: var(--space-3) 0 var(--space-2); text-wrap: balance; }
.nb-step__copy { font: 500 17px/1.6 var(--font-body); color: var(--ink-secondary); margin: 0; }
.nb-step__shot { align-self: end; height: 360px; overflow: hidden; display: grid; justify-items: center; }
.nb-step .nb-phone { max-width: 240px; }

.nb-evo { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: var(--space-7); align-items: center; padding: var(--space-6); border-radius: var(--radius-2xl); background: var(--lab-100); border: 1px solid var(--line); box-shadow: var(--lift); color: var(--ink); }
/* The slider repaints on every drag. As its own layer those repaints stay inside the card; painted into the page they
   forced Chrome to re-raster full-width page tiles, which showed as a black band behind the card. Static layer, never animated. */
.nb-evo { will-change: transform; }
.nb-evo__stage { position: relative; width: min(100%, 380px); aspect-ratio: 1; justify-self: center; display: grid; place-items: center; }
.nb-evo__stage svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.nb-evo__track { stroke: var(--mint-soft); }
.nb-evo__fill { stroke: var(--mint); transition: stroke-dashoffset .3s ease; }
.nb-evo__slot { position: relative; width: 66%; aspect-ratio: 1; }
/* Instant, paint-only stage swap: opacity/transform transitions here caused GPU black bars in Chrome. */
.nb-evo__slot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; visibility: hidden; }
.nb-evo__slot img.is-on { visibility: visible; }
.nb-evo__flash { position: absolute; inset: 8%; border-radius: 50%; background-color: transparent; pointer-events: none; }
.nb-evo__flash.is-go { animation: nb-flash .75s ease-out; }
/* Evolution flash animates background-color only (painted, never composited). */
@keyframes nb-flash { 0% { background-color: rgba(255, 255, 255, 0); } 20% { background-color: rgba(255, 255, 255, .7); } 100% { background-color: rgba(94, 234, 212, 0); } }
.nb-evo__read { position: relative; display: grid; gap: var(--space-4); min-width: 0; }
.nb-evo__pills { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.nb-evo__pills .nb-type { padding: 5px 12px; font-size: 13px; }
.nb-evo__name { font: 700 40px/1 var(--font-display); letter-spacing: -0.045em; }
.nb-evo__desc { color: var(--ink-secondary); margin: 0; min-height: 4.8em; font: 500 16px/1.6 var(--font-body); }
.nb-evo__steps { display: flex; align-items: baseline; gap: var(--space-2); }
.nb-evo__steps b { font: 700 48px/1 var(--font-data); letter-spacing: -0.02em; }
.nb-evo__steps small { color: var(--ink-secondary); font: 700 14px var(--font-body); }
.nb-evo input[type=range] { width: 100%; height: 44px; margin: 0; background: transparent; -webkit-appearance: none; appearance: none; cursor: grab; }
.nb-evo input[type=range]::-webkit-slider-runnable-track { height: 12px; border-radius: 99px; background: linear-gradient(90deg, var(--mint) var(--p, 0%), var(--lab-200) var(--p, 0%)); }
.nb-evo input[type=range]::-moz-range-track { height: 12px; border-radius: 99px; background: var(--lab-200); }
.nb-evo input[type=range]::-moz-range-progress { height: 12px; border-radius: 99px; background: var(--mint); }
.nb-evo input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 32px; height: 32px; margin-top: -10px; border-radius: 50%; background: #fff; border: 5px solid var(--mint); box-shadow: 0 2px 6px rgba(0,0,0,.4); }
.nb-evo input[type=range]::-moz-range-thumb { width: 24px; height: 24px; border-radius: 50%; background: #fff; border: 5px solid var(--mint); }
.nb-evo__stages { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-2); }
.nb-stage { all: unset; box-sizing: border-box; cursor: pointer; display: grid; justify-items: center; gap: 2px; padding: 10px 4px 8px; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--lab-000); min-width: 0; }
.nb-stage img { width: 44px; height: 44px; object-fit: contain; }
.nb-stage span { font: 800 12px var(--font-body); color: var(--ink-secondary); white-space: nowrap; }
.nb-stage b { font: 700 11px var(--font-data); color: var(--ink-secondary); }
.nb-stage[aria-pressed="true"] { border-color: var(--mint); background: var(--mint-soft); }
.nb-stage[aria-pressed="true"] span { color: var(--ink); }
@media (max-width: 860px) { .nb-evo { grid-template-columns: 1fr; padding: var(--space-5); } }

.nb-dex { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: var(--space-3); }
.nb-tile { position: relative; display: grid; gap: 6px; justify-items: center; text-align: center; padding: var(--space-3) 10px 14px; border-radius: var(--radius-lg); background: var(--lab-100); border: 1px solid var(--line); overflow: hidden; }
.nb-tile__no { position: absolute; top: 10px; left: 12px; font: 700 11px var(--font-data); color: var(--ink-secondary); }
.nb-tile img { position: relative; width: 100%; max-width: 116px; height: auto; aspect-ratio: 1; object-fit: contain; margin-top: 8px; }
.nb-tile b { position: relative; font: 700 15px/1.1 var(--font-display); letter-spacing: -0.03em; color: var(--ink); }
.nb-tile__types { position: relative; display: flex; gap: 4px; flex-wrap: nowrap; justify-content: center; max-width: 100%; }
.nb-tile__types .nb-type { padding: 2px 7px; font-size: 10px; white-space: nowrap; }
/* Locked art is a pre-rendered silhouette (assets/creatures/locked/NNN.webp), so no CSS filter is needed. */
.nb-tile.is-locked b { font-family: var(--font-data); letter-spacing: .08em; color: var(--ink-secondary); }
.nb-tile.is-locked .nb-tile__types { visibility: hidden; }
.nb-chips { display: flex; gap: var(--space-2); overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; }
.nb-chip { all: unset; box-sizing: border-box; cursor: pointer; flex: none; padding: 8px 15px; border-radius: var(--radius-pill); font: 800 14px var(--font-body); color: var(--ink-secondary); background: var(--lab-100); border: 1px solid var(--line); }
.nb-chip[aria-pressed="true"] { color: var(--on-mint); background: var(--mint); border-color: var(--mint); }

.nb-tabs { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-7); align-items: center; }
.nb-tabs__list { display: grid; gap: var(--space-2); }
.nb-tab { all: unset; box-sizing: border-box; cursor: pointer; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: var(--space-4); align-items: start; padding: var(--space-4); border-radius: var(--radius-lg); border: 1px solid transparent; }
.nb-tab__ico { width: 40px; height: 40px; border-radius: var(--radius-sm); background: var(--lab-200); display: grid; place-items: center; }
.nb-tab__ico i { width: 22px; height: 22px; background: var(--ink-secondary); -webkit-mask-image: var(--icon); mask-image: var(--icon); -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
.nb-tab b { display: block; font: 700 18px/1.2 var(--font-display); letter-spacing: -0.03em; color: var(--ink); padding-top: 9px; }
.nb-tab p { display: none; margin: var(--space-2) 0 0; color: var(--ink-secondary); font: 500 15px/1.55 var(--font-body); }
.nb-tab[aria-selected="true"] { background: var(--lab-100); border-color: var(--line); }
.nb-tab[aria-selected="true"] .nb-tab__ico { background: var(--mint-soft); }
.nb-tab[aria-selected="true"] .nb-tab__ico i { background: var(--mint); }
.nb-tab[aria-selected="true"] p { display: block; }
.nb-tabs__device { position: relative; width: 250px; aspect-ratio: 720 / 1560; }
.nb-tabs__device > .nb-phone { position: absolute; inset: 0; max-width: none; visibility: hidden; }
.nb-tabs__device > .nb-phone.is-on { visibility: visible; }
@media (max-width: 760px) { .nb-tabs { grid-template-columns: 1fr; } .nb-tabs__device { justify-self: center; } }
/* The app's 9:16 Photo share card as exported (FeatureTabs device slot) */
.nb-tabs__device > .story { position: absolute; inset: 0; margin: auto; width: 100%; height: auto; aspect-ratio: 9 / 16; border-radius: 26px; overflow: hidden; box-shadow: var(--device); visibility: hidden; }
.nb-tabs__device > .story.is-on { visibility: visible; }
.nb-tabs__device > .story img { display: block; width: 100%; height: 100%; object-fit: cover; }


.nb-plan { position: relative; display: grid; gap: var(--space-3); align-content: start; padding: var(--space-6); border-radius: var(--radius-xl); background: var(--lab-100); border: 1px solid var(--line); }
.nb-plan.is-best { border-color: var(--mint); box-shadow: var(--lift); }
.nb-plan__tag { position: absolute; top: -13px; left: var(--space-5); padding: 5px 12px; border-radius: var(--radius-pill); background: var(--mint); color: var(--on-mint); font: 800 12px var(--font-body); }
.nb-plan h3 { margin: 0; font: 700 22px var(--font-display); letter-spacing: -0.03em; }
.nb-plan__price { display: flex; align-items: baseline; gap: var(--space-2); }
.nb-plan__price b { font: 800 44px/1 var(--font-display); letter-spacing: -0.05em; }
.nb-plan__price span, .nb-plan p { color: var(--ink-secondary); font: 600 15px/1.5 var(--font-body); margin: 0; }
.nb-plan p strong { color: var(--mint); }

.nb-egg { display: grid; justify-items: center; gap: var(--space-2); margin: 0; }
.nb-egg img { width: 100%; max-width: 140px; aspect-ratio: 1; object-fit: contain; filter: drop-shadow(0 16px 16px rgba(0,0,0,.5)); }

@media (prefers-reduced-motion: reduce) { .nb-evo__fill { transition: none; } .nb-evo__flash.is-go { animation: none; } }

/* Dex tiles as buttons + specimen detail (Nanobeasts.mountDex) */
/* Hover is paint-only on purpose (border + inset ring, no transform/opacity/filter changes): moving or scaling tiles creates
   GPU layers, and on this animation-heavy page Chrome can flash black rectangles when those layers miss a frame. */
button.nb-tile { font: inherit; color: inherit; width: 100%; cursor: pointer; }
button.nb-tile:hover { border-color: var(--mint); box-shadow: inset 0 0 0 1px var(--mint); }
button.nb-tile:focus-visible { outline: 2px solid var(--mint); outline-offset: 2px; }
html.nb-spec-open { overflow: hidden; }
.nb-spec { width: min(940px, calc(100vw - 32px)); max-width: none; max-height: min(780px, calc(100dvh - 32px)); padding: 0; border: 1px solid var(--line); border-radius: var(--radius-xl); background: var(--lab-100); color: var(--ink); overflow: hidden; }
.nb-spec::backdrop { background: rgb(0 0 0 / .82); }
.nb-spec[open] { animation: nb-spec-in .2s ease-out; }
@keyframes nb-spec-in { from { opacity: 0; } }
.nb-spec__panel { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; max-height: inherit; }
.nb-spec__head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-4); padding: 22px 24px 10px; }
.nb-spec__kicker, .nb-spec__label { font: 400 11px var(--font-lab); letter-spacing: .16em; text-transform: uppercase; color: var(--mint); }
.nb-spec__name { margin: 6px 0 0; font: 400 clamp(26px, 3vw, 36px)/1 var(--font-lab); letter-spacing: .04em; text-transform: uppercase; }
.nb-spec__close { all: unset; flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--mint-soft); color: var(--mint); cursor: pointer; }
.nb-spec__close svg { width: 20px; height: 20px; }
.nb-spec__close:focus-visible, .nb-spec__stage:focus-visible, .nb-spec__nav button:focus-visible { outline: 2px solid var(--mint); outline-offset: 2px; }
.nb-spec__body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); grid-auto-rows: max-content; gap: var(--space-5); padding: 12px 24px 22px; overflow: auto; overscroll-behavior: contain; }
.nb-spec__art { position: relative; margin: 0; aspect-ratio: 1; display: grid; place-items: center; border-radius: var(--radius-lg); border: 1px solid color-mix(in srgb, var(--mint) 40%, transparent); background: var(--lab-000); overflow: hidden; }
.nb-spec__art img { width: 76%; height: 76%; object-fit: contain; }
.nb-spec__art img.is-still { width: 54%; height: 54%; }
.nb-spec__info { display: grid; gap: var(--space-5); align-content: start; }
.nb-spec__types { display: flex; gap: 6px; flex-wrap: nowrap; }
.nb-spec__types .nb-type { padding: 5px 12px; font-size: 13px; }
.nb-type--unknown { background: var(--lab-200); color: var(--ink-secondary); font-family: var(--font-data); letter-spacing: .08em; }
.nb-spec__label { display: block; margin-bottom: 10px; }
.nb-spec__notes { padding: 16px 18px; border-radius: var(--radius-md); background: var(--lab-000); border: 1px solid var(--line); }
.nb-spec__notes p { margin: 0; font-size: 16px; line-height: 1.55; }
.nb-spec__line { display: flex; align-items: flex-start; gap: 2px; }
.nb-spec__arrow { flex: none; width: 10px; height: 10px; margin-top: 36px; border-top: 2px solid var(--ink-secondary); border-right: 2px solid var(--ink-secondary); transform: rotate(45deg); opacity: .55; }
.nb-spec__stage { all: unset; box-sizing: border-box; flex: 1 1 0; min-width: 0; display: grid; justify-items: center; gap: 4px; padding: 0 2px 4px; text-align: center; border-radius: var(--radius-md); cursor: pointer; }
.nb-spec__disc { width: 76px; height: 76px; display: grid; place-items: center; border-radius: 50%; border: 2px solid var(--line); background: var(--lab-000); }
.nb-spec__disc img { width: 80%; height: 80%; object-fit: contain; }
.nb-spec__stage b { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 13px/1.2 var(--font-display); letter-spacing: -0.02em; }
.nb-spec__stage small { font: 700 11px var(--font-data); color: var(--ink-secondary); }
.nb-spec__stage:hover .nb-spec__disc { border-color: color-mix(in srgb, var(--mint) 60%, var(--line)); }
.nb-spec__stage[aria-current="true"] .nb-spec__disc { border-color: var(--mint); box-shadow: 0 0 0 4px var(--mint-soft); }
.nb-spec__stage.is-locked .nb-spec__disc { background: var(--lab-000); }
.nb-spec__stage.is-locked b { font-family: var(--font-data); letter-spacing: .08em; color: var(--ink-secondary); }
.nb-spec.is-locked .nb-spec__art { border-color: var(--line); background: var(--lab-000); }
.nb-spec.is-locked .nb-spec__notes p { color: var(--ink-secondary); }
.nb-spec__cta { display: grid; justify-items: start; gap: 12px; padding: 16px 18px; border-radius: var(--radius-md); border: 1px dashed color-mix(in srgb, var(--mint) 40%, transparent); }
.nb-spec__cta[hidden] { display: none; }
.nb-spec__cta p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--ink-secondary); }
.nb-store--sm { min-height: 44px; padding: 6px 16px 6px 12px; }
.nb-store--sm svg { width: 20px; height: 20px; }
.nb-store--sm small { font-size: 10px; }
.nb-store--sm b { font-size: 16px; }
.nb-spec__nav { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); }
.nb-spec__nav button { all: unset; box-sizing: border-box; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 14px 24px; font: 700 14px var(--font-body); color: var(--ink-secondary); cursor: pointer; }
.nb-spec__nav button + button { justify-content: flex-end; border-left: 1px solid var(--line); }
.nb-spec__nav button:hover { color: var(--ink); background: var(--lab-200); }
.nb-spec__nav span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nb-spec__nav b { font: 700 12px var(--font-data); color: var(--mint); }
.nb-spec__nav svg { flex: none; width: 18px; height: 18px; }
@media (max-width: 720px) {
  .nb-spec { width: 100vw; max-height: 94dvh; margin: auto 0 0; border-radius: var(--radius-xl) var(--radius-xl) 0 0; border-bottom: 0; }
  .nb-spec__head { padding: 18px 16px 8px; }
  .nb-spec__body { grid-template-columns: 1fr; gap: var(--space-4); padding: 8px 16px 16px; }
  .nb-spec__art { aspect-ratio: 5 / 4; }
  .nb-spec__disc { width: 62px; height: 62px; }
  .nb-spec__arrow { margin-top: 29px; }
  .nb-spec__nav button { gap: 6px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) { .nb-spec[open] { animation: none; } }

/* Numbers use Figtree's tabular figures so counters don't jitter (the site no longer loads a mono font). */
.nb-evo__steps b, .nb-stage b, .nb-tile__no, .nb-spec__stage small, .nb-spec__nav b, .nb-evo .nb-pill { font-variant-numeric: tabular-nums; }