@font-face{font-family:"M-Heading-Font";src:url(https://cdn.shopify.com/s/files/1/0266/6161/7869/files/SFUITextCondensed-Bold.otf?v=1785497898) format("opentype");font-display:swap;font-weight:700}
@font-face{font-family:"M-Body-Font";src:url(https://cdn.shopify.com/s/files/1/0266/6161/7869/files/SFUITextCondensed-Regular.otf?v=1785493533) format("opentype");font-display:swap;font-weight:400}
:root{--bg:#0b0c0e;--bg2:#15171a;--line:#2a2f36;--line2:#3a4048;--steel:#c3c9d1;--mute:#8d8a84;--red:#e21b23;--red-hi:#ff3b41;
  --fh:"M-Heading-Font","SF UI Text Condensed","Arial Narrow",sans-serif;--fb:"M-Body-Font","SF UI Text Condensed","Arial Narrow",sans-serif;--mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
*{box-sizing:border-box}
html{background:var(--bg);color:#fff;-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--fb);font-size:17px;line-height:1.5;background:var(--bg)}
a{color:inherit}
.bar{position:fixed;inset:0 0 auto 0;z-index:20;display:flex;align-items:center;justify-content:space-between;padding:12px clamp(16px,4vw,40px);background:linear-gradient(#0b0c0ee6,#0b0c0e00);pointer-events:none}
.bar__mark{font-family:var(--fh);font-weight:700;letter-spacing:.06em;font-size:18px;pointer-events:auto;text-decoration:none}
.bar__mark b{color:var(--red)}
.bar__tag{font:600 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--steel);border:1px solid var(--line2);padding:6px 8px}
.eyebrow{font:600 12px/1.2 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--red-hi);margin:0 0 14px}
h1,h2,h3{font-family:var(--fh);font-weight:700;line-height:.98;margin:0;letter-spacing:.005em;text-transform:uppercase}
.intro,.outro{position:relative;padding:clamp(96px,16vh,160px) clamp(20px,6vw,80px) clamp(64px,12vh,120px);overflow:hidden}
.intro{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:center;
  background:radial-gradient(90% 70% at 80% 30%,#1b1e22 0,#0b0c0e 60%),var(--bg)}
.intro::before,.outro::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:radial-gradient(circle,#2a2f36 0 2px,transparent 2.5px);background-size:28px 28px;
  -webkit-mask-image:linear-gradient(115deg,transparent 35%,#000 90%);mask-image:linear-gradient(115deg,transparent 35%,#000 90%)}
.intro h1{font-size:clamp(46px,9vw,120px);max-width:11ch}
.intro h1 span{color:var(--red)}
.intro p.lead{max-width:34rem;color:var(--steel);font-size:clamp(17px,1.6vw,20px);margin:22px 0 0}
.cue{margin-top:44px;display:inline-flex;align-items:center;gap:12px;font:600 12px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.cue i{width:1px;height:42px;background:linear-gradient(var(--red),transparent);display:block;animation:cue 1.8s ease-in-out infinite}
@keyframes cue{0%{transform:scaleY(.2);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}100%{transform:scaleY(.2);transform-origin:bottom}}
.facts{display:flex;flex-wrap:wrap;gap:10px 28px;margin:34px 0 0;padding:0;list-style:none;font:600 13px/1.3 var(--mono);color:var(--steel)}
.facts b{display:block;font-family:var(--fh);font-size:28px;color:#fff;letter-spacing:.02em}

/* ---------- size section ---------- */
.mts{position:relative;background:var(--bg)}
.mts__track{position:relative;height:calc(6.7 * 72vh + 100vh);height:calc(6.7 * 72svh + 100svh)}
.mts__stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:grid;
  grid-template-columns:clamp(290px,25vw,420px) 1fr;grid-template-rows:1fr auto;gap:0 clamp(12px,2vw,28px);
  padding:72px clamp(16px,3vw,40px) 18px;
  background:radial-gradient(70% 70% at 62% 45%,#191c20 0,#0b0c0e 70%)}
.mts__info{grid-column:1;grid-row:1;align-self:center;position:relative;z-index:2}
.mts__size{font-size:clamp(38px,3.7vw,60px);white-space:nowrap;font-variant-numeric:tabular-nums}
.mts__size small{font-size:.42em;color:var(--steel);margin-left:.1em}
.mts__size .x{color:var(--red);padding:0 .06em}
.mts__series{font-family:var(--fh);font-size:clamp(18px,1.7vw,24px);letter-spacing:.04em;text-transform:uppercase;color:var(--steel);margin:10px 0 0;min-height:1.3em}
.mts__meta{display:grid;grid-template-columns:1fr 1fr;gap:12px 18px;margin:22px 0 0;padding:16px 0 0;border-top:1px solid var(--line)}
.mts__meta div{min-width:0}
.mts__meta dt{font:600 10.5px/1.2 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.mts__meta dd{margin:4px 0 0;font:700 15px/1.25 var(--mono);color:#fff;white-space:nowrap}
.mts__sys{display:inline-flex;margin:20px 0 0;border:1px solid var(--line2)}
.mts__sys button{appearance:none;border:0;background:transparent;color:var(--steel);font:700 13px/1 var(--mono);letter-spacing:.08em;padding:10px 16px;cursor:pointer;min-height:40px}
.mts__sys button[aria-pressed=true]{background:var(--red);color:#fff}
.mts__sys button:focus-visible,.mts__rail button:focus-visible,.btn:focus-visible{outline:2px solid var(--red-hi);outline-offset:2px}
.mts__note{min-height:1.4em;margin:10px 0 0;font:500 12px/1.4 var(--mono);color:var(--mute)}
.mts__view{grid-column:2;grid-row:1;position:relative;min-height:0;min-width:0}
.mts__view canvas{position:absolute;inset:0;display:block;width:100%;height:100%}
.mts__foot{grid-column:1 / -1;grid-row:2;display:flex;align-items:center;gap:18px;padding-top:10px;border-top:1px solid var(--line)}
.mts__rail{list-style:none;margin:0;padding:0;display:flex;gap:4px;flex:1;min-width:0}
.mts__rail li{flex:1;min-width:0}
.mts__rail button{width:100%;appearance:none;background:transparent;border:0;border-top:2px solid var(--line2);color:var(--mute);font:600 11px/1 var(--mono);padding:9px 0 4px;cursor:pointer;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .2s,border-color .2s}
.mts__rail button.is-past{border-top-color:#7a2226}
.mts__rail button.is-on{border-top-color:var(--red);color:#fff}
.mts__legend{margin:0;font:500 11px/1.35 var(--mono);color:var(--mute);max-width:44ch;text-align:right}
.mts__progress{position:absolute;left:0;top:0;height:2px;width:100%;background:var(--red);transform-origin:0 50%;transform:scaleX(0);z-index:5;opacity:.8}

/* follow (configurator-driven) instance */
.mts--follow .mts__stage{position:relative;height:min(78vh,720px);height:min(78svh,720px);padding-top:28px;background:transparent;border:1px solid var(--line)}
.mts--follow .mts__track{height:auto}
.follow__ctl{display:flex;flex-direction:column;gap:6px;margin:18px 0 0}
.follow__ctl label{font:600 10.5px/1.2 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.follow__ctl select{appearance:none;background:#15171a url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23c3c9d1' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 12px center;color:#fff;border:1px solid var(--line2);font:600 14px/1.2 var(--mono);padding:11px 34px 11px 12px;width:100%;border-radius:0}
code{font-family:var(--mono);font-size:.88em;background:#15171a;border:1px solid var(--line);padding:1px 6px;color:var(--steel)}

.outro{background:linear-gradient(#0b0c0e,#101215)}
.outro h2{font-size:clamp(40px,6.5vw,88px);max-width:12ch}
.outro p{color:var(--steel);max-width:36rem}
.btn{display:inline-flex;align-items:center;gap:10px;margin-top:22px;background:var(--red);color:#fff;text-decoration:none;font-family:var(--fh);font-size:20px;letter-spacing:.06em;text-transform:uppercase;padding:14px 22px}
.btn:hover{background:#c5151c}
.demo{margin-top:clamp(56px,10vh,110px)}
.demo h3{font-size:clamp(26px,3vw,38px)}
.srcs{margin-top:60px;padding-top:18px;border-top:1px solid var(--line);font:500 12px/1.6 var(--mono);color:var(--mute)}
.srcs a{color:var(--steel)}

/* ---------- phones / portrait ---------- */
@media (max-width:820px),(max-aspect-ratio:4/5){
  .mts__track{height:calc(6.7 * 62vh + 100vh);height:calc(6.7 * 62svh + 100svh)}
  .mts__stage{grid-template-columns:1fr;grid-template-rows:auto 1fr auto;padding:58px 14px 10px;gap:0}
  .mts__info{grid-column:1;grid-row:1;align-self:start}
  .mts__view{grid-column:1;grid-row:2}
  .mts__foot{grid-row:3}
  .mts__size{font-size:clamp(34px,10.5vw,52px)}
  .mts__series{margin-top:4px;font-size:16px}
  .mts__meta{grid-template-columns:repeat(3,auto);justify-content:start;gap:4px 18px;margin-top:8px;padding-top:8px}
  .mts__meta .m-area{display:none}
  .mts__meta dd{font-size:13px}
  .mts__sys{position:absolute;right:0;top:4px;margin:0}
  .mts__sys button{padding:8px 11px;min-height:36px;font-size:12px}
  .mts__note{position:absolute;margin:0;left:0;right:0;top:100%;font-size:11px;min-height:0}
  .mts__legend{display:none}
  .mts__rail button{font-size:10px;line-height:1.15;letter-spacing:-.01em;text-overflow:clip}
  .mts__rail button span{display:block}
  .mts__rail button i{display:block;font-style:normal}
  .mts--follow .mts__stage{height:min(88vh,760px);height:min(88svh,760px)}
  .mts--follow .mts__sys{position:static;margin-top:10px}
}
@media (max-width:360px){.mts__rail button{font-size:9px}}
.mts__rail button i{font-style:normal}

/* ---------- reduced motion: static, tap-to-switch ---------- */
.mts-rm .cue i{animation:none}
.mts-rm .mts__track{height:auto}
.mts-rm .mts__stage{position:relative;height:auto;min-height:92vh;min-height:92svh}
.mts-rm .mts__progress{display:none}
@media (max-width:820px),(max-aspect-ratio:4/5){.mts-rm .mts__stage{min-height:100svh}}
@media (prefers-reduced-motion:reduce){.mts__track{height:auto}.mts__stage{position:relative;height:auto;min-height:92vh}.cue i{animation:none}}