/* Go Midnight Academy sneak peek widget. Pairs with peek.js. No external requests. */
.gmp, .gmp-overlay {
  --gmp-paper: #f4f6fb;
  --gmp-ink: #0b0d16;
  --gmp-blue: #2f5ce0;
  --gmp-blue2: #4f7cff;
  --gmp-line: #dfe3ee;
  --gmp-muted: #646b80;
  --gmp-font: "Inter Tight", "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-family: var(--gmp-font);
  -webkit-font-smoothing: antialiased;
}

/* ---------------- MacBook ---------------- */
.gmp { position: relative; width: 100%; max-width: 1080px; margin: 0 auto; padding: 8px 0 28px; box-sizing: border-box; }
.gmp *, .gmp-overlay * { box-sizing: border-box; }
.gmp-mac { position: relative; width: 100%; cursor: pointer; outline: none; -webkit-tap-highlight-color: transparent; transition: transform .35s cubic-bezier(.2,.7,.2,1); }
.gmp-mac:hover { transform: translateY(-4px); }
.gmp-mac:focus-visible .gmp-lid { box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--gmp-blue), 0 30px 60px -30px rgba(11,13,22,.45); }

.gmp-lid {
  position: relative; width: 84%; margin: 0 auto;
  padding: 1.15% 1.15% 0;               /* thin silver bezel */
  border-radius: 22px 22px 10px 10px;
  background: linear-gradient(180deg, #f3f4f7 0%, #dfe2e8 55%, #cfd3db 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.9),
    inset 0 0 0 2px rgba(150,158,175,.35),
    0 1px 0 rgba(11,13,22,.04),
    0 40px 70px -40px rgba(11,13,22,.45);
}
.gmp-screen {
  position: relative; overflow: hidden; aspect-ratio: 16 / 10;
  border-radius: 12px 12px 3px 3px;
  background: #0b0d16;
  box-shadow: 0 0 0 1px rgba(11,13,22,.55), inset 0 0 0 1px rgba(255,255,255,.05);
}
.gmp-shot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top left; display: block; transition: transform .6s cubic-bezier(.2,.7,.2,1), filter .4s; }
.gmp-mac:hover .gmp-shot { transform: scale(1.012); filter: saturate(1.05); }
.gmp-glare { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,0) 32%, rgba(255,255,255,0) 100%); }
.gmp-chin { height: clamp(10px, 2.1vw, 22px); }   /* thin chin, no notch */

.gmp-base {
  position: relative; width: 100%; height: clamp(10px, 1.7vw, 18px); margin-top: -1px;
  border-radius: 2px 2px 18px 18px / 2px 2px 100% 100%;
  background: linear-gradient(180deg, #e9ebf0 0%, #d6dae2 45%, #b9bec9 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95), inset 0 -1px 0 rgba(90,98,115,.25);
}
.gmp-groove { position: absolute; left: 50%; top: 0; width: 14%; height: 45%; transform: translateX(-50%); border-radius: 0 0 10px 10px; background: linear-gradient(180deg, #c3c8d1, #d9dce3); box-shadow: inset 0 1px 2px rgba(60,66,80,.25); }
.gmp-floor { position: absolute; left: 6%; right: 6%; bottom: -26px; height: 34px; border-radius: 50%; background: radial-gradient(ellipse at center, rgba(11,13,22,.28) 0%, rgba(11,13,22,.10) 45%, rgba(11,13,22,0) 72%); filter: blur(4px); pointer-events: none; z-index: -1; }

.gmp-pill {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: inline-flex; align-items: center; gap: 9px;
  padding: 13px 22px 13px 16px; border-radius: 999px;
  background: var(--gmp-blue); color: #fff; font: 600 clamp(13px, 1.5vw, 17px)/1 var(--gmp-font); letter-spacing: -.01em; white-space: nowrap;
  box-shadow: 0 12px 30px -8px rgba(47,92,224,.65), 0 0 0 1px rgba(255,255,255,.18) inset;
  transition: transform .25s, background .25s;
}
.gmp-pill b { font-weight: 650; }
.gmp-pill::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: -1;
  box-shadow: 0 0 0 0 rgba(47,92,224,.55); animation: gmp-ping 2s cubic-bezier(.2,.7,.2,1) infinite;
}
.gmp-dot { width: 8px; height: 8px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 0 rgba(255,255,255,.7); animation: gmp-dot 1.6s ease-out infinite; }
.gmp-mac:hover .gmp-pill { transform: translate(-50%, -50%) scale(1.05); background: #2752d4; }
@keyframes gmp-ping { 0% { box-shadow: 0 0 0 0 rgba(47,92,224,.5); } 80%, 100% { box-shadow: 0 0 0 22px rgba(47,92,224,0); } }
@keyframes gmp-dot { 0% { box-shadow: 0 0 0 0 rgba(255,255,255,.75); } 100% { box-shadow: 0 0 0 9px rgba(255,255,255,0); } }

/* ---------------- Preview window ---------------- */
html.gmp-lock, html.gmp-lock body { overflow: hidden !important; }
.gmp-overlay {
  position: fixed; inset: 0; z-index: 2147483000;
  display: flex; align-items: center; justify-content: center;
  padding: 2.5vh 2.5vw;
  background: rgba(11,13,22,.58);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  opacity: 0; transition: opacity .2s ease;
}
.gmp-overlay[hidden] { display: none; }
.gmp-overlay.gmp-open { opacity: 1; }
.gmp-win {
  position: relative; display: flex; flex-direction: column;
  width: min(1320px, 100%); height: 100%; max-height: 95vh;
  background: #fff; color: var(--gmp-ink);
  border-radius: 14px; overflow: hidden;
  box-shadow: 0 0 0 1px rgba(11,13,22,.12), 0 50px 120px -30px rgba(0,0,0,.6);
  transform: translateY(10px) scale(.985); transition: transform .25s cubic-bezier(.2,.7,.2,1);
}
.gmp-open .gmp-win { transform: none; }

.gmp-bar {
  flex: 0 0 auto; display: flex; align-items: center; gap: 10px;
  height: 46px; padding: 0 10px 0 14px;
  background: linear-gradient(180deg, #fbfcfe, #eef1f7);
  border-bottom: 1px solid var(--gmp-line);
}
.gmp-lights { display: flex; gap: 8px; margin-right: 4px; }
.gmp-l { width: 12px; height: 12px; border-radius: 50%; border: 0; padding: 0; display: block; box-shadow: inset 0 0 0 .5px rgba(0,0,0,.18); }
.gmp-l-r { background: #ff5f57; cursor: pointer; }
.gmp-l-y { background: #febc2e; }
.gmp-l-g { background: #28c840; }
.gmp-btn {
  display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px;
  border: 1px solid var(--gmp-line); border-radius: 8px; background: #fff; color: var(--gmp-ink);
  font: 600 13px/1 var(--gmp-font); cursor: pointer; transition: background .15s, border-color .15s, color .15s;
}
.gmp-btn:hover:not([disabled]) { border-color: #c5ccdd; background: var(--gmp-paper); }
.gmp-btn:focus-visible { outline: 2px solid var(--gmp-blue); outline-offset: 2px; }
.gmp-btn[disabled] { opacity: .4; cursor: default; }
.gmp-close { width: 30px; padding: 0; justify-content: center; }
.gmp-crumb { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 6px; overflow: hidden; white-space: nowrap; font-size: 13px; color: var(--gmp-muted); }
.gmp-crumb span { overflow: hidden; text-overflow: ellipsis; }
.gmp-c0 { font-weight: 600; color: var(--gmp-ink); flex: 0 0 auto; }
.gmp-sep { color: #b4bacb; flex: 0 0 auto; }
.gmp-c { flex: 0 1 auto; }
.gmp-cur { font-weight: 650; color: var(--gmp-blue); flex: 0 1 auto; }

.gmp-menu {
  position: absolute; top: 52px; right: 10px; z-index: 5;
  width: min(560px, calc(100% - 20px)); max-height: calc(100% - 64px); overflow: auto;
  padding: 10px; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 14px;
  background: #fff; border: 1px solid var(--gmp-line); border-radius: 12px;
  box-shadow: 0 24px 60px -20px rgba(11,13,22,.35);
}
.gmp-menu[hidden] { display: none; }
.gmp-mgroup { display: flex; flex-direction: column; padding: 4px 0; }
.gmp-mhead { font: 700 10.5px/1 var(--gmp-font); letter-spacing: .1em; text-transform: uppercase; color: #8a91a6; padding: 6px 8px; }
.gmp-mitem { text-align: left; border: 0; background: none; font: 500 13px/1.25 var(--gmp-font); color: var(--gmp-ink); padding: 7px 8px; border-radius: 7px; cursor: pointer; }
.gmp-mitem:hover { background: var(--gmp-paper); }
.gmp-mitem.on { background: rgba(47,92,224,.09); color: var(--gmp-blue); font-weight: 650; }

.gmp-body { position: relative; flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; background: var(--gmp-paper); -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.gmp-stage { position: relative; width: 100%; transition: opacity .16s ease; }
.gmp-stage.gmp-fade { opacity: 0; }
.gmp-img { display: block; width: 100%; height: auto; user-select: none; -webkit-user-drag: none; }
.gmp-layer { position: absolute; inset: 0; }
.gmp-hs {
  position: absolute; display: block; margin: 0; padding: 0; border: 0; border-radius: 8px;
  background: transparent; cursor: pointer; -webkit-tap-highlight-color: rgba(47,92,224,.2);
  transition: background .15s, box-shadow .15s;
}
.gmp-hs:hover, .gmp-hs:focus-visible { background: rgba(47,92,224,.08); box-shadow: 0 0 0 2px rgba(47,92,224,.75); outline: none; }
.gmp-flash .gmp-hs { animation: gmp-flash 1.3s ease .25s 1; }
@keyframes gmp-flash { 0%, 100% { box-shadow: 0 0 0 0 rgba(47,92,224,0); background: transparent; } 35% { box-shadow: 0 0 0 2px rgba(47,92,224,.55); background: rgba(47,92,224,.07); } }

.gmp-hint {
  flex: 0 0 auto; padding: 9px 16px; font-size: 12.5px; line-height: 1.35; color: var(--gmp-muted);
  background: #fff; border-top: 1px solid var(--gmp-line); text-align: center;
}
.gmp-hint b { color: var(--gmp-ink); font-weight: 600; }

/* ---------------- Mobile ---------------- */
@media (max-width: 720px) {
  .gmp { padding-bottom: 20px; }
  .gmp-lid { width: 90%; border-radius: 12px 12px 6px 6px; padding: 1.6% 1.6% 0; }
  .gmp-screen { border-radius: 7px 7px 2px 2px; }
  .gmp-pill { padding: 10px 15px 10px 12px; gap: 7px; font-size: 13px; }
  .gmp-pill svg { display: none; }
  .gmp-overlay { padding: 0; }
  .gmp-win { width: 100%; height: 100%; max-height: none; border-radius: 0; }
  .gmp-bar { height: 50px; gap: 8px; padding: 0 8px 0 10px; }
  .gmp-lights { display: none; }
  .gmp-back span, .gmp-menubtn span { display: none; }
  .gmp-back, .gmp-menubtn { width: 34px; height: 34px; padding: 0; justify-content: center; }
  .gmp-close { width: 34px; height: 34px; }
  .gmp-crumb { font-size: 12.5px; }
  .gmp-crumb .gmp-c, .gmp-crumb .gmp-sep:not(:last-of-type) { display: none; }
  .gmp-c0 { display: none; }
  .gmp-crumb .gmp-sep { display: none; }
  .gmp-cur { font-size: 14px; }
  .gmp-menu { grid-template-columns: 1fr; top: 56px; right: 8px; width: calc(100% - 16px); }
  .gmp-hs { border-radius: 3px; }
  .gmp-hint { font-size: 11.5px; padding: 8px 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .gmp-pill::before, .gmp-dot, .gmp-flash .gmp-hs { animation: none; }
  .gmp-mac, .gmp-shot, .gmp-stage, .gmp-win, .gmp-overlay { transition: none; }
}

/* Zoom (phones): doubles the screenshot, scroll both ways; hotspots scale with it */
.gmp-zoom { display: none; }
.gmp-zoomed .gmp-body { overflow-x: auto; }
.gmp-zoomed .gmp-stage { width: 230%; }
.gmp-win .gmp-btn.gmp-zoom[aria-pressed="true"] { background: var(--gmp-blue); border-color: var(--gmp-blue); color: #fff; }
@media (max-width: 720px) {
  .gmp-zoom { display: inline-flex; width: 34px; height: 34px; padding: 0; justify-content: center; }
}