/* ==========================================================================
   Skanimalz — shared design system
   One stylesheet for every page so the browser caches it once.
   Mobile is the primary target: layout is built up from a 360px viewport.
   ========================================================================== */

:root{
  /* Surfaces — deeper than the old #0A0A14 so the neon reads hotter */
  --void:#07070F;
  --panel:#12111E;
  --panel-2:#1A1828;
  --edge:rgba(255,255,255,.08);
  --edge-2:rgba(255,255,255,.16);

  /* Brand */
  --volt:#29D6FF;
  --volt-deep:#1F8CFF;
  --surge:#9B3FFF;
  --surge-deep:#5A1FBF;
  --ember:#FF5A1F;
  --gold:#FFD23D;
  --toxic:#6FFF3D;

  /* Ink */
  --ink:#F4F2FB;
  --ink-2:#A7A2C2;
  /* Lifted from #655F86: that cleared 4.5:1 nowhere, and this token had drifted
     from "tiny mono label" into real sentences. #837DA4 passes AA on every
     surface here (4.51:1 on the lightest panel) while staying clearly tertiary. */
  --ink-3:#837DA4;

  /* Type */
  --display:'Baloo 2', system-ui, sans-serif;
  --body:'Inter', system-ui, -apple-system, sans-serif;
  --mono:'JetBrains Mono', ui-monospace, monospace;

  /* Metrics */
  --shell:1160px;
  --gutter:18px;
  --r-sm:10px;
  --r:16px;
  --r-lg:22px;
  --bar-h:60px;          /* mobile bottom tab bar */
  --top-h:76px;
}

@media (min-width:720px){ :root{ --gutter:28px; --top-h:84px; } }

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

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--top-h) + 12px); }

body{
  background:var(--void);
  color:var(--ink);
  font-family:var(--body);
  font-size:16px;
  line-height:1.55;
  overflow-x:hidden;
  /* Faint scan-grid: the world seen through the app's camera */
  background-image:
    linear-gradient(rgba(41,214,255,.030) 1px, transparent 1px),
    linear-gradient(90deg, rgba(155,63,255,.026) 1px, transparent 1px);
  background-size:72px 72px, 72px 72px;
  padding-bottom:calc(var(--bar-h) + env(safe-area-inset-bottom));
}
@media (min-width:860px){ body{ padding-bottom:0; } }

img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button,input,select,textarea{ font:inherit; color:inherit; }
button{ background:none; border:none; cursor:pointer; }

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

h1,h2,h3,h4{ font-family:var(--display); font-weight:800; line-height:1.08; letter-spacing:-.01em; }
h1{ font-size:clamp(2.05rem, 8.2vw, 4.1rem); }
h2{ font-size:clamp(1.6rem, 5.6vw, 2.6rem); }
h3{ font-size:clamp(1.08rem, 3.4vw, 1.35rem); }

::selection{ background:var(--volt); color:#05131A; }


/* --------------------------------------------------------------------------
   Legacy token bridge
   finds / explore / leaderboard / privacy were built before this design system
   and style themselves with an older set of variable names. Rather than rewrite
   four working pages, the old names are re-pointed at the new palette here, so
   those pages inherit the new surfaces, lines and text colours automatically
   and the site stops looking like two different sites bolted together.

   Their own :root blocks are deleted (they would otherwise win on specificity —
   same selector, later in the cascade). Everything else on those pages is left
   exactly as it was.
   -------------------------------------------------------------------------- */
:root{
  --bg:var(--void);
  --bg-1:var(--panel);
  --bg-2:var(--panel-2);
  --bg-3:#221F33;
  --line:var(--edge);
  --text:var(--ink);
  --text-dim:var(--ink-2);
  --text-faint:var(--ink-3);
  --fire:var(--ember);
  --shadow:var(--surge);
  --volt-2:var(--volt-deep);
}

/* Those pages set `body{ background:var(--bg) }` in their own <style>, which
   lands after this file and would drop the scan-grid the rest of the site has.
   Re-apply it so every page shares one backdrop. */
body{
  background-color:var(--void);
  background-image:
    linear-gradient(rgba(41,214,255,.030) 1px, transparent 1px),
    linear-gradient(90deg, rgba(155,63,255,.026) 1px, transparent 1px);
  background-size:72px 72px, 72px 72px;
}

/* --------------------------------------------------------------------------
   Layout primitives
   -------------------------------------------------------------------------- */
.shell{ width:100%; max-width:var(--shell); margin-inline:auto; padding-inline:var(--gutter); }

.sec{ padding-block:clamp(46px, 9vw, 92px); position:relative; }
.sec + .sec{ border-top:1px solid var(--edge); }
.sec--tight{ padding-block:clamp(34px, 6vw, 60px); }
.sec--lazy{ content-visibility:auto; contain-intrinsic-size:auto 900px; }

/* Section header. The mono label + barcode rule is the page's structural
   device — it reads as a scanner channel readout, which is what the app does. */
.sec-head{ margin-bottom:clamp(22px, 4vw, 38px); }
.chan{
  font-family:var(--mono); font-size:11.5px; font-weight:500;
  letter-spacing:.22em; text-transform:uppercase; color:var(--volt);
  display:flex; align-items:center; gap:12px; margin-bottom:12px;
}
.chan::after{
  content:""; flex:1; height:11px; min-width:40px;
  background-image:repeating-linear-gradient(90deg,
    currentColor 0 2px, transparent 2px 5px,
    currentColor 5px 6px, transparent 6px 11px,
    currentColor 11px 14px, transparent 14px 16px);
  opacity:.34;
}
.chan--surge{ color:var(--surge); }
.chan--gold{ color:var(--gold); }
.lede{ color:var(--ink-2); max-width:60ch; margin-top:12px; font-size:clamp(.95rem,2.6vw,1.06rem); }

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  min-height:48px; padding:0 22px; border-radius:999px;
  font-family:var(--display); font-weight:800; font-size:15.5px;
  border:1px solid transparent; white-space:nowrap;
  transition:transform .16s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
}
.btn:active{ transform:translateY(1px) scale(.985); }
.btn--go{
  background:linear-gradient(135deg, var(--volt), var(--volt-deep));
  color:#04121B; box-shadow:0 8px 26px -12px var(--volt);
}
.btn--go:hover{ box-shadow:0 12px 32px -10px var(--volt); }
.btn--hot{
  background:linear-gradient(135deg, var(--ember), var(--gold));
  color:#1B0C00; box-shadow:0 8px 26px -12px var(--ember);
}
.btn--ghost{ border-color:var(--edge-2); color:var(--ink); background:rgba(255,255,255,.03); }
.btn--ghost:hover{ border-color:var(--volt); color:var(--volt); }
.btn--sm{ min-height:40px; padding:0 16px; font-size:14px; }
.btn[disabled]{ opacity:.5; pointer-events:none; }

.btn-row{ display:flex; flex-wrap:wrap; gap:11px; }

/* --------------------------------------------------------------------------
   Top bar + drawer
   -------------------------------------------------------------------------- */
.topbar{
  position:sticky; top:0; z-index:60; height:var(--top-h);
  background:rgba(7,7,15,.82);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid var(--edge);
}
.topbar .shell{ display:flex; align-items:center; justify-content:space-between; height:100%; gap:12px; }
/* The wordmark IS the logo artwork — the old text-plus-gradient-square stand-in
   is gone. Sized by height so the aspect ratio can never be squashed, and given
   explicit width/height so the header doesn't reflow as it loads. */
/* Sized by width, not height. The wordmark is only ~54% of this artwork's
   height — the paw sits above it and the bolt tail below — so matching a 32px
   header height left "SKANIMALZ" itself under 18px and hard to read. Fixing the
   width instead makes the lettering the thing that stays legible, and the
   ascender/descender just use the header's vertical slack. */
/* Sized deliberately TALLER than --top-h so it overhangs the bar rather than
   being squeezed to fit inside it — nothing in this chain (.topbar/.shell/
   .brand) sets overflow:hidden, so the overhang just renders past the bar's
   edge over the page content, on top of it (the sticky header's own z-index
   carries its children with it). */
.brand{ display:inline-flex; align-items:center; flex:none; }
.brand img{
  width:210px; height:auto; display:block;
  filter:drop-shadow(0 2px 10px rgba(41,214,255,.28));
}
@media (min-width:400px){ .brand img{ width:235px; } }
@media (min-width:720px){ .brand img{ width:270px; } }
.brand:hover img{ filter:drop-shadow(0 2px 14px rgba(41,214,255,.5)); }

/* Footer lockup sits a little larger and calmer. */
.site-foot .brand img{ width:170px; filter:none; opacity:.95; }
.top-actions{ display:flex; align-items:center; gap:10px; }
.top-actions .btn{ min-height:40px; padding:0 16px; font-size:14px; }
@media (max-width:479px){ .top-actions .btn--hot{ display:none; } }

.hamburger{
  width:44px; height:44px; border:1px solid var(--edge-2); border-radius:12px;
  display:grid; place-items:center; gap:5px; align-content:center; flex:none;
}
.hamburger span{ display:block; width:19px; height:2px; background:var(--ink); border-radius:2px; transition:transform .25s, opacity .18s; }
.hamburger[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.hamburger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.hamburger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

.scrim{
  position:fixed; inset:0; z-index:70; background:rgba(4,4,10,.66);
  backdrop-filter:blur(3px); opacity:0; pointer-events:none; transition:opacity .22s ease;
}
.scrim.is-open{ opacity:1; pointer-events:auto; }

.drawer{
  position:fixed; z-index:80; top:0; right:0; bottom:0; width:min(320px, 86vw);
  background:var(--panel); border-left:1px solid var(--edge);
  transform:translateX(100%); transition:transform .3s cubic-bezier(.32,.72,0,1);
  display:flex; flex-direction:column; overflow-y:auto; overscroll-behavior:contain;
  padding-bottom:env(safe-area-inset-bottom);
}
.drawer.is-open{ transform:none; }
.drawer-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px var(--gutter); border-bottom:1px solid var(--edge);
  font-family:var(--mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-3);
}
.drawer-close{ width:40px; height:40px; border-radius:10px; border:1px solid var(--edge); display:grid; place-items:center; color:var(--ink-2); font-size:18px; }
.drawer-nav{ padding:8px 0; }
.drawer-nav a{
  display:flex; align-items:center; gap:12px; min-height:50px;
  padding:0 var(--gutter); color:var(--ink-2); font-weight:600; font-size:15.5px;
  border-left:3px solid transparent;
}
.drawer-nav a:hover,.drawer-nav a[aria-current="page"]{ background:rgba(255,255,255,.045); color:var(--ink); border-left-color:var(--volt); }
/* Emoji glyphs render a touch larger than the old geometric characters did,
   and ignore `color`, so these are sized down slightly and given a fixed
   line-height to keep every row the same height. */
.drawer-nav a .ic{ width:24px; text-align:center; font-size:15px; line-height:1; flex:none; }
.drawer-nav .grp{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink-3); padding:16px var(--gutter) 6px;
}
.drawer-foot{ margin-top:auto; padding:18px var(--gutter) 26px; border-top:1px solid var(--edge); }

/* --------------------------------------------------------------------------
   Bottom tab bar (phones) — the site navigates like the app does
   -------------------------------------------------------------------------- */
.tabbar{
  position:fixed; left:0; right:0; bottom:0; z-index:55;
  height:calc(var(--bar-h) + env(safe-area-inset-bottom));
  padding-bottom:env(safe-area-inset-bottom);
  display:grid; grid-template-columns:repeat(5,1fr);
  background:rgba(10,9,20,.92); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  border-top:1px solid var(--edge);
}
.tabbar a{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  font-family:var(--mono); font-size:9.5px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-3); position:relative;
}
.tabbar a .ic{ font-size:17px; line-height:1; }
.tabbar a[aria-current="page"]{ color:var(--volt); }
.tabbar a[aria-current="page"]::before{
  content:""; position:absolute; top:0; left:26%; right:26%; height:2px;
  background:var(--volt); border-radius:0 0 3px 3px; box-shadow:0 0 10px var(--volt);
}
@media (min-width:860px){ .tabbar{ display:none; } }

/* --------------------------------------------------------------------------
   SIGNATURE — scan-morph
   A cyan beam sweeps down the concept art and leaves the in-game vector
   behind it. It is the product's whole premise as one interaction.
   -------------------------------------------------------------------------- */
.scan{
  --p:0;                       /* 0 = concept art, 100 = in-game vector */
  position:relative; display:block; width:100%; aspect-ratio:4/5;
  background:
    radial-gradient(ellipse at 50% 42%, rgba(41,214,255,.10), transparent 62%),
    var(--panel);
  border-radius:var(--r); overflow:hidden; isolation:isolate;
  border:1px solid var(--edge);
}
.scan > img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:contain; padding:6%;
}
.scan-b{
  -webkit-mask-image:linear-gradient(to bottom, #000 calc(var(--p) * 1% - 3%), transparent calc(var(--p) * 1% + 6%));
          mask-image:linear-gradient(to bottom, #000 calc(var(--p) * 1% - 3%), transparent calc(var(--p) * 1% + 6%));
}
/* Complementary mask on the concept art, fading it out from the top as the
   beam passes — without this, .scan-a stayed fully painted underneath
   forever (JPGs have no alpha, so nothing ever hid it). The vector art's
   own aspect ratio (many are landscape) letterboxes inside this card with
   REAL transparent gaps, unlike the JPG — so those gaps let the untouched,
   mismatched concept art show through around/behind the vector instead of
   a clean swap once "in game" is fully revealed. Masking scan-a to the
   inverse of scan-b's reveal means at --p:100 the concept art is fully
   hidden everywhere (not just wherever the vector happened to be opaque),
   so the letterboxed gaps show the card's own neutral background instead.
*/
.scan-a{
  -webkit-mask-image:linear-gradient(to bottom, transparent calc(var(--p) * 1% - 3%), #000 calc(var(--p) * 1% + 6%));
          mask-image:linear-gradient(to bottom, transparent calc(var(--p) * 1% - 3%), #000 calc(var(--p) * 1% + 6%));
}
/* A missing/hidden vector (no-vector state) has nothing to swap to, so the
   concept art must stay fully visible rather than following the mask above
   toward transparent. */
.scan.no-vector .scan-a{ mask-image:none; -webkit-mask-image:none; }
/* Interference bands only while the beam is travelling */
.scan-noise{
  position:absolute; inset:0; pointer-events:none; opacity:0;
  background:repeating-linear-gradient(0deg, rgba(41,214,255,.14) 0 1px, transparent 1px 4px);
  mix-blend-mode:screen; transition:opacity .2s ease;
}
.scan.is-busy .scan-noise{ opacity:1; }
.scan-beam{
  position:absolute; left:0; right:0; top:calc(var(--p) * 1%); height:2px;
  background:linear-gradient(90deg, transparent, var(--volt) 12%, #fff 50%, var(--volt) 88%, transparent);
  box-shadow:0 0 18px 3px rgba(41,214,255,.75);
  opacity:0; transition:opacity .18s ease; pointer-events:none;
}
.scan.is-busy .scan-beam{ opacity:1; }
.scan-tag{
  position:absolute; left:9px; top:9px; z-index:3;
  font-family:var(--mono); font-size:9.5px; letter-spacing:.14em; text-transform:uppercase;
  padding:5px 9px; border-radius:999px; background:rgba(4,4,12,.72);
  border:1px solid var(--edge-2); color:var(--ink-2); transition:color .3s, border-color .3s;
}
.scan.is-vector .scan-tag{ color:var(--volt); border-color:rgba(41,214,255,.55); }
.scan-hint{
  position:absolute; right:9px; bottom:9px; z-index:3;
  font-size:11px; padding:6px 11px; border-radius:999px;
  background:rgba(4,4,12,.72); border:1px solid var(--edge); color:var(--ink-2);
}
button.scan:hover .scan-hint{ color:var(--volt); border-color:rgba(41,214,255,.5); }
button.scan{ padding:0; text-align:left; }

/* If the in-game vector 404s, hide the broken image rather than letting the
   browser paint its alt text across the concept art, and say so honestly. */
.scan.no-vector .scan-b{ display:none; }
.scan.no-vector .scan-beam,
.scan.no-vector .scan-noise{ display:none; }
.scan.no-vector .scan-tag{ color:var(--ink-3); }
.scan.no-vector .scan-hint{ color:var(--ink-3); border-color:var(--edge); }

@media (prefers-reduced-motion: reduce){
  .scan-beam,.scan-noise{ display:none; }
}

/* --------------------------------------------------------------------------
   Horizontal snap rail — replaces tall stacked grids on phones
   -------------------------------------------------------------------------- */
.rail{
  display:grid; grid-auto-flow:column; grid-auto-columns:78%;
  gap:12px; overflow-x:auto; scroll-snap-type:x mandatory;
  padding-inline:var(--gutter); margin-inline:calc(var(--gutter) * -1);
  padding-bottom:8px; scrollbar-width:none; overscroll-behavior-x:contain;
}
.rail::-webkit-scrollbar{ display:none; }
.rail > *{ scroll-snap-align:center; }
@media (min-width:560px){ .rail{ grid-auto-columns:44%; } }
@media (min-width:860px){
  .rail{
    grid-auto-flow:row; grid-auto-columns:auto;
    grid-template-columns:repeat(4,1fr); overflow:visible;
    padding-inline:0; margin-inline:0; gap:18px;
  }
}
.rail-note{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-3); margin-top:10px;
}
@media (min-width:860px){ .rail-note{ display:none; } }

/* --------------------------------------------------------------------------
   Cards
   -------------------------------------------------------------------------- */
.card{
  background:var(--panel); border:1px solid var(--edge); border-radius:var(--r-lg);
  overflow:hidden; display:flex; flex-direction:column;
}
.card-body{ padding:15px 16px 17px; }
.card-body h3{ margin-bottom:2px; }
.card-sub{ font-size:13px; color:var(--ink-2); }

.chips{ display:flex; flex-wrap:wrap; gap:6px; margin-top:11px; }
.chip{
  font-family:var(--mono); font-size:10px; letter-spacing:.06em;
  padding:4px 9px; border-radius:999px; border:1px solid var(--edge-2); color:var(--ink-2);
}

/* --------------------------------------------------------------------------
   Tab deck — folds five long sections into one panel
   -------------------------------------------------------------------------- */
.deck-tabs{
  display:flex; gap:7px; overflow-x:auto; scrollbar-width:none;
  padding-inline:var(--gutter); margin-inline:calc(var(--gutter) * -1);
  padding-bottom:2px; margin-bottom:18px; overscroll-behavior-x:contain;
}
.deck-tabs::-webkit-scrollbar{ display:none; }
.deck-tab{
  flex:none; min-height:42px; padding:0 16px; border-radius:999px;
  border:1px solid var(--edge-2); color:var(--ink-2);
  font-family:var(--display); font-weight:700; font-size:14.5px;
  display:inline-flex; align-items:center; gap:7px;
  transition:color .2s, border-color .2s, background .2s;
}
.deck-tab[aria-selected="true"]{
  color:#04121B; background:var(--volt); border-color:var(--volt);
  box-shadow:0 6px 20px -10px var(--volt);
}
.deck-panel{ display:none; animation:fadeup .34s ease both; }
.deck-panel.is-active{ display:block; }
@keyframes fadeup{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce){ .deck-panel{ animation:none; } }

/* --------------------------------------------------------------------------
   Reveal on scroll
   -------------------------------------------------------------------------- */
.rv{ opacity:0; transform:translateY(16px); transition:opacity .55s ease, transform .55s cubic-bezier(.22,.7,.25,1); }
.rv.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ .rv{ opacity:1; transform:none; transition:none; } }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.site-foot{ border-top:1px solid var(--edge); padding:34px 0 40px; background:var(--panel); text-align:left; }
.foot-grid{ display:grid; gap:22px; }
.foot-grid > *{ min-width:0; }
@media (min-width:720px){ .foot-grid{ grid-template-columns:1.4fr 1fr 1fr; gap:34px; } }
.site-foot .brand{ margin-bottom:12px; }
.site-foot h4{ font-family:var(--mono); font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-3); font-weight:500; margin-bottom:11px; }
.foot-links{ display:flex; flex-direction:column; gap:9px; }
.foot-links a{ color:var(--ink-2); font-size:14.5px; min-height:40px; display:flex; align-items:center; }
.foot-links a:hover{ color:var(--volt); }
.foot-fine{ margin-top:26px; padding-top:18px; border-top:1px solid var(--edge); color:var(--ink-3); font-size:12.5px; display:flex; flex-wrap:wrap; align-items:center; gap:10px 18px; }
.foot-fine a{ min-height:34px; display:inline-flex; align-items:center; }

/* --------------------------------------------------------------------------
   Small shared bits
   -------------------------------------------------------------------------- */
.mono{ font-family:var(--mono); }
.visually-hidden{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.pill-note{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-2); border:1px solid var(--edge-2); border-radius:999px; padding:7px 13px;
}
.dot{ width:7px; height:7px; border-radius:50%; background:var(--toxic); box-shadow:0 0 9px var(--toxic); flex:none; }

/* Version stamp in the drawer footer. Deliberately small and dim — it's a
   deployment check, not a design element. Because every page has its own copy
   of the nav markup, this is what makes a partially-uploaded site obvious:
   open the menu on any page and it tells you which version THAT page is. */
.drawer-ver{
  font-family:var(--mono); font-size:10px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-3); opacity:.55;
  text-align:center; padding-bottom:10px;
}

/* ----------------------------------------------------------- Play Store badge
   Google's official "Get it on Google Play" badge. Their brand guidelines say
   the artwork must not be altered, recoloured or redrawn, so the only thing
   done to the supplied asset was cropping its transparent margin off — the
   badge itself is untouched. The required clear space (a quarter of the badge
   height on every side) is provided here as CSS margin instead, which keeps
   the image file honest and the layout tight.

   No hover filter, scale or opacity change on purpose: those count as altering
   the badge. Only the focus ring, which sits outside it. */
.play-badge{
  display:inline-block; line-height:0;
  margin:calc(71px / 4) calc(71px / 4) calc(71px / 4) 0;
}
.play-badge img{ display:block; width:240px; max-width:100%; height:auto; }
.play-badge:focus-visible{ outline:2px solid var(--volt); outline-offset:4px; border-radius:10px; }

/* Row wrapper so the badge sits flush left with the panel text above it. */
.badge-row{ display:flex; flex-wrap:wrap; align-items:center; margin-top:4px; }

@media (max-width:380px){
  .play-badge img{ width:200px; }
}