:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;color:#1d2533;font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:radial-gradient(circle at top,#75b4ff29,#0000 28%),linear-gradient(#f6f8fc 0%,#eff3f9 100%);font-family:Inter,PingFang SC,Microsoft YaHei,Segoe UI,sans-serif}*{box-sizing:border-box}body{min-height:100vh;margin:0}button,input,textarea{font:inherit}button{cursor:pointer}.page-shell{min-height:100vh;padding:40px 24px 56px}.page-intro{justify-content:space-between;align-items:flex-end;gap:24px;width:min(1120px,100%);margin:0 auto 24px;display:flex}.eyebrow{color:#63738a;letter-spacing:.18em;text-transform:uppercase;margin:0 0 8px;font-size:12px;font-weight:700}.page-intro h1{margin:0;font-size:28px;line-height:1.1}.intro-text{color:#657489;text-align:right;max-width:420px;margin:0;line-height:1.7}.center-stage{justify-content:center;display:flex}.studio-frame{grid-template-columns:320px minmax(0,1fr);gap:14px;width:min(1120px,100%);display:grid}.control-panel,.preview-panel{background:#f8fafdf5;border:1px solid #92a0b538;border-radius:22px;box-shadow:0 12px 28px #3a4a6214,inset 0 1px #ffffffe0}.control-panel{padding:16px}.control-section{margin-bottom:14px}.control-section.compact{margin-bottom:10px}.section-title-row{align-items:center;gap:6px;margin-bottom:8px;display:flex}.section-title-row h2{margin:0;font-size:13px;font-weight:700}.hint-dot{border:1px solid #72839d4d;border-radius:999px;width:14px;height:14px;position:relative}.hint-dot:after{content:"i";color:#71819a;place-items:center;font-size:9px;display:grid;position:absolute;inset:0}.upload-surface{text-align:center;background:linear-gradient(#f0f3f8 0%,#e8edf3 100%);border:1px solid #b6bfce59;border-radius:14px;flex-direction:column;justify-content:center;align-items:center;gap:8px;min-height:144px;padding:20px 16px 14px;display:flex;position:relative;overflow:hidden}.upload-surface input[type=file]{opacity:0;position:absolute;inset:0}.upload-surface strong{font-size:14px}.upload-surface span{color:#7a879b;font-size:11px;line-height:1.5}.upload-icon{opacity:.82;border:2px solid #8b97aa;border-radius:10px;width:34px;height:34px;position:relative}.image-icon:before{content:"";clip-path:polygon(0 100%,30% 46%,52% 70%,68% 44%,100% 100%);background:linear-gradient(135deg,#8b97aa 0%,#b7c0cf 100%);border-radius:6px;height:10px;position:absolute;bottom:6px;left:6px;right:6px}.image-icon:after{content:"";background:#8b97aa;border-radius:999px;width:6px;height:6px;position:absolute;top:6px;right:6px}.video-icon:before{content:"";background:#8b97aa;border-radius:4px;width:14px;height:10px;position:absolute;top:9px;left:6px}.video-icon:after{content:"";border-top:6px solid #0000;border-bottom:6px solid #0000;border-left:10px solid #8b97aa;position:absolute;top:11px;right:4px}.sample-row{align-items:center;gap:8px;margin-top:8px;display:flex}.sample-row.stacked{gap:6px;display:grid}.sample-track{align-items:center;gap:8px;display:flex}.sample-label{color:#7d889a;white-space:nowrap;font-size:10px}.sample-list{flex-wrap:wrap;align-items:center;gap:4px;display:flex}.sample-avatar,.sample-pill{border:1px solid #b0b8c657;display:inline-block;box-shadow:inset 0 1px #ffffff80}.sample-avatar{border-radius:999px;width:20px;height:20px}.sample-pill{border-radius:8px;width:18px;height:18px}.toggle-group,.quality-shell{background:#dde4ee;border-radius:12px;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;padding:6px;display:grid}.toggle-button,.quality-button{color:#4d5b71;background:0 0;border:0;border-radius:9px;min-height:36px;transition:background .16s,color .16s,box-shadow .16s}.toggle-button.active,.quality-button.active{color:#1d140d;background:linear-gradient(#f4b07a 0%,#eb9355 100%);box-shadow:0 8px 18px #d67f3b42}.quality-button{align-content:center;place-items:center;gap:2px;min-height:50px;padding:6px;display:grid}.quality-button strong{font-size:12px}.quality-button span{font-size:10px}.prompt-shell{flex-direction:column;gap:6px;display:flex}.prompt-shell textarea,.mini-input input:not([type=file]){width:100%;color:inherit;background:#f4f7fb;border:1px solid #b1bac857;border-radius:12px;padding:12px}.prompt-shell textarea{resize:vertical;min-height:92px}.character-count{color:#8490a2;font-size:10px}.optional-grid{gap:8px;display:grid}.mini-input{gap:6px;display:grid}.mini-input span{color:#55657b;font-size:11px}.mini-input input[type=file]{color:#66768c;width:100%;font-size:12px}.footer-meta{color:#66768c;justify-content:space-between;align-items:center;margin:10px 0 12px;font-size:12px;display:flex}.submit-button{color:#120d09;background:linear-gradient(#f4a66d 0%,#e88e4f 100%);border:0;border-radius:12px;width:100%;min-height:44px;font-size:16px;font-weight:800;box-shadow:0 10px 24px #d67f3b38}.submit-button:disabled{opacity:.6;cursor:not-allowed}.preview-panel{background:linear-gradient(#fcfdfffa,#f4f7fcfa);min-height:800px;padding:12px;position:relative;overflow:hidden}.preview-grid-bg{background-image:linear-gradient(#d4dbe86b 1px,#0000 1px),linear-gradient(90deg,#d4dbe86b 1px,#0000 1px);background-size:24px 24px;position:absolute;inset:0;-webkit-mask-image:linear-gradient(#000000e0,#0006);mask-image:linear-gradient(#000000e0,#0006)}.preview-stage{z-index:1;justify-content:center;align-items:center;height:690px;display:flex;position:relative}.preview-image-card,.preview-video-card,.preview-placeholder{object-fit:cover;background:#ebeff5;border:1px solid #9daabe2e;border-radius:0;width:36%;height:52%;position:absolute;box-shadow:0 18px 42px #3a4a622e}.preview-image-card,.preview-placeholder.left{top:28%;left:16%}.preview-video-card,.preview-placeholder.right{top:28%;right:12%}.preview-placeholder{color:#78879c;background:linear-gradient(#f1f4f9f5,#e3e9f1f5);place-items:center;font-size:14px;display:grid}.preview-status-bar,.preview-note{z-index:1;position:relative}.preview-status-bar{color:#5f7088;justify-content:space-between;align-items:center;gap:12px;padding:10px 8px 6px;font-size:12px;display:flex}.playline,.status-meta{align-items:center;gap:10px;display:flex}.play-indicator{border-top:5px solid #0000;border-bottom:5px solid #0000;border-left:8px solid #4f5f75;width:0;height:0}.preview-note{padding:0 8px 8px}.preview-note strong{margin-bottom:6px;font-size:13px;display:block}.preview-note p{color:#65748a;margin:0;font-size:13px;line-height:1.6}@media (width<=980px){.page-intro{flex-direction:column;align-items:flex-start}.intro-text{text-align:left}.studio-frame{grid-template-columns:1fr}.preview-panel{min-height:620px}.preview-stage{height:520px}.preview-image-card,.preview-video-card,.preview-placeholder{width:42%;height:52%}}@media (width<=640px){.page-shell{padding:24px 14px 40px}.studio-frame{gap:10px}.control-panel,.preview-panel{border-radius:18px}.preview-stage{height:420px}.preview-image-card,.preview-video-card,.preview-placeholder{width:44%;height:46%}}
