:root{color-scheme:light dark;font-family:Inter,system-ui,-apple-system,sans-serif}body{margin:0;padding:24px;background:#0f1115;color:#f5f5f5}.app{display:grid;gap:16px;max-width:960px;margin:0 auto}h1{margin:0;font-size:24px}.description{margin:0;color:#ffffffb3;font-size:14px;max-width:720px}.controls{display:flex;flex-wrap:wrap;gap:12px 20px;background:#ffffff0a;border-radius:12px;padding:12px 16px}.control-item{display:flex;align-items:center;gap:8px;font-size:14px}.control-button{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:1px solid rgba(255,255,255,.2);background:#ffffff0a;color:#ffffffb8;border-radius:999px;padding:6px 12px;cursor:pointer;font:inherit;display:inline-flex;align-items:center;gap:8px;transition:background .15s ease,border-color .15s ease,color .15s ease}.control-button.is-active{color:#fff;border-color:var(--accent, currentColor);background:var(--accent-bg, rgba(255, 255, 255, .12))}.control-button:focus-visible{outline:2px solid rgba(255,255,255,.5);outline-offset:2px}.color-dot{width:10px;height:10px;border-radius:999px;display:inline-block}.canvas-section{display:grid;gap:10px}h2{margin:0;font-size:16px;font-weight:600;text-align:center}.canvas-wrap{background:#151821;border-radius:16px;padding:16px;box-shadow:0 12px 24px #0003;display:flex;flex-direction:column;align-items:center;gap:12px}.curve-canvas{width:100%;height:360px;display:block}