:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--ink:#f3fbfb;--ink-muted:#e1f2f19e;--ink-faint:#e1f2f161;--ocean-950:#031014;--aqua:#8df0e4;--aqua-bright:#c9fff8;--violet:#a89bff;--glass:#c5f4ef11;--glass-strong:#c5f4ef1a;--stroke:#cef7f31f;--stroke-bright:#cef7f33d;--focus:#8df0e4;--radius-medium:1.25rem;--radius-xlarge:2.75rem;--shadow:0 28px 90px #00000052;--ease-out:cubic-bezier(.16, 1, .3, 1);--ease-water:cubic-bezier(.2, .72, .2, 1);--page-gutter:clamp(1rem, 4vw, 4.5rem);--content-width:88rem}*,:before,:after{box-sizing:border-box}html{scroll-behavior:smooth}body{min-width:20rem;color:var(--ink);background:radial-gradient(circle at 50% -15%, #419c9f2e, transparent 36rem), linear-gradient(155deg, #071a20 0%, var(--ocean-950) 48%, #041216 100%);-webkit-font-smoothing:antialiased;margin:0;font-family:-apple-system,BlinkMacSystemFont,SF Pro Display,Segoe UI,sans-serif;line-height:1.5;overflow-x:hidden}button,input{font:inherit}button,a,input{-webkit-tap-highlight-color:transparent}button{color:inherit}a{color:inherit;text-decoration:none}::selection{color:#062027;background:var(--aqua)}:focus-visible{outline:2px solid var(--focus);outline-offset:3px}.sr-only{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.ambient{z-index:-1;pointer-events:none;filter:blur(5rem);opacity:.1;border-radius:50%;width:30rem;height:30rem;position:fixed}.ambient--one{background:var(--aqua);top:22%;left:-18rem}.ambient--two{background:var(--violet);top:62%;right:-20rem}.site-header{z-index:20;padding:1.25rem var(--page-gutter) 0;position:relative}.nav-shell{width:min(100%, var(--content-width));-webkit-backdrop-filter:blur(24px)saturate(140%);backdrop-filter:blur(24px)saturate(140%);background:#0413187a;border:1px solid #cdf8f417;border-radius:1.35rem;justify-content:space-between;align-items:center;min-height:4rem;margin:0 auto;padding:.65rem .75rem .65rem 1.15rem;display:flex;box-shadow:0 12px 50px #0000001f}.brand{letter-spacing:-.015em;align-items:center;gap:.7rem;font-size:.95rem;font-weight:650;display:inline-flex}.brand-mark{place-items:center;width:1.4rem;height:1.4rem;display:grid;position:relative}.brand-mark span{border:1px solid var(--aqua);border-radius:50%;position:absolute}.brand-mark span:first-child{background:var(--aqua);width:.35rem;height:.35rem}.brand-mark span:nth-child(2){opacity:.7;width:.85rem;height:.85rem}.brand-mark span:nth-child(3){opacity:.3;width:1.35rem;height:1.35rem}.nav-actions{align-items:center;gap:.45rem;display:flex}.language-picker,.theme-toggle,.sound-toggle{letter-spacing:.02em;cursor:pointer;background:var(--glass-strong);border:1px solid var(--stroke);border-radius:.9rem;align-items:center;gap:.6rem;min-height:2.7rem;padding:.65rem 1rem;font-size:.75rem;font-weight:600;transition:background .22s,border-color .22s,transform .22s;display:inline-flex}.language-picker{padding:0 .75rem}.language-picker:hover,.theme-toggle:hover,.sound-toggle:hover{border-color:var(--stroke-bright);background:#c5f4ef26}.theme-toggle:active,.sound-toggle:active{transform:scale(.97)}.language-icon{color:var(--aqua);font-size:.8rem}.language-picker select{max-width:5.2rem;color:var(--ink);cursor:pointer;background:0 0;border:0;outline:0;padding:0}.language-picker:has(select:focus-visible){outline:2px solid var(--focus);outline-offset:3px}.language-picker option{color:#092329;background:#eff8f6}.theme-toggle{justify-content:center;min-width:5.1rem}.theme-icon{width:.9rem;height:.9rem;color:var(--aqua);place-items:center;display:grid}.theme-icon:before{content:"☀";font-size:.9rem;line-height:1}html[data-theme=light] .theme-icon:before{content:"◐"}.sound-icon{align-items:center;gap:2px;height:.85rem;display:flex}.sound-icon span{background:var(--aqua);border-radius:99px;width:2px;animation:1.1s ease-in-out infinite alternate sound-bar}.sound-icon span:first-child{height:40%}.sound-icon span:nth-child(2){height:100%;animation-delay:-.5s}.sound-icon span:nth-child(3){height:65%;animation-delay:-.25s}.sound-toggle[aria-pressed=false] .sound-icon span{height:2px;animation-play-state:paused}main{width:min(100%, var(--content-width));padding:0 var(--page-gutter);margin:0 auto}.hero{text-align:center;padding:clamp(4.25rem,7vw,6.25rem) 0 clamp(2.5rem,4vw,3.5rem)}.eyebrow{color:var(--aqua);text-transform:uppercase;letter-spacing:.2em;margin:0 0 1.1rem;font-size:.7rem;font-weight:650}.hero h1{letter-spacing:-.075em;text-wrap:balance;background:linear-gradient(155deg,#fff 15%,#bce9e5 58%,#829c9f 100%);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;max-width:12ch;margin:0 auto;font-size:clamp(3.75rem,8.25vw,7.45rem);font-weight:580;line-height:.86}.hero-copy{max-width:38rem;color:var(--ink-muted);text-wrap:balance;margin:2.15rem auto 0;font-size:clamp(1rem,1.5vw,1.18rem)}.key-hint,kbd{min-width:1.6em;min-height:1.6em;color:var(--ink);background:#ffffff17;border:1px solid #ffffff21;border-radius:.42rem;place-items:center;font-family:inherit;font-size:.72em;font-weight:650;display:inline-grid;box-shadow:inset 0 -2px #0003}.instrument-shell{border:1px solid var(--stroke);border-radius:var(--radius-xlarge);box-shadow:var(--shadow);-webkit-backdrop-filter:blur(28px);backdrop-filter:blur(28px);background:#c0f4ef0b;padding:.7rem;position:relative;overflow:hidden}.water-field{cursor:crosshair;touch-action:none;-webkit-user-select:none;user-select:none;border-radius:calc(var(--radius-xlarge) - .45rem);isolation:isolate;background:radial-gradient(circle at 50% 42%,#52dfd417,#0000 30%),linear-gradient(155deg,#0b343dd6,#03161cf5);border:1px solid #d5fffa14;outline:none;min-height:clamp(26rem,58vw,43rem);position:relative;overflow:hidden}.water-field:before{z-index:-1;content:"";background-image:linear-gradient(#b1f4ee06 1px,#0000 1px),linear-gradient(90deg,#b1f4ee06 1px,#0000 1px);background-size:4.5rem 4.5rem;position:absolute;inset:0;-webkit-mask-image:radial-gradient(circle,#000,#0000 78%);mask-image:radial-gradient(circle,#000,#0000 78%)}.water-field:after{z-index:10;pointer-events:none;content:"";border-radius:inherit;position:absolute;inset:0;box-shadow:inset 0 0 90px #00000047,inset 0 1px #ffffff0d}.water-field:focus-visible{box-shadow:inset 0 0 0 2px var(--aqua)}.water-field.is-playing{cursor:none}.water-depth{aspect-ratio:1;pointer-events:none;background:radial-gradient(circle,#91f1e71a,#5a9ac109 38%,#0000 66%);border-radius:50%;width:46rem;animation:8s ease-in-out infinite alternate water-breathe;position:absolute;top:-18%;left:50%;transform:translate(-50%)}.water-line{pointer-events:none;opacity:.18;background:linear-gradient(90deg, transparent, var(--aqua), transparent);filter:blur(.5px);width:120%;height:1px;position:absolute;left:-10%}.water-line--one{top:34%;transform:rotate(-3deg)}.water-line--two{opacity:.09;top:70%;transform:rotate(2deg)}.first-touch{z-index:4;pointer-events:none;color:#e2fffcb8;width:10rem;height:10rem;transition:opacity .6s var(--ease-out), transform .6s var(--ease-out);place-items:center;display:grid;position:absolute;top:38%;left:50%;transform:translate(-50%,-50%)}.first-touch span:last-child{text-transform:uppercase;letter-spacing:.16em;width:max-content;font-size:.68rem;font-weight:600;position:absolute;top:calc(50% + 3.2rem)}.first-touch-ring,.first-touch-core{border-radius:50%;position:absolute}.first-touch-ring{width:5.2rem;height:5.2rem;animation:invite 2.8s var(--ease-water) infinite;border:1px solid #a6f6ee52;box-shadow:0 0 50px #5fecde1f}.first-touch-core{background:var(--aqua-bright);width:.65rem;height:.65rem;box-shadow:0 0 1.5rem var(--aqua)}.water-field.has-played .first-touch{opacity:0;transform:translate(-50%,-50%)scale(1.3)}.axis-label{z-index:2;color:#cdefed42;pointer-events:none;letter-spacing:.18em;font-size:.56rem;font-weight:650;position:absolute}.axis-label--low{bottom:1.5rem;left:1.5rem}.axis-label--high{bottom:1.5rem;right:1.5rem}.axis-label--bright{top:1.5rem;left:1.5rem}.axis-label--soft{bottom:1.5rem;left:50%;transform:translate(-50%)}.memory-layer{z-index:2;pointer-events:none;width:100%;height:100%;position:absolute;inset:0;overflow:visible}.memory-path{fill:none;stroke:#96efe757;stroke-width:1.45px;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1px;vector-effect:non-scaling-stroke;filter:drop-shadow(0 0 5px #6dece02e);animation:memory-draw .78s var(--ease-out) forwards, memory-decay 10.5s linear forwards;transition:opacity .6s,stroke .26s,stroke-width .26s,filter .26s}.memory-path.is-awake{stroke:#d2fffae6;stroke-width:2.7px;filter:drop-shadow(0 0 12px #87f9edb8)}.memory-path.is-leaving{opacity:0}.memory-meter{z-index:6;pointer-events:none;-webkit-backdrop-filter:blur(16px)saturate(135%);backdrop-filter:blur(16px)saturate(135%);background:#03161c7a;border:1px solid #cbfaf51a;border-radius:.9rem;align-items:center;gap:.65rem;min-width:8.6rem;padding:.65rem .78rem;display:flex;position:absolute;top:1.25rem;right:1.25rem;box-shadow:0 10px 30px #0000001f}.memory-meter>span:last-child{gap:.08rem;display:grid}.memory-meter strong{color:#e5fffccc;text-transform:uppercase;letter-spacing:.12em;font-size:.58rem;font-weight:650}.memory-meter small{color:#d9f5f26b;letter-spacing:.03em;font-size:.54rem}.memory-orbit{border:1px solid #8df0e447;border-radius:50%;width:1.35rem;height:1.35rem;position:relative}.memory-orbit:before,.memory-orbit:after,.memory-orbit span{content:"";border-radius:50%;position:absolute}.memory-orbit:before{border:1px solid #8df0e480;inset:.26rem}.memory-orbit:after{background:var(--aqua);box-shadow:0 0 .65rem var(--aqua);inset:.52rem}.memory-orbit span{border-top:1px solid #cafff994;animation:4.5s linear infinite memory-orbit;inset:-.12rem}.ripple{z-index:3;pointer-events:none;width:2rem;height:2rem;animation:ripple-out 1.45s var(--ease-water) forwards;border:1px solid #bcfff8b8;border-radius:50%;position:absolute;transform:translate(-50%,-50%)scale(.2);box-shadow:0 0 1.5rem #72f2e63d,inset 0 0 1rem #72f2e61f}.ripple:after{content:"";background:var(--aqua-bright);width:.38rem;height:.38rem;box-shadow:0 0 1.2rem var(--aqua);border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.ripple--memory{border-color:#b7aaff9e;box-shadow:0 0 1.5rem #a89bff47}.ripple--memory:after{width:.25rem;height:.25rem;box-shadow:0 0 1.1rem var(--violet);background:#d7d0ff}.playhead{z-index:5;pointer-events:none;background:#eafffc;border:3px solid #91f2e880;border-radius:50%;width:1rem;height:1rem;transition:left 70ms linear,top 70ms linear;position:absolute;transform:translate(-50%,-50%);box-shadow:0 0 0 .55rem #8df0e414,0 0 2.8rem #8df0e485}.instrument-footer{padding:.85rem .35rem .25rem}.note-bank{grid-template-columns:repeat(8,minmax(0,1fr));gap:.45rem;display:grid}.note-pad{cursor:pointer;background:#d7fbf80b;border:1px solid #d7fbf814;border-radius:1rem;min-width:0;min-height:4.75rem;padding:.7rem;transition:background .22s,border-color .22s,transform .16s,box-shadow .22s;display:flex;position:relative;overflow:hidden}.note-pad:before{content:"";opacity:0;background:radial-gradient(circle at 50% 110%,#8df0e44d,#0000 58%);transition:opacity .22s;position:absolute;inset:0}.note-pad:hover{background:#d7fbf816;border-color:#d7fbf82b}.note-pad.is-active{background:#97ede524;border-color:#a9faf261;transform:translateY(2px)scale(.985);box-shadow:0 8px 24px #36b9ae1f}.note-pad.is-active:before{opacity:1}.note-pad-key{z-index:1;color:var(--ink-faint);font-size:.62rem;font-weight:650;position:relative}.note-pad-name{z-index:1;align-self:flex-end;margin-left:auto;font-size:1.1rem;font-weight:520;position:relative}.note-pad sup{z-index:1;color:var(--ink-muted);align-self:flex-end;margin-bottom:.8rem;font-size:.48rem;position:relative}.status-row{color:var(--ink-faint);letter-spacing:.03em;justify-content:space-between;align-items:center;padding:1rem .3rem .45rem;font-size:.67rem;display:flex}.now-playing{align-items:center;gap:.55rem;display:inline-flex}.status-dot{background:#baddda4d;border-radius:50%;width:.35rem;height:.35rem;transition:background .2s,box-shadow .2s}.now-playing.is-live .status-dot{background:var(--aqua);box-shadow:0 0 .75rem var(--aqua)}.input-note{margin:0}.control-deck{padding:clamp(5.5rem,10vw,9rem) 0 clamp(5rem,9vw,8rem)}.control-heading{justify-content:space-between;align-items:flex-end;gap:3rem;margin-bottom:2.2rem;display:flex}.control-heading h2{letter-spacing:-.055em;margin:0;font-size:clamp(2.4rem,5vw,4rem);font-weight:560;line-height:1}.control-heading>p{max-width:23rem;color:var(--ink-muted);margin:0;font-size:.9rem}.control-grid{grid-template-columns:repeat(6,minmax(0,1fr));gap:.75rem;display:grid}.mood-control,.range-control,.accessibility-control{background:var(--glass);border:1px solid var(--stroke);border-radius:var(--radius-medium);min-width:0;min-height:10rem;padding:1.35rem}.mood-control{margin:0}.mood-control,.range-control--volume,.accessibility-control{grid-column:span 2}.range-control--wide{grid-column:span 3}.mood-control legend,.accessibility-control legend,.range-meta{width:100%;color:var(--ink-muted);text-transform:uppercase;letter-spacing:.14em;justify-content:space-between;margin-bottom:2.3rem;padding:0;font-size:.68rem;font-weight:620;display:flex}.segmented-control{background:#010d117a;border:1px solid #dbfffb0f;border-radius:.9rem;grid-template-columns:repeat(3,1fr);gap:.3rem;padding:.3rem;display:grid}.segmented-control input{opacity:0;width:1px;height:1px;position:absolute}.segmented-control label{color:var(--ink-muted);text-align:center;cursor:pointer;border:1px solid #0000;border-radius:.65rem;padding:.65rem .4rem;font-size:.74rem;transition:color .18s,background .18s,border-color .18s}.segmented-control input:checked+label{color:var(--ink);background:#d4fcf81c;border-color:#d4fcf817;box-shadow:0 3px 12px #0000002e}.segmented-control input:focus-visible+label{outline:2px solid var(--aqua);outline-offset:2px}.range-control{display:block}.range-meta output{font-variant-numeric:tabular-nums;color:var(--aqua)}.range-control input{cursor:pointer;appearance:none;background:0 0;width:100%;height:1.5rem;margin:0}.range-control input::-webkit-slider-runnable-track{background:linear-gradient(90deg,#8df0e4c7,#b1f4ee24);border-radius:99px;height:2px}.range-control input::-webkit-slider-thumb{appearance:none;background:#d9fffb;border:4px solid #4d7778;border-radius:50%;width:1rem;height:1rem;margin-top:-.45rem;box-shadow:0 0 0 .35rem #8df0e414,0 0 1rem #8df0e447}.range-control input::-moz-range-track{background:#b1f4ee2e;border-radius:99px;height:2px}.range-control input::-moz-range-progress{background:#8df0e4c7;border-radius:99px;height:2px}.range-control input::-moz-range-thumb{background:#d9fffb;border:4px solid #4d7778;border-radius:50%;width:.65rem;height:.65rem}.range-scale{color:var(--ink-faint);justify-content:space-between;margin-top:.8rem;font-size:.6rem;display:flex}.accessibility-control{margin:0}.accessibility-control legend{margin-bottom:1.25rem}.switch-row{min-height:2.45rem;color:var(--ink-muted);cursor:pointer;justify-content:space-between;align-items:center;gap:1rem;font-size:.75rem;display:flex}.switch-row+.switch-row{border-top:1px solid var(--stroke)}.switch-row input{cursor:pointer;appearance:none;border:1px solid var(--stroke-bright);background:#c3e2df29;border-radius:99px;flex:none;width:2.35rem;height:1.3rem;margin:0;transition:background .18s,border-color .18s;position:relative}.switch-row input:after{content:"";background:var(--ink-muted);width:.82rem;height:.82rem;transition:transform .18s var(--ease-out), background .18s ease;border-radius:50%;position:absolute;top:.18rem;left:.18rem}.switch-row input:checked{border-color:var(--aqua);background:#48ccbe6b}.switch-row input:checked:after{background:var(--aqua-bright);transform:translate(1rem)}html[data-theme=light]{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;--ink:#082c31;--ink-muted:#082c31a8;--ink-faint:#082c3170;--glass:#ffffff94;--glass-strong:#ffffffb8;--stroke:#14505221;--stroke-bright:#14505240;--focus:#087c75}html[data-theme=light] body{background:radial-gradient(circle at 50% -15%,#4fbeb538,#0000 36rem),linear-gradient(155deg,#f4f9f8 0%,#e7f1ef 48%,#f8fbfa 100%)}html[data-theme=light] .nav-shell{background:#f9fdfcb3;border-color:#1450521a;box-shadow:0 12px 50px #12404114}html[data-theme=light] .hero h1{background:linear-gradient(155deg,#082c31 15%,#26716f 58%,#6a8886 100%);-webkit-background-clip:text;background-clip:text}html[data-theme=light] .instrument-shell{background:#ffffff80;box-shadow:0 28px 90px #24555429}html[data-theme=light] .note-pad{background:#09484b0b;border-color:#09484b17}html[data-theme=light] .note-pad:hover{background:#09484b14}html[data-theme=light] .segmented-control{background:#07373a13}html[data-theme=light] .segmented-control input:checked+label{background:#ffffffd1;border-color:#09484b1a}html[data-theme=light] .range-control input::-webkit-slider-thumb{background:#f4fffd;border-color:#4b8d89}html[data-theme=light] .memory-meter{background:#f1fcf9a3;border-color:#125a581f;box-shadow:0 10px 30px #1c5d5b1a}html[data-theme=light] .memory-meter strong{color:#e2fffce0}html[data-theme=light] .memory-meter small{color:#d7f6f299}html.high-contrast{--ink:#fff;--ink-muted:#ffffffeb;--ink-faint:#ffffffbf;--stroke:#ffffff52;--stroke-bright:#ffffff94}html[data-theme=light].high-contrast{--ink:#001b1d;--ink-muted:#001b1de0;--ink-faint:#001b1db3;--stroke:#001b1d4d;--stroke-bright:#001b1d8c}html.high-contrast .water-field{border-color:#c9fff9a3}html.high-contrast .axis-label{color:#e9fffccc}html.high-contrast .memory-path{stroke:#ebfffcc7}.site-footer{width:min(100% - 2 * var(--page-gutter), var(--content-width));color:var(--ink-faint);border-top:1px solid var(--stroke);justify-content:space-between;align-items:center;margin:0 auto;padding:1.5rem 0 2.5rem;font-size:.65rem;display:flex}.site-footer p{margin:0}.site-footer kbd{margin:0 .18rem}@keyframes sound-bar{0%{transform:scaleY(.45)}to{transform:scaleY(1)}}@keyframes water-breathe{0%{opacity:.55;transform:translate(-50%)scale(.92)}to{opacity:1;transform:translate(-50%)scale(1.08)}}@keyframes invite{0%,to{opacity:.34;transform:scale(.78)}55%{opacity:.82;transform:scale(1.15)}}@keyframes ripple-out{0%{opacity:0;transform:translate(-50%,-50%)scale(.2)}16%{opacity:1}to{opacity:0;transform:translate(-50%,-50%)scale(7)}}@keyframes memory-draw{to{stroke-dashoffset:0}}@keyframes memory-decay{0%,68%{opacity:.7}to{opacity:.06}}@keyframes memory-orbit{to{transform:rotate(360deg)}}@media (width<=52rem){.hero{padding-top:4.75rem}.hero h1{font-size:clamp(4rem,16vw,6.5rem)}.instrument-shell{border-radius:2rem}.water-field{border-radius:1.55rem;min-height:31rem}.note-bank{grid-template-columns:repeat(4,1fr)}.note-pad{min-height:3.9rem}.control-grid{grid-template-columns:1fr}.mood-control,.range-control,.accessibility-control{grid-column:auto;min-height:auto}}@media (width<=37rem){:root{--page-gutter:.85rem}.site-header{padding-top:.75rem}.nav-shell{border-radius:1.05rem;min-height:3.55rem;padding-left:.9rem}.nav-actions{gap:.3rem}.language-picker{min-height:2.35rem;padding:0 .55rem}.language-picker select{max-width:3.3rem;font-size:.68rem}.language-icon{display:none}.theme-toggle,.sound-toggle{min-width:2.35rem;min-height:2.35rem;padding:.5rem}#theme-label,#sound-label{clip:rect(0, 0, 0, 0);width:1px;height:1px;position:absolute;overflow:hidden}.hero{padding:4rem 0 2.6rem}.hero h1{font-size:clamp(3.55rem,20vw,5.4rem)}.hero-copy{max-width:20rem;margin-top:1.6rem;font-size:.92rem}.instrument-shell{border-radius:1.55rem;padding:.45rem}.water-field{border-radius:1.2rem;min-height:26rem}.axis-label--soft{display:none}.first-touch{top:42%}.memory-meter{min-width:auto;padding:.55rem;top:.85rem;right:.85rem}.memory-meter strong{display:none}.memory-meter small{font-size:.5rem}.note-bank{gap:.35rem}.note-pad{border-radius:.75rem;min-height:3.35rem;padding:.55rem}.note-pad-name{font-size:.92rem}.note-pad sup{margin-bottom:.55rem}.status-row{padding-inline:.1rem}.input-note{display:none}.control-deck{padding:5rem 0 4.5rem}.control-heading{display:block}.control-heading>p{margin-top:1rem}.control-heading h2{font-size:2.8rem}.site-footer{text-align:center;display:block}.site-footer p+p{margin-top:.75rem}}@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}html.reduce-motion,html.reduce-motion *,html.reduce-motion :before,html.reduce-motion :after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}@media (prefers-reduced-motion:reduce){.memory-path{opacity:.42;animation:none!important}}html.reduce-motion .memory-path{opacity:.42;animation:none!important}html.reduce-motion .memory-orbit span{animation:none!important}