:root{--action-blue: #0066cc;--parchment: #f5f5f7;--ink: #1d1d1f;--ink-secondary: #6e6e73;--hairline: #d2d2d7;--white: #ffffff;--radius-card: 18px;--nav-height: 44px;--font-stack: "SF Pro Display", "SF Pro Text", system-ui, -apple-system, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Inter, sans-serif}*{box-sizing:border-box}html,body{margin:0;padding:0}body{font-family:var(--font-stack);font-size:17px;font-weight:400;line-height:1.44;color:var(--ink);background:var(--white);-webkit-font-smoothing:antialiased}.nav{position:sticky;top:0;z-index:100;height:var(--nav-height);background:#161617eb;-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px)}.nav-inner{max-width:1440px;margin:0 auto;height:100%;padding:0 24px;display:flex;align-items:center;justify-content:space-between}.nav-brand{color:var(--white);font-size:15px;font-weight:600;letter-spacing:-.01em}.nav-right{display:inline-flex;align-items:center;gap:16px}.nav-model{color:#ffffffb8;font-size:13px;display:inline-flex;align-items:center;gap:8px}.nav-model-sep{color:#fff6}.nav-github{display:inline-flex;align-items:center;color:#ffffffb8;transition:color .15s ease,transform .15s ease}.nav-github:hover{color:var(--white);transform:scale(1.08)}.nav-github:active{transform:scale(.95)}.hero{text-align:center;padding:48px 24px 36px;background:var(--white)}.hero-title{margin:0 0 10px;font-size:clamp(32px,4.5vw,48px);font-weight:600;letter-spacing:-.01em;line-height:1.07}.hero-sub{margin:0 auto;max-width:520px;color:var(--ink-secondary);font-size:19px;line-height:1.44}.main{background:var(--parchment);padding:40px 16px 64px}.workspace{width:100%;display:grid;grid-template-columns:minmax(280px,1fr) auto minmax(320px,1.2fr);gap:16px;align-items:start}.ws-input,.ws-result-stack,.ws-controls{min-height:640px}@media (max-width: 1024px){.workspace{grid-template-columns:1fr}}.card{background:var(--white);border:1px solid var(--hairline);border-radius:var(--radius-card);padding:24px}.ws-input{display:flex;flex-direction:column;gap:12px;height:100%}.ws-input-label{font-size:14px;font-weight:600;letter-spacing:-.01em;color:var(--ink)}.ws-input textarea{flex:1;min-height:300px;width:100%;padding:14px 16px;border:1px solid var(--hairline);border-radius:12px;background:var(--white);color:var(--ink);font-family:inherit;font-size:15px;line-height:1.6;resize:vertical}.ws-input textarea:focus{outline:none;border-color:var(--action-blue);box-shadow:0 0 0 3px #0066cc1f}.ws-input-footer{display:flex;justify-content:space-between;gap:12px;color:var(--ink-secondary);font-size:12.5px}.ws-input-footer .warn{color:#c2452d}.ws-controls{display:flex;flex-direction:column;justify-content:center;align-items:stretch;gap:18px;padding:0 4px;width:220px}@media (max-width: 1024px){.ws-controls{width:100%;min-height:0;flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:center;padding:4px 0}.style-switch{flex-direction:row;width:auto;flex:1;min-width:240px}.style-chip{width:auto}.ws-generate-group{flex-direction:row;align-items:center}.ws-generate-group .btn-generate,.ws-generate-group .btn-video{flex:1}}.style-switch{display:flex;flex-direction:column;gap:10px;width:100%}@media (max-width: 1024px){.style-switch{flex-direction:row;width:auto;flex:1;min-width:240px}}.style-chip{width:100%;padding:10px 16px;border:1px solid var(--hairline);border-radius:999px;background:var(--white);color:var(--ink);font-family:inherit;font-size:14.5px;font-weight:400;cursor:pointer;transition:transform .15s ease;white-space:nowrap}.style-chip.active{border:2px solid #0071e3;padding:9px 15px;color:#0071e3;font-weight:600}.style-chip:active,.btn-generate:active,.btn-secondary:active,.btn-text:active{transform:scale(.95)}.btn-generate{display:inline-flex;align-items:center;gap:8px;padding:14px 30px;border:none;border-radius:999px;background:var(--action-blue);color:var(--white);font-family:inherit;font-size:17px;font-weight:400;cursor:pointer;white-space:nowrap;transition:transform .15s ease,opacity .15s ease}.btn-generate:disabled{opacity:.4;cursor:default;transform:none}.btn-generate-arrow{font-size:16px}.ws-generate-group{display:flex;flex-direction:column;gap:10px;align-items:stretch;width:100%}.ws-generate-group .btn-generate,.ws-generate-group .btn-video{width:100%;justify-content:center}.btn-video{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 24px;border:1px solid rgba(0,102,204,.28);border-radius:999px;background:#0066cc12;color:var(--action-blue);font-family:inherit;font-size:15px;font-weight:600;letter-spacing:-.01em;cursor:pointer;white-space:nowrap;transition:transform .15s ease,opacity .15s ease,background .15s ease,border-color .15s ease}.btn-video:hover:not(:disabled){background:#0066cc21;border-color:#0066cc80}.btn-video:active:not(:disabled){transform:scale(.95);background:#0066cc2e}.btn-video:disabled{opacity:.45;cursor:default;transform:none}.btn-video-play{width:18px;height:18px;flex:none;border-radius:50%;background:var(--action-blue);position:relative}.btn-video-play:after{content:"";position:absolute;left:6.5px;top:50%;transform:translateY(-50%);border-style:solid;border-width:3.5px 0 3.5px 5.5px;border-color:transparent transparent transparent var(--white)}.btn-video-sub{font-size:11px;font-weight:400;color:var(--ink-secondary);letter-spacing:0}.btn-video.is-loading{color:var(--ink-secondary);background:var(--parchment);border-color:var(--hairline);cursor:wait}.btn-video-spinner{width:14px;height:14px;flex:none;border:2px solid rgba(0,102,204,.25);border-top-color:var(--action-blue);border-radius:50%;animation:spin .8s linear infinite}.btn-video-dots{display:inline-flex;gap:2px}.btn-video-dots i{font-style:normal;font-weight:700;animation:video-dot 1.2s infinite ease-in-out}.btn-video-dots i:nth-child(2){animation-delay:.2s}.btn-video-dots i:nth-child(3){animation-delay:.4s}@keyframes video-dot{0%,60%,to{opacity:.25}30%{opacity:1}}.ws-result{min-width:0;display:flex}.ws-result>*{flex:1}.ws-result-stack{display:flex;flex-direction:column;gap:16px;width:100%}.video-card{display:flex;flex-direction:column;gap:14px;width:100%}.video-card-head{display:flex;justify-content:space-between;align-items:baseline}.video-title{margin:0;font-size:18px;font-weight:600;letter-spacing:-.01em}.video-figure{margin:0;border-radius:12px;overflow:hidden;background:#000}.video-figure video{display:block;width:100%;height:auto}.video-hint{margin:0;color:var(--ink-secondary);font-size:12.5px}.result-card{display:flex;flex-direction:column;gap:18px;width:100%}.result-figure{margin:0;border-radius:12px;overflow:hidden;background:var(--white)}.result-figure img{display:block;width:100%;height:auto;cursor:zoom-in;box-shadow:#00000038 3px 5px 30px}.result-placeholder,.result-empty,.result-broken{min-height:300px;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;border-radius:12px;background:var(--parchment);color:var(--ink-secondary);text-align:center;padding:24px}.result-error{align-items:flex-start}.result-error p{margin:0 0 4px;color:#c2452d}.result-actions{display:flex;gap:12px;flex-wrap:wrap}.spinner{width:32px;height:32px;border:3px solid var(--hairline);border-top-color:var(--action-blue);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.btn-secondary{padding:10px 22px;border:1px solid var(--hairline);border-radius:999px;background:var(--white);color:var(--action-blue);font-family:inherit;font-size:15px;cursor:pointer;transition:transform .15s ease}.btn-secondary:disabled{opacity:.5;cursor:default}.btn-text{border:none;background:none;padding:0;color:var(--action-blue);font-family:inherit;font-size:13.5px;cursor:pointer}.result-prompt summary{cursor:pointer;color:var(--action-blue);font-size:14px}.result-prompt pre{margin:10px 0 0;padding:16px;background:var(--parchment);border-radius:12px;white-space:pre-wrap;word-break:break-word;font-size:12.5px;line-height:1.5;max-height:320px;overflow:auto}.history{width:100%;margin-top:48px}.history-header{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-bottom:18px;flex-wrap:wrap}.history-title{margin:0;font-size:28px;font-weight:600;letter-spacing:-.01em}.history-count{margin-left:10px;font-size:14px;font-weight:400;color:var(--ink-secondary)}.history-tools{display:flex;align-items:center;gap:14px}.history-file-input{display:none}.history-overflow{margin:-6px 0 14px;padding:10px 14px;border-radius:10px;background:#c2452d14;color:#a03d28;font-size:13.5px}.history-import-msg{margin:-6px 0 14px;color:var(--action-blue);font-size:13.5px}.btn-clear-history{border:none;background:none;padding:4px 6px;color:var(--ink-secondary);font-family:inherit;font-size:13.5px;cursor:pointer;transition:color .15s ease,transform .15s ease}.btn-clear-history:hover{color:#c2452d}.btn-clear-history:active{transform:scale(.95)}.history-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:20px}.history-card{display:flex;flex-direction:column;gap:10px;padding:16px}.history-thumb{position:relative;border-radius:10px;overflow:hidden;aspect-ratio:2 / 1;background:var(--parchment)}.history-thumb img{width:100%;height:100%;object-fit:cover;display:block;cursor:zoom-in}.history-thumb-fallback{position:absolute;top:0;right:0;bottom:0;left:0;display:none;align-items:center;justify-content:center;padding:12px;color:var(--ink-secondary);font-size:13px;text-align:center}.history-meta{display:flex;justify-content:space-between;align-items:center}.history-mode{font-size:12px;font-weight:600;padding:2px 10px;border-radius:999px}.mode-xiaohei{background:#0066cc14;color:#00408f}.mode-handdrawn{background:var(--parchment);color:var(--ink-secondary)}.history-time{font-size:12px;color:var(--ink-secondary)}.history-topic{margin:0;font-size:15px;font-weight:600;letter-spacing:-.01em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.history-actions{display:flex;gap:16px}.btn-delete{color:var(--ink-secondary);margin-left:auto}.btn-delete:hover{color:#c2452d}.history-prompt{margin:0;padding:12px;background:var(--parchment);border-radius:10px;white-space:pre-wrap;word-break:break-word;font-size:12px;line-height:1.5;max-height:240px;overflow:auto}.lightbox{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:32px;background:#000000d1;cursor:zoom-out}.lightbox img{max-width:100%;max-height:100%;object-fit:contain;border-radius:8px;cursor:default}.lightbox-close{position:absolute;top:20px;right:24px;width:40px;height:40px;border:none;border-radius:50%;background:#ffffff29;color:var(--white);font-size:24px;line-height:1;cursor:pointer}.lightbox-close:hover{background:#ffffff47}.lightbox-position{position:absolute;top:32px;left:50%;transform:translate(-50%);color:#fffc;font-size:14px;letter-spacing:.02em}.lightbox-nav{position:absolute;top:50%;transform:translateY(-50%);width:48px;height:48px;border:none;border-radius:50%;background:#ffffff24;color:var(--white);font-size:30px;line-height:1;cursor:pointer;transition:background .15s ease,transform .15s ease}.lightbox-nav:hover{background:#ffffff4d}.lightbox-nav:active{transform:translateY(-50%) scale(.95)}.lightbox-nav-prev{left:28px}.lightbox-nav-next{right:28px}@media (max-width: 480px){.lightbox{padding:48px 12px}.lightbox-nav{width:38px;height:38px;font-size:24px}.lightbox-nav-prev{left:10px}.lightbox-nav-next{right:10px}}.footer{background:var(--parchment);border-top:1px solid var(--hairline);padding:28px 24px;text-align:center;color:var(--ink-secondary);font-size:13px;line-height:1.6}.footer p{margin:0}@media (max-width: 480px){.hero{padding:36px 20px 24px}.main{padding:24px 16px 48px}.card{padding:18px;border-radius:14px}.ws-input{min-height:300px}.ws-input textarea{min-height:200px}.ws-controls{flex-direction:column}.style-switch{flex-direction:column;width:100%}.ws-generate-group{flex-direction:column}.ws-generate-group .btn-generate,.ws-generate-group .btn-video{width:100%;justify-content:center;text-align:center}.result-actions{flex-direction:column}.btn-secondary{width:100%;text-align:center}}