.sine-page{max-width:900px;display:flex;flex-direction:column;gap:1rem;padding-top:1.5rem;padding-bottom:1.25rem;box-sizing:border-box}.sine-canvas-wrap{width:100%;height:560px;background:#06060e;border-radius:12px;border:1px solid rgba(57,184,253,.12);box-shadow:0 0 0 1px rgba(172,138,255,.06),0 4px 32px rgba(0,0,0,.4),inset 0 0 60px rgba(0,0,0,.2);overflow:hidden}.sine-canvas{display:block;width:100%;height:100%}.sine-controls{gap:1rem;flex-wrap:wrap}.sine-controls,.sine-group{display:flex;align-items:center}.sine-group{gap:.35rem}.sine-group-label{font-size:.7rem;color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.1em;margin-right:.2rem;white-space:nowrap}.sine-btn{min-width:60px;padding:.4rem .8rem!important;font-size:.8rem!important}.sine-btn.active{background:var(--color-secondary-container);border-color:var(--color-secondary);color:var(--color-secondary-on)}.sine-legend{gap:1.25rem;flex-wrap:wrap}.sine-legend,.sine-legend-item{display:flex;align-items:center}.sine-legend-item{gap:.45rem;font-size:.78rem;color:var(--color-text-muted);font-family:var(--font-mono)}.sine-legend-swatch{width:26px;height:3px;border-radius:2px;flex-shrink:0}.sine-legend-swatch--sum{background:#e2e8f0;height:3px}@media (max-width:600px){.sine-controls,.sine-page{gap:.75rem}.sine-legend{gap:.9rem}}