:root{--bg:#f3efe6;--bg-deep:#e8e0d0;--ink:#1a3a2f;--ink-muted:#5a7a6a;--accent:#c45c26;--accent-soft:#e8c4a8;--gold:#c4a35a;--panel:#fffcf5eb;--danger:#a33b2a;--ok:#2d6a4f;--safe-bottom:env(safe-area-inset-bottom,0px);--safe-top:env(safe-area-inset-top,0px);color:var(--ink);background:var(--bg);font-family:PingFang SC,Hiragino Sans GB,Microsoft YaHei,Noto Sans SC,system-ui,sans-serif}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{background:radial-gradient(ellipse 120% 80% at 10% -20%, #e8dcc8 0%, transparent 50%), radial-gradient(ellipse 80% 60% at 100% 100%, #d4e0d8 0%, transparent 45%), var(--bg);height:100%;margin:0;overflow:hidden}#app{flex-direction:column;max-width:520px;height:100%;margin:0 auto;display:flex}.topbar{padding:calc(12px + var(--safe-top)) 16px 8px;justify-content:space-between;align-items:flex-start;gap:12px;display:flex}.brand{flex-direction:column;gap:2px;display:flex}.brand h1{letter-spacing:-.02em;margin:0;font-family:PingFang SC,Hiragino Sans GB,Microsoft YaHei,system-ui,sans-serif;font-size:1.35rem;font-weight:700}.brand .hint{color:var(--ink-muted);max-width:16rem;margin:0;font-size:.75rem;line-height:1.35}.icon-btn{background:var(--panel);color:var(--ink);cursor:pointer;border:none;border-radius:12px;width:40px;height:40px;font-size:1.1rem;box-shadow:0 1px #1a3a2f14}.status-bar{background:var(--panel);color:var(--ink-muted);border-radius:12px;justify-content:space-between;align-items:center;gap:8px;margin:0 16px 8px;padding:8px 12px;font-size:.8rem;display:flex}.status-bar strong{color:var(--ink);font-weight:600}.status-bar .badge{align-items:center;gap:6px;display:inline-flex}.status-bar .dot{background:var(--ink-muted);border-radius:50%;width:8px;height:8px}.status-bar .dot.on{background:var(--ok);box-shadow:0 0 0 3px #2d6a4f33}.status-bar .dot.warn{background:var(--accent)}.canvas-wrap{background:#f3efe6;border-radius:16px;flex:1;min-height:0;margin:0 12px;position:relative;overflow:hidden;box-shadow:inset 0 0 0 1px #1a3a2f14}.canvas-wrap canvas{touch-action:none;width:100%;height:100%;display:block}.toast{background:var(--ink);color:#f3efe6;opacity:0;pointer-events:none;white-space:nowrap;text-overflow:ellipsis;border-radius:999px;max-width:90%;padding:8px 14px;font-size:.78rem;transition:opacity .25s;position:absolute;bottom:12px;left:50%;overflow:hidden;transform:translate(-50%)}.toast.show{opacity:1}.controls{padding:10px 12px calc(12px + var(--safe-bottom));flex-direction:column;gap:8px;display:flex}.row{gap:8px;display:flex}.btn{cursor:pointer;background:var(--panel);color:var(--ink);border:none;border-radius:14px;flex:1;padding:14px 10px;font-family:inherit;font-size:.92rem;font-weight:600;box-shadow:0 1px #1a3a2f0f}.btn:disabled{opacity:.4;cursor:not-allowed}.btn.primary{background:var(--ink);color:#f3efe6}.btn.accent{background:var(--accent);color:#fff}.btn.ghost{box-shadow:none;color:var(--ink-muted);background:0 0;padding:8px;font-size:.8rem}.sheet{opacity:0;pointer-events:none;z-index:20;background:#1a3a2f59;justify-content:center;align-items:flex-end;transition:opacity .2s;display:flex;position:fixed;inset:0}.sheet.open{opacity:1;pointer-events:auto}.sheet-panel{width:100%;max-width:520px;padding:20px 20px calc(20px + var(--safe-bottom));background:#fffcf5;border-radius:20px 20px 0 0;transition:transform .2s;transform:translateY(20px)}.sheet.open .sheet-panel{transform:translateY(0)}.sheet-panel h2{margin:0 0 12px;font-size:1.1rem}.field{margin-bottom:14px}.field label{color:var(--ink-muted);margin-bottom:6px;font-size:.78rem;display:block}.field input[type=number],.field input[type=text]{width:100%;color:var(--ink);background:#fff;border:1px solid #1a3a2f26;border-radius:12px;padding:12px 14px;font-family:inherit;font-size:1rem}.field input[type=range]{width:100%}.switch-row{border-bottom:1px solid #1a3a2f14;justify-content:space-between;align-items:center;padding:10px 0;font-size:.9rem;display:flex}.help-list{color:var(--ink-muted);margin:0;padding-left:1.1rem;font-size:.85rem;line-height:1.55}.help-list li{margin-bottom:6px}.demo-banner{color:var(--ink);background:#c4a35a40;border-radius:10px;margin:0 16px 8px;padding:8px 12px;font-size:.75rem;display:none}.demo-banner.show{display:block}