/* wix-madefor-display-cyrillic-ext-wght-normal */
@font-face {
  font-family: 'Wix Madefor Display Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 400 800;
  src: url(data:font/woff2;base64,d09GMgABAAAAAAfAABQAAAAADpwAAAdVAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAGjsbgmwcLj9IVkFSZgZgP1NUQVSBACciAHAvTBEICoVEhF4LGgAwhDABNgIkAzAEIAWFeAeBCgwHG8EMUZRy0ohJfiRUt10wvYxkNK1WdcrxMC+nK63T9OAjLm8FfbUf2W9mP94ecpBIHboQqWhAoaJidFhoQCFRpmqXaLMyQA2xmsGdI+pbV6CldeTFoX03r7xKTa7iBE/32rz3N0AJUcAaeOLBxKMRyF0XqNZBjjp1XbyCezXW6t0/btV25jCb/tR0r5rME+IynRAp6RDR5jqdTKMkIiFkVK1Z5xizKoUh6r/GiGvT/n/0kZyIQDeByIHwsXYgwhYmIFCbZw2f7vJVQcbizHAfZKzaowOQIQBSI6DleHgAUoGABJWSea4mBkpmjA1wPQxXANIJUvW/VQCk6iI3gWAhvdpZLkLef3apBtyDlJwBHUrsQ3e7Qwp8nYc66djF9lHfRSo9BCm/awDEZXIVsA1AByRA7cC4nBGU0Uaiyx2/wALeHAdwyTm0A7ABekzCdPFXGxwBGXIUKFGhRgOBKQSiCAQA1g6qlEf08AisHfKYnspgV3kfjE1X0NamyCwJ1pC5WW+A6F1hAIAdI8wM72DKhf9qBWE/loP2AKr2OTBFI5GSgQ45mMHWk91RBPzXdI0oR6IBc6ywhQ8eWEhPYVdAAKX+LRM7OzO0yKJ7PqW4E4sC1Cr/0vyOVwBaxPsp9B4uMbtvAhMAAw46OIEOwQVAixYOoNEUL8pouDHlhZTY2JFwtZnaWvpuY1r4MYNIHtQdkynlKoWaQAsjHTrhBTE9xaDkJMoQBUcqQT+SO7C5slwYC+rJheGjtQPNACKAHtAKvkBDACAAMAAAxmnC9BK6Q0YL4ScYWQS6YtJPEgikJAqhg5JEnjJJhCzS5ZMoPkEkomiJ8XG4YGyM2IMo0H7ZRBuF4pOCTYKIkqxGLIhoJLtsqYMLiiUbEA0oPaRmYuvdT79OIoHO/EhOk19kQd9zvxKF3KAoFO2ql3quGkQBUgOpnth4d2h6IKfOjobVn/9+svb1yffl/NCns7w/6dnl+2LsHWPKNKs1jwURDQaGG5UsXLPQLOZdxoPE59j1b/zuqXCbzBUuz4Z9wxWSqJuMBk1TSOq8WWyfssOjtLKLlH6/4pKyMsXFfn+pKuPwxZxLWKX2mhHMc2ldneeSaVJN9ShGiRKlF7GaZ7/ODprMzyr37mGNO58dH8q32KVZkcf+qIHYN54Pvvta0sblDEo+M35W7q+y8YT28hMy8xPGK4wgoXljVkvM5xsobF5fdImiTUyKCrGgTqMhSkMV9Ioffkz/hh6mvp8te/UD1s0jY4+fUJkETP7wfZeDj3baOSWeQsmJBqdd/HWJYoPFxUQudcvJglPPnClzdJ9Z4RHKHS2WnYuqjXvHuNWC0lGsab0z9EGqyWVy3lkPhVcJoy8sAjIAsATaE0+BUgjCxfAcfIrABBcgSIUjAK10hMMhhHCRCY9wuBA6pY9Dnpsjc+QnLV7rSRpHfQHN7fHw0icn2exCWjKQ3gUfjCoA5hKT9rc3kWd7P4lIy8orIPOyaMS1b18nvl2ri6z1TGuRWPz335ARjycfKBJCKJGPguAgLwxTZsDcp88v9ukcZCixseLisZEDPBptO2vNvCMzi1ttnNJSnUqjr4SqeILQ3f3vahrLXiTr6++MWmBV0/6UlObmdMrOvyB3Gp3OQ3JrU6Po0Pb24cOgNDXSU51I4uelLCDuPOw8Mi6O/4nJ/GmXTTEAZjJTtk+B2E5hFnBEBKeAiZ+aIKbwTLauRKdj81TAghnxOBslp1EYTFqCQUlLRqDXC7LS9v4ZV7P9s1dlCfQr2dkrI57xUUbrwU4dl7+2ky6QLu2yGQz1oI9fQGEyq6tnEZPQZ5ZPPhy1wH7nEgZuFWRqDnl2bvxt1i87yszfXD/ISDRFFHMOn1A5ZuBl7MwS6evrROKw5EicSUgrVOr52XnUtX++eQ3Lf/htCj6Rs7uNO1icmt7uOCKz+yycWVjuzl6eZTBmRwAEgOfetvZFGauVpltLJeGnGAN8epu/GICf/yvrNHd/pbwsJwEqBkD4mcgfBOj5SUiQIcY/EkPeDqdkl+ruBMqcZkaKGMogwrSSkTeYRSA6j6BypxBAGWi9Fh84lQp4GQ+XILMiCKYpzoDbEy0QrPIZMn1eQW6Zx2lNVjmTTRAdUMqvCGBEW8BpsQQCpTmQ0aYLcqL6egtqcMygfu0GuEW16xPSye4MUWHtLAb18U8bVwroF+Iwhv0rxfSrFRDSpVt04MfkkAiNxffkmk5hIUOiIgSuCekjcElYF6HDHHxqhZwB084vICgw2YQs8NDs7c7Ed0xAlxhnCquJlWGP6w0awLLcIkstsSQeiYWRWEkJrK4+mq+3gxnGvBjgQ+vODMThmKwGyXGm8IU0sSyj6sssNcUJFgf65M90RHhR2iOg09qyVexWCARTR7DMuS2WSSGRKaajVI4+DBahW7uQTIf37+hbheYyAKQbW7THjFDK8QjKlKtQqUq1GoobF0MiJSY/m8rMWWUKCQKUfrIwhTRAyZHPJBFZZK8oXXgSHgEAAA==) format('woff2-variations');
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}

/* wix-madefor-display-cyrillic-wght-normal */
@font-face {
  font-family: 'Wix Madefor Display Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 400 800;
  src: url(/_astro/wix-madefor-display-cyrillic-wght-normal.CSoh1k7O.woff2) format('woff2-variations');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}

/* wix-madefor-display-vietnamese-wght-normal */
@font-face {
  font-family: 'Wix Madefor Display Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 400 800;
  src: url(/_astro/wix-madefor-display-vietnamese-wght-normal.DuF6gx5Y.woff2) format('woff2-variations');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}

/* wix-madefor-display-latin-ext-wght-normal */
@font-face {
  font-family: 'Wix Madefor Display Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 400 800;
  src: url(/_astro/wix-madefor-display-latin-ext-wght-normal.D2bqQwGw.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* wix-madefor-display-latin-wght-normal */
@font-face {
  font-family: 'Wix Madefor Display Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 400 800;
  src: url(/_astro/wix-madefor-display-latin-wght-normal.Blzrepd3.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}/* wix-madefor-text-cyrillic-ext-wght-normal */
@font-face {
  font-family: 'Wix Madefor Text Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 400 800;
  src: url(data:font/woff2;base64,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) format('woff2-variations');
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}

/* wix-madefor-text-cyrillic-wght-normal */
@font-face {
  font-family: 'Wix Madefor Text Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 400 800;
  src: url(/_astro/wix-madefor-text-cyrillic-wght-normal.BLx_7Pqn.woff2) format('woff2-variations');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}

/* wix-madefor-text-vietnamese-wght-normal */
@font-face {
  font-family: 'Wix Madefor Text Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 400 800;
  src: url(/_astro/wix-madefor-text-vietnamese-wght-normal.DnTfAuVi.woff2) format('woff2-variations');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}

/* wix-madefor-text-latin-ext-wght-normal */
@font-face {
  font-family: 'Wix Madefor Text Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 400 800;
  src: url(/_astro/wix-madefor-text-latin-ext-wght-normal.BH75is57.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* wix-madefor-text-latin-wght-normal */
@font-face {
  font-family: 'Wix Madefor Text Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 400 800;
  src: url(/_astro/wix-madefor-text-latin-wght-normal.M4ts_BV7.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}/* Carried over from the Design canvas (Main.dc.html, v162) in its original cascade order. *//* Page, theme tokens, shared helpers */
body{margin:0}
:root[data-theme="light"]{background:#f2f2f7;color-scheme:light;scrollbar-color:rgba(60,60,67,.32) #f2f2f7}
:root[data-theme="dark"]{background:#000;color-scheme:dark;scrollbar-color:rgba(235,235,245,.3) #000}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
.lf{--font:"Wix Madefor Text Variable",-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",Helvetica,Arial,sans-serif;--font-display:"Wix Madefor Display Variable",var(--font);--ease-out:cubic-bezier(0.23,1,0.32,1);--ease-in-out:cubic-bezier(0.77,0,0.175,1);--ease-drawer:cubic-bezier(0.32,0.72,0,1);--gutter:clamp(16px,5cqw,72px);--max:1296px;--sp-sec:clamp(176px,26cqw,380px);--sp-head:clamp(64px,10cqw,144px);--sp-row:clamp(120px,16cqw,230px);--sp-row-s:clamp(20px,2.3cqw,34px);--sp-row-c:clamp(40px,5cqw,72px);background:var(--bg);color:var(--ink);font-family:var(--font);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:clip;-webkit-tap-highlight-color:transparent;font-synthesis:none;container-type:inline-size;container-name:lf}
[data-theme="light"] .lf{--bg:#f2f2f7;--card:#ffffff;--ink:#000000;--ink-2:rgba(60,60,67,.6);--muted:#6c6c70;--sep:rgba(60,60,67,.16);--line:rgba(0,0,0,.5);--fill:rgba(118,118,128,.12);--fill-2:rgba(118,118,128,.22);--accent:#000000;--accent-on:#ffffff;--positive:#20873f;--toggle:#34c759;--bar:rgba(242,242,247,.8);--bezel:#0c0c0e;--rim:rgba(0,0,0,.08)}
[data-theme="dark"] .lf{--bg:#000000;--card:#1c1c1e;--ink:#ffffff;--ink-2:rgba(235,235,245,.6);--muted:#98989f;--sep:rgba(84,84,88,.6);--line:rgba(255,255,255,.55);--fill:rgba(118,118,128,.24);--fill-2:rgba(118,118,128,.36);--accent:#ffffff;--accent-on:#000000;--positive:#20873f;--toggle:#30d158;--bar:rgba(0,0,0,.72);--bezel:#1c1c1e;--rim:rgba(255,255,255,.14)}
.lf ::selection{background:var(--ink);color:var(--bg)}
.lf :is(h1,h2,h3,.lf-statement,.lf-row-s,.lf-word,.p-num,.lf-anno-v,.o-time,.lf-la-time){font-family:var(--font-display)}
.lf a{color:inherit}
.lf :focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:8px}
.lf section,.lf [id]{scroll-margin-top:80px}
.lf-wrap{width:min(calc(100% - 2 * var(--gutter)),var(--max));margin-inline:auto}
.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}
.lf-skip{position:absolute;left:16px;top:-60px;z-index:100;padding:12px 18px;border-radius:999px;background:var(--accent);color:var(--accent-on);font:600 15px/1 var(--font);text-decoration:none}
.lf-skip:focus{top:12px}
.lf-nav{position:sticky;top:0;z-index:50}
.lf-nav::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--bar);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid var(--sep)}
.lf-nav-in{height:64px;display:flex;align-items:center;gap:28px}
.lf-brand{display:flex;align-items:center;gap:10px;margin-right:auto;color:var(--ink);text-decoration:none;font-size:18px;font-weight:700;letter-spacing:-0.02em}
.lf-seg{position:relative;display:flex;padding:3px;border-radius:999px;background:var(--fill)}
.lf-seg::before{content:"";position:absolute;top:3px;bottom:3px;left:3px;width:calc((100% - 6px) / 2);border-radius:999px;background:var(--card)}
[data-theme="dark"] .lf .lf-seg::before{background:var(--fill-2)}
.lf-seg[data-i="1"]::before{transform:translateX(100%)}
.lf-seg[data-i="2"]::before{transform:translateX(200%)}
.lf-seg button{width:44px;height:38px;border:0;border-radius:999px;background:transparent;color:var(--muted);display:grid;place-items:center;cursor:pointer;touch-action:manipulation;position:relative;transition:color 200ms ease,transform 160ms var(--ease-out)}
.lf-seg button[aria-pressed="true"]{color:var(--ink)}
.lf-seg button:active{transform:scale(.94)}
.lf-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;padding:0 20px;border:0;border-radius:999px;background:var(--accent);color:var(--accent-on);font:600 15px/1 var(--font);letter-spacing:-0.01em;text-decoration:none;white-space:nowrap;cursor:pointer;touch-action:manipulation;transition:transform 160ms var(--ease-out),opacity 160ms ease}
.lf a.lf-btn{color:var(--accent-on)}
.lf-btn:active{transform:scale(.97)}
.lf-btn-lg{height:58px;padding:0 30px;font-size:17px}
.lf-ghost{background:var(--fill);color:var(--ink)}
@media (hover:hover) and (pointer:fine){.lf-btn:hover{opacity:.84}.lf-seg button:hover{color:var(--ink)}}
.lf-hero{padding-top:clamp(120px,12cqw,176px)}
.lf-h1{margin:0;font-size:clamp(40px,12.2cqw,164px);line-height:.9;letter-spacing:-0.035em;font-weight:700}
.lf-h1 span{display:block}
.lf-lead{margin:36px 0 0;max-width:28ch;font-size:clamp(19px,1.75cqw,25px);line-height:1.36;font-weight:500;letter-spacing:-0.012em;text-wrap:pretty}
.lf-cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;margin-top:32px}
.lf-note{margin:0;font-size:15px;line-height:1.4;color:var(--muted)}
/* With the pin's top margin and the stage's centring offset, this matches the space above the heading. */
.lf-hero-space{height:clamp(16px,4cqw,64px)}
.lf-phone{position:relative;box-sizing:border-box;width:var(--pw);padding:calc(var(--pw) * 0.016);border:calc(var(--pw) * 0.01) solid transparent;border-radius:15.4% / 7.1%;background:linear-gradient(#000,#000) padding-box,linear-gradient(150deg,#86868b 0%,#2c2c2f 16%,#4d4d52 38%,#202023 60%,#5f5f64 84%,#323235 100%) border-box}
/* Side buttons: action and volume on the left, power on the right. */
.lf-phone::before,.lf-phone::after{content:"";position:absolute;width:calc(var(--pw) * 0.009);pointer-events:none}
.lf-phone::before{left:calc(var(--pw) * -0.0175);top:17%;height:24%;border-radius:calc(var(--pw) * 0.004) 0 0 calc(var(--pw) * 0.004);background:linear-gradient(to bottom,#4a4a4f 0 13%,transparent 13% 27%,#4a4a4f 27% 60%,transparent 60% 67%,#4a4a4f 67% 100%)}
.lf-phone::after{right:calc(var(--pw) * -0.0175);top:27%;height:11.5%;border-radius:0 calc(var(--pw) * 0.004) calc(var(--pw) * 0.004) 0;background:#4a4a4f}
.lf-di{position:absolute;z-index:2;left:50%;top:calc(var(--pw) * 0.0525);width:calc(var(--pw) * 0.297);height:calc(var(--pw) * 0.087);margin-left:calc(var(--pw) * -0.1485);border-radius:999px;background:#000;pointer-events:none}
.lf-screen{display:block;width:100%;height:auto;aspect-ratio:1206 / 2622;object-fit:cover;border-radius:13.4% / 6.2%;background:var(--bg)}
.lf-pin{--pw:min(calc((100vh - 170px) * 0.47),360px);--px:56%;position:relative;height:2000px;margin-top:clamp(24px,4cqw,56px)}
.lf-pin.is-flip{--px:6%;margin-top:var(--sp-head)}
.lf-stage{position:sticky;top:64px;height:min(calc(100vh - 64px),940px);display:flex;align-items:center}
.lf-track{position:relative;height:calc(var(--pw) * 2.113)}
.lf-track > .lf-phone{position:absolute;top:0;left:var(--px)}
.lf-call{position:absolute;left:0;top:calc(var(--pw) * (0.026 + var(--y) * 2.061));width:calc(var(--px) + var(--pw) * (0.026 + var(--x) * 0.948));transform:translateY(-50%);display:flex;align-items:center;gap:20px;z-index:2}
.is-flip .lf-call{left:calc(var(--px) + var(--pw) * (0.026 + var(--x) * 0.948));right:0;width:auto;flex-direction:row-reverse}
.lf-call.is-up{align-items:flex-end;transform:translateY(calc(-100% + 4.5px))}
.lf-call.is-up .lf-line{margin-bottom:4px}
.lf-call.is-down{align-items:flex-start;transform:translateY(-4.5px)}
.lf-call.is-down .lf-line{margin-top:4px}
.lf-call-text{position:relative;flex:none;width:min(300px,28cqw)}
.lf-call-t{margin:0;font-size:22px;line-height:1.15;font-weight:600;letter-spacing:-0.02em}
.lf-call-s{margin:6px 0 0;font-size:16px;line-height:1.4;color:var(--muted);text-wrap:pretty}
.lf-line{flex:1;min-width:24px;height:1px;background:var(--line);transform-origin:left center}
.is-flip .lf-line,.is-flip .lf-anno .lf-line{transform-origin:right center}
/* One spacing scale: --sp-sec above each section, --sp-head between a section's heading, lede and blocks, --sp-row between rows. */
.lf-sec{padding-top:var(--sp-sec)}
.lf-split{margin:0;font-size:clamp(40px,10.2cqw,150px);line-height:.92;letter-spacing:-0.035em;font-weight:700}
.lf-split span{display:block}
.lf-split .lf-l2{color:var(--ink-2);padding-left:.55em}
.lf-statement{margin:var(--sp-head) 0 0;max-width:30ch;font-size:clamp(22px,2.5cqw,34px);line-height:1.34;font-weight:500;letter-spacing:-0.018em;color:var(--ink-2);text-wrap:pretty}
.lf-bento{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:16px;margin-top:var(--sp-head)}
.lf-tile{position:relative;overflow:hidden;display:flex;flex-direction:column;gap:8px;padding:32px;border-radius:28px;background:var(--card)}
.lf-tile-t{margin:0;font-size:clamp(22px,2cqw,28px);line-height:1.15;font-weight:600;letter-spacing:-0.022em}
.lf-tile-s{margin:0;max-width:34ch;font-size:17px;line-height:1.45;color:var(--muted);text-wrap:pretty}
.lf-tile-media{margin-top:auto;padding-top:24px}
.t-run{grid-column:span 7;grid-row:span 2}
/* The phones sit on the tile's bottom edge, however tall the row: the front screen shows down to 80% of its height
   (2.113 − 0.026 − 0.8 × 2.061 = 0.438 of the phone's width hidden, plus the 32px padding), so the rest bar stays out of view. */
.t-run .lf-tile-media{--pw:clamp(260px,25cqw,350px);display:flex;justify-content:center;margin-top:auto;margin-bottom:calc(var(--pw) * -0.438 - 32px)}
/* A second screen peeks out behind and to the right: its swiped row with the actions stays in view. */
.t-run .lf-tile-media{position:relative}
/* The pair is centered as one: the front phone spans −0.765…+0.235 of its width around the middle, the back one (0.9) −0.135…+0.765. */
.t-run .is-main{z-index:1;transform:translateX(-26.5%)}
.t-run .is-back{position:absolute;left:50%;top:calc(var(--pw) * 0.32);margin-left:calc(var(--pw) * -0.5);transform:translateX(31.5%) scale(.9);transform-origin:50% 0}
.t-live,.t-move{grid-column:span 5}
/* The lower rows: the pause panel and the rest island stack on the left at 5 columns, the keypad spans both on the right at 7. */
.t-fin{grid-column:1 / span 5;grid-row:3}
.t-rest{grid-column:1 / span 5;grid-row:4}
.t-key{grid-column:6 / span 7;grid-row:3 / span 2}
/* The drag caught mid-way: the lifted row held above its slot, so the dimmed ground of the slot shows below it. */
.c-drag{aspect-ratio:780 / 466}
.c-drag img{object-position:50% 60.5%}
.lf-crop{display:block;width:100%;overflow:hidden;border-radius:22px;background:var(--bg)}
.lf-crop img{display:block;width:100%;height:100%;object-fit:cover}
/* Only the rest island, cut along its own capsule (x 32–748.5, y 1424.5–1605.5 of 780 × 1696): no screen ground around it. */
.lf-crop.c-rest{width:90%;margin-inline:auto;aspect-ratio:716.5 / 181;border-radius:999px;background:none}
.c-rest img{width:108.863%;max-width:none;height:auto;margin:-198.814% 0 0 -4.466%;object-fit:fill}
[data-theme="light"] .lf :is(.c-rest,.c-fin,.c-key){box-shadow:0 3px 14px rgba(0,0,0,.07),0 0 0 .5px rgba(0,0,0,.06)}
/* Only the pause panel, cut along its own corners (x 31.5–748, y 1250.5–1605.5 of 780 × 1696, radius 90): no workout behind it. */
.lf-crop.c-fin{width:90%;margin-inline:auto;aspect-ratio:716.5 / 355;border-radius:12.56% / 25.35%;background:none}
.c-fin img{width:108.863%;max-width:none;height:auto;margin:-174.529% 0 0 -4.396%;object-fit:fill}
/* The keypad sheet, cut 6px inside its glass rim (x 6–1156, y 6–1104 of 1162 × 1110) along its own corners (108 top, 154 bottom):
   the rim refracts the screen behind it. The pause panel beside it is cut the same way and drawn at the same device scale. */
.lf-crop.c-key{width:87.2%;margin-inline:auto;aspect-ratio:1150 / 1098;border-radius:9.39% 9.39% 13.39% 13.39% / 9.84% 9.84% 14.03% 14.03%;background:none}
.c-key img{width:101.043%;max-width:none;height:auto;margin:-.522% 0 0 -.522%;object-fit:fill}
/* Beside the stacked pause and rest tiles the keypad tile is as tall as both: the sheet takes the height left under its
   caption (capped by the width), so no gap opens above it. The cut is a clip here, with its shadow as a drop shadow. */
@container lf (min-width:900px){
.t-key .lf-tile-media{position:relative;flex:1 1 0;min-height:240px;margin-top:0;padding-top:0}
.t-key .lf-crop.c-key{position:absolute;inset:24px 0 0;width:auto;aspect-ratio:auto;overflow:visible;border-radius:0;box-shadow:none;display:flex;justify-content:center;align-items:flex-end}
.t-key .c-key img{width:auto;height:auto;max-width:100%;max-height:100%;margin:0;clip-path:inset(.54% round 9.29% 9.29% 13.25% 13.25% / 9.73% 9.73% 13.87% 13.87%)}
[data-theme="light"] .lf .t-key .c-key{filter:drop-shadow(0 3px 7px rgba(0,0,0,.07)) drop-shadow(0 0 .3px rgba(0,0,0,.25))}
}
.lf-la{container-type:inline-size;box-sizing:border-box;aspect-ratio:900 / 328;display:flex;flex-direction:column;justify-content:center;gap:10px;padding:0 7%;border-radius:22px;background:var(--la-bg);color:var(--ink)}
[data-theme="light"] .lf .lf-la{--la-bg:#f2f2f7}
[data-theme="dark"] .lf .lf-la{--la-bg:#000000}
.lf-tile .p-art svg{display:block;width:100%;height:auto;overflow:visible}
.lf-la-cap{align-self:center;font-size:4.4cqw;font-weight:500;color:var(--muted)}
.lf-la-row{display:flex;align-items:center;justify-content:space-between}
.lf-la-time{font-size:17cqw;line-height:.9;font-weight:700;letter-spacing:-0.03em;font-variant-numeric:tabular-nums}
.lf-la-ring{position:relative;width:16cqw;aspect-ratio:1}
.lf-la-ring svg{display:block;width:100%;height:100%}
.lf-la-track{stroke:var(--fill-2)}
.lf-la-fill{stroke:var(--ink)}
.lf-la-pct{position:absolute;inset:0;display:grid;place-items:center;font-size:4.6cqw;font-weight:600;font-variant-numeric:tabular-nums}
.lf-perks{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:16px;margin-top:var(--sp-head)}
.lf-perk{position:relative;overflow:hidden;display:flex;flex-direction:column;gap:8px;box-sizing:border-box;padding:36px;border-radius:28px;background:var(--card);color:var(--ink)}
.lf-perk-t{margin:0;font-size:clamp(22px,2cqw,28px);line-height:1.15;font-weight:600;letter-spacing:-0.022em}
.lf-perk-s{margin:0;max-width:32ch;font-size:17px;line-height:1.45;color:var(--muted);text-wrap:pretty}
.lf-perk svg{display:block;width:100%;height:auto;overflow:visible}
.p-touch{grid-column:1 / span 4;grid-row:1 / span 2;min-height:600px;justify-content:flex-end;align-items:center;text-align:center}
.p-touch .lf-perk-s{max-width:24ch}
.p-touch .p-art{position:absolute;left:50%;top:36%;width:130%;transform:translate(-50%,-50%)}
.p-fast{grid-column:5 / span 8;flex-direction:row;align-items:center;gap:28px;min-height:240px}
.p-fast .p-art{flex:none;width:clamp(150px,28%,230px)}
/* The needle points at the end of the lit arc: 78% of the half circle. */
.g-needle{transform-box:view-box;transform-origin:125px 120px;transform:rotate(50.4deg)}
.p-far{grid-column:5 / span 4;justify-content:flex-end;min-height:344px}
/* The figure sizes to its own tile, so it fills the narrow column without crowding it. */
.p-num-box{container-type:inline-size}
.p-pulse{grid-column:9 / span 4;justify-content:flex-end;min-height:344px}
.lf-bpm{display:flex;align-items:baseline;gap:3cqw;margin:0 0 20px}
.lf-bpm .lf-bpm-heart{align-self:center;flex:none;width:min(52px,13cqw);height:auto;transform-box:fill-box;transform-origin:center}
.lf-bpm-v{font-size:min(112px,30cqw);line-height:.82;font-weight:700;letter-spacing:-0.04em;font-variant-numeric:tabular-nums}
.lf-bpm-u{font-size:min(22px,6cqw);font-weight:600;color:var(--muted);white-space:nowrap}
.p-cloud{grid-column:9 / span 4;width:100%;aspect-ratio:1;align-self:stretch;align-items:center;text-align:center;justify-content:flex-end}
.p-cloud .lf-perk-s{max-width:26ch}
.p-cloud .p-art{width:72%;margin:auto}
.p-num{margin:0 0 20px;font-size:min(184px,50cqw);line-height:.82;font-weight:700;letter-spacing:-0.04em;font-variant-numeric:tabular-nums}
.p-off{grid-column:1 / span 8;flex-direction:row;align-items:center;gap:36px;min-height:240px}
.p-off .p-art{flex:none;width:clamp(96px,10cqw,150px)}
.p-slash-gap{stroke:var(--card)}
.p-swipe{grid-column:9 / span 4;align-items:center;text-align:center;min-height:240px;padding-bottom:0}
.p-swipe .lf-perk-s{max-width:22ch}
.p-swipe .p-art{width:96px;margin-top:auto;margin-bottom:-26px}
.lf-kinds{margin-top:var(--sp-head)}
.lf-kinds-in{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(32px,5cqw,96px);align-items:center}
.lf-kinds-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--sep)}
.lf-kinds-list li{position:relative;padding:clamp(18px,2cqw,26px) 0;border-bottom:1px solid var(--sep)}
/* A pinned stage's item — a kind, a callout — is a button in its title stretched over the item (its row, its text block):
   a tap anywhere on it takes the stage to it. */
.lf-stage-go{padding:0;border:0;background:none;color:inherit;font:inherit;letter-spacing:inherit;text-align:inherit;-webkit-tap-highlight-color:transparent}
.lf-stage-go::after{content:"";position:absolute;inset:0}
.lf-stage-go:focus-visible{outline:none}
.lf-stage-go:focus-visible::after{outline:2px solid var(--ink);outline-offset:-2px;border-radius:12px}
.lf-kind-t{margin:0;font-size:clamp(28px,3.4cqw,48px);line-height:1.05;font-weight:700;letter-spacing:-0.028em}
.lf-kind-s{margin:8px 0 0;font-size:17px;line-height:1.45;color:var(--muted)}
.lf-kinds-phones{--pw:clamp(200px,19cqw,290px);display:flex;gap:20px}
.kr{display:none}
.lf-opts{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:16px;margin-top:var(--sp-head)}
[data-theme="light"] .lf .lf-opts{--scr:#f2f2f7}
[data-theme="dark"] .lf .lf-opts{--scr:#2c2c2e}
.lf-opts .lf-perk{justify-content:flex-end}
.o-text{position:relative;z-index:1;display:flex;flex-direction:column;gap:8px}
.o-health{grid-column:1 / span 7;min-height:460px}
.o-health .p-art{position:absolute;left:0;right:0;top:9%}
.o-ecg-base{stroke-opacity:.12}
.o-heart{transform-box:fill-box;transform-origin:center}
.o-live{grid-column:8 / span 5;min-height:460px}
.lf-opts .o-live{justify-content:flex-start}
.o-phone{position:absolute;left:0;right:0;bottom:-100px;width:min(78%,380px);height:340px;margin-inline:auto;box-sizing:border-box;padding:10px;border-radius:62px 62px 0 0;background:var(--bezel);box-shadow:0 0 0 1px var(--rim)}
.o-screen{position:relative;height:100%;border-radius:52px 52px 0 0;background:var(--scr)}
.o-lock{position:absolute;left:0;right:0;top:74px;display:flex;flex-direction:column;align-items:center;gap:2px}
.o-date{font-size:17px;font-weight:600;color:var(--ink-2)}
.o-time{font-size:clamp(76px,7.4cqw,100px);line-height:1;font-weight:700;letter-spacing:-0.03em;font-variant-numeric:tabular-nums}
.lf-perk .o-batt{position:absolute;right:9%;top:26px;width:26px}
.o-isl-btn{position:absolute;z-index:2;top:12px;left:0;right:0;width:52%;height:40px;margin-inline:auto;padding:0;border:0;background:none;color:#fff;font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
.o-isl-btn:focus-visible{border-radius:999px}
.o-island{position:absolute;inset:0;box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;padding:0 7px 0 16px;border-radius:999px;background:#000;color:#fff}
/* The expanded island spans 94% of the screen; the clip starts as the compact pill (52% of the screen, 40px tall). */
.o-isl-x{position:absolute;top:0;left:-40.385%;width:180.77%;height:130px;box-sizing:border-box;padding:22px 24px 0;border-radius:46px;background:#000;text-align:left;clip-path:inset(0 22.34% calc(100% - 40px) round 20px);opacity:0;pointer-events:none;transition:opacity 200ms ease}
.o-isl-btn[aria-expanded="true"] .o-isl-x{clip-path:inset(0 0 0 round 46px);opacity:1;pointer-events:auto}
.o-x-in{display:flex;flex-direction:column;gap:14px;opacity:0;transition:opacity 120ms ease}
.o-isl-btn[aria-expanded="true"] .o-x-in{opacity:1;transition:opacity 220ms ease 120ms}
.o-x-top,.o-x-bot{display:flex;align-items:center;justify-content:space-between;gap:12px}
.o-x-time{font-family:var(--font-display);font-size:34px;line-height:1;font-weight:700;letter-spacing:-0.02em;font-variant-numeric:tabular-nums}
.o-x-ring{position:relative;width:48px;aspect-ratio:1}
.o-x-ring svg{display:block;width:100%;height:100%}
.o-x-pct{position:absolute;inset:0;display:grid;place-items:center;font-size:13px;font-weight:600;font-variant-numeric:tabular-nums}
.o-x-cap{font-size:15px;color:rgba(235,235,245,.6);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.o-x-hr{display:flex;align-items:center;gap:5px;font-size:19px;font-weight:600;font-variant-numeric:tabular-nums}
.o-x-hr svg{width:15px}
.o-isl-time{font-size:15px;font-weight:500;font-variant-numeric:tabular-nums}
.o-isl-ring{width:27px}
.o-glass{grid-column:1 / span 5;min-height:400px}
/* Dashboard cards drift under a glass tab bar, as in the app. */
.o-gl{position:relative;flex:1;min-height:220px;margin:-36px -36px 8px;overflow:hidden;-webkit-mask-image:linear-gradient(to bottom,transparent,#000 22%,#000 86%,transparent);mask-image:linear-gradient(to bottom,transparent,#000 22%,#000 86%,transparent)}
.o-gl-feed{position:absolute;left:36px;right:36px;top:24px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.o-gl-card{display:flex;flex-direction:column;gap:6px;box-sizing:border-box;min-height:104px;padding:14px 16px;border-radius:20px;background:var(--scr)}
.o-gl-card.is-wide{grid-column:span 2;min-height:0;flex-direction:row;align-items:center;justify-content:space-between}
.o-gl-card b{font-family:var(--font-display);font-size:26px;line-height:1;font-weight:700;letter-spacing:-0.02em;font-variant-numeric:tabular-nums}
.o-gl-card small{font-size:14px;font-weight:600;color:var(--muted)}
.o-gl-card em{font-style:normal;font-size:14px;font-weight:600}
.o-gl-bars{display:flex;align-items:flex-end;gap:5px;height:30px;margin-top:auto}
.o-gl-bars i{flex:1;height:calc(var(--h) * 100%);border-radius:3px;background:var(--ink)}
.o-gl-bars i:nth-child(n+4){background:var(--muted)}
.o-gl-bars.is-thin i{flex:none;width:5px;margin-inline:auto;background:var(--ink)}
.o-gl-bar{position:absolute;left:50%;bottom:22px;width:min(86%,330px);height:62px;box-sizing:border-box;display:flex;align-items:center;justify-content:space-around;padding:0 10px;border-radius:999px;color:var(--ink);transform:translateX(-50%);-webkit-backdrop-filter:blur(10px) saturate(1.8);backdrop-filter:blur(10px) saturate(1.8)}
[data-theme="light"] .lf .o-gl-bar{background:rgba(255,255,255,.42);box-shadow:inset 0 1px 1px rgba(255,255,255,.95),inset 0 -1px 2px rgba(255,255,255,.5),0 10px 28px rgba(0,0,0,.12),0 0 0 .5px rgba(0,0,0,.08)}
[data-theme="dark"] .lf .o-gl-bar{background:rgba(58,58,62,.42);box-shadow:inset 0 1px 1px rgba(255,255,255,.32),inset 0 -1px 2px rgba(255,255,255,.12),0 10px 28px rgba(0,0,0,.5),0 0 0 .5px rgba(255,255,255,.12)}
/* The rim catches light at two corners, like the system glass. */
.o-gl-bar::before{content:"";position:absolute;inset:0;padding:1px;border-radius:inherit;background:linear-gradient(120deg,rgba(255,255,255,.9),rgba(255,255,255,0) 32%,rgba(255,255,255,0) 68%,rgba(255,255,255,.55));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.o-gl-bar svg{position:relative;width:26px;height:26px}
.o-gl-sel{position:absolute;left:8px;top:7px;bottom:7px;width:calc((100% - 16px) / 4 + 6px);border-radius:999px;background:rgba(118,118,128,.2)}
.o-remind{grid-column:6 / span 7;min-height:400px}
/* One line under the title, so it lines up with the glass tile next to it. */
.o-remind .lf-perk-s{max-width:none}
.o-stack{position:absolute;left:36px;right:36px;top:clamp(48px,5cqw,72px);max-width:640px;margin-inline:auto}
.o-note{display:flex;align-items:center;gap:clamp(14px,1.4cqw,20px);box-sizing:border-box;padding:clamp(16px,1.7cqw,24px) clamp(20px,2.1cqw,30px) clamp(16px,1.7cqw,24px) clamp(16px,1.7cqw,24px);border-radius:clamp(26px,2.5cqw,36px);background:var(--scr)}
.o-n1{position:relative;z-index:2}
.o-n2,.o-n3{position:absolute;inset:0;padding:0;transform-origin:50% 100%}
.o-n2{z-index:1;transform:translateY(20px) scale(.94);opacity:.7}
.o-n3{transform:translateY(38px) scale(.88);opacity:.4}
.o-app{flex:none;display:grid;place-items:center;width:clamp(52px,5cqw,72px);height:clamp(52px,5cqw,72px);border-radius:22%;background:var(--ink);color:var(--bg)}
.lf-perk .o-app svg{width:60%}
.o-note-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;font-size:clamp(18px,1.7cqw,24px);line-height:1.3}
.o-note-top{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.o-note-t{font-weight:600}
.o-note-when{font-size:clamp(14px,1.2cqw,17px);color:var(--muted)}
.o-dark{grid-column:1 / span 8;min-height:340px}
.o-dark .p-art{position:absolute;right:4%;top:50%;width:clamp(280px,27cqw,390px);transform:translateY(-50%)}
.o-dark .o-text{max-width:44%}
.o-dark[data-sky="night"]{--card:#1c1c1e;--ink:#ffffff;--muted:#98989f}
.o-dark[data-sky="day"]{--card:#ffffff;--ink:#000000;--muted:#6c6c70}
.o-dark,.o-dark .lf-perk-s,.o-shade{transition:background-color 250ms ease,color 250ms ease,fill 250ms ease}
.o-sky-btn{display:block;width:100%;padding:0;border:0;background:none;color:inherit;cursor:pointer;border-radius:24px;-webkit-tap-highlight-color:transparent}
.o-sky-btn svg{display:block;width:100%;height:auto;overflow:visible}
.o-shade{fill:var(--card)}
.o-disc,.o-shade-g,.o-stars,.o-rays{transform-box:fill-box;transform-origin:center}
.o-rays{opacity:0}
.o-dark[data-sky="day"] .o-rays{opacity:1}
.o-dark[data-sky="day"] .o-shade-g,.o-dark[data-sky="day"] .o-stars{opacity:0}
.o-rays,.o-shade-g,.o-stars{transition:opacity 250ms ease}
.o-star{transform-box:fill-box;transform-origin:center}
.lf-rows{display:flex;flex-direction:column;gap:var(--sp-row);margin-top:var(--sp-head)}
.lf-row-t{margin:0;font-size:clamp(40px,6cqw,88px);line-height:.95;letter-spacing:-0.032em;font-weight:700}
.lf-row-s{margin:var(--sp-row-s) 0 0;max-width:30ch;font-size:clamp(20px,2.2cqw,32px);line-height:1.3;font-weight:600;letter-spacing:-0.02em;color:var(--ink-2);text-wrap:pretty}
.lf-card{--pw:clamp(220px,23cqw,320px);--top:56px;position:relative;height:clamp(440px,44cqw,600px);margin-top:var(--sp-row-c);border-radius:28px;background:var(--card);overflow:hidden}
.lf-card > .lf-phone{position:absolute;top:var(--top);right:8%}
.lf-card.is-flip > .lf-phone{right:auto;left:8%}
.lf-anno{position:absolute;left:6%;top:calc(var(--top) + var(--pw) * (0.026 + var(--y) * 2.061));width:calc(86% - var(--pw) * (0.974 - var(--x) * 0.948));transform:translateY(-50%);display:flex;align-items:center;gap:20px;z-index:2}
.lf-card.is-flip .lf-anno{left:calc(8% + var(--pw) * (0.026 + var(--x) * 0.948));right:6%;width:auto;flex-direction:row-reverse}
.lf-anno.is-down{align-items:flex-start;transform:translateY(-4.5px)}
.lf-anno.is-down .lf-line{margin-top:4px}
.lf-anno.is-down .lf-anno-v{font-size:clamp(28px,2.8cqw,44px)}
.lf-anno-text{flex:none;max-width:300px}
/* Two phones at the card's sides; each caption sits in the gap next to the phone it points at. */
.lf-card.is-pair{--side:6%}
.lf-pair{position:absolute;top:var(--top);left:var(--side);right:var(--side);display:flex;justify-content:space-between}
.lf-card.is-pair .lf-anno{width:auto}
.lf-anno.is-a{left:calc(var(--side) + var(--pw) * (0.026 + var(--x) * 0.948));flex-direction:row-reverse}
.lf-anno.is-b{left:auto;right:calc(var(--side) + var(--pw) * (0.974 - var(--x) * 0.948))}
.lf-anno.is-a .lf-line{flex:none;width:calc(var(--pw) * (0.974 - var(--x) * 0.948) + 12px)}
.lf-anno.is-b .lf-line{flex:none;width:calc(var(--pw) * (0.026 + var(--x) * 0.948) + 12px)}
.lf-card.is-pair .lf-anno-text{max-width:min(300px,calc(79cqw - 2 * var(--pw) - 64px))}
.lf-card.is-pair .lf-anno-l{text-wrap:balance}
/* A caption left of its line sits flush against it, so a wrapped label ends where the line starts. */
@container lf (min-width:900px){.lf-card:not(.is-flip) .lf-anno:not(.is-a) .lf-anno-text,.lf-pin:not(.is-flip) .lf-call-text{text-align:right}}
.lf-card.is-pair .lf-anno-v{font-size:clamp(32px,3.6cqw,60px)}
.lf-card.lf-notes{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);height:clamp(400px,38cqw,540px)}
.lf-notes-wall{position:relative;overflow:hidden}
.lf-notes-rows{position:absolute;left:-20%;top:-30%;width:140%;transform:rotate(-7deg);font-size:clamp(20px,2.3cqw,32px);line-height:1.3;font-weight:500;letter-spacing:-0.012em;color:var(--ink-2)}
/* Each row holds its notes twice, so sliding it by half its width loops without a seam. */
.lf-notes-row{display:flex;width:max-content;white-space:nowrap}
.lf-notes-row > span{flex:none;padding-right:.3em}
.lf-notes-rows .hi{color:var(--ink)}
/* Search across the notes: the query types itself, two notes come up with the match marked — one on an exercise, with
   photos, one on a workout. Sized by its column. */
.lf-notes-side{display:grid;place-items:center;container-type:inline-size;padding:0 7% 0 6%}
[data-theme="light"] .lf .ns{--ns-fill:#f2f2f7}
[data-theme="dark"] .lf .ns{--ns-fill:#2c2c2e}
.ns{width:100%;display:flex;flex-direction:column;gap:2.6cqw}
.ns-field{display:flex;align-items:center;gap:2.4cqw;height:13cqw;min-height:46px;max-height:66px;padding:0 5cqw;border-radius:999px;background:var(--ns-fill);font-size:clamp(16px,5.2cqw,25px);font-weight:500;color:var(--ink)}
.ns-glass{flex:none;width:clamp(17px,5.4cqw,26px);color:var(--muted)}
.ns-card{position:relative;isolation:isolate;padding:4.4cqw 5cqw;border-radius:min(24px,5.4cqw);background:var(--ns-fill)}
.ns-head{display:flex;justify-content:space-between;gap:12px;font-size:clamp(13px,3.6cqw,17px);color:var(--muted)}
.ns-ex{font-weight:600;color:var(--ink)}
.ns-text{margin:1.6cqw 0 0;font-size:clamp(15px,4.6cqw,22px);line-height:1.32;color:var(--ink)}
.ns-text mark{position:relative;background:none;color:inherit}
.ns-text mark::before{content:"";position:absolute;inset:-.06em -.14em;z-index:-1;border-radius:.24em;background:color-mix(in srgb,var(--ink) 16%,transparent);transform-origin:left center}
.ns-photos{display:flex;gap:2cqw;margin-top:3cqw}
.ns-ph{display:grid;place-items:center;width:16cqw;max-width:80px;aspect-ratio:1;border-radius:min(14px,3cqw);background:var(--card);color:var(--ink-2)}
.ns-ph svg{width:52%}
.ns-card.is-2{opacity:.72}
.lf-anno-v{display:block;font-size:clamp(40px,4.6cqw,72px);line-height:1;font-weight:700;letter-spacing:-0.032em;font-variant-numeric:tabular-nums}
.lf-anno-l{display:block;margin-top:8px;font-size:17px;line-height:1.4;color:var(--muted)}
.lf-start{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(40px,6cqw,96px);align-items:center}
.lf-start .lf-phone{--pw:clamp(240px,24cqw,330px);margin-inline:auto}
.lf-start .lf-split{font-size:clamp(44px,6.6cqw,104px)}
/* Slide to start, drawn as the app draws it (WorkoutStartSlider): a capsule with a hairline, a white thumb inset 4px,
   the title and three chevrons centred on the run past the resting thumb. The fill trails the thumb, its head and the
   thumb turning green until the thumb clears the chevrons — armed, the chevron turns into a check, and a release there
   starts. Then the fill floods green and the label gives way. --off is the thumb's whole slot: the knob and its insets. */
.lf-slider{--inset:4px;--knob:76px;--held:1.105;--off:calc(var(--knob) + var(--inset) * 2);position:relative;height:var(--off);max-width:460px;margin-top:clamp(36px,4cqw,56px);border-radius:999px;background:var(--card);box-shadow:0 0 0 1px var(--sep),0 10px 30px rgba(0,0,0,.06);overflow:hidden;container-type:inline-size;user-select:none;-webkit-user-select:none}
.lf-slider-fill{position:absolute;inset:var(--inset);border-radius:999px;background:linear-gradient(90deg,#fff 30%,color-mix(in srgb,var(--positive) calc(var(--g,0) * 100%),#fff));clip-path:inset(0 calc(100cqw - var(--off)) 0 0 round 999px)}
.lf-slider-label{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:8px;padding:0 calc(var(--inset) + 16px) 0 calc(var(--off) + 12px);font-size:20px;font-weight:600;letter-spacing:-0.015em;white-space:nowrap;color:var(--ink);pointer-events:none}
/* The same label in black, cut to the run the thumb has passed: the letters under the white fill read dark. */
.lf-slider-label.is-on{color:#000;clip-path:inset(0 calc(100cqw - var(--off) + var(--inset)) 0 0)}
.lf-chev{display:inline-flex;gap:0}
.lf-chev svg{display:block;opacity:var(--rest)}
.lf-chev svg:nth-child(1){--rest:.25}
.lf-chev svg:nth-child(2){--rest:.45}
.lf-chev svg:nth-child(3){--rest:.65}
.lf-thumb{position:absolute;top:var(--inset);left:var(--inset);width:var(--knob);height:var(--knob);padding:0;border:0;border-radius:50%;background:color-mix(in srgb,var(--positive) calc(var(--g,0) * 100%),#fff);color:#000;display:grid;place-items:center;cursor:grab;touch-action:none;box-shadow:0 1px 4px rgba(0,0,0,.18)}
/* Held, the thumb grows to the track's height, as the app's lens does — through `scale`. The drag owns `translate`, which
   applies after the scale; inside `transform` the move would be scaled too and carry the thumb past the track's end. */
.lf-thumb{transition:scale 200ms var(--ease-out)}
.lf-thumb:active{cursor:grabbing;scale:var(--held)}
.lf-thumb svg{grid-area:1 / 1;transition:opacity 160ms var(--ease-out),scale 160ms var(--ease-out)}
.lf-thumb .g-check{opacity:0;scale:.6;color:#fff}
.lf-slider.is-armed .lf-thumb .g-chev{opacity:0;scale:.6}
.lf-slider.is-armed .lf-thumb .g-check{opacity:1;scale:1}
.lf-done-label{position:absolute;inset:0;display:none;align-items:center;justify-content:center;font-size:20px;font-weight:600;color:#ffffff;letter-spacing:-0.015em}
.lf-slider.is-done .lf-slider-fill{background:var(--positive);transition:background-color 200ms ease}
.lf-slider.is-done .lf-slider-label{display:none}
.lf-slider.is-done .lf-done-label{display:flex}
.lf-slider.is-done .lf-thumb{background:#ffffff;cursor:default;scale:none}
.lf-slider.is-done .lf-thumb .g-chev{opacity:0}
.lf-slider.is-done .lf-thumb .g-check{opacity:1;scale:1;color:var(--positive)}
.lf-check path{stroke-dasharray:24;stroke-dashoffset:0}
/* Both notes share one cell, so the column keeps the longer one's height and the slider stays put when the text changes. */
.lf-start-note{display:grid;margin-top:18px}
.lf-start-note > span{grid-area:1 / 1}
.lf-note-ghost{visibility:hidden}
/* «Еще раз» holds its place while hidden: its arrival moves nothing. */
.lf-again{margin-top:14px;padding:0;border:0;background:none;color:var(--ink);font:600 15px/1.4 var(--font);text-decoration:underline;text-underline-offset:4px;cursor:pointer;visibility:hidden;opacity:0;translate:0 4px}
.lf-slider.is-done ~ .lf-again{visibility:visible;opacity:1;translate:none}
/* The bottom padding leaves the page's last corner to the back-to-top button (.lf-top, 52px + 24px) with 24px to spare,
   so it never covers the footer links. */
.lf-foot{padding:var(--sp-sec) 0 100px}
@container lf (max-width:899px){.lf-foot{padding-bottom:76px}}
.lf-word{margin:0;font-size:clamp(36px,13.4cqw,198px);line-height:.9;font-weight:800;letter-spacing:-0.035em;white-space:nowrap}
.lf-foot-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 32px;margin-top:clamp(40px,5cqw,64px);padding-top:24px;border-top:1px solid var(--sep);font-size:15px;color:var(--muted)}
.lf-foot-links{display:flex;flex-wrap:wrap;gap:8px 24px}
/* The padding grows the tap target to 40px without moving the row. */
.lf-foot-links a{padding:10px 0;margin:-10px 0;color:var(--muted);text-decoration:none;transition:color 160ms ease}
.lf-foot-links a[aria-current="page"]{color:var(--ink)}
@media (hover:hover) and (pointer:fine){.lf-foot-links a:hover{color:var(--ink)}}
/* Back to the top. Sticky, like the nav (the page container contains fixed boxes): it rides the bottom right of the
   viewport, and its own place is the page's last corner, so it adds no height. Shown once the first screen is passed. */
.lf-top{position:sticky;bottom:calc(24px + env(safe-area-inset-bottom));z-index:40;display:grid;place-items:center;width:52px;height:52px;margin:-76px 24px 24px auto;border-radius:50%;color:var(--ink);background:var(--bar);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);box-shadow:0 0 0 1px var(--sep),0 6px 20px rgba(0,0,0,.08);text-decoration:none;-webkit-tap-highlight-color:transparent;transition:scale 160ms var(--ease-out)}
.lf-top svg{display:block;margin-top:-2px}
.lf-top:active{scale:.94}
@keyframes lf-rise{from{opacity:0;transform:translateY(.28em)}to{opacity:1;transform:none}}
@keyframes lf-fade{from{opacity:0}to{opacity:1}}
@keyframes lf-phone-in{from{opacity:0;transform:translateY(96px) scale(.96)}to{opacity:1;transform:none}}
@keyframes lf-shutter{from{clip-path:inset(100% 0 0 0 round 13.4% / 6.2%);transform:scale(1.1)}to{clip-path:inset(0 0 0 0 round 13.4% / 6.2%);transform:none}}
@keyframes lf-wave{0%,15%,100%{opacity:var(--rest)}7.5%{opacity:1}}
@keyframes lf-up{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@keyframes lf-l1{0%{opacity:0;transform:translateX(100cqw);animation-timing-function:cubic-bezier(0.33,1,0.68,1)}18%{opacity:1}100%{opacity:1;transform:translateX(-8cqw)}}
@keyframes lf-l2{0%{opacity:0;transform:translateX(-100cqw);animation-timing-function:cubic-bezier(0.33,1,0.68,1)}18%{opacity:1}100%{opacity:1;transform:translateX(8cqw)}}
@keyframes lf-light{from{opacity:.2}to{opacity:1}}
@keyframes lf-ring{from{opacity:0;transform:scale(.55)}to{opacity:1;transform:none}}
@keyframes lf-gauge{from{stroke-dashoffset:.78}to{stroke-dashoffset:0}}
@keyframes lf-needle{from{transform:rotate(-86deg)}to{transform:rotate(50.4deg)}}
@keyframes lf-slash{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes lf-arrow{from{transform:translateY(46px)}to{transform:none}}
@keyframes lf-drift{from{transform:translateY(8%) rotate(-7deg)}to{transform:translateY(-10%) rotate(-7deg)}}
@keyframes lf-ns-in{from{opacity:0;transform:translateY(16px)}}
@keyframes lf-mark{from{transform:scaleX(0)}}
@keyframes lf-ns-in-2{from{opacity:0;transform:translateY(16px)}to{opacity:.72}}
@keyframes lf-draw{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes lf-marquee{from{transform:translateX(-50%)}to{transform:none}}
@keyframes lf-lift{from{transform:translateY(96px)}}
@keyframes lf-beat{0%{opacity:.32}25%,75%{opacity:1}100%{opacity:.32}}
@keyframes lf-beat-end{0%{opacity:.32}25%,100%{opacity:1}}
@keyframes lf-ring-beat{0%,100%{opacity:0;transform:scale(.97)}20%,80%{opacity:1;transform:none}}
@keyframes lf-island{from{clip-path:inset(0 22% round 999px)}to{clip-path:inset(0 0 round 999px)}}
@keyframes lf-feed{from{transform:translateY(40px)}to{transform:translateY(-150px)}}
@keyframes lf-drop{from{opacity:0;transform:translateY(-32px) scale(.96)}}
@keyframes lf-tuck{from{opacity:0;transform:translateY(-12px) scale(.86)}}
@keyframes lf-push{from{opacity:0;transform:translateY(16px)}}
@keyframes lf-pull{from{opacity:0;transform:translateY(-16px)}}
@keyframes lf-swap{from{opacity:0;filter:blur(2px)}to{opacity:1;filter:none}}
/* The rest clock runs down to 1:30 as its tile scrolls in; without scroll timelines it reads 1:30. */
@property --rest-s{syntax:'<integer>';inherits:false;initial-value:30}
@keyframes lf-count{from{--rest-s:39}to{--rest-s:30}}
@keyframes lf-top-in{from{opacity:0;visibility:hidden;transform:translateY(12px)}to{opacity:1;visibility:visible;transform:none}}
@keyframes lf-top-fade{from{opacity:0;visibility:hidden}to{opacity:1;visibility:visible}}
@keyframes lf-eclipse{from{transform:translate(150px,-110px)}}

@media (prefers-reduced-motion:no-preference){
.lf-h1 span{animation:lf-rise 1000ms var(--ease-out) both}
.lf-h1 span:nth-child(2){animation-delay:90ms}
.lf-phone-in{animation:lf-phone-in 800ms var(--ease-out) 200ms both}
.lf-phone-in .lf-screen{animation:lf-shutter 700ms var(--ease-out) 300ms both}
.lf-seg::before{transition:transform 250ms var(--ease-in-out)}
.lf-notes-row{animation:lf-marquee 60s linear infinite}
.lf-notes-row:nth-child(even){animation-direction:reverse}
.o-disc,.o-shade-g,.o-stars,.o-rays,.o-sky{transition:opacity 250ms ease,transform 320ms var(--ease-in-out)}
.o-shade-g{transition:opacity 200ms ease,transform 280ms var(--ease-out)}
.o-rays{transform:rotate(-60deg) scale(.6)}
.o-dark[data-sky="day"] .o-rays{transform:none}
.o-dark[data-sky="day"] .o-disc{transform:scale(.72)}
.o-dark[data-sky="day"] .o-shade-g{transform:translate(40%,-40%)}
.o-dark[data-sky="day"] .o-stars{transform:scale(.8)}
.o-sky-btn:active .o-sky{transform:scale(.97);transition-duration:160ms}
.lf-slider-label:not(.is-on) .lf-chev svg{animation:lf-wave 3s cubic-bezier(.33,0,.67,1) infinite}
.lf-slider-label:not(.is-on) .lf-chev svg:nth-child(2){animation-delay:225ms}
.lf-slider-label:not(.is-on) .lf-chev svg:nth-child(3){animation-delay:450ms}
.lf-slider.is-done .lf-check path{animation:lf-draw-check 420ms var(--ease-out) both}
.lf-slider.is-done .lf-done-label{animation:lf-done-in 200ms var(--ease-out) both}
.lf-again{transition:opacity 200ms var(--ease-out),translate 200ms var(--ease-out),visibility 0s 200ms}
.lf-slider.is-done ~ .lf-again{transition:opacity 200ms var(--ease-out) 120ms,translate 200ms var(--ease-out) 120ms,visibility 0s 120ms}
}
@keyframes lf-done-in{from{opacity:0;transform:translateX(-8px)}}
@keyframes lf-draw-check{from{stroke-dashoffset:24}to{stroke-dashoffset:0}}
@media (prefers-reduced-motion:reduce){
.lf-h1 span,.lf-phone-in{animation:lf-fade 400ms ease both}
.lf-slider.is-done .lf-done-label{animation:lf-fade 200ms ease both}
.lf-again{translate:none;transition:opacity 200ms ease,visibility 0s 200ms}
.lf-slider.is-done ~ .lf-again{transition:opacity 200ms ease,visibility 0s}
}
@supports (animation-timeline:scroll()){
.lf-nav::before{animation:lf-fade linear both;animation-timeline:scroll();animation-range:0px 64px}
.lf-top{animation:lf-top-in linear both;animation-timeline:scroll();animation-range:80vh 100vh}
@media (prefers-reduced-motion:reduce){.lf-top{animation-name:lf-top-fade}}
}
@supports (animation-timeline:view()){
@media (prefers-reduced-motion:no-preference){
.lf-up{animation:lf-up linear both;animation-timeline:view();animation-range:entry 0% entry 240px}
.lf-up.d1{animation-range:entry 40px entry 280px}
.lf-up.d2{animation-range:entry 80px entry 320px}
.lf-notes{view-timeline-name:--notes;view-timeline-axis:block}
.lf-notes-rows{animation:lf-drift linear both;animation-timeline:--notes;animation-range:cover 0% cover 100%}
.ns-field{animation:lf-ns-in linear both;animation-timeline:--notes;animation-range:cover 8% cover 18%}
.ns-q span{animation:lf-fade linear both;animation-timeline:--notes;animation-range:cover calc(18% + var(--i) * 2.4%) cover calc(19.6% + var(--i) * 2.4%)}
.ns-card{animation:lf-ns-in linear both;animation-timeline:--notes;animation-range:cover 34% cover 42%}
.ns-card.is-2{animation-name:lf-ns-in-2;animation-range:cover 38% cover 46%}
.ns-text mark::before{animation:lf-mark linear both;animation-timeline:--notes;animation-range:cover 42% cover 48%}
.ns-card.is-2 mark::before{animation-range:cover 46% cover 52%}
.ns-ph{animation:lf-ns-in linear both;animation-timeline:--notes;animation-range:cover 44% cover 50%}
.ns-ph + .ns-ph{animation-range:cover 47% cover 53%}
.lf-perk{view-timeline-name:--perk;view-timeline-axis:block}
.p-rings circle,.p-expand{transform-box:fill-box;transform-origin:center;animation:lf-ring linear both;animation-timeline:--perk}
.p-rings circle:nth-child(5){animation-range:cover 4% cover 30%}
.p-rings circle:nth-child(4){animation-range:cover 8% cover 34%}
.p-rings circle:nth-child(3){animation-range:cover 12% cover 38%}
.p-rings circle:nth-child(2){animation-range:cover 16% cover 42%}
.p-rings circle:nth-child(1){animation-range:cover 20% cover 46%}
.p-expand{animation-range:cover 6% cover 28%}
.p-gauge .g-arc,.p-gauge .g-needle{animation:lf-gauge linear both;animation-timeline:--perk;animation-range:cover 8% cover 40%}
.p-gauge .g-needle{animation-name:lf-needle}
.p-slash,.p-slash-gap{stroke-dasharray:1;animation:lf-slash linear both;animation-timeline:--perk;animation-range:cover 14% cover 38%}
.p-sync .p-cloud-line{stroke-dasharray:1;animation:lf-slash linear both;animation-timeline:--perk;animation-range:cover 6% cover 30%}
.p-sync .p-up{animation:lf-push linear both;animation-timeline:--perk;animation-range:cover 22% cover 40%}
.p-sync .p-down{animation:lf-pull linear both;animation-timeline:--perk;animation-range:cover 26% cover 44%}
.lf-tile{view-timeline-name:--tile;view-timeline-axis:block}
.p-arrow{animation:lf-arrow linear both;animation-timeline:--perk;animation-range:cover 6% cover 36%}
.lf-bpm-heart{animation:lf-ring linear both;animation-timeline:--perk;animation-range:cover 18% cover 38%}
.p-num{counter-reset:rest var(--rest-s);animation:lf-count linear both;animation-timeline:--perk;animation-range:cover 10% cover 40%}
.p-num .p-sec{display:none}
.p-num::after{content:counter(rest,decimal-leading-zero)}
.o-ecg-ink{stroke-dasharray:1;animation:lf-slash linear both;animation-timeline:--perk;animation-range:cover 6% cover 40%}
.o-heart{animation:lf-ring linear both;animation-timeline:--perk;animation-range:cover 30% cover 46%}
.o-phone{animation:lf-lift linear both;animation-timeline:--perk;animation-range:cover 4% cover 34%}
.o-island{animation:lf-island linear both;animation-timeline:--perk;animation-range:cover 22% cover 44%}
.o-island > *{animation:lf-fade linear both;animation-timeline:--perk;animation-range:cover 32% cover 46%}
/* Opens on the drawer curve, closes fast: the collapse answers a tap. */
.o-isl-x{transition:clip-path 280ms var(--ease-out),opacity 120ms ease 180ms}
.o-isl-btn[aria-expanded="true"] .o-isl-x{transition:clip-path 480ms var(--ease-drawer),opacity 0s}
.o-x-in{transform:scale(.94);transform-origin:50% 0;transition:opacity 120ms ease,transform 0s linear 200ms}
.o-isl-btn[aria-expanded="true"] .o-x-in{transform:none;transition:opacity 220ms ease 120ms,transform 420ms var(--ease-out) 60ms}
.o-island{transition:transform 160ms var(--ease-out)}
.o-isl-btn:active .o-island{transform:scale(.96)}
.o-gl-feed{animation:lf-feed linear both;animation-timeline:--perk;animation-range:cover 0% cover 100%}
.o-n1{animation:lf-drop linear both;animation-timeline:--perk;animation-range:cover 8% cover 30%}
.o-n2{animation:lf-tuck linear both;animation-timeline:--perk;animation-range:cover 20% cover 38%}
.o-n3{animation:lf-tuck linear both;animation-timeline:--perk;animation-range:cover 26% cover 44%}
.o-shade{animation:lf-eclipse linear both;animation-timeline:--perk;animation-range:cover 8% cover 44%}
.o-star{animation:lf-ring linear both;animation-timeline:--perk}
.o-star.s1{animation-range:cover 22% cover 36%}
.o-star.s2{animation-range:cover 26% cover 40%}
.o-star.s3{animation-range:cover 30% cover 44%}
.o-star.s4{animation-range:cover 34% cover 48%}
.o-star.s5{animation-range:cover 38% cover 52%}
.lf-split{view-timeline-name:--split;view-timeline-axis:block}
.lf-split .lf-l1{animation:lf-l1 linear both;animation-timeline:--split;animation-range:cover 0% cover 100%}
.lf-split .lf-l2{animation:lf-l2 linear both;animation-timeline:--split;animation-range:cover 0% cover 100%}
}
@media (prefers-reduced-motion:no-preference){@container lf (min-width:900px){
.lf-pin{view-timeline-name:--pin;view-timeline-axis:block}
.lf-call{animation:lf-light linear both;animation-timeline:--pin;animation-range:contain var(--r0) contain var(--r1)}
.lf-call .lf-line{animation:lf-draw linear both;animation-timeline:--pin;animation-range:contain var(--r0) contain var(--r1)}
.lf-call .lf-stage-go{cursor:pointer}
.lf-kinds{height:2200px;view-timeline-name:--kinds;view-timeline-axis:block}
.lf-kinds-stage{position:sticky;top:64px;height:min(calc(100vh - 64px),940px);display:flex;align-items:center}
.lf-kinds-in{width:min(calc(100% - 2 * var(--gutter)),var(--max))}
.lf-kinds-list li{animation:lf-beat linear both;animation-timeline:--kinds;animation-range:contain var(--r0) contain var(--r1)}
.lf-kinds-list .lf-stage-go{cursor:pointer}
.lf-kinds-list li.is-last{animation-name:lf-beat-end}
.lf-kinds-phones{--pw:min(calc((100vh - 170px) * 0.47),360px);position:relative;display:block}
.kp-b{position:absolute;left:0;top:0;animation:lf-swap linear both;animation-timeline:--kinds;animation-range:contain 76% contain 82%}
.kr{display:block;position:absolute;box-sizing:border-box;left:calc(var(--pw) * (0.026 + var(--x) * 0.948));top:calc(var(--pw) * (0.026 + var(--y) * 2.061));width:calc(var(--pw) * 0.948 * var(--w));height:calc(var(--pw) * 2.061 * var(--h));border:3px solid var(--ink);border-radius:calc(var(--pw) * 0.064);animation:lf-ring-beat linear both;animation-timeline:--kinds;animation-range:contain var(--r0) contain var(--r1)}
}}
}
@media (prefers-reduced-motion:no-preference){
::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}
}
@container lf (max-width:1080px){.lf-call-text{width:min(260px,30cqw)}}
@container lf (max-width:899px){
/* The nav scrolls away with the page here. Pinned, it would stop under the see-through strip in-app browsers (Telegram)
   keep above the page for their own header, with the page showing above it. The pinned stages are off here too, so
   anchors need only a little room. */
.lf-nav{position:relative}
.lf-nav::before{display:none}
.lf section,.lf [id]{scroll-margin-top:16px}
/* Sized so the longest line, «для тренировок.», stays on one line. */
.lf-split{font-size:clamp(32px,10.8cqw,46px)}
.lf-up.d1,.lf-up.d2{animation-range:entry 0% entry 240px}
.lf-hero{padding-top:56px}
.lf-hero-space{height:32px}
.lf-pin,.lf-pin.is-flip{--pw:min(76cqw,330px);height:auto}
.lf-stage{position:static;height:auto;display:block}
.lf-track{height:auto;display:flex;flex-direction:column;align-items:center;gap:40px}
.lf-track > .lf-phone{position:relative;left:auto;right:auto}
.lf-call,.is-flip .lf-call,.lf-call.is-up,.lf-call.is-down{position:static;width:100%;transform:none;display:block}
.lf-calls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 20px;width:100%}
.lf-call-text{width:auto}
.lf-call .lf-line{display:none}
.lf-bento{grid-template-columns:minmax(0,1fr)}
.lf-perks{grid-template-columns:minmax(0,1fr)}
.p-touch,.p-fast,.p-far,.p-pulse,.p-cloud,.p-off,.p-swipe{grid-column:auto;grid-row:auto}
.lf-perk{padding:28px}
.p-touch{min-height:440px}
.p-touch{min-height:470px}
.p-touch .p-art{width:112%;top:35%}
.p-fast,.p-off{min-height:0;gap:22px}
.p-fast .p-art{width:104px}
.p-off .p-art{width:84px}
.p-far,.p-pulse{min-height:0}
.p-cloud{aspect-ratio:auto;min-height:340px}
.p-cloud .p-art{width:min(220px,72%)}
.p-swipe{min-height:230px}
.lf-kinds-in{grid-template-columns:minmax(0,1fr);gap:40px}
.lf-kinds-phones{--pw:min(42cqw,220px);justify-content:center}
.lf-opts{grid-template-columns:minmax(0,1fr)}
.o-health,.o-live,.o-glass,.o-remind,.o-dark{grid-column:auto}
.o-health{min-height:330px}
.o-live{min-height:420px}
.o-phone{width:88%}
.o-lock{top:66px}
.o-date{font-size:14px}
.o-time{font-size:64px}
.o-glass{min-height:360px}
.o-gl{margin:-28px -28px 8px}
.o-gl-feed{left:28px;right:28px}
.o-remind{min-height:350px}
.o-stack{left:20px;right:20px;top:28px}
.o-note{gap:14px;padding:14px 18px 14px 14px;border-radius:24px}
.o-app{width:46px;height:46px}
.o-note-body{font-size:15px}
.o-note-when{font-size:14px}
.lf-opts .o-dark{min-height:0}
.o-dark .p-art{position:relative;right:auto;top:auto;width:min(320px,92%);margin:-12px auto 8px;transform:none}
.o-dark .o-text{max-width:none}
.t-run,.t-live,.t-move,.t-rest,.t-key,.t-fin{grid-column:auto;grid-row:auto}
.t-run{min-height:0}
.t-run .lf-tile-media{--pw:min(56cqw,240px);margin-top:8px;margin-bottom:-200px}
.t-run .is-main{transform:translateX(-19.5%)}
.t-run .is-back{transform:translateX(24.5%) scale(.9)}
.lf-card,.lf-card.is-flip{--pw:min(62cqw,280px);height:auto;display:flex;flex-direction:column;padding-top:28px}
.lf-card > .lf-phone,.lf-card.is-flip > .lf-phone{position:relative;top:auto;left:auto;right:auto;margin:28px auto -120px}
.lf-anno,.lf-card.is-flip .lf-anno,.lf-anno.is-down{position:static;order:-1;width:auto;transform:none;display:block;padding:0 28px}
.lf-anno + .lf-anno{margin-top:20px}
.lf-card.lf-notes{display:flex;height:auto;padding-top:0}
.lf-notes-wall{height:280px}
.lf-notes-rows{font-size:21px}
.lf-notes-side{padding:8px 20px 24px}
.lf-anno .lf-line{display:none}
.lf-card.is-pair{--pw:min(38cqw,230px)}
.lf-pair{position:relative;top:auto;left:auto;right:auto;justify-content:center;gap:16px;margin:28px 0 calc(var(--pw) * -0.46)}
.lf-card.is-pair .lf-anno-text{max-width:300px}
.lf-card.is-pair .lf-anno-v{font-size:40px}
.lf-start{grid-template-columns:minmax(0,1fr)}
.lf-start .lf-split{font-size:clamp(40px,10.2cqw,150px)}
.lf-split .lf-l2{padding-left:.3em}
}
@container lf (max-width:560px){
.lf-top{bottom:calc(16px + env(safe-area-inset-bottom));width:44px;height:44px;margin:-60px 16px 16px auto}
.lf-nav-cta{display:none}
.lf-nav-in{gap:16px}
.lf-calls{grid-template-columns:minmax(0,1fr)}
.lf-tile{padding:26px}
.lf-slider{--knob:66px;--held:1.12}
.lf-slider-label,.lf-done-label{font-size:17px}
}
/* <ThemeShot>: the <picture> wrapper drops out of layout, so its <img> sits where the canvas had it. */
.shot{display:contents}
[data-theme="light"] .shot-dark,[data-theme="dark"] .shot-light{display:none}
/* Text pages: one reading column in the site's type, body a notch above the 17px app body for long reading. */
.lf-doc{padding:clamp(72px,9cqw,128px) 0 clamp(96px,12cqw,176px)}
.lf-doc-in{max-width:min(calc(100% - 2 * var(--gutter)),720px);margin-inline:auto;color:var(--ink)}
.lf-doc h1{margin:0;font-size:clamp(40px,6cqw,72px);font-weight:700;line-height:1;letter-spacing:-0.04em}
.lf-doc-date{margin:16px 0 0;color:var(--muted);font-size:15px}
.lf-doc h2{margin:56px 0 0;font-family:var(--font-display);font-size:clamp(22px,2.4cqw,28px);font-weight:700;line-height:1.2;letter-spacing:-0.02em}
.lf-doc h2 + *{margin-top:12px}
.lf-doc p,.lf-doc li{font-size:clamp(17px,1.4cqw,19px);line-height:1.55}
.lf-doc p{margin:16px 0 0}
.lf-doc ul{margin:16px 0 0;padding-left:1.2em}
.lf-doc li + li{margin-top:8px}
.lf-doc a{text-underline-offset:3px}
.lf-doc .lf-doc-date + *,.lf-doc h1 + :not(.lf-doc-date){margin-top:40px}