.pinnote-page{--paper:#f6f3ec;--paper-warm:#f0ebe0;--paper-deep:#e7e1d3;--ink:#26241e;--ink-soft:#504e48;--ink-faint:#55524c;--accent:#b65200;--accent-light:#e16910;--accent-mist:#f4ece7;--accent-glow:#f2ddd2;--cloud:#fff;--shadow:#26241e14;--shadow-deep:#26241e2e;--font-serif:"Segoe UI", system-ui, sans-serif;--font-sans:"Segoe UI", system-ui, sans-serif;--font-mono:"Cascadia Code", Consolas, ui-monospace, monospace;background:var(--paper);min-height:100vh;color:var(--ink);font-family:var(--font-sans);margin:0;font-size:16px;line-height:1.5;overflow-x:hidden}@media (prefers-color-scheme:dark){.pinnote-page{--paper:#23211e;--paper-warm:#2c2a27;--paper-deep:#3c3935;--ink:#f4efe9;--ink-soft:#b6b1ab;--ink-faint:#b0aba5;--accent:#ce6f33;--accent-light:#e68346;--accent-mist:#37241a;--accent-glow:#442e22;--cloud:#1a1917;--shadow:#0000004d;--shadow-deep:#00000080}}.pinnote-page .container{max-width:1040px;margin:0 auto;padding:0 32px}.pinnote-page h1,.pinnote-page h2,.pinnote-page h3{font-family:var(--font-serif);text-wrap:balance;margin:0;font-weight:600}.pinnote-page p{margin:0}.pinnote-page button{font-family:var(--font-sans)}.pinnote-page a{color:inherit}.pinnote-page .demo-frame{border:1px solid var(--paper-deep);box-shadow:0 2px 4px var(--shadow), 0 .5px 1px var(--shadow-deep);background:var(--paper-warm);border-radius:8px;overflow:hidden}.pinnote-page .demo-chrome{background:var(--paper-deep);justify-content:flex-end;align-items:center;gap:2px;padding:6px;display:flex}.pinnote-page .win-ctrl{width:26px;height:18px;color:var(--ink-faint);border-radius:3px;justify-content:center;align-items:center;display:flex}.pinnote-page .demo-stage{height:220px;padding:20px;position:relative;overflow:hidden}.pinnote-page .feature{border-top:1px solid var(--paper-deep);padding:72px 0}.pinnote-page .feature-inner{align-items:center;gap:64px;display:flex}.pinnote-page .feature.reverse .feature-inner{flex-direction:row-reverse}.pinnote-page .feature-copy,.pinnote-page .feature-demo{flex:1 1 0;min-width:0}.pinnote-page .eyebrow{font-family:var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin-bottom:14px;font-size:11px;display:inline-block}.pinnote-page .feature h2{margin-bottom:14px;font-size:28px;line-height:1.25}.pinnote-page .feature p{color:var(--ink-soft);max-width:42ch;font-size:15px;line-height:1.65}.pinnote-page .changelog{border-top:1px solid var(--paper-deep);padding:72px 0}.pinnote-page .changelog h2{margin-bottom:28px;font-size:28px;line-height:1.25}.pinnote-page .changelog-list{flex-direction:column;gap:20px;max-width:640px;display:flex}.pinnote-page .changelog-entry{background:var(--cloud);border:1px solid var(--paper-deep);box-shadow:0 2px 8px var(--shadow);border-radius:10px;padding:20px 24px}.pinnote-page .changelog-head{align-items:baseline;gap:10px;margin-bottom:12px;display:flex}.pinnote-page .changelog-version{font-family:var(--font-mono);color:var(--ink);font-size:15px;font-weight:600}.pinnote-page .changelog-badge{font-family:var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--cloud);background:var(--accent);border-radius:999px;align-self:center;padding:2px 8px;font-size:10px}.pinnote-page .changelog-date{color:var(--ink-faint);margin-left:auto;font-size:13px}.pinnote-page .changelog-items{flex-direction:column;gap:6px;margin:0;padding:0 0 0 18px;display:flex}.pinnote-page .changelog-items li{color:var(--ink-soft);font-size:15px;line-height:1.6}.pinnote-page .changelog-items li::marker{color:var(--accent)}@media (max-width:760px){.pinnote-page .changelog{padding:48px 0}.pinnote-page .changelog h2{font-size:24px}}.pinnote-page .btn-primary,.pinnote-page .btn-secondary{cursor:pointer;border:1px solid #0000;border-radius:4px;padding:12px 24px;font-size:14px;font-weight:600;text-decoration:none;display:inline-block}.pinnote-page .btn-primary{background:var(--accent);color:var(--cloud)}.pinnote-page .btn-secondary{border-color:var(--paper-deep);color:var(--ink);background:0 0}.pinnote-page .hero{text-align:center;padding:96px 0 72px}.pinnote-page .badge{font-family:var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--accent);background:var(--accent-mist);border:1px solid var(--accent-glow);border-radius:4px;align-items:center;gap:6px;margin-bottom:24px;padding:5px 12px;font-size:11px;display:inline-flex}.pinnote-page .hero h1{margin-bottom:18px;font-size:46px;line-height:1.16}.pinnote-page .hero-sub{color:var(--ink-soft);max-width:480px;margin:0 auto 32px;font-size:17px;line-height:1.6}.pinnote-page .cta-row{justify-content:center;gap:12px;margin-bottom:64px;display:flex}.pinnote-page .hero-scene{max-width:460px;margin:0 auto}.pinnote-page .scene-movie{aspect-ratio:16/9;width:100%;box-shadow:0 2px 4px var(--shadow), 0 .5px 1px var(--shadow-deep);background:#15141a;border-radius:8px;position:relative;overflow:hidden}.pinnote-page .scene-movie:before{content:"";filter:blur(6px);background:radial-gradient(circle at 30% 40%,#b6520059,#0000 55%),radial-gradient(circle at 70% 65%,#047b8547,#0000 55%);animation:16s ease-in-out infinite sceneMovieDrift;position:absolute;inset:-20%}.pinnote-page .scene-letterbox-top,.pinnote-page .scene-letterbox-bottom{background:#0c0b10;height:13%;position:absolute;left:0;right:0}.pinnote-page .scene-letterbox-top{top:0}.pinnote-page .scene-letterbox-bottom{bottom:0}.pinnote-page .scene-play-icon{color:#ffffffd9;background:#ffffff24;border-radius:50%;justify-content:center;align-items:center;width:34px;height:34px;margin:-17px 0 0 -17px;display:flex;position:absolute;top:50%;left:50%}@keyframes sceneMovieDrift{0%{transform:translate(0)scale(1.05)}50%{transform:translate(-3%,2%)scale(1.08)}to{transform:translate(0)scale(1.05)}}@media (prefers-reduced-motion:reduce){.pinnote-page .scene-movie:before{animation:none!important}}@keyframes heroRise{0%{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}.pinnote-page .hero-anim{animation:.6s both heroRise}.pinnote-page .hero-inner .badge.hero-anim{animation-delay:0s}.pinnote-page .hero-inner h1.hero-anim{animation-delay:80ms}.pinnote-page .hero-inner .hero-sub.hero-anim{animation-delay:.16s}.pinnote-page .hero-inner .cta-row.hero-anim{animation-delay:.24s}.pinnote-page .hero-inner .hero-scene.hero-anim{animation-delay:.34s}@media (prefers-reduced-motion:reduce){.pinnote-page .hero-anim{opacity:1!important;animation:none!important;transform:none!important}}.pinnote-page .stage-tile{justify-content:center;align-items:flex-start;padding-top:56px;display:flex}.pinnote-page .morph-card{background:var(--cloud);border:1px solid color-mix(in srgb, var(--ink) 10%, transparent);width:220px;box-shadow:0 2px 4px var(--shadow), 0 .5px 1px var(--shadow-deep);border-radius:8px;padding:16px 18px}.pinnote-page .morph-card-title{font-family:var(--font-serif);color:var(--ink);margin-bottom:8px;font-size:15px}.pinnote-page .morph-line{background:var(--paper-deep);border-radius:4px;height:8px;margin-bottom:6px}.pinnote-page .morph-line.short{width:60%}.pinnote-page .pin-icon{color:var(--accent);opacity:0;position:absolute;top:34px;right:96px}@keyframes morphShrink{0%{transform:translate(0)scale(1)rotate(0)}to{transform:translate(70px,46px)scale(.6)rotate(-3deg)}}@keyframes pinPop{0%,60%{opacity:0;transform:scale(.3)rotate(-25deg)}80%{opacity:1;transform:scale(1.2)rotate(6deg)}to{opacity:1;transform:scale(1)rotate(0)}}.pinnote-page [data-reveal].is-revealed .morph-card{animation:1.2s cubic-bezier(.22,1,.36,1) forwards morphShrink}.pinnote-page [data-reveal].is-revealed .pin-icon{animation:1.2s forwards pinPop}.pinnote-page [data-reveal].is-revealed.reduced-motion .morph-card{animation:none;transform:translate(70px,46px)scale(.6)rotate(-3deg)}.pinnote-page [data-reveal].is-revealed.reduced-motion .pin-icon{opacity:1;animation:none;transform:scale(1)rotate(0)}.pinnote-page .stage-shortcuts{padding-top:28px}.pinnote-page .kbd-row{gap:8px;height:20px;display:flex}.pinnote-page .kbd-hint{font-family:var(--font-mono);background:var(--paper-deep);color:var(--ink-soft);opacity:0;border-radius:4px;padding:4px 8px;font-size:11px;display:inline-block}.pinnote-page .sample-line{color:var(--ink-soft);margin:14px 0 26px;font-size:14px;line-height:1.6}.pinnote-page .target-bold,.pinnote-page .target-italic{color:var(--ink)}.pinnote-page .marquee-box{border:1.5px dashed var(--accent);opacity:0;border-radius:4px;width:0;height:0;position:absolute;top:108px;left:20px}.pinnote-page .capture-thumb{background:var(--accent-glow);border:1px solid var(--accent);opacity:0;border-radius:4px;width:64px;height:40px;position:absolute;top:108px;left:40px}.pinnote-page .insert-caret{background:var(--accent);opacity:0;width:1.5px;height:14px;position:absolute;bottom:26px;left:20px}@keyframes kbdPopBold{0%,4%{opacity:0;transform:translateY(-4px)}10%,20%{opacity:1;transform:translateY(0)}26%,to{opacity:0}}@keyframes kbdPopItalic{0%,24%{opacity:0;transform:translateY(-4px)}30%,40%{opacity:1;transform:translateY(0)}44%,to{opacity:0}}@keyframes boldApply{0%,8%{color:var(--ink);font-weight:400}14%,to{color:var(--accent);font-weight:700}}@keyframes italicApply{0%,30%{color:var(--ink);font-style:normal;font-weight:400}36%,to{color:var(--accent);font-style:italic}}@keyframes marqueeDraw{0%,44%{opacity:0;width:0;height:0}50%{opacity:1;width:90px;height:56px}62%,to{opacity:0;width:90px;height:56px}}@keyframes captureFly{0%,60%{opacity:0;transform:translate(50px)scale(.9)}70%{opacity:1;transform:translate(50px)scale(1)}85%,to{opacity:1;transform:translate(-24px,96px)scale(.55)}}@keyframes caretBlink{0%,78%{opacity:0}82%,86%{opacity:1}84%{opacity:0}to{opacity:1}}.pinnote-page [data-reveal].is-revealed .kbd-bold{animation:3.6s forwards kbdPopBold}.pinnote-page [data-reveal].is-revealed .kbd-italic{animation:3.6s forwards kbdPopItalic}.pinnote-page [data-reveal].is-revealed .target-bold{animation:3.6s forwards boldApply}.pinnote-page [data-reveal].is-revealed .target-italic{animation:3.6s forwards italicApply}.pinnote-page [data-reveal].is-revealed .marquee-box{animation:3.6s forwards marqueeDraw}.pinnote-page [data-reveal].is-revealed .capture-thumb{animation:3.6s forwards captureFly}.pinnote-page [data-reveal].is-revealed .insert-caret{animation:3.6s step-end forwards caretBlink}.pinnote-page [data-reveal].is-revealed.reduced-motion .kbd-bold,.pinnote-page [data-reveal].is-revealed.reduced-motion .kbd-italic{opacity:0;animation:none}.pinnote-page [data-reveal].is-revealed.reduced-motion .target-bold{color:var(--accent);font-weight:700;animation:none}.pinnote-page [data-reveal].is-revealed.reduced-motion .target-italic{color:var(--accent);font-style:italic;animation:none}.pinnote-page [data-reveal].is-revealed.reduced-motion .marquee-box{opacity:0;animation:none}.pinnote-page [data-reveal].is-revealed.reduced-motion .capture-thumb{opacity:1;animation:none;transform:translate(-24px,96px)scale(.55)}.pinnote-page [data-reveal].is-revealed.reduced-motion .insert-caret{opacity:1;animation:none}.pinnote-page .stage-snap{overflow:hidden}.pinnote-page .stage-snap:after{content:"";background:var(--paper-deep);width:4px;position:absolute;top:0;bottom:0;right:0}.pinnote-page .snap-tile{background:var(--accent-glow);border:1px solid var(--accent);width:120px;height:80px;box-shadow:0 2px 4px var(--shadow), 0 .5px 1px var(--shadow-deep);border-right:none;border-radius:8px 0 0 8px;position:absolute;top:70px;right:20px}.pinnote-page .sim-cursor{color:var(--ink);opacity:0;position:absolute;top:96px;right:160px}@keyframes snapCycle{0%,10%{transform:translate(0)}25%,40%{transform:translate(104px)}55%,70%{transform:translate(0)}85%,to{transform:translate(104px)}}@keyframes cursorApproach{0%,22%{opacity:0;transform:translate(0)}28%{opacity:1;transform:translate(0)}40%,55%{opacity:1;transform:translate(66px)}68%,to{opacity:0;transform:translate(0)}}.pinnote-page [data-reveal].is-revealed .snap-tile{animation:4.6s ease-in-out forwards snapCycle}.pinnote-page [data-reveal].is-revealed .sim-cursor{animation:4.6s ease-in-out forwards cursorApproach}.pinnote-page [data-reveal].is-revealed.reduced-motion .snap-tile{animation:none;transform:translate(104px)}.pinnote-page [data-reveal].is-revealed.reduced-motion .sim-cursor{opacity:0;animation:none}.pinnote-page .stage-voice{flex-direction:column;justify-content:center;align-items:center;gap:18px;display:flex}.pinnote-page .mic-icon{color:var(--accent);z-index:1;position:relative}.pinnote-page .mic-ring{border:1.5px solid var(--accent-light);opacity:0;border-radius:50%;width:22px;height:22px;margin:-11px 0 0 -11px;position:absolute;top:50%;left:50%}.pinnote-page .voice-note{background:var(--cloud);border:1px solid color-mix(in srgb, var(--ink) 10%, transparent);width:260px;min-height:20px;box-shadow:0 2px 4px var(--shadow), 0 .5px 1px var(--shadow-deep);border-radius:8px;padding:12px 14px}.pinnote-page .voice-text{color:var(--ink);white-space:nowrap;vertical-align:bottom;max-width:0;font-size:13.5px;display:inline-block;overflow:hidden}@keyframes ringPulseA{0%,20%{opacity:0;transform:scale(.8)}30%{opacity:.7;transform:scale(1)}55%,to{opacity:0;transform:scale(1.6)}}@keyframes ringPulseB{0%,32%{opacity:0;transform:scale(.8)}42%{opacity:.7;transform:scale(1)}67%,to{opacity:0;transform:scale(1.6)}}@keyframes typeReveal{0%,24%{max-width:0}to{max-width:230px}}.pinnote-page [data-reveal].is-revealed .ring-a{animation:2.8s ease-out forwards ringPulseA}.pinnote-page [data-reveal].is-revealed .ring-b{animation:2.8s ease-out forwards ringPulseB}.pinnote-page [data-reveal].is-revealed .voice-text{animation:2.8s steps(30,end) forwards typeReveal}.pinnote-page [data-reveal].is-revealed.reduced-motion .ring-a,.pinnote-page [data-reveal].is-revealed.reduced-motion .ring-b{opacity:0;animation:none}.pinnote-page [data-reveal].is-revealed.reduced-motion .voice-text{max-width:230px;animation:none}.pinnote-page .stage-personalize{padding-top:30px}.pinnote-page .personalize-part{flex-direction:column;justify-content:center;align-items:center;gap:16px;display:flex;position:absolute;inset:20px}.pinnote-page .part-bg{opacity:0}.pinnote-page .color-tile{background:var(--accent-glow);border:1px solid color-mix(in srgb, var(--ink) 10%, transparent);width:120px;height:76px;box-shadow:0 2px 4px var(--shadow), 0 .5px 1px var(--shadow-deep);border-radius:8px}.pinnote-page .swatch-row{gap:8px;display:flex}.pinnote-page .swatch{width:16px;height:16px;box-shadow:inset 0 0 0 1px var(--shadow-deep);border-radius:50%}.pinnote-page .sw-1{background:var(--accent)}.pinnote-page .sw-2{background:var(--accent-light)}.pinnote-page .sw-3{background:color-mix(in srgb, var(--ink-soft) 55%, var(--paper-warm))}.pinnote-page .bg-preview{border:1px solid color-mix(in srgb, var(--ink) 10%, transparent);width:200px;height:90px;box-shadow:0 2px 4px var(--shadow), 0 .5px 1px var(--shadow-deep);border-radius:8px;position:relative;overflow:hidden}.pinnote-page .bg-image{background:linear-gradient(135deg, var(--accent-light), var(--accent));filter:blur();position:absolute;inset:0}.pinnote-page .bg-dim{background:var(--ink);opacity:0;position:absolute;inset:0}.pinnote-page .slider-track{background:var(--paper-deep);border-radius:2px;width:160px;height:3px;position:relative}.pinnote-page .slider-thumb{background:var(--accent);width:12px;height:12px;box-shadow:0 1px 2px var(--shadow-deep);border-radius:50%;margin-top:-6px;position:absolute;top:50%;left:0}@keyframes colorCycle{0%,6%{background:var(--accent-glow)}22%{background:color-mix(in srgb, var(--accent-light) 35%, var(--paper-warm))}40%,to{background:color-mix(in srgb, var(--ink-soft) 25%, var(--paper-warm))}}@keyframes partColorFade{0%,44%{opacity:1}52%,to{opacity:0}}@keyframes partBgFade{0%,44%{opacity:0}52%,to{opacity:1}}@keyframes bgBlur{0%,56%{filter:blur()}82%,to{filter:blur(3px)}}@keyframes bgDim{0%,56%{opacity:0}82%,to{opacity:.35}}@keyframes thumbSlide{0%,56%{left:0}82%,to{left:148px}}.pinnote-page [data-reveal].is-revealed .color-tile{animation:5s forwards colorCycle}.pinnote-page [data-reveal].is-revealed .part-color{animation:5s forwards partColorFade}.pinnote-page [data-reveal].is-revealed .part-bg{animation:5s forwards partBgFade}.pinnote-page [data-reveal].is-revealed .bg-image{animation:5s forwards bgBlur}.pinnote-page [data-reveal].is-revealed .bg-dim{animation:5s forwards bgDim}.pinnote-page [data-reveal].is-revealed .slider-thumb{animation:5s forwards thumbSlide}.pinnote-page [data-reveal].is-revealed.reduced-motion .color-tile{background:color-mix(in srgb, var(--ink-soft) 25%, var(--paper-warm));animation:none}.pinnote-page [data-reveal].is-revealed.reduced-motion .part-color{opacity:0;animation:none}.pinnote-page [data-reveal].is-revealed.reduced-motion .part-bg{opacity:1;animation:none}.pinnote-page [data-reveal].is-revealed.reduced-motion .bg-image{filter:blur(3px);animation:none}.pinnote-page [data-reveal].is-revealed.reduced-motion .bg-dim{opacity:.35;animation:none}.pinnote-page [data-reveal].is-revealed.reduced-motion .slider-thumb{animation:none;left:148px}.pinnote-page .stage-markdown{flex-direction:column;gap:8px;padding:12px;display:flex}.pinnote-page .md-toolbar{flex-wrap:wrap;gap:3px;display:flex}.pinnote-page .md-tool{min-width:20px;height:18px;font-family:var(--font-mono);color:var(--ink-faint);border-radius:3px;justify-content:center;align-items:center;padding:0 4px;font-size:10.5px;display:inline-flex}.pinnote-page .md-tool.italic{font-style:italic}.pinnote-page .md-split{border:1px solid color-mix(in srgb, var(--ink) 10%, transparent);background:var(--cloud);min-height:0;box-shadow:0 2px 4px var(--shadow), 0 .5px 1px var(--shadow-deep);border-radius:6px;flex:1;display:flex;position:relative;overflow:hidden}.pinnote-page .md-pane-source{flex:0 0 50%;min-width:0;padding:10px 12px}.pinnote-page .md-pane-preview{opacity:0;flex:auto;min-width:0;padding:10px 12px}.pinnote-page .md-divider{background:var(--paper-deep);flex-shrink:0;width:3px;position:relative}.pinnote-page .md-divider-handle{background:var(--ink-faint);opacity:.5;border-radius:2px;width:4px;height:22px;margin:-11px 0 0 -2px;position:absolute;top:50%;left:50%}.pinnote-page .md-preview-label{font-family:var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:6px;font-size:9px;display:block}.pinnote-page .md-pane-source .md-text{font-family:var(--font-mono);color:var(--ink-soft);white-space:nowrap;max-width:0;font-size:11px;display:inline-block;overflow:hidden}.pinnote-page .md-render-heading{font-family:var(--font-serif);color:var(--ink);margin:0 0 6px;font-size:13px}.pinnote-page .md-render-heading strong{color:var(--accent);font-weight:700}.pinnote-page .md-image-chip{font-family:var(--font-mono);color:var(--ink-faint);background:var(--paper-warm);opacity:0;border-radius:4px;align-items:center;gap:6px;padding:3px 7px;font-size:10px;display:inline-flex;transform:translateY(4px)}@keyframes mdType{0%,4%{max-width:0}48%,to{max-width:220px}}@keyframes mdRenderFade{0%,50%{opacity:0}62%,to{opacity:1}}@keyframes mdImageDrop{0%,64%{opacity:0;transform:translateY(4px)}76%,to{opacity:1;transform:translateY(0)}}@keyframes mdDividerDrag{0%,68%{flex-basis:50%}84%{flex-basis:62%}to{flex-basis:54%}}.pinnote-page [data-reveal].is-revealed .md-text{animation:5s steps(34,end) forwards mdType}.pinnote-page [data-reveal].is-revealed .md-pane-preview{animation:5s forwards mdRenderFade}.pinnote-page [data-reveal].is-revealed .md-image-chip{animation:5s forwards mdImageDrop}.pinnote-page [data-reveal].is-revealed .md-pane-source{animation:5s forwards mdDividerDrag}.pinnote-page [data-reveal].is-revealed.reduced-motion .md-text{max-width:220px;animation:none}.pinnote-page [data-reveal].is-revealed.reduced-motion .md-pane-preview{opacity:1;animation:none}.pinnote-page [data-reveal].is-revealed.reduced-motion .md-image-chip{opacity:1;animation:none;transform:translateY(0)}.pinnote-page [data-reveal].is-revealed.reduced-motion .md-pane-source{flex-basis:54%;animation:none}@media (max-width:720px){.pinnote-page .container{padding:0 20px}.pinnote-page .hero h1{font-size:32px}.pinnote-page .hero-scene{max-width:320px}.pinnote-page .feature{padding:48px 0}.pinnote-page .feature-inner,.pinnote-page .feature.reverse .feature-inner{flex-direction:column-reverse;gap:28px}.pinnote-page .feature h2{font-size:24px}}.pinnote-page .cta-footer{text-align:center;background:var(--paper-warm);border-top:1px solid var(--paper-deep);padding:88px 0}.pinnote-page .cta-footer h2{margin-bottom:10px;font-size:30px}.pinnote-page .cta-footer p{color:var(--ink-soft);margin-bottom:28px;font-size:15px}.pinnote-page .site-footer{padding:22px 0 32px}.pinnote-page .site-footer-inner{color:var(--ink-faint);justify-content:space-between;align-items:center;font-size:12.5px;display:flex}.pinnote-page .footer-link{color:var(--ink-faint);text-decoration:none}.pinnote-page .footer-link:hover{color:var(--accent)}