/* Laptop mockup — same concept as the phone, with a space black MacBook Pro.
   Model units: base 1000 × 700 (18 thick), lid 1000 × 660 (9 thick). */
:root {
  --page: #ffffff;
  --alu: #2a2b2e;        /* space black aluminium */
  --alu-2: #1f2023;
  --alu-hi: #3b3d41;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body { background: var(--page); font-family: var(--font); overflow: hidden; -webkit-font-smoothing: antialiased; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }

.scene { position: fixed; inset: 0; perspective: 2600px; perspective-origin: 50% 42%; overflow: hidden; }

/* ---------- the laptop rig (pose driven by laptop.js) ---------- */
.mac {
  --s: var(--rest-s, .55);
  --rx: 58deg;  --rz: -24deg;  --ty: var(--rest-ty, 0px);   /* resting pose */
  --wx: 0deg;   --wy: 0deg;   --lz: 0px;    /* cursor spin (spring) */
  position: absolute; left: 50%; top: 50%;
  width: 1000px; height: 700px; margin: -350px 0 0 -500px;
  transform-style: preserve-3d;
  transform:
    translate3d(var(--tx, 0px), var(--ty), var(--lz))
    scale3d(var(--s), var(--s), var(--s))
    rotateY(var(--wy)) rotateX(var(--wx))
    rotateX(var(--rx)) rotateZ(var(--rz));
  cursor: pointer; outline: none; z-index: 1;
}
.mac.moving { transition: none; }   /* open/close are driven frame by frame in laptop.js */
.mac.measure, .mac.measure .lid { transition: none !important; }
.mac.open { --s: var(--open-s, 1); --rx: 70deg; --rz: 0deg; --ty: var(--open-ty, 0px); cursor: default; }   /* screen square to the viewer */

.mac-shadow {
  position: absolute; inset: 2% 1% -1% 1%; border-radius: 40px;
  background: rgba(0,0,0,.28); filter: blur(34px);
  transform: translate3d(22px, 18px, -36px);
  opacity: var(--shadow, 1); transition: opacity .5s;
}
.mac-shadow::after {            /* tight contact shadow right under the body */
  content: ""; position: absolute; inset: 1.5% 1.2%; border-radius: 30px;
  background: rgba(0,0,0,.55); filter: blur(7px);
  transform: translate(-10px, -8px);
}
.mac.open .mac-shadow { opacity: .55; }

.plates, .plates .plate { position: absolute; inset: 0; transform-style: preserve-3d; }

/* base */
.base { position: absolute; inset: 0; transform-style: preserve-3d; }
.base .plate { border-radius: 26px; }
.base .plate.bottom { background: #121315 !important; }
.deck {
  position: absolute; inset: 0; border-radius: 26px; transform: translateZ(2px); overflow: hidden;
  background:
    linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,0) 46px),                       /* lid's shadow near the hinge */
    radial-gradient(130% 100% at 30% 10%, rgba(255,255,255,.07), transparent 55%),      /* key light, upper left */
    linear-gradient(170deg, #34363a 0%, #2a2b2f 45%, #222327 100%);
  box-shadow:
    inset 0 0 0 1.2px rgba(255,255,255,.10),     /* machined chamfer catching light */
    inset 0 2px 1px -1px rgba(255,255,255,.12),
    inset 0 -3px 6px rgba(0,0,0,.35);
}
.deck::before, .lid-back::before {               /* fine anodised grain */
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.15' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  opacity: .07; mix-blend-mode: overlay;
}
.keys {
  position: absolute; left: 136px; right: 136px; top: 54px; height: 312px;
  display: flex; flex-direction: column; gap: 6px;
  padding: 7px; border-radius: 9px;
  background: #121315;
  box-shadow: inset 0 1px 3px rgba(0,0,0,.8), 0 0 0 1px rgba(255,255,255,.035);
}
.krow { display: flex; gap: 6px; flex: 1; }
.krow.fn { flex: .62; }
.keys i, .arrows i {
  position: relative; display: block; flex: 1; min-width: 0;
  border-radius: 6px;
  background: linear-gradient(180deg, #161618 0%, #0c0c0d 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), inset 0 -1px 0 rgba(0,0,0,.6), 0 1px 1px rgba(0,0,0,.5);
  color: #8e9096; font-style: normal; font-size: 13px; line-height: 1; text-align: center;
  display: flex; align-items: center; justify-content: center; letter-spacing: .2px;
}
.keys i.mod { font-size: 10px; justify-content: flex-start; align-items: flex-end; padding: 0 0 7px 9px; }
.keys i.mod.r { justify-content: flex-end; padding: 0 9px 7px 0; }
.krow.fn i { font-size: 9px; border-radius: 5px; }
.keys i.touch { background: radial-gradient(circle at 50% 50%, #1a1b1d 0 38%, #0c0c0d 40%); }
.arrows { display: flex; gap: 6px; align-items: flex-end; }
.arrows > i { height: 48%; font-size: 8px; }
.arrows .ud { flex: 1; height: 100%; display: flex; flex-direction: column; gap: 4px; }
.arrows .ud i { flex: 1; font-size: 8px; }
.grille { position: absolute; top: 54px; width: 98px; height: 312px; border-radius: 6px;
  background: radial-gradient(circle, rgba(0,0,0,.75) .9px, transparent 1.25px) 0 0 / 5.5px 5.5px; opacity: .85; }
.grille.left { left: 22px; } .grille.right { right: 22px; }
.trackpad {
  position: absolute; left: 50%; top: 392px; width: 480px; height: 278px; margin-left: -240px;
  border-radius: 14px;
  background:
    radial-gradient(120% 90% at 35% 15%, rgba(255,255,255,.05), transparent 60%),
    linear-gradient(180deg, #2e2f33, #28292c);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.07), inset 0 1px 0 rgba(255,255,255,.05), 0 0 0 1px rgba(0,0,0,.25);
}
.notch-front { position: absolute; left: 50%; bottom: 0; width: 150px; height: 8px; margin-left: -75px; border-radius: 8px 8px 0 0;
  background: linear-gradient(180deg, #17181a, #222327); box-shadow: inset 0 1px 1px rgba(0,0,0,.6); }

/* lid: hinged on the back edge, opened ~110° */
.lid {
  position: absolute; left: 0; top: calc(-1 * var(--lid-h, 660px)); width: 1000px; height: var(--lid-h, 660px);
  transform-style: preserve-3d; transform-origin: 50% 100%;
  transform: translateZ(-6px) rotateX(-70deg);
}
.lid .plate { border-radius: 26px 26px 20px 20px; }
.lid-back {
  position: absolute; inset: 0; border-radius: 26px 26px 20px 20px; overflow: hidden;
  background:
    linear-gradient(115deg, transparent 30%, rgba(255,255,255,.05) 45%, transparent 60%),
    radial-gradient(100% 80% at 35% 25%, #36383c, #2a2b2f 55%, #202124);
  box-shadow: inset 0 0 0 1.2px rgba(255,255,255,.09), inset 0 2px 1px -1px rgba(255,255,255,.1);
  transform: translateZ(-13.5px) rotateY(180deg); backface-visibility: hidden;
}
/* nv logo in polished metal where the Apple logo would be */
.lid-logo {
  position: absolute; left: 50%; top: 50%; width: 112px; aspect-ratio: 570 / 624;
  transform: translate(-50%, -50%) scaleX(-1);
  -webkit-mask: url("assets/logo-mask.png") center / contain no-repeat;
          mask: url("assets/logo-mask.png") center / contain no-repeat;
  background: linear-gradient(115deg, #4f5156 0%, #c7c9ce 22%, #f6f7f9 34%, #7a7d82 48%, #e2e3e6 62%, #5c5e63 78%, #b9bbc0 100%);
  background-size: 300% 300%; background-position: var(--sheen, 50%) 50%;
  filter: drop-shadow(0 0 .6px rgba(0,0,0,.6));
}
.lid-front {
  position: absolute; inset: 0; border-radius: 26px 26px 20px 20px; transform: translateZ(2px);   /* clear of the lid body so video layers never sort behind it */
  background: #020203;
  box-shadow: inset 0 0 0 2.5px #3a3c40, inset 0 0 0 4px #0a0a0b;   /* aluminium rim, then glass */
  padding: 20px 14px 16px;
}
.lid-front::after {             /* one sheet of glass over bezel + display */
  content: ""; position: absolute; inset: 4px; border-radius: 22px 22px 16px 16px; pointer-events: none; z-index: 6; opacity: var(--g, 1);
  background: linear-gradient(118deg, rgba(255,255,255,.06) 0%, rgba(255,255,255,.015) 28%, transparent 40%, transparent 70%, rgba(255,255,255,.03) 100%);
}
.cam { position: absolute; left: 50%; top: 4px; width: 140px; height: 26px; margin-left: -70px; border-radius: 0 0 12px 12px; background: #020203; z-index: 5; }
.cam::after { content: ""; position: absolute; left: 50%; top: 9px; width: 7px; height: 7px; margin-left: -3.5px; border-radius: 50%;
  background: radial-gradient(circle at 40% 40%, #2a3350, #0b0e18 70%); box-shadow: 0 0 0 1.5px #0d0d10; }

/* ---------- the screen: desktop Instagram-style portfolio ---------- */
.mscreen {
  position: relative; width: 100%; height: 100%; overflow: hidden;
  border-radius: calc(9px * var(--g, 1)) calc(9px * var(--g, 1)) calc(3px * var(--g, 1)) calc(3px * var(--g, 1));
  background: #000; color: #f5f5f5; display: flex; font-size: 13px;
  user-select: none;
}
.mac:not(.open) .mscreen { pointer-events: none; }
.mscreen::after { /* glass glare, strongest while resting */
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 20;
  background: linear-gradient(120deg, transparent 35%, rgba(255,255,255,.07) 48%, transparent 62%);
  opacity: var(--g, 1); transition: opacity .8s;
}
.mac.moving .mscreen::after { transition: none; }
.mac.open .mscreen::after { opacity: 0; }

.side { width: 168px; flex: none; border-right: 1px solid #262626; padding: 26px 10px; display: flex; flex-direction: column; gap: 22px; }
.side-logo { width: 34px; height: 37px; margin-left: 12px; background: #f5f5f5;
  -webkit-mask: url("assets/logo-mask.png") center / contain no-repeat; mask: url("assets/logo-mask.png") center / contain no-repeat; }
.side-nav { display: flex; flex-direction: column; gap: 4px; }
.side-nav button { display: flex; align-items: center; gap: 14px; padding: 10px 12px; border-radius: 8px; font-size: 14px; text-align: left; }
.side-nav button:hover { background: #1a1a1a; }
.side-nav button.on { font-weight: 700; }
.side-nav svg { width: 24px; height: 24px; flex: none; }
.side-avatar { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; }

.mscroll { flex: 1; overflow-y: auto; scrollbar-width: none; padding: 0 0 0; }
.mscroll::-webkit-scrollbar { display: none; }
/* explore top: centred search bar over a 4-across grid, like instagram.com/explore */
.prof { width: min(720px, calc(100% - 40px)); margin: 0 auto; padding: 15px 0 0; display: flex; justify-content: center; }
.msearch { width: 400px; max-width: 100%; height: 26px; display: flex; align-items: center; gap: 7px; padding: 0 12px; border-radius: 13px; background: #25262b; color: #a8a8a8; }
.msearch svg { width: 12px; height: 12px; flex: none; }
.msearch input { flex: 1; min-width: 0; background: none; border: 0; outline: none; color: #f5f5f5; font: inherit; font-size: 10.5px; }
.msearch input::placeholder { color: #a8a8a8; }
.msearch input::-webkit-search-cancel-button { filter: invert(1) opacity(.6); }
.mchips { display: none; }

.mgrid { width: min(720px, calc(100% - 40px)); margin: 20px auto 30px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; }
.mtile { position: relative; aspect-ratio: 3 / 4; background: var(--ph, #111); overflow: hidden; cursor: pointer; }
.mtile img, .mtile video { width: 100%; height: 100%; object-fit: cover; display: block; }
.mtile .multi { position: absolute; top: 7px; right: 7px; width: 17px; filter: drop-shadow(0 1px 2px rgba(0,0,0,.5)); }
.mtile:hover::after { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.25); }
.mtile.empty { cursor: default; pointer-events: none; }
.mtile.wip img { transform: scale(1.15); }
.mtile.wip:hover::after { display: none; }
.wip-cover { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  background: rgba(0,0,0,.38); color: #fff; text-align: center; transition: background .2s; }
.mtile.wip:hover .wip-cover { background: rgba(0,0,0,.5); }
.wip-icon { width: 24px; height: 24px; }
.wip-cover span { font-size: 11.5px; font-weight: 600; text-shadow: 0 1px 3px rgba(0,0,0,.4); }
.mtile.empty::before { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.35); }

/* post overlay — sized in real window pixels (--u = one screen pixel, set while full screen) so it
   reads exactly like Instagram's desktop post view: system font 14/18, 32px avatars, panel ≈ reel width */
.mpost { --px: var(--u, 1px); position: absolute; inset: 0; z-index: 10; background: rgba(0,0,0,.65); display: grid; place-items: center; animation: mfade .2s ease;
  font-size: calc(14 * var(--px)); line-height: calc(18 * var(--px)); }
.mpost[hidden] { display: none; }
@keyframes mfade { from { opacity: 0; } }
.mpost-close { position: absolute; top: calc(12 * var(--px)); right: calc(14 * var(--px)); width: calc(36 * var(--px)); height: calc(36 * var(--px)); display: grid; place-items: center; color: #fff; }
.mpost-nav { position: absolute; top: 50%; width: calc(32 * var(--px)); height: calc(32 * var(--px)); margin-top: calc(-16 * var(--px)); border-radius: 50%; background: #fff; color: #000; display: grid; place-items: center; z-index: 2; }
.mpost-nav[hidden] { display: none; }
.mpost-nav svg { width: calc(18 * var(--px)); height: calc(18 * var(--px)); }
.mpost-nav.prev { left: calc(16 * var(--px)); } .mpost-nav.next { right: calc(16 * var(--px)); }
.mpost-close svg { width: calc(22 * var(--px)); height: calc(22 * var(--px)); }
.mpost-box { display: flex; width: fit-content; max-width: calc(100% - 128 * var(--px)); height: calc(100% - 48 * var(--px)); background: #000; border-radius: calc(4 * var(--px)); overflow: hidden; animation: mpop .25s cubic-bezier(.2,.9,.25,1); }
@keyframes mpop { from { transform: scale(.96); opacity: 0; } }
.mpost-media { position: relative; flex: 0 1 auto; min-width: 0; height: 100%; aspect-ratio: var(--ar, 9 / 16); background: #000; overflow: hidden; }
.mpost-media img, .mpost-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; }
.mpost-media .arrow { position: absolute; top: 50%; width: calc(26 * var(--px)); height: calc(26 * var(--px)); margin-top: calc(-13 * var(--px)); border-radius: 50%; background: rgba(255,255,255,.85); color: #111; font-size: calc(18 * var(--px)); line-height: calc(24 * var(--px)); }
.mpost-media .arrow.prev { left: calc(10 * var(--px)); } .mpost-media .arrow.next { right: calc(10 * var(--px)); }
.mpost-media .count { position: absolute; top: calc(12 * var(--px)); right: calc(12 * var(--px)); padding: calc(3 * var(--px)) calc(9 * var(--px)); border-radius: calc(12 * var(--px)); background: rgba(18,18,18,.7); font-size: calc(12 * var(--px)); font-weight: 600; }
.mpost-side { flex: 0 1 calc(420 * var(--px)); min-width: calc(335 * var(--px)); background: #212329; color: #f5f5f5; display: flex; flex-direction: column; }
.mp-head { display: flex; align-items: center; gap: calc(12 * var(--px)); padding: calc(14 * var(--px)) calc(16 * var(--px)); border-bottom: 1px solid rgba(255,255,255,.06); }
.mp-head img, .mp-av { width: calc(32 * var(--px)); height: calc(32 * var(--px)); border-radius: 50%; object-fit: cover; flex: none; }
.mp-head b { font-weight: 600; }
.mp-body { flex: 1; overflow-y: auto; padding: calc(16 * var(--px)); scrollbar-width: none; }
.mp-body::-webkit-scrollbar { display: none; }
.mp-row { display: flex; gap: calc(14 * var(--px)); }
.mp-text { min-width: 0; padding-top: calc(4 * var(--px)); }
.mp-text b { font-weight: 600; }
.mp-title { font-weight: 600; }
.mp-role { font-weight: 600; margin-top: calc(12 * var(--px)); }
.mp-credits { margin-top: calc(12 * var(--px)); display: grid; gap: calc(6 * var(--px)); }
.mp-credits div { display: grid; grid-template-columns: calc(80 * var(--px)) 1fr; gap: calc(8 * var(--px)); }
.mp-credits dt { color: #9ea1a7; }
.mention { color: #e0f1ff; font-weight: 600; }
.mp-actions { display: flex; gap: calc(4 * var(--px)); padding: calc(6 * var(--px)) calc(8 * var(--px)) calc(10 * var(--px)); border-top: 1px solid rgba(255,255,255,.06); }
.mp-actions .act { width: calc(40 * var(--px)); height: calc(40 * var(--px)); display: grid; place-items: center; color: #f5f5f5; }
.mp-actions .act svg { width: calc(24 * var(--px)); height: calc(24 * var(--px)); }
.mp-actions .act.on { color: #ff3040; }
.mp-actions .act.on path { fill: currentColor; }
.mp-link { display: inline-block; margin-top: calc(12 * var(--px)); padding: calc(7 * var(--px)) calc(16 * var(--px)); border-radius: calc(8 * var(--px)); background: #0095f6; color: #fff; font-weight: 600; }

/* ---------- page bits ---------- */
.backdrop { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.bd-layer { position: absolute; inset: 0; opacity: 0; transition: opacity .7s ease; }
.bd-layer.on { opacity: 1; }
.bd-layer img, .bd-layer video { width: 100%; height: 100%; object-fit: cover; display: block; }

.wordmark {
  position: absolute; left: 50%; bottom: 6vh; z-index: 0; width: clamp(140px, 13vw, 220px);
  transform: translateX(-50%) rotateX(66deg); transform-origin: 50% 100%;
  filter: grayscale(1) brightness(0) blur(.5px); opacity: .2; transition: opacity .5s;
  pointer-events: none; user-select: none;
}
.scene.holding .wordmark { opacity: 0; }

/* ---------- macOS-style login: choose a profile ---------- */
.login { position: absolute; inset: 0; z-index: 30; color: #fff; display: flex; flex-direction: column; align-items: center; transition: opacity .6s ease, transform .6s ease; }
.login.out { opacity: 0; transform: scale(1.04); pointer-events: none; }
.lg-wall { position: absolute; inset: 0; background: radial-gradient(120% 90% at 50% 40%, #2d2a2b, #221f20 60%, #1a1819); }
.lg-status { position: absolute; top: 10px; right: 16px; display: flex; gap: 10px; align-items: center; color: #fff; opacity: .9; z-index: 1; }
.lg-clock { position: relative; z-index: 1; margin-top: 44px; text-align: center; text-shadow: 0 1px 12px rgba(0,0,0,.25); }
.lg-date { font-size: 17px; font-weight: 600; opacity: .9; }
.lg-time { font-size: 92px; font-weight: 700; letter-spacing: -2px; line-height: 1; margin-top: 2px; }
.lg-users { position: relative; z-index: 1; margin-top: auto; display: flex; gap: 38px; }
.lg-user { display: flex; flex-direction: column; align-items: center; gap: 9px; color: #fff; font-size: 13px; font-weight: 500; text-shadow: 0 1px 6px rgba(0,0,0,.35); }
.lg-av { width: 74px; height: 74px; border-radius: 50%; object-fit: cover; box-shadow: 0 6px 18px rgba(0,0,0,.25); transition: transform .2s; }
.lg-av.txt { display: grid; place-items: center; font-size: 22px; font-weight: 700; letter-spacing: .5px; background: linear-gradient(160deg, #6b6e75, #3d3f44); }
.lg-av.logo { display: grid; place-items: center; background: linear-gradient(160deg, #f2f2f4, #c9cacf); }
.lg-av.logo i { width: 46%; aspect-ratio: 570 / 624; background: #1c1c1e;
  -webkit-mask: url("assets/logo-mask.png") center / contain no-repeat; mask: url("assets/logo-mask.png") center / contain no-repeat; }
.lg-user:hover .lg-av { transform: scale(1.06); }
.lg-pass { position: relative; z-index: 1; margin-top: auto; display: flex; flex-direction: column; align-items: center; gap: 10px; animation: lgin .3s ease; }
@keyframes lgin { from { opacity: 0; transform: translateY(6px); } }
.lg-pass[hidden] { display: none; }
.lg-pass-av { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; box-shadow: 0 6px 18px rgba(0,0,0,.25); }
.lg-pass-av.txt, .lg-pass-av.logo { display: grid; place-items: center; }
.lg-pass-name { font-size: 15px; font-weight: 600; text-shadow: 0 1px 6px rgba(0,0,0,.35); }
.lg-field { width: 190px; height: 30px; border-radius: 15px; background: rgba(255,255,255,.22); backdrop-filter: blur(10px);
  display: flex; align-items: center; justify-content: space-between; padding: 0 6px 0 14px; }
.lg-dots { font-size: 13px; letter-spacing: 3px; }
.lg-dots:empty::before { content: "Enter Password"; font-size: 12px; letter-spacing: 0; opacity: .7; }
.lg-go { width: 20px; height: 20px; border-radius: 50%; background: rgba(255,255,255,.35); display: grid; place-items: center; font-size: 12px; }
.lg-cancel { font-size: 12px; opacity: .8; margin-top: 2px; }
.lg-msg { position: relative; z-index: 1; margin: 22px 0 18px; font-size: 12px; text-align: center; opacity: .88; text-shadow: 0 1px 6px rgba(0,0,0,.35); }
.lg-msg a { font-weight: 600; }
.lg-msg a:hover { text-decoration: underline; }

/* ---------- Contact profile: Mac Contacts window over the desktop ---------- */
.desk { position: absolute; inset: 0; z-index: 12; display: grid; place-items: center;
  background: #222 url("assets/contact-bg.webp") center / cover; }
.desk[hidden] { display: none; }
.desk::before { content: ""; position: absolute; inset: 0; backdrop-filter: blur(10px) brightness(.85); }
.cwin { position: relative; width: 470px; max-height: 88%; display: flex; flex-direction: column; border-radius: 12px; overflow: hidden;
  background: rgba(30,30,32,.92); backdrop-filter: blur(20px); box-shadow: 0 0 0 .5px rgba(255,255,255,.12), 0 24px 60px rgba(0,0,0,.45); animation: mpop .3s cubic-bezier(.2,.9,.25,1); }
.cwin-bar { height: 34px; display: flex; align-items: center; gap: 8px; padding: 0 12px; border-bottom: 1px solid rgba(255,255,255,.07); font-size: 12px; color: #a8a8ad; }
.cwin-bar span { margin-left: auto; margin-right: auto; transform: translateX(-26px); font-weight: 600; color: #d8d8dc; }
.tl { width: 12px; height: 12px; border-radius: 50%; display: block; }
.tl.red { background: #ff5f57; } .tl.yel { background: #febc2e; } .tl.grn { background: #28c840; }
.cwin-body { overflow-y: auto; padding: 22px 26px 24px; scrollbar-width: none; }
.cwin-body::-webkit-scrollbar { display: none; }
.cc-head { display: flex; align-items: center; gap: 18px; }
.cc-head img { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; }
.cc-name { font-size: 24px; font-weight: 700; letter-spacing: -.3px; }
.cc-org { font-size: 13px; color: #a8a8ad; margin-top: 2px; }
.cc-acts { display: flex; gap: 10px; margin: 18px 0 16px; }
.cc-act { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 9px 0 7px; border-radius: 10px; background: rgba(255,255,255,.08); font-size: 11px; color: #0a84ff; }
.cc-act svg { width: 20px; height: 20px; }
.cc-act:hover { background: rgba(255,255,255,.13); }
.cc-rows { border-top: 1px solid rgba(255,255,255,.07); }
.cc-row { display: grid; grid-template-columns: 90px 1fr; gap: 10px; padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,.07); font-size: 13px; }
.cc-row dt { color: #a8a8ad; text-align: right; }
.cc-row dd a { color: #0a84ff; }
.cc-row dd a:hover { text-decoration: underline; }
.cc-share { display: block; margin: 16px auto 0; padding: 7px 16px; border-radius: 7px; background: rgba(255,255,255,.1); font-size: 12px; font-weight: 600; }

/* ---------- password sheet (same lock as the phone) ---------- */
.msheet { position: absolute; inset: 0; z-index: 40; display: grid; place-items: center; background: rgba(0,0,0,.35); animation: mfade .2s ease; }
.msheet[hidden] { display: none; }
.msheet-box { width: 260px; padding: 18px 16px 14px; border-radius: 12px; background: rgba(40,40,44,.96); text-align: center; box-shadow: 0 20px 50px rgba(0,0,0,.5); }
.msheet-box.shake { animation: shake .35s; }
@keyframes shake { 20%, 60% { transform: translateX(-8px); } 40%, 80% { transform: translateX(8px); } }
.msheet-title { font-size: 14px; font-weight: 700; }
.msheet-msg { font-size: 12px; color: #a8a8ad; margin-top: 3px; }
.msheet-msg.err { color: #ff6961; }
.msheet-box input { width: 100%; margin-top: 12px; padding: 6px 9px; border-radius: 6px; border: 1px solid rgba(255,255,255,.15); background: rgba(0,0,0,.3); color: #fff; font: inherit; font-size: 13px; outline: none; user-select: text; }
.msheet-btns { display: flex; gap: 8px; margin-top: 12px; }
.msheet-btns button { flex: 1; padding: 6px; border-radius: 6px; background: rgba(255,255,255,.1); font-size: 13px; }
.msheet-btns .strong { background: #0a84ff; font-weight: 600; }
.lg-pass-av.txt { font-size: 24px; font-weight: 700; color: #fff; background: linear-gradient(160deg, #6b6e75, #3d3f44); }
.lg-pass-av.logo { background: linear-gradient(160deg, #f2f2f4, #c9cacf); }
.lg-pass-av.logo i { width: 46%; aspect-ratio: 570 / 624; background: #1c1c1e;
  -webkit-mask: url("assets/logo-mask.png") center / contain no-repeat; mask: url("assets/logo-mask.png") center / contain no-repeat; }
.lg-users[hidden] { display: none; }
.cc-share { width: fit-content; }

/* "not very creative" logo on the lock screen, built from the nv mark + wordmark */
.lg-logo { position: relative; z-index: 1; margin-top: auto; display: flex; flex-direction: column; align-items: center; gap: 12px; opacity: .95; }
.lg-mark { display: block; width: 58px; aspect-ratio: 570 / 624; background: #fff;
  -webkit-mask: url("assets/logo-mask.png") center / contain no-repeat; mask: url("assets/logo-mask.png") center / contain no-repeat; }
.lg-word { display: block; width: 132px; aspect-ratio: 1211 / 468; background: #fff;
  -webkit-mask: url("assets/wordmark.png") center / contain no-repeat; mask: url("assets/wordmark.png") center / contain no-repeat; }
.lg-users { margin-top: 34px !important; }
.lg-pass { margin-top: 34px !important; }
.lg-msg { margin: 18px 0 8px !important; }
.lg-sleep { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; margin-bottom: 16px;
  font-size: 11px; color: rgba(255,255,255,.75); }
.lg-sleep svg { width: 30px; height: 30px; padding: 6px; border-radius: 50%; background: rgba(255,255,255,.12); }
.lg-sleep:hover svg { background: rgba(255,255,255,.2); }
.lg-av.photo { box-shadow: 0 6px 18px rgba(0,0,0,.35); }

/* ---------- full screen: the same screen, laid out exactly as on the laptop, scaled to the window ---------- */
.fs { position: fixed; inset: 0; z-index: 50; background: #000; overflow: hidden; }
.fs[hidden] { display: none; }
.fs .mscreen { position: absolute; left: 0; top: 0; width: var(--fs-w, 972px); height: var(--fs-h, 624px);
  transform: scale(var(--fs-k, 1)); transform-origin: 0 0; border-radius: 0; }
.fs .mscreen::after { display: none; }
.mac.gone { visibility: hidden; }
/* logo sits centred between the clock and the profiles */
.lg-logo { margin: auto 0 !important; }
.lg-users, .lg-pass { margin-top: 0 !important; }


/* ---------- lock screen: painting as wallpaper, slightly blurred; light text, soft shadows ---------- */
.login { color: #fff; }
.lg-wall { inset: -24px !important; background: #1b1a1c url("assets/lock-wall-2.jpg") center 48% / cover !important; filter: blur(5px) brightness(.88); }
.lg-wall::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,.05) 40%, rgba(0,0,0,.4)); }
.lg-logo { display: none !important; }            /* the landing page already carries "not very creative" */
.lg-users { margin-top: auto !important; }
.lg-clock, .lg-user, .lg-pass-name, .lg-msg { text-shadow: 0 1px 8px rgba(0,0,0,.45); }
.lg-status { color: #fff; }
.lg-av, .lg-pass-av { box-shadow: 0 12px 28px rgba(0,0,0,.45), 0 3px 6px rgba(0,0,0,.3) !important; }
.lg-av.logo, .lg-pass-av.logo { background: linear-gradient(160deg, #f2f2f4, #c9cacf) !important; }
.lg-av.logo i, .lg-pass-av.logo i { background: #1c1c1e !important; }
.lg-field { background: rgba(255,255,255,.22); backdrop-filter: blur(10px); }
.lg-go { background: rgba(255,255,255,.35); }
.lg-msg { opacity: .9; }
.lg-sleep { color: rgba(255,255,255,.8); }
.lg-sleep svg { background: rgba(255,255,255,.14); }
.lg-sleep:hover svg { background: rgba(255,255,255,.22); }

/* no blur; visible drift + zoom like a macOS aerial / dynamic wallpaper */
.lg-wall { filter: brightness(.82) contrast(1.05) !important; animation: lg-drift 22s ease-in-out infinite alternate; will-change: transform; }
@keyframes lg-drift {
  0%   { transform: scale(1.06) translate(-2.5%, 1.5%); }
  50%  { transform: scale(1.16) translate(1%, -1%); }
  100% { transform: scale(1.1) translate(2.8%, 2%); }
}
@media (prefers-reduced-motion: reduce) { .lg-wall { animation: none; } }