:root{--bg:#eceef0;--panel:#f8f9fa;--ink:#252a30;--muted:#66707b;--line:#d1d6dc;--field-line:#b4bdc7;--accent:#285c96;--accent-ink:#fff;--selected:#e2e9f1;--stage:#e5e7e8;--paper:#fff}*{box-sizing:border-box}body{color:var(--ink);background:var(--bg);margin:0;font:13px/1.5 Microsoft YaHei,system-ui,sans-serif}header{background:var(--panel);border-bottom:1px solid var(--line);align-items:center;gap:18px;height:48px;padding:0 20px;display:flex}header strong{font-size:16px;font-weight:600}header .app-description{color:var(--muted);border-left:1px solid var(--line);padding-left:18px;font-size:12px}nav{margin-left:auto}a{color:var(--accent)}nav a{font-size:12px;text-decoration:none}nav a:hover{text-decoration:underline}.workflow{height:38px;color:var(--muted);border-bottom:1px solid var(--line);background:var(--bg);align-items:center;gap:20px;padding:0 20px;font-size:12px;display:flex}body[data-step=choose] .step-choose,body[data-step=generate] .step-generate,body[data-step=download] .step-download{color:var(--ink);font-weight:600}main{grid-template-columns:256px minmax(300px,1fr) 234px;height:calc(100dvh - 114px);min-height:470px;display:grid}aside,.workspace{min-width:0;min-height:0}aside{background:var(--panel);flex-direction:column;display:flex}.settings{border-right:1px solid var(--line)}.result{border-left:1px solid var(--line)}h1,h2,p{margin:0}h2{margin:0 0 12px;font-size:12px;font-weight:600}.panel-title{border-bottom:1px solid var(--line);background:var(--bg);flex-shrink:0;align-items:center;height:38px;margin:0;padding:0 16px;font-size:12px;font-weight:600;display:flex}.settings-scroll,.result-scroll{scrollbar-width:thin;flex:1;padding:16px;overflow:auto}.source-section{border-bottom:1px solid var(--line);padding-bottom:16px}button,.upload,.download-link{border:1px solid var(--field-line);background:var(--panel);color:var(--ink);cursor:pointer;text-align:center;border-radius:3px;padding:7px 12px;font:12px/1.5 inherit}button{line-height:1.5}button:hover:not(:disabled),.upload:hover{border-color:var(--accent);background:var(--selected)}button:disabled{opacity:.44;cursor:default}.primary{color:var(--accent-ink);background:var(--accent);border-color:var(--accent);font-weight:500}.primary:hover:not(:disabled){color:var(--accent-ink);background:var(--accent);filter:brightness(.94)}.upload{background:var(--paper);text-align:center;width:100%;padding:8px;font-weight:500;display:block;position:relative}.upload input{opacity:0;cursor:pointer;width:100%;position:absolute;inset:0}.upload:focus-within{outline:2px solid var(--accent);outline-offset:2px}#filename{overflow-wrap:anywhere;margin:12px 0 4px;font-size:12px}.file-types{color:var(--muted);font-size:11px}.text-button{color:var(--accent);text-align:left;border:0;padding:8px 0 0;font-size:12px;display:block;background:0 0!important}.text-button:hover{text-decoration:underline}.basic-settings{padding:18px 0 16px}.basic-settings>label{justify-content:space-between;align-items:center;gap:12px;margin:10px 0;display:flex}.input-unit{background:var(--paper);border:1px solid var(--field-line);border-radius:3px;flex-shrink:0;align-items:center;width:118px;display:flex}.input-unit input{width:75px;color:var(--ink);background:0 0;border:0;min-width:0;margin:0;padding:7px 8px;font:13px/1.4 system-ui}.input-unit span{color:var(--muted);font-size:11px}.note{color:var(--muted);font-size:11px;line-height:1.8}.basic-settings>.note{margin-top:14px}details{border-top:1px solid var(--line)}summary{cursor:pointer;-webkit-user-select:none;user-select:none;padding:12px 0;font-size:12px;font-weight:500}summary:hover{color:var(--accent)}.advanced-content{padding:4px 0 16px}.advanced-content>h2:not(:first-child){margin-top:22px}.advanced-content>label{margin:10px 0;font-size:12px;display:block}.advanced input[type=number],.advanced select{border:1px solid var(--field-line);background:var(--paper);width:100%;color:var(--ink);border-radius:3px;margin-top:5px;padding:6px 8px;font:12px/1.5 inherit;display:block}.advanced .check{align-items:center;gap:7px;font-size:12px;display:flex}.check input{accent-color:var(--accent);width:13px;height:13px;margin:0}.generate-wrap{border-top:1px solid var(--line);background:var(--panel);margin-bottom:-16px;padding-top:16px;padding-bottom:16px;position:sticky;bottom:-16px}#generate{width:100%;padding:9px}.workspace{background:var(--stage);flex-direction:column;display:flex}.toolbar{background:var(--panel);flex-shrink:0;align-items:center;gap:4px;padding:7px 12px;display:flex}.views{border-bottom:1px solid var(--line);height:39px;padding-top:4px;padding-bottom:4px}.views button{color:var(--muted);background:0 0;border:1px solid #0000;border-radius:2px;padding:5px 15px}.views [aria-pressed=true]{color:var(--ink);border-color:var(--line);background:var(--paper)}.views #fit{margin-left:auto;padding:4px 8px;font-size:11px}.stage{background-color:var(--stage);background-image:radial-gradient(var(--field-line) .6px,transparent .6px);background-size:20px 20px;flex:1;place-items:center;min-height:240px;display:grid;position:relative;overflow:hidden}canvas{width:100%;height:100%;position:absolute;inset:0}#empty{color:var(--muted);text-align:center;padding:24px;font-size:13px;line-height:1.8;position:relative}#empty[hidden]{display:none}.canvas-note{color:var(--muted);pointer-events:none;font-size:10px;position:absolute;bottom:9px;left:12px}.playback{border-top:1px solid var(--line);flex-wrap:wrap;gap:8px;padding-bottom:2px}.playback button{padding:4px 8px;font-size:11px}.playback .check{color:var(--muted);align-items:center;gap:5px;margin-left:4px;font-size:11px;display:flex}#progress{color:var(--muted);font-variant-numeric:tabular-nums;margin-left:auto;font-size:11px}.timeline{background:var(--panel);padding:4px 12px}.timeline input{width:100%;height:14px;accent-color:var(--accent);margin:0}#status{color:var(--muted);border-top:1px solid var(--line);background:var(--panel);overflow-wrap:anywhere;flex-shrink:0;min-height:32px;padding:7px 12px;font-size:11px;line-height:1.6}.download-section{border-bottom:1px solid var(--line);margin-bottom:18px;padding-bottom:18px}.download-link{width:100%;color:var(--accent-ink);padding:9px;text-decoration:none;display:block}.download-link[aria-disabled=true]{opacity:.44;pointer-events:none}.download-help{color:var(--muted);margin:8px 0 12px;font-size:11px;line-height:1.7}.download-section>button{background:var(--paper);width:100%}dl{font-variant-numeric:tabular-nums;grid-template-columns:1fr auto;margin:0 0 22px;font-size:11px;display:grid}dt,dd{border-bottom:1px solid var(--line);margin:0;padding:8px 0}dt{color:var(--muted)}dd{text-align:right;font-weight:500}#palette{color:var(--muted);min-height:50px;margin-bottom:18px;font-size:11px}.colorrow{font-variant-numeric:tabular-nums;align-items:center;gap:8px;padding:6px 0;font-size:11px;display:flex}.swatch{border:1px solid var(--line);flex-shrink:0;width:16px;height:16px}.other-exports{margin-bottom:16px}.other-exports button{background:var(--paper);text-align:left;width:100%;margin:4px 0 8px;font-size:11px;display:block}.result-scroll>.note{border-top:1px solid var(--line);padding-top:12px}footer{height:28px;color:var(--muted);background:var(--bg);border-top:1px solid var(--line);justify-content:space-between;align-items:center;padding:0 16px;font-size:10px;display:flex}footer a{color:var(--muted);text-decoration:none}footer a:hover{text-decoration:underline}:focus-visible{outline:2px solid var(--accent);outline-offset:2px}@media (width<=1000px){main{grid-template-columns:230px minmax(280px,1fr) 210px}header{padding:0 14px}.workflow{gap:14px;padding:0 14px}.settings-scroll,.result-scroll{padding:13px}.input-unit{width:108px}.input-unit input{width:65px}.playback .check{margin-left:0}#progress{width:100%;margin:0;padding:2px 0}}@media (width<=800px){main{grid-template-columns:224px minmax(280px,1fr);align-items:start;height:auto;min-height:calc(100dvh - 114px)}.settings{border-bottom:1px solid var(--line);grid-row:1/3;height:100%}.workspace{height:calc(100dvh - 114px);min-height:470px}.result{border-top:1px solid var(--line);grid-column:2}.result-scroll{display:block}.stage{min-height:280px}}@media (width<=560px){header strong{font-size:15px}header .app-description{display:none}.workflow{justify-content:space-between;gap:8px;font-size:11px}main{flex-direction:column;display:flex}.settings,.workspace,.result{border:0;border-bottom:1px solid var(--line);width:100%}.settings-scroll{overflow:visible}.settings{height:auto}.workspace{height:65dvh;min-height:420px}.settings-scroll{padding:14px}.source-section{grid-template-columns:1fr 1fr;gap:0 12px;display:grid}.source-section .upload{grid-row:1/3;align-self:center}.source-section #filename{margin:0}.source-section .file-types{font-size:10px}.source-section #example{grid-column:2}.basic-settings>label{max-width:360px}.generate-wrap{margin:0;padding-bottom:0;position:static}.result-scroll{overflow:visible}.advanced-content{max-width:360px}.result{height:auto}footer{flex-wrap:wrap;gap:12px;height:auto;padding:8px 12px}.panel-title{height:35px}}@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto}}.playback-speed{color:var(--muted);white-space:nowrap;align-items:center;gap:5px;font-size:11px;display:flex}.playback-speed select{font:inherit;color:var(--ink);background:var(--paper);border:1px solid var(--field-line);border-radius:3px;width:76px;min-height:27px;padding:4px}.playback-speed select:disabled{opacity:.44;cursor:default}:root{--muted:#525e6b}.note,.file-types,.download-help,#status,#palette,dl,.colorrow,.playback button,.playback .check,.playback-speed,#progress{font-size:12px}.views{flex-wrap:wrap;height:auto;min-height:39px}.views button{padding:4px 9px}.zoom-tools{align-items:center;gap:4px;margin-left:auto;display:flex}.zoom-tools output{text-align:center;font-variant-numeric:tabular-nums;min-width:42px;font-size:12px}.zoom-tools #fit{margin-left:4px}canvas{touch-action:none;cursor:grab}canvas.dragging{cursor:grabbing}.canvas-note{font-size:11px}.playback{gap:6px}.playback-speed input,.basic-settings select,.color-tools select{font:inherit;color:var(--ink);border:1px solid var(--field-line);background:var(--paper);border-radius:3px;padding:4px}.playback-speed input{width:65px}.playback-speed select{width:70px}.playback-speed{font-size:12px}#progress{width:100%;margin:0;padding-top:3px}.color-tools{flex-wrap:wrap;gap:7px;padding-top:3px;font-size:12px}.color-tools select{max-width:120px}#effective-rate{color:var(--muted);margin-left:auto;font-size:11px}.color-tools button{padding:4px 7px;font-size:12px}.result>.download-section{border-bottom:1px solid var(--line);background:var(--panel);flex-shrink:0;margin:0;padding:14px 14px 12px}.download-section>button+button{margin-top:8px}.download-help{margin:7px 0 9px}.result-scroll{min-height:120px}.colorrow{text-align:left;background:0 0;border:1px solid #0000;width:100%;padding:7px 4px}.colorrow[aria-pressed=true]{border-color:var(--accent);background:var(--selected)}.colorrow .swatch{width:16px;height:16px}.project-section{border-top:1px solid var(--line);margin-top:20px;padding-top:16px}.project-section button,.project-open{width:100%;margin:7px 0;display:block}.project-section [hidden]{display:none}.project-section h2{margin-bottom:8px}.basic-settings select{width:118px}.project-open{padding:7px;font-size:12px;font-weight:400}@media (width<=1000px){.views button{padding:4px 7px}.playback-speed{font-size:11px}.playback-speed input{width:58px}}@media (width<=800px){.result-scroll{min-height:0}.workspace{min-height:580px}}@media (width<=560px){.workspace{height:80dvh;min-height:560px}.result>.download-section{padding:14px}.zoom-tools{margin-left:0}.views{gap:3px}.project-section{margin-top:16px}#effective-rate{margin-left:0}.source-section .project-open{grid-column:auto}}