:root{color:#171717;font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;--ink:#171717;--paper:#f6f4ef;--surface:#f6f4ef;--panel:#fff;--panel-soft:#ebe7dc;--muted:#6d6a63;--line:#1717171f;--line-strong:#1717173d;--accent:#ff9f1c;--accent-strong:#9a5300;--accent-soft:#ff9f1c2e;--graphite:#202020;--radius-xl:36px;--radius-lg:28px;--radius-md:20px;--shadow:0 34px 90px #17171724;background:#f6f4ef;font-family:Avenir Next,SF Pro Display,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}*{box-sizing:border-box}html{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark;scroll-behavior:smooth}@media (prefers-color-scheme:dark){html{--lightningcss-light: ;--lightningcss-dark:initial}}body{background:radial-gradient(circle at 82% 0%, #ff9f1c38, transparent 26%), linear-gradient(#1717170b 1px, transparent 1px), linear-gradient(90deg, #1717170b 1px, transparent 1px), linear-gradient(180deg, #fbfaf7 0%, var(--surface) 54%, #ebe7dc 100%);background-size:auto,28px 28px,28px 28px,auto;min-width:320px;min-height:100dvh;margin:0;overflow-x:hidden}body:before{content:"";z-index:20;pointer-events:none;opacity:.08;mix-blend-mode:multiply;background-image:radial-gradient(#17171780 .7px,#0000 .7px);background-size:4px 4px;position:fixed;inset:0}button,input,select{font:inherit}button,label,summary,a{-webkit-tap-highlight-color:transparent}h1,h2,h3,p,figure{margin:0}a{color:inherit;text-decoration:none}.page-shell{width:min(100%,1480px);margin:0 auto;padding:18px clamp(14px,3vw,42px) 54px;overflow-x:hidden}#fileInput{opacity:0;block-size:1px;inline-size:1px;position:absolute;overflow:hidden}.visually-hidden{opacity:0;pointer-events:none;width:1px;height:1px;position:absolute}.top-nav{z-index:10;border:1px solid var(--line);-webkit-backdrop-filter:blur(18px)saturate(150%);backdrop-filter:blur(18px)saturate(150%);background:#f6f4efc7;border-radius:999px;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;width:min(1040px,100%);min-height:64px;margin:0 auto;padding:8px 9px 8px 16px;display:grid;position:sticky;top:16px;box-shadow:0 18px 60px #1717171a}.nav-brand{letter-spacing:-.035em;align-items:center;gap:10px;font-weight:950;display:inline-flex}.brand-mark{aspect-ratio:1;background:linear-gradient(var(--ink) 0 0) 32% 34% / 18% 18% no-repeat, linear-gradient(var(--ink) 0 0) 68% 34% / 18% 18% no-repeat, linear-gradient(var(--accent) 0 0) 42% 70% / 36% 12% no-repeat, #fff;width:28px;box-shadow:inset 0 0 0 1px var(--line-strong);border-radius:9px}.nav-links{color:var(--muted);align-items:center;gap:clamp(14px,2vw,28px);font-size:14px;font-weight:850;display:flex}.nav-links a:hover{color:var(--ink)}.nav-cta{background:var(--ink);min-height:46px;color:var(--paper);cursor:pointer;white-space:nowrap;border-radius:999px;justify-content:center;justify-self:end;align-items:center;padding:10px 18px;font-weight:900;display:inline-flex}.hero{grid-template-columns:minmax(0,.98fr) minmax(360px,.86fr);align-items:center;gap:clamp(34px,6vw,88px);min-height:min(780px,100dvh - 86px);padding:clamp(58px,7vw,94px) 0 clamp(54px,7vw,96px);display:grid}.hero-copy{justify-items:start;gap:20px;display:grid}.brand{color:var(--accent-strong);letter-spacing:.02em;font-size:14px;font-weight:950}h1{letter-spacing:-.075em;text-wrap:balance;width:100%;max-width:900px;font-size:clamp(48px,6.2vw,88px);line-height:.94}.hero-subtitle{max-width:520px;color:var(--muted);font-size:clamp(18px,1.45vw,21px);line-height:1.48}.hero-actions{flex-wrap:wrap;justify-content:flex-start;gap:12px;display:flex}.centered-actions{justify-content:center}.hero-preview{place-items:center;min-height:540px;display:grid}.portrait-stage{border-radius:var(--radius-xl);border:1px solid var(--line);width:min(520px,92vw);min-height:540px;box-shadow:var(--shadow);background:radial-gradient(circle at 74% 12%,#ff9f1c3d,#0000 28%),linear-gradient(145deg,#fffffff5,#ebe7dce0);position:relative;overflow:hidden;transform:rotate(1deg)}.portrait-stage:before{content:"";border:1px solid var(--line);pointer-events:none;border-radius:26px;position:absolute;inset:24px}.portrait-stage:after{content:"";background:repeating-linear-gradient(45deg,#1717171f 0 12px,#0000 12px 24px);width:220px;height:220px;position:absolute;top:-62px;right:-68px}.source-card,.pixel-card{border-radius:var(--radius-lg);background:var(--panel-soft);border:1px solid var(--line);position:absolute;overflow:hidden}.source-card{aspect-ratio:4/5;width:60%;top:42px;left:40px;transform:rotate(-3deg);box-shadow:0 22px 64px #1717172e}.placeholder-face{background:linear-gradient(var(--ink) 0 0) 34% 38% / 10% 8% no-repeat, linear-gradient(var(--ink) 0 0) 66% 38% / 10% 8% no-repeat, linear-gradient(var(--accent) 0 0) 42% 66% / 34% 8% no-repeat, radial-gradient(circle at 50% 36%, #ffd18a 0 22%, transparent 23%), linear-gradient(180deg, #fff 0%, #e8e4d9 100%)}.pixel-card{aspect-ratio:1;outline:10px solid #ffffffc7;width:45%;bottom:84px;right:34px;transform:rotate(3deg);box-shadow:0 28px 76px #ff9f1c40}.placeholder-pixel{image-rendering:pixelated;background:linear-gradient(var(--graphite) 0 0) 30% 34% / 16% 16% no-repeat, linear-gradient(var(--graphite) 0 0) 66% 34% / 16% 16% no-repeat, linear-gradient(var(--accent) 0 0) 38% 68% / 36% 12% no-repeat, repeating-linear-gradient(90deg, #1717171f 0 18px, transparent 18px 36px), repeating-linear-gradient(0deg, #17171714 0 18px, transparent 18px 36px), linear-gradient(135deg, #ffd18a, #fff 58%, #d9e4ef)}.source-card img,.pixel-card img,.visual-card img,.sample-card img{object-fit:cover;width:100%;height:100%;transition:transform .7s cubic-bezier(.16,1,.3,1),filter .7s cubic-bezier(.16,1,.3,1);display:block}.source-card:hover img,.pixel-card:hover img,.visual-card:hover img,.sample-card:hover img{transform:scale(1.05)}.pixel-card img{image-rendering:pixelated;filter:contrast(1.24)saturate(1.12);transform:scale(1.06)}.process-card{border:1px solid var(--line);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);background:#ffffffb8;border-radius:22px;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding:9px;display:grid;position:absolute;bottom:30px;left:38px;right:38px}.process-card span{min-height:40px;color:var(--ink);background:#f0ede6;border-radius:15px;place-items:center;font-weight:950;display:grid}.primary-button,.ghost-button{appearance:none;min-height:54px;color:var(--ink);cursor:pointer;white-space:nowrap;border:1px solid #0000;border-radius:999px;justify-content:center;align-items:center;padding:15px 25px;font-weight:950;text-decoration:none;transition:transform .18s cubic-bezier(.16,1,.3,1),box-shadow .18s,opacity .18s,background .18s,border-color .18s,color .18s;display:inline-flex}.primary-button{background:var(--ink);color:var(--paper);box-shadow:0 16px 34px #17171738}.ghost-button{border-color:var(--line-strong);color:var(--ink);background:#ffffffb8}.primary-button:hover,.ghost-button:hover,.preset-button:hover,.variant-tabs button:hover,.nav-cta:hover{transform:translateY(-2px)}.primary-button:active,.ghost-button:active,.preset-button:active,.variant-tabs button:active,.nav-cta:active{transform:translateY(1px)scale(.99)}.primary-button:focus-visible,.ghost-button:focus-visible,select:focus-visible,input:focus-visible,summary:focus-visible,.preset-button:focus-visible,.variant-tabs button:focus-visible,.nav-cta:focus-visible,a:focus-visible{outline-offset:3px;outline:3px solid #ff9f1c6b}.primary-button:disabled,.ghost-button:disabled{opacity:.48;cursor:not-allowed;box-shadow:none;transform:none}.compact{min-height:44px;padding:10px 18px}.card{border:1px solid var(--line);border-radius:var(--radius-xl);box-shadow:var(--shadow);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);background:#ffffffd1}.generator{grid-template-columns:minmax(0,1.02fr) minmax(310px,.72fr);gap:clamp(18px,3vw,34px);width:min(1120px,100%);margin:0 auto;padding:clamp(18px,3.4vw,32px);display:grid}.generator:has(.upload-panel:not([hidden])){grid-template-columns:1fr}.upload-panel{justify-items:center;gap:14px;display:grid}#app.has-image .upload-panel{display:none}.drop-zone{text-align:center;background:radial-gradient(circle at 50% 0%, var(--accent-soft), transparent 38%), #f6f4efb3;cursor:pointer;border:1.5px dashed #9a53006b;border-radius:30px;place-items:center;gap:14px;width:min(760px,100%);min-height:348px;padding:34px;transition:border-color .18s,background .18s,transform .18s;display:grid}.drop-zone strong{letter-spacing:-.065em;font-size:clamp(32px,4vw,54px);line-height:1}.drop-zone small{max-width:430px;color:var(--muted);font-size:16px;line-height:1.5}.drop-zone.dragging{border-color:var(--accent);background:var(--accent-soft);transform:scale(1.01)}.avatar-mark{aspect-ratio:1;border:1px solid var(--line-strong);width:126px;image-rendering:pixelated;background:linear-gradient(#171717 0 0) 31% 38% / 12% 12% no-repeat, linear-gradient(#171717 0 0) 66% 38% / 12% 12% no-repeat, linear-gradient(var(--accent) 0 0) 42% 68% / 34% 9% no-repeat, linear-gradient(135deg, #ffd18a, #fff 54%, #dfe7ef);border-radius:26px;box-shadow:inset 0 0 0 8px #ffffffb3,0 18px 48px #1717171f}.result-view{align-content:start;justify-items:center;gap:18px;display:none}#app.has-image .result-view{display:grid}.canvas-frame{aspect-ratio:1;border:1px solid var(--line);border-radius:var(--radius-lg);background-color:#f8f6f0;background-image:linear-gradient(45deg,#1717170e 25%,#0000 25%),linear-gradient(-45deg,#1717170e 25%,#0000 25%),linear-gradient(45deg,#0000 75%,#1717170e 75%),linear-gradient(-45deg,#0000 75%,#1717170e 75%),none;background-position:0 0,0 14px,14px -14px,-14px 0;background-repeat:repeat,repeat,repeat,repeat,repeat;background-size:28px 28px;background-attachment:scroll,scroll,scroll,scroll,scroll;background-origin:padding-box,padding-box,padding-box,padding-box,padding-box;background-clip:border-box,border-box,border-box,border-box,border-box;place-items:center;width:min(540px,100%);padding:clamp(10px,1.6vw,18px);display:grid}#resultCanvas{aspect-ratio:1;width:100%;height:auto;image-rendering:pixelated;border-radius:18px}.result-meta{text-align:center;justify-items:center;gap:10px;display:grid}#status{color:var(--ink);font-weight:950}.stage-list{flex-wrap:wrap;justify-content:center;gap:8px;display:flex}.stage-list span{border:1px solid var(--line);min-height:30px;color:var(--muted);background:#fff9;border-radius:999px;align-items:center;padding:5px 11px;font-size:13px;font-weight:850;display:inline-flex}#app.has-image .stage-list span{color:#171717;background:var(--accent);border-color:var(--accent)}.quick-controls{align-content:center;justify-self:center;gap:18px;width:min(420px,100%);display:none}#app.has-image .quick-controls{display:grid}.control-intro{gap:8px;margin-bottom:4px;display:grid}.control-intro h2{color:var(--ink);letter-spacing:-.06em;font-size:clamp(34px,4vw,50px);line-height:.98}.control-intro p{color:var(--muted);line-height:1.45}.control-row{align-items:center;gap:10px;display:grid}.control-label{color:var(--muted);font-size:13px;font-weight:950}.pill-group,.variant-tabs{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;display:grid}.preset-button,.variant-tabs button{border:1px solid var(--line);min-height:44px;color:var(--ink);cursor:pointer;background:#ffffffb8;border-radius:999px;padding:8px 14px;font-weight:950;transition:transform .18s cubic-bezier(.16,1,.3,1),box-shadow .18s,border-color .18s,background .18s,color .18s}.preset-button.active,.variant-tabs button.active{border-color:var(--accent);background:var(--accent);color:#171717}.variant-tabs:empty:before{content:"上传后可选";color:var(--muted);grid-column:1/-1;font-size:14px}.download{justify-self:center;width:100%;margin-top:4px}.craft-section{gap:28px;width:min(1120px,100%);margin:clamp(86px,11vw,150px) auto 0;display:grid}.section-copy{gap:12px;max-width:920px;display:grid}.section-copy h2,.final-cta h2{letter-spacing:-.068em;font-size:clamp(40px,4.5vw,64px);line-height:.96}.section-copy p,.final-cta p{color:var(--muted);max-width:620px;font-size:18px;line-height:1.55}.craft-grid{grid-template-columns:1.25fr .85fr;grid-auto-rows:minmax(210px,auto);gap:14px;display:grid}.craft-card{border:1px solid var(--line);border-radius:var(--radius-lg);background:#ffffffb8;align-content:end;gap:14px;min-height:230px;padding:clamp(22px,3vw,34px);display:grid;overflow:hidden}.craft-card h3{letter-spacing:-.058em;font-size:clamp(28px,3vw,42px);line-height:1}.craft-card p{color:var(--muted);max-width:52ch;line-height:1.55}.visual-card{min-height:520px;color:var(--paper);background:linear-gradient(var(--paper) 0 0) 30% 34% / 11% 10% no-repeat, linear-gradient(var(--paper) 0 0) 67% 34% / 11% 10% no-repeat, linear-gradient(var(--accent) 0 0) 42% 67% / 34% 9% no-repeat, radial-gradient(circle at 50% 34%, #ff9f1c8a 0 24%, transparent 25%), linear-gradient(145deg, #202020, #3a3328);grid-row:span 2;position:relative}.visual-card img{filter:grayscale(.08)contrast(1.08)saturate(.9);position:absolute;inset:0}.visual-card:after{content:"";background:linear-gradient(#0000 0%,#171717d1 74%);position:absolute;inset:0}.visual-card>div{z-index:1;position:relative}.visual-card p{color:#f6f4efd6}.accent-card{background:linear-gradient(145deg,#ff9f1c47,#ffffffc7)}.dark-card{background:var(--graphite);color:var(--paper)}.dark-card p{color:#f6f4efbd}.quiet-card{background:#ebe7dcc7}.desire-section{gap:clamp(30px,5vw,60px);width:min(1180px,100%);margin:clamp(86px,12vw,160px) auto 0;display:grid}.reveal-copy{text-align:center;width:min(980px,100%);margin:0 auto}.scrub-text{letter-spacing:-.062em;font-size:clamp(34px,4.9vw,68px);font-weight:950;line-height:1.03}.scrub-text span{opacity:.55}.sample-strip{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;display:grid}.sample-card{border-radius:var(--radius-lg);border:1px solid var(--line);background:var(--panel-soft);min-height:420px;position:relative;overflow:hidden}.sample-card img{filter:grayscale(.1)contrast(1.16)saturate(.92);position:absolute;inset:0}.sample-card:nth-child(2) img{filter:contrast(1.02)saturate(.72)brightness(1.08)}.sample-card:nth-child(3) img{image-rendering:pixelated;filter:contrast(1.28)saturate(1.18)}.clean-sample,.soft-sample,.retro-sample{image-rendering:pixelated;background:linear-gradient(#171717 0 0) 31% 36% / 10% 10% no-repeat, linear-gradient(#171717 0 0) 66% 36% / 10% 10% no-repeat, linear-gradient(var(--accent) 0 0) 40% 68% / 34% 9% no-repeat, radial-gradient(circle at 50% 34%, #ffd18a 0 23%, transparent 24%), linear-gradient(135deg, #f7f4ec, #dfe7ef)}.soft-sample{filter:saturate(.72)brightness(1.04)}.retro-sample{background:linear-gradient(#111827 0 0) 31% 36%/13% 13% no-repeat,linear-gradient(#111827 0 0) 66% 36%/13% 13% no-repeat,linear-gradient(#ff9f1c 0 0) 39% 69%/36% 11% no-repeat,repeating-linear-gradient(90deg,#17171729 0 16px,#0000 16px 32px),linear-gradient(135deg,#f4c06f,#f6f4ef 58%,#7c8f71)}.sample-card:after{content:"";background:linear-gradient(#17171714 0%,#171717a8 100%);position:absolute;inset:0}.sample-card figcaption{z-index:1;color:var(--paper);letter-spacing:-.06em;font-size:clamp(28px,3.5vw,46px);font-weight:950;line-height:1;position:absolute;bottom:20px;left:22px}.details-bar{gap:10px;width:min(900px,100%);margin:clamp(54px,7vw,96px) auto 0;display:grid}.advanced-panel,.backend-panel{border:1px solid var(--line);color:var(--muted);background:#ffffffad;border-radius:24px;padding:14px 18px;font-size:14px;line-height:1.5}.advanced-panel summary,.backend-panel summary,.dev-details summary{cursor:pointer;color:var(--ink);font-weight:950}.advanced-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 18px;padding-top:14px;display:grid}.field{gap:7px;font-weight:850;display:grid}.field span{justify-content:space-between;gap:10px;display:flex}.field b{color:var(--accent-strong)}select,input[type=range]{width:100%}select{border:1px solid var(--line-strong);min-height:42px;color:var(--ink);background:#ffffffd6;border-radius:14px;padding:8px 10px;font-weight:850}input[type=range]{accent-color:var(--accent)}.check{color:var(--ink);align-items:center;gap:9px;font-weight:850;display:flex}.check input{width:19px;height:19px;accent-color:var(--accent)}.backend-panel{display:none}.backend-panel p{margin:10px 0}.backend-actions{flex-wrap:wrap;gap:8px;display:flex}#sourceCanvas{border:1px solid var(--line);width:96px;height:96px;image-rendering:pixelated;border-radius:14px;margin-top:12px}.dev-details{margin-top:10px}.dev-details p{margin-bottom:0}.final-cta{text-align:center;border-radius:var(--radius-xl);border:1px solid var(--line);width:min(1120px,100%);box-shadow:var(--shadow);background:radial-gradient(circle at 50% 0,#ff9f1c3d,#0000 36%),#ffffffd1;justify-items:center;gap:22px;margin:clamp(86px,12vw,160px) auto 0;padding:clamp(42px,8vw,96px) clamp(22px,5vw,74px);display:grid}@media (prefers-color-scheme:dark){:root{color:#f6f4ef;--ink:#f6f4ef;--paper:#171717;--surface:#121212;--panel:#1d1d1d;--panel-soft:#272727;--muted:#b9b4aa;--line:#f6f4ef21;--line-strong:#f6f4ef47;--accent-strong:#ffb24a;--graphite:#080808;--shadow:0 34px 90px #0000006b;background:#121212}body{background:radial-gradient(circle at 82% 0,#ff9f1c33,#0000 26%),linear-gradient(#f6f4ef09 1px,#0000 1px) 0 0/28px 28px,linear-gradient(90deg,#f6f4ef09 1px,#0000 1px) 0 0/28px 28px,linear-gradient(#1f1f1f 0%,#121212 60%,#0e0e0e 100%)}body:before{opacity:.08;mix-blend-mode:screen}.top-nav,.card,.advanced-panel,.backend-panel,.craft-card,.final-cta{background-color:#1d1d1dc7}.nav-cta,.primary-button{color:#171717;background:#f6f4ef}.brand{color:#ffb24a}.brand-mark{background-color:#f6f4ef}.ghost-button,.preset-button,.variant-tabs button,select{color:var(--ink);background:#ffffff12}.portrait-stage{background:#1d1d1ddb}.process-card{background:#121212c2}.process-card span{color:#f6f4ef;background:#ffffff14}.canvas-frame{background-color:#1b1b1b}.accent-card{background:linear-gradient(145deg,#ff9f1c40,#1d1d1dc7)}.quiet-card{background:#272727c7}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important}}@media (width<=980px){.top-nav{grid-template-columns:1fr auto}.nav-links{display:none}.hero{grid-template-columns:1fr;gap:34px;min-height:auto;padding:58px 0 64px}.hero-preview{min-height:auto}.portrait-stage{width:100%;min-height:470px;transform:none}.source-card{width:64%;top:28px;left:26px}.pixel-card{width:42%;bottom:80px;right:24px}.process-card{bottom:24px;left:24px;right:24px}:is(.generator,.generator:has(.upload-panel:not([hidden]))){grid-template-columns:1fr}.quick-controls{width:100%}.craft-grid{grid-template-columns:1fr}.visual-card{min-height:430px}.sample-strip{grid-template-columns:1fr}.sample-card{min-height:300px}}@media (width<=560px){.page-shell{padding-inline:10px}.top-nav{padding-left:12px;top:10px}.nav-cta{padding-inline:14px}h1{font-size:clamp(42px,12.6vw,62px)}.hero-actions{width:100%}.hero-actions .primary-button,.hero-actions .ghost-button{flex:1;padding-inline:16px}.portrait-stage{border-radius:28px;min-height:390px}.source-card{width:70%}.pixel-card{outline-width:7px;width:44%}.process-card{grid-template-columns:1fr 1fr 1fr}.generator{border-radius:28px;padding:14px}.drop-zone{min-height:290px;padding:24px}.advanced-grid{grid-template-columns:1fr}.pill-group,.variant-tabs{grid-template-columns:1fr 1fr}}