:root{--ink: #18181b;--ink-2: #52525b;--muted: #71717a;--line: #e4e4e7;--page: #f4f4f5;--surface: #ffffff;--accent: #f5c400;--accent-ink: #18181b;--dark: #18181b;--dark-2: #27272a;--radius: 16px;--font: "IBM Plex Sans", "PingFang SC", "Noto Sans SC", sans-serif;--display: "Noto Serif SC", "Songti SC", serif}*{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}body{font-family:var(--font);color:var(--ink);background:var(--page);line-height:1.5;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}img{display:block;max-width:100%}.top{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:20px;padding:14px clamp(20px,4vw,48px);background:color-mix(in srgb,var(--page) 86%,transparent);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid color-mix(in srgb,var(--line) 70%,transparent)}.top__brand{display:inline-flex;align-items:center;gap:10px;font-weight:650;letter-spacing:.01em}.top__brand img{width:28px;height:28px;border-radius:8px}.top__nav{display:flex;gap:18px;margin-left:auto;font-size:14px;color:var(--muted)}.top__nav a:hover{color:var(--ink)}.top__cta{font-size:13px;font-weight:600;padding:8px 14px;border-radius:999px;background:var(--ink);color:#fff}.top__cta:hover{background:#27272a}.btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 20px;border-radius:999px;font-size:14.5px;font-weight:600;transition:transform .16s ease,background .16s ease,color .16s ease}.btn:hover{transform:translateY(-1px)}.btn--primary{background:var(--accent);color:var(--accent-ink)}.btn--primary:hover{background:#ffd34d}.btn--ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--line)}.btn--ghost:hover{background:#fff}.btn--ghost-dark{color:#fafafa;box-shadow:inset 0 0 0 1px #3f3f46}.btn--ghost-dark:hover{background:#27272a}.hero{position:relative;min-height:calc(100svh - 60px);display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:clamp(28px,5vw,56px);padding:clamp(40px,8vh,80px) clamp(20px,5vw,80px);overflow:hidden;background:radial-gradient(ellipse 55% 70% at 8% 45%,rgba(245,196,0,.3),transparent 58%),radial-gradient(ellipse 42% 55% at 92% 20%,rgba(24,24,27,.07),transparent 55%),var(--page)}.hero__glow{position:absolute;inset:auto -10% -30% 40%;height:55%;background:radial-gradient(ellipse at center,rgba(245,196,0,.12),transparent 70%);pointer-events:none}.hero__grain{position:absolute;inset:0;opacity:.35;pointer-events:none;background-image:radial-gradient(#a1a1aa .6px,transparent .8px);background-size:14px 14px;-webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.35),transparent 70%);mask-image:linear-gradient(180deg,rgba(0,0,0,.35),transparent 70%)}.hero__copy,.hero__visual{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease}.hero__copy.is-in,.hero__visual.is-in{opacity:1;transform:none}.hero__visual.is-in{transition-delay:.12s}.hero__brand{font-family:var(--display);font-size:clamp(52px,7.2vw,80px);font-weight:700;letter-spacing:-.03em;line-height:1.02;margin-bottom:14px}.hero__title{font-size:clamp(22px,2.6vw,28px);font-weight:600;letter-spacing:-.02em;margin-bottom:12px}.hero__sub{max-width:30em;font-size:clamp(16px,1.6vw,19px);color:var(--ink-2);line-height:1.55;margin-bottom:28px}.hero__actions{display:flex;flex-wrap:wrap;gap:10px}.hero__visual{display:flex;justify-content:flex-end;align-items:center;gap:20px;position:relative;z-index:1}.popup{width:min(300px,100%);background:#fafafa;border-radius:var(--radius);box-shadow:0 24px 48px #0000001f,0 0 0 1px #0000000f;padding:14px;transform:rotate(1.5deg)}.popup.float{animation:float 5.5s ease-in-out infinite}@keyframes float{0%,to{transform:rotate(1.5deg) translateY(0)}50%{transform:rotate(1.5deg) translateY(-8px)}}.popup__brand{display:flex;gap:10px;align-items:center;margin-bottom:12px}.popup__brand img{border-radius:7px}.popup__brand strong{display:block;font-size:13.5px}.popup__brand span{font-size:11px;color:var(--muted)}.popup__row,.popup__panel{background:#fff;border-radius:10px;padding:10px 12px;margin-bottom:8px;box-shadow:0 0 0 1px #0000000d}.popup__row{display:flex;justify-content:space-between;align-items:center;gap:12px}.popup__row:last-child,.popup__panel:last-child{margin-bottom:0}.popup__row b,.popup__panel-head b{display:block;font-size:12.5px}.popup__row i,.popup__panel-head i{font-style:normal;font-size:10.5px;color:var(--muted)}.popup__panel-head{margin-bottom:8px}.popup__swatches{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}.swatch{aspect-ratio:1.35;border-radius:5px;box-shadow:inset 0 0 0 1px #0000000f}.swatch.is-on{box-shadow:inset 0 0 0 1px #0000001f,0 0 0 1.5px var(--accent)}.swatch--plain{background:#fafafa}.swatch--blend{background:#fff;box-shadow:inset 0 0 0 1px #0000001a}.swatch--dot{background-color:#f4f4f5;background-image:radial-gradient(#a1a1aa 1px,transparent 1.25px);background-size:5px 5px}.swatch--emoji{background-color:#eef1f5;background-image:url(/assets/canvas-emoji-swatch.png);background-size:cover;background-position:center}.swatch--snack{background-color:#f5efea;background-image:url(/assets/canvas-snack-swatch.png);background-size:cover;background-position:center}.swatch--bloom{background-color:#ecf4ee;background-image:url(/assets/canvas-bloom-swatch.png);background-size:cover;background-position:center}.swatch--mood{background-color:#f2eef8;background-image:url(/assets/canvas-mood-swatch.png);background-size:cover;background-position:center}.swatch--glass{background-image:radial-gradient(ellipse 70% 90% at 50% 0%,rgba(255,255,255,.95),transparent 65%),linear-gradient(180deg,#fafafa,#f0f0f1)}.swatch--custom{display:grid;place-items:center;background:#f4f4f5;font-size:16px;font-weight:500;color:#71717a}.popup__widths{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}.popup__widths span{display:flex;align-items:center;justify-content:center;height:22px;border-radius:5px;background:#f4f4f5;box-shadow:inset 0 0 0 1px #0000000d}.popup__widths span.is-on{box-shadow:inset 0 0 0 1px #0000001a,0 0 0 1.5px var(--accent)}.popup__widths i{display:block;height:7px;border-radius:999px;background:#18181b;font-style:normal}.sw{width:36px;height:20px;border-radius:999px;background:var(--ink);position:relative;flex-shrink:0}.sw:after{content:"";position:absolute;top:2px;left:18px;width:16px;height:16px;border-radius:50%;background:#fff}.hero__mark{width:96px;height:96px;border-radius:22px;overflow:hidden;background:#000;box-shadow:0 24px 48px #00000029,0 0 0 1px #0000000f;animation:mark-in .9s ease both}.hero__mark img{width:100%;height:100%;object-fit:cover}@keyframes mark-in{0%{opacity:0;transform:scale(.92)}to{opacity:1;transform:none}}.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease}.reveal.is-in{opacity:1;transform:none}.strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);border-block:1px solid var(--line)}.strip p{background:#fafafa;padding:22px clamp(16px,3vw,28px);display:flex;flex-direction:column;gap:4px}.strip strong{font-size:15px;font-weight:650}.strip span{font-size:13px;color:var(--muted)}.feature{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,64px);align-items:center;padding:clamp(64px,10vh,112px) clamp(20px,5vw,80px);opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease}.feature>*{min-width:0}.feature.is-in{opacity:1;transform:none}.eyebrow{font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}.feature h2,.split__copy h2,.faq__head h2{font-family:var(--display);font-size:clamp(28px,3.4vw,40px);font-weight:700;letter-spacing:-.02em;line-height:1.2;margin-bottom:12px}.lead{font-size:17px;color:var(--ink-2);line-height:1.6;max-width:28em}.list{margin-top:18px;list-style:none;display:flex;flex-direction:column;gap:8px;color:var(--ink);font-size:15px;font-weight:500}.list li{padding-left:1em;position:relative}.list li:before{content:"";position:absolute;left:0;top:.55em;width:6px;height:6px;border-radius:50%;background:var(--accent)}.list--light{color:#e4e4e7}.feature--theme{background:radial-gradient(#c4c4c8 1.1px,transparent 1.3px) 0 0 / 18px 18px,#f4f4f5}.theme-stage{display:flex;flex-direction:column;gap:16px;justify-self:end;width:min(480px,100%)}.canvas-board{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.canvas-tile{margin:0;cursor:pointer;border:0;background:transparent;text-align:center}.canvas-face{height:56px;border-radius:10px;box-shadow:inset 0 0 0 1px #0000000f;transition:transform .18s ease,box-shadow .18s ease}.canvas-tile:hover .canvas-face{transform:translateY(-2px)}.canvas-tile.is-active .canvas-face{box-shadow:inset 0 0 0 1px #00000014,0 0 0 2px var(--accent)}.canvas-tile figcaption{margin-top:6px;font-size:11.5px;font-weight:500;color:var(--muted)}.canvas-tile.is-active figcaption{color:var(--ink)}.canvas-face--plain{background:#fafafa}.canvas-face--blend{background:#fff;box-shadow:inset 0 0 0 1px #00000014}.canvas-face--dot{background-color:#f4f4f5;background-image:radial-gradient(#a1a1aa 1px,transparent 1.25px);background-size:6px 6px}.canvas-face--emoji{background-color:#eef1f5;background-image:url(/assets/canvas-emoji.png);background-size:120px 120px;background-repeat:repeat}.canvas-face--snack{background-color:#f5efea;background-image:url(/assets/canvas-snack.png);background-size:120px 120px;background-repeat:repeat}.canvas-face--bloom{background-color:#ecf4ee;background-image:url(/assets/canvas-bloom.png);background-size:120px 120px;background-repeat:repeat}.canvas-face--mood{background-color:#f2eef8;background-image:url(/assets/canvas-mood.png);background-size:120px 120px;background-repeat:repeat}.canvas-face--glass{background-image:radial-gradient(ellipse 70% 90% at 50% 0%,rgba(255,255,255,.95),transparent 65%),linear-gradient(180deg,#fafafa,#ececee)}.canvas-face--custom{display:grid;place-items:center;background:#f4f4f5;font-size:22px;font-weight:500;color:#71717a}.canvas-face--paper{background-color:#fafafa;background-image:linear-gradient(rgba(24,24,27,.08) 1px,transparent 1px),linear-gradient(180deg,#fcfcfc,#f5f5f6);background-size:100% 6px,100% 100%}.feed{display:flex;flex-direction:column;gap:12px;width:100%}.post{background:var(--surface);border-radius:14px;padding:16px 18px;box-shadow:0 1px 2px #00000008,0 0 0 1px #0000000a}.post__meta{display:flex;align-items:center;gap:10px;margin-bottom:10px}.post__meta strong{display:block;font-size:13.5px}.post__meta span:last-child{font-size:12px;color:#a1a1aa}.post p{font-size:14.5px;line-height:1.6;color:#27272a}.avatar{width:34px;height:34px;border-radius:50%;flex-shrink:0}.avatar--y{background:linear-gradient(135deg,#f5c400,#f0b400)}.avatar--g{background:linear-gradient(135deg,#a1a1aa,#71717a)}.avatar--s{background:linear-gradient(135deg,#d4d4d8,#e4e4e7)}.feature--write{background:var(--dark);color:#fafafa;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}.feature__copy--light .eyebrow{color:#a1a1aa}.feature__copy--light h2{overflow-wrap:anywhere}.feature__copy--light .lead{color:#a1a1aa;max-width:none}.studio{background:radial-gradient(ellipse 70% 80% at 50% 0%,rgba(255,255,255,.08),transparent 60%),var(--dark-2);border-radius:20px;padding:24px 26px;box-shadow:0 40px 80px #00000059,0 0 0 1px #ffffff0f;min-height:360px;display:flex;flex-direction:column;gap:14px}.studio__bar{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}.studio__brand{display:flex;align-items:center;gap:10px;min-width:0}.studio__brand img{width:22px;height:22px;border-radius:6px;flex-shrink:0;background:#000}.studio__brand strong{display:block;font-size:14px;font-weight:650;letter-spacing:.01em}.studio__brand span{display:block;margin-top:2px;font-size:12px;color:#a1a1aa}.studio__actions{display:flex;gap:8px}.studio__styles{display:flex;flex-wrap:wrap;gap:8px}.style{display:inline-flex;align-items:center;height:28px;padding:0 11px;border-radius:999px;background:#3f3f46;color:#d4d4d8;font-size:12px;font-weight:500}.style.is-on{background:#52525b;color:#fff;box-shadow:inset 0 0 0 1px #ffffff1f}.chip{display:inline-flex;align-items:center;height:30px;padding:0 12px;border-radius:999px;background:#3f3f46;color:#fafafa;font-size:12px;font-weight:600}.chip--accent{background:var(--accent);color:var(--accent-ink)}.studio__editor{flex:1;background:#18181b;border:1px solid #3f3f46;border-radius:14px;padding:20px 22px;font-size:16px;line-height:1.75;color:#e4e4e7;letter-spacing:.01em}.caret{display:inline-block;width:2px;height:1.05em;background:var(--accent);vertical-align:-.12em;margin-left:2px;animation:blink 1s step-end infinite}@keyframes blink{50%{opacity:0}}.studio__foot{display:flex;justify-content:space-between;font-size:12px;color:#71717a}.feature--width{grid-template-columns:1fr;justify-items:center;text-align:center;background:#fafafa}.feature__copy--center{max-width:36em}.feature__copy--center .lead{margin-inline:auto}.widths{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;width:min(960px,100%);margin-top:8px}.width{background:#fff;border-radius:16px;padding:16px;box-shadow:0 1px 2px #0000000a,0 0 0 1px #0000000d;text-align:left;transition:transform .18s ease,box-shadow .18s ease}.width:hover{transform:translateY(-2px)}.width--active{box-shadow:0 0 0 2px var(--accent),0 12px 28px #0000000f}.width__label{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;font-size:14px;font-weight:650}.width__label em{font-style:normal;font-size:11px;font-weight:600;color:var(--muted)}.width--active .width__label em{background:var(--accent);color:var(--ink);border-radius:999px;padding:3px 8px}.width__stage{height:180px;border-radius:10px;background:#f4f4f5;display:grid;place-items:center}.width__hint{margin-top:10px;font-size:12.5px;color:var(--muted)}.width__card{background:#fff;border-radius:8px;padding:12px;box-shadow:0 1px 2px #0000000a,0 0 0 1px #0000000d;display:flex;flex-direction:column;gap:8px}.width__card--sm{width:42%}.width__card--md{width:64%}.width__card--lg{width:86%}.width__card i{display:block;height:8px;border-radius:999px;background:#e4e4e7}.width__card i:nth-child(1){width:80%}.width__card i:nth-child(2){width:92%}.width__card i:nth-child(3){width:55%}.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,64px);align-items:center;padding:clamp(64px,10vh,100px) clamp(20px,5vw,80px);background:radial-gradient(ellipse 40% 50% at 90% 20%,rgba(245,196,0,.14),transparent 60%),#fff}.split__board{display:grid;gap:12px}.split__item{padding:18px 20px;border-radius:14px;background:var(--page);box-shadow:inset 0 0 0 1px #0000000d}.split__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}.split__head strong{font-size:16px}.split__item p{font-size:14px;color:var(--muted)}.faq{padding:clamp(64px,10vh,100px) clamp(20px,5vw,80px);background:var(--page)}.faq__head{max-width:36em;margin-bottom:28px}.faq__list{display:grid;gap:10px;max-width:760px}.faq__item{background:#fff;border-radius:14px;padding:4px 18px;box-shadow:0 0 0 1px #0000000d}.faq__item summary{list-style:none;cursor:pointer;padding:14px 0;font-size:16px;font-weight:600;display:flex;justify-content:space-between;align-items:center;gap:12px}.faq__item summary::-webkit-details-marker{display:none}.faq__item summary:after{content:"+";font-weight:500;color:var(--muted);font-size:18px;line-height:1}.faq__item[open] summary:after{content:"–"}.faq__item p{padding:0 0 16px;color:var(--ink-2);font-size:15px;line-height:1.6}.faq__item a{color:var(--ink);text-decoration:underline;text-underline-offset:.16em}.install{padding:clamp(72px,12vh,120px) clamp(20px,5vw,80px);background:radial-gradient(ellipse 50% 60% at 50% 0%,rgba(245,196,0,.18),transparent 60%),var(--dark);color:#fafafa;opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease}.install.is-in{opacity:1;transform:none}.install__inner{max-width:560px;margin:0 auto;text-align:center}.install__mark{width:72px;height:72px;border-radius:18px;margin:0 auto 18px;background:#000}.install h2{font-family:var(--display);font-size:clamp(32px,4vw,44px);letter-spacing:-.02em;margin-bottom:10px}.install p{color:#a1a1aa;font-size:16px;margin-bottom:24px}.install__actions{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-bottom:32px}.install__manual{text-align:left;padding:18px 20px;border-radius:14px;background:#ffffff0a;box-shadow:inset 0 0 0 1px #ffffff0f}.install__manual-title{margin:0 0 12px!important;color:#e4e4e7!important;font-size:13px!important;font-weight:600;letter-spacing:.02em}.steps{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:10px 18px;color:#71717a;font-size:13px;counter-reset:step}.steps--manual{flex-direction:column;flex-wrap:nowrap;align-items:stretch;gap:10px;justify-content:flex-start;color:#a1a1aa}.steps--manual li{align-items:flex-start}.steps--manual code,.faq__item code{font-family:ui-monospace,SF Mono,Menlo,Consolas,monospace;font-size:.92em;padding:1px 6px;border-radius:5px;background:#ffffff14;color:#e4e4e7}.faq__item code{background:#f4f4f5;color:var(--ink-2)}.faq__item a{color:var(--ink);text-decoration:underline;text-underline-offset:2px}.steps li{display:inline-flex;align-items:center;gap:8px}.steps li:before{content:counter(step);counter-increment:step;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;background:#27272a;color:#d4d4d8;font-size:11px;font-weight:600}.steps--manual li:before{margin-top:1px;flex-shrink:0}.foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;padding:22px clamp(20px,5vw,80px);background:#111113;color:#71717a;font-size:13px}.foot__brand{display:inline-flex;align-items:center;gap:8px;color:#d4d4d8;font-weight:600}.foot__brand img{width:20px;height:20px;border-radius:5px}.foot__links{display:inline-flex;flex-wrap:wrap;gap:14px}.foot a{color:#d4d4d8}.foot a:hover{color:#fff}@media(max-width:900px){.top__nav{display:none}.hero{grid-template-columns:1fr;min-height:auto;padding-top:48px;padding-bottom:56px}.hero__visual{justify-content:center;order:-1}.hero__mark{display:none}.strip,.feature,.feature--write,.split{grid-template-columns:1fr}.theme-stage{justify-self:stretch;width:100%}.widths{grid-template-columns:1fr}.width__stage{height:140px}.foot{flex-direction:column;align-items:flex-start}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.popup.float,.caret,.hero__mark{animation:none}.hero__copy,.hero__visual,.feature,.install,.reveal{opacity:1;transform:none;transition:none}}
