:root{--accent:#0f62fe;--accent-dark:#0b268a;--accent-ink:#fff;--beacon:#1bb933;--u:1px;--canvas:#f6f7f9;--dot:#11182724;--ink:#0b0c0e;--muted:#484848;--line:#eef0f2;--font:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;--mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;--topbar:calc(60*var(--u));--panel-w:calc(400*var(--u));--t-title:calc(28*var(--u));--t-body:calc(18*var(--u));--t-lh:calc(30*var(--u));--bs:calc(26*var(--u))}.size-compact{--panel-w:calc(361*var(--u));--t-title:calc(22*var(--u));--t-body:calc(14*var(--u));--t-lh:calc(25*var(--u));--bs:calc(20*var(--u))}*{box-sizing:border-box}body.demo-mode{background:var(--canvas);height:100%;color:var(--ink);font-family:var(--font);-webkit-font-smoothing:antialiased;-webkit-user-select:none;user-select:none;margin:0;overflow:hidden}body.demo-mode>header,body.demo-mode>footer{display:none!important}.mono{font-family:var(--mono)}button{font:inherit;color:inherit}button:focus{outline:none}button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.idle,.idle *{cursor:none!important}#app{flex-direction:column;display:flex;position:fixed;inset:0}.topbar{z-index:20;height:var(--topbar);border-bottom:1px solid var(--line);padding:0 calc(22*var(--u))0 calc(56*var(--u));background:#fff;flex:none;align-items:stretch;display:flex;position:relative}.brand{align-items:center;gap:calc(16*var(--u));display:flex}.brand img{height:calc(22*var(--u));width:auto;display:block}.brand .sep{width:1px;height:calc(26*var(--u));background:#d9dce1}.brand .brand-home{cursor:pointer;-webkit-tap-highlight-color:transparent;align-items:center;transition:opacity .2s;display:flex}.brand .brand-home:hover{opacity:.7}.topbar-right{align-items:stretch;gap:calc(10*var(--u));margin-left:auto;display:flex}.chapter-ind{min-width:calc(200*var(--u));padding:0 calc(22*var(--u));justify-content:center;align-items:center;gap:calc(4*var(--u));background:#00000008;flex-direction:column;display:flex}.ci-num{font-size:calc(11*var(--u));color:#111;letter-spacing:.04em}.ci-name{font-size:calc(15*var(--u));color:#000;white-space:nowrap;transition:opacity .25s}.icon-btn{width:calc(36*var(--u));height:calc(36*var(--u));border-radius:calc(7*var(--u));color:#222;cursor:pointer;background:0 0;border:0;align-self:center;place-items:center;transition:background .15s;display:grid}.icon-btn:hover,.icon-btn[aria-expanded=true],.guide-off #guideBtn{background:#0000000d}.icon-btn svg{width:calc(18*var(--u));height:calc(18*var(--u))}.menu{z-index:30;top:calc(var(--topbar) - 8*var(--u));right:calc(22*var(--u));min-width:calc(340*var(--u));padding:calc(16*var(--u))calc(12*var(--u));border-radius:calc(14*var(--u));box-shadow:0 calc(14*var(--u))calc(44*var(--u))#0f172a29,0 0 0 1px #0f172a0d;background:#fff;position:absolute}.menu[hidden]{display:none}.menu{max-height:calc(100vh - var(--topbar) - 40*var(--u));overflow-y:auto}.menu button{align-items:center;gap:calc(18*var(--u));width:100%;padding:calc(10*var(--u))calc(14*var(--u));border-radius:calc(8*var(--u));font-size:calc(15*var(--u));color:#333;text-align:left;cursor:pointer;background:0 0;border:0;display:flex}.menu button:hover{background:#0000000a}.menu .m-num{width:calc(22*var(--u));height:calc(18*var(--u));border-radius:calc(4*var(--u));font-family:var(--mono);font-size:calc(10*var(--u));color:#9aa0a8;flex:none;place-items:center;display:grid}.menu .on{color:#000}.menu .on .m-num{color:#fff;background:#111}.menu .m-sec{padding:calc(6*var(--u))calc(14*var(--u))calc(6*var(--u))calc(54*var(--u));font-size:calc(13*var(--u));color:#7a808a;border-radius:calc(6*var(--u));position:relative}.menu .m-sec.on{color:#111}.menu .m-sec.on:before{content:"";left:calc(40*var(--u));width:calc(5*var(--u));height:calc(5*var(--u));margin-top:calc(-2.5*var(--u));background:var(--accent);border-radius:50%;position:absolute;top:50%}.menu .m-chap+.m-sec{margin-top:calc(-2*var(--u))}.main{flex:1;min-height:0;display:flex;position:relative}.canvas{background-color:var(--canvas);background-image:radial-gradient(var(--dot)calc(1.1*var(--u)),transparent calc(1.35*var(--u)));background-size:calc(26*var(--u))calc(26*var(--u));background-position:calc(13*var(--u))calc(13*var(--u));flex:1;min-width:0;position:relative;overflow:hidden}.stage{transition:opacity .3s ease-in-out;position:absolute;inset:0}.stage.out{opacity:0}.panel{width:var(--panel-w);background:#fff;flex:none;transition:width .45s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden}.is-cover .panel,.is-closing .panel,.guide-off .panel{width:0}.panel-inner{width:var(--panel-w);scrollbar-width:none;height:100%;padding:calc(46*var(--u))calc(50*var(--u))calc(84*var(--u))calc(56*var(--u));transition:opacity .25s;overflow-y:auto}.panel-inner::-webkit-scrollbar{display:none}.p-kicker{font-size:calc(11*var(--u));color:#8a8f98;letter-spacing:.08em;text-transform:uppercase;margin-bottom:calc(14*var(--u))}.p-title{margin:0 0 calc(18*var(--u));font-size:var(--t-title);letter-spacing:-.01em;font-weight:500;line-height:1.2}.p-body{font-size:var(--t-body);line-height:var(--t-lh);color:var(--muted)}.p-body b,.p-note b{color:#111;font-weight:600}.p-body ul{margin:0;padding:0;list-style:none}.p-body li{padding-left:calc(22*var(--u));position:relative}.p-body li+li{margin-top:calc(12*var(--u))}.p-body li:before{content:"";left:calc(3*var(--u));top:calc(var(--t-lh)/2 - 3.5*var(--u));width:calc(7*var(--u));height:calc(7*var(--u));background:var(--accent);border-radius:50%;position:absolute}.p-note{margin-top:calc(28*var(--u));padding:calc(14*var(--u))calc(16*var(--u))calc(14*var(--u))calc(18*var(--u));border-left:calc(3*var(--u))solid var(--accent);border-radius:0 calc(8*var(--u))calc(8*var(--u))0;background:color-mix(in srgb,var(--accent)6%,#fff);font-size:calc(var(--t-body)*.9);color:#30343a;line-height:1.55;transition:opacity .25s}.p-note:empty{display:none}.fading{opacity:0!important}.cover{display:none;position:absolute;inset:0}.is-cover .cover{display:block}.is-cover .devices{display:none}.cover-glow{pointer-events:none;filter:blur(calc(28*var(--u)));background:radial-gradient(34% 40% at 34% 70%,color-mix(in srgb,var(--accent)22%,transparent),transparent 72%),radial-gradient(28% 34% at 60% 22%,#2dd4bf2e,transparent 72%),radial-gradient(24% 30% at 86% 78%,#a78bfa29,transparent 72%);position:absolute;inset:-12%}.cover-text{max-width:48%;position:absolute;top:50%;left:7%;transform:translateY(-50%)}.cover h1{margin:0 0 calc(24*var(--u));font-size:calc(68*var(--u));letter-spacing:-.025em;font-weight:650;line-height:1.04}.cover p{font-size:calc(28*var(--u));color:#16181c;margin:0;line-height:1.32}.cover-card{box-shadow:0 calc(30*var(--u))calc(80*var(--u))#0f172a29,0 calc(6*var(--u))calc(18*var(--u))#0f172a14;background:#fff;border:1px solid #0f172a12;position:absolute;overflow:hidden}.cover-card img{width:100%;height:auto;display:block}.hint{left:50%;bottom:calc(22*var(--u));padding:calc(7*var(--u))calc(14*var(--u));border-radius:calc(6*var(--u));font-size:calc(12*var(--u));color:#6b7280;white-space:nowrap;background:#ffffffeb;border:1px solid #0f172a14;display:none;position:absolute;transform:translate(-50%)}.is-cover .hint:not(:empty){display:block}.chapcard{display:none;position:absolute;inset:0;overflow:hidden}.is-chapter .chapcard{display:block}.is-chapter .devices{display:none}.cc-main{max-width:50%;position:absolute;top:50%;left:8%;transform:translateY(-50%)}.is-chapter .cc-main{animation:.6s cubic-bezier(.2,.7,.2,1) both cc-in}@keyframes cc-in{0%{opacity:0;transform:translateY(calc(-50% + 18*var(--u)))}to{opacity:1;transform:translateY(-50%)}}.cc-num{margin-bottom:calc(18*var(--u));font-size:calc(15*var(--u));letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}.cc-title{font-size:calc(64*var(--u));letter-spacing:-.025em;color:var(--ink);text-wrap:balance;margin:0;font-weight:650;line-height:1.05}.cc-agenda{width:32%;margin:0;padding:0;list-style:none;position:absolute;top:50%;right:7%;transform:translateY(-50%)}.cc-agenda li{align-items:baseline;gap:calc(14*var(--u));padding:calc(10*var(--u))0 calc(10*var(--u))calc(18*var(--u));border-left:calc(3*var(--u))solid #e3e6ea;font-size:calc(17*var(--u));color:#9aa0a8;line-height:1.3;display:flex}.cc-agenda .n{width:calc(22*var(--u));font-family:var(--mono);font-size:calc(12*var(--u));flex:none}.cc-agenda li.done{color:#5b6270}.cc-agenda li.now{border-left-color:var(--accent);color:var(--ink);font-weight:600}.cc-agenda li.now .n{color:var(--accent)}.closing{display:none;position:absolute;inset:0;overflow:hidden}.is-closing .closing{display:block}.is-closing .devices{display:none}.cl-main{position:absolute;top:42%;left:8%;right:8%;transform:translateY(-50%)}.is-closing .cl-main{animation:.7s cubic-bezier(.2,.7,.2,1) both cc-in}.cl-kicker{margin-bottom:calc(26*var(--u));font-size:calc(15*var(--u));letter-spacing:.2em;text-transform:uppercase;color:var(--accent)}.closing h1{margin:0 0 calc(28*var(--u));font-size:calc(104*var(--u));letter-spacing:-.035em;color:var(--ink);font-weight:650;line-height:1}.closing p{max-width:calc(900*var(--u));font-size:calc(26*var(--u));color:#2b2f36;text-wrap:balance;margin:0;line-height:1.4}.closing p b{color:var(--ink);font-weight:600}.cl-journey{border-top:1px solid #d9dde3;margin:0;padding:0;list-style:none;display:flex;position:absolute;bottom:13%;left:8%;right:8%}.cl-journey li{padding:calc(18*var(--u))calc(14*var(--u))0 0;font-size:calc(15*var(--u));color:#4b5260;flex:1;line-height:1.3;position:relative}.cl-journey li:before{content:"";top:calc(-4.5*var(--u));width:calc(8*var(--u));height:calc(8*var(--u));background:var(--accent);border-radius:50%;position:absolute;left:0}.cl-journey .n{margin-bottom:calc(6*var(--u));font-family:var(--mono);font-size:calc(11*var(--u));color:var(--accent);display:block}.cl-foot{font-size:calc(14*var(--u));color:#7a808a;position:absolute;bottom:6%;left:8%}.cl-foot:empty{display:none}.devices{place-items:center;display:grid;position:absolute;inset:0}.device{grid-area:1/1;display:none;position:relative}.device.on{display:block}.device.iphone{width:var(--dw);height:var(--dh);padding:var(--bz);border-radius:calc(var(--dw)*.165);box-shadow:inset 0 0 0 calc(var(--dw)*.005)#5b5b60,inset 0 0 0 calc(var(--dw)*.011)#101012,0 calc(34*var(--u))calc(80*var(--u))#0f172a38,0 calc(8*var(--u))calc(22*var(--u))#0f172a1f;background:linear-gradient(145deg,#3a3a3d,#1c1c1e 38%,#2b2b2e 70%,#19191b)}.device.iphone .screen{width:var(--sw);height:var(--sh);border-radius:calc(var(--sw)*.135)}.device.iphone .island{z-index:5;top:calc(var(--bz) + var(--sw)*.028);width:calc(var(--sw)*.31);height:calc(var(--sw)*.088);background:#000;border-radius:999px;position:absolute;left:50%;transform:translate(-50%)}.hw{width:calc(var(--dw)*.011);background:#2c2c2f;border-radius:2px;position:absolute}.hw.l1{left:calc(var(--dw)*-.009);height:4.2%;top:17%}.hw.l2{left:calc(var(--dw)*-.009);height:7.8%;top:24%}.hw.l3{left:calc(var(--dw)*-.009);height:7.8%;top:33.5%}.hw.r1{right:calc(var(--dw)*-.009);height:11.5%;top:27%}.device.browser{width:var(--sw);border-radius:calc(12*var(--u));box-shadow:0 0 0 1px #0f172a14,0 calc(30*var(--u))calc(70*var(--u))#0f172a2e;background:#fff;overflow:hidden}.device.browser .chrome{height:var(--cb);align-items:center;gap:calc(8*var(--u));padding:0 calc(16*var(--u));background:#f1f3f5;border-bottom:1px solid #e3e6ea;display:flex}.device.browser .chrome i{width:calc(12*var(--u));height:calc(12*var(--u));background:#ff5f57;border-radius:50%}.device.browser .chrome i:nth-child(2){background:#febc2e}.device.browser .chrome i:nth-child(3){background:#28c840}.device.browser .chrome .url{height:calc(24*var(--u));margin-left:calc(18*var(--u));border-radius:calc(6*var(--u));background:#fff;border:1px solid #e3e6ea;flex:0 46%}.device.browser .screen{width:var(--sw);height:var(--sh)}.screen{background:#fff;position:relative;overflow:hidden}.screen video,.screen canvas,.screen .poster{object-fit:fill;width:100%;height:100%;display:block;position:absolute;inset:0}.screen .zoomer{z-index:1;transform-origin:0 0;will-change:transform;position:absolute;inset:0}.screen canvas{z-index:2;opacity:0;pointer-events:none}.screen .poster{opacity:1;pointer-events:none;transition:opacity .25s}.screen .poster.gone{opacity:0}video::-webkit-media-controls{display:none!important}.hs-layer{z-index:4;pointer-events:none;position:absolute;inset:0}.hs-target{pointer-events:auto;cursor:pointer;border-radius:calc(8*var(--u));display:none;position:absolute}.hs-target.on{display:block}.beacon{width:var(--bs);height:var(--bs);opacity:0;pointer-events:none;transition:opacity .35s;position:absolute;top:0;left:0}.beacon.on{opacity:1}.beacon i{background:var(--beacon);border-radius:50%;position:absolute;inset:0}.beacon .b-ring{animation:1.25s cubic-bezier(.215,.61,.355,1) infinite b-ring}.beacon .b-dot{box-shadow:0 0 0 calc(2*var(--u))#fff,0 calc(2*var(--u))calc(8*var(--u))#00000047;animation:1.25s cubic-bezier(.455,.03,.515,.955) infinite b-dot;inset:9%}@keyframes b-ring{0%{opacity:1;transform:scale(.5)}80%{opacity:0}to{opacity:0;transform:scale(2.1)}}@keyframes b-dot{0%,to{transform:scale(1)}50%{transform:scale(1.1)}}.ripple{width:calc(64*var(--u));height:calc(64*var(--u));margin:calc(-32*var(--u))0 0 calc(-32*var(--u));background:color-mix(in srgb,var(--beacon)38%,transparent);opacity:0;pointer-events:none;border-radius:50%;position:absolute}.ripple.go{animation:.5s ease-out ripple}@keyframes ripple{0%{opacity:.95;transform:scale(.2)}to{opacity:0;transform:scale(1.35)}}.nav-btn{z-index:25;bottom:calc(18*var(--u));justify-content:center;align-items:center;gap:calc(16*var(--u));border-radius:calc(6*var(--u));background:var(--accent);color:var(--accent-ink);cursor:pointer;border:0;transition:background .2s,opacity .2s,transform .1s;display:flex;position:fixed}.nav-btn:hover{background:var(--accent-dark)}.nav-btn:active{transform:translateY(1px)}.nav-btn[hidden]{display:none}.nav-btn svg{width:calc(17*var(--u));height:calc(17*var(--u))}.nav-btn.next{right:calc(18*var(--u));height:calc(50*var(--u));padding:0 calc(20*var(--u))0 calc(22*var(--u));font-size:calc(15*var(--u));letter-spacing:.06em}.nav-btn.prev{left:calc(18*var(--u));width:calc(50*var(--u));height:calc(50*var(--u))}.nav-actions{z-index:25;right:calc(18*var(--u));bottom:calc(18*var(--u));align-items:center;gap:calc(12*var(--u));display:flex;position:fixed}.nav-actions .nav-btn{position:static;bottom:auto;right:auto}.nav-btn.demo-cta{height:calc(50*var(--u));padding:0 calc(20*var(--u));font-size:calc(15*var(--u));letter-spacing:.02em;white-space:nowrap;color:var(--ink);background:#fff;border:1px solid #0b0c0e29;font-weight:600;text-decoration:none}.nav-btn.demo-cta:hover{color:var(--ink);background:#eceef1}.nav-btn.pulse{animation:1.8s ease-out infinite n-pulse}@keyframes n-pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent)50%,transparent)}70%,to{box-shadow:0 0 0 calc(16*var(--u))transparent}}.blackout{z-index:100;opacity:0;pointer-events:none;background:#000;transition:opacity .25s;position:fixed;inset:0}.blackout.on{opacity:1;pointer-events:auto}.err{z-index:90;color:#b42318;background:#fff;border-radius:12px;max-width:560px;padding:22px 26px;font-size:15px;line-height:1.5;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:0 20px 60px #0f172a40}.err[hidden]{display:none}