.lhero-section{padding-inline:16px}.lhero-stage{container-type:inline-size;--lhero-phone-width: min( calc(100cqw - 46px) , 360px);--lhero-phone-height: calc(var(--lhero-phone-width) * 13 / 6);--lhero-mac-inset: clamp(0px, calc((100cqw - 700px)*.3) , 160px);--lhero-height-difference: 0px;display:grid;grid-template-columns:minmax(0,1fr);align-items:center;max-width:1240px;margin:0 auto;padding:56px 0;background:transparent}.lhero-demo-wrap{grid-area:1 / 1;position:relative;width:calc(100% - var(--lhero-mac-inset));height:calc(var(--lhero-phone-height) - var(--lhero-height-difference));min-width:0;z-index:1}.lhero-demo-frame{position:relative;display:flex;flex-direction:column;height:100%;background-color:var(--color-todo-log-page)}.lhero-demo-chrome{background-color:var(--color-todo-log-page);border-bottom:1px solid color-mix(in srgb,var(--color-todo-log-ink-sub) 22%,transparent)}.lhero-demo-viewport{flex:1;min-height:0;overflow:hidden}.lhero-phone{grid-area:1 / 1;position:relative;justify-self:end;width:var(--lhero-phone-width);z-index:2}.lhero-phone-frame{position:relative;width:100%;aspect-ratio:600 / 1300;border-radius:14%/6.4%;--pf-bezel: #33343b;--pf-bezel-shadow: inset 0 0 0 2px rgba(255, 255, 255, .07), 0 26px 60px -12px rgba(0, 0, 0, .6);background:var(--pf-bezel);box-shadow:var(--pf-bezel-shadow)}[data-theme=dark] .lhero-phone-frame{--pf-bezel: #000;box-shadow:0 0 0 1.5px #ffffff2e,var(--pf-bezel-shadow)}.lhero-phone-screen{position:absolute;top:0;right:0;bottom:0;left:0;margin:3.4%;border-radius:10.5%/4.9%;overflow:hidden;background:var(--color-surface-1)}[data-theme=dark] .lhero-phone-screen{background:var(--color-surface-2)}.lhero-phone-shot{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover;display:block;-webkit-user-select:none;user-select:none}.lhero-phone-shot.is-entering{animation:lhero-phone-shot-in var(--motion-duration-slow) ease-out both}@keyframes lhero-phone-shot-in{0%{opacity:0}to{opacity:1}}@media (prefers-reduced-motion: reduce){.lhero-phone-shot.is-entering{animation:none}}.lhero-phone-nav{position:absolute;top:7%;bottom:11%;width:34%;z-index:3;padding:0;border:0;background:transparent;-moz-appearance:none;appearance:none;-webkit-appearance:none;cursor:pointer}.lhero-phone-nav--prev{left:0;cursor:url(/cursors/arrow-left.svg) 12 12,w-resize}.lhero-phone-nav--next{right:0;cursor:url(/cursors/arrow-right.svg) 12 12,e-resize}.lhero-phone-dots{position:absolute;left:50%;bottom:1%;transform:translate(-50%);z-index:4;display:flex;align-items:center;gap:5px;padding:4px 7px;border-radius:999px;background:var(--color-surface-1);border:1px solid var(--color-border-subtle)}.lhero-phone-dot{width:6px;height:6px;padding:0;border:0;border-radius:999px;cursor:pointer;background:var(--color-text-secondary);opacity:.4}.lhero-phone-dot.is-active{background:var(--color-primary);opacity:1}.lhero-phone-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4%;width:100%;height:100%;padding:8%}.lhero-phone-logo{display:block;width:48%;height:auto;border-radius:20%;border:1px solid var(--color-border-subtle);-webkit-user-select:none;user-select:none}.lhero-phone-wordmark{font-family:Libre Baskerville,serif;font-size:clamp(15px,3.4vw,22px);font-weight:400;color:var(--color-text-primary)}.lhero-phone-island{position:absolute;top:3.1%;left:50%;transform:translate(-50%);width:32%;height:2.3%;min-height:18px;border-radius:999px;background:var(--pf-bezel);z-index:2}@media (min-width: 640px){.lhero-section{padding-inline:32px}}@media (max-width: 767.98px){.lhero-intro{padding-bottom:40px}.lhero-stage{--lhero-height-difference: 48px;padding-top:12px}.lhero-phone-frame{--lhero-phone-primary: 1}}