@font-face{font-family:HomeDemoDM;src:url("../assets/dm-sans-400.ttf");font-weight:400;font-display:swap}
@font-face{font-family:HomeDemoDM;src:url("../assets/dm-sans-600.ttf");font-weight:600;font-display:swap}
@font-face{font-family:HomeDemoJakarta;src:url("../assets/plus-jakarta-sans-700.ttf");font-weight:700;font-display:swap}
[data-home-motion]{
  container-type:inline-size;
  border-radius:18px;
  --paper:#fcfcff;
  --ink:#263153;
  --secondary:#5c6480;
  --line:#dadff0;
  --blue:#4458ac;
  --lime:#e4ee99;
  --fresh:#22c55e;
  --watch:#eab308;
  --act:#ef4444;
  --closer-blue:radial-gradient(ellipse at 90% 22%,#5b6ebf 0%,transparent 58%),
    radial-gradient(ellipse at 2% 100%,#445ba5 0%,transparent 65%),
    linear-gradient(142deg,#293757 5%,#354777 56%,#455a9f 100%);
  font:400 16px/1.45 HomeDemoDM,system-ui,sans-serif;
  background:var(--paper);
  color:var(--ink);
}
[data-home-motion] *{box-sizing:border-box}
body[data-home-motion]{margin:0}
[data-home-motion] .study{width:min(1328px,calc(100% - 64px));margin:auto}
[data-home-motion] .mast,[data-home-motion] .review-controls{display:flex;align-items:center;justify-content:space-between;gap:12px}
[data-home-motion] .mast{min-height:68px;color:var(--secondary);font-size:14px}
[data-home-motion] .mast img{display:block;max-width:30vw;height:auto}
[data-home-motion] .stage{position:relative;isolation:isolate;min-height:650px;overflow:hidden;border-radius:30px;background:var(--closer-blue);color:#fff}
[data-home-motion] .stage-title{position:relative;z-index:3;padding:31px 40px 0}
[data-home-motion] .stage-title p{margin:0 0 3px;color:var(--lime);font-size:12px;font-weight:600;letter-spacing:.10em}
[data-home-motion] .stage-title :is(h1,h2){margin:0;font:700 clamp(22px,3cqw,42px)/1.15 HomeDemoJakarta,sans-serif;letter-spacing:-.045em}
[data-home-motion] .scene{position:absolute;inset:119px 7% 60px;--scale:1;--focal:0}
[data-home-motion] .camera{position:absolute;inset:0;transform:scale(var(--scale));transform-origin:68% 25%}
[data-home-motion] .film-window{position:absolute;inset:0;overflow:hidden;border:1px solid #e1e7ff45;border-radius:18px;background:#101010;box-shadow:0 24px 58px #11162f73}
[data-home-motion] .film{display:block;position:absolute;width:142%;max-width:none;left:-21%;top:-8px;transform:translateY(calc(var(--focal) * -22px))}
[data-home-motion] .vitals-anchor{position:absolute;inset:0;z-index:2;pointer-events:none}
[data-home-motion] .gauge{--gauge-fill:0;position:absolute;z-index:3;right:17px;bottom:-20px;width:min(405px,100% - 34px);display:grid;grid-template-columns:auto minmax(30px,1fr) 68px;align-items:center;gap:12px;padding:11px 13px;border:1px solid var(--line);border-radius:12px;background:var(--paper);box-shadow:0 12px 34px #1d27585c;color:var(--ink);font-size:13px;font-weight:600}
[data-home-motion] .gauge-label,[data-home-motion] .gauge-state{white-space:nowrap}
[data-home-motion] .gauge-state{text-align:right;color:var(--blue)}
[data-home-motion] .gauge-track{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}
[data-home-motion] .gauge-track i{position:relative;height:7px;border-radius:99px;background:color-mix(in srgb,var(--color) 24%,#f2f3f9);overflow:hidden}
[data-home-motion] .gauge-track i::after{content:"";position:absolute;inset:0;transform-origin:left;transform:scaleX(clamp(0,calc(var(--gauge-fill) - var(--offset)),1));background:var(--color);border-radius:inherit}
[data-home-motion] .gauge-track i:nth-child(1){--color:var(--fresh);--offset:0}
[data-home-motion] .gauge-track i:nth-child(2){--color:var(--watch);--offset:1}
[data-home-motion] .gauge-track i:nth-child(3){--color:var(--act);--offset:2}
[data-home-motion] .review-controls{padding:12px 0;color:var(--secondary);font-size:13px}
[data-home-motion] button{min-height:44px;padding:0 14px;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--blue);font:600 14px HomeDemoDM,sans-serif;cursor:pointer;white-space:nowrap}
[data-home-motion] button:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
[data-home-motion] .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@container(max-width:750px){
  [data-home-motion] .study{width:calc(100% - 32px)}
  [data-home-motion] .mast{min-height:56px;font-size:12px}
  [data-home-motion] .stage{min-height:565px;border-radius:22px}
  [data-home-motion] .stage-title{padding:19px 17px 0}
  [data-home-motion] .stage-title p{font-size:10px}
  [data-home-motion] .scene{inset:86px 17px 65px}
  [data-home-motion] .camera{transform-origin:62% 24%}
  [data-home-motion] .film-window{border-radius:13px}
  [data-home-motion] .film{width:275%;left:calc(-65% - var(--focal) * 48%);top:-6px;transform:translateY(calc(var(--focal) * -23px))}
  [data-home-motion] .gauge{right:1px;bottom:-29px;width:calc(100% - 2px);gap:8px;padding:9px;font-size:12px}
  [data-home-motion] .review-controls{font-size:11px}
}
@media(prefers-reduced-motion:reduce){
  [data-home-motion] .camera,[data-home-motion] .film{transform:none}
}

@media(min-height:420px) and (max-height:600px){
  body[data-home-motion] .study{display:grid;grid-template-rows:auto minmax(0,1fr) auto;height:100dvh}
  body[data-home-motion] .stage{min-height:0}
}

.home-review-motion-0811[data-home-motion] .study{
  display:grid;
  grid-template-rows:auto minmax(0,1fr) auto;
  height:100%;
}
.home-review-motion-0811[data-home-motion] .stage{min-height:0}

.home-review-motion-0811[data-motion-autoplay] .stage {
  height: 100%;
  border-radius: inherit;
}

[data-motion-autoplay] .stage[data-paused] {
  --home-vitals-play-state: paused;
}

[data-motion-autoplay] .scene {
  inset: 18px 18px 62px;
}

[data-motion-autoplay] .gauge {
  right: 0;
  bottom: -46px;
  width: min(405px, 100%);
}

[data-motion-autoplay] .home-motion-toggle {
  position: absolute;
  z-index: 4;
  top: 22px;
  right: 22px;
  display: grid;
  width: 44px;
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: #192238c9;
  color: #fff;
}

[data-motion-autoplay] .home-motion-toggle:focus-visible {
  outline-color: #fff;
}

[data-motion-autoplay] .home-motion-toggle[hidden],
[data-motion-autoplay] .home-motion-toggle[data-running="true"] .resume,
[data-motion-autoplay] .home-motion-toggle[data-running="false"] .pause {
  display: none;
}

[data-motion-autoplay] .home-motion-toggle svg {
  width: 15px;
  height: 15px;
}

@container (min-width: 481px) {
  [data-motion-autoplay] .film {
    width: 142%;
    left: -21%;
  }
}

@container (max-width: 480px) {
  [data-motion-autoplay] .scene {
    inset-inline: 12px;
  }

  [data-motion-autoplay] .home-motion-toggle {
    right: 16px;
  }

  [data-motion-autoplay] .vitals-anchor > * {
    transform: scale(.82);
    transform-origin: bottom right;
  }
}