:root{--bg:#f7f3ec;--surface:#fff;--ink:#1b1b1b;--muted:#5f5a52;--line:#e2dbcf;--accent:#c8102e;--on-accent:#fff;--warn:#9a5b00;color:var(--ink);background:var(--bg);-webkit-text-size-adjust:100%;font-family:Noto Sans TC,PingFang TC,Heiti TC,system-ui,sans-serif}@media (prefers-color-scheme:dark){:root{--bg:#161514;--surface:#211f1d;--ink:#f1ece4;--muted:#b3aca2;--line:#3a3632;--accent:#e0384f;--warn:#f0b35a}}*,:before,:after{box-sizing:border-box}body{background:var(--bg);margin:0}button,input,textarea{font:inherit;color:inherit}.app{max-width:1120px;padding:16px 16px calc(16px + env(safe-area-inset-bottom));grid-template-areas:"masthead""preview""editor""actions";gap:16px;margin:0 auto;display:grid}.masthead{grid-area:masthead}.masthead h1{color:var(--accent);margin:0;font-size:1.5rem;font-weight:900}.masthead p{color:var(--muted);margin:4px 0 0;font-size:.9rem;line-height:1.5}.preview{grid-area:preview}.preview-canvas{background:var(--line);border-radius:8px;width:100%;display:block;box-shadow:0 2px 12px #0000001f}.editor{grid-area:editor;gap:16px;display:grid}.segmented{border:1px solid var(--line);background:var(--surface);border-radius:10px;grid-template-columns:1fr 1fr;padding:3px;display:grid}.segmented button{cursor:pointer;background:0 0;border:0;border-radius:7px;padding:10px}.segmented button.active{background:var(--accent);color:var(--on-accent);font-weight:700}.field{gap:8px;display:grid}.field>span{color:var(--muted);font-size:.9rem}.field input,.field textarea{border:1px solid var(--line);background:var(--surface);resize:vertical;border-radius:10px;width:100%;padding:12px;font-size:18px}.field input:focus,.field textarea:focus{outline:2px solid var(--accent);outline-offset:1px}.chips{flex-wrap:wrap;gap:8px;display:flex}.chip{border:1px solid var(--line);background:var(--surface);cursor:pointer;border-radius:999px;padding:8px 14px}.chip.active{border-color:var(--accent);color:var(--accent);font-weight:700}.segmented.three{grid-template-columns:repeat(3,1fr)}.templates{grid-template-columns:repeat(4,1fr);gap:8px;display:grid}.template{border:1px solid var(--line);background:var(--surface);cursor:pointer;border-radius:10px;align-content:start;justify-items:center;gap:6px;padding:8px 4px;display:grid}.template canvas{border-radius:4px;width:72px;max-width:100%;height:auto;box-shadow:0 1px 4px #00000026}.template b{font-size:.8rem}.template.active{border-color:var(--accent);outline:2px solid var(--accent);color:var(--accent)}.palettes{grid-template-columns:repeat(6,1fr);gap:8px;display:grid}.palette{border:1px solid var(--line);cursor:pointer;border-radius:10px;justify-items:center;gap:2px;padding:10px 2px 6px;display:grid;position:relative}.palette i{border-radius:50%;width:18px;height:18px}.palette small{font-size:.7rem;font-weight:700}.palette.active{outline:3px solid var(--accent);outline-offset:1px}.custom-colors{flex-wrap:wrap;align-items:center;gap:12px;font-size:.9rem;display:flex}.custom-colors label{cursor:pointer;align-items:center;gap:6px;display:inline-flex}.custom-colors input[type=color]{border:1px solid var(--line);background:0 0;border-radius:8px;width:36px;height:36px;padding:0}.link{color:var(--accent);cursor:pointer;background:0 0;border:0;padding:4px;text-decoration:underline}.sizes{grid-template-columns:repeat(4,1fr);gap:8px;display:grid}.size{border:1px solid var(--line);background:var(--surface);cursor:pointer;border-radius:10px;align-content:end;justify-items:center;gap:4px;padding:10px 4px;display:grid}.size i{opacity:.6;border:2px solid;border-radius:3px;height:32px;display:block}.size b{font-size:.75rem;line-height:1.3}.size small{color:var(--muted);font-size:.7rem}.size.active{border-color:var(--accent);color:var(--accent)}.size.active i{opacity:1}.actions{grid-area:actions;grid-template-columns:1fr auto;gap:8px;display:grid}.actions .warn{grid-column:1/-1}.primary,.secondary{cursor:pointer;border-radius:12px;justify-content:center;align-items:center;min-height:48px;padding:0 20px;font-weight:700;text-decoration:none;display:inline-flex}.primary{background:var(--accent);color:var(--on-accent);border:0}.primary:disabled{opacity:.5;cursor:progress}.secondary{border:1px solid var(--line);background:var(--surface);color:var(--ink)}.warn{color:var(--warn);margin:8px 0 0;font-size:.85rem}.mini-preview{top:calc(12px + env(safe-area-inset-top));z-index:5;cursor:pointer;background:0 0;border:0;border-radius:6px;padding:0;animation:.15s ease-out mini-in;position:fixed;right:12px;box-shadow:0 4px 16px #0000004d}.mini-preview canvas{border-radius:6px;height:auto;display:block}@keyframes mini-in{0%{opacity:0;transform:translateY(-8px)}}@media (prefers-reduced-motion:reduce){.mini-preview{animation:none}}.manual{z-index:10;color:#fff;padding:16px 16px calc(16px + env(safe-area-inset-bottom));text-align:center;background:#000000e0;flex-direction:column;justify-content:center;align-items:center;gap:12px;display:flex;position:fixed;inset:0}.manual img{object-fit:contain;-webkit-touch-callout:default;max-width:100%;max-height:65vh}.manual p{margin:0}.manual .hint{color:#f0c36a;font-size:.9rem}.manual-actions{gap:8px;display:flex}@media (width>=900px){.app{grid-template:"masthead preview""editor preview""actions preview"1fr/minmax(320px,400px) 1fr;align-items:start;column-gap:32px;padding-top:32px}.preview{position:sticky;top:32px}.mini-preview{display:none}.preview-canvas{max-width:calc((100vh - 64px) * var(--ar));margin:0 auto}}