:root{--blue:#1a3f6f;--pink:#f27291;--base:#d2e5c9}*{box-sizing:border-box}body{margin:0;background:var(--base);color:var(--blue);font-family:Helvetica,Arial,sans-serif}main{max-width:1600px;margin:auto}.art-scroll{overflow-x:auto}.art{position:relative;width:100%;min-width:900px;aspect-ratio:1440/1024}.art>svg{width:100%;height:100%;display:block}.flower-hit,.start-hit{position:absolute;background:none;border:0;cursor:pointer;border-radius:50%;padding:0;touch-action:manipulation}.flower-hit:hover{outline:1px dashed var(--blue);outline-offset:-7px}.flower-hit:focus-visible,.start-hit:focus-visible{outline:3px solid var(--pink);outline-offset:2px}.start-hit{left:37.22%;top:86.13%;width:25.56%;height:7.43%;border-radius:60px}.start-hit[aria-pressed=true]{outline:2px solid var(--pink);outline-offset:-5px}.art-range{position:absolute;margin:0;opacity:0;cursor:ew-resize;touch-action:none}.art-range.vertical{writing-mode:vertical-lr;direction:rtl;cursor:ns-resize}.art:has(.art-range:focus-visible) .art-range:focus-visible{opacity:.35;accent-color:var(--pink)}.transport{display:flex;gap:18px;align-items:center;flex-wrap:wrap;padding:18px 28px;border-top:1px solid var(--blue)}button,input{font:inherit;color:inherit}button{background:transparent;border:1px solid var(--blue);border-radius:24px;padding:11px 20px;cursor:pointer}button[aria-pressed=true]{background:var(--pink)}button:disabled{opacity:.4;cursor:default}input[type=range]{accent-color:var(--blue)}.transport label{display:flex;gap:12px;align-items:center}.transport #status{font-size:14px}.mixer{padding:20px 28px 35px;border-top:1px solid var(--blue)}summary{cursor:pointer;font-size:20px}.mixer p{font-size:14px;line-height:1.5}#channels{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.channel{padding:16px;border:1px solid var(--blue);border-radius:18px}.channel h2{font-size:16px;font-weight:500;margin:0 0 8px}.chain{font-size:12px;margin-bottom:15px}.channel-controls{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.channel label{font-size:12px;display:flex;flex-direction:column;gap:6px}.channel input{width:100%}.channel label span{display:flex;justify-content:space-between}.channel .mute{font-size:12px;padding:8px 15px;margin-top:12px}.channel output{font-variant-numeric:tabular-nums}@media(max-width:760px){#channels{grid-template-columns:1fr}.transport,.mixer{padding:16px}.channel-controls{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}
/* The hit area stays invisible; selection is painted on the SVG petals only. */
.flower-hit,.flower-hit:hover,.flower-hit[aria-pressed=true],.flower-hit:active,.start-hit,.start-hit:hover,.start-hit[aria-pressed=true]{background:transparent}

/* Original gradient covers the full viewport and remains behind the mixer. */
html{min-height:100%;background:#b5decc}body{min-height:100vh;background:linear-gradient(180deg,#F9FF82 0%,#B5DECC 100%);background-attachment:fixed;background-repeat:no-repeat;background-size:100% 100vh}