/* ============================================================
   VIDYA · the laptop the desktop recordings play in
   A 14-inch notebook seen straight on: an aluminium-rimmed lid with thin
   black bezels, a camera notch that sits in a real menu bar, the
   recording below that bar (the app at 1280 x 800, encoded 1920 x 1200),
   and a silver base with the hinge line and the thumb scoop. Everything
   scales with the laptop's own width (container units), so set its width
   and nothing else.

   data-look="light" or "dark" on .laptop matches the menu bar to the
   recording inside (each recording has a fixed look).

   Markup (tools/phone-markup.py writes it):
   <div class="laptop" data-look="dark">
     <div class="lt-lid"><div class="lt-screen">
       <div class="lt-bar" aria-hidden="true">app menu, notch, status</div>
       <video ...></video>  (or an <img>)
     </div></div>
     <div class="lt-base" aria-hidden="true"></div>
   </div>
   ============================================================ */
.laptop{container-type:inline-size;position:relative;width:100%}

/* the lid: a thin aluminium rim around a black bezel */
.lt-lid{position:relative;margin:0 6.5%;padding:.32cqw;border-radius:2.5cqw 2.5cqw .5cqw .5cqw;
  background:linear-gradient(180deg,#B9BEBF 0%,#7D8384 40%,#5E6465 100%);
  box-shadow:0 0 0 .5px rgba(0,0,0,.35),0 2.4cqw 4.8cqw -2.4cqw rgba(6,16,15,.55)}
.lt-lid::before{content:"";position:absolute;inset:.32cqw;border-radius:2.2cqw 2.2cqw .3cqw .3cqw;background:#050707;z-index:0}
.lt-screen{position:relative;z-index:1;margin:1.6cqw 1.6cqw 2.3cqw;aspect-ratio:1280/832;overflow:hidden;
  border-radius:1cqw 1cqw .15cqw .15cqw;background:#050707;isolation:isolate}
/* glass */
.lt-screen::after{content:"";position:absolute;inset:0;z-index:4;pointer-events:none;
  background:linear-gradient(112deg,rgba(255,255,255,.09) 0%,rgba(255,255,255,.02) 26%,rgba(255,255,255,0) 44%)}

/* the menu bar: 32 of 832, the notch in its middle */
.lt-bar{position:absolute;left:0;right:0;top:0;height:3.846%;z-index:3;display:flex;align-items:center;justify-content:space-between;
  padding:0 1.4%;font:500 1.05cqw/1 -apple-system,"SF Pro Text","Montserrat",system-ui,sans-serif;letter-spacing:-.005em;white-space:nowrap}
.lt-menu{display:flex;align-items:center;gap:1.5cqw}
.lt-menu b{font-weight:700}
.lt-menu span{opacity:.82}
.lt-status{display:flex;align-items:center;gap:1.1cqw}
.lt-status svg{display:block;height:1cqw;width:auto;fill:currentColor}
.lt-notch{position:absolute;left:50%;top:0;transform:translateX(-50%);width:13.5%;height:100%;background:#050707;border-radius:0 0 .7cqw .7cqw}
.lt-notch::after{content:"";position:absolute;left:50%;top:32%;width:.55cqw;height:.55cqw;transform:translateX(-50%);border-radius:50%;
  background:radial-gradient(circle at 40% 35%,#2A3A44 0%,#0B1116 60%)}
.lt-screen video,.lt-screen > img{position:absolute;left:0;top:3.846%;width:100%;height:96.154%;object-fit:cover;display:block;z-index:1}

/* the base: hinge line, scoop, and the shadow it throws */
.lt-base{position:relative;height:1.9cqw;margin-top:-.05cqw;border-radius:.15cqw .15cqw 1.3cqw 1.3cqw / .15cqw .15cqw 1cqw 1cqw;
  background:linear-gradient(180deg,#E3E6E6 0%,#BFC4C4 22%,#979C9D 62%,#6C7172 100%);
  box-shadow:inset 0 .08cqw 0 rgba(255,255,255,.7),0 1.4cqw 2.6cqw -1cqw rgba(6,16,15,.55),0 3cqw 6cqw -3cqw rgba(12,97,112,.35)}
.lt-base::before{content:"";position:absolute;left:6.5%;right:6.5%;top:0;height:.38cqw;border-radius:0 0 .3cqw .3cqw;
  background:linear-gradient(180deg,#25292A 0%,#4A4F50 100%)}
.lt-base::after{content:"";position:absolute;left:50%;top:0;transform:translateX(-50%);width:13%;height:.62cqw;border-radius:0 0 .9cqw .9cqw;
  background:linear-gradient(180deg,#8E9394 0%,#B6BABB 100%)}

/* the looks: the menu bar matches the app behind it */
.laptop[data-look="light"] .lt-screen{background:#F5F9F8}
.laptop[data-look="light"] .lt-bar{background:rgba(245,249,248,.92);color:#0B1110}
.laptop[data-look="dark"] .lt-screen{background:#090E0D}
.laptop[data-look="dark"] .lt-bar{background:rgba(9,14,13,.92);color:#F4F7F6}