.lp-lockin{--pg:#fbfcfe;--ink:#1d2b4f;--grid:#d9e3f2;--mar:#e46a6a;--hl:#ffe45c;--sub:#4a5470;--card:#fff;--shadow:#1d2b4f29;--f-hand:"Caveat", "Bradley Hand", cursive;--f-marker:"Shantell Sans", "Comic Sans MS", system-ui, sans-serif;--f-read:"Atkinson Hyperlegible", system-ui, sans-serif;--f-mono:"IBM Plex Mono", ui-monospace, monospace;--lightningcss-light:initial;--lightningcss-dark: ;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;background:linear-gradient(90deg, transparent 0 calc(max(16px, 4vw) + 34px), var(--mar) calc(max(16px, 4vw) + 34px) calc(max(16px, 4vw) + 36px), transparent 0), linear-gradient(var(--grid) 1px, transparent 1px) 0 0 / 100% 28px, linear-gradient(90deg, var(--grid) 1px, transparent 1px) 0 0 / 28px 100%, var(--pg);color:var(--ink);font-family:var(--f-read);transition:color .6s}.lp-lockin.focus{--pg:#121833;--ink:#eef1ff;--grid:#1f2848;--mar:#5b2c43;--sub:#9aa5cf;--card:#1a2244;--shadow:#0006;--lightningcss-light: ;--lightningcss-dark:initial;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}.lp-lockin .wrap{max-width:1160px;padding-left:max(16px, env(safe-area-inset-left,0px), calc(max(16px, 4vw) + 58px - max(0px, (100vw - 1160px) / 2)));padding-right:max(16px, env(safe-area-inset-right,0px));margin:0 auto}.lp-lockin button{font:inherit;cursor:pointer}.lp-lockin :focus-visible{outline-offset:2px;outline:3px solid #4d8dff}.lp-lockin .hero{grid-template-columns:1.1fr .9fr;align-items:center;gap:44px;padding-block:48px 56px;display:grid;position:relative}.lp-lockin h1{font-family:var(--f-marker);letter-spacing:-.01em;text-wrap:balance;margin:0 0 18px;font-size:clamp(42px,6.6vw,84px);font-weight:800;line-height:1}.lp-lockin h1 s{text-decoration-thickness:4px;-webkit-text-decoration-color:var(--mar);-webkit-text-decoration-color:var(--mar);text-decoration-color:var(--mar);opacity:.75}.lp-lockin .hl{background:linear-gradient(transparent 52%, var(--hl) 52% 90%, transparent 90%);color:#1d2b4f;padding:0 4px}.lp-lockin.focus h1 .hl{color:var(--hl);background:0 0}.lp-lockin .lede{max-width:36ch;margin:0 0 24px;font-size:19px;line-height:1.55}.lp-lockin .row{flex-wrap:wrap;align-items:center;gap:14px;display:flex}.lp-lockin .btn{background:var(--ink);color:var(--pg);box-shadow:4px 4px 0 var(--hl);border:0;border-radius:6px;padding:14px 22px;font-size:16px;font-weight:700;text-decoration:none;display:inline-block}.lp-lockin .hand{font-family:var(--f-hand);color:var(--sub);align-items:center;gap:6px;font-size:24px;display:flex}.lp-lockin .card{background:var(--card);box-shadow:0 14px 30px var(--shadow);z-index:4;justify-self:center;justify-items:center;gap:14px;width:100%;min-width:0;max-width:400px;padding:22px 22px 20px;transition:background .6s;display:grid;position:relative;transform:rotate(-1.8deg)}.lp-lockin .card:before{content:"";background:#ffe45cbf;width:110px;height:28px;position:absolute;top:-14px;left:50%;transform:translate(-50%)rotate(3deg)}.lp-lockin .now{font-family:var(--f-hand);color:var(--sub);text-align:center;font-size:22px;line-height:1.1}.lp-lockin .now b{font-family:var(--f-marker);color:var(--ink);font-size:20px;display:block}.lp-lockin .modes{gap:8px;display:flex}.lp-lockin .mode{border:1.5px solid var(--ink);color:var(--ink);background:0 0;border-radius:999px;padding:6px 12px;font-size:14px;font-weight:700}.lp-lockin .mode[aria-pressed=true]{background:var(--hl);color:#1d2b4f;border-color:var(--hl)}.lp-lockin .ring{aspect-ratio:1;width:min(240px,64vw);max-width:100%;position:relative}.lp-lockin .ring svg{width:100%;height:100%;transform:rotate(-90deg)}.lp-lockin .ring circle{fill:none}.lp-lockin .ring .track{stroke:var(--grid);stroke-width:7px;stroke-dasharray:3 6}.lp-lockin .ring .prog{stroke:var(--hl);stroke-width:13px;stroke-linecap:round;transition:stroke-dashoffset .9s linear}.lp-lockin .read{text-align:center;place-content:center;display:grid;position:absolute;inset:0}.lp-lockin .read b{font-family:var(--f-marker);font-variant-numeric:tabular-nums;font-size:clamp(44px,10vw,58px);font-weight:800;line-height:1}.lp-lockin .read span{font-family:var(--f-hand);color:var(--sub);font-size:22px}.lp-lockin .ctl{gap:10px;display:flex;position:relative}.lp-lockin .ctl button{border:1.5px solid var(--ink);color:var(--ink);background:0 0;border-radius:6px;padding:10px 18px;font-weight:700}.lp-lockin .ctl .go{background:var(--ink);color:var(--pg);padding:12px 26px;font-size:17px;animation:4s ease-in-out infinite lp-lockin-wiggle;position:relative}.lp-lockin .ctl .go:after{content:"";border:3px solid var(--hl);pointer-events:none;border-radius:10px;animation:1.6s ease-out infinite lp-lockin-ping;position:absolute;inset:-4px}.lp-lockin .callout{font-family:var(--f-hand);color:var(--mar);white-space:nowrap;pointer-events:none;align-items:flex-end;gap:2px;font-size:26px;display:flex;position:absolute;top:-38px;right:calc(100% - 6px);transform:rotate(-6deg)}.lp-lockin .callout .write{clip-path:inset(0 100% 0 0);animation:4s steps(9,end) infinite lp-lockin-write;display:inline-block}.lp-lockin .callout path{stroke-dasharray:1;stroke-dashoffset:1px;animation:4s ease-out infinite lp-lockin-draw}.lp-lockin.started .callout{display:none}.lp-lockin.started .ctl .go{animation:none}.lp-lockin.started .ctl .go:after{display:none}.lp-lockin .count{font:700 13px var(--f-mono);color:var(--sub);letter-spacing:.04em;font-variant-numeric:tabular-nums}.lp-lockin.focus .count{color:var(--hl)}.lp-lockin .count.bump{animation:.3s ease-out lp-lockin-bump}.lp-lockin .block{border-top:1.5px dashed var(--grid);justify-content:space-between;align-items:center;gap:12px;width:100%;padding-top:12px;font-size:14px;display:flex}.lp-lockin .block small{color:var(--sub);font-size:12px;display:block}.lp-lockin .tog{background:var(--hl);border:0;border-radius:999px;flex:none;width:44px;height:26px;position:relative}.lp-lockin .tog:after{content:"";background:#1d2b4f;border-radius:50%;width:20px;height:20px;transition:right .2s;position:absolute;top:3px;right:3px}.lp-lockin .tog[aria-pressed=false]{background:var(--grid)}.lp-lockin .tog[aria-pressed=false]:after{right:21px}.lp-lockin .margin-note{font-family:var(--f-hand);color:var(--mar);font-size:22px;position:absolute;bottom:-46px;right:-6px;transform:rotate(-5deg)}.lp-lockin.focus .margin-note{color:var(--hl)}.lp-lockin .dings{pointer-events:none;z-index:3;position:absolute;inset:0;overflow:hidden}.lp-lockin .ding{color:#151a2e;background:#fffffff0;border-radius:16px;align-items:center;gap:10px;width:250px;max-width:70vw;padding:10px 12px;font-size:13px;line-height:1.3;animation:.45s cubic-bezier(.2,.9,.3,1.3) both lp-lockin-ding-in;display:flex;position:absolute;box-shadow:0 12px 30px #00000059}.lp-lockin .ding .ic{color:#fff;border-radius:9px;flex:none;place-items:center;width:34px;height:34px;font-size:15px;font-weight:800;display:grid}.lp-lockin .ding b{color:#5b6276;font-size:12px;font-weight:700;display:block}.lp-lockin .ding .stamp{color:var(--hl);letter-spacing:.14em;text-transform:uppercase;opacity:0;background:#121833d1;border-radius:16px;justify-content:center;align-items:center;gap:8px;font-size:15px;font-weight:800;display:flex;position:absolute;inset:0;transform:scale(1.4)}.lp-lockin .ding.blocked .stamp{animation:.25s ease-out forwards lp-lockin-stamp}.lp-lockin .ding.gone{animation:.5s ease-in forwards lp-lockin-ding-out}.lp-lockin .lower{background:var(--pg);border-top:1.5px solid var(--grid);padding-top:30px;transition:background .6s}.lp-lockin .stickies{grid-template-columns:repeat(4,minmax(0,1fr));gap:22px;padding-block:20px 50px;display:grid}.lp-lockin .sticky{color:#1d2b4f;font-family:var(--f-hand);background:#fff6a8;min-width:0;padding:18px 16px 22px;font-size:24px;line-height:1.15;transition:opacity .6s;transform:rotate(1deg);box-shadow:0 8px 16px #1d2b4f1f}.lp-lockin .sticky:nth-child(2){background:#ffd6e4;transform:rotate(-2deg)}.lp-lockin .sticky:nth-child(3){background:#d6f3e4;transform:rotate(1.5deg)}.lp-lockin .sticky:nth-child(4){background:#dce6ff;transform:rotate(-1deg)}.lp-lockin .sticky b{font-family:var(--f-read);letter-spacing:.08em;text-transform:uppercase;color:#4a5470;margin-bottom:8px;font-size:12px;display:block}.lp-lockin.focus .sticky{opacity:.55}.lp-lockin .closing{flex-wrap:wrap;align-items:center;gap:18px 28px;padding-block:10px 80px;display:flex}.lp-lockin .btn.ghost{color:var(--ink);border:2px solid var(--ink);background:0 0;padding:12px 20px}.lp-lockin .qr{font-family:var(--f-hand);align-items:center;gap:10px;max-width:200px;font-size:21px;line-height:1.05;display:flex}.lp-lockin .qr img{background:#fff;border-radius:6px;flex:none;width:76px;height:76px;padding:4px}@media (width<=860px){.lp-lockin .qr{display:none}}.lp-lockin .closing p{font-family:var(--f-marker);margin:0;font-size:clamp(24px,3vw,34px);font-weight:800}@media (width<=600px){.lp-lockin{background:linear-gradient(var(--grid) 1px, transparent 1px) 0 0 / 100% 28px, linear-gradient(90deg, var(--grid) 1px, transparent 1px) 0 0 / 28px 100%, var(--pg)}.lp-lockin .wrap{padding-left:max(16px, env(safe-area-inset-left,0px))}}@media (width<=860px){.lp-lockin .hero{grid-template-columns:1fr}.lp-lockin .stickies{grid-template-columns:repeat(2,minmax(0,1fr))}.lp-lockin .margin-note{display:none}}@media (prefers-reduced-motion:reduce){.lp-lockin *,.lp-lockin :before,.lp-lockin :after{transition:none!important;animation:none!important}.lp-lockin .callout .write{clip-path:none}.lp-lockin .callout path{stroke-dashoffset:0}}@keyframes lp-lockin-ping{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(1.35,1.6)}}@keyframes lp-lockin-write{0%{clip-path:inset(0 100% 0 0)}25%,85%{clip-path:inset(0)}to{clip-path:inset(0);opacity:0}}@keyframes lp-lockin-draw{0%,25%{stroke-dashoffset:1px}45%,85%{stroke-dashoffset:0;opacity:1}to{stroke-dashoffset:0;opacity:0}}@keyframes lp-lockin-wiggle{0%,45%,70%,to{transform:none}50%{transform:rotate(-5deg)scale(1.08)}55%{transform:rotate(5deg)scale(1.08)}60%{transform:rotate(-3deg)scale(1.05)}65%{transform:rotate(2deg)}}@keyframes lp-lockin-bump{50%{transform:scale(1.15)}}@keyframes lp-lockin-ding-in{0%{opacity:0;transform:translate(var(--fx,0), -10px) scale(.9)}to{opacity:1;transform:none}}@keyframes lp-lockin-stamp{to{opacity:1;transform:scale(1)}}@keyframes lp-lockin-ding-out{to{opacity:0;transform:translateY(30px) scale(.85) rotate(var(--rot,4deg))}}
