/* LIVE / IN DEVELOPMENT — live.mitdverse.com
   Path: public_html/MITD/v5/scenes/live/style.css
   Standalone; shares no rules with the AI scene or the v5 shell. */

:root{
  --lv-bg:#05060d;
  --lv-panel:#0d1020;
  --lv-panel-2:#121734;
  --lv-line:rgba(255,255,255,.10);
  --lv-line-warm:rgba(255,255,255,.18);
  --lv-ink:#e8ecff;
  --lv-dim:#98a1c2;
  --lv-faint:#6a7291;
  --lv-accent:#9b5cff;
  --lv-cyan:#3ad8ff;
  --lv-gold:#ffb13a;
}

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

body.lvBody{
  background:var(--lv-bg);
  color:var(--lv-ink);
  font:16px/1.65 system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
  overflow-x:hidden;
}

.lvSr{
  position:absolute; width:1px; height:1px;
  margin:-1px; padding:0; border:0;
  clip-path:inset(50%); overflow:hidden; white-space:nowrap;
}

/* The admin way in. Over the hero rather than above it, so it costs the page
   no vertical space -- and quiet, because it is furniture for one person on a
   page built for everybody else. */
.lvBar{
  position:absolute; top:0; right:0; z-index:3;
  padding:16px 24px 0;
}
/* Over a photograph, so it carries its own solid backdrop rather than hoping
   the hero behind it is dark. The first version was a hairline on glass and
   was genuinely hard to find. */
.lvBar__in{
  padding:8px 18px; border-radius:999px;
  border:1px solid rgba(255,255,255,.30);
  background:rgba(9,12,24,.82);
  backdrop-filter:blur(8px);
  box-shadow:0 6px 22px rgba(0,0,0,.45);
  color:#fff; text-decoration:none;
  font-size:13px; font-weight:650; letter-spacing:.06em;
  transition:background .16s, border-color .16s;
}
.lvBar__in:hover{ background:var(--lv-cyan); color:#04131a; border-color:var(--lv-cyan); }
.lvBar__in:focus-visible{ outline:2px solid var(--lv-cyan); outline-offset:2px; }

/* The account disclosure, for someone signed in. Over a photographic hero, so
   it carries its own backdrop rather than relying on what is behind it. */
.lvAcct{ position:relative; }
.lvAcct__btn{
  display:inline-flex; align-items:center; gap:5px; cursor:pointer;
  padding:5px 9px; border-radius:999px;
  border:1px solid rgba(255,255,255,.22);
  background:rgba(5,6,13,.42); backdrop-filter:blur(6px);
  color:#c3cbe6; font:inherit; line-height:1;
}
.lvAcct__btn:hover{ color:#fff; border-color:rgba(255,255,255,.44); }
.lvAcct__btn:focus-visible{ outline:2px solid var(--lv-cyan); outline-offset:2px; }
.lvAcct__caret{ font-size:10px; }

.lvAcct__menu{
  position:absolute; top:calc(100% + 8px); right:0; z-index:50;
  min-width:190px; padding:7px;
  border:1px solid var(--lv-line-warm); border-radius:11px;
  background:#090c18; box-shadow:0 18px 44px rgba(0,0,0,.6);
  display:flex; flex-direction:column; gap:1px;
}
/* [hidden] loses to the display above. This is the rule that closes it. */
.lvAcct__menu[hidden]{ display:none; }
.lvAcct__who{
  padding:7px 10px 8px; color:var(--lv-faint);
  font-size:11px; letter-spacing:.08em; text-transform:uppercase;
}
.lvAcct__menu a{
  padding:9px 10px; border-radius:7px;
  color:var(--lv-ink); text-decoration:none; font-size:13px;
}
.lvAcct__menu a:hover{ background:rgba(255,255,255,.06); }
.lvAcct__menu a:focus-visible{ outline:2px solid var(--lv-cyan); outline-offset:-2px; }
.lvAcct__sep{ height:1px; margin:4px 2px; background:var(--lv-line); }
.lvAcct__out{ color:var(--lv-dim) !important; }

/* ---------------------------------------------------------------------------
   HERO
   Full-bleed image with the words over it. The gradient underneath is not a
   placeholder for a missing file -- it is also what keeps the text readable
   once a file IS there, because an image whose top-left happens to be bright
   would otherwise eat the heading.
   --------------------------------------------------------------------------- */
.lvHero{
  position:relative; isolation:isolate;
  display:flex; align-items:flex-end;
  min-height:clamp(320px,52vw,560px);
  padding:0 24px 44px;
  overflow:hidden;
  border-bottom:1px solid var(--lv-line);
  background:
    radial-gradient(900px 600px at 18% 10%, rgba(155,92,255,.30), transparent 62%),
    radial-gradient(760px 520px at 84% 24%, rgba(58,216,255,.20), transparent 64%),
    var(--lv-panel);
}
.lvHero__img{
  position:absolute; inset:0; z-index:-2;
  width:100%; height:100%; object-fit:cover;
}
/* Sits between the image and the words. */
.lvHero::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg,
    rgba(5,6,13,.30) 0%, rgba(5,6,13,.55) 52%, rgba(5,6,13,.92) 100%);
}
.lvHero__in{ max-width:1200px; margin:0 auto; width:100%; }

.lvEyebrow{
  margin:0 0 14px; color:var(--lv-cyan);
  font-size:12px; letter-spacing:.30em; text-transform:uppercase;
}
.lvTitle{
  margin:0 0 16px;
  font-size:clamp(34px,6.4vw,62px); line-height:1.04; letter-spacing:-.025em;
  text-shadow:0 2px 24px rgba(0,0,0,.6);
}
.lvLede{
  margin:0; max-width:58ch;
  color:#cdd5f0; font-size:clamp(15px,2.2vw,18px);
  text-shadow:0 1px 14px rgba(0,0,0,.6);
}

.lvWrap{ max-width:1200px; margin:0 auto; padding:52px 24px 0; }

/* ---------------------------------------------------------------------------
   SECTIONS
   Each carries its own accent, set once here and used by the heading rule, the
   badge and the card's hover edge. Live is cyan, in development is gold --
   the two bands in the concept art.
   --------------------------------------------------------------------------- */
.lvSec{ margin:0 0 64px; scroll-margin-top:84px; --lv-sec:var(--lv-cyan); }
.lvSec--dev{ --lv-sec:var(--lv-gold); }

.lvSecHead{
  display:flex; align-items:baseline; gap:16px; flex-wrap:wrap;
  padding:0 0 16px; margin:0 0 26px;
  border-bottom:1px solid var(--lv-line);
}
.lvSecName{
  margin:0; font-size:14px; font-weight:700;
  letter-spacing:.26em; text-transform:uppercase;
  color:var(--lv-sec);
}
.lvSecBlurb{ margin:0; color:var(--lv-faint); font-size:13px; }

/* Only ever seen while editing: a visitor is not shown an empty section. */
.lvSecNone{
  margin:0; padding:30px 24px;
  border:1px dashed var(--lv-line); border-radius:14px;
  color:var(--lv-faint); font-size:14px; text-align:center;
}

/* FOUR ACROSS, which is the whole point of the layout: each band is a row of
   four. The floor has to be small enough that four fit, or the fourth card is
   stranded alone on a second row -- which is what 260px did at the 1152px
   content width (4x260 + 3x18 = 1094 fits, but only just, and 1120px of wrap
   left 1072). 250 gives 1054 with room to spare, and five would need 1322, so
   it can never become five.
   auto-fit then gets two on a tablet and one on a phone with no media query. */
.lvGrid{
  display:grid; gap:18px;
  grid-template-columns:repeat(auto-fit,minmax(min(250px,100%),1fr));
}

.lvCard{
  /* position: relative is the containing block for the stretched link below.
     It is unconditional ON PURPOSE: hang it off .is-linked and a card that
     later gains a link without this rule would resolve the overlay against
     the initial containing block instead -- one card's anchor stretched over
     the whole page. Same trap as the DSD path cards. */
  position:relative;
  display:flex; flex-direction:column;
  background:var(--lv-panel);
  border:1px solid var(--lv-line);
  border-radius:15px;
  overflow:hidden;
  transition:border-color .18s, transform .18s, box-shadow .18s;
}
.lvCard:hover{
  border-color:color-mix(in srgb, var(--lv-sec) 52%, transparent);
  transform:translateY(-3px);
  box-shadow:0 20px 48px rgba(0,0,0,.52);
}

.lvShot{
  position:relative;
  aspect-ratio:16/9;
  /* flex:0 0 auto and min-height:0 are what MAKE the aspect-ratio hold.
     .lvCard is a column flex container, and a flex item's default
     min-height:auto resolves to its CONTENT's intrinsic height -- so a
     portrait photo forced this box to the photo's own shape and every card in
     the row started its text at a different line. Four cards, four heights,
     stepping down the row. The ratio was never being applied; it was being
     overridden by a default nobody writes down. */
  flex:0 0 auto;
  min-height:0;
  overflow:hidden;
  background:var(--lv-panel-2);
  border-bottom:1px solid var(--lv-line);
}
.lvShot__img{ display:block; width:100%; height:100%; object-fit:cover; }
.lvShot.is-empty{
  background:
    linear-gradient(118deg, rgba(155,92,255,.34) 0%, rgba(155,92,255,0) 56%),
    linear-gradient(292deg, rgba(58,216,255,.22) 0%, rgba(58,216,255,0) 54%),
    var(--lv-panel-2);
}
/* Three variants so eight empty slots do not read as one repeated tile. */
.lvCard:nth-child(3n+2) .lvShot.is-empty{
  background:
    linear-gradient(64deg,  rgba(58,216,255,.26) 0%, rgba(58,216,255,0) 58%),
    linear-gradient(248deg, rgba(155,92,255,.28) 0%, rgba(155,92,255,0) 52%),
    var(--lv-panel-2);
}
.lvCard:nth-child(3n+3) .lvShot.is-empty{
  background:
    linear-gradient(160deg, rgba(155,92,255,.22) 0%, rgba(155,92,255,0) 50%),
    linear-gradient(20deg,  rgba(58,216,255,.18) 0%, rgba(58,216,255,0) 60%),
    var(--lv-panel-2);
}

.lvCard__body{ display:flex; flex-direction:column; gap:8px; padding:18px 18px 20px; flex:1 1 auto; }
.lvCard__name{ margin:0; font-size:17px; font-weight:680; letter-spacing:-.01em; }

/* THE WHOLE CARD IS THE LINK, and there is only one of them.
   The anchor is on the heading, so its accessible name is the card's name --
   rather than a second "read more" link that announces nothing. */
.lvCard__lnk{ color:inherit; text-decoration:none; }
.lvCard.is-linked .lvCard__lnk::after{ content:""; position:absolute; inset:0; }
.lvCard.is-linked:hover .lvCard__name{ color:var(--lv-sec); }
.lvCard:has(.lvCard__lnk:focus-visible){ outline:2px solid var(--lv-sec); outline-offset:3px; }

.lvCard__blurb{ margin:0; color:var(--lv-dim); font-size:14px; }

.lvClose{
  margin:12px 0 0; padding:40px 30px 44px;
  border:1px solid var(--lv-line); border-radius:16px;
  background:var(--lv-panel); text-align:center;
}
.lvClose h2{ margin:0 0 10px; font-size:21px; font-weight:680; }
.lvClose p{ margin:0 auto 24px; max-width:56ch; color:var(--lv-dim); font-size:15px; }
.lvCloseLinks{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }

.lvBtn{
  display:inline-flex; align-items:center;
  padding:13px 26px; border-radius:11px;
  background:linear-gradient(92deg,var(--lv-accent),#6f3ce0);
  color:#fff; text-decoration:none; font-weight:640; font-size:15px;
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 10px 28px rgba(155,92,255,.30);
  transition:transform .16s, box-shadow .16s;
}
.lvBtn:hover{ transform:translateY(-2px); box-shadow:0 16px 38px rgba(155,92,255,.44); }
.lvBtn:focus-visible{ outline:2px solid var(--lv-cyan); outline-offset:3px; }
.lvBtn--quiet{
  background:transparent; box-shadow:none;
  border-color:var(--lv-line-warm); color:var(--lv-ink);
}
.lvBtn--quiet:hover{ border-color:var(--lv-cyan); box-shadow:none; }

/* The page ends here. There is no footer line: this page is the platform's,
   not any one reality's, which is the same reason the AI scene lost its. */
.lvWrap{ padding-bottom:64px; }

/* ===========================================================================
   EDITING — only ever rendered for a signed-in admin.
   Deliberately plainer than the page it sits on: dressing the tooling in the
   same accents as the content makes it harder to tell which is which.
   =========================================================================== */
.lvEd{ position:relative; z-index:2; max-width:1120px; margin:18px auto 0; padding:0 24px; }
.lvEdBar{
  display:flex; align-items:center; justify-content:space-between;
  gap:14px; flex-wrap:wrap; padding:12px 16px;
  border:1px solid rgba(58,216,255,.30); border-radius:12px;
  background:rgba(58,216,255,.06);
}
.lvEdWho{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:0; }
.lvEdBadge{
  padding:3px 10px; border-radius:999px;
  background:var(--lv-cyan); color:#04131a;
  font-size:10px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
}
.lvEdHint{ color:var(--lv-dim); font-size:13px; }
.lvEdLnk{
  color:var(--lv-ink); font-size:13px; font-weight:600;
  text-decoration:none; border-bottom:1px solid var(--lv-line-warm);
}
.lvEdLnk:hover{ border-bottom-color:var(--lv-cyan); }

/* THE MESSAGE FOLLOWS YOU. Every save redirects to an anchor, which scrolls
   the top of the page out of view -- in flow, this would explain what happened
   to nobody, and a working save would be indistinguishable from a dead button.
   Fixed, and above the panel, so it is on screen wherever the anchor put you.
   It clears on the next load: read-and-cleared server-side, so there is
   nothing to dismiss and nothing that can outstay its news. */
.lvEdFlash{
  position:fixed; z-index:60;
  top:12px; left:12px; right:12px;
  max-width:680px; margin:0 auto;
  padding:11px 15px;
  border:1px solid rgba(58,216,255,.34); border-radius:10px;
  background:#0b1a24; box-shadow:0 14px 40px rgba(0,0,0,.6);
  color:var(--lv-ink); font-size:14px;
}
.lvEdFlash--warn{
  border-color:rgba(255,177,58,.42); background:#1d1507; color:var(--lv-gold);
}
.lvEdJumpTo{ margin-left:8px; color:var(--lv-cyan); font-weight:600; }
/* The bar steps out from under it. A body class rather than :has(), so the gap
   is there whenever the message is and never depends on selector support. */
body.is-flash .lvEd{ padding-top:58px; }

.lvEdWarn{
  max-width:1120px; margin:18px auto 0; padding:11px 15px;
  border:1px solid rgba(255,177,58,.42); border-radius:10px;
  background:rgba(255,177,58,.09); color:var(--lv-gold); font-size:14px;
}

.lvJump{ display:flex; gap:8px; flex-wrap:wrap; margin:12px 0 0; }
.lvJump__lnk{
  display:inline-flex; align-items:center; gap:7px;
  padding:7px 13px; border-radius:999px;
  border:1px solid var(--lv-line); background:var(--lv-panel);
  color:var(--lv-dim); text-decoration:none;
  font-size:12px; font-weight:600; letter-spacing:.06em;
}
.lvJump__lnk:hover{ color:var(--lv-ink); border-color:var(--lv-line-warm); }
.lvJump__lnk:focus-visible{ outline:2px solid var(--lv-cyan); outline-offset:2px; }
.lvJump__n{
  min-width:18px; padding:1px 5px; border-radius:999px;
  background:rgba(255,255,255,.07); color:var(--lv-faint);
  font-size:11px; text-align:center;
}

.lvTools{
  display:flex; align-items:center; gap:7px; flex-wrap:wrap;
  margin:0; padding:12px 18px 16px;
  border-top:1px solid var(--lv-line);
}
.lvTools__grp{ display:flex; align-items:center; gap:5px; margin:0; }
.lvTools__pos{ color:var(--lv-faint); font-size:11px; letter-spacing:.08em; }

.lvTool{
  appearance:none; cursor:pointer; text-decoration:none;
  display:inline-flex; align-items:center;
  padding:6px 11px; border-radius:8px;
  border:1px solid var(--lv-line-warm);
  background:var(--lv-panel-2); color:var(--lv-ink);
  font:inherit; font-size:12px; font-weight:600; line-height:1.4;
}
.lvTool:hover:not(:disabled){ border-color:var(--lv-cyan); background:rgba(58,216,255,.10); }
.lvTool:focus-visible{ outline:2px solid var(--lv-cyan); outline-offset:2px; }
/* Disabled rather than removed at the ends: a control that vanishes changes
   the width of the row as a card walks down it, and the next click lands on
   whatever slid under the pointer. */
.lvTool:disabled{ opacity:.34; cursor:default; }
.lvTool--edit{
  border-color:rgba(58,216,255,.38); background:rgba(58,216,255,.08); color:var(--lv-cyan);
}
.lvTool--edit.is-open{ background:var(--lv-cyan); color:#04131a; border-color:var(--lv-cyan); }

/* While editing, the card lift gets in the way -- the thing you are about to
   click moves as the pointer arrives. */
body.is-editing .lvCard:hover{ transform:none; box-shadow:none; }

/* ---------------------------------------------------------------------------
   THE PANEL
   Fixed down the right, with every card's form inside it and only the open one
   showing. Space is reserved for the whole editing session rather than only
   while it is open: a page that reflows every time you open a panel moves the
   card you were about to click next.
   --------------------------------------------------------------------------- */
.lvPanel{
  position:fixed; inset:0 0 0 auto; z-index:40;
  width:420px; max-width:100%;
  display:flex; flex-direction:column;
  overflow-y:auto; overscroll-behavior:contain;
  padding:22px 22px 40px;
  background:#090c18;
  border-left:1px solid var(--lv-line-warm);
  box-shadow:-24px 0 60px rgba(0,0,0,.55);
}
/* [hidden] loses to the display above, every time. This is the rule that
   actually closes the panel. */
.lvPanel[hidden]{ display:none; }
.lvPanel__form[hidden], .lvPanel__clear[hidden]{ display:none; }

.lvPanel__head{
  display:flex; align-items:flex-start; justify-content:space-between; gap:12px;
  margin:0 0 2px;
}
.lvPanel__title{ margin:0; font-size:18px; font-weight:680; letter-spacing:-.01em; }
.lvPanel__x{
  flex:0 0 auto;
  display:inline-flex; align-items:center; justify-content:center;
  width:30px; height:30px; border-radius:8px;
  border:1px solid var(--lv-line); background:var(--lv-panel-2);
  color:var(--lv-dim); text-decoration:none; font-size:17px; line-height:1;
}
.lvPanel__x:hover{ color:var(--lv-ink); border-color:var(--lv-line-warm); }
.lvPanel__where{ margin:0 0 18px; color:var(--lv-faint); font-size:12px; }
.lvPanel__where code{ color:var(--lv-dim); }

.lvPanel__f{ display:flex; flex-direction:column; gap:6px; margin:0 0 16px; }
.lvPanel__lbl{
  color:var(--lv-ink); font-size:12px; font-weight:650;
  letter-spacing:.10em; text-transform:uppercase;
}
.lvPanel__hint{ color:var(--lv-faint); font-size:12px; line-height:1.5; }
.lvPanel__hint--warn{ color:var(--lv-gold); }
.lvPanel__hint code{ color:var(--lv-dim); }

.lvPanel__in{
  width:100%; padding:10px 12px; border-radius:9px;
  border:1px solid var(--lv-line-warm);
  background:var(--lv-bg); color:var(--lv-ink);
  font:inherit; font-size:14px; line-height:1.55; resize:vertical;
}
.lvPanel__in:focus-visible{ outline:2px solid var(--lv-cyan); outline-offset:1px; }

.lvPanel__img{
  display:flex; flex-direction:column; gap:8px;
  margin:0 0 18px; padding:14px;
  border:1px solid var(--lv-line); border-radius:11px;
  background:var(--lv-panel);
}
.lvPanel__thumb{ display:block; width:100%; height:auto; border-radius:8px; border:1px solid var(--lv-line); }
.lvPanel__file{ width:100%; font:inherit; font-size:12px; color:var(--lv-dim); }
.lvPanel__file::file-selector-button{
  margin-right:10px; padding:7px 12px; border-radius:8px;
  border:1px solid var(--lv-line-warm);
  background:var(--lv-panel-2); color:var(--lv-ink);
  font:inherit; font-size:12px; font-weight:600; cursor:pointer;
}

.lvPanel__go{ margin:0; }
.lvPanel__save{
  width:100%; cursor:pointer;
  padding:12px 18px; border-radius:10px;
  border:1px solid rgba(255,255,255,.16);
  background:linear-gradient(92deg,var(--lv-accent),#6f3ce0);
  color:#fff; font:inherit; font-size:14px; font-weight:650;
}
.lvPanel__save:focus-visible{ outline:2px solid var(--lv-cyan); outline-offset:3px; }

.lvPanel__clear{ margin:12px 0 0; }
.lvPanel__rm{
  width:100%; cursor:pointer;
  padding:9px 14px; border-radius:9px;
  border:1px solid rgba(255,177,58,.34); background:transparent;
  color:var(--lv-gold); font:inherit; font-size:12px; font-weight:600;
}
.lvPanel__rm:hover{ background:rgba(255,177,58,.08); }

@media (min-width:1100px){
  /* Reserved for the session, not toggled with the panel. */
  body.is-editing{ padding-right:420px; }
  /* The message is fixed to the viewport, which knows nothing about that
     padding, so it is held clear of the panel explicitly. */
  body.is-editing .lvEdFlash{ right:432px; }
}
@media (max-width:1099px){
  /* No room beside the page, so it becomes a sheet over the bottom of it --
     still scrollable, still dismissable, and it never squeezes the cards into
     a column too narrow to judge. */
  .lvPanel{
    inset:auto 0 0 0; width:100%; max-height:76vh;
    border-left:0; border-top:1px solid var(--lv-line-warm);
    border-radius:14px 14px 0 0;
    box-shadow:0 -22px 60px rgba(0,0,0,.6);
  }
}

@media (max-width:560px){
  .lvHero{ padding-bottom:34px; min-height:300px; }
  .lvWrap{ padding-top:40px; }
  .lvSec{ margin-bottom:48px; }
  .lvCard__body{ padding:16px 16px 18px; }
  .lvTools{ padding:10px 16px 14px; gap:6px; }
}

@media (prefers-reduced-motion:reduce){
  .lvCard, .lvBtn{ transition:none; }
  .lvCard:hover, .lvBtn:hover{ transform:none; }
  html{ scroll-behavior:auto; }
}

/* The upload bar. Hidden until there is something to say, and never shown for
   a text-only save -- a progress bar for 400 bytes is theatre. */
.lvUp{ display:none; margin:12px 0 0; }
.lvUp.is-on{ display:block; }
.lvUp__track{
  height:6px; border-radius:999px; overflow:hidden;
  background:rgba(255,255,255,.08);
}
.lvUp__fill{
  height:100%; width:0; border-radius:999px;
  background:linear-gradient(92deg, var(--lv-accent), var(--lv-cyan));
  transition:width .18s ease;
}
.lvUp__say{ margin:7px 0 0; color:var(--lv-dim); font-size:12px; }
.lvUp.is-warn .lvUp__fill{ background:var(--lv-gold); }
.lvUp.is-warn .lvUp__say{ color:var(--lv-gold); }
@media (prefers-reduced-motion:reduce){ .lvUp__fill{ transition:none; } }

/* The flash is a row now, not a paragraph: text, an optional jump, and a way
   out on the right. */
.lvEdFlash{ display:flex; align-items:flex-start; gap:10px; }
.lvEdFlash__say{ flex:1 1 auto; }
.lvEdFlash__x{
  flex:0 0 auto; cursor:pointer;
  width:24px; height:24px; margin:-2px -4px 0 0;
  display:inline-flex; align-items:center; justify-content:center;
  border:0; border-radius:6px; background:transparent;
  color:inherit; opacity:.65; font:inherit; font-size:17px; line-height:1;
}
.lvEdFlash__x:hover{ opacity:1; background:rgba(255,255,255,.08); }
.lvEdFlash__x:focus-visible{ outline:2px solid var(--lv-cyan); outline-offset:1px; }