.canvas-host.svelte-r2xcee{justify-content:center;align-items:center;width:100%;height:100%;min-height:0;display:flex}canvas.svelte-r2xcee{background:var(--sheet-fill,var(--canvas));border-radius:var(--radius-sheet);touch-action:none;outline:none;display:block}canvas.svelte-r2xcee:focus-visible{box-shadow:0 0 0 1px var(--muted)}.topbar{grid-area:top;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;display:grid}.topbar-actions{justify-self:end;align-items:center;gap:0;display:flex}.backdrops{align-items:center;gap:8px;display:flex}.backdrop-swatch{width:24px;height:24px;box-shadow:inset 0 0 0 1px var(--muted);outline-offset:3px;border-radius:50%;padding:0}.backdrop-swatch.selected{box-shadow:inset 0 0 0 var(--select) var(--ink)}.backdrop-swatch[data-kind=paper]{background:var(--canvas)}.backdrop-swatch[data-kind=dots]{background:radial-gradient(circle, #a9ad99 1px, transparent 1.4px) 0 0 / 6px 6px, var(--canvas)}.backdrop-swatch[data-kind=grid]{background:linear-gradient(#b9bdaa 1px, transparent 1px) 0 0 / 6px 6px, linear-gradient(90deg, #b9bdaa 1px, transparent 1px) 0 0 / 6px 6px, var(--canvas)}.backdrop-swatch[data-kind=field]{background:linear-gradient(#dbe7ea 46%,#e6cf8c 46%)}.backdrop-swatch[data-kind=clouds]{background:radial-gradient(circle at 30% 60%,#fff 0 22%,#0000 24%),radial-gradient(circle at 55% 45%,#fff 0 26%,#0000 28%),radial-gradient(circle at 76% 62%,#fff 0 18%,#0000 20%),#c4dbe8}.backdrop-swatch[data-kind=dusk]{background:linear-gradient(#e3c6cf,#f4d3b0 60%,#f6e5bf)}.backdrop-swatch[data-kind=lake]{background:linear-gradient(#e4ecea 40%,#a9cfd0 40%)}.wordmark{letter-spacing:-.8px;font-size:20px;font-weight:500}.icon-button{min-width:44px;min-height:44px;color:var(--secondary);justify-content:center;align-items:center;display:flex}.side-switch{margin-right:-12px}.icon-button:hover{color:var(--ink)}@media (width<=800px){.side-switch{display:none}.wordmark{font-size:18px}}@media (width<=400px){.topbar{grid-template-columns:auto 1fr auto;gap:8px}.backdrops{justify-self:center;gap:4px}.backdrop-swatch{width:22px;height:22px}.topbar-actions .icon-button{min-width:32px;margin-right:-6px}}.about-sheet{border:1px solid var(--ink);border-radius:var(--radius-sheet);background:var(--canvas);color:var(--ink);text-align:center;margin:auto;padding:32px 40px;font-size:13px}.about-sheet::backdrop{background:color-mix(in srgb, var(--ink) 18%, transparent)}.about-sheet p{margin:0}.about-sheet blockquote{margin:0 0 32px;line-height:1.7}.about-sheet cite{color:var(--secondary);margin-top:12px;font-size:11px;font-style:normal;display:block}.about-sheet .credit{color:var(--secondary);margin-top:12px}.about-sheet a{color:var(--ink);text-underline-offset:3px;text-decoration:underline}.backdrop{border-radius:var(--radius-sheet);background:var(--canvas);position:absolute;inset:0;overflow:hidden}.backdrop[data-kind=dots]{background:radial-gradient(circle, #c3c6b6 1.3px, transparent 1.8px) 0 0 / 24px 24px, var(--canvas)}.backdrop[data-kind=grid]{background:linear-gradient(var(--line) 1px, transparent 1px) 0 0 / 28px 28px, linear-gradient(90deg, var(--line) 1px, transparent 1px) 0 0 / 28px 28px, var(--canvas)}.backdrop:not([data-kind=paper],[data-kind=dots],[data-kind=grid]):after{content:"";background:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='200'%20height='200'%3E%3Cfilter%20id='g'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='.85'%20numOctaves='2'%20stitchTiles='stitch'/%3E%3CfeColorMatrix%20values='0%200%200%200%20.25%200%200%200%200%20.2%200%200%200%200%20.12%200%200%200%20.9%20-.32'/%3E%3C/filter%3E%3Crect%20width='200'%20height='200'%20filter='url(%23g)'/%3E%3C/svg%3E"),radial-gradient(#0000 55%,#6e542821 100%),#fdfdfa38;position:absolute;inset:0}.drift,.sway{display:none;position:absolute}.drift{background:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='1400'%20height='700'%20preserveAspectRatio='none'%3E%3Cfilter%20id='c'%20x='0'%20y='0'%20width='100%25'%20height='100%25'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='.0045%20.009'%20numOctaves='5'%20seed='8'%20stitchTiles='stitch'/%3E%3CfeColorMatrix%20values='0%200%200%200%201%200%200%200%200%201%200%200%200%200%201%203%200%200%200%20-1.35'/%3E%3CfeGaussianBlur%20stdDeviation='2'/%3E%3C/filter%3E%3Crect%20width='1400'%20height='700'%20filter='url(%23c)'/%3E%3C/svg%3E") 0 0/1400px 100% repeat-x;width:calc(100% + 1400px);animation:80s linear infinite drift;inset:0 auto 0 0}.drift.second{opacity:.5;background-size:1400px 140%;animation-duration:140s;animation-delay:-50s}@keyframes drift{to{transform:translate(-1400px)}}.backdrop[data-kind=clouds]{background:linear-gradient(#cbdfeb 0%,#e2edf1 62%,#f3f0e6 100%)}.backdrop[data-kind=clouds] .drift{display:block}.backdrop[data-kind=field]{background:linear-gradient(#d9e7ec 0%,#edf0e4 38%,#f1e4b4 42%,#ead392 100%)}.backdrop[data-kind=field] .drift:not(.second){opacity:.7;display:block;bottom:58%}.backdrop[data-kind=field] .sway{transform-origin:bottom;background:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='900'%20height='400'%20preserveAspectRatio='none'%3E%3ClinearGradient%20id='m'%20x2='0'%20y2='1'%3E%3Cstop%20offset='0'%20stop-color='%23000'/%3E%3Cstop%20offset='.55'%20stop-color='%23fff'/%3E%3C/linearGradient%3E%3Cmask%20id='k'%3E%3Crect%20width='900'%20height='400'%20fill='url(%23m)'/%3E%3C/mask%3E%3Cfilter%20id='s'%20x='0'%20y='0'%20width='100%25'%20height='100%25'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='.16%20.008'%20numOctaves='3'%20seed='4'/%3E%3CfeColorMatrix%20values='0%200%200%200%20.6%200%200%200%200%20.46%200%200%200%200%20.14%201.7%200%200%200%20-.66'/%3E%3C/filter%3E%3Crect%20width='900'%20height='400'%20filter='url(%23s)'%20mask='url(%23k)'/%3E%3C/svg%3E") bottom/100% 100% no-repeat;animation:3.8s ease-in-out infinite alternate sway;display:block;inset:38% -4% 0}.backdrop[data-kind=field] .sway.second{transform-origin:50%;background:linear-gradient(100deg,#0000 20%,#fffade8c 50%,#0000 80%);width:60%;animation:7s ease-in-out infinite gust;inset:40% auto 0 0}@keyframes gust{0%{transform:translate(-110%)}70%,to{transform:translate(190%)}}@keyframes sway{0%{transform:skew(-4deg)}to{transform:skew(4.5deg)}}.backdrop[data-kind=dusk]{background:linear-gradient(#e6cdd6 0%,#f3d9c2 45%,#f7e6c4 72%,#efe2cc 100%)}.backdrop[data-kind=dusk] .sway:not(.second){transform-origin:72% 80%;background:radial-gradient(circle at 72% 80%,#fff6dcf2 0 5%,#ffe4b88c 13%,#0000 32%);animation:4.5s ease-in-out infinite alternate breathe;display:block;inset:0}@keyframes breathe{0%{opacity:.55;transform:scale(1)}to{opacity:1;transform:scale(1.16)}}.firefly{z-index:1;opacity:0;background:#fff3c4;border-radius:50%;width:6px;height:6px;animation:7s ease-in-out infinite firefly;position:absolute;box-shadow:0 0 6px 2px #ffe28cb3}@keyframes firefly{0%,to{opacity:0;transform:translate(0)}35%{opacity:.95}60%{opacity:.2;transform:translate(14px,-18px)}75%{opacity:.8}}.backdrop[data-kind=lake]{background:linear-gradient(#dfe9ea 0%,#f0efe2 42%,#b9d8d8 44%,#9fc9cc 100%)}.backdrop[data-kind=lake] .drift:not(.second){opacity:.6;display:block;bottom:56%}.backdrop[data-kind=lake] .sway{animation-composition:add;background:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='900'%20height='400'%20preserveAspectRatio='none'%3E%3ClinearGradient%20id='m'%20x2='0'%20y2='1'%3E%3Cstop%20offset='0'%20stop-color='%23000'/%3E%3Cstop%20offset='.3'%20stop-color='%23fff'/%3E%3C/linearGradient%3E%3Cmask%20id='k'%3E%3Crect%20width='900'%20height='400'%20fill='url(%23m)'/%3E%3C/mask%3E%3Cfilter%20id='s'%20x='0'%20y='0'%20width='100%25'%20height='100%25'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='.004%20.45'%20numOctaves='3'%20seed='9'%20stitchTiles='stitch'/%3E%3CfeColorMatrix%20values='0%200%200%200%201%200%200%200%200%201%200%200%200%200%201%202.2%200%200%200%20-.95'/%3E%3C/filter%3E%3Crect%20width='900'%20height='400'%20filter='url(%23s)'%20mask='url(%23k)'/%3E%3C/svg%3E") 0 0/900px 100% repeat-x;width:calc(100% + 900px);animation:30s linear infinite glide,3.2s ease-in-out infinite alternate bob;display:block;inset:44% auto 0 0}.backdrop[data-kind=lake] .sway.second{opacity:.5;animation-duration:44s,4.6s;animation-direction:reverse,alternate-reverse;top:50%}@keyframes bob{0%{transform:translateY(-5px)scaleY(.97)}to{transform:translateY(5px)scaleY(1.04)}}.glint{z-index:1;opacity:0;background:#fff;border-radius:2px;width:26px;height:2px;animation:3.4s ease-in-out infinite glint;position:absolute;box-shadow:0 0 5px 1px #fffc}@keyframes glint{0%,to{opacity:0;transform:scaleX(.3)}45%{opacity:.95;transform:scaleX(1)}}@keyframes glide{to{transform:translate(-900px)}}@media (prefers-reduced-motion:reduce){.drift,.sway,.firefly,.glint{animation:none}.firefly{opacity:.6}}.tools{grid-template-columns:44px;gap:6px;display:grid}.tools .tool-button:nth-child(4){margin-top:24px}@media (width>=801px) and (height<=800px){.tools{gap:4px}.tools .tool-button:nth-child(4){margin-top:12px}}@media (width<=800px){.tools{justify-content:space-between;gap:0;display:flex}.tools .tool-button:nth-child(n){flex:none;width:44px;margin-top:0}}.tool-button{border-radius:var(--radius);background:var(--canvas);height:44px;box-shadow:inset 0 0 0 1px var(--line);justify-content:center;align-items:center;gap:10px;padding:0;display:flex;position:relative}.tool-button:hover:not(:disabled){box-shadow:inset 0 0 0 1px var(--ink)}.tool-button:disabled{opacity:1}.tool-button:disabled>:not(.hover-label){opacity:.28}.tool-button.invite{box-shadow:inset 0 0 0 1px var(--ink)}.tool-button.active{background:var(--ink);color:var(--canvas);box-shadow:none}.ink-palette{grid-template-columns:44px;gap:2px;display:grid}.ink-swatch{border-radius:var(--radius);justify-content:center;align-items:center;width:44px;height:36px;padding:0;display:flex;position:relative}.ink-dot{border-radius:50%;flex:none;width:22px;height:22px}.ink-swatch:hover{background:var(--canvas)}.ink-swatch.selected{background:var(--canvas);box-shadow:inset 0 0 0 var(--select) var(--ink)}@media (width>=801px) and (height<=800px){.ink-palette{grid-template-columns:repeat(2,22px);gap:4px 0}.ink-swatch{width:22px;height:30px}.ink-dot{width:16px;height:16px}}@media (width<=800px){.ink-palette{grid-template-columns:repeat(8,minmax(0,1fr));gap:2px}.ink-swatch{width:100%;height:44px}}.transport{flex-wrap:wrap;grid-area:transport;align-items:center;gap:20px 40px;min-width:0;font-size:12px;display:flex}.playback-modes{flex-wrap:wrap;gap:16px 32px;display:flex}.mode-group{align-items:center;gap:12px;min-width:0;display:flex}.mode-label{color:var(--secondary);font-size:11px}.mode-options{gap:6px;display:flex}.mode-options button{background:var(--canvas);width:44px;height:44px;box-shadow:inset 0 0 0 1px var(--line);white-space:nowrap;border-radius:50%;place-items:center;padding:0;font-size:11px;display:grid}.mode-options button:hover{box-shadow:inset 0 0 0 1px var(--ink)}.mode-options button.active{background:var(--ink);color:var(--canvas);box-shadow:none}.playback{flex:none;align-items:center;gap:12px;display:flex}.playback input[type=range]{width:clamp(64px,7vw,112px)}.transport .slider-control{grid-template-columns:auto minmax(0,1fr) auto;width:clamp(124px,12vw,180px);margin-left:auto}.transport .slider-control input[type=range]{order:1;grid-column:auto}.transport .slider-control output{text-align:right;order:2;min-width:28px}.tempo-value{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums;min-width:52px;color:var(--secondary);flex:none;font-size:11px}.play-button{background:var(--ink);width:48px;height:48px;color:var(--canvas);border-radius:50%;flex:none;place-items:center;padding:0;display:grid}.play-button:hover:not(:disabled){background:color-mix(in srgb, var(--ink) 86%, var(--canvas))}@media (width>=801px) and (width<=1100px){.transport .slider-control{grid-template-columns:minmax(0,1fr) auto;width:124px}.transport .slider-control>span{display:none}.playback{gap:8px}.playback input[type=range]{width:80px}}@media (width<=800px){.transport{gap:20px 24px}.playback-modes{flex-basis:100%;order:2;gap:8px 16px}.mode-group{flex-direction:column;align-items:flex-start;gap:8px}.playback{flex:1;gap:8px;min-width:0}.playback input[type=range]{flex:1;width:auto;min-width:36px}.transport .slider-control{flex:0 0 100px;grid-template-columns:minmax(0,1fr) auto;gap:8px;width:100px;margin:0}.transport .slider-control>span{display:none}}.slider-control:has(input:disabled){opacity:.35}input[type=range]:disabled{cursor:default}.slider-control{color:var(--secondary);grid-template-columns:1fr auto;align-items:center;column-gap:12px;display:grid}.slider-control output{font-size:10px}input[type=range]{cursor:pointer;appearance:none;background:0 0;grid-column:1/-1;width:100%;height:36px;margin:0}input[type=range]::-webkit-slider-runnable-track{background:linear-gradient(to right, var(--ink) var(--fill,0%), var(--line) var(--fill,0%));border-radius:3px;height:6px}input[type=range]::-webkit-slider-thumb{appearance:none;background:var(--ink);border-radius:50%;width:18px;height:18px;margin-top:-6px}input[type=range]::-moz-range-track{background:var(--line);border-radius:3px;height:6px}input[type=range]::-moz-range-progress{background:var(--ink);border-radius:3px;height:6px}input[type=range]::-moz-range-thumb{background:var(--ink);border:0;border-radius:50%;width:18px;height:18px}.sound-panel{flex-direction:column;grid-area:sound;gap:20px;min-height:0;font-size:12px;display:flex;overflow:auto}.sound-group{flex-direction:column;gap:16px;display:flex}.sound-group+.sound-group{border-top:1px solid var(--line);padding-top:20px}.sound-group+.sound-group.joined{border-top:0;margin-top:-4px;padding-top:0}.harmony-controls{grid-template-columns:64px minmax(0,1fr);gap:8px;display:grid}.paired-controls{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;display:grid}.rhythm-pair{align-items:end;gap:16px}.rhythm-pair .slider-control{align-content:space-between;min-height:44px}.part-controls{flex-direction:column;gap:16px;display:flex}.part-controls+.part-controls{margin-top:8px}.accompaniment{gap:16px;display:grid}.backing-row{grid-template-columns:72px minmax(0,1fr);align-items:center;gap:8px 16px;display:grid}.backing-row>input[type=range]{grid-column:2}.backing-menus{grid-column:1/-1}.arp-menus{grid-template-columns:104px minmax(0,1fr);gap:8px;display:grid}@media (width<=800px){.sound-panel{gap:24px;padding-top:8px;overflow:visible}}.select-control{min-width:0;color:var(--secondary);flex-direction:column;gap:8px;display:flex}select{font:inherit;color:var(--ink);appearance:none;background:var(--canvas) url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2012%208'%3E%3Cpath%20d='M1.5%201.5l4.500%204.500%204.500-4.500'%20fill='none'%20stroke='%23282724'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 10px center / 10px;border:1px solid var(--line);border-radius:var(--radius,6px);cursor:pointer;width:100%;height:44px;padding:0 26px 0 10px;font-size:11px}select:hover{border-color:var(--ink)}select:focus{box-shadow:none;outline:none}select:focus-visible{border-color:var(--ink)}@media (width<=800px){.select-control select{font-size:16px}}.select-control.compact>span{clip-path:inset(50%);width:1px;height:1px;position:absolute;overflow:hidden}.select-control.compact select{height:36px}.segmented-control{color:var(--secondary);gap:8px;display:grid}.segments{border-radius:var(--radius);background:var(--canvas);grid-auto-columns:minmax(0,1fr);grid-auto-flow:column;height:44px;display:grid;position:relative;overflow:hidden}.segments:after{content:"";border-radius:inherit;box-shadow:inset 0 0 0 1px var(--line);pointer-events:none;position:absolute;inset:0}.segments:hover:after{box-shadow:inset 0 0 0 1px var(--ink)}.segments:focus{outline:none}.segments button{height:100%;color:var(--secondary);white-space:nowrap;box-shadow:inset 1px 0 0 var(--line);border-radius:0;padding:0 2px}.segments button:first-child{box-shadow:none}.segments button:hover{color:var(--ink)}.segments button.active{background:var(--fill);color:var(--ink)}.segments button:focus-visible{outline:1px solid var(--ink);outline-offset:-3px}.segmented-control.compact .segments{height:36px;font-size:11px}.toggle-chip{border-radius:var(--radius);height:44px;color:var(--secondary);box-shadow:inset 0 0 0 1px var(--line);background:0 0;justify-content:center;align-items:center;gap:10px;padding:0;display:flex}.toggle-chip:hover{box-shadow:inset 0 0 0 1px var(--ink)}.toggle-chip.active{color:var(--canvas);background:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}