@charset "UTF-8";
:root{--paper:#f7f4ff;--ink:#1b1927;--muted:#696378;--yellow:#eaff62;--green:#c9b9ff;--blue:#68e1fa;--pink:#ff927b;--line:#d0c9e1;font-family:"Microsoft YaHei","PingFang SC","Noto Sans CJK SC",system-ui,sans-serif;color:var(--ink);background:var(--paper);font-synthesis:none}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:32px}body{margin:0;font-size:15px;line-height:1.7}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit}img,svg{max-width:100%}button,a,summary{-webkit-tap-highlight-color:transparent}button,summary{cursor:pointer}button:focus-visible,a:focus-visible,summary:focus-visible,[role=tabpanel]:focus-visible{outline:3px solid #287a70;outline-offset:6px}::selection{background:var(--yellow);color:var(--ink)}[hidden]{display:none!important}.svg-library{position:absolute;width:0;height:0;overflow:hidden}.wrap{width:min(1200px,calc(100% - 96px));margin-inline:auto}.section-space{padding-block:96px}.icon{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}.windows-icon{width:19px;height:19px;fill:currentColor;flex-shrink:0}.skip-link{position:fixed;top:12px;left:12px;z-index:99;padding:10px 20px;background:var(--ink);color:white;border-radius:8px;transform:translateY(-160%)}.skip-link:focus{transform:none}
.site-header{height:102px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);gap:28px;position:relative;z-index:5}.brand{display:inline-flex;align-items:center;gap:11px;white-space:nowrap;font-size:22px;font-weight:800;letter-spacing:-.8px}.brand img{flex-shrink:0}.brand>span{display:inline-flex;align-items:center;gap:6px}.brand-ai{font-size:13px;letter-spacing:0;line-height:1.5;padding:0 5px;background:var(--yellow);border:1.5px solid var(--ink);border-radius:5px;transform:rotate(-6deg)}.site-header nav{display:flex;align-items:center;gap:30px;font-size:14px;font-weight:600}.site-header nav>a:not(.button):hover,.text-link:hover,.back-top:hover{color:#46754b}.site-header .nav-account{margin-left:12px;display:flex;align-items:center;gap:10px}.nav-account>span{font-size:19px}.button{display:inline-flex;align-items:center;justify-content:center;gap:22px;background:var(--yellow);padding:16px 26px;border:2px solid var(--ink);border-radius:11px;font-size:16px;font-weight:700;box-shadow:3px 3px 0 var(--ink);transition:transform .16s,box-shadow .16s}.button:hover{transform:translate(-1px,-2px);box-shadow:5px 5px 0 var(--ink)}.button:active{transform:translate(2px,2px);box-shadow:0 0 0 var(--ink)}.button-small{font-size:13px;padding:9px 15px;gap:14px;box-shadow:2px 2px 0 var(--ink);border-radius:8px}.button-small .icon{width:18px;height:18px}.button-dark{background:var(--ink);color:var(--paper);box-shadow:3px 3px 0 #c0c4af}.button-dark:hover{box-shadow:5px 5px 0 #c0c4af}.menu-toggle{display:none}
.hero{display:grid;grid-template-columns:1fr 1.1fr;align-items:center;min-height:650px;position:relative;padding-top:48px;padding-bottom:54px;gap:8px}.hero-copy{padding-bottom:10px;position:relative;z-index:1}.eyebrow{font-size:13px;font-weight:600;letter-spacing:1.3px;margin:0 0 18px;display:flex;align-items:center;gap:10px}.tiny-star{font-size:22px;color:#5b7850;line-height:1}.hero h1{font-size:clamp(52px,5.4vw,72px);line-height:1.32;letter-spacing:-3px;margin:20px 0 25px;font-weight:900}.title-highlight{position:relative;display:inline-block;z-index:0;white-space:nowrap}.title-highlight:before{content:"";position:absolute;left:-5px;right:-12px;bottom:9px;height:27px;background:var(--yellow);z-index:-1;transform:rotate(-2deg);border-radius:40% 8% 12% 15%}.title-highlight>svg{position:absolute;width:95%;height:17px;left:0;bottom:-5px;fill:none;stroke:var(--ink);stroke-width:3;stroke-linecap:round}.hero-description{font-size:17px;color:#626759;line-height:1.95;margin-bottom:31px}.hero-actions{display:flex;align-items:center;gap:28px}.hero-secondary{font-size:14px;display:flex;align-items:center;gap:12px;font-weight:600}.hero-secondary span{font-size:25px}.hero-meta{display:flex;align-items:center;gap:8px;font-size:11px;color:var(--muted);margin-top:26px}.hero-meta .windows-icon{width:13px;height:13px}.meta-dot{margin:0 4px}.hero-art{position:relative;margin:0 -20px 0 -9px;align-self:center;padding-top:5px}.hero-illustration{display:block;width:100%;height:auto;object-fit:contain}.art-sticker{position:absolute;top:8px;right:28px;z-index:1;border:1.5px solid var(--ink);border-radius:10px;padding:10px 17px;font-size:12px;line-height:1.65;transform:rotate(7deg);background:#fffdf5;box-shadow:2px 2px 0 #d8d9cb}.art-sticker:after{content:"";width:12px;height:12px;position:absolute;left:18px;bottom:-7px;background:#fffdf5;border-right:1.5px solid var(--ink);border-bottom:1.5px solid var(--ink);transform:rotate(45deg)}.hero-art figcaption{text-align:center;font-size:12px;font-weight:600;letter-spacing:1px;position:relative;margin-top:-6px}.hero-art figcaption span{color:#648555;margin-right:8px}.hero-doodle{position:absolute;left:42%;top:75px;font-size:42px;transform:rotate(14deg);color:#8da87f}.mobile-break{display:none}
.section-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;margin-bottom:40px}.section-heading .eyebrow{color:#68725e;margin-bottom:12px}.section-heading h2{font-size:34px;font-weight:800;letter-spacing:-1px;line-height:1.45;margin:0}.section-heading>p{font-size:13px;color:var(--muted);margin:0 0 3px}.heading-spark{display:inline-block;font-size:34px;color:#779b65;margin-left:18px;vertical-align:middle}
.feature-tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:18px}.feature-tab{display:flex;align-items:center;justify-content:flex-start;gap:12px;padding:16px 21px;border:1.5px solid #b8bcae;border-radius:11px;background:transparent;font-weight:600;font-size:14px;transition:background .15s,box-shadow .15s}.feature-tab>span{margin-left:auto;font-size:11px;color:#777d6e;font-weight:400}.feature-tab:hover{background:#f2f0e4}.feature-tab.is-active{background:var(--yellow);border:2px solid var(--ink);box-shadow:2px 2px 0 var(--ink);padding:15.5px 20.5px}.feature-panel{display:grid;grid-template-columns:1fr 1fr;border:2px solid var(--ink);border-radius:22px;overflow:hidden;min-height:430px;background:#fffdf5}.feature-copy{padding:40px 48px 38px}.hand-label{font-size:12px;background:#ecf1df;display:inline-block;padding:4px 10px;border-radius:5px;transform:rotate(-2deg)}.feature-copy h3{font-size:32px;line-height:1.5;letter-spacing:-.7px;margin:16px 0 13px;font-weight:800}.feature-copy>p{font-size:13px;color:var(--muted);line-height:1.95;margin:0 0 19px}.feature-list{padding:0;margin:0 0 22px;list-style:none;display:grid;gap:8px;font-size:12px}.feature-list li{display:flex;align-items:center;gap:9px}.feature-list .icon{width:16px;height:16px;stroke:#56764a;stroke-width:2.5}.text-link{font-size:12px;font-weight:700;display:inline-flex;align-items:center;gap:12px;border-bottom:1px solid var(--ink);padding-bottom:4px}.text-link span{font-size:17px}.feature-visual{position:relative;min-width:0;overflow:hidden;display:flex;align-items:center;justify-content:center;background-color:#f1ecd9;background-image:radial-gradient(#d9d4c2 .9px,transparent .9px);background-size:17px 17px}.sample-sheet{position:absolute;width:210px;height:266px;border:2px solid var(--ink);border-radius:11px;padding:18px;display:flex;flex-direction:column;align-items:center;justify-content:space-between;box-shadow:4px 5px 0 #292c2522}.sheet-back{background:#b9d1b5;top:49px;left:38px;transform:rotate(-12deg)}.sheet-front{background:#edb39b;top:103px;left:208px;transform:rotate(9deg)}.sample-sheet .cup-art{width:150px;height:145px;overflow:visible}.sheet-back .cup-art{margin-top:9px}.sample-sheet>span:first-child{font-size:12px;font-weight:600}.sample-sheet strong{font-size:15px;margin-top:-8px}.scene-tag{font-size:9px;letter-spacing:1.5px}.sheet-badge{position:relative;align-self:flex-start;border:1px solid var(--ink);background:var(--yellow);padding:3px 9px;transform:rotate(-8deg);border-radius:4px}.sheet-front .cup-art{margin-top:-5px}.visual-spark{position:absolute;right:56px;top:39px;font-size:57px;color:#71845e;transform:rotate(12deg)}.hand-caption{position:absolute;bottom:22px;right:27px;font-size:12px;transform:rotate(-4deg);font-weight:600}.availability-note{font-size:11px;color:#818576;text-align:right;margin:14px 3px 0}
.video-visual{background-color:#dce9e8;background-image:radial-gradient(#bdcfca .9px,transparent .9px)}.video-board{width:330px;padding:14px;border:2px solid var(--ink);background:#fffaf0;border-radius:12px;transform:rotate(-4deg);box-shadow:6px 6px 0 #292c2530}.board-top{display:flex;justify-content:space-between;font-size:11px;margin-bottom:11px}.video-frame{height:166px;position:relative;overflow:hidden;border:1.5px solid var(--ink);border-radius:7px;background:#a3d8df}.video-sun{position:absolute;width:43px;height:43px;border:1.5px solid var(--ink);background:var(--yellow);border-radius:50%;right:37px;top:22px}.video-hill{position:absolute;width:240px;height:150px;bottom:-85px;border-radius:50%;border:1.5px solid var(--ink)}.hill-one{background:#a8c68d;left:-25px;transform:rotate(-18deg)}.hill-two{background:#6f9d76;right:-45px;transform:rotate(14deg)}.play-symbol{position:absolute;top:57px;left:130px;border:2px solid var(--ink);border-radius:50%;width:46px;height:46px;background:var(--paper);text-align:center;padding:4px 0 0 3px}.timeline{display:flex;gap:5px;margin:13px 0 7px}.timeline span{height:19px;flex:1;border:1px solid var(--ink);background:var(--pink);border-radius:3px}.timeline span:nth-child(2n){background:var(--yellow)}.waveform{height:26px;display:flex;align-items:center;justify-content:space-around;background:#d3e2c8;border:1px solid var(--ink);border-radius:3px}.waveform i{width:3px;background:#547349;height:10px}.waveform i:nth-child(3n){height:20px}.waveform i:nth-child(2n){height:15px}.concept-label{position:absolute;bottom:10px;left:18px;color:#6e7166;font-size:9px}.video-visual .hand-caption{bottom:33px}
.agent-visual{background-color:#e2e9d6;background-image:radial-gradient(#c8d2b6 .9px,transparent .9px)}.idea-note{width:280px;min-height:245px;border:2px solid var(--ink);border-radius:3px;background:#ffe18c;transform:rotate(-7deg);position:absolute;top:49px;left:75px;padding:25px 26px;box-shadow:5px 5px 0 #292c2520}.note-pin{width:66px;height:23px;position:absolute;top:-12px;left:105px;background:#ffffff90;transform:rotate(4deg);border:1px solid #ffffff40}.note-kicker{font-size:11px;display:block;margin-bottom:18px}.idea-note strong{font-size:24px;line-height:1.7}.idea-note>.icon{position:absolute;width:32px;height:32px;bottom:20px;right:22px}.reply-note{position:absolute;bottom:71px;right:22px;padding:19px;display:flex;align-items:center;gap:12px;background:#fffdf5;border:2px solid var(--ink);border-radius:12px;box-shadow:4px 4px 0 #292c2520;transform:rotate(3deg)}.reply-note strong{font-size:13px}.reply-note p{font-size:10px;margin:5px 0 0}.tools-visual{background-color:#f4e0d8;background-image:radial-gradient(#dfc8bd .9px,transparent .9px)}.mini-tool{width:165px;height:180px;position:absolute;border:2px solid var(--ink);border-radius:15px;padding:21px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;box-shadow:4px 4px 0 #292c2520}.mini-tool .icon{width:45px;height:45px}.mini-tool strong{font-size:14px}.mini-tool span{font-size:10px;color:#626759}.tool-crop{top:52px;left:43px;background:var(--yellow);transform:rotate(-10deg)}.tool-stack{top:48px;right:43px;background:#aedee4;transform:rotate(12deg)}.tool-compress{bottom:33px;left:185px;background:#d4e1c3;transform:rotate(-3deg)}
.workflow-section{background:#f0f1e8;border-block:1px solid var(--line)}.workflow-section .section-heading{margin-bottom:49px}.workflow-doodle{font-size:69px;line-height:1;transform:rotate(-21deg);margin-right:120px;color:#779069}.workflow-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}.workflow-card{position:relative;padding:33px 30px 27px;border:1.5px solid var(--ink);border-radius:15px;background:#fffdf5;box-shadow:3px 4px 0 #d6dbca}.step-number{display:inline-flex;align-items:center;justify-content:center;width:46px;height:40px;border:1.5px solid var(--ink);border-radius:50% 45% 50% 45%;font-size:15px;font-weight:800;transform:rotate(-8deg)}.step-yellow{background:var(--yellow)}.step-blue{background:var(--blue)}.step-pink{background:var(--pink)}.step-icon{position:absolute;right:28px;top:35px;width:31px;height:31px;stroke-width:1.5}.workflow-card h3{font-size:20px;font-weight:800;margin:22px 0 11px}.workflow-card p{font-size:13px;color:var(--muted);line-height:1.9;margin:0 0 24px}.step-foot{font-size:10px;letter-spacing:2px;border-top:1px dashed #c9ccbe;padding-top:14px;display:block;color:#69745d}
.download-section{padding-bottom:54px}.download-box{display:grid;grid-template-columns:1fr 380px;gap:70px;background:#e0eacb;border:2px solid var(--ink);border-radius:24px;padding:56px 64px;position:relative;box-shadow:5px 5px 0 #cbd4b6}.download-copy{align-self:center}.download-kicker{display:flex;align-items:center;gap:9px;font-size:12px;font-weight:600}.download-kicker .icon{width:20px;height:20px}.download-copy h2{font-size:39px;line-height:1.5;letter-spacing:-1px;font-weight:800;margin:20px 0 18px}.download-copy>p{font-size:13px;line-height:1.9;color:#667354;margin:0}.download-illustration{display:flex;align-items:center;gap:13px;margin-top:27px}.download-illustration img{transform:rotate(-9deg)}.download-illustration>span{font-size:11px;font-weight:600;transform:rotate(-3deg)}.download-illustration>.download-arrow{font-size:47px;margin-left:2px;align-self:flex-start;margin-top:-2px;font-weight:400}.download-card{background:#fffdf6;border:2px solid var(--ink);border-radius:16px;padding:28px;box-shadow:4px 4px 0 #b2c29c}.platform-label{display:flex;align-items:center;gap:9px;font-size:11px;font-weight:600;white-space:nowrap}.platform-label>.windows-icon{width:15px;height:15px}.platform-chip{margin-left:auto;border:1px solid #c5cbb9;border-radius:4px;font-size:9px;padding:0 5px;color:#667354;background:#f0f3e8}.download-card h3{font-size:27px;letter-spacing:-.5px;line-height:1.5;font-weight:800;margin:23px 0 15px}.download-status{font-size:11px;color:var(--muted);line-height:1.9;min-height:42px;margin:0 0 24px}.full-width{width:100%;font-size:13px;padding:13px 16px;justify-content:space-between;border-radius:8px;gap:8px}.full-width>.icon{width:20px;height:20px}.download-hint{font-size:10px;line-height:1.9;color:#7f8475;padding-top:18px;margin:0}.release-details{font-size:11px;border-top:1px solid var(--line);margin-top:19px;padding-top:13px}.release-details summary{font-weight:600}.release-details p{max-height:180px;overflow:auto;overflow-wrap:anywhere}.release-details code{overflow-wrap:anywhere;display:block;font-size:10px;color:var(--muted);margin-top:5px}
.questions{display:grid;grid-template-columns:1fr 1.65fr;gap:80px;padding-top:54px;padding-bottom:110px}.faq-intro .eyebrow{color:#758066;font-size:12px;margin-bottom:16px}.faq-intro h2{font-size:38px;line-height:1.5;letter-spacing:-1px;margin:0;font-weight:800}.question-doodle{font-size:56px;display:inline-block;transform:rotate(14deg);color:#7a9667;margin-left:7px;vertical-align:middle;line-height:.8}.faq-intro>p{font-size:12px;color:var(--muted);margin:16px 0}.faq-intro>img{margin-top:20px;transform:rotate(-12deg)}.faq-list details{border-bottom:1px solid #cdd1c2;padding:20px 0}.faq-list details:first-child{padding-top:7px}.faq-list summary{display:flex;align-items:center;justify-content:space-between;gap:20px;list-style:none;font-size:14px;font-weight:600}.faq-list summary::-webkit-details-marker{display:none}.faq-list summary>span{display:inline-flex;align-items:center;justify-content:center;width:25px;height:25px;border:1px solid #8a947b;border-radius:50%;background:#f1f2e7;font-size:19px;line-height:1;flex-shrink:0}.faq-list details[open] summary>span{transform:rotate(45deg);background:var(--yellow);border-color:var(--ink)}.faq-list details>p{font-size:12px;color:var(--muted);line-height:2;margin:14px 38px 3px 0}.site-footer{border-top:1.5px solid var(--ink);background:#f1f0e5;padding-top:34px}.footer-top{display:flex;align-items:center;gap:38px;padding-bottom:28px}.footer-top .brand{font-size:18px}.footer-top>p{font-size:12px;color:var(--muted);margin:0}.back-top{margin-left:auto;display:flex;align-items:center;gap:13px;font-size:11px;font-weight:600}.back-top>span{font-size:19px}.footer-bottom{border-top:1px solid #d5d9c9;padding:20px 0 23px;display:flex;align-items:center;justify-content:space-between;gap:18px;color:#7f8675;font-size:10px}.footer-bottom small{font-size:10px}.footer-bottom>span>span{color:#8aa371;margin-left:7px}.footer-bottom a{color:#626d57}.footer-bottom a:hover{text-decoration:underline}

/* Bold comic art direction; keep the desktop application's logo unmodified. */
.site-header { border-bottom: 2px solid var(--ink); }
.brand img { object-fit: contain; padding: 5px; background: var(--yellow); border: 2px solid var(--ink); border-radius: 10px; }
.brand-ai { background: #cbbaff; border-width: 2px; }
.site-header nav>a:not(.button):hover, .text-link:hover { color: #6843c7; }
.hero { gap: 22px; padding-block: 62px; min-height: 680px; }
.hero-copy>.eyebrow { display: inline-flex; border: 1.5px solid var(--ink); border-radius: 5px; background: #e3d9ff; padding: 6px 12px; box-shadow: 2px 2px 0 var(--ink); letter-spacing: .6px; }
.tiny-star { color: #6b42d0; }
.hero h1 { font-weight: 900; }
.title-highlight { color: #8055ef; text-shadow: 2px 3px 0 var(--ink); -webkit-text-stroke: 1px var(--ink); }
.title-highlight:before { height: 35px; bottom: 5px; transform: rotate(-3deg); border-radius: 2px; }
.title-highlight>svg { bottom: -8px; }
.hero-description { color: #6a627a; }
.hero-secondary { font-weight: 700; }
.hero-art { margin: 0; padding: 16px 2px 19px; border: 3px solid var(--ink); border-radius: 24px; box-shadow: 8px 8px 0 var(--ink); background-color: #8a68ef; background-image: linear-gradient(#ffffff14 1px,transparent 1px),linear-gradient(90deg,#ffffff14 1px,transparent 1px); background-size: 26px 26px; transform: rotate(2deg); }
.hero-illustration { position: relative; }
.art-sticker { top: -26px; right: 20px; background: var(--yellow); border: 2px solid var(--ink); border-radius: 4px; font-weight: 700; box-shadow: 3px 3px 0 var(--ink); transform: rotate(5deg); }
.art-sticker:after { background: var(--yellow); border-color: var(--ink); border-width: 2px; bottom: -8px; }
.hero-art figcaption { color: var(--ink); background: #eaff62; border: 2px solid var(--ink); border-radius: 5px; width: fit-content; max-width: calc(100% - 28px); margin: -3px auto 0; padding: 5px 13px; font-weight: 700; transform: rotate(-3deg); box-shadow: 2px 2px 0 var(--ink); }
.hero-art figcaption span { color: var(--ink); }
.hero-doodle { color: #7850df; }


.section-heading .eyebrow, .heading-spark { color: #754bd0; }
.feature-tab { border: 2px solid #9486ae; background: #fffdfb; box-shadow: 2px 2px 0 #d5cbe6; }
.feature-tab:hover { background: #ece4ff; }
.feature-tab.is-active { background: #c8b6ff; border-color: var(--ink); box-shadow: 3px 3px 0 var(--ink); }
.feature-panel { border-width: 3px; box-shadow: 5px 5px 0 var(--ink); }
.hand-label { background: var(--yellow); border: 1px solid var(--ink); color: var(--ink); }
.feature-list .icon { stroke: #7651c7; }
.image-visual { background-color: #d2c2ff; background-image: radial-gradient(#ae93dd 1px,transparent 1px); }
.sheet-back { background: var(--blue); box-shadow: 5px 6px 0 var(--ink); }
.sheet-front { background: var(--pink); box-shadow: 5px 6px 0 var(--ink); }
.visual-spark { color: var(--yellow); -webkit-text-stroke: 2px var(--ink); }
.sample-sheet { border-width: 3px; }
.availability-note { color: #756b84; margin-top: 18px; }
.video-visual { background-color: #b1eaf7; }
.agent-visual { background-color: #cfc1f6; }
.idea-note { background: var(--yellow); box-shadow: 5px 5px 0 var(--ink); }
.reply-note { box-shadow: 4px 4px 0 var(--ink); }
.reply-note img { object-fit: contain; padding: 5px; background: #e9e1ff; border: 1px solid var(--ink); border-radius: 8px; }
.tools-visual { background-color: #ffd1c4; }
.mini-tool { border-width: 3px; box-shadow: 4px 4px 0 var(--ink); }
.tool-compress { background: #c7b5ff; }
.workflow-section { background: #e9e1fa; border-block: 2px solid var(--ink); }
.workflow-card { border: 2px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); }
.workflow-card:nth-child(2) { transform: rotate(-1deg); }
.workflow-doodle { color: #8158e0; }
.step-number { border-width: 2px; box-shadow: 2px 2px 0 var(--ink); }
.step-foot { color: #77668f; }
.download-box { background: #7f5aec; border: 3px solid var(--ink); box-shadow: 7px 7px 0 var(--ink); }
.download-copy { color: #fffdf7; }
.download-kicker { color: var(--yellow); }
.download-copy h2 { color: var(--yellow); text-shadow: 2px 3px 0 #352246; }
.download-copy>p { color: #f1eaff; }
.download-illustration img { object-fit: contain; background: #231a39; border: 2px solid var(--yellow); padding: 9px; border-radius: 13px; }
.download-card { box-shadow: 5px 5px 0 var(--ink); }
.platform-chip { background: var(--yellow); border-color: var(--ink); color: var(--ink); }
.button-dark { background: var(--ink); box-shadow: 3px 3px 0 #a790d2; }
.button-dark:hover { box-shadow: 5px 5px 0 #a790d2; }
.faq-intro .eyebrow { color: #7953c7; }
.faq-intro>img { object-fit: contain; background: var(--yellow); border: 2px solid var(--ink); padding: 14px; border-radius: 15px; box-shadow: 4px 4px 0 var(--ink); }
.question-doodle { color: #895cf0; }
.faq-list details { border-color: #beb0d2; }
.faq-list summary>span { border: 1.5px solid var(--ink); background: #e7dcff; }
.site-footer { background: #211c30; border-color: var(--ink); color: #fffdf4; }
.site-footer .brand img { background: #423652; border-color: #8d79b1; }
.site-footer .brand-ai { color: var(--ink); background: var(--yellow); border-color: var(--yellow); }
.footer-top>p, .footer-bottom { color: #c5b9d8; }
.footer-bottom { border-color: #564767; }
.footer-bottom a { color: #eaff62; }
.footer-bottom>span>span { color: var(--yellow); }
.back-top:hover { color: var(--yellow); }

@media(min-width:1500px){.hero{min-height:690px}.hero h1{font-size:76px}}
@media(max-width:1150px){.wrap{width:calc(100% - 64px)}.site-header nav{gap:21px}.brand{font-size:19px}.site-header .nav-account{margin-left:0}.hero{min-height:600px;grid-template-columns:1fr 1fr}.hero h1{font-size:60px}.hero-description{font-size:15px}.hero-art{margin-right:-10px}.art-sticker{top:-10px;right:0;font-size:10px}.hero-meta{font-size:10px;gap:6px}.hero-meta>span:last-child,.meta-dot{display:none}.feature-copy{padding:35px}.sample-sheet{width:180px;height:243px}.sheet-back{left:20px;top:55px}.sheet-front{left:165px;top:125px}.visual-spark{right:25px}.feature-panel{min-height:447px}.feature-tab{gap:9px;padding-inline:16px;font-size:13px}.feature-tab.is-active{padding-inline:15.5px}.feature-tab>span{display:none}.download-box{padding:45px;grid-template-columns:1fr 340px;gap:35px}.download-copy h2{font-size:32px}.workflow-card{padding:28px 24px}.workflow-card h3{font-size:18px}.workflow-grid{gap:23px}.questions{gap:50px}.idea-note{left:40px}.reply-note{right:17px;padding:15px}.mini-tool{width:145px;height:160px}.tool-crop{left:25px}.tool-stack{right:24px}.tool-compress{left:135px;bottom:43px}}
@media(max-width:900px){.site-header{height:83px}.site-header nav{display:none;position:absolute;top:74px;right:0;left:0;padding:21px;background:#fffdf5;border:2px solid var(--ink);border-radius:12px;box-shadow:4px 4px 0 #292c2525;align-items:stretch;gap:0}.site-header nav.is-open{display:flex;flex-direction:column}.site-header nav>a{padding:12px 10px}.site-header nav>.button{margin-top:8px}.site-header nav>.nav-account{justify-content:space-between}.menu-toggle{display:flex;flex-direction:column;justify-content:center;gap:5px;width:42px;height:40px;background:var(--paper);border:1.5px solid var(--ink);border-radius:8px;padding:10px}.menu-toggle>span{display:block;width:100%;height:2px;background:var(--ink)}.hero{min-height:570px;padding-top:45px;grid-template-columns:1fr 1fr;gap:0}.hero h1{font-size:48px;letter-spacing:-2px}.hero-description{font-size:13px}.hero .eyebrow{font-size:11px;letter-spacing:.7px}.hero-actions{gap:18px}.hero-actions .button{padding:13px 17px;font-size:13px;gap:12px}.hero-secondary{font-size:12px;gap:6px}.hero-art{margin-left:-13px;margin-right:-16px}.art-sticker{right:5px;top:-28px;font-size:9px;padding:7px 11px}.hero-art figcaption{font-size:10px;letter-spacing:0}.hero-doodle{left:45%;top:40px;font-size:28px}.section-space{padding-block:70px}.section-heading h2{font-size:28px}.section-heading>p{font-size:11px}.heading-spark{font-size:25px;margin-left:9px}.feature-tab{padding:13px 10px;gap:8px;font-size:12px;justify-content:center}.feature-tab.is-active{padding:12.5px 9.5px}.feature-tab .icon{width:20px;height:20px}.feature-tabs{gap:9px}.feature-copy{padding:29px}.feature-copy h3{font-size:28px}.feature-copy>p{font-size:12px}.feature-list{font-size:11px;gap:8px}.feature-panel{min-height:443px}.hand-label{font-size:10px}.sample-sheet{width:150px;height:213px;padding:14px}.sheet-back{left:19px;top:68px}.sheet-front{left:117px;top:162px}.sample-sheet>span:first-child{font-size:9px}.sample-sheet strong{font-size:12px}.sample-sheet .cup-art{width:120px;height:120px}.visual-spark{right:12px;top:20px;font-size:46px}.hand-caption{font-size:10px;right:15px;bottom:22px}.scene-tag{font-size:8px}.video-board{width:260px}.video-frame{height:155px}.play-symbol{left:98px;top:50px}.idea-note{left:24px;top:60px;width:230px;min-height:230px;padding:23px}.idea-note strong{font-size:23px}.reply-note{bottom:78px;right:12px;padding:14px 11px;gap:7px}.reply-note strong{font-size:11px}.reply-note p{font-size:8px}.reply-note>img{width:35px;height:35px}.mini-tool{width:125px;height:145px;padding:16px;gap:8px}.mini-tool strong{font-size:11px}.mini-tool span{font-size:9px}.mini-tool .icon{width:39px;height:39px}.tool-crop{left:23px;top:66px}.tool-stack{right:25px;top:165px}.tool-compress{left:38px;bottom:46px}.workflow-grid{gap:17px}.workflow-card{padding:25px 19px}.workflow-card h3{font-size:16px}.workflow-card p{font-size:11px}.step-icon{width:25px;height:25px;right:20px;top:30px}.workflow-doodle{margin-right:65px}.download-box{padding:34px;gap:25px;grid-template-columns:1fr 300px}.download-copy h2{font-size:27px}.download-kicker{font-size:10px}.download-copy>p{font-size:11px}.download-card{padding:24px}.download-card h3{font-size:24px}.download-illustration{gap:6px}.download-illustration img{width:60px;height:60px}.download-illustration>span{font-size:9px}.download-illustration>.download-arrow{display:none}.questions{gap:40px;grid-template-columns:1fr 1.6fr}.faq-intro h2{font-size:30px}.faq-list summary{font-size:12px}.faq-list details>p{font-size:11px}.footer-top{gap:24px}.footer-top>p{font-size:10px}.footer-top .brand{font-size:16px}}
@media(max-width:650px){.wrap{width:calc(100% - 40px)}.site-header{height:78px}.brand{font-size:19px;gap:9px}.brand>img{width:39px;height:39px}.hero{display:flex;flex-direction:column;align-items:stretch;padding-top:39px;padding-bottom:35px;gap:29px}.hero-copy{padding:0 4px}.hero .eyebrow{font-size:11px;margin-bottom:15px}.hero h1{font-size:55px;line-height:1.3;margin:13px 0 25px;letter-spacing:-2px}.title-highlight:before{height:23px;bottom:7px;right:-5px}.hero-description{font-size:14px;line-height:1.9;margin-bottom:24px}.hero-actions{gap:27px}.hero-actions .button{font-size:14px;padding:14px 20px;gap:20px}.hero-secondary{font-size:12px}.hero-meta{font-size:10px;margin-top:23px}.hero-meta>span:last-child{display:inline}.meta-dot{display:inline;margin-inline:2px}.hero-meta .windows-icon{width:12px;height:12px}.hero-art{margin:3px 0 0;width:100%;max-width:440px;align-self:center}.art-sticker{top:0;right:7px;padding:8px 13px;font-size:10px}.hero-art figcaption{font-size:11px;margin-top:-5px}.hero-doodle{left:auto;right:12px;top:48px;font-size:33px}.section-space{padding-block:55px}.section-heading{display:block;margin-bottom:26px}.section-heading .eyebrow{font-size:11px;letter-spacing:1px}.section-heading h2{font-size:28px;line-height:1.5;letter-spacing:-1px}.section-heading>p{font-size:12px;margin-top:17px}.section-heading>p br{display:none}.mobile-break{display:block}.heading-spark{font-size:27px;margin-left:10px}.feature-tabs{grid-template-columns:1fr 1fr;gap:10px;margin-bottom:17px}.feature-tab{font-size:12px;justify-content:flex-start;padding:13px 15px;gap:10px}.feature-tab.is-active{padding:12.5px 14.5px}.feature-tab>span{display:inline;font-size:10px}.feature-panel{display:flex;flex-direction:column;min-height:0;border-radius:17px}.feature-copy{padding:29px 27px 30px}.feature-copy h3{font-size:30px;margin-top:17px}.feature-copy>p{font-size:12px;line-height:2}.feature-list{font-size:12px;gap:9px;margin-bottom:21px}.hand-label{font-size:11px}.text-link{font-size:12px}.feature-visual{height:335px;flex-shrink:0}.sample-sheet{width:173px;height:226px}.sheet-back{left:calc(50% - 151px);top:32px}.sheet-front{left:calc(50% - 10px);top:76px}.sample-sheet>span:first-child{font-size:10px}.sample-sheet .cup-art{width:130px;height:130px}.sample-sheet strong{font-size:12px}.visual-spark{font-size:35px;right:18px;top:12px}.hand-caption{font-size:10px;bottom:12px}.availability-note{text-align:left;font-size:10px;line-height:1.8;margin-top:12px}.video-board{width:272px;margin-top:-14px}.video-frame{height:134px}.play-symbol{left:103px;top:42px}.timeline{margin-top:10px}.video-visual .hand-caption{bottom:18px}.concept-label{font-size:8px;bottom:7px;left:12px}.idea-note{left:calc(50% - 136px);top:29px;width:220px;min-height:215px;padding:24px}.idea-note strong{font-size:22px}.reply-note{right:calc(50% - 149px);bottom:43px;padding:14px;gap:9px}.reply-note strong{font-size:12px}.reply-note p{font-size:9px}.reply-note>img{width:38px;height:38px}.mini-tool{width:131px;height:147px}.tool-crop{top:33px;left:calc(50% - 139px)}.tool-stack{top:49px;right:calc(50% - 136px)}.tool-compress{bottom:25px;left:calc(50% - 66px)}.workflow-section .section-heading{margin-bottom:29px;position:relative}.workflow-doodle{position:absolute;right:5px;bottom:0;font-size:50px;margin:0}.workflow-grid{grid-template-columns:1fr;gap:18px}.workflow-card{padding:25px 26px 22px;display:grid;grid-template-columns:48px 1fr;column-gap:19px;align-items:start}.step-number{grid-row:1/4;align-self:start;margin-top:2px}.workflow-card h3{font-size:18px;margin:2px 0 9px;padding-right:16px}.workflow-card p{font-size:12px;margin-bottom:16px}.step-icon{width:22px;height:22px;right:22px;top:25px}.step-foot{padding-top:12px;font-size:9px}.download-box{grid-template-columns:1fr;padding:30px 23px;gap:26px;border-radius:18px;box-shadow:3px 4px 0 #cbd4b6}.download-copy h2{font-size:29px;margin:18px 0 13px}.download-kicker{font-size:10px}.download-copy>p{font-size:12px}.download-illustration{margin-top:15px;gap:10px}.download-illustration img{width:52px;height:52px}.download-illustration>span{font-size:10px}.download-illustration>.download-arrow{display:inline;font-size:35px;margin-left:auto}.download-card{padding:24px 23px;border-radius:12px}.download-card h3{font-size:26px;margin:20px 0 14px}.download-status{font-size:12px;margin-bottom:21px;min-height:0}.download-hint{font-size:10px}.platform-label{font-size:11px}.full-width{font-size:13px;padding-block:14px}.questions{display:block;padding-top:0;padding-bottom:60px}.faq-intro{position:relative;margin-bottom:29px}.faq-intro h2{font-size:29px}.faq-intro h2 br{display:none}.question-doodle{font-size:43px}.faq-intro .eyebrow{margin-bottom:10px}.faq-intro>p{font-size:11px;margin-top:11px}.faq-intro>img{position:absolute;right:5px;top:12px;width:54px;height:54px;margin:0}.faq-list summary{font-size:12px;gap:14px}.faq-list details{padding-block:20px}.faq-list details>p{font-size:11px;margin-right:12px}.faq-list summary>span{width:23px;height:23px;font-size:17px}.site-footer{padding-top:26px}.footer-top{flex-wrap:wrap;gap:12px;padding-bottom:22px}.footer-top .brand{font-size:17px}.footer-top .brand>img{width:35px;height:35px}.footer-top>p{order:3;flex-basis:100%;font-size:11px;margin-top:3px}.back-top{font-size:10px;gap:8px}.footer-bottom{font-size:9px;gap:8px;flex-wrap:wrap;padding-block:17px}.footer-bottom small{font-size:9px}.footer-bottom>span{display:none}}
@media(max-width:370px){.wrap{width:calc(100% - 32px)}.brand{font-size:17px}.hero h1{font-size:49px}.hero-meta{font-size:9px}.hero-actions{gap:19px}.hero-actions .button{padding-inline:17px;font-size:13px}.hero-description{font-size:13px}.feature-tab{font-size:11px;padding-inline:12px}.feature-tab.is-active{padding-inline:11.5px}.sample-sheet{width:153px;height:220px}.sheet-back{left:12px}.sheet-front{left:139px}.download-copy h2{font-size:26px}.section-heading h2{font-size:25px}.heading-spark{font-size:23px}.download-box{padding-inline:19px}.faq-intro>img{width:43px;height:43px;right:0}.faq-intro h2{font-size:26px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important}}


/* Two parallel conveyor belts. Rotation, travel, and hover scale use separate elements. */
.feature-ribbons {
  height: calc(190px + 12vw);
  min-height: 270px;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  margin-block: -16px 0;
}
.feature-ribbons__plane {
  position: absolute;
  left: -6%;
  top: 50%;
  width: 112%;
  display: grid;
  gap: 22px;
  transform: translateY(-50%) rotate(-6deg);
}
.feature-belt {
  width: 100%;
  min-width: 0;
  height: 84px;
  overflow: hidden;
  border-block: 2px solid var(--ink);
  box-shadow: 0 5px 0 var(--ink);
  color: var(--ink);
}
.feature-belt--yellow { background: var(--yellow); }
.feature-belt--purple { background: #c8b6ff; }
.feature-belt:focus-visible { outline: 3px solid #6843c7; outline-offset: -7px; }
.ribbon-track { display: flex; width: max-content; height: 100%; will-change: transform; }
.ribbon-group {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  width: max-content;
  height: 100%;
  list-style: none;
  padding: 0 34px 0 0;
  margin: 0;
  gap: 34px;
}
.ribbon-entry { display: flex; flex-shrink: 0; align-items: center; gap: 34px; }
.ribbon-item {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding: 10px 13px;
  border: 2px solid transparent;
  border-radius: 10px;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: .2px;
  white-space: nowrap;
  cursor: default;
  user-select: none;
  transition: transform .16s ease, background-color .16s ease, border-color .16s ease, box-shadow .16s ease;
  transform-origin: center;
}
.ribbon-item .icon { width: 27px; height: 27px; }
.ribbon-item:hover, .ribbon-item:active {
  position: relative;
  z-index: 1;
  transform: scale(1.065);
  background: #fffdf5;
  border-color: var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
}
.ribbon-divider { font-size: 22px; line-height: 1; color: #7850d5; user-select: none; }
.feature-belt--purple .ribbon-divider { color: var(--ink); }
.ribbon-status { font-size: 9px; font-weight: 500; padding: 2px 5px; border: 1px solid currentColor; border-radius: 4px; }
.feature-ribbons.is-static { height: auto; min-height: 0; margin: 0; padding-block: 30px; }
.feature-ribbons.is-static .feature-ribbons__plane { position: static; width: 100%; transform: none; gap: 16px; }
.feature-ribbons.is-static .feature-belt { height: auto; padding: 14px 22px; overflow: visible; }
.feature-ribbons.is-static .ribbon-track { width: 100%; will-change: auto; }
.feature-ribbons.is-static .ribbon-group { flex-wrap: wrap; width: 100%; gap: 10px 16px; padding: 0; }
.feature-ribbons.is-static [data-ribbon-copy], .feature-ribbons.is-static .ribbon-divider { display: none; }
.feature-ribbons.is-static .ribbon-item { font-size: 14px; }
@media(max-width:650px) {
  .feature-ribbons { height: 260px; min-height: 0; margin-top: 3px; }
  .feature-ribbons__plane { left: -12%; width: 124%; gap: 20px; transform: translateY(-50%) rotate(-9deg); }
  .feature-belt { height: 70px; }
  .ribbon-group { gap: 22px; padding-right: 22px; }
  .ribbon-entry { gap: 22px; }
  .ribbon-item { font-size: 15px; gap: 9px; padding: 8px 11px; border-radius: 8px; }
  .ribbon-item .icon { width: 23px; height: 23px; }
  .ribbon-divider { font-size: 18px; }
  .ribbon-status { font-size: 8px; }
  .feature-ribbons.is-static .feature-belt { padding-inline: 15px; }
  .feature-ribbons.is-static .ribbon-item { font-size: 12px; }
}

/* Independent SVG pieces: static placement, drift, and selection stay on separate layers. */
.hero-art[data-hero-art] { isolation: isolate; background-image: none; --art-play-state: running; }
.hero-art[data-hero-art]::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; z-index: -1; pointer-events: none;
  background-image: linear-gradient(#ffffff14 1px, transparent 1px), linear-gradient(90deg, #ffffff14 1px, transparent 1px);
  background-size: 26px 26px; background-color: #8a68ef;
}
.hero-illustration { overflow: visible; }
.hero-piece { --hero-x: 2px; --hero-y: -3px; --hero-turn: .55deg; --hero-duration: 7.4s; --hero-delay: -.8s; cursor: default; }
.hero-piece-motion, .hero-piece-scale, .hero-scene-shape { transform-box: fill-box; transform-origin: center; }
.hero-piece-motion { transform: translate(0, 0) rotate(0); }
.hero-piece-scale { transform: scale(1); transition: transform .2s ease, filter .2s ease; }
.hero-piece:focus { outline: none; }
.hero-piece:focus-visible, .hero-piece.is-touch-held { --art-play-state: paused; }
.hero-piece:focus-visible .hero-piece-scale, .hero-piece.is-touch-held .hero-piece-scale {
  transform: scale(1.045); filter: drop-shadow(2px 3px 0 #49218136);
}
.hero-piece[data-hero-piece="canvas"] { --hero-x: 1.5px; --hero-y: -2.7px; --hero-turn: .35deg; --hero-duration: 9s; --hero-delay: -1.7s; }
.hero-piece[data-hero-piece="product"] { --hero-x: -2.6px; --hero-y: -4.8px; --hero-turn: -.8deg; --hero-duration: 7s; --hero-delay: -.9s; }
.hero-piece[data-hero-piece="video"] { --hero-x: 3px; --hero-y: -4px; --hero-turn: .9deg; --hero-duration: 8.2s; --hero-delay: -3.4s; }
.hero-piece[data-hero-piece="layers"] { --hero-x: -2px; --hero-y: 3.5px; --hero-turn: -.65deg; --hero-duration: 7.8s; --hero-delay: -4.7s; }
.hero-piece[data-hero-piece="toolbox"] { --hero-x: 1px; --hero-y: -3.4px; --hero-turn: .55deg; --hero-duration: 8.6s; --hero-delay: -2.5s; }
.hero-piece[data-hero-piece="bolt-left"], .hero-piece[data-hero-piece="star-bottom"] { --hero-delay: -2.7s; --hero-turn: -2deg; }
.hero-piece[data-hero-piece="bolt-right"], .hero-piece[data-hero-piece="star-top"] { --hero-duration: 6.4s; --hero-delay: -4.1s; --hero-y: 3px; --hero-turn: 2deg; }
.hero-piece[data-hero-piece="rays-top"], .hero-piece[data-hero-piece="rays-bottom"] { --hero-x: 1px; --hero-y: -1.5px; --hero-turn: .4deg; }
.hero-scene-shape { pointer-events: none; }
.hero-ink-frame { opacity: 0; }
.hero-ink-frame--one { opacity: 1; }
.hero-art.is-motion-ready .hero-piece-motion {
  animation: hero-piece-drift var(--hero-duration) ease-in-out var(--hero-delay) infinite;
  animation-play-state: var(--art-play-state);
}
.hero-art.is-motion-ready::before { animation: hero-grid-poses 2.4s steps(1, end) infinite; animation-play-state: var(--art-play-state); }
.hero-art.is-motion-ready .hero-scene-shape { animation: hero-scene-poses 2.4s steps(1, end) infinite; animation-play-state: var(--art-play-state); }
.hero-art.is-motion-ready .hero-scene-shape--dots { animation-delay: -.8s; }
.hero-art.is-motion-ready .hero-scene-shape--checks { animation-delay: -1.6s; }
.hero-art.is-motion-ready .hero-scene-shape--shadow { animation-name: hero-shadow-poses; }
.hero-art.is-motion-ready .hero-ink-frame { animation: hero-ink-poses 1.8s steps(1, end) infinite; animation-play-state: var(--art-play-state); }
.hero-art.is-motion-ready .hero-ink-frame--two { animation-delay: -.6s; }
.hero-art.is-motion-ready .hero-ink-frame--three { animation-delay: -1.2s; }
.hero-art.is-motion-paused { --art-play-state: paused; }
.hero-art.is-motion-ready .art-sticker, .hero-art.is-motion-ready figcaption {
  animation: hero-note-drift 8s ease-in-out infinite; animation-play-state: var(--art-play-state);
  transition: scale .2s ease; transform-origin: center;
}
.hero-art.is-motion-ready figcaption { animation-delay: -3.5s; }
@media(hover: hover) {
  .hero-piece:hover { --art-play-state: paused; }
  .hero-piece:hover .hero-piece-scale { transform: scale(1.045); filter: drop-shadow(2px 3px 0 #49218136); }
  .hero-art.is-motion-ready .art-sticker:hover, .hero-art.is-motion-ready figcaption:hover { animation-play-state: paused; scale: 1.035; }
}
@keyframes hero-piece-drift {
  0%, 100% { transform: translate(0, 0) rotate(0); }
  25% { transform: translate(var(--hero-x), var(--hero-y)) rotate(var(--hero-turn)); }
  50% { transform: translate(calc(var(--hero-x) * -.45), calc(var(--hero-y) * .35)) rotate(calc(var(--hero-turn) * -.4)); }
  75% { transform: translate(calc(var(--hero-x) * -.8), calc(var(--hero-y) * -.6)) rotate(calc(var(--hero-turn) * -.65)); }
}
@keyframes hero-grid-poses {
  0%, 100% { background-position: 0 0; background-color: #8a68ef; }
  34% { background-position: 1px -1px; background-color: #8b69ee; }
  67% { background-position: -1px 1px; background-color: #8967ed; }
}
@keyframes hero-scene-poses {
  0%, 100% { transform: translate(0, 0); opacity: 1; }
  34% { transform: translate(1.5px, -1px); opacity: .91; }
  67% { transform: translate(-1px, 1px); opacity: .97; }
}
@keyframes hero-shadow-poses {
  0%, 100% { transform: scaleX(1); opacity: 1; }
  34% { transform: scaleX(.985); opacity: .88; }
  67% { transform: scaleX(1.015); opacity: .96; }
}
@keyframes hero-ink-poses { 0%, 33.32% { opacity: 1; } 33.33%, 100% { opacity: 0; } }
@keyframes hero-note-drift { 0%, 100% { translate: 0 0; } 50% { translate: 0 -3px; } }
/* This small scene is explicitly animated by request, including with reduced motion enabled. */
@media(prefers-reduced-motion: reduce) {
  .hero-piece-scale { transition: transform .18s ease, filter .18s ease !important; }
  .hero-art.is-motion-ready .art-sticker, .hero-art.is-motion-ready figcaption { transition: scale .18s ease !important; }
}

/* Feature illustrations share the scene lifecycle; individual transforms keep their original tilt. */
.feature-visual[data-feature-art] { --art-play-state: running; isolation: isolate; }
.feature-visual[data-feature-art].is-motion-paused { --art-play-state: paused; }
.feature-visual [data-art-piece] {
  --card-x: 1.8px; --card-y: -3px; --card-duration: 8s; --card-delay: -.8s;
  scale: 1; translate: 0 0; transform-origin: center; cursor: default;
  transition: scale .2s ease, filter .2s ease;
}
.feature-visual [data-art-piece="image-back"] { --card-x: -2px; --card-y: -3.5px; --card-duration: 8.6s; --card-delay: -1.5s; z-index: 1; }
.feature-visual [data-art-piece="image-front"] { --card-x: 2px; --card-y: 3px; --card-duration: 7.4s; --card-delay: -4s; z-index: 2; }
.feature-visual [data-art-piece="video-board"] { --card-x: 1px; --card-y: -3.5px; --card-duration: 9s; --card-delay: -2.4s; }
.feature-visual [data-art-piece="idea-note"] { --card-x: -2px; --card-y: -3px; --card-duration: 8.3s; --card-delay: -.7s; z-index: 1; }
.feature-visual [data-art-piece="reply-note"] { --card-y: 2.5px; --card-duration: 7.5s; --card-delay: -3.8s; z-index: 2; }
.feature-visual [data-art-piece="tool-crop"] { --card-x: -1.8px; --card-y: -3px; --card-delay: -1s; }
.feature-visual [data-art-piece="tool-stack"] { --card-y: 3px; --card-duration: 8.8s; --card-delay: -4.5s; }
.feature-visual [data-art-piece="tool-compress"] { --card-x: 1px; --card-y: -2.5px; --card-duration: 7.3s; --card-delay: -2.8s; }
.feature-visual [data-art-piece="spark"] { --card-x: 1px; --card-y: -2px; --card-duration: 6.5s; --card-delay: -2.3s; z-index: 3; }
.feature-visual [data-art-piece="caption"] { --card-x: 1px; --card-y: -1.5px; --card-duration: 9.2s; --card-delay: -3s; z-index: 3; }
.feature-visual.is-motion-ready [data-art-piece] {
  animation: feature-card-drift var(--card-duration) ease-in-out var(--card-delay) infinite;
  animation-play-state: var(--art-play-state);
}
.feature-visual.is-motion-ready {
  animation: feature-backdrop-poses 2.4s steps(1, end) infinite;
  animation-play-state: var(--art-play-state);
}
.feature-visual [data-art-piece]:focus { outline: none; }
.feature-visual [data-art-piece]:focus-visible, .feature-visual [data-art-piece].is-touch-held {
  --art-play-state: paused; scale: 1.04; z-index: 5; filter: drop-shadow(1px 2px 0 #49218124);
}
@media(hover: hover) {
  .feature-visual [data-art-piece]:hover {
    --art-play-state: paused; scale: 1.04; z-index: 5; filter: drop-shadow(1px 2px 0 #49218124);
  }
}
@keyframes feature-card-drift {
  0%, 100% { translate: 0 0; }
  25% { translate: var(--card-x) var(--card-y); }
  50% { translate: calc(var(--card-x) * -.4) calc(var(--card-y) * .3); }
  75% { translate: calc(var(--card-x) * -.8) calc(var(--card-y) * -.5); }
}
@keyframes feature-backdrop-poses {
  0%, 100% { background-position: 0 0; }
  34% { background-position: 1px -1px; }
  67% { background-position: -1px 1px; }
}
@media(prefers-reduced-motion: reduce) {
  .feature-visual [data-art-piece] { transition: scale .18s ease, filter .18s ease !important; }
}
@media(max-width:420px) {
  .image-visual .sheet-back { left: 44px; top: 38px; }
  .image-visual .sheet-front { left: auto; right: 30px; }
}
@media(min-width:651px) and (max-width:750px) {
  .image-visual .sheet-back { left: 28px; }
  .image-visual .sheet-front { left: 108px; }
}

/* Website accounts share the product's comic palette and actual program logo. */
.download-hint a { font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.website-download-unavailable { opacity: .55; cursor: default; }
.website-download-unavailable:hover { transform: none; box-shadow: 3px 3px 0 var(--ink); }
.website-auth-dialog { width: min(920px, calc(100% - 40px)); max-height: calc(100dvh - 40px); padding: 0; border: 3px solid var(--ink); border-radius: 22px; color: var(--ink); background: #fffdf8; box-shadow: 9px 9px 0 var(--ink); overflow: auto; }
.website-auth-dialog::backdrop { background: #201332ad; backdrop-filter: blur(5px); }
html:has(.website-auth-dialog[open]) { overflow: hidden; }
.website-auth-shell { display: grid; grid-template-columns: 32% 1fr; position: relative; background: #fffdf8; border-radius: 18px; }
.website-auth-close { position: absolute; top: 15px; right: 15px; z-index: 2; display: grid; place-items: center; width: 33px; height: 33px; padding: 0; border: 2px solid var(--ink); border-radius: 50%; background: #fffdf8; font-size: 25px; line-height: 1; }
.website-auth-close:hover { background: var(--yellow); transform: rotate(8deg); }
.website-auth-art { background: #8058eb; color: #fffdf8; border-radius: 17px 0 0 17px; padding: 40px 27px 32px; overflow: hidden; position: relative; display: flex; flex-direction: column; align-items: flex-start; border-right: 3px solid var(--ink); }
.website-auth-art::after { content: ''; width: 220px; height: 220px; position: absolute; right: -125px; bottom: -100px; border: 28px solid #a180f5; border-radius: 50%; pointer-events: none; }
.website-art-tag { display: inline-flex; padding: 4px 10px; border: 2px solid var(--ink); border-radius: 7px; color: var(--ink); background: var(--yellow); font-size: 11px; font-weight: 700; transform: rotate(-4deg); box-shadow: 2px 2px 0 var(--ink); }
.website-auth-art>img { object-fit: contain; padding: 17px; background: #302244; border: 2px solid var(--ink); border-radius: 22px; margin: 42px 0 15px; box-shadow: 4px 4px 0 var(--ink); transform: rotate(-7deg); }
.website-auth-art h1, .website-auth-art h2 { font-size: 30px; line-height: 1.55; letter-spacing: -1px; margin: 18px 0 10px; color: var(--yellow); }
.website-auth-art p { font-size: 13px; line-height: 1.9; color: #f1eaff; margin: 0; }
.website-art-star { font-size: 70px; line-height: 1; color: var(--yellow); margin: 23px 0; align-self: flex-end; transform: rotate(13deg); text-shadow: 3px 3px 0 var(--ink); }
.website-art-bottom { margin-top: auto; font-size: 10px; letter-spacing: 1px; position: relative; z-index: 1; }
.website-auth-panel { min-width: 0; padding: 32px 40px 28px; }
.website-auth-tabs { display: flex; gap: 28px; border-bottom: 2px solid #e4ddef; margin: 0 18px 23px 0; font-size: 14px; font-weight: 700; }
.website-auth-tabs a { padding: 4px 0 10px; position: relative; color: #8c839c; }
.website-auth-tabs a[aria-current] { color: var(--ink); }
.website-auth-tabs a[aria-current]::after { content: ''; position: absolute; height: 4px; border-radius: 3px; background: #8058eb; bottom: -3px; inset-inline: 0; }
.website-auth-eyebrow { color: #7c55ca; font-size: 11px; font-weight: 700; letter-spacing: 1px; }
.website-auth-panel h2 { font-size: 28px; line-height: 1.4; margin: 9px 0; letter-spacing: -1px; }
.website-auth-panel h2>span { color: #8058eb; }
.website-auth-intro { color: var(--muted); font-size: 12px; margin: 0 0 23px; }
.website-auth-fields { display: grid; gap: 14px 18px; }
.website-auth-fields--register { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.website-auth-field { min-width: 0; }
.website-auth-field[data-field="email"] { grid-column: 1/-1; }
.website-auth-field label { display: block; font-size: 12px; font-weight: 700; margin-bottom: 5px; }
.website-auth-field label>span { color: #7950c8; }
.website-auth-field input { width: 100%; min-width: 0; height: 43px; padding: 9px 11px; border: 1.5px solid #b5abc6; border-radius: 8px; background: #faf7ff; color: var(--ink); font: inherit; font-size: 13px; outline: none; transition: border-color .15s, box-shadow .15s; }
.website-auth-field input:focus { border-color: #7145d1; box-shadow: 3px 3px 0 #d6c5ff; background: white; }
.website-auth-field input[aria-invalid="true"] { border-color: #b53042; }
.website-auth-field>small { display: block; font-size: 10px; line-height: 1.6; color: #81768f; margin-top: 5px; }
.website-field-error { font-size: 11px; line-height: 1.6; color: #ae2740; }
.website-field-error p { margin: 4px 0 0; }
.website-auth-alert { border: 1px solid #db8292; border-radius: 8px; background: #fff0f1; color: #9e243b; padding: 9px 12px; font-size: 12px; margin-bottom: 14px; }
.website-auth-alert p { margin: 2px 0; }
.website-auth-submit { width: 100%; margin-top: 23px; padding: 11px 16px; justify-content: space-between; font-size: 14px; }
.website-auth-submit:disabled { opacity: .65; cursor: wait; transform: none; }
.website-auth-note { font-size: 10px; color: #8c8199; margin: 14px 0 0; line-height: 1.8; }
.website-account-body { min-height: 100dvh; background-color: #f7f4ff; background-image: radial-gradient(#c9bbe1 1px, transparent 1px); background-size: 22px 22px; }
.website-account-header { display: flex; align-items: center; justify-content: space-between; height: 100px; gap: 20px; }
.website-back { font-size: 13px; font-weight: 700; display: flex; align-items: center; gap: 13px; }
.website-back:hover { color: #7145d1; }
.website-auth-page { max-width: 926px; padding: 35px 0 20px; }
.website-auth-page>.website-auth-shell { border: 3px solid var(--ink); box-shadow: 8px 8px 0 var(--ink); }
.website-page-foot { text-align: center; font-size: 11px; color: #92849f; margin: 35px 0; letter-spacing: 1px; }
.website-profile { max-width: 1080px; padding-top: 28px; }
.website-profile-banner { display: flex; align-items: center; justify-content: space-between; gap: 25px; padding: 34px 42px; border: 3px solid var(--ink); background: #8058eb; color: white; border-radius: 20px; box-shadow: 6px 6px 0 var(--ink); position: relative; overflow: hidden; }
.website-profile-banner::after { content: ''; width: 280px; height: 280px; border: 35px solid #9f7aef; position: absolute; right: -45px; top: -100px; border-radius: 50%; }
.website-profile-banner>div, .website-profile-banner>img { position: relative; z-index: 1; }
.website-profile-banner h1 { font-size: 34px; line-height: 1.4; margin: 16px 0 7px; overflow-wrap: anywhere; }
.website-profile-banner h1>span { color: var(--yellow); }
.website-profile-banner p { color: #e6dbff; font-size: 13px; margin: 0; }
.website-profile-banner>img { object-fit: contain; padding: 16px; border: 2px solid var(--ink); border-radius: 24px; background: #302244; box-shadow: 5px 5px 0 var(--ink); transform: rotate(8deg); flex-shrink: 0; margin-right: 15px; }
.website-profile-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 25px; margin-top: 32px; }
.website-profile-card { border: 2px solid var(--ink); border-radius: 16px; background: #fffdf8; padding: 28px 30px; box-shadow: 4px 4px 0 var(--ink); min-width: 0; }
.website-profile-title { display: flex; align-items: center; gap: 10px; }
.website-profile-title h2 { margin: 0; font-size: 18px; }
.website-profile-icon { display: grid; place-items: center; border: 1.5px solid var(--ink); background: #e7dcff; border-radius: 8px; width: 32px; height: 32px; font-size: 23px; line-height: 1; }
.website-profile-badge { margin-left: auto; border: 1px solid #7c9a63; background: #edffd7; color: #49652c; font-size: 10px; padding: 2px 9px; border-radius: 20px; white-space: nowrap; }
.website-profile-caption { font-size: 11px; color: #8d8297; margin: 13px 0 24px; }
.website-profile-details dl { margin: 20px 0 30px; }
.website-profile-details dl>div { display: grid; grid-template-columns: 94px minmax(0,1fr); gap: 14px; padding-block: 17px; border-bottom: 1px dashed #ddd3e7; }
.website-profile-details dt { color: #8e819b; font-size: 12px; }
.website-profile-details dd { font-size: 13px; font-weight: 600; margin: 0; overflow-wrap: anywhere; }
.website-profile-bottom { display: flex; align-items: center; gap: 10px; justify-content: space-between; flex-wrap: wrap; }
.website-profile-bottom>span { font-size: 10px; color: #96899e; }
.website-logout { padding: 7px 12px; border: 1.5px solid var(--ink); border-radius: 7px; background: #f2eaff; font-size: 11px; }
.website-logout:hover { background: var(--yellow); }
.website-profile-side { display: grid; gap: 24px; }
.website-points-card { background: #eeff8b; }
.website-points-card .website-profile-icon { background: #fffdf8; }
.website-points-card .website-profile-caption { color: #6b7442; margin-bottom: 16px; }
.website-points-value { font-size: 38px; font-weight: 800; line-height: 1.2; overflow-wrap: anywhere; }
.website-points-value small { display: block; font-size: 11px; font-weight: 500; margin-top: 7px; color: #717747; }
.website-frozen-points { display: flex; justify-content: space-between; border-top: 1px dashed #a9b960; padding-top: 13px; margin: 19px 0 0; font-size: 11px; color: #66703e; }
.website-profile-download { position: relative; background: #e9dfff; }
.website-profile-download h2 { font-size: 20px; margin: 6px 0 12px; padding-right: 55px; }
.website-profile-download p { color: #786a90; font-size: 12px; margin-bottom: 20px; }
.website-profile-download .button { font-size: 13px; padding-block: 11px; }
.website-profile-sticker { position: absolute; right: 18px; top: 20px; font-size: 9px; font-weight: 800; padding: 4px 8px; border: 1.5px solid var(--ink); background: #ffb2cd; border-radius: 5px; transform: rotate(9deg); }
@media(max-width:800px) {
  .website-auth-panel { padding: 30px 27px 24px; }
  .website-auth-art { padding-inline: 20px; }
  .website-auth-art h1, .website-auth-art h2 { font-size: 25px; }
  .website-profile-card { padding: 23px; }
  .website-profile-grid { gap: 20px; }
  .website-profile-details dl>div { grid-template-columns: 65px minmax(0,1fr); gap: 10px; }
}
@media(max-width:650px) {
  .website-auth-dialog { width: calc(100% - 28px); max-height: calc(100dvh - 28px); border-radius: 17px; box-shadow: 5px 5px 0 var(--ink); }
  .website-auth-shell { grid-template-columns: 1fr; border-radius: 14px; }
  .website-auth-art { display: none; }
  .website-auth-panel { padding: 25px 23px; }
  .website-auth-panel h2 { font-size: 25px; }
  .website-auth-tabs { margin-right: 37px; }
  .website-auth-intro { font-size: 11px; }
  .website-auth-fields--register { gap: 12px; }
  .website-auth-field input { font-size: 16px; }
  .website-auth-field>small { font-size: 9px; }
  .website-account-header { height: 82px; }
  .website-account-header .brand { font-size: 17px; }
  .website-account-header .brand>img { width: 35px; height: 35px; }
  .website-back { font-size: 11px; gap: 5px; white-space: nowrap; }
  .website-auth-page { padding-top: 15px; }
  .website-profile { padding-top: 12px; }
  .website-profile-banner { padding: 27px 23px; gap: 10px; }
  .website-profile-banner h1 { font-size: 26px; }
  .website-profile-banner>img { width: 72px; height: 72px; padding: 10px; margin: 0; border-radius: 16px; }
  .website-profile-banner p { font-size: 11px; }
  .website-profile-grid { grid-template-columns: 1fr; margin-top: 25px; gap: 22px; }
  .website-profile-details dl>div { grid-template-columns: 80px minmax(0,1fr); }
  .website-profile-side { gap: 22px; }
}
@media(max-width:390px) {
  .website-auth-fields--register { grid-template-columns: 1fr; }
  .website-auth-field>small { font-size: 10px; }
  .website-profile-banner>img { width: 59px; height: 59px; }
}