:root{--ink:#17201b;--muted:#68726c;--paper:#f6f7f2;--white:#fff;--green:#23543b;--green-dark:#153d29;--lime:#dafa78;--line:#17201b1f;--shadow:0 24px 70px #1e33271f}*{box-sizing:border-box}html{scroll-behavior:smooth}body{background:radial-gradient(circle at 7% 4%, #dafa7857, transparent 23rem), radial-gradient(circle at 92% 16%, #8bd3aa2e, transparent 25rem), var(--paper);color:var(--ink);font-family:var(--font-geist-sans), "PingFang SC", "Microsoft YaHei", sans-serif;min-width:320px;margin:0}button,input{font:inherit}button,a{-webkit-tap-highlight-color:transparent}button:focus-visible,input:focus-visible,a:focus-visible,canvas:focus-visible{outline-offset:3px;outline:3px solid #23543b47}::selection{color:var(--green-dark);background:var(--lime)}.site-shell{min-height:100vh;overflow:hidden}.nav{justify-content:space-between;align-items:center;width:min(980px,100% - 40px);height:72px;margin:0 auto;display:flex}.brand{color:var(--ink);letter-spacing:-.04em;align-items:center;gap:11px;font-size:20px;font-weight:760;text-decoration:none;display:inline-flex}.brand-mark{background:var(--green);width:34px;height:34px;color:var(--lime);border-radius:11px;place-items:center;font-size:17px;font-weight:800;display:grid;transform:rotate(-5deg);box-shadow:0 7px 18px #23543b38}.privacy-pill{border:1px solid var(--line);color:#536058;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#ffffff8f;border-radius:999px;align-items:center;gap:8px;padding:9px 13px;font-size:13px;font-weight:600;display:inline-flex}.privacy-dot{background:#40a467;border-radius:50%;width:7px;height:7px;box-shadow:0 0 0 4px #40a46721}.hero{text-align:center;width:min(980px,100% - 40px);margin:24px auto 0}.eyebrow{color:var(--green);letter-spacing:.16em;text-transform:uppercase;align-items:center;gap:8px;font-size:12px;font-weight:750;display:inline-flex}.eyebrow:before,.eyebrow:after{content:"";opacity:.42;background:currentColor;width:22px;height:1px}.hero h1{letter-spacing:-.065em;max-width:720px;margin:16px auto 14px;font-size:clamp(38px,5.2vw,60px);font-weight:780;line-height:1.06}.hero h1 span{z-index:0;color:var(--green);white-space:nowrap;position:relative}.hero h1 span:after{content:"";z-index:-1;background:var(--lime);border-radius:99px;height:.24em;position:absolute;bottom:.06em;left:-2%;right:-2%;transform:rotate(-1.2deg)}.hero-copy{max-width:600px;color:var(--muted);margin:0 auto;font-size:15px;line-height:1.65}.url-form{background:#ffffffeb;border:1px solid #23543b29;border-radius:16px;align-items:center;max-width:650px;margin:24px auto 0;padding:7px;display:flex;box-shadow:0 18px 50px #213a2b1f}.url-prefix{color:#8b948e;font-family:var(--font-geist-mono), monospace;white-space:nowrap;padding-left:16px;font-size:14px}.url-form input{min-width:0;height:46px;color:var(--ink);font-family:var(--font-geist-mono), monospace;background:0 0;border:0;outline:0;flex:1;padding:0 10px 0 2px;font-size:16px;font-weight:650}.primary-button,.secondary-button,.shuffle-button{cursor:pointer;border:0;border-radius:12px;min-height:46px;padding:0 21px;font-weight:700;transition:transform .16s,box-shadow .16s,background .16s}.primary-button{background:var(--green);color:#fff;box-shadow:0 10px 24px #23543b2e}.primary-button:hover,.secondary-button:hover,.shuffle-button:hover{transform:translateY(-1px)}.primary-button:active,.secondary-button:active,.shuffle-button:active{transform:translateY(0)}.form-error{color:#a54235;min-height:22px;margin:8px auto -6px;font-size:13px}.workspace{grid-template-columns:minmax(0,1.45fr) minmax(285px,.75fr);align-items:start;gap:18px;width:min(980px,100% - 40px);margin:34px auto 0;display:grid}.preview-panel,.control-panel{border:1px solid var(--line);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);box-shadow:var(--shadow);background:#ffffffc2}.preview-panel{border-radius:22px;padding:13px}.preview-topbar{justify-content:space-between;align-items:center;gap:16px;padding:3px 4px 12px;display:flex}.preview-label{align-items:center;gap:8px;font-size:13px;font-weight:700;display:flex}.live-dot{background:#49a66b;border-radius:50%;width:8px;height:8px;box-shadow:0 0 0 4px #49a66b24}.canvas-frame{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;background:#e8eddc;border-radius:14px;line-height:0;position:relative;overflow:hidden}.canvas-list{gap:14px;display:grid}.canvas-list.multi{align-items:start;gap:8px}.canvas-item{min-width:0}.segment-badge{color:#68726c;font-family:var(--font-geist-mono), monospace;text-overflow:ellipsis;white-space:nowrap;padding:0 4px 8px;font-size:11px;font-weight:650;line-height:1.35;overflow:hidden}.canvas-frame canvas{cursor:pointer;touch-action:manipulation;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;width:100%;height:auto;display:block}.canvas-list.multi .canvas-frame{border-radius:9px}.canvas-list.multi .canvas-action-hint{display:none}.canvas-action-hint{color:#fff;pointer-events:none;-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);background:#121e17b8;border:1px solid #ffffff61;border-radius:999px;padding:7px 9px;font-size:11px;font-weight:700;line-height:1;position:absolute;bottom:10px;right:10px}.canvas-note{color:#849087;font-size:12px}.control-panel{border-radius:22px;padding:22px}.control-panel h2{letter-spacing:-.035em;margin:0 0 8px;font-size:22px}.panel-copy{color:var(--muted);margin:0 0 18px;font-size:14px;line-height:1.65}.control-group{border-top:1px solid var(--line);padding:16px 0}.control-heading{color:#3a463f;justify-content:space-between;align-items:center;gap:12px;margin-bottom:13px;font-size:13px;font-weight:700;display:flex}.control-value{color:var(--green);font-weight:750}.strength-options{grid-template-columns:repeat(3,1fr);gap:8px;display:grid}.style-options{grid-template-columns:repeat(2,1fr);gap:8px;display:grid}.split-options{grid-template-columns:repeat(4,1fr);gap:7px;display:grid}.split-option{border:1px solid var(--line);color:#667169;cursor:pointer;background:#fff;border-radius:10px;height:40px;font-size:13px;font-weight:650}.split-option.active{border-color:var(--green);color:var(--green);box-shadow:inset 0 0 0 1px var(--green);background:#edf5e9}.split-option:disabled{cursor:not-allowed;opacity:.36}.split-help{color:#89928c;margin-top:9px;font-size:11px;line-height:1.5;display:block}.style-option{border:1px solid var(--line);color:#667169;cursor:pointer;background:#fff;border-radius:10px;height:42px;font-size:13px;font-weight:650}.style-option.active{border-color:var(--green);color:var(--green);box-shadow:inset 0 0 0 1px var(--green);background:#edf5e9}.strength-option,.theme-option{border:1px solid var(--line);cursor:pointer;background:#fff}.strength-option{color:#667169;border-radius:10px;height:40px;font-size:13px;font-weight:650}.strength-option.active{border-color:var(--green);color:var(--green);box-shadow:inset 0 0 0 1px var(--green);background:#edf5e9}.theme-options{gap:12px;display:flex}.theme-option{border-radius:50%;width:42px;height:42px;padding:4px}.theme-option span{border-radius:50%;width:100%;height:100%;display:block}.theme-option.active{border-color:var(--green);box-shadow:0 0 0 2px #fff, 0 0 0 4px var(--green)}.icon-control{padding-bottom:17px}.toggle-row{cursor:pointer;justify-content:space-between;align-items:center;gap:16px;display:flex}.toggle-copy{gap:4px;display:grid}.toggle-copy strong{color:#3a463f;font-size:13px}.toggle-copy small{color:#89928c;font-size:11px}.toggle-row input{opacity:0;pointer-events:none;width:1px;height:1px;position:absolute}.toggle-track{background:#d9ded9;border:1px solid #17201b29;border-radius:999px;flex:none;width:44px;height:25px;padding:3px;transition:background .16s,border-color .16s}.toggle-track span{background:#fff;border-radius:50%;width:17px;height:17px;transition:transform .16s;display:block;box-shadow:0 2px 5px #17201b2e}.toggle-row input:checked+.toggle-track{border-color:var(--green);background:var(--green)}.toggle-row input:checked+.toggle-track span{transform:translate(19px)}.toggle-row input:focus-visible+.toggle-track{outline-offset:3px;outline:3px solid #23543b47}.action-stack{gap:10px;margin-top:3px;display:grid}.action-stack .primary-button,.secondary-button,.shuffle-button{width:100%}.secondary-button{border:1px solid var(--line);color:var(--ink);background:#fff}.shuffle-button{color:var(--green);background:#edf4e7;border:1px dashed #23543b57}.micro-copy{color:#89928c;text-align:center;margin:14px 0 0;font-size:11px;line-height:1.5}.steps-section{border-top:1px solid var(--line);width:min(1080px,100% - 40px);margin:116px auto 0;padding:72px 0 110px}.section-kicker{color:var(--green);letter-spacing:.13em;text-transform:uppercase;font-size:12px;font-weight:750}.steps-section h2{letter-spacing:-.05em;margin:12px 0 38px;font-size:clamp(30px,4vw,48px)}.steps-grid{grid-template-columns:repeat(3,1fr);gap:16px;display:grid}.step-card{border:1px solid var(--line);background:#ffffff8c;border-radius:20px;min-height:190px;padding:24px}.step-number{background:var(--lime);width:34px;height:34px;color:var(--green-dark);font-family:var(--font-geist-mono), monospace;border-radius:50%;place-items:center;font-size:12px;font-weight:750;display:grid}.step-card h3{margin:20px 0 8px;font-size:18px}.step-card p{color:var(--muted);margin:0;font-size:14px;line-height:1.7}.site-footer{color:#7d8781;text-align:center;padding:26px 20px 30px;font-size:12px}.image-menu-backdrop{z-index:30;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#1018136b;place-items:center;padding:20px;animation:.16s ease-out menu-backdrop-in;display:grid;position:fixed;inset:0}.image-menu{background:#fafbf7fa;border:1px solid #ffffffb3;border-radius:22px;width:min(390px,100%);padding:25px;animation:.18s ease-out menu-in;box-shadow:0 28px 80px #111f1647}.image-menu-handle{display:none}.image-menu h2{letter-spacing:-.035em;margin:0;font-size:21px}.image-menu p{color:var(--muted);margin:8px 0 19px;font-size:13px;line-height:1.6}.image-menu-actions{gap:10px;display:grid}.image-menu-actions .primary-button,.image-menu-actions .secondary-button,.image-menu-cancel{width:100%}.image-menu-cancel{color:#758079;cursor:pointer;background:0 0;border:0;min-height:42px;font-weight:650}.toast{z-index:10;background:var(--ink);color:#fff;border-radius:999px;padding:11px 16px;font-size:13px;animation:.18s ease-out toast-in;position:fixed;bottom:28px;left:50%;transform:translate(-50%);box-shadow:0 10px 30px #0000002e}@keyframes toast-in{0%{opacity:0;transform:translate(-50%,8px)}to{opacity:1;transform:translate(-50%)}}@keyframes menu-backdrop-in{0%{opacity:0}to{opacity:1}}@keyframes menu-in{0%{opacity:0;transform:translateY(10px)scale(.985)}to{opacity:1;transform:translateY(0)scale(1)}}@media (width<=820px){.hero{margin-top:24px}.workspace{grid-template-columns:1fr;max-width:620px}.steps-grid{grid-template-columns:1fr}.step-card{min-height:0}}@media (width<=560px){.nav,.hero,.workspace{width:min(100% - 24px,1180px)}.nav{height:74px}.privacy-pill{padding:8px 10px;font-size:11px}.hero h1{font-size:40px}.hero-copy{font-size:15px}.url-form{flex-wrap:wrap;align-items:stretch;padding:7px}.url-prefix{text-align:left;width:100%;padding:8px 10px 0}.url-form input{height:48px;padding-left:10px}.url-form .primary-button{padding:0 15px}.workspace{margin-top:32px}.control-panel{padding:20px}.preview-panel{border-radius:21px;padding:11px}.preview-topbar{padding:6px 4px 13px}.image-menu-backdrop{place-items:end center;padding:0}.image-menu{width:100%;padding:12px 20px calc(16px + env(safe-area-inset-bottom));border-radius:24px 24px 0 0}.image-menu-handle{background:#c9cfca;border-radius:999px;width:38px;height:4px;margin:0 auto 18px;display:block}.steps-section{margin-top:78px;padding-top:54px}}@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}