:root{--ink:#171714;--muted:#706f67;--paper:#fffdf8;--canvas:#ece9df;--line:#d8d5ca;--accent:#ff5c35;--accent-soft:#fff0e9;--lime:#c8ff62;--violet:#8f83ff;--shadow:0 24px 70px #23201717}*{box-sizing:border-box}html{scroll-behavior:smooth}body{color:var(--ink);-webkit-font-smoothing:antialiased;background:radial-gradient(circle at 10% 0,#ff5c3514,#0000 28rem),radial-gradient(circle at 90% 25%,#8f83ff14,#0000 30rem),#f3f0e8;margin:0;font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,PingFang SC,Microsoft YaHei,sans-serif}button,input,textarea,select{font:inherit}button,a,label{-webkit-tap-highlight-color:transparent}button,a{transition:transform .18s,background .18s,color .18s,border-color .18s,box-shadow .18s}button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline-offset:2px;outline:3px solid #ff5c3547}.app-shell{width:min(1440px,100% - 48px);margin:0 auto;padding:24px 0 32px}.topbar{justify-content:space-between;align-items:center;min-height:58px;display:flex}.brand{color:inherit;align-items:center;gap:12px;text-decoration:none;display:inline-flex}.brand-mark{color:#fff;background:var(--ink);border-radius:50%;place-items:center;width:42px;height:42px;font-size:18px;font-weight:800;display:grid}.brand>span:last-child{gap:1px;display:grid}.brand strong{letter-spacing:.08em;font-size:18px}.brand small{color:var(--muted);letter-spacing:.22em;font-size:8px;font-weight:800}.prototype-badge{border:1px solid var(--line);color:#4f4f49;letter-spacing:.12em;background:#fffdf8b8;border-radius:999px;align-items:center;gap:8px;padding:8px 12px;font-size:10px;font-weight:800;display:flex}.prototype-badge span{background:#36b36d;border-radius:50%;width:7px;height:7px;box-shadow:0 0 0 4px #36b36d1f}.intro{grid-template-columns:minmax(0,1.35fr) minmax(300px,.65fr);align-items:end;gap:48px;padding:64px 2vw 48px;display:grid}.kicker,.panel-heading p,.preview-heading p{color:var(--accent);letter-spacing:.22em;margin:0 0 12px;font-size:10px;font-weight:900}.intro h1{letter-spacing:-.07em;max-width:800px;margin:0;font-size:clamp(46px,6.5vw,92px);line-height:.98}.intro h1 span{color:#0000;background:linear-gradient(100deg, var(--accent) 8%, #ff9a3d 50%, #8f83ff 100%);-webkit-background-clip:text;background-clip:text}.intro-copy{color:#5d5c55;max-width:430px;margin:0 0 8px;font-size:15px;line-height:1.9}.workspace{background:var(--paper);box-shadow:var(--shadow);border:1px solid #1717141c;border-radius:32px;grid-template-columns:minmax(0,1.04fr) minmax(420px,.96fr);display:grid;overflow:hidden}.form-panel,.preview-panel{min-width:0;padding:clamp(24px,3.5vw,52px)}.form-panel{background:#fffdf8fa}.preview-panel{color:#fff;background:#1a1a18}.panel-heading,.preview-heading{justify-content:space-between;align-items:flex-start;margin-bottom:28px;display:flex}.panel-heading>div,.preview-heading>div{align-items:flex-start;gap:16px;display:flex}.panel-heading p,.preview-heading p{margin-bottom:5px}.panel-heading h2,.preview-heading h2{letter-spacing:-.04em;margin:0;font-size:27px}.section-number{color:#6c6a63;border:1px solid #c9c6bd;border-radius:50%;flex:none;place-items:center;width:34px;height:34px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10px;display:grid}.section-number.light{color:#b7b5ab;border-color:#4f4f49}.required-note,.ratio-readout{color:#918f87;font-size:11px}.ratio-readout{color:#d7d5cc;border:1px solid #494944;border-radius:999px;padding:7px 10px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}.mode-banner{background:var(--accent-soft);border:1px solid #e9d8ce;border-radius:16px;align-items:center;gap:14px;margin-bottom:30px;padding:14px 16px;display:flex}.mode-reference{background:#f0eeff;border-color:#d8d3ff}.mode-icon{color:#fff;background:var(--accent);border-radius:12px;flex:none;place-items:center;width:38px;height:38px;font-size:17px;display:grid}.mode-reference .mode-icon{background:var(--violet)}.mode-banner strong{margin-bottom:3px;font-size:13px;display:block}.mode-banner p{color:#70645d;margin:0;font-size:11px;line-height:1.5}form{gap:22px;display:grid}.field-block{border:0;gap:9px;min-width:0;margin:0;padding:0;display:grid}.field-label-row,.compact-label{color:#34332f;justify-content:space-between;align-items:center;font-size:12px;font-weight:750;display:flex}.field-label-row span,.compact-label small{color:#9a978e;letter-spacing:.04em;font-size:9px;font-weight:650}.field-grid{grid-template-columns:1fr 1fr;gap:14px;display:grid}.upload-zone{cursor:pointer;background:#f8f6f0;border:1px dashed #c9c5ba;border-radius:17px;align-items:center;gap:14px;min-height:94px;padding:16px;display:flex}.upload-zone:hover{border-color:var(--accent);background:#fff8f3}.upload-symbol{width:50px;height:50px;color:var(--accent);background:#fff;border-radius:15px;flex:none;place-items:center;font-size:26px;font-weight:300;display:grid;box-shadow:0 8px 24px #25201814}.upload-zone>span:nth-child(2){gap:4px;min-width:0;display:grid}.upload-zone strong{font-size:12px}.upload-zone small{color:#8d8a82;text-overflow:ellipsis;white-space:nowrap;font-size:10px;overflow:hidden}.upload-optional{color:#9e9b92;letter-spacing:.12em;margin-left:auto;font-size:8px;font-weight:800}.image-preview-card{background:#f8f6f0;border:1px solid #d9d5c9;border-radius:17px;grid-template-columns:74px minmax(0,1fr) auto;align-items:center;gap:14px;padding:10px;display:grid}.image-preview-card>img{object-fit:contain;background:#fff;border-radius:12px;width:74px;height:74px}.image-file-meta{align-items:center;gap:10px;min-width:0;display:flex}.image-file-meta>div{gap:4px;min-width:0;display:grid}.image-file-meta strong{text-overflow:ellipsis;white-space:nowrap;font-size:11px;overflow:hidden}.image-file-meta small{color:#96938a;font-size:9px}.file-check{color:#fff;background:#37af6d;border-radius:50%;flex:none;place-items:center;width:22px;height:22px;font-size:11px;display:grid}.image-actions{gap:4px;display:grid}.text-button{cursor:pointer;color:#56544e;background:0 0;border:0;font-size:10px;font-weight:700}.text-button:hover{color:var(--accent)}.text-button.danger{color:#b44d42}input[type=text],textarea,select{width:100%;color:var(--ink);background:#fbfaf6;border:1px solid #d9d5ca;border-radius:14px;font-size:12px}input[type=text],select{height:46px;padding:0 14px}textarea{resize:vertical;min-height:118px;padding:13px 14px;line-height:1.65}.short-textarea{min-height:74px}input::placeholder,textarea::placeholder{color:#aaa79f}input[type=text]:focus,textarea:focus,select:focus{border-color:var(--accent);background:#fff}.field-error{color:#c94638;margin:-2px 0 0;font-size:10px;font-weight:700}.ratio-options{background:#fbfaf6;border:1px solid #d9d5ca;border-radius:14px;grid-template-columns:repeat(4,1fr);gap:5px;height:46px;padding:4px;display:grid}.ratio-options label{cursor:pointer}.ratio-options input{opacity:0;position:absolute}.ratio-options span{color:#8b887f;border-radius:9px;place-items:center;height:100%;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:9px;font-weight:800;display:grid}.ratio-options input:checked+span{color:#fff;background:var(--ink);box-shadow:0 4px 10px #17171429}.generate-button{cursor:pointer;color:#fff;background:var(--accent);border:0;border-radius:17px;justify-content:space-between;align-items:center;min-height:58px;margin-top:4px;padding:7px 8px 7px 22px;font-size:14px;font-weight:850;display:flex;box-shadow:0 14px 30px #ff5c353b}.generate-button:hover{background:#f34b23;transform:translateY(-2px);box-shadow:0 18px 36px #ff5c354a}.button-arrow{width:44px;height:44px;color:var(--ink);background:var(--lime);border-radius:13px;place-items:center;font-size:21px;display:grid}.form-footnote{color:#a09d94;text-align:center;margin:-12px 0 0;font-size:9px}.visually-hidden{clip:rect(0 0 0 0)!important;clip-path:inset(50%)!important;white-space:nowrap!important;width:1px!important;height:1px!important;position:absolute!important;overflow:hidden!important}.poster-stage{aspect-ratio:4/5;background:#11110f;border:1px solid #353531;border-radius:24px;position:relative;overflow:hidden}.empty-canvas{background:linear-gradient(#ffffff09 1px,#0000 1px) 0 0/32px 32px,linear-gradient(90deg,#ffffff09 1px,#0000 1px) 0 0/32px 32px,radial-gradient(circle at 75% 25%,#8f83ff61,#0000 29%),radial-gradient(circle at 20% 75%,#ff5c3557,#0000 28%),#161614;position:absolute;inset:0;overflow:hidden}.canvas-orbit{border:1px solid #ffffff24;border-radius:50%;position:absolute}.orbit-one{aspect-ratio:1;width:58%;top:9%;right:-12%}.orbit-two{aspect-ratio:1;width:40%;bottom:12%;left:-14%}.canvas-card{aspect-ratio:.72;color:#171714d6;letter-spacing:.18em;place-items:end start;width:34%;padding:12px;font-size:8px;font-weight:900;display:grid;position:absolute;transform:rotate(9deg)}.card-one{background:var(--lime);border-radius:50% 50% 12px 12px;top:13%;right:21%}.card-two{background:var(--violet);border-radius:12px;bottom:14%;right:8%;transform:rotate(-11deg)}.canvas-copy{z-index:2;gap:12px;display:grid;position:absolute;top:34%;left:10%}.canvas-copy small{color:#ffffff78;letter-spacing:.18em;font-size:8px;font-weight:800}.canvas-copy strong{color:#fff;letter-spacing:-.06em;font-size:clamp(34px,4vw,62px);line-height:1.05}.result-poster{object-fit:cover}.status-queued .empty-canvas,.status-processing .empty-canvas{filter:saturate(.7)brightness(.62)}.status-card{z-index:3;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);background:#161614d1;border:1px solid #ffffff29;border-radius:17px;align-items:center;gap:14px;padding:15px;display:flex;position:absolute;bottom:18px;left:18px;right:18px;box-shadow:0 18px 40px #00000040}.status-card-succeeded{color:var(--ink);background:#fffdf8eb;border-color:#fff9}.status-spinner,.status-success{border-radius:50%;flex:none;place-items:center;width:38px;height:38px;display:grid}.status-spinner{border:2px solid #fff3;border-top-color:var(--lime);animation:.9s linear infinite spin}.status-success{color:var(--ink);background:var(--lime);font-weight:900}.status-card>div{gap:3px;display:grid}.status-card small{color:var(--lime);letter-spacing:.18em;font-size:8px;font-weight:900}.status-card-succeeded small{color:#5d7b27}.status-card strong{font-size:13px}.status-card p{color:#ffffff8c;margin:0;font-size:9px;line-height:1.5}.status-card-succeeded p{color:#77736a}.preview-note{color:#85847d;align-items:center;gap:12px;margin-top:17px;padding:12px 4px 0;display:flex}.preview-note>span{font-size:22px}.preview-note p{gap:3px;margin:0;font-size:9px;display:grid}.preview-note strong{color:#b9b7ae;font-size:10px}.result-controls{gap:13px;margin-top:16px;display:grid}.result-meta{color:#8f8e87;justify-content:space-between;align-items:center;font-size:9px;display:flex}.result-meta code{color:#afada5;font-size:9px}.result-buttons{grid-template-columns:1.2fr 1fr 1fr;gap:8px;display:grid}.result-button{cursor:pointer;color:#d1cfc6;background:#242421;border:1px solid #44443f;border-radius:12px;justify-content:center;align-items:center;gap:6px;min-height:42px;font-size:10px;font-weight:750;text-decoration:none;display:flex}.result-button:hover{background:#2c2c29;border-color:#6d6c65;transform:translateY(-1px)}.result-button.primary{color:var(--ink);border-color:var(--lime);background:var(--lime)}.revision-box{background:#22221f;border:1px solid #3e3e39;border-radius:15px;gap:8px;padding:14px;display:grid}.revision-box label{color:#d6d4cb;font-size:10px;font-weight:750}.revision-box textarea{color:#fff;background:#181816;border-color:#4a4944;min-height:76px}.revision-box button{cursor:pointer;min-height:40px;color:var(--ink);background:#fff;border:0;border-radius:11px;justify-content:center;align-items:center;gap:8px;font-size:10px;font-weight:800;display:flex}.revision-box button:disabled{cursor:not-allowed;color:#77766f;background:#373733}footer{color:#8e8b82;letter-spacing:.08em;justify-content:space-between;align-items:center;padding:20px 8px 0;font-size:9px;font-weight:750;display:flex}@keyframes spin{to{transform:rotate(360deg)}}@media (max-width:1050px){.intro{grid-template-columns:1fr;gap:24px}.intro-copy{max-width:680px}.workspace{grid-template-columns:minmax(0,1fr) minmax(390px,.82fr)}.settings-grid,.field-grid{grid-template-columns:1fr}}@media (max-width:820px){.app-shell{width:min(100% - 24px,680px);padding-top:12px}.prototype-badge{font-size:8px}.intro{padding:46px 4px 34px}.intro h1{font-size:clamp(44px,12vw,72px)}.workspace{box-shadow:none;background:0 0;border:0;border-radius:0;grid-template-columns:1fr;overflow:visible}.form-panel,.preview-panel{box-shadow:var(--shadow);border:1px solid #1717141a;border-radius:26px}.preview-panel{margin-top:18px}}@media (max-width:540px){.app-shell{width:min(100% - 16px,480px)}.topbar{min-height:54px}.prototype-badge{max-width:140px;line-height:1.35}.intro{padding-top:40px}.intro h1{font-size:clamp(42px,13vw,60px)}.intro-copy{font-size:13px}.form-panel,.preview-panel{border-radius:22px;padding:22px 16px}.panel-heading h2,.preview-heading h2{font-size:23px}.field-grid{grid-template-columns:1fr}.upload-optional,.image-file-meta small{display:none}.image-preview-card{grid-template-columns:62px minmax(0,1fr)}.image-preview-card>img{width:62px;height:62px}.image-actions{grid-column:1/-1;grid-template-columns:1fr 1fr;padding-bottom:4px}.poster-stage{border-radius:18px}.status-card{bottom:10px;left:10px;right:10px}.result-buttons{grid-template-columns:1fr 1fr}.result-button.primary{grid-column:1/-1}footer{flex-direction:column;align-items:flex-start;gap:8px}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}