/* MilepostOS product walkthrough. Shared by demo.html and the homepage
   (#glance). Everything is scoped under .mpdemo so it cannot collide with
   the site's own classes. Region geometry and the hard-won interaction rules
   are documented in demo.js. */
.mpdemo{--text:#fff;--text2:rgba(255,255,255,.45);--border-strong:rgba(255,255,255,0.14);
  --blue:#4F8EF7;--green:#22C55E;--amber:#F59E0B;--red:#EF4444;--purple:#A78BFA}
.mpdemo .frame{position:relative;border:1px solid var(--border-strong);border-radius:14px;overflow:hidden;
  background:#0A0A12;box-shadow:0 30px 80px rgba(0,0,0,.55);aspect-ratio:16/9}
.mpdemo .pan{position:absolute;inset:0;transform-origin:0 0;transition:transform 1200ms cubic-bezier(.33,0,.15,1);will-change:transform}
.mpdemo .pan img{display:block;width:100%;height:auto}
.mpdemo .pan img.over{position:absolute;left:0;top:0;opacity:0;transition:opacity .45s}
.mpdemo .pan img.over.on{opacity:1}
.mpdemo .pan img.over.cut{transition:opacity .14s}
.mpdemo .cursor{position:absolute;left:0;top:0;width:19px;height:19px;z-index:8;opacity:0;
  transition:opacity .25s;filter:drop-shadow(0 3px 5px rgba(0,0,0,.6));pointer-events:none;will-change:transform}
.mpdemo .cursor.on{opacity:1}
.mpdemo .chip{position:absolute;left:0;top:0;z-index:7;display:flex;align-items:center;gap:7px;padding:7px 10px;
  border-radius:9px;background:#1B1B28;border:1px solid var(--border-strong);box-shadow:0 14px 34px rgba(0,0,0,.6);
  font-size:11px;white-space:nowrap;opacity:0;pointer-events:none;will-change:transform}
.mpdemo .chip.on{opacity:1}
.mpdemo .chip .ic{width:13px;height:16px;border-radius:2px;background:linear-gradient(160deg,#16A34A,#22C55E);flex:0 0 13px}
.mpdemo .chip.blue .ic{background:linear-gradient(160deg,#4F8EF7,#6366F1)}
.mpdemo .ripple{position:absolute;left:0;top:0;width:32px;height:32px;margin:-16px 0 0 -16px;border-radius:50%;
  border:2px solid #fff;opacity:0;z-index:8;pointer-events:none}
.mpdemo .ripple.go{animation:rip .55s ease-out}
@keyframes rip{0%{opacity:.9;transform:scale(.3)}
100%{opacity:0;transform:scale(1.6)}
}
.mpdemo .flash{position:absolute;border-radius:10px;background:#fff;opacity:0;z-index:7;pointer-events:none}
.mpdemo .flash.go{animation:fl .45s ease-out}
@keyframes fl{0%{opacity:.34}
100%{opacity:0}
}
@media (prefers-reduced-motion:reduce){.mpdemo .cursor,.mpdemo .chip,.mpdemo .ripple,.mpdemo .flash{display:none}
}
.mpdemo .spot{position:absolute;border:2px solid var(--blue);border-radius:8px;
  box-shadow:0 0 0 9999px rgba(5,5,10,.62), 0 0 22px rgba(79,142,247,.5);
  opacity:0;transition:opacity .5s, left .6s, top .6s, width .6s, height .6s;pointer-events:none;z-index:4}
.mpdemo .spot.in{opacity:1}
.mpdemo .spot.amber{border-color:var(--amber);box-shadow:0 0 0 9999px rgba(5,5,10,.62), 0 0 22px rgba(245,158,11,.5)}
.mpdemo .spot.purple{border-color:var(--purple);box-shadow:0 0 0 9999px rgba(5,5,10,.62), 0 0 22px rgba(167,139,250,.5)}
.mpdemo .spot.green{border-color:var(--green);box-shadow:0 0 0 9999px rgba(5,5,10,.62), 0 0 22px rgba(34,197,94,.5)}
.mpdemo .spot.red{border-color:var(--red);box-shadow:0 0 0 9999px rgba(5,5,10,.62), 0 0 22px rgba(239,68,68,.45)}
.mpdemo .call{position:absolute;z-index:6;max-width:300px;padding:12px 14px;border-radius:12px;background:rgba(10,10,18,.96);
  border:1px solid var(--border-strong);box-shadow:0 18px 50px rgba(0,0,0,.65);opacity:0;transform:translateY(6px);
  transition:opacity .45s,transform .45s;pointer-events:none}
.mpdemo .call.in{opacity:1;transform:none}
.mpdemo .call b{display:block;font-size:13.5px;margin-bottom:4px;letter-spacing:-.01em}
.mpdemo .call span{font-size:12px;color:var(--text2);line-height:1.5}
.mpdemo .curtain{position:absolute;inset:0;z-index:9;background:#05050A;display:flex;align-items:center;justify-content:center;
  padding:0 8%;opacity:0;pointer-events:none;transition:opacity .45s}
.mpdemo .curtain.in{opacity:1}
.mpdemo .typed{font-size:clamp(16px,2.6vw,30px);font-weight:700;letter-spacing:-.025em;line-height:1.35;text-align:center;max-width:820px}
.mpdemo .typed .lo{color:var(--text2);font-weight:600}
.mpdemo .caret{display:inline-block;width:2px;height:1em;background:var(--blue);vertical-align:-2px;margin-left:3px;animation:bl 1s step-end infinite}
@keyframes bl{50%{opacity:0}
}
.mpdemo .hots{position:absolute;inset:0;z-index:5;opacity:0;pointer-events:none;transition:opacity .55s}
.mpdemo .hots.in{opacity:1;pointer-events:auto}
.mpdemo .hot{position:absolute;width:26px;height:26px;padding:0;border-radius:50%;
  background:rgba(79,142,247,.25);border:2px solid var(--blue);cursor:pointer;
  transform:translate(-50%,-50%) scale(var(--k,1));transform-origin:50% 50%;
  transition:transform .35s cubic-bezier(.33,0,.15,1),background .2s}
.mpdemo .hot:after{content:"";position:absolute;inset:-7px;border-radius:50%;border:2px solid var(--blue);
  opacity:.7;animation:ping 2.4s cubic-bezier(0,0,.2,1) infinite;pointer-events:none}
.mpdemo .hot:hover,.mpdemo .hot:focus-visible{transform:translate(-50%,-50%) scale(calc(var(--k,1) * 1.18));background:rgba(79,142,247,.5);outline:none}
.mpdemo .hot.amber{background:rgba(245,158,11,.25);border-color:var(--amber)}
.mpdemo .hot.amber:after{border-color:var(--amber)}
.mpdemo .hot.amber:hover,.mpdemo .hot.amber:focus-visible{background:rgba(245,158,11,.5)}
.mpdemo .hot.red{background:rgba(239,68,68,.25);border-color:var(--red)}
.mpdemo .hot.red:after{border-color:var(--red)}
.mpdemo .hot.red:hover,.mpdemo .hot.red:focus-visible{background:rgba(239,68,68,.5)}
.mpdemo .hot.purple{background:rgba(167,139,250,.25);border-color:var(--purple)}
.mpdemo .hot.purple:after{border-color:var(--purple)}
.mpdemo .hot.purple:hover,.mpdemo .hot.purple:focus-visible{background:rgba(167,139,250,.5)}
.mpdemo .hot.green{background:rgba(34,197,94,.25);border-color:var(--green)}
.mpdemo .hot.green:after{border-color:var(--green)}
.mpdemo .hot.green:hover,.mpdemo .hot.green:focus-visible{background:rgba(34,197,94,.5)}
@keyframes ping{0%{transform:scale(.75);opacity:.75}
70%,100%{transform:scale(1.7);opacity:0}
}
.mpdemo .spot.soft{box-shadow:0 0 0 9999px rgba(5,5,10,.42), 0 0 18px rgba(79,142,247,.45)}
.mpdemo .spot.soft.amber{box-shadow:0 0 0 9999px rgba(5,5,10,.42), 0 0 18px rgba(245,158,11,.45)}
.mpdemo .spot.soft.purple{box-shadow:0 0 0 9999px rgba(5,5,10,.42), 0 0 18px rgba(167,139,250,.45)}
.mpdemo .spot.soft.green{box-shadow:0 0 0 9999px rgba(5,5,10,.42), 0 0 18px rgba(34,197,94,.45)}
.mpdemo .spot.soft.red{box-shadow:0 0 0 9999px rgba(5,5,10,.42), 0 0 18px rgba(239,68,68,.45)}
@media (prefers-reduced-motion:reduce){.mpdemo .hot:after{animation:none}
}
.mpdemo .ctl{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:18px;flex-wrap:wrap}
.mpdemo .ctl button{background:rgba(255,255,255,.06);border:1px solid var(--border-strong);color:var(--text);
  font:600 12px 'Inter',sans-serif;padding:8px 15px;border-radius:9px;cursor:pointer}
.mpdemo .ctl button:hover{background:rgba(255,255,255,.11)}
.mpdemo .beat{display:flex;gap:6px}
.mpdemo .beat i{width:26px;height:3px;border-radius:2px;background:rgba(255,255,255,.13);cursor:pointer;transition:background .3s}
.mpdemo .beat i:hover{background:rgba(255,255,255,.3)}
.mpdemo .beat i.on{background:var(--blue)}
.mpdemo .cap{text-align:center;color:var(--text2);font-size:12.5px;margin-top:10px;min-height:19px}
@media (max-width:700px){.mpdemo .call{max-width:210px;padding:10px 11px}
.mpdemo .call b{font-size:12px}
.mpdemo .call span{font-size:11px}
}
@media (prefers-reduced-motion:reduce){.mpdemo .pan,.mpdemo .spot,.mpdemo .call,.mpdemo .curtain{transition:none!important}
}