:root{--night:#08080A;--text:#EEEBE6;--muted:#8E8A84;--line:rgba(238,235,230,.12);--p1:#FFC2A4;--p2:#FF86BC;--p3:#86ADFF;--p4:#A6F2DA;--mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;--sans:'Inter',-apple-system,BlinkMacSystemFont,'Helvetica Neue',sans-serif}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--night);color:var(--text);font-family:var(--sans);font-weight:300;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.hero{position:relative;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:72px 20px 96px;background:radial-gradient(900px 600px at 50% 38%,rgba(255,255,255,.035),transparent 60%)}
.wm{display:block;width:420px;max-width:78vw;height:auto;margin-top:60px;overflow:visible;color:var(--text);opacity:0;animation:rise 1.6s cubic-bezier(.2,.7,.2,1) 2.1s forwards}
.tag{margin:22px 0 0;font-family:var(--mono);font-size:11px;letter-spacing:.34em;padding-left:.34em;color:var(--muted);text-transform:uppercase;opacity:0;animation:rise 1.6s cubic-bezier(.2,.7,.2,1) 2.4s forwards}
.wl{margin-top:52px;width:100%;max-width:440px;opacity:0;animation:rise 1.6s cubic-bezier(.2,.7,.2,1) 2.7s forwards}
.wl-row{display:flex;gap:8px;padding:5px;border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.02);transition:border-color .5s,box-shadow .5s}
.wl-row:focus-within{border-color:rgba(238,235,230,.28);box-shadow:0 0 40px -8px rgba(255,134,188,.18),0 0 60px -12px rgba(134,173,255,.16)}
.wl input{flex:1;min-width:0;background:none;border:0;outline:0;color:var(--text);font:300 15px/1 var(--sans);padding:0 18px;letter-spacing:.01em}
.wl input::placeholder{color:#5E5A54}
.wl button{flex:0 0 auto;border:0;border-radius:999px;padding:13px 22px;background:var(--text);color:var(--night);font:400 11px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;cursor:pointer;transition:background .4s,transform .4s}
.wl button:hover{background:#fff}
.wl button:active{transform:scale(.98)}
.wl button[disabled]{opacity:.6;cursor:default}
.wl-msg{margin:16px 0 0;text-align:center;font-size:13px;color:var(--muted);min-height:1.4em;transition:color .5s}
.wl-msg.err{color:#E8A39A}
.wl.done .wl-row{display:none}
.wl.done .wl-msg{font-family:var(--mono);font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--text)}
.wl.done .wl-msg::before{content:"";display:block;width:6px;height:6px;margin:0 auto 18px;border-radius:50%;background:var(--p1);box-shadow:0 0 18px 4px rgba(255,194,164,.55)}
.scroll{position:absolute;bottom:28px;left:50%;width:1px;height:44px;margin-left:-.5px;background:var(--line);overflow:hidden;opacity:0;animation:rise 1.6s ease 3.4s forwards}
.scroll span{position:absolute;left:0;top:-40%;width:1px;height:40%;background:var(--text);animation:drip 2.8s cubic-bezier(.6,0,.4,1) infinite}
@keyframes drip{to{top:100%}}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

.sec{max-width:1120px;margin:0 auto;padding:140px 28px;border-top:1px solid var(--line)}
.lbl{margin:0 0 40px;font-family:var(--mono);font-size:11px;letter-spacing:.34em;text-transform:uppercase;color:var(--muted)}
.lbl span{color:var(--text);margin-right:14px}
h2{margin:0 0 72px;font-weight:300;font-size:clamp(30px,4.4vw,52px);line-height:1.12;letter-spacing:-.02em}
h3{margin:0 0 10px;font-weight:400;font-size:16px;letter-spacing:.01em}
p{line-height:1.65}
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:48px}
.steps li{border-top:1px solid var(--line);padding-top:28px}
.steps .n{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.2em;color:var(--muted);margin-bottom:28px}
.steps p,.card p{margin:0;color:var(--muted);font-size:14px}
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.card{background:var(--night);padding:32px 26px 30px;min-height:240px;display:flex;flex-direction:column;justify-content:flex-end;transition:background .6s}
.card:hover{background:#0d0d10}
.card h3{font-size:15px}
.card:last-child{grid-column:span 1}
.g{display:block;width:56px;height:56px;margin-bottom:auto;position:relative;--c:rgba(238,235,230,.8);
  background-image:radial-gradient(var(--c) .9px,transparent 1.2px);background-size:6px 6px;opacity:.85;transition:opacity .6s}
.card:hover .g{opacity:1}
.g-portrait{-webkit-mask:radial-gradient(circle at 50% 34%,#000 13px,transparent 14px),radial-gradient(ellipse 26px 18px at 50% 100%,#000 98%,transparent);mask:radial-gradient(circle at 50% 34%,#000 13px,transparent 14px),radial-gradient(ellipse 26px 18px at 50% 100%,#000 98%,transparent)}
.g-love{-webkit-mask:radial-gradient(circle at 36% 50%,#000 15px,transparent 16px),radial-gradient(circle at 64% 50%,#000 15px,transparent 16px);mask:radial-gradient(circle at 36% 50%,#000 15px,transparent 16px),radial-gradient(circle at 64% 50%,#000 15px,transparent 16px)}
.g-shape{-webkit-mask:radial-gradient(circle at 34% 36%,#000 12px,transparent 13px),radial-gradient(circle at 66% 36%,#000 12px,transparent 13px),conic-gradient(from 135deg at 50% 88%,#000 90deg,transparent 0);mask:radial-gradient(circle at 34% 36%,#000 12px,transparent 13px),radial-gradient(circle at 66% 36%,#000 12px,transparent 13px),conic-gradient(from 135deg at 50% 88%,#000 90deg,transparent 0)}
.g-remix{-webkit-mask:radial-gradient(circle,#000 27px,transparent 28px);--c:#fff;background-image:radial-gradient(rgba(255,255,255,.9) .9px,transparent 1.2px),linear-gradient(135deg,var(--p1),var(--p2),var(--p3),var(--p4));background-size:6px 6px,100% 100%;background-blend-mode:multiply;mask:radial-gradient(circle,#000 27px,transparent 28px);opacity:.5}
.g-time{-webkit-mask:linear-gradient(to top,#000 0 30%,transparent 0) 0 0/18% 100% no-repeat,linear-gradient(to top,#000 0 50%,transparent 0) 27% 0/18% 100% no-repeat,linear-gradient(to top,#000 0 72%,transparent 0) 55% 0/18% 100% no-repeat,linear-gradient(to top,#000 0 100%,transparent 0) 100% 0/18% 100% no-repeat;mask:linear-gradient(to top,#000 0 30%,transparent 0) 0 0/18% 100% no-repeat,linear-gradient(to top,#000 0 50%,transparent 0) 27% 0/18% 100% no-repeat,linear-gradient(to top,#000 0 72%,transparent 0) 55% 0/18% 100% no-repeat,linear-gradient(to top,#000 0 100%,transparent 0) 100% 0/18% 100% no-repeat}
.g-family{-webkit-mask:radial-gradient(circle at 22% 56%,#000 10px,transparent 11px),radial-gradient(circle at 50% 40%,#000 13px,transparent 14px),radial-gradient(circle at 78% 56%,#000 10px,transparent 11px),radial-gradient(circle at 50% 86%,#000 8px,transparent 9px);mask:radial-gradient(circle at 22% 56%,#000 10px,transparent 11px),radial-gradient(circle at 50% 40%,#000 13px,transparent 14px),radial-gradient(circle at 78% 56%,#000 10px,transparent 11px),radial-gradient(circle at 50% 86%,#000 8px,transparent 9px)}
.g-pet{-webkit-mask:conic-gradient(from -40deg at 50% 22%,#000 80deg,transparent 0);mask:conic-gradient(from -40deg at 50% 22%,#000 80deg,transparent 0)}
.cards::after{content:"";background:var(--night)}
.print-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:80px;align-items:center}
.print h2{margin-bottom:32px}
.lead{color:var(--muted);font-size:16px;max-width:440px;margin:0 0 48px}
.specs{margin:0;display:grid;gap:0;max-width:440px}
.specs div{display:flex;justify-content:space-between;padding:16px 0;border-top:1px solid var(--line);font-size:14px}
.specs div:last-child{border-bottom:1px solid var(--line)}
.specs dt{font-family:var(--mono);font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--muted)}
.specs dd{margin:0}
.frame{position:relative;aspect-ratio:1;max-width:440px;width:100%;justify-self:end;padding:0 0 28px}
.canvas{position:absolute;inset:0 0 28px;border:1px solid var(--line);padding:6%;background:#0b0b0e;box-shadow:0 40px 120px -40px rgba(255,134,188,.12),0 20px 80px -30px rgba(134,173,255,.12)}
.tiles{width:100%;height:100%;display:grid;grid-template-columns:repeat(24,1fr);gap:1px}
.tiles i{display:block;border-radius:1px;opacity:.9}
.dim{position:absolute;left:0;right:0;bottom:0;text-align:center;font-family:var(--mono);font-size:10px;letter-spacing:.3em;color:var(--muted)}
.dim::before,.dim::after{content:"";position:absolute;top:50%;width:calc(50% - 44px);height:1px;background:var(--line)}
.dim::before{left:0}.dim::after{right:0}
footer{max-width:1120px;margin:0 auto;padding:40px 28px calc(40px + env(safe-area-inset-bottom));border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--muted)}
footer a{text-decoration:none;transition:color .4s}footer a:hover{color:var(--text)}
.reveal{opacity:0;transform:translateY(16px);transition:opacity 1.4s cubic-bezier(.2,.7,.2,1),transform 1.4s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}
@media (max-width:900px){.cards{grid-template-columns:repeat(2,1fr)}.print-grid{grid-template-columns:1fr;gap:64px}.frame{justify-self:center}}
@media (max-width:720px){.steps{grid-template-columns:1fr;gap:40px}.sec{padding:96px 22px}h2{margin-bottom:48px}.card{min-height:200px;padding:26px 20px}}
@media (max-width:480px){.lz-mark{--lz-s:236px!important}.wm{margin-top:44px;max-width:72vw}.tag{font-size:10px}.wl{margin-top:40px}
  .wl-row{flex-direction:column;border:0;padding:0;gap:10px;background:none}.wl input{flex:none;width:100%;border:1px solid var(--line);border-radius:999px;height:52px;font-size:16px;text-align:center}.wl-row:focus-within{box-shadow:none}.wl input:focus{border-color:rgba(238,235,230,.3)}.wl button{height:52px}
  footer{flex-direction:column}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.wm,.tag,.wl,.scroll{animation:none;opacity:1}.scroll span{animation:none}.reveal{opacity:1;transform:none;transition:none}}
.card-more{justify-content:center;align-items:center}.card-more .lbl{font-size:10px}