:root{--ink:#1f1f2e;--cream:#fff6e5;--paper:#fffdf8;--yellow:#ffc93c;--coral:#ff6b6b;--mint:#3ddc84;--sky:#dff1fb;--muted:#6b6676;--line:2px solid var(--ink);--radius:12px;--shadow:0 3px 0 var(--ink);--left:148px;--right:150px;--top:46px;color:var(--ink);-webkit-text-size-adjust:100%;font-family:PingFang TC,Noto Sans TC,Microsoft JhengHei,system-ui,sans-serif}*{box-sizing:border-box}html,body,#root{background:var(--cream);overscroll-behavior:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;height:100%;margin:0;overflow:hidden}button{font:inherit;color:inherit}.app{grid-template-rows:var(--top) minmax(0, 1fr);grid-template-columns:var(--left) minmax(0, 1fr) var(--right);height:100dvh;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);display:grid}.app.mode-exterior{grid-template-columns:0 minmax(0, 1fr) var(--right)}.topbar{border-bottom:var(--line);background:var(--yellow);grid-column:1/-1;justify-content:space-between;align-items:center;gap:10px;min-width:0;padding:6px 10px;display:flex}.tabs-row,.top-actions,.file-menu,.rot{align-items:center;gap:6px;display:flex}.tabs-row{gap:12px}.tabs{border:var(--line);background:var(--paper);box-shadow:var(--shadow);border-radius:999px;display:flex;overflow:hidden}.tab{cursor:pointer;background:0 0;border:0;padding:4px 14px;font-weight:700}.tab+.tab{border-left:var(--line)}.tab.on{background:var(--coral);color:#fff}.btn{border:var(--line);background:var(--paper);box-shadow:var(--shadow);cursor:pointer;white-space:nowrap;border-radius:10px;padding:4px 12px;font-weight:700;transition:transform 60ms}.btn:active:not(:disabled){box-shadow:0 1px 0 var(--ink);transform:translateY(2px)}.btn:disabled{opacity:.45;cursor:default}.btn.icon{padding:2px 10px;font-size:18px;line-height:1.2}.btn.primary{background:var(--mint)}.btn.danger{background:var(--coral);color:#fff}.left{border-right:var(--line);background:var(--paper);min-width:0;overflow:hidden auto}.mode-exterior .left{border-right:0}.palette{gap:5px;margin:0;padding:6px;list-style:none;display:grid}.pal-item{border:var(--line);width:100%;box-shadow:0 2px 0 var(--ink);text-align:left;cursor:pointer;background:#fff;border-radius:10px;align-items:center;gap:7px;padding:4px 6px;display:flex}.pal-item:disabled{opacity:.4;cursor:default}.pal-item:active:not(:disabled){box-shadow:none;transform:translateY(2px)}.pal-text{flex-direction:column;min-width:0;line-height:1.15;display:flex}.pal-name{font-size:14px;font-weight:700}.pal-size{color:var(--muted);font-variant-numeric:tabular-nums;font-size:11px}.viewport{background:radial-gradient(ellipse at 50% 40%, #fff 0%, var(--sky) 70%, #cfe8f5 100%);min-width:0;min-height:0;position:relative}.viewport canvas{display:block}.toolbar-wrap{pointer-events:none;flex-direction:column;align-items:center;gap:6px;max-width:calc(100% - 16px);display:flex;position:absolute;bottom:10px;left:50%;transform:translate(-50%)}.toolbar{border:var(--line);background:var(--paper);box-shadow:var(--shadow);pointer-events:auto;border-radius:14px;gap:8px;padding:6px;display:flex}.draft-msg{border:var(--line);white-space:nowrap;background:#fff;border-radius:999px;padding:2px 10px;font-size:13px;font-weight:700}.draft-msg.bad{background:#ffe1e1}.draft-msg.ok{background:#e3fbec}.toast{border:var(--line);max-width:calc(100% - 20px);box-shadow:var(--shadow);background:#fff;border-radius:10px;padding:4px 12px;font-size:13px;font-weight:700;position:absolute;top:8px;left:50%;transform:translate(-50%)}.toast.bad{background:#ffe1e1}.fps,.demo-tag{color:#fff;pointer-events:none;background:#1f1f2ecc;border-radius:6px;padding:3px 6px;font:12px/1.2 ui-monospace,monospace;position:absolute;top:6px;left:6px}.demo-tag{top:auto;bottom:6px}.right{border-left:var(--line);background:var(--paper);min-width:0;overflow:hidden auto}.stats{gap:8px;padding:8px;display:grid}.stat{border:var(--line);border-radius:var(--radius);box-shadow:0 2px 0 var(--ink);background:#fff;padding:6px 8px}.stat h3{margin:0 0 2px;font-size:14px}.stat dl{grid-template-columns:auto 1fr;gap:1px 8px;margin:0;font-size:13px;display:grid}.stat dt{color:var(--muted)}.stat dd{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;margin:0;font-weight:700}.stat dd.big{color:#c0392b;font-size:15px}.rotate-overlay{display:none}@media (orientation:portrait){.rotate-overlay{z-index:100;background:var(--yellow);justify-content:center;align-items:center;display:flex;position:fixed;inset:0}}.rotate-card{text-align:center;font-size:22px;font-weight:800}.rotate-phone{border:4px solid var(--ink);background:#fff;border-radius:12px;width:54px;height:92px;margin:0 auto 16px;animation:1.8s ease-in-out infinite turn}@keyframes turn{0%,25%{transform:rotate(0)}60%,to{transform:rotate(-90deg)}}@media (height<=460px){:root{--left:132px;--right:132px;--top:42px}.tab{padding:3px 11px}.btn{padding:3px 10px}.pal-item{padding:2px 5px}.pal-item img{width:24px;height:24px}.pal-name{font-size:13px}.palette{gap:4px}.stats{gap:6px;padding:6px}.stat dl{font-size:12px}}.btn.small{box-shadow:0 2px 0 var(--ink);border-radius:8px;padding:1px 8px;font-size:12px;text-decoration:none;display:inline-block}.snap-backdrop{z-index:50;padding:max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));background:#1f1f2e73;justify-content:center;align-items:stretch;display:flex;position:fixed;inset:0}.snap-panel{background:var(--paper);border:var(--line);width:min(1100px,100%);box-shadow:0 4px 0 var(--ink);border-radius:16px;flex-direction:column;display:flex;overflow:hidden}.snap-head{background:var(--yellow);border-bottom:var(--line);align-items:center;gap:12px;padding:6px 10px;display:flex}.snap-head h2{margin:0;font-size:17px}.snap-head .hint{color:#5a4a1a;flex:1;font-size:12px}.snap-body{-webkit-user-select:text;user-select:text;gap:14px;padding:10px;display:grid;overflow:auto}.snap-error{color:#c0392b;font-weight:700}.snap-cam{border:var(--line);border-radius:var(--radius);background:#fff;padding:8px 10px 10px}.snap-cam h3{align-items:baseline;gap:8px;margin:0 0 6px;font-size:16px;display:flex}.snap-cam h3 small{color:var(--muted);font-size:11px;font-weight:400}.shots{grid-template-columns:1fr 1fr;gap:8px;display:grid}.shot{margin:0}.shot img{aspect-ratio:3/2;object-fit:contain;border:var(--line);-webkit-touch-callout:default;-webkit-user-select:auto;user-select:auto;background:#eee;border-radius:8px;width:100%;display:block}.shot figcaption{justify-content:space-between;align-items:center;margin-top:4px;font-size:12px;font-weight:700;display:flex}.prompt{border-top:1px dashed #c9c3b8;margin-top:8px;padding-top:6px}.prompt-head{justify-content:space-between;align-items:center;display:flex}.prompt h4{margin:0;font-size:14px}.prompt pre{white-space:pre-wrap;word-break:break-word;border-radius:8px;margin:4px 0;padding:6px 8px;font:12px/1.45 ui-monospace,SF Mono,Menlo,monospace}.prompt pre.en{background:#f4f1ea}.prompt pre.zh{color:var(--muted);background:#fbf8f2;font-family:inherit}.neg{flex-wrap:wrap;align-items:center;gap:8px;font-size:12px;display:flex}.neg span{font-weight:700}.neg code{background:#ffe1e1;border-radius:6px;padding:2px 6px}a.btn{color:var(--ink)}