/* MyMobi360 — Passcode screen: Darlene's new keypad plate, put right
   (restored 2026-11-14 ~20:40 EST on her word: "This is the new code
   page. Please put it right.")

   Her plate file was cropped to its own metal bounds, so the white
   surround and drop shadow are gone from the file itself; the stage
   seats it FLUSH edge to edge, top to bottom, left to right — her
   standing order for this screen. The four digit boxes and the SUBMIT
   are real controls seated transparently on her baked artwork (the
   boxes never move — her law; only the logo's own gentle glow lives,
   baked into her plate). Geometry measured on her cropped frame:
   boxes x 14.5-30.0 / 33.3-48.6 / 52.2-67.4 / 70.7-86.2%,
   y 51.0-62.3%; SUBMIT pill x ~19.9-80.1%, y 66.3-74.5% — the real
   button spans the pill without doubling its curled ribbon ends.
   The page is locked from scrolling so typing can never shove the
   logo out of sight. No footers. */

*{margin:0; padding:0; box-sizing:border-box}
html,body{height:100%; overflow:hidden}
html{text-size-adjust:100%; -webkit-text-size-adjust:100%}
body{
  font-family:'Playfair Display',Georgia,'Times New Roman',serif;
  background:#fff; color:#000;
}

.stage{
  position:fixed; inset:0;
  width:100dvw; height:100dvh;
  overflow:hidden;
  background:#fff;
  transition:opacity .45s ease;
}
.stage.leaving{opacity:0}

.plate{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:fill;
  display:block;
}

.gate{position:absolute; inset:0}

/* ---- The four digit boxes: real inputs seated on her baked boxes.
        Transparent, borderless — her artwork IS the box. Still, always. */
.boxes{position:absolute; left:0; top:50.6%; width:100%; height:12.1%}
.box{
  position:absolute; top:0; height:100%;
  width:16.7%;
  background:transparent;
  border:0; border-radius:8px;
  color:#000;
  font-family:'Playfair Display',Georgia,serif;
  font-size:30px; font-weight:600;
  text-align:center;
  caret-color:#b06a4e;
  outline:none;
  -webkit-appearance:none; appearance:none;
}
.box:nth-child(1){left:14.0%}
.box:nth-child(2){left:32.8%}
.box:nth-child(3){left:51.7%}
.box:nth-child(4){left:70.2%}
/* Focus: a soft static tint inside her box — nothing moves, ever. */
.box:focus{background:rgba(183,110,88,.10)}

/* ---- SUBMIT: the real button rides transparently on her baked pill
        (a drawn overlay doubled the pill's curled ribbon ends — her
        pill stays hers alone; a soft tint answers the press). */
.submit{
  position:absolute;
  left:16.5%; top:65.2%;
  width:67%; height:10.4%;
  background:transparent;
  border:0; border-radius:999px;
  color:transparent;
  font-size:16px;
  cursor:pointer;
  -webkit-appearance:none; appearance:none;
  -webkit-tap-highlight-color:transparent;
}
.submit:active{background:rgba(183,110,88,.16)}
.submit:focus-visible{outline:2px solid rgba(165,95,66,.55); outline-offset:-2px}

/* type law guard: Playfair only, no italics, ever */
i,em{font-style:normal}