.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-template-columns:subgrid;grid-area:top;align-items:center;display:grid}.canvas-header{grid-column:2;min-width:0;container-type:inline-size}.canvas-header-content{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:16px;display:grid}.topbar-actions{justify-self:end;align-items:center;gap:0;display:flex}.topbar-name{grid-column:1;justify-self:start}.header-app-mobile{display:none}.header-app-link{justify-content:center;align-items:center;padding:10px;text-decoration:none;display:inline-flex}.header-app-link img{width:auto;height:40px;display:block}.topbar:has(.about-sheet:popover-open) .header-app-link{visibility:hidden}.topbar-links{justify-self:start;align-items:center;gap:16px;display:flex}.header-link{min-height:44px;color:var(--secondary);text-underline-offset:3px;align-items:center;font-size:13px;display:inline-flex}@media (hover:hover){.header-link:hover{text-decoration:underline}}.header-link:focus-visible{text-decoration:underline}.publish-slot{width:44px;min-height:44px;margin-right:8px}.publish-slot svg{transform:translateY(-.875px)}.backdrops{align-items:center;gap:8px;display:flex;position:relative}.header-action{position:relative}.header-feedback{z-index:25;width:min(320px,100vw - 32px);position:absolute;top:calc(100% + 8px);right:0}.backdrop-feedback{right:50%;transform:translate(50%)}.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)}.wordmark{min-height:44px;color:var(--ink);font:inherit;letter-spacing:-.8px;cursor:pointer;text-underline-offset:4px;background:0 0;justify-self:start;padding:0;font-size:20px;font-weight:500;text-decoration:none}.wordmark:focus-visible{text-decoration:underline}@media (hover:hover){.wordmark:hover{text-decoration:underline}}.icon-button{min-width:44px;min-height:44px;color:var(--secondary);justify-content:center;align-items:center;display:flex}.side-action{grid-column:3;justify-self:end}@media (width>=561px){.topbar-actions svg{translate:0 2.4px}}@media (hover:hover){.icon-button:hover{color:var(--ink)}}.icon-button.saving{color:var(--ink);font-variant-numeric:tabular-nums;font-size:9px;position:relative}.icon-button.saving svg,.icon-button.saving:before{width:36px;height:36px;position:absolute;top:50%;left:50%;translate:-50% -50%}.icon-button.saving:before{content:"";box-shadow:inset 0 0 0 1px var(--line);border-radius:50%}.icon-button.saving svg{fill:none;stroke-width:2.5px;rotate:-90deg}.icon-button.saving circle{stroke:var(--ink);stroke-dasharray:var(--done) 1;transition:stroke-dasharray .2s linear}@media (width<=800px){.topbar{grid-template-columns:minmax(0,1fr);row-gap:8px}.canvas-header{grid-column:1}.topbar-name{justify-content:space-between;justify-self:stretch;align-items:center;display:flex}.header-app-mobile{display:inline-flex}.header-app-desktop,.side-action{display:none}.wordmark{font-size:18px}}@container (width<=840px){.canvas-header-content{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"links actions""backs backs";gap:12px 8px}.topbar-links{grid-area:links}.topbar-actions{grid-area:actions}.backdrops{grid-area:backs;justify-self:center}}.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%)}.feedback.svelte-zt5oh3{border:1px solid var(--line);border-radius:var(--radius);background:var(--canvas);color:var(--ink);text-align:left;pointer-events:auto;align-items:flex-start;gap:4px;padding:4px 4px 4px 12px;font-size:13px;line-height:1.5;display:flex}.feedback-copy.svelte-zt5oh3{flex:1;min-width:0;padding-block:10px}p.svelte-zt5oh3{overflow-wrap:anywhere;margin:0}.feedback-dismiss.svelte-zt5oh3{border-radius:var(--radius);width:44px;height:44px;color:var(--secondary);flex:none;place-items:center;padding:0;display:grid}@media (hover:hover){.feedback-dismiss.svelte-zt5oh3:hover{color:var(--ink);background:var(--ground)}}.feedback-action.svelte-zt5oh3{text-underline-offset:3px;min-height:44px;padding:8px 0 0;text-decoration:underline;display:block}.backdrop{--scene-x:0px;--scene-y:0px;--scene-w:100%;--scene-h:100%;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);background-position:var(--scene-x) var(--scene-y)}.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);background-position:var(--scene-x) var(--scene-y)}.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(to bottom, #cbdfeb var(--scene-y), #e2edf1 calc(var(--scene-y) + var(--scene-h) * .62), #f3f0e6 calc(var(--scene-y) + var(--scene-h)))}.backdrop[data-kind=clouds] .drift{display:block}.backdrop[data-kind=field]{background:linear-gradient(to bottom, #d9e7ec var(--scene-y), #edf0e4 calc(var(--scene-y) + var(--scene-h) * .38), #f1e4b4 calc(var(--scene-y) + var(--scene-h) * .42), #ead392 calc(var(--scene-y) + var(--scene-h)))}.backdrop[data-kind=field] .drift:not(.second){bottom:calc(100% - var(--scene-y) - var(--scene-h) * .42);opacity:.7;display:block}.backdrop[data-kind=field] .sway{inset:calc(var(--scene-y) + var(--scene-h) * .38) -4% 0 -4%;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}.backdrop[data-kind=field] .sway.second{inset:calc(var(--scene-y) + var(--scene-h) * .4) auto 0 0;transform-origin:50%;background:linear-gradient(100deg,#0000 20%,#fffade8c 50%,#0000 80%);width:60%;animation:7s ease-in-out infinite gust}@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(to bottom, #e6cdd6 var(--scene-y), #f3d9c2 calc(var(--scene-y) + var(--scene-h) * .45), #f7e6c4 calc(var(--scene-y) + var(--scene-h) * .72), #efe2cc calc(var(--scene-y) + var(--scene-h)))}.backdrop[data-kind=dusk] .sway:not(.second){inset:var(--scene-y) auto auto var(--scene-x);width:var(--scene-w);height:var(--scene-h);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}@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(to bottom, #dfe9ea var(--scene-y), #f0efe2 calc(var(--scene-y) + var(--scene-h) * .42), #b9d8d8 calc(var(--scene-y) + var(--scene-h) * .44), #9fc9cc calc(var(--scene-y) + var(--scene-h)))}.backdrop[data-kind=lake] .drift:not(.second){bottom:calc(100% - var(--scene-y) - var(--scene-h) * .44);opacity:.6;display:block}.backdrop[data-kind=lake] .sway{inset:calc(var(--scene-y) + var(--scene-h) * .44) auto 0 0;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}.backdrop[data-kind=lake] .sway.second{opacity:.5;top:calc(var(--scene-y) + var(--scene-h) * .5);animation-duration:44s,4.6s;animation-direction:reverse,alternate-reverse}@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!important}.firefly{opacity:.6}}.tools{grid-template-columns:44px;gap:6px;display:grid;position:relative}.tools.open .tool-button:first-child .hover-label{display:none}.tools:not(.has-reference) .tool-button:nth-child(4),.tools.has-reference .tool-button:nth-child(5){margin-top:24px}.tools .picks-icon{border-radius:calc(var(--radius) - 1px);pointer-events:none;width:42px;height:42px;display:block}@media (width>=801px) and (height<=800px){.tools{gap:4px}.tools:not(.has-reference) .tool-button:nth-child(4),.tools.has-reference .tool-button:nth-child(5){margin-top:12px}}@media (width<=800px){.tools{justify-content:space-between;gap:0;display:flex}.tools:not(.has-reference) .tool-button:nth-child(n),.tools.has-reference .tool-button:nth-child(n){flex:none;width:44px;margin-top:0}}@media (width>=801px) and (height<=690px){.workspace.tracing-preview{--panel:92px}.tools.has-reference{grid-template-columns:repeat(2,44px)}.tools.has-reference .tool-button:nth-child(5){margin-top:0}}@media (width<=800px){.tools.has-reference .tool-button{flex:0 44px;min-width:0}.workspace .tools .tool-button:first-of-type .hover-label{left:0;right:auto;transform:none}.workspace .tools .tool-button:last-of-type .hover-label{left:auto;right:0;transform:none}}.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}@media (hover:hover){.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}.tool-button.more:after{content:"";opacity:.55;border:3px solid;border-color:#0000 currentColor currentColor #0000;position:absolute;bottom:5px;right:5px}.brush-list{z-index:20;overscroll-behavior:contain;border-radius:var(--radius-sheet);background:var(--canvas);width:312px;max-height:min(420px,100dvh - 220px);box-shadow:inset 0 0 0 1px var(--ink);gap:2px;padding:6px;display:grid;position:absolute;top:0;left:calc(100% + 12px);overflow-y:auto}.workspace:not(.controls-left) .sidebar .brush-list{left:auto;right:calc(100% + 12px)}.brush-row{border-radius:var(--radius);text-align:left;align-items:center;gap:12px;min-height:48px;padding:4px 10px 4px 4px;display:flex}@media (hover:hover){.brush-row:hover{background:var(--ground)}}.brush-row.selected{box-shadow:inset 0 0 0 var(--select) var(--ink)}.brush-row canvas{flex:none;display:block}.brush-text{flex:1;gap:2px;min-width:0;display:grid}.brush-name{color:var(--ink);font-size:12px}.brush-hint{color:var(--secondary);font-size:11px}@media (width<=800px){.brush-list,.workspace:not(.controls-left) .sidebar .brush-list{width:auto;inset:auto 0 calc(100% + 8px)}}.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}.slider-control.locked{position:relative}.slider-control .unlock{cursor:pointer;background:0 0;padding:0;position:absolute;inset:0}.reference-controls.svelte-vqlsf3{z-index:12;border:1px solid var(--ink);border-radius:var(--radius);background:var(--canvas);width:272px;max-height:calc(100dvh - 210px);color:var(--ink);gap:16px;padding:16px;font-size:12px;display:grid;position:absolute;top:100px;left:calc(100% + 12px);overflow:auto}.workspace:not(.controls-left) .reference-controls.svelte-vqlsf3{left:auto;right:calc(100% + 12px)}.reference-heading.svelte-vqlsf3{justify-content:space-between;align-items:center;display:flex}.reference-file.svelte-vqlsf3{display:none}button.svelte-vqlsf3{font:inherit;color:inherit;cursor:pointer;border:1px solid var(--line);border-radius:var(--radius);background:var(--canvas);min-height:44px;padding:8px 12px}@media (hover:hover){button.svelte-vqlsf3:hover{border-color:var(--ink)}}button.svelte-vqlsf3:focus-visible{outline:2px solid var(--ink);outline-offset:2px}button.svelte-vqlsf3:disabled{opacity:.45;cursor:default}.reference-close.svelte-vqlsf3{border:0;place-items:center;width:44px;margin:-10px -10px -10px 0;display:grid}.reference-file-row.svelte-vqlsf3{align-items:center;gap:8px;min-width:0;display:flex}.reference-file-row.svelte-vqlsf3 img:where(.svelte-vqlsf3){object-fit:contain;border:1px solid var(--line);border-radius:4px;width:40px;height:40px}.reference-file-row.svelte-vqlsf3 span:where(.svelte-vqlsf3){text-overflow:ellipsis;white-space:nowrap;color:var(--secondary);flex:1;font-size:11px;overflow:hidden}.reference-file-row.svelte-vqlsf3 button:where(.svelte-vqlsf3){border:0;padding:4px;font-size:11px;text-decoration:underline}.reference-size.svelte-vqlsf3{gap:8px;display:grid}.reference-framing.svelte-vqlsf3{border:1px solid var(--line);border-radius:var(--radius);grid-template-columns:1fr 1fr;display:grid;overflow:hidden}.reference-framing.svelte-vqlsf3 button:where(.svelte-vqlsf3){border:0;border-radius:0}.reference-framing.svelte-vqlsf3 button:where(.svelte-vqlsf3)+button:where(.svelte-vqlsf3){border-left:1px solid var(--line)}.reference-framing.svelte-vqlsf3 button[aria-pressed=true]:where(.svelte-vqlsf3){background:var(--fill)}@media (hover:hover){.reference-framing.svelte-vqlsf3 button:where(.svelte-vqlsf3):hover{background:var(--fill)}}.reference-framing.svelte-vqlsf3 button:where(.svelte-vqlsf3):focus-visible{outline-offset:-3px}.reference-minor.svelte-vqlsf3{justify-content:flex-end;margin:-12px 0;display:flex}.reference-minor.svelte-vqlsf3 button:where(.svelte-vqlsf3){color:var(--secondary);border:0;padding:4px 0;font-size:11px;text-decoration:underline}.reference-primary.svelte-vqlsf3{background:var(--ink);color:var(--canvas);border-color:var(--ink);width:100%}p.svelte-vqlsf3{color:var(--secondary);margin:0;font-size:11px;line-height:1.6}.reference-empty.svelte-vqlsf3{text-align:center;padding:12px 0 4px}.reference-empty.svelte-vqlsf3 p:where(.svelte-vqlsf3){margin-top:12px}.reference-error.svelte-vqlsf3{color:var(--ink)}@media (width<=800px){.reference-controls.placing.svelte-vqlsf3 .reference-file-row:where(.svelte-vqlsf3),.reference-controls.placing.svelte-vqlsf3 .reference-opacity:where(.svelte-vqlsf3),.reference-controls.placing.svelte-vqlsf3 .reference-move:where(.svelte-vqlsf3),.reference-controls.placing.svelte-vqlsf3 .reference-minor:where(.svelte-vqlsf3),.reference-controls.placing.svelte-vqlsf3 .reference-detail:where(.svelte-vqlsf3){display:none}.reference-controls.svelte-vqlsf3,.workspace:not(.controls-left) .reference-controls.svelte-vqlsf3{width:100%;max-height:min(520px,76dvh);inset:auto 0 calc(100% + 12px);overflow:auto}}.reference-toggle.svelte-1xtjura{z-index:3;border:1px solid var(--line);border-radius:var(--radius);background:var(--canvas);width:44px;height:44px;color:var(--ink);place-items:center;padding:0;display:grid;position:absolute;top:12px;right:12px}@media (hover:hover){.reference-toggle.svelte-1xtjura:hover{border-color:var(--ink)}}.reference-layer.svelte-1xtjura{pointer-events:none;border-radius:var(--radius-sheet);position:absolute;inset:0;overflow:hidden}img.svelte-1xtjura{max-width:none;position:absolute;transform:translate(-50%,-50%)}.reference-position.svelte-1xtjura{z-index:3;border-radius:var(--radius-sheet);cursor:grab;touch-action:none;background:0 0;border:0;width:100%;height:100%;position:absolute;inset:0}.reference-position.svelte-1xtjura:active{cursor:grabbing}.reference-position.svelte-1xtjura:focus-visible{outline:2px solid var(--ink);outline-offset:-3px}.reference-position.svelte-1xtjura span:where(.svelte-1xtjura){background:var(--canvas);color:var(--secondary);border:1px solid var(--line);border-radius:var(--radius);font:11px var(--mono);white-space:nowrap;pointer-events:none;padding:8px 12px;position:absolute;bottom:16px;left:50%;transform:translate(-50%)}@media (width<=800px){.reference-position.svelte-1xtjura span:where(.svelte-1xtjura){font-size:10px;top:12px;bottom:auto}}.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;transition:box-shadow .12s}@media (hover:hover){.ink-swatch:hover .ink-dot{box-shadow:0 0 0 2px var(--line)}}.ink-swatch.selected .ink-dot{box-shadow: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>=801px) and (height<=690px){.workspace.tracing-preview .ink-palette{grid-template-columns:repeat(2,44px);gap:4px}.workspace.tracing-preview .ink-swatch{width:44px;height:44px}.workspace.tracing-preview .ink-dot{width:22px;height:22px}}@media (width<=800px){.ink-palette{grid-template-columns:repeat(8,minmax(0,1fr));gap:2px}.ink-swatch{width:100%;height:44px}.workspace .sidebar .ink-palette .ink-swatch:first-child .hover-label{left:0;transform:none}.workspace .sidebar .ink-palette .ink-swatch:last-child .hover-label{left:auto;right:0;transform:none}}.transport{grid-area:transport;min-width:0;font-size:12px;container-type:inline-size}.bar{grid-template-columns:auto auto 1fr;grid-template-areas:"playback modes take";align-items:center;gap:20px 40px;width:100%;min-width:min-content;margin-inline:auto;display:grid}.playback-modes{grid-area:modes;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}@media (hover:hover){.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{grid-area:playback;align-items:center;gap:12px;display:flex;position:relative}.playback-feedback{z-index:25;width:min(320px,100vw - 32px);position:absolute;bottom:calc(100% + 8px);left:0}.playback input[type=range]{width:clamp(64px,7vw,112px)}.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}@media (hover:hover){.play-button:hover:not(:disabled){background:color-mix(in srgb, var(--ink) 86%, var(--canvas))}}.take-slot{grid-area:take;justify-self:end;align-items:center;gap:12px;display:flex;position:relative}.take-time{text-align:right;font-variant-numeric:tabular-nums;min-width:30px}.take-feedback{z-index:25;width:min(320px,100cqw);position:absolute;bottom:calc(100% + 8px);right:0}.take-buttons{align-items:center;gap:6px;display:flex}.take-slot .round,.record-button{background:var(--canvas);width:44px;height:44px;color:var(--ink);box-shadow:inset 0 0 0 1px var(--line);border-radius:50%;place-items:center;padding:0;display:grid;position:relative}@media (hover:hover){.take-slot .round:hover:not(:disabled),.record-button:hover:not(:disabled){box-shadow:inset 0 0 0 1px var(--ink)}}.take-slot .round:disabled{color:var(--muted)}.record-button{color:var(--copper)}.record-button.recording{background:var(--copper);color:var(--canvas);box-shadow:none}.record-button.counting{box-shadow:inset 0 0 0 1.5px var(--copper);font-variant-numeric:tabular-nums;font-size:15px}.take-slot .discard{color:var(--secondary);margin-left:14px}@media (hover:hover){.take-slot .discard:hover:not(:disabled){color:var(--copper);box-shadow:inset 0 0 0 1px var(--copper)}}.take-save{display:flex}.take-slot .saving{box-shadow:none;font-variant-numeric:tabular-nums;font-size:10px}.take-slot .saving svg{fill:none;stroke-width:3px;width:100%;height:100%;position:absolute;inset:0;transform:rotate(-90deg)}.take-slot .saving circle{stroke:var(--ink);stroke-dasharray:var(--done) 1;transition:stroke-dasharray .2s linear}.take-slot .saving:before{content:"";box-shadow:inset 0 0 0 1px var(--line);border-radius:50%;position:absolute;inset:0}.take-menu{z-index:20;border-radius:var(--radius-sheet);background:var(--canvas);box-shadow:inset 0 0 0 1px var(--ink);gap:2px;padding:4px;display:flex;position:absolute;bottom:calc(100% + 6px);right:0}.take-menu button{border-radius:var(--radius);width:44px;height:44px;color:var(--ink);cursor:pointer;background:0 0;place-items:center;padding:0;display:grid}@media (hover:hover){.take-menu button:hover{background:var(--ground)}}.take-menu button:focus-visible{background:var(--ground)}.take-menu .shape{place-items:center;width:24px;height:24px;display:grid}.take-menu .shape b{box-sizing:border-box;border:1.5px solid var(--ink);border-radius:2px;height:22px}.take-menu .shape.wide b{width:24px;height:auto}@media (prefers-reduced-motion:reduce){.take-slot .saving circle{transition:none}}@container (width<=879px){.bar,.playback-modes{column-gap:20px}.playback{gap:8px}.playback input[type=range]{width:64px}}@container (width>=740px) and (width<=779px){.bar{column-gap:8px}.playback-modes{column-gap:12px}}@container (width<740px){.bar{grid-template-columns:auto 1fr;grid-template-areas:"playback take""modes modes"}}@media (width<=800px){.bar{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"playback take""modes modes";gap:20px 16px}.playback-modes{gap:8px 16px}.mode-group{flex-direction:column;align-items:flex-start;gap:8px}.playback{gap:8px;min-width:0}.playback input[type=range]{flex:1;width:auto;min-width:36px}.take-slot{gap:8px}.take-slot .record-label,.take-slot.has-take .take-time{display:none}.take-buttons{gap:4px}.take-slot .round,.record-button{width:40px;height:40px}.take-slot .discard{margin-left:10px}.take-menu{top:calc(100% + 6px);bottom:auto}}.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}.output-controls{gap:8px}.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}.rate-patterns{flex-wrap:wrap;align-items:flex-start;gap:12px;display:flex}@media (width<=800px){.sound-panel{gap:24px;padding-top:8px;overflow:visible}}.feel-controls{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;display:grid}.feel-controls .slider-control{column-gap:4px}.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}@media (hover:hover){select:hover{border-color:var(--ink)}}select:focus-visible{border-color:var(--ink)}@media (width<=800px){.select-control select{font-size:16px}}.select-control.compact>span,.select-control.unlabeled>span{clip-path:inset(50%);width:1px;height:1px;position:absolute;overflow:hidden}.select-control.compact select{height:36px}.select-control.backing-rate{flex:124px;min-width:124px}@media (width<=800px){.select-control.backing-rate{flex-basis:160px;min-width:160px}}.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}@media (hover:hover){.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}@media (hover:hover){.segments button:hover{color:var(--ink)}}.segments button.active{background:var(--ink);color:var(--canvas)}.segments button.active:focus-visible{outline-color:var(--canvas)}.segments button:focus-visible{outline:2px solid var(--ink);outline-offset:-3px}.segmented-control.compact .segments{height:36px;font-size:11px}.segmented-control.circles{flex:none}.segmented-control.circles .segments{background:0 0;border-radius:0;gap:8px;height:auto;display:flex;overflow:visible}.segmented-control.circles .segments:after{content:none}.segmented-control.circles button{width:44px;height:44px;box-shadow:none;color:var(--secondary);background:0 0;justify-items:center;padding:0;font-size:11px;line-height:1.3;display:grid;position:relative}.choice-circle{background:var(--canvas);width:44px;height:44px;box-shadow:inset 0 0 0 1px var(--line);border-radius:50%;place-items:center;display:grid}@media (hover:hover){.segmented-control.circles button:hover .choice-circle{box-shadow:inset 0 0 0 1px var(--ink)}}.segmented-control.circles button.active{color:var(--ink)}.segmented-control.circles button.active .choice-circle{background:var(--fill);box-shadow:inset 0 0 0 var(--select) var(--ink)}.segmented-control.circles button:focus-visible{outline:none}.segmented-control.circles button:focus-visible .choice-circle{outline:2px solid var(--ink);outline-offset:3px}.choice-tooltip{z-index:10;background:var(--ink);color:var(--canvas);white-space:nowrap;pointer-events:none;opacity:0;border-radius:4px;padding:5px 7px;font-size:11px;line-height:1.3;position:absolute;bottom:calc(100% + 6px);left:50%;transform:translate(-50%)}.segments button:first-child .choice-tooltip{left:0;transform:none}.segments button:last-child .choice-tooltip{left:auto;right:0;transform:none}@media (hover:hover){.segments button:hover .choice-tooltip{opacity:1}}.segments button:focus-visible .choice-tooltip,.segments button.announce .choice-tooltip{opacity:1}.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}@media (hover:hover){.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)}.arp-order-picker{flex:none}.arp-order-trigger{height:44px;color:var(--ink);align-items:center;gap:6px;padding:0;display:flex;position:relative}.arp-order-circle{background:var(--canvas);width:44px;height:44px;box-shadow:inset 0 0 0 1px var(--line);border-radius:50%;flex:none;place-items:center;display:grid}.arp-order-trigger .arp-order-circle,.arp-order-option[aria-checked=true] .arp-order-circle{background:var(--fill);box-shadow:inset 0 0 0 var(--select) var(--ink)}.arp-order-trigger:focus-visible,.arp-order-option:focus-visible{outline:none}.arp-order-trigger:focus-visible .arp-order-circle,.arp-order-option:focus-visible .arp-order-circle{outline:2px solid var(--ink);outline-offset:3px}.arp-order-menu{border:1px solid var(--ink);border-radius:var(--radius-sheet);background:var(--canvas);width:204px;max-width:calc(100vw - 16px);color:var(--ink);font:12px var(--mono);margin:0;padding:16px;position:fixed;inset:auto;overflow:visible}.arp-order-grid{grid-template-columns:repeat(3,44px);justify-content:space-between;gap:16px 12px;display:grid}.arp-order-option{width:44px;height:44px;color:var(--secondary);place-items:center;padding:0;display:grid;position:relative}@media (hover:hover){.arp-order-option:hover{color:var(--ink)}}.arp-order-option[aria-checked=true]{color:var(--ink)}@media (hover:hover){.arp-order-option:hover .arp-order-circle{box-shadow:inset 0 0 0 1px var(--ink)}.arp-order-option[aria-checked=true]:hover .arp-order-circle{box-shadow:inset 0 0 0 var(--select) var(--ink)}}.arp-order-tooltip{z-index:1;background:var(--ink);color:var(--canvas);font:11px/1.3 var(--mono);white-space:nowrap;pointer-events:none;opacity:0;border-radius:4px;padding:5px 7px;position:absolute;bottom:calc(100% + 6px);left:50%;transform:translate(-50%)}.arp-order-trigger .arp-order-tooltip,.arp-order-option:nth-child(3n) .arp-order-tooltip{left:auto;right:0;transform:none}.arp-order-option:nth-child(3n+1) .arp-order-tooltip{left:0;transform:none}@media (hover:hover){.arp-order-trigger:hover .arp-order-tooltip,.arp-order-option:hover .arp-order-tooltip{opacity:1}}.arp-order-trigger:focus-visible .arp-order-tooltip,.arp-order-trigger.announce .arp-order-tooltip,.arp-order-option:focus-visible .arp-order-tooltip{opacity:1}.arp-new-phrase{border-top:1px solid var(--line);width:100%;min-height:44px;color:var(--secondary);justify-content:center;align-items:center;gap:8px;margin-top:12px;padding:10px 0 0;display:flex}@media (hover:hover){.arp-new-phrase:hover{color:var(--ink)}}.plus-sheet{border:1px solid var(--ink);border-radius:var(--radius-sheet);background:var(--canvas);width:340px;color:var(--ink);text-align:center;box-sizing:border-box;max-width:calc(100vw - 32px);max-height:calc(100dvh - 32px);margin:auto;padding:28px 32px;font-size:12px;overflow-y:auto}.plus-sheet::backdrop{background:color-mix(in srgb, var(--ink) 18%, transparent)}.plus-sheet h2{margin:0 0 20px;font-size:13px;font-weight:700}.plus-asked{color:var(--secondary);margin:0 0 20px}.plus-mascot{width:112px;max-width:100%;margin:0 auto 20px}.plus-buy{border-radius:var(--radius);background:var(--ink);width:100%;min-height:44px;color:var(--canvas);font:inherit;border:0;justify-content:center;align-items:center;text-decoration:none;display:flex}.plus-buy:disabled{opacity:.5}.plus-quiet{min-height:44px;color:var(--secondary);text-underline-offset:3px;align-items:center;margin-top:8px;font-size:11px;text-decoration:underline;display:inline-flex}.plus-plans{justify-content:center;display:flex}.plus-restore-action{margin:16px auto 0;display:flex}.plus-restore-group{margin-top:16px}.plus-restore-group :is(.plus-note,.plus-restore-action){margin-top:0}.plus-note{color:var(--secondary);margin:12px 0 0}.plus-sheet .plus-restore{margin-top:16px}.plus-buy:focus-visible,.plus-quiet:focus-visible{outline:2px solid var(--ink);outline-offset:3px}.payment-dialog{box-sizing:border-box;border:1px solid var(--ink);border-radius:var(--radius-sheet);background:var(--canvas);width:560px;max-width:calc(100vw - 32px);max-height:calc(100dvh - 32px);color:var(--ink);margin:auto;padding:16px 24px 24px;overflow-y:auto}.payment-dialog::backdrop{background:color-mix(in srgb, var(--ink) 18%, transparent)}.payment-header{align-items:center;gap:24px;margin-bottom:16px;display:flex}.payment-header .plus-quiet{margin:0;font-size:13px}.payment-header h2{margin:0;font-size:15px}.payment-form{min-height:420px}@media (width<=800px){.plus-sheet{padding:24px 20px}.payment-dialog{max-width:calc(100vw - 16px);max-height:calc(100dvh - 16px);padding:8px 12px 16px}}.sheet.svelte-1uha8ag{background:var(--canvas);border-radius:var(--radius-sheet)}.fitted-drawing.svelte-1uha8ag{position:absolute}
