/* HabitRush landing: "See it in action" motion section (frames and scene picker). The dashboard copy is styled inside its shadow root, see assets/js/motion.js. Loaded on the front page only. */
.mx-sec{container-type:inline-size;overflow-x:clip}
.mx-stage{position:relative}
.mx-dev.m{display:none}
@container (max-width:700px){.mx-dev.d{display:none}.mx-dev.m{display:block}}

/* device frames */
.mx-laptop{position:relative;width:min(88%,1000px);margin:0 auto;isolation:isolate}
.mx-laptop::before,.mx-phone::before{content:"";position:absolute;inset:-14% -18% -6%;z-index:-1;pointer-events:none;background:radial-gradient(50% 50% at 50% 52%,rgba(31,157,69,.20),rgba(31,157,69,.06) 45%,transparent 72%)}
:root[data-theme="light"] .mx-laptop::before,:root[data-theme="light"] .mx-phone::before{background:radial-gradient(50% 50% at 50% 52%,rgba(31,157,69,.16),transparent 70%)}
.mx-lid{position:relative;padding:2.1% 2.1% 2.5%;border-radius:22px 22px 8px 8px;background:linear-gradient(180deg,#1d2433,#0c1018);box-shadow:inset 0 0 0 1px #2c3547,0 0 0 1px rgba(0,0,0,.55),0 48px 90px -40px rgba(0,0,0,.75)}
.mx-cam{position:absolute;top:.8%;left:50%;width:6px;height:6px;margin-left:-3px;border-radius:50%;background:#262f42;box-shadow:inset 0 0 0 1.5px #10151f}
.mx-base{position:relative;height:clamp(10px,1.5vw,18px);margin:0 -6.5%;border-radius:2px 2px 16px 16px/2px 2px 100% 100%;background:linear-gradient(180deg,#454e62 0,#2a3140 30%,#141820 80%,#0b0e14);box-shadow:0 26px 40px -24px rgba(0,0,0,.7)}
.mx-base::before{content:"";position:absolute;left:43%;right:43%;top:0;height:42%;border-radius:0 0 8px 8px;background:#161b25}
.mx-phone{position:relative;width:min(78%,300px);margin:0 auto;padding:9px;border-radius:50px;isolation:isolate;background:linear-gradient(180deg,#232a3a,#0c1018);box-shadow:inset 0 0 0 1px #343e52,0 0 0 1px rgba(0,0,0,.55),0 40px 80px -36px rgba(0,0,0,.75)}
.mx-phone::after{content:"";position:absolute;top:20px;left:50%;width:31%;height:24px;margin-left:-15.5%;border-radius:20px;background:#000;z-index:3}
.mx-screen{position:relative;overflow:hidden;background:#070B14;border-radius:6px;aspect-ratio:1280/800}
.mx-phone .mx-screen{aspect-ratio:390/844;border-radius:41px;clip-path:inset(0 round 41px)}
:root[data-theme="light"] .mx-screen{background:#F3F6FA}
.mx-canvas{position:absolute;left:0;top:0;transform-origin:0 0}

/* scene picker under the device */
.mx-ch{display:grid;grid-template-columns:repeat(4,minmax(0,1fr)) auto;gap:8px;max-width:1000px;margin:36px auto 0}
.mx-chb{position:relative;display:flex;flex-direction:column;gap:4px;min-height:44px;padding:18px 16px 14px;border-radius:16px;border:1px solid transparent;background:transparent;color:var(--muted);text-align:left;transition:background .2s,border-color .2s,color .2s}
.mx-chb:hover{color:var(--text)}
.mx-chb[aria-pressed="true"]{background:var(--surface);border-color:var(--line);color:var(--text)}
.mx-pr{position:absolute;left:16px;right:16px;top:8px;height:3px;border-radius:3px;background:var(--line);overflow:hidden}
.mx-pr i{display:block;height:100%;width:calc(var(--pr,0) * 100%);border-radius:3px;background:var(--accent)}
.mx-cl{display:flex;align-items:center;gap:8px;font-weight:600;font-size:15px;letter-spacing:-.01em}
.mx-chb[aria-pressed="true"] .mx-cl .ic{color:var(--accent-text)}
.mx-chb small{font-size:13px;color:var(--faint);line-height:1.35}
.mx-pp{align-self:center;width:44px;height:44px;border-radius:50%;border:1px solid var(--line-2);display:grid;place-items:center;color:var(--muted);background:transparent}
.mx-pp:hover{color:var(--text);border-color:var(--muted)}
.mx-pp .i-play,.mx-pp.paused .i-pause{display:none}
.mx-pp.paused .i-play{display:block}
.mx-dev.m .mx-ch{grid-template-columns:repeat(4,minmax(0,1fr)) 44px;gap:4px;margin-top:24px}
.mx-dev.m .mx-chb{align-items:center;text-align:center;padding:16px 2px 8px;border-radius:12px}
.mx-dev.m .mx-cl{flex-direction:column;gap:4px;font-size:12px;font-weight:500}
.mx-dev.m .mx-chb small{display:none}
.mx-dev.m .mx-pr{left:12px;right:12px}
.mx-cta{display:flex;flex-direction:column;align-items:center;gap:12px;margin-top:40px;text-align:center}
.mx-cta .muted{font-size:14px}
.mx-sec .sec-head .lead{margin-left:auto;margin-right:auto}
.section.mx-sec{padding-top:0;padding-bottom:0}