:root{--bg:#fafafa;--panel:#fff;--line:#e4e4e7;--ink:#18181b;--muted:#71717a;--accent:#2563eb}*{box-sizing:border-box}body{color:var(--ink);background:var(--bg);margin:0;font:14px/1.5 system-ui,-apple-system,sans-serif}header{max-width:1200px;margin:0 auto;padding:20px 24px 8px}header h1{margin:0 0 4px;font-size:20px}header p{color:var(--muted);max-width:900px;margin:4px 0}.tabs{border-bottom:1px solid var(--line);gap:6px;margin:14px 0 0;display:flex}.tab{appearance:none;font:inherit;color:var(--muted);cursor:pointer;background:0 0;border:1px solid #0000;border-bottom:none;border-radius:8px 8px 0 0;margin-bottom:-1px;padding:8px 16px;font-weight:600}.tab:hover{color:var(--ink)}.tab.active{color:var(--accent);background:var(--panel);border-color:var(--line);border-bottom-color:var(--panel)}#view-about{max-width:820px;padding:8px 2px 0}#view-about h2{margin:22px 0 6px;font-size:16px}#view-about p,#view-about li{color:#3f3f46}#view-about p.eq{color:var(--ink);background:#f4f4f5;border-radius:6px;padding:8px 12px;overflow-x:auto}#view-about a{color:var(--accent)}.hint{color:#94959b;margin:4px 0 12px;font-size:12px}header code{background:#f4f4f5;border-radius:4px;padding:1px 5px;font-size:12px}main{max-width:1200px;margin:0 auto;padding:8px 24px 48px}.controls{background:var(--panel);border:1px solid var(--line);border-radius:10px;flex-wrap:wrap;align-items:flex-end;gap:14px 20px;margin:12px 0 18px;padding:14px 18px;display:flex}.field{flex-direction:column;gap:3px;display:flex}.field label{color:var(--muted);text-transform:uppercase;letter-spacing:.04em;font-size:11px}.field input{border:1px solid var(--line);width:130px;font:inherit;font-variant-numeric:tabular-nums;border-radius:6px;padding:6px 8px}.field input:focus{outline:2px solid var(--accent);border-color:var(--accent)}.presets{gap:8px;margin-left:auto;display:flex}.presets button{border:1px solid var(--line);background:var(--panel);cursor:pointer;font:inherit;border-radius:6px;padding:7px 12px}.presets button:hover{border-color:var(--accent);color:var(--accent)}.preset-src{color:var(--muted);font-variant-numeric:tabular-nums;margin:0 2px 12px;font-size:12px}.preset-src:before{content:"● ";color:#22c55e}.preset-src.custom{color:#b45309}.preset-src.custom:before{content:"✎ ";color:#b45309}.toggles{color:var(--ink);flex-wrap:wrap;gap:14px;margin:0 2px 14px;font-size:13px;display:flex}.toggle{cursor:pointer;-webkit-user-select:none;user-select:none;align-items:center;gap:5px;display:inline-flex}.toggle input{accent-color:var(--accent);cursor:pointer}.grid{grid-template-columns:1fr 1fr;gap:16px;display:grid}.card{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:8px}.card canvas{width:100%;height:320px;display:block}.note{color:var(--muted);margin-top:10px;font-size:12px}@media (width<=880px){.grid{grid-template-columns:1fr}}