:root{--ember:#110e0d;--card:#1f1a18;--card-rim:#ffece41a;--copper-fill:#a9614c;--copper-text:#e2a08a;--sticky:#fff1a8;--sticky-ink:#3b3320}.unfold{height:380vh;padding:0}.unfold-pin{grid-template-rows:1fr auto;place-items:center;gap:14px;height:calc(100svh - 64px);padding:clamp(10px,2vh,22px) 0 clamp(12px,2.4vh,24px);display:grid;position:sticky;top:64px}.note{background:var(--panel);border:1px solid var(--card-rim);isolation:isolate;border-radius:20px;flex-direction:column;width:min(1180px,100% - 48px);height:min(760px,100%);display:flex;position:relative;overflow:hidden;box-shadow:0 0 0 1px #0006,0 50px 140px -40px #000000e6,0 0 120px -30px #a9614c47,inset 0 1px #e2a08a59}.note-bar{z-index:6;border-bottom:1px solid var(--line);background:#171312eb;flex:none;align-items:center;gap:14px;height:52px;padding:0 10px 0 18px;display:flex;position:relative}.note-dots{gap:7px;display:flex}.note-dots i{background:#3a302c;border-radius:50%;width:11px;height:11px}.note-name{color:var(--muted);font-size:14px}.note-switch{border:1px solid var(--line);background:#ffffff0a;border-radius:12px;grid-template-columns:1fr 1fr;margin-left:auto;padding:4px;display:grid;position:relative}.note-switch button{z-index:1;height:34px;color:var(--muted);font:550 14.5px var(--font);cursor:pointer;transition:color .25s var(--ease);background:0 0;border:0;border-radius:9px;justify-content:center;align-items:center;gap:8px;padding:0 16px;display:inline-flex;position:relative}.note-switch button[aria-pressed=true]{color:var(--copper-ink)}.note-switch button:focus-visible{outline:2px solid var(--copper-text);outline-offset:2px}.note-switch-pill{width:calc(50% - 4px);transform:translateX(calc(var(--board,0) * 100%));background:linear-gradient(#b36a54,#8f4f3d);border-radius:9px;position:absolute;top:4px;bottom:4px;left:4px;box-shadow:0 6px 16px -6px #a9614ccc}.note-body{transform-origin:0 0;flex:1;min-height:0;position:relative}.note-body:after{content:"";background:linear-gradient(transparent, var(--panel));height:90px;opacity:calc(1 - var(--board,0));pointer-events:none;position:absolute;bottom:0;left:0;right:0}.canvas{opacity:var(--board,0);background:radial-gradient(circle at 1px 1px,#ffece421 1px,#0000 1.5px) 0 0/22px 22px,#141110;position:absolute;inset:-40%}.ndoc{gap:clamp(8px,1.7vh,18px);width:min(700px,100% - 64px);display:grid;position:absolute;top:clamp(16px,4vh,44px);left:50%;transform:translate(-50%)}.blk{transform-origin:0 0;will-change:transform;position:relative}.blk:before{content:"";z-index:-1;background:var(--card);border:1px solid var(--card-rim);opacity:var(--c,0);border-radius:16px;position:absolute;inset:-16px -20px;box-shadow:0 20px 40px -20px #000c}.blk h1{letter-spacing:-.045em;text-wrap:balance;margin:0;font-size:clamp(30px,min(5vw,6.3vh),64px);font-weight:680;line-height:1.02}.progress{color:var(--muted);font-variant-numeric:tabular-nums;align-items:center;gap:12px;margin-top:12px;font-size:13px;display:flex}.progress span{background:linear-gradient(90deg, #d9a293, var(--copper-fill)) 0 0 / var(--done,33%) 100% no-repeat, #ffece414;border-radius:99px;width:min(320px,60%);height:7px}.progress em{font-style:normal}.blk-lede p{max-width:54ch;color:var(--text-2);margin:0;font-size:clamp(16px,min(1.5vw,2.3vh),20px);line-height:1.55}.blk h2{letter-spacing:-.025em;margin:0 0 10px;font-size:clamp(18px,min(1.7vw,2.7vh),24px)}.tasks,.why{gap:clamp(4px,.9vh,8px);margin:0;padding:0;font-size:clamp(15px,min(1.3vw,2.1vh),17.5px);list-style:none;display:grid}.tasks li{align-items:center;gap:12px;display:flex}.tasks .task-action{margin-top:4px}.tasks li.done{color:var(--muted);text-decoration:line-through #ffece44d}.box{border:1.6px solid #ffece447;border-radius:6px;flex:none;place-items:center;width:20px;height:20px;display:grid}.done .box{background:var(--copper-fill);border-color:var(--copper-fill)}.box svg{fill:none;stroke:#fff;stroke-width:2px;stroke-linecap:round;stroke-linejoin:round;width:12px;height:12px}.why li{color:var(--text-2);padding-left:18px;position:relative}.why li:before{content:"";background:var(--copper-fill);border-radius:50%;width:6px;height:6px;position:absolute;top:.62em;left:2px}.note-meta{color:var(--muted);margin:clamp(8px,1.4vh,12px) 0 0 32px;font-size:14px}.box svg{opacity:0}.done .box svg{opacity:1}.sticky-note{background:var(--sticky);width:210px;min-height:150px;color:var(--sticky-ink);transform-origin:0 0;opacity:0;border-radius:6px;padding:16px 18px;font-size:15px;line-height:1.45;position:absolute;box-shadow:0 24px 40px -18px #000000bf}.links{pointer-events:none;width:100%;height:100%;position:absolute;inset:0;overflow:visible}.links path{fill:none;stroke:var(--copper-fill);stroke-width:2.4px;stroke-linecap:round;stroke-dasharray:1 1;stroke-dashoffset:calc(1 - var(--draw,0));marker-end:none}.links .head{fill:var(--copper-fill);stroke:none;opacity:var(--draw,0)}.frame{opacity:var(--frame,0);pointer-events:none;background:#a9614c0d;border:1.5px solid #e2a08a8c;border-radius:14px;position:absolute}.frame span{color:var(--copper-text);background:#a9614c40;border-radius:8px;padding:3px 10px;font-size:13px;font-weight:600;position:absolute;top:10px;left:12px}.present{z-index:4;border:1px solid var(--line-strong);color:var(--text-2);opacity:var(--pres,0);background:#171312eb;border-radius:12px;align-items:center;gap:18px;padding:8px 16px;font-size:14px;display:flex;position:absolute;bottom:18px;left:50%;translate:-50%}.present .flip{transform:scaleX(-1)}.steps{counter-reset:step;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;width:min(1180px,100% - 48px);margin:0;padding:0;list-style:none;display:grid}.steps li{counter-increment:step;border-top:2px solid var(--line);color:var(--muted);transition:border-color .3s var(--ease), color .3s var(--ease);gap:2px;padding:10px 14px 0;font-size:14px;line-height:1.4;display:grid}.steps li b{color:var(--text-2);font-size:15px;font-weight:600}.steps li b:before{content:counter(step) "  ";color:var(--muted);font-variant-numeric:tabular-nums}.steps li.on{border-color:var(--copper-fill);color:var(--text-2)}.steps li.on b{color:var(--text)}.steps li.on b:before{color:var(--copper-text)}.scroll-hint{z-index:3;border:1px solid var(--line-strong);color:var(--text-2);opacity:calc(1 - var(--board,0) * 6);pointer-events:none;background:#171312e6;border-radius:99px;align-items:center;gap:8px;padding:7px 14px;font-size:13.5px;display:inline-flex;position:absolute;bottom:16px;left:50%;translate:-50%}.static .scroll-hint{display:none}.scroll-hint .down{transform:rotate(90deg)}.unfold.static{height:auto}.unfold.static .unfold-pin{height:min(860px,100svh - 64px);position:relative;top:0}.sec-head{gap:14px;margin-bottom:clamp(36px,5vw,56px);display:grid}.bench{grid-template-columns:1.25fr 1fr;grid-template-areas:"quick remind""quick clip""lock clip";gap:16px;display:grid}.tool-quick{grid-area:quick}.tool-remind{grid-area:remind}.tool-clip{grid-area:clip}.tool-lock{grid-area:lock}.tool{background:linear-gradient(180deg, var(--panel-2), var(--panel));border:1px solid var(--line);border-radius:22px;flex-direction:column;display:flex;overflow:hidden}.tool-copy{padding:22px 26px 26px}.tool-copy h3{margin:0 0 6px}.tool-copy p{color:var(--text-2);max-width:48ch;margin:0;font-size:16px}.demo{border:1px solid var(--line);background:radial-gradient(circle at 1px 1px,#ffece414 1px,#0000 1.5px) 0 0/18px 18px,#141110;border-radius:14px;flex:1;min-height:210px;margin:14px 14px 0;position:relative;overflow:hidden}.demo-quick{min-height:330px}.keys{color:var(--muted);align-items:center;gap:8px;display:flex;position:absolute;top:28px;left:28px}.keys kbd{border:1px solid var(--line-strong);min-width:46px;height:46px;color:var(--text-2);font:600 15px var(--font);background:#241e1c;border-bottom-width:3px;border-radius:10px;place-items:center;padding:0 12px;display:grid}.behind{gap:10px;display:grid;position:absolute;top:110px;left:28px;right:40%}.behind i{background:#ffece40f;border-radius:6px;height:10px}.behind i:nth-child(2){width:80%}.behind i:nth-child(3){width:55%}.qwin{background:var(--card);border:1px solid var(--line-strong);border-radius:14px;width:min(330px,70%);position:absolute;bottom:22px;right:22px;box-shadow:0 30px 60px -24px #000000e6}.qwin-bar{border-bottom:1px solid var(--line);justify-content:space-between;padding:12px 16px;font-size:13.5px;display:flex}.qwin-bar span{color:var(--copper-text)}.qwin .type{min-height:26px;margin:14px 16px;font-size:16px}.qwin-foot{min-height:34px;padding:0 16px 14px}.saved{color:var(--ok);background:#7fcf981f;border-radius:99px;align-items:center;gap:6px;padding:4px 10px;font-size:13px;display:inline-flex}.saved svg{fill:none;stroke:currentColor;stroke-width:2px;width:12px;height:12px}.type span{white-space:nowrap;vertical-align:bottom;display:inline-block;overflow:hidden}.demo-remind{min-height:190px;padding:24px}.demo-remind .type{margin:0;font-size:18px}.chip-when{color:var(--copper-text);background:#a9614c29;border:1px solid #e2a08a4d;border-radius:10px;align-items:center;gap:8px;margin-top:14px;padding:7px 8px 7px 12px;font-size:14px;display:inline-flex}.chip-when b{background:var(--copper-fill);color:#fff;border-radius:7px;padding:3px 10px;font-size:13px}.toast{border:1px solid var(--line-strong);width:220px;color:var(--muted);background:#2a2422;border-radius:10px;gap:2px;padding:12px 14px;font-size:13px;display:grid;position:absolute;bottom:16px;right:16px;box-shadow:0 20px 40px -16px #000000e6}.toast b{color:var(--text);font-size:14.5px}.toast-app{font-size:12px}.demo-clip{min-height:260px;padding:20px}.demo-clip ul{gap:10px;margin:0;padding:0;list-style:none;display:grid}.demo-clip li{background:var(--card);border:1px solid var(--line);border-radius:12px;align-items:center;gap:12px;padding:10px 12px;font-size:14.5px;display:flex}.demo-clip li span:last-child{min-width:0;display:grid}.demo-clip li b{text-overflow:ellipsis;white-space:nowrap;font-weight:550;overflow:hidden}.demo-clip small{color:var(--muted);font-size:12.5px}.thumb,.glyph{width:44px;height:34px;color:var(--copper-text);border-radius:8px;flex:none;place-items:center;font-size:13px;font-weight:600;display:grid}.thumb{background:linear-gradient(135deg,#0000 45%,#fff1a88c 45% 60%,#0000 60%),linear-gradient(#3a2c27,#241c19)}.glyph{background:#a9614c29}.copied{background:var(--copper-fill);color:#fff;border-radius:99px;padding:4px 10px;font-size:13px;font-weight:600;position:absolute;bottom:18px;right:20px}.demo-lock{grid-template-columns:1fr auto;align-items:center;gap:18px;min-height:200px;padding:22px;display:grid}.secret{gap:10px;display:grid}.secret b{font-size:17px}.secret i{background:#ffece438;border-radius:6px;height:10px}.secret i.short{width:60%}.pin{background:var(--card);border:1px solid var(--line-strong);color:var(--copper-text);border-radius:14px;justify-items:center;gap:10px;padding:16px 18px;display:grid}.dots{gap:7px;display:flex}.dots i{border:1.5px solid var(--muted);border-radius:50%;width:10px;height:10px}@media (prefers-reduced-motion:no-preference){.playing .keys kbd{animation:key 7s var(--ease) infinite}.playing .keys kbd:nth-of-type(2){animation-delay:.15s}.playing .keys kbd:nth-of-type(3){animation-delay:.3s}.playing .qwin{animation:qwin 7s var(--ease) infinite}.playing .demo-quick .type span{animation:7s steps(30,end) infinite type-q}.playing .demo-quick .saved{animation:pop-q 7s var(--ease) infinite}.playing .demo-remind .type span{animation:7s steps(24,end) infinite type-r}.playing .chip-when{animation:chip 7s var(--ease) infinite}.playing .chip-when b{animation:press 7s var(--ease) infinite}.playing .toast{animation:toast 7s var(--ease) infinite}.playing .demo-clip li{animation:clip-in 8s var(--ease) infinite}.playing .demo-clip .c2{animation-name:clip-in-2}.playing .demo-clip .c3{animation-name:clip-in-3}.playing .copied{animation:copied 8s var(--ease) infinite}.playing .secret i{animation:unblur 7s var(--ease) infinite}.playing .dots i{animation:7s step-end infinite dot}.playing .dots i:nth-child(2){animation-name:dot2}.playing .dots i:nth-child(3){animation-name:dot3}.playing .dots i:nth-child(4){animation-name:dot4}.playing .demo :is(.qwin,.type span,.saved,.chip-when,.chip-when b,.toast,li,.copied,.secret i,.dots i){animation-delay:-1.8s}}@keyframes key{0%,6%{color:var(--text-2);background:#241e1c;transform:none}9%,22%{background:var(--copper-fill);color:#fff;border-color:#c27a64;transform:translateY(2px)}28%,to{color:var(--text-2);background:#241e1c;transform:none}}@keyframes qwin{0%,18%{opacity:0;transform:translateY(24px)scale(.96)}26%,88%{opacity:1;transform:none}96%,to{opacity:0;transform:translateY(10px)}}@keyframes type-q{0%,28%{clip-path:inset(0 100% 0 0)}60%,to{clip-path:inset(0)}}@keyframes pop-q{0%,66%{opacity:0;transform:scale(.9)}70%,88%{opacity:1;transform:none}96%,to{opacity:0}}@keyframes type-r{0%,4%{clip-path:inset(0 100% 0 0)}32%,to{clip-path:inset(0)}}@keyframes chip{0%,36%{opacity:0;transform:translateY(6px)}42%,90%{opacity:1;transform:none}96%,to{opacity:0}}@keyframes press{0%,54%{transform:none}57%{transform:scale(.92)}60%,to{transform:none}}@keyframes toast{0%,62%{opacity:0;transform:translate(30px)}68%,90%{opacity:1;transform:none}96%,to{opacity:0;transform:translate(30px)}}@keyframes clip-in{0%,46%{opacity:1;transform:none}to{opacity:1;transform:none}}@keyframes clip-in-2{0%,14%{opacity:0;transform:translateY(-12px)}22%,to{opacity:1;transform:none}}@keyframes clip-in-3{0%,30%{opacity:0;transform:translateY(-12px)}38%,to{opacity:1;transform:none}}@keyframes copied{0%,55%{opacity:0;transform:translateY(8px)}62%,90%{opacity:1;transform:none}96%,to{opacity:0}}@keyframes unblur{0%,66%{filter:blur(3px);background:#ffece438}74%,92%{filter:none;background:#ffece46b}to{filter:blur(3px)}}@keyframes dot{0%,20%{background:0 0}20%,96%{background:var(--copper-text);border-color:var(--copper-text)}}@keyframes dot2{0%,32%{background:0 0}32%,96%{background:var(--copper-text);border-color:var(--copper-text)}}@keyframes dot3{0%,44%{background:0 0}44%,96%{background:var(--copper-text);border-color:var(--copper-text)}}@keyframes dot4{0%,56%{background:0 0}56%,96%{background:var(--copper-text);border-color:var(--copper-text)}}@media (prefers-reduced-motion:reduce){.secret i{background:#ffece46b}.dots i{background:var(--copper-text);border-color:var(--copper-text)}}.shots{grid-template-columns:1fr 1fr;gap:28px 16px;display:grid}.shot{flex-direction:column;gap:14px;margin:0;display:flex}.shot-wide{grid-column:1/-1}.shot:not(.shot-wide) img{aspect-ratio:16/10;object-fit:cover;object-position:top center;background:#141110}.shot.fit img{object-fit:contain;object-position:center}.shot img{border:1px solid var(--line-strong);box-shadow:var(--shadow-1);border-radius:16px}.shot-wide img{width:100%}.shot figcaption{color:var(--text-2);max-width:52ch;font-size:16px}.shot figcaption b{color:var(--text);font-weight:600}.compare-shot{--cut:50%;border:1px solid var(--line-strong);box-shadow:var(--shadow-2);border-radius:18px;position:relative;overflow:hidden}.compare-shot img{width:100%}.cs-light{clip-path:inset(0 calc(100% - var(--cut)) 0 0);position:absolute;inset:0}.cs-handle{top:0;bottom:0;left:var(--cut);background:var(--copper-text);pointer-events:none;width:2px;position:absolute;translate:-1px}.cs-handle .ic{background:var(--copper-fill);color:#fff;border-radius:50%;width:40px;height:40px;padding:11px;position:absolute;top:50%;left:50%;translate:-50% -50%;box-shadow:0 10px 24px -8px #000c}.cs-range{opacity:0;cursor:ew-resize;width:100%;height:100%;margin:0;position:absolute;inset:0}.cs-range:focus-visible+.cs-handle,.compare-shot:has(.cs-range:focus-visible){outline:2px solid var(--copper-text);outline-offset:4px}.vs{border:1px solid var(--line);border-radius:22px;display:grid;overflow:hidden}.vs-row{border-top:1px solid var(--line);grid-template-columns:.8fr 1.1fr 1.25fr;display:grid}.vs-row:first-child{border-top:0}.vs-row>span{padding:18px 22px;font-size:16px}.vs-row>span:first-child{color:var(--muted);font-size:15px}.vs-them{color:var(--text-2)}.vs-us{color:var(--text);background:#a9614c14;align-items:flex-start;gap:10px;font-weight:550;display:flex}.vs-head>span{color:var(--muted);padding-block:16px;font-size:14px;font-weight:600}.vs-head .vs-us{color:var(--copper-text);background:#a9614c24;font-size:15px}.vs-tick{background:var(--copper-fill);border-radius:50%;flex:none;place-items:center;width:20px;height:20px;margin-top:2px;display:grid}.vs-tick svg{fill:none;stroke:#fff;stroke-width:2.2px;stroke-linecap:round;stroke-linejoin:round;width:11px;height:11px}.more{padding-top:0}.cta-box{grid-template-columns:auto 1fr auto;align-items:center;gap:clamp(20px,4vw,44px);display:grid}.tabby{filter:drop-shadow(0 18px 24px #00000080);width:clamp(120px,14vw,180px);height:auto}.tabby-wrap{position:relative}.bubble{width:max-content;max-width:210px;color:var(--copper-text);background:#a9614c2e;border:1px solid #e2a08a4d;border-radius:14px 14px 14px 4px;margin:0;padding:8px 14px;font-size:15px;position:absolute;top:-46px;left:78%}@media (prefers-reduced-motion:no-preference){.cta.seen .tabby{animation:wave 1.2s var(--ease) both}}@keyframes wave{0%{opacity:0;transform:translateY(18px)rotate(-6deg)}60%{opacity:1;transform:translateY(-4px)rotate(3deg)}to{transform:none}}@media (width<=1020px){.bench{grid-template-columns:1fr 1fr;grid-template-areas:"quick quick""remind clip""lock clip"}.cta-box{grid-template-columns:auto 1fr}.cta-side{grid-column:1/-1;justify-items:start}}@media (width<=760px){.note,.steps{width:calc(100% - 24px)}.note-name{display:none}.note-switch button{padding:0 12px}.steps{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.steps li:last-child{display:none}.frame span{left:auto;right:12px}.unfold{height:240vh}.steps li{padding:8px 4px 0;font-size:0}.steps li b{font-size:13px}.steps li b:before{content:""}.sticky-note{width:150px;min-height:110px;font-size:13px}.bench{grid-template-columns:1fr;grid-template-areas:"quick""remind""clip""lock"}.shots{grid-template-columns:1fr}.vs-row{grid-template-columns:1fr 1fr}.vs-row>span:first-child{grid-column:1/-1;padding-bottom:0}.vs-head>span:first-child{display:none}.cta-box{grid-template-columns:1fr;justify-items:start}}.rest{padding-top:0}.rest-list{grid-template-columns:1fr 1fr;column-gap:48px;margin:0;padding:0;list-style:none;display:grid}.rest-list li{border-top:1px solid var(--line);gap:16px;padding:20px 0;display:flex}.rest-list .box{background:var(--copper-fill);border-color:var(--copper-fill);margin-top:3px}.rest-list .box svg{opacity:1}.rest-list h3{margin:0 0 4px;font-size:18px}.rest-list p{color:var(--text-2);margin:0;font-size:16px}.bubble:before{content:"";background:inherit;border-bottom:1px solid #e2a08a4d;border-left:1px solid #e2a08a4d;width:12px;height:12px;position:absolute;bottom:10px;left:-7px;transform:rotate(45deg)}.steps li.past b:before{color:var(--copper-text)}@media (width<=760px){.rest-list{grid-template-columns:1fr}.tabby-wrap{align-items:center;gap:14px;display:flex}.bubble{position:relative;top:auto;left:auto}.scroll-hint{display:none}}.tpl-in{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);align-items:center;gap:clamp(32px,5vw,64px);display:grid}.tpl-copy h2{margin:0 0 14px}.tpl-names{flex-wrap:wrap;gap:8px;margin:24px 0 0;padding:0;list-style:none;display:flex}.tpl-names li{border:1px solid var(--line-strong);color:var(--text-2);background:#ffffff08;border-radius:99px;padding:5px 12px;font-size:14px}.tpl-note{color:var(--muted);margin:20px 0 0;font-size:15px}.tpl-shot{margin:0}.tpl-shot img{border:1px solid var(--line-strong);width:100%;box-shadow:var(--shadow-2);border-radius:18px}@media (width<=1020px){.tpl-in{grid-template-columns:1fr}}.cta-box{grid-template-columns:auto 1fr auto;align-items:center;padding:36px clamp(28px,4vw,56px)}.cta-box .tabby{filter:drop-shadow(0 10px 18px #00000073);width:auto;height:clamp(130px,12vw,156px)}.cta-copy,.cta-side{padding-bottom:0}@media (width<=1020px){.cta-box{grid-template-columns:auto 1fr}.cta-side{grid-column:2;justify-items:start}}@media (width<=760px){.cta-box{grid-template-columns:1fr;padding-top:32px}.cta-box .tabby{order:3;justify-self:center;height:130px}.cta-side{grid-column:auto;padding-bottom:8px}}