:root{--ink:#17344b;--muted:#61788b;--blue:#34a8e8;--blue-deep:#178dcc;--surface:#fff;--page-bg:#edf8fe;--border:#d6eaf5}*{box-sizing:border-box}html{background:var(--page-bg);min-width:320px}body{background:radial-gradient(circle at 15% 12%, #ffe07038, transparent 26rem), linear-gradient(180deg, #f7fcff 0%, var(--page-bg) 100%);color:var(--ink);margin:0;font-family:Arial,PingFang SC,Microsoft YaHei,sans-serif}button{font:inherit}.site-shell{width:min(100%,1180px);margin:0 auto;padding:18px 16px 24px}.intro{text-align:center;margin:0 auto 14px}.eyebrow{color:var(--blue-deep);letter-spacing:.18em;text-transform:uppercase;margin:0 0 4px;font-size:11px;font-weight:800}.intro h1{letter-spacing:-.04em;margin:0;font-size:clamp(28px,4vw,38px);line-height:1.1}.intro p:last-child{max-width:600px;color:var(--muted);margin:6px auto 0;font-size:14px;line-height:1.45}.workspace{align-items:start;gap:14px;display:grid}.preview-stage{-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);background:#ffffffa3;border:1px solid #34a8e83d;border-radius:22px;place-items:center;padding:10px;display:grid;box-shadow:0 24px 64px #205d811f}.worksheet{touch-action:manipulation;-webkit-user-select:none;user-select:none;background:#fff;width:min(100%,435px);height:auto;margin:0 auto;display:block;box-shadow:0 10px 30px #1d466021}.active-peg-ring{fill:#34a8e81f;stroke:#34a8e8;stroke-width:.75px;pointer-events:none}.active-band-halo{stroke:#17344b47;stroke-width:3.45px;stroke-dasharray:1.2 1.2;pointer-events:none}.band-hit-area{cursor:pointer;pointer-events:stroke;outline:none}:is(.band-hit-area:hover,.band-hit-area:focus-visible){stroke:#178dcc24}.peg-hit-area{fill:#0000;cursor:pointer;outline:none}:is(.peg-hit-area:hover,.peg-hit-area:focus-visible){fill:#34a8e81a;stroke:#178dccbd;stroke-width:.65px}.control-panel{border:1px solid var(--border);background:var(--surface);border-radius:20px;gap:10px;padding:14px;display:grid;box-shadow:0 12px 32px #205d8114}.control-group{flex-direction:column;align-items:stretch;gap:7px;display:flex}.control-label{flex:none;font-size:15px;font-weight:800}.band-manager{align-items:flex-start}.band-tools{flex-wrap:wrap;flex:auto;justify-content:flex-end;align-items:center;gap:7px;display:flex}.band-tabs{flex-wrap:wrap;gap:6px;display:flex}.band-tab{border:1px solid var(--border);min-height:38px;color:var(--ink);cursor:pointer;background:#fff;border-radius:12px;align-items:center;padding:7px 10px;font-weight:750;display:inline-flex}.band-tab[aria-selected=true]{border-color:var(--blue);box-shadow:0 0 0 3px #34a8e824}.band-swatch{border-radius:999px;width:18px;height:5px;margin-right:7px}.new-band-button{min-height:38px!important;padding:7px 11px!important}.segmented-control,.actions{flex-wrap:wrap;gap:7px;display:flex}.color-option,.mode-option,.secondary-button,.primary-button{border:1px solid var(--border);min-height:38px;color:var(--ink);cursor:pointer;background:#fff;border-radius:14px;font-weight:750;transition:transform .16s,border-color .16s,box-shadow .16s}.color-option{align-items:center;gap:6px;padding:7px 10px;display:inline-flex}.color-option[aria-pressed=true],.mode-option[aria-pressed=true]{border-color:var(--blue);box-shadow:0 0 0 3px #34a8e824}.mode-option{flex:1 1 0;min-width:0;padding:7px 12px}.control-group+.control-group{border-top:1px solid var(--border);padding-top:9px}.color-swatch{border:2px solid #17344b1f;border-radius:50%;width:16px;height:16px}.actions{grid-template-columns:repeat(2,minmax(0,1fr));display:grid}.status-row{border-top:1px solid var(--border);flex-direction:column;justify-content:space-between;align-items:flex-start;gap:6px;min-height:24px;padding-top:9px;display:flex}.status-message{color:var(--muted);margin:0;font-size:14px;line-height:1.5}.status-badges{flex-wrap:wrap;flex:none;justify-content:flex-start;gap:7px;display:flex}.point-count,.band-count{color:var(--blue-deep);background:#edf8fe;border-radius:999px;flex:none;padding:4px 9px;font-size:13px;font-weight:800}.band-count{color:#9a7213;background:#fff7d6}.secondary-button,.primary-button{min-width:0;padding:8px 10px}.danger-button{color:#c54538}.primary-button{border-color:var(--blue);background:var(--blue);color:#fff}button:not(:disabled):hover{transform:translateY(-1px)}button:focus-visible{outline-offset:3px;outline:3px solid #34a8e852}button:disabled{cursor:not-allowed;opacity:.55}@media (min-width:680px){.workspace{grid-template-columns:minmax(0,1fr) minmax(300px,330px)}.control-panel{max-height:calc(100vh - 106px);position:sticky;top:12px;overflow:auto}}@media (max-width:679px){.site-shell{padding:28px 12px 48px}.intro{margin-bottom:20px}.intro p:last-child{font-size:15px}.preview-stage{border-radius:20px;padding:10px}.control-panel{border-radius:20px;padding:16px}.control-group{align-items:flex-start}.segmented-control,.actions,.band-tools,.band-tabs{width:100%}.band-tools{justify-content:stretch}.band-tabs{grid-template-columns:repeat(2,minmax(0,1fr));display:grid}.band-tab,.new-band-button{justify-content:center}.new-band-button{width:100%}.status-row{align-items:flex-start}.status-badges{max-width:50%}.color-option{flex:1 1 0;justify-content:center;padding-inline:8px}.mode-option{flex:1 1 0}.band-colors .color-option{flex-basis:calc(25% - 8px);min-width:62px}.actions>button{flex:auto}.primary-button{grid-column:1/-1}}@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}