.cbg-wrap{display:flex;flex-direction:column;min-width:0;min-height:0}.cbg-layout{display:grid;grid-template-columns:clamp(270px,26vw,320px) minmax(0,1fr);gap:1.5rem;flex:1 1 0;min-width:0;min-height:0}.cbg-rail{overflow:auto;padding:2px;scrollbar-width:thin}.cbg-controls,.cbg-playback{display:flex;flex-direction:column;gap:.5rem;min-width:0}.cbg-label-row{display:flex;align-items:center;justify-content:space-between;gap:.4rem}.cbg-primary-row{display:flex;gap:.5rem}.cbg-primary-row button{flex:1}#cbg-status{display:block;height:3.8em;min-height:3.8em;overflow:auto;margin:0;padding:.25rem;font-size:.8rem;line-height:1.2}.cbg-section-label{font-size:.78rem;font-weight:700;color:var(--color-primary);text-transform:uppercase;letter-spacing:.04em}.cbg-presets{display:flex;flex-direction:column;gap:.55rem}.cbg-preset-btns{display:flex;flex-wrap:wrap;gap:.4rem;max-height:8rem;overflow:auto;padding:2px}.cbg-preset{min-height:32px;padding:.32rem .78rem;background:var(--color-surface-muted);color:var(--color-text-secondary);border:0;border-radius:var(--radius-pill);cursor:pointer;font-size:.82rem;font-weight:700;box-shadow:inset 0 0 0 1px var(--color-border-soft);transition:background-color var(--transition-fast),color var(--transition-fast),box-shadow var(--transition-fast),transform var(--transition-fast)}@media(hover:hover){.cbg-preset:hover{color:var(--color-primary);background:var(--color-surface);box-shadow:inset 0 0 0 1px color-mix(in oklch,var(--color-primary) 45%,transparent)}}.cbg-preset:active{transform:scale(.96)}.cbg-preset--active{background:var(--color-primary-light);color:var(--color-primary);box-shadow:inset 0 0 0 1px color-mix(in oklch,var(--color-primary) 60%,transparent)}.cbg-main{display:flex;flex-direction:column;gap:.75rem;min-width:0;min-height:0}.cbg-curve-card{flex:1 1 0;min-height:0}.cbg-animation-card{flex:none}.cbg-card{background:var(--color-surface);border-radius:var(--radius-lg);box-shadow:var(--shadow-card),inset 0 0 0 1px var(--color-border-soft);padding:.95rem 1rem 1.05rem;display:flex;flex-direction:column;gap:.65rem}.cbg-card-head{display:flex;justify-content:space-between;align-items:center}.cbg-canvas-wrap{flex:1 1 0;min-height:180px;overflow:auto;container-type:size;scrollbar-width:thin}.cbg-canvas-space{--cbg-canvas-size: min( calc(100cqw - 2rem) , calc(100cqh - 2rem) );width:var(--cbg-canvas-size);margin-inline:auto;padding-top:calc(var(--cbg-canvas-size) + 1rem);padding-bottom:calc(var(--cbg-canvas-size) * 2 + 1rem);box-sizing:content-box}.cbg-canvas{display:block;width:100%;height:auto;aspect-ratio:1 / 1;color:var(--color-primary);background:var(--color-bg-secondary);border-radius:var(--radius-md);box-shadow:inset 0 0 0 1px var(--color-border-soft);touch-action:none;overflow:visible}.cbg-curve{stroke:var(--color-primary);transition:d .06s linear}.cbg-handle{fill:var(--color-primary);stroke:var(--color-bg);stroke-width:2;cursor:grab;transition:r .12s ease,fill .12s ease}.cbg-handle:hover{r:11}.cbg-handle--active{cursor:grabbing;r:11;fill:var(--color-primary-hover)}.cbg-anchor{fill:var(--color-text-muted)}.cbg-hint{font-size:.78rem;color:var(--color-text-muted);margin:0}.cbg-track{position:relative;width:100%;height:90px;background:var(--color-bg-secondary);border-radius:var(--radius-md);box-shadow:inset 0 0 0 1px var(--color-border-soft);overflow:hidden;display:flex;align-items:center;padding:0 1rem}.cbg-ball{width:36px;height:36px;border-radius:50%;background:var(--color-primary);box-shadow:0 2px 6px #4b362138,inset 0 1px #fff3;transform:translate(0);flex-shrink:0}.cbg-duration-row{display:flex;align-items:center;gap:.5rem}.cbg-duration{max-width:130px}.cbg-unit{font-size:.85rem;color:var(--color-text-muted)}.cbg-play{min-width:96px}.cbg-loop-toggle{display:inline-flex;align-items:center;gap:.35rem;font-size:.85rem;color:var(--color-text-secondary);cursor:pointer}.cbg-loop-toggle input{accent-color:var(--color-primary)}.cbg-numbers{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:.5rem}.cbg-num-group{display:flex;flex-direction:column;gap:.4rem;padding:.5rem;background:var(--color-bg-secondary);border-radius:var(--radius-md);box-shadow:inset 0 0 0 1px var(--color-border-soft)}.cbg-num-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:.4rem}.cbg-num-label{display:flex;flex-direction:column;min-width:0;gap:.2rem;font-size:.85rem;font-weight:600;color:var(--color-text-secondary)}.cbg-num{flex:1;min-width:0;padding-inline:.3rem;font-size:.82rem;appearance:textfield}.cbg-num::-webkit-inner-spin-button,.cbg-num::-webkit-outer-spin-button{appearance:none;margin:0}.cbg-output{display:flex;flex-direction:column;gap:.6rem}.cbg-format-tabs{display:inline-flex;gap:.3rem;padding:.18rem;background:var(--color-bg-secondary);border-radius:var(--radius-pill);box-shadow:inset 0 0 0 1px var(--color-border-soft)}.cbg-format{min-height:28px;padding:.2rem .85rem;background:transparent;color:var(--color-text-secondary);border:0;border-radius:var(--radius-pill);cursor:pointer;font-size:.78rem;font-weight:700;transition:background-color var(--transition-fast),color var(--transition-fast)}.cbg-format--active{background:var(--color-surface);color:var(--color-primary);box-shadow:inset 0 0 0 1px color-mix(in oklch,var(--color-primary) 45%,transparent)}.cbg-output-pre{height:11rem;flex:none;margin:0;padding:.85rem 1rem;background:var(--color-bg-secondary);border-radius:var(--radius-md);box-shadow:inset 0 0 0 1px var(--color-border-soft);font-family:var(--font-mono);font-size:.85rem;color:var(--color-text);overflow:auto}.cbg-output-pre code{background:transparent;color:inherit;font-family:inherit;white-space:pre-wrap;overflow-wrap:anywhere}@media(max-width:860px){.cbg-layout{grid-template-columns:minmax(0,1fr);flex:none;gap:.75rem}.cbg-rail{display:contents}.cbg-presets{order:1}.cbg-controls{order:2}.cbg-main{order:3}.cbg-curve-card{flex:none}.cbg-output{order:4}.cbg-preset-btns{flex-wrap:nowrap;max-height:none;overflow-x:auto}.cbg-preset{flex-shrink:0}.cbg-canvas-wrap{height:360px;min-height:0;flex:none}.cbg-track{height:80px}.cbg-ball{width:32px;height:32px}}@media(max-width:640px){.cbg-layout{gap:.5rem}.cbg-card{padding:.75rem}.cbg-num,.cbg-duration,.cbg-format,.cbg-preset{min-height:44px}.cbg-canvas-wrap{height:300px}}