@font-face{font-family:Playpen Sans;src:url(/fonts/PlaypenSans-wght.ttf)format("truetype");font-style:normal;font-weight:100 800;font-display:swap}:root{--do-paper:#fff;--do-background:#fff;--do-soft:var(--muted);--do-ink:#171717;--do-muted:var(--muted-foreground);--do-border:var(--border);--do-accent:var(--primary);--do-accent-soft:var(--accent);--do-orange:var(--primary);--do-purple:#7f77dd;--do-yellow:#ef9f27;--do-blue:#3e5ec6;--do-pink:#de7bae;--do-sky:#85bee8;--do-charcoal:#33312b;--do-sand:#f4be82;--do-radius-sm:10px;--do-radius-md:15px;--do-radius-lg:21px;--do-shadow:none;--do-font:"Playpen Sans", "Avenir Next", "Segoe UI", sans-serif}.do-workbench{font-family:var(--do-font)}.do-surface{border:1.25px solid var(--do-border);border-radius:22px 18px 24px 19px/19px 23px 18px 22px;position:relative}.do-surface--paper{background:var(--do-paper)}.do-surface--soft{background:var(--do-soft)}.do-surface--accent{background:var(--do-accent-soft)}.do-button{border:1.25px solid var(--do-border);font-family:var(--do-font);border-radius:15px 12px 16px 13px/13px 16px 12px 15px;transition:transform .1s ease-in,background-color .15s,border-color .15s}.do-button:active{transform:scale(.96)rotate(-1deg)}.do-tabs-list{border:1.5px solid var(--do-border);font-family:var(--do-font);background:0 0;border-radius:18px 15px 19px 16px/16px 19px 15px 18px}.do-tabs-trigger{border-radius:14px 12px 15px 11px/12px 15px 11px 14px}.do-tabs-trigger[data-state=active]{background:var(--do-accent-soft);color:var(--do-accent);box-shadow:inset 0 0 0 1.25px var(--do-border)}.do-field{font-family:var(--do-font);gap:6px;display:grid}.do-field__label{font-size:.78rem;font-weight:650}.do-field__description{color:var(--do-muted);font-size:.72rem;line-height:1.4}.do-swatch{border:1.5px solid var(--do-border);border-radius:52% 45% 48% 43%/44% 52% 45% 49%;width:2rem;height:2rem;transition:transform .15s}.do-swatch:hover{transform:rotate(-3deg)scale(1.06)}.do-swatch:focus-visible{outline:3px solid color-mix(in srgb, var(--do-accent) 42%, transparent);outline-offset:3px}.instrument-root{display:contents}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}:root{--paper:#faf9f7;--ink:#1a1916;--hair:#cfcabd;--raised:#fffefb;--record:#d85a30;--mono:ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace}html,body{height:100%;margin:0}body{background:var(--paper);color:var(--ink);font-family:var(--mono);min-height:100dvh;padding:max(14px, env(safe-area-inset-top)) 16px max(10px, env(safe-area-inset-bottom));flex-direction:column;align-items:center;font-size:15px;display:flex;position:relative;overflow:hidden}body:before{content:"";pointer-events:none;z-index:0;opacity:.9;background-image:radial-gradient(#6b5e480f .6px,#0000 .9px),radial-gradient(#ffffff80 .5px,#0000 .8px);background-position:0 0,3px 5px;background-size:7px 9px,11px 13px;position:fixed;inset:0}body.sky{background-color:#0000;background-image:radial-gradient(closest-side,#fffffff2,#fff0 100%),radial-gradient(closest-side,#ffffffbf,#fff0 100%),radial-gradient(closest-side,#ffffffd9,#fff0 100%),radial-gradient(closest-side,#ffffff8c,#fff0 100%),linear-gradient(#93b6df,#a4c0e3 55%,#b9cde8);background-position:82% 8%,0 42%,22% 86%,72% 98%,0 0;background-repeat:no-repeat,no-repeat,no-repeat,no-repeat,repeat;background-size:520px 360px,360px 260px,480px 320px,420px 280px,auto;background-attachment:fixed;background-origin:padding-box,padding-box,padding-box,padding-box,padding-box;background-clip:border-box,border-box,border-box,border-box,border-box}body.sky .btn,body.photo .btn{background:#fff9;border-color:#ffffffbf}body.sky .btn.on,body.photo .btn.on{background:var(--ink);border-color:var(--ink)}body.photo{background-image:var(--photo);background-position:50%;background-repeat:no-repeat;background-size:cover}body.photo.fit-contain{background-size:contain}body.photo.fit-stretch{background-size:100% 100%}body.photo .foot .more,body.photo .credit,body.photo .title{text-shadow:0 0 6px #ffffffe6}.app{z-index:1;flex-direction:column;flex:1;align-items:center;gap:12px;width:100%;max-width:560px;min-height:0;display:flex;position:relative}.titlebar{justify-content:center;align-items:center;width:100%;display:flex;position:relative}.title{color:var(--ink);margin:0;font-size:15px;font-weight:400;text-decoration:none}.switch{border:1.5px solid var(--ink);background:var(--raised);cursor:pointer;border-radius:13px;flex:none;width:46px;height:26px;padding:0;position:relative}.switch .knob{background:var(--ink);border-radius:50%;width:19px;height:19px;transition:left .2s,background .2s;position:absolute;top:2px;left:2px}.codecard{z-index:40;background:#1a191647;justify-content:center;align-items:center;padding:20px;display:flex;position:fixed;inset:0}.codecard[hidden]{display:none}.procardbox{background:var(--raised);border:1px solid var(--hair);border-radius:16px;flex-direction:column;gap:9px;width:100%;max-width:320px;padding:24px 20px 18px;display:flex;position:relative;box-shadow:0 18px 50px #0000002e}.prox{width:32px;height:32px;color:var(--do-muted);cursor:pointer;background:0 0;border:none;padding:0;font-size:18px;position:absolute;top:6px;right:6px}.proname{margin-bottom:2px;font-size:15px}.profeat{color:var(--do-muted);font-size:12.5px;line-height:1.5}.prolock{color:var(--ink);display:inline-flex}.prolock svg{width:16px;height:16px}.prolock[hidden]{display:none}.coderow{gap:6px;margin-top:2px;display:flex}.coderow input{flex:auto;width:auto}.probuy{background:var(--ink);height:40px;color:var(--paper);white-space:nowrap;border-radius:999px;justify-content:center;align-items:center;margin-top:6px;padding:0 14px;font-size:13px;text-decoration:none;display:flex}.probuy[hidden],.codecard[hidden]{display:none}.codecard input{border:1px solid var(--hair);background:var(--paper);width:156px;height:36px;color:var(--ink);font-family:var(--mono);letter-spacing:2px;text-align:center;text-transform:uppercase;border-radius:10px;outline:none;font-size:15px}.codecard input:focus{border-color:var(--ink)}.codecard.wrong input{border-color:var(--record)}.canvas-wrap{aspect-ratio:3/4;border:1px solid var(--hair);background:var(--raised);border-radius:10px;flex:none;width:min(100%,75dvh - 210px);max-height:calc(100dvh - 294px);position:relative;overflow:hidden}@media (width<=759px){body.pro-open .canvas-wrap{max-height:calc(100dvh - 510px)}.prorow{gap:8px 12px}.prorow .btn.word{padding:0 10px}}body.can-record .canvas-wrap{max-height:calc(100dvh - 384px)}@media (width<=759px){body.pro-open.can-record .canvas-wrap{max-height:calc(100dvh - 600px)}}canvas#c{touch-action:none;cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'%3E%3Ccircle cx='9' cy='9' r='6' fill='none' stroke='white' stroke-width='3.5' opacity='.8'/%3E%3Ccircle cx='9' cy='9' r='6' fill='none' stroke='%231a1916' stroke-width='1.5'/%3E%3C/svg%3E") 9 9,crosshair;width:100%;height:100%;display:block}.canvas-wrap.erasing canvas#c{cursor:none}.canvas-wrap.stage-on canvas#c{visibility:hidden}.eraser-ring{pointer-events:none;z-index:3;background:#ffffff59;border:1.5px solid #1a19168c;border-radius:50%;width:44px;height:44px;margin:-22px 0 0 -22px;display:none;position:absolute}.canvas-wrap.erasing .eraser-ring{display:block}.notetag{z-index:4;pointer-events:none;font-family:var(--mono);background:var(--ink);color:var(--paper);white-space:nowrap;border-radius:7px;padding:4px 7px;font-size:11px;line-height:1;position:absolute;transform:translate(12px,-30px)}.notetag[hidden]{display:none}.stage{background:var(--raised);grid-template-rows:repeat(3,1fr);grid-template-columns:repeat(3,1fr);gap:2px;display:none;position:absolute;inset:0}.canvas-wrap.stage-on .stage{display:grid}.stage .cell{cursor:pointer;position:relative;overflow:hidden}.stage .cell img{object-fit:cover;opacity:0;width:100%;height:100%;transition:opacity .12s ease-out;position:absolute;inset:0}.stage .cell.show img{opacity:1}.stage .hint{text-align:center;color:#fff;text-shadow:0 0 4px #000000bf;opacity:0;pointer-events:none;justify-content:center;align-items:center;padding:0 8px;font-size:10px;font-weight:500;line-height:1.35;transition:opacity .12s;display:flex;position:absolute;inset:0}.stage .cell.show .hint{opacity:1}.stage .hint[hidden]{display:none}.rail,.bar{flex-direction:column;gap:12px;width:100%;display:flex}.row{align-items:center;gap:8px;width:100%;display:flex}.group{align-items:center;gap:8px;display:flex}.btn{appearance:none;background:var(--raised);border:1px solid var(--hair);color:var(--ink);cursor:pointer;width:36px;height:36px;font-family:var(--mono);border-radius:50%;flex:none;justify-content:center;align-items:center;padding:0;font-size:14px;transition:transform .1s;display:inline-flex}.btn:active{transform:scale(.94)}.btn svg{fill:currentColor;width:14px;height:14px}.btn.beat{letter-spacing:1px;font-size:11px;font-weight:700}input[type=range]{width:96px;accent-color:var(--ink)}.palette{justify-content:space-between;width:100%;display:flex}.swatch{cursor:pointer;outline-offset:3px;border:none;border-radius:50%;outline:2px solid #0000;flex:0 0 32px;width:32px;height:32px;padding:0;transition:outline-color .12s;box-shadow:inset 0 0 0 1px #00000014}.bar{flex-flow:wrap;justify-content:space-between;align-items:center}.cloudwrap{position:relative}.bgcard{background:var(--raised);border:1px solid var(--hair);z-index:5;border-radius:12px;flex-wrap:wrap;gap:8px;padding:8px;display:flex;position:absolute;bottom:44px;right:0;box-shadow:0 6px 18px #00000014}.fitrow{justify-content:center;gap:6px;width:100%;display:flex}.fitrow[hidden]{display:none}.fitopt{border:1px solid var(--hair);background:var(--raised);width:32px;height:32px;color:var(--ink);cursor:pointer;border-radius:8px;justify-content:center;align-items:center;padding:0;display:inline-flex}.fitopt.on{background:var(--ink);color:var(--paper);border-color:var(--ink)}.fitopt svg{width:15px;height:15px}.bgcard[hidden]{display:none}.tile{border:1px solid var(--hair);background-color:var(--paper);cursor:pointer;width:48px;height:48px;font-family:var(--mono);color:var(--ink);background-position:50%;background-size:cover;border-radius:8px;padding:0;font-size:18px}.tile.on{outline:2px solid var(--ink);outline-offset:-2px}.skytile{background:radial-gradient(closest-side,#fffffff2,#fff0) 68% 28%/70% 55% no-repeat,radial-gradient(closest-side,#ffffffb3,#fff0) 25% 75%/60% 45% no-repeat,linear-gradient(#93b6df,#b9cde8)}.prorow{flex-wrap:wrap;align-items:center;gap:8px;width:100%;display:flex}.prorow[hidden]{display:none}.prorow.locked{opacity:.38}@media (width<=759px){body:not(.pro-open) .prorow{display:none}}.bpmin{border:1px solid var(--hair);background:var(--raised);width:58px;height:40px;color:var(--ink);font-family:var(--mono);text-align:center;border-radius:20px;outline:none;font-size:13px}.bpmin:focus{border-color:var(--ink)}.bpmin.locked{opacity:.38}.bpmin::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.bpmin::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.palette.recolor .swatch{outline:2px dashed var(--do-muted);outline-offset:3px}.switch:focus{outline:none}.pickcard{z-index:8;background:var(--raised);border:1px solid var(--hair);border-radius:12px;grid-template-columns:repeat(7,26px);gap:8px;padding:12px;display:grid;position:fixed;overflow:visible;box-shadow:0 8px 24px #0000001a}.pickcard[hidden]{display:none}.pick{cursor:pointer;border:none;border-radius:50%;width:26px;height:26px;padding:0;box-shadow:inset 0 0 0 1px #00000014}.pick:hover{outline:2px solid var(--ink);outline-offset:2px}.pickplus{background:var(--raised);border:1px dashed var(--do-muted);color:var(--ink);font-family:var(--mono);box-shadow:none;font-size:15px;line-height:1}.pickreset{border:1px solid var(--hair);background:var(--paper);height:30px;color:var(--ink);cursor:pointer;border-radius:8px;grid-column:1/-1;justify-content:center;align-items:center;padding:0;display:flex}.pickreset svg{width:14px;height:14px}.pickcustom{flex-direction:column;grid-column:1/-1;gap:12px;width:218px;display:none}#pcfield{cursor:crosshair;touch-action:none;border-radius:10px;width:218px;height:140px;box-shadow:inset 0 0 0 1px #00000014}.pickcard.custom .pick,.pickcard.custom .pickreset{display:none}.pickcard.custom .pickcustom{display:flex}.pcrow{justify-content:space-between;align-items:center;display:flex}.pcdot{border-radius:50%;width:28px;height:28px;box-shadow:inset 0 0 0 1px #00000014}.pcback{width:30px;height:30px;font-size:14px}.pickcustom input[type=range]{appearance:none;border-radius:6px;outline:none;height:12px}#pchue{background:linear-gradient(90deg,red,#ff0,#0f0,#0ff,#00f,#f0f,red)}.pickcustom input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;background:var(--raised);border:1.5px solid var(--ink);border-radius:50%;width:18px;height:18px}.pickcustom input[type=range]::-moz-range-thumb{background:var(--raised);border:1.5px solid var(--ink);border-radius:50%;width:18px;height:18px}.prohome{flex-wrap:wrap;align-items:center;gap:10px;width:100%;display:flex;position:relative}.prodeck{flex-direction:column;gap:10px;width:100%;display:flex}.prorow{align-items:flex-end;gap:10px 16px}.field{flex-direction:column;gap:4px;display:flex}.fieldrow{gap:6px;display:flex}.lbl{color:var(--do-muted);letter-spacing:.02em;font-size:11px}.sel{appearance:none;border:1px solid var(--hair);background:var(--raised) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' fill='none' stroke='%231a1916' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat right 11px center / 10px 6px;height:36px;color:var(--ink);font-family:var(--mono);cursor:pointer;border-radius:18px;outline:none;padding:0 30px 0 12px;font-size:13px}.sel:focus{border-color:var(--ink)}.switchlbl{color:var(--ink);font-size:12px}.paperrow.locked{opacity:.38}@media (width<=759px){.paperrow{display:none}}@media (width>=760px){.field.phone{display:none}}.octval{text-align:center;min-width:28px;font-size:13px;line-height:36px}.bpmin.tune{width:62px;height:36px}@media (width>=760px){.bpmin.tune{height:40px}}.tapbtn.locked{opacity:.38}@media (width<=759px){.field.adv,.tapbtn,.prorow #octave{display:none}}@media (width>=760px){.octval{line-height:40px}}.prorow #octave{cursor:pointer;flex:none;width:154px;max-width:none;height:36px}@media (width>=760px){.prorow #octave{height:40px}}.tip{z-index:70;background:var(--ink);color:var(--paper);font-family:var(--mono);white-space:nowrap;pointer-events:none;opacity:0;border-radius:7px;padding:5px 9px;font-size:11.5px;line-height:1.3;transition:opacity .12s;position:fixed}.tip.show{opacity:1}#octave{background:var(--raised);touch-action:none;border:1px solid #cfcabd80;border-radius:10px;flex:auto;width:100%;max-width:224px;height:34px}.glyphs .btn svg{width:14px;height:14px}.piano{flex-direction:column;gap:8px;width:100%;display:flex}.piano[hidden]{display:none}.pianobar{flex-wrap:wrap;align-items:center;gap:10px;display:flex}.btn.word{border-radius:20px;width:auto;padding:0 14px;font-size:12px}.slot{color:var(--ink);font-size:13px}.pianobar .glyphs{margin-left:6px}.pianohint{color:var(--do-muted);text-align:center;flex:1;font-size:11px}#keys{touch-action:none;border-radius:12px;width:100%;height:150px;display:block}.helpbtn{width:30px;height:30px;color:var(--do-muted);font-size:14px;position:absolute;top:50%;left:0;transform:translateY(-50%)}.getpill{background:var(--record);color:#fff;height:40px;font-family:var(--mono);white-space:nowrap;border-radius:22px;align-items:center;padding:0 20px;font-size:15px;text-decoration:none;display:inline-flex;box-shadow:0 2px 10px #d85a3047}.getpill:active{transform:scale(.97)}@media (display-mode:standalone){.getpill{display:none}}.railmeta{display:none}.byline{color:var(--do-muted);font-size:12px;line-height:1.6;display:none}.byline a{color:var(--ink)}@media (width>=760px){.byline{max-width:150px;margin-top:8px;display:block}.helpbtn{width:30px;height:30px;font-size:13px}}.helpbtn.on{color:var(--paper)}@keyframes helpglow{0%{outline-offset:2px;outline:2px solid #d85a3024}to{outline-offset:3px;outline:5px solid #d85a3040}}body.help .btn:not(.helpbtn),body.help .swatch,body.help .recpill,body.help input[type=range]{animation:1.2s ease-in-out infinite alternate helpglow}.hintbubble{z-index:60;background:var(--raised);border:1px solid var(--hair);max-width:min(340px,100vw - 32px);color:var(--ink);border-radius:12px;padding:10px 14px;font-size:13px;line-height:1.5;display:none;position:fixed;top:56px;left:50%;transform:translate(-50%);box-shadow:0 8px 24px #0000001a}body.help .hintbubble.show{display:block}@media (width>=760px){.helpbtn{align-self:flex-start;position:static;transform:none}}.foot{flex-direction:column;align-items:center;gap:8px;margin-top:auto;padding-top:6px;display:flex}.pubcard{z-index:50;background:var(--raised);border:1px solid var(--hair);border-radius:14px;flex-direction:column;gap:8px;width:min(320px,100vw - 40px);padding:12px;display:flex;position:fixed;top:40%;left:50%;transform:translate(-50%,-50%);box-shadow:0 10px 30px #0000001f}.pubcard[hidden]{display:none}.pubcard input{border:1px solid var(--hair);background:var(--paper);height:38px;color:var(--ink);font-family:var(--mono);border-radius:10px;outline:none;padding:0 12px;font-size:14px}@media (width<=759px){.codecard input,.pubcard input,.bpmin,.sel{font-size:16px}}.pubcard input:focus{border-color:var(--ink)}.pubrow{justify-content:flex-end;gap:8px;display:flex}.pubscrim{z-index:49;background:#00000005;position:fixed;inset:0}.pubscrim[hidden]{display:none}.pillrow{gap:10px;display:none}body.can-record .pillrow{display:flex}.recpill{border:1px solid var(--hair);background:var(--raised);height:38px;color:var(--ink);font-family:var(--mono);cursor:pointer;border-radius:22px;align-items:center;gap:7px;padding:0 16px;font-size:15px;display:inline-flex}.recpill[hidden]{display:none}.recpill:active{transform:scale(.97)}.recpill .dot{background:var(--record);border-radius:50%;width:9px;height:9px}.recpill .stopsq{background:var(--record);border-radius:2px;width:11px;height:11px}.recpill.busy{opacity:.55;pointer-events:none}body.sky .recpill,body.photo .recpill{background:#fff9;border-color:#ffffffbf}.foot .more{color:var(--ink);text-align:center;margin:0;font-size:13px;line-height:1.5}.foot .more a{color:var(--ink)}@media (display-mode:standalone){.foot .more{display:none}}.foot .credit{color:var(--do-muted);text-align:center;padding:0 14px;font-size:12px;line-height:1.6}.foot .credit a{color:var(--ink)}@media (height<=640px){.foot .credit{display:none}}@media (width>=760px){body{padding:16px 20px 14px}.app{grid-template:"title canvas""rail canvas"1fr"rail deck""rail bar""piano piano"/162px 1fr;align-items:start;gap:14px 22px;width:100%;max-width:none;height:100%;display:grid}.prodeck{grid-area:deck;gap:12px}.prodeck .prorow{grid-template-columns:repeat(5,max-content);justify-content:start;align-items:end;gap:12px 24px;display:grid}.paperrow{gap:15px;width:auto}.sel{height:40px}.titlebar{flex-direction:column;grid-area:title;align-items:flex-start;gap:10px}.title{font-size:14px;line-height:20px}.switch{position:relative;top:auto;right:auto;transform:none}.canvas-wrap{aspect-ratio:auto;grid-area:canvas;align-self:stretch;width:100%;height:100%;min-height:0;max-height:none}.rail{grid-area:rail;align-self:stretch;gap:18px;width:162px;padding:0 6px;overflow-y:auto}.railmeta{flex-direction:column;align-items:flex-start;gap:14px;margin-top:auto;display:flex}.row.tools{grid-template-columns:repeat(3,40px);gap:15px;width:auto;display:grid}.palette{grid-template-columns:repeat(3,40px);justify-content:start;gap:15px;width:auto;display:grid}#p3{display:none}.swatch{flex:none;width:40px;height:40px}.btn{width:40px;height:40px}.bar{flex-flow:wrap;grid-area:bar;justify-content:flex-start;align-items:center;gap:14px 22px;padding-top:2px}.bar .transport input[type=range]{width:130px}.pianobar{gap:12px}.pianohint{text-align:right;font-size:12px}.bgcard{bottom:48px;left:0;right:auto}.getpill{height:36px;padding:0 16px;font-size:13px}.piano{grid-area:piano}#keys{height:170px}.foot{display:contents}.foot .pillrow,.foot .credit{display:none}}:root{--paper:var(--do-background);--ink:var(--do-ink);--hair:var(--do-border);--raised:var(--do-paper);--record:var(--do-orange);--mono:var(--do-font);--wm-orange-soft:#fff0eb;--wm-green-soft:#e7f5ef;--wm-purple-soft:#f0effd}html,body{background:var(--do-background);min-height:100%}body{padding:max(10px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom));font-family:var(--do-font);align-items:stretch;font-size:14px;overflow:hidden auto}body:before{opacity:.45;background-image:radial-gradient(#6b5e480b .5px,#0000 .75px);background-size:10px 12px}button,input,select{font-family:var(--do-font)}button:focus-visible,input:focus-visible,select:focus-visible,a:focus-visible{outline:3px solid color-mix(in srgb, var(--do-orange) 34%, transparent);outline-offset:3px}.app{flex-direction:column;align-items:stretch;gap:11px;width:100%;max-width:760px;min-height:calc(100dvh - 22px);margin:0 auto;display:flex}.titlebar,.rail,.prodeck,.bar,.piano,.procardbox,.pubcard,.hintbubble,.pickcard,.bgcard{background:var(--do-paper);box-shadow:none}.titlebar{border:0;border-bottom:1.25px solid var(--do-border);align-items:center;gap:12px;min-height:58px;padding:4px 2px 7px;display:flex}.title{color:var(--do-ink);letter-spacing:-.06em;white-space:nowrap;align-items:center;gap:8px;font-size:clamp(22px,2.6vw,32px);font-weight:760;line-height:1;text-decoration:none;display:inline-flex}.title-mark{background:var(--do-orange);color:#fff;border-radius:49% 54% 46% 52%/53% 47% 55% 45%;place-items:center;width:34px;height:34px;font-size:27px;font-weight:740;line-height:.7;display:grid;transform:rotate(-4deg)}.title-note-icon{width:24px;height:24px;transform:rotate(7deg)}.piece-title{border:1.25px solid var(--do-border);min-width:180px;max-width:340px;height:38px;color:var(--do-muted);border-radius:13px 10px 15px 11px/11px 15px 10px 13px;align-items:center;margin-left:clamp(4px,3vw,34px);padding:0 15px;font-size:13px;font-weight:520;display:flex}.title-actions{align-items:center;gap:8px;margin-left:auto;display:flex}.sharegroup{gap:8px;display:flex}.actionbtn{border-radius:13px 10px 14px 11px/11px 14px 10px 13px;gap:6px;width:auto;height:38px;padding:0 12px;font-size:11px;font-weight:610}.actionbtn img{width:17px;height:17px}.helpbtn{width:36px;height:36px;margin:0;font-size:13px;position:static;transform:rotate(2deg)}.canvas-wrap{aspect-ratio:3/4;border:1.5px solid var(--do-ink);background:var(--do-paper);width:100%;height:auto;min-height:0;max-height:none;box-shadow:none;border-radius:22px 17px 24px 18px/18px 24px 17px 22px}canvas#c{border-radius:inherit}.rail{border:1.5px solid var(--do-ink);border-radius:20px 15px 22px 16px/16px 22px 15px 20px;flex-direction:column;gap:10px;width:100%;padding:10px;display:flex;overflow:visible}.rail:before,.prodeck:before,.bar:before{display:none}.row.tools{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;display:grid}.row.tools .btn,.paperrow .btn{border:1.1px solid var(--do-border);background:0 0;border-radius:15px 11px 17px 12px/12px 17px 11px 15px;flex-direction:column;gap:3px;width:100%;min-width:0;height:64px;padding:7px 3px 6px;font-size:10px;font-weight:610}.row.tools .btn img,.paperrow .btn img{width:28px;height:28px}.row.tools .btn.on{background:var(--wm-orange-soft);border-color:var(--do-orange);color:var(--do-orange)}.row.tools .btn.on img{filter:none}.palette{grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;padding:2px 3px;display:grid}.swatch{aspect-ratio:1;outline-offset:3px;border:0;border-radius:48% 55% 44% 52%/54% 45% 53% 47%;outline:2px solid #0000;justify-self:center;width:100%;min-width:0;max-width:34px;height:auto;transition:transform .14s,outline-color .14s;box-shadow:inset 0 0 0 1px #1a191614}.swatch:nth-child(3n+2){transform:rotate(2deg)}.swatch:nth-child(3n){transform:rotate(-2deg)}.swatch:hover{transform:scale(1.08)rotate(-2deg)}.swatch.on{outline-color:var(--do-ink)}.paperrow{gap:7px;width:100%;display:flex!important}.paperrow .btn{flex:1 1 0;height:55px}.railmeta{flex-direction:column;align-items:stretch;gap:8px;margin-top:auto;display:flex}.railmeta .getpill{justify-content:center}.byline{color:var(--do-muted);margin-top:0;font-size:9px;line-height:1.4;display:block}.byline a,.credit a{color:var(--do-ink)}.prodeck{border:1.25px solid var(--do-border);border-radius:16px 12px 18px 13px/13px 18px 12px 16px;grid-template-columns:auto minmax(0,1fr);align-items:stretch;gap:12px;width:100%;padding:10px 11px 11px;display:grid}.prohome{border-right:1.25px solid var(--do-border);background:0 0;border-radius:0;order:0;align-content:center;min-width:142px;padding:8px 10px}.prorow{flex-wrap:nowrap;order:1;align-items:end;gap:14px;padding:1px 2px 5px;display:flex;overflow:auto hidden}.prorow.locked,.paperrow.locked,.bpmin.locked,.tapbtn.locked{opacity:.7}.field{flex:none;gap:4px;min-width:110px}.field:first-child{min-width:270px}.field:has(#octave){min-width:132px}.field:has(#wavBtn){min-width:118px}.lbl{color:var(--do-muted);letter-spacing:.035em;text-transform:uppercase;font-size:9px;font-weight:620}.fieldrow{min-width:0}.prorow>.field:first-child .fieldrow{grid-template-columns:72px 190px;width:100%;display:grid}.sel,.bpmin,#octave,.codecard input,.pubcard input{border:1.15px solid var(--do-border);background-color:var(--do-paper);min-width:0;color:var(--do-ink);box-shadow:none;border-radius:11px 8px 12px 9px/9px 12px 8px 11px}.sel{width:100%;height:38px;padding-left:10px;font-size:11px}.prorow #octave{width:190px;max-width:none;height:40px}.bpmin,.bpmin.tune{width:62px;height:38px}.switch{border:1.4px solid var(--do-ink);background:var(--do-paper);border-radius:48% 54% 45% 52%/54% 46% 53% 47%;width:48px;height:28px}.switch .knob{background:var(--do-ink);width:19px;height:19px;top:3px;left:3px}.switch.on{background:var(--do-accent);border-color:var(--do-accent)}.switch.on .knob{background:#fff;left:24px}.switchlbl{font-size:11px;font-weight:610}.bar{border:1.5px solid var(--do-ink);border-radius:20px 15px 22px 16px/16px 22px 15px 20px;flex-flow:row;justify-content:flex-start;align-items:center;gap:11px;width:100%;padding:10px 12px;display:flex;overflow:auto hidden}.bar>.group,.bar>.cloudwrap{flex:none}.bar>.group+.group,.bar>.cloudwrap,.bar>.cloudwrap+.group{border-left:1.25px solid var(--do-border);padding-left:11px}.btn{border:1.15px solid var(--do-border);background:var(--do-paper);width:39px;height:39px;color:var(--do-ink);box-shadow:none;border-radius:48% 53% 45% 52%/54% 45% 53% 47%;transition:transform .1s ease-in,background-color .14s,border-color .14s}.btn img{pointer-events:none;width:19px;height:19px;display:block}.btn.actionbtn{border-radius:13px 10px 14px 11px/11px 14px 10px 13px;width:auto;height:38px;padding-inline:12px}.btn:hover{background:var(--do-soft);border-color:var(--do-ink);transform:rotate(-1deg)}.btn:active{box-shadow:none;transform:scale(.94)rotate(1deg)}.btn.on{background:var(--do-ink);color:var(--do-paper);border-color:var(--do-ink)}.btn.on img{filter:invert()}.btn.word{border-radius:12px 9px 13px 10px/10px 13px 9px 12px;width:auto;font-size:10px;font-weight:610}#play{background:var(--do-orange);color:#fff;border-color:var(--do-orange);width:54px;height:54px}#play img{filter:invert();width:25px;height:25px;transform:translate(1px)}.programbtn,.btn.beat{letter-spacing:0;border-radius:13px 10px 15px 11px/11px 15px 10px 13px;flex-direction:column;gap:2px;width:72px;height:54px;padding:5px 6px;font-size:9px;font-weight:620}.programbtn img,.btn.beat img{width:23px;height:23px}.programbtn.on{background:var(--do-orange);border-color:var(--do-orange);color:#fff}.btn.beat.on{background:var(--do-accent);border-color:var(--do-accent);color:#fff}.bgcard,.pickcard{border:1.25px solid var(--do-border);border-radius:15px 12px 17px 13px/13px 17px 12px 16px;padding:10px}.tile,.fitopt,.pickreset{border:1.15px solid var(--do-border);border-radius:11px 9px 12px 10px/9px 12px 10px 11px}.tile.on,.fitopt.on{outline:2px solid var(--do-ink);outline-offset:2px}.piano{border:1.25px solid var(--do-border);border-radius:16px 12px 18px 13px/13px 18px 12px 16px;width:100%;padding:12px}#keys{border:1.15px solid var(--do-border);border-radius:13px 10px 15px 11px/11px 15px 10px 13px}.foot{margin-top:0;padding:2px 0 0}.getpill,.recpill,.probuy{border:1.15px solid var(--do-border);background:var(--do-orange);color:#fff;box-shadow:none;font-family:var(--do-font);border-radius:14px 11px 15px 12px/12px 15px 11px 14px}.pillrow{gap:8px}.recpill{background:var(--do-paper);height:38px;color:var(--do-orange);border-color:var(--do-orange);text-transform:uppercase;font-size:11px}.recpill img{width:16px;height:16px}.recpill .dot,.recpill .stopsq{background:var(--do-orange)}.procardbox,.pubcard{border:1.5px solid var(--do-ink);box-shadow:none;border-radius:20px 16px 22px 17px/17px 22px 16px 20px}.hintbubble{border:1.25px solid var(--do-border);font-family:var(--do-font);box-shadow:none;border-radius:15px 12px 17px 13px/13px 17px 12px 16px}.notetag,.tip{background:var(--do-ink);font-family:var(--do-font);border-radius:9px 7px 10px 8px/7px 10px 8px 9px}body.sky .titlebar,body.sky .rail,body.sky .prodeck,body.sky .bar,body.sky .piano,body.photo .titlebar,body.photo .rail,body.photo .prodeck,body.photo .bar,body.photo .piano{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#fffefbe8;border-color:#ffffffdb}body.sky .titlebar,body.photo .titlebar{-webkit-backdrop-filter:none;backdrop-filter:none;background:0 0;border-color:#ffffffa6}body.sky .canvas-wrap,body.photo .canvas-wrap{background:#fffefb24;border-color:#ffffffc2}body.sky .btn,body.photo .btn,body.sky .recpill,body.photo .recpill{background:#fffefbe8;border-color:#ffffffd6}body.sky .btn.on,body.photo .btn.on{background:var(--do-ink);color:var(--do-paper);border-color:var(--do-ink)}body.sky #play,body.photo #play,body.sky .programbtn.on,body.photo .programbtn.on{background:var(--do-orange);color:#fff;border-color:var(--do-orange)}body.sky .sel,body.photo .sel{background-color:#fffefbed;border-color:#ffffffd6}@media (width<=899px){.titlebar{flex-wrap:wrap;order:0;min-height:auto;padding:4px 1px 9px}.title{font-size:22px}.title-mark{width:31px;height:31px;font-size:24px}.title-note-icon{width:20px;height:20px}.piece-title{order:3;width:100%;max-width:none;height:34px;margin:0}.title-actions{gap:5px}.actionbtn{width:36px;height:36px;padding:0}.actionbtn span{display:none}.helpbtn{width:34px;height:34px}.canvas-wrap{order:1;align-self:center;width:min(100%,39dvh);max-height:52dvh}body.pro-open .canvas-wrap,body.pro-open.can-record .canvas-wrap{max-height:52dvh}.rail{flex:none;order:2;padding:9px}.row.tools{gap:7px;display:flex;overflow-x:auto}.row.tools .btn{flex:0 0 68px}.palette{grid-template-columns:repeat(9,minmax(26px,1fr));gap:6px}.swatch{max-width:31px}.paperrow .btn{height:48px}.railmeta,.byline{display:none}.bar{flex:none;order:3;padding:9px 10px}.bar .group{gap:6px}.transport input[type=range]{width:88px}.prodeck{flex-direction:column;order:4;padding:11px;display:flex}.prohome{border-right:0;border-bottom:1.25px solid var(--do-border);width:100%;min-width:0;padding:8px 2px 11px}.prorow{width:100%;padding-top:2px}.piano{order:5}.foot{order:6}}@media (width>=900px){body{height:100dvh;padding:10px 14px 12px;overflow:hidden}.app{grid-template:"title title""rail canvas"minmax(250px,1fr)"rail deck""bar bar""piano piano"/150px minmax(0,1fr);align-items:stretch;gap:10px 12px;max-width:1540px;height:100%;min-height:0;display:grid}.titlebar{flex-flow:row;grid-area:title;align-items:center}.canvas-wrap{aspect-ratio:auto;grid-area:canvas;align-self:stretch;width:100%;height:100%;max-height:none}.rail{grid-area:rail;align-self:stretch;width:150px;min-height:0;overflow:hidden auto}.row.tools{grid-template-columns:repeat(2,minmax(0,1fr))}.row.tools .btn{height:63px}.palette{grid-template-columns:repeat(3,1fr);gap:7px;padding:3px 1px}.swatch{max-width:25px}.paperrow{gap:5px}.paperrow .btn{height:43px;padding:0}.paperrow .btn img{width:21px;height:21px}.paperrow .btn span{display:none}.getpill{height:34px;padding:0 8px;font-size:9px}.prodeck{grid-area:deck;min-width:0}.bar{grid-area:bar;min-width:0}.bgcard{bottom:64px;left:auto;right:0}#p3{display:inline-flex}.piano{grid-area:piano}#keys{height:140px}.foot{display:contents}.foot .credit{display:none}}@media (width>=1320px){.app{grid-template-columns:156px minmax(0,1fr);column-gap:15px}.rail{width:156px;padding:11px}.row.tools .btn{height:66px}.palette{gap:8px}.swatch{max-width:27px}.bar{gap:14px;padding-inline:14px}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}.titlebar{border-bottom:0}.piece-title,.btn.actionbtn,.helpbtn{background:var(--do-soft);border:0}.rail{background:0 0;border:0;border-radius:0;padding:2px 4px}.row.tools .btn,.paperrow .btn{background:0 0;border:0}.row.tools .btn:hover,.paperrow .btn:hover{background:var(--do-soft)}.row.tools .btn.on{background:var(--wm-orange-soft);color:var(--do-orange)}.canvas-wrap{border:1px solid var(--do-border);border-radius:18px 14px 20px 15px/15px 20px 14px 18px}.prodeck{border:0;border-top:1px solid color-mix(in srgb, var(--do-border) 64%, transparent);background:0 0;border-radius:0}.prohome{border-color:color-mix(in srgb, var(--do-border) 66%, transparent)}.switch{background:var(--do-paper);border:0;border-radius:13px 10px 15px 11px/11px 15px 10px 13px;place-items:center;width:42px;height:42px;padding:0;display:inline-grid}.switch img{width:22px;height:22px}.switch .knob{display:none}.switch.on img{filter:invert()}.sel,.bpmin,#octave,.codecard input,.pubcard input{background-color:var(--do-paper);border:0}.bar{border:0;border-top:1px solid color-mix(in srgb, var(--do-border) 64%, transparent);background:0 0;border-radius:0}.bar>.group+.group,.bar>.cloudwrap,.bar>.cloudwrap+.group{border-color:color-mix(in srgb, var(--do-border) 62%, transparent)}.btn{background:var(--do-paper);border:0}.btn:hover{border-color:#0000}.programbtn,.btn.beat{border:0}.bgcard,.pickcard,.piano,#keys,.tile,.fitopt,.pickreset,.getpill,.recpill,.hintbubble{border-color:color-mix(in srgb, var(--do-border) 60%, transparent)}body:before{background-image:radial-gradient(#00000007 .5px,#0000 .75px)}.title-mark,.getpill,.probuy{background:var(--do-ink)}.row.tools .btn.on,.programbtn.on,.btn.beat.on{background:var(--do-ink);border-color:var(--do-ink);color:#fff}.row.tools .btn.on img,.programbtn.on img,.btn.beat.on img{filter:invert()}#play{background:var(--do-ink);border-color:var(--do-ink)}input[type=range]{accent-color:var(--do-ink)}.switch.on{background:var(--do-ink)}.sel,.bpmin,#octave,.btn.word,.codecard input,.pubcard input{background-color:var(--do-soft);border-radius:8px}.prorow.locked{display:none}.prodeck:has(.prorow.locked){grid-template-columns:minmax(0,1fr);padding-block:7px}.prodeck:has(.prorow.locked) .prohome{border-right:0}.studio-summary{color:var(--do-muted);white-space:nowrap;margin-left:auto;font-size:10px;font-weight:500}.prodeck:not(:has(.prorow.locked)) .studio-summary{display:none}body.sky #play,body.photo #play,body.sky .programbtn.on,body.photo .programbtn.on,body.sky .btn.beat.on,body.photo .btn.beat.on{background:var(--do-ink);border-color:var(--do-ink)}.piece-title,.prohome{display:none!important}.titlebar{min-height:62px;padding:4px 2px 8px}.title{letter-spacing:-.065em;font-size:clamp(25px,2.25vw,34px);font-weight:770}.title-mark{width:30px;height:30px;font-size:23px}.title-actions{gap:12px}.sharegroup{gap:10px}.btn.actionbtn,.helpbtn,.recpill{min-width:42px;height:42px;color:var(--do-ink);background:0 0;border:0;border-radius:999px;padding-inline:11px;font-size:12px;font-weight:600}.btn.actionbtn:hover,.helpbtn:hover,.recpill:hover{background:var(--do-soft)}.recpill{color:var(--do-ink);text-transform:none}.recpill .dot{background:var(--do-orange);width:14px;height:14px}.canvas-wrap{background:#fff;border:1px solid #ded5ca;border-radius:16px}.canvas-dock{scrollbar-width:none;background:0 0;border:0;border-top:1px solid #e5ddd2;flex-direction:row;align-items:center;gap:8px;width:100%;min-width:0;height:84px;padding:8px 0 2px;display:flex;overflow:auto hidden}.canvas-dock::-webkit-scrollbar{display:none}.canvas-dock>*{flex:none}.transport{align-items:center;gap:9px;display:flex}#play{background:var(--do-ink);border-radius:50%;width:58px;height:58px}.tempo-control{gap:3px;width:82px;display:grid}.tempo-readout{align-items:baseline;gap:4px;display:flex}.tempo-readout .bpmin{text-align:left;background:0 0;width:52px;height:30px;padding:0;font-size:22px;font-weight:730}.tempo-readout span{color:var(--do-muted);letter-spacing:.04em;font-size:9px;font-weight:650}.tapbtn{height:36px;padding-inline:11px!important}.canvas-dock .row.tools{gap:3px;width:auto;display:flex;overflow:visible}.canvas-dock .row.tools .btn,.canvas-dock .paperrow .btn{background:0 0;border:0;border-radius:13px;flex-direction:column;flex:0 0 40px;gap:3px;width:40px;height:62px;padding:4px 2px 3px;font-size:9px;font-weight:630;display:inline-flex}.canvas-dock .row.tools .btn img,.canvas-dock .paperrow .btn img{width:28px;height:28px}.canvas-dock .row.tools .btn.on{background:var(--do-ink);color:#fff}.canvas-dock .row.tools .btn.on img{filter:invert()}.canvas-dock .palette{grid-template-columns:repeat(9,26px);gap:6px;width:auto;padding-block:5px;display:grid}.canvas-dock .swatch{outline-offset:3px;outline-width:2px;justify-self:auto;width:26px;max-width:none;height:26px}.canvas-dock .paperrow{gap:3px;width:auto;display:flex!important}.canvas-dock .cloudwrap{align-items:center;gap:7px;padding-right:3px;display:flex;position:relative}.dock-label{color:var(--do-muted);font-size:9px;font-weight:620}.canvas-dock #sky{background:var(--do-soft);width:42px;height:42px}.canvas-dock .bgcard{bottom:66px;right:0}.prodeck{background:#fff;border:0;border-left:1px solid #e2d9ce;border-radius:0;min-width:0;padding:10px 16px 48px;display:block;overflow:hidden auto}.side-section:first-child{padding-top:4px}.side-section:last-of-type{border-bottom:0}.side-section h2{color:#7b7167;letter-spacing:.16em;text-transform:uppercase;margin:0 0 14px;font-size:12px;font-weight:720;line-height:1}.side-control>.lbl{margin-bottom:6px;display:block}.side-segment{background:var(--do-soft);border-radius:12px;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px;width:100%;padding:2px;display:grid}.side-segment .programbtn,.side-segment .btn.beat{background:0 0;border:0;border-radius:10px;width:100%;height:50px;padding:4px 2px;font-size:9px}.side-segment .programbtn img,.side-segment .btn.beat img{width:22px;height:22px}.side-segment .programbtn.on,.side-segment .btn.beat.on{background:var(--do-ink);color:#fff}.prorow,.prorow.locked{width:100%;padding:0;overflow:visible;display:block!important}.side-grid{gap:10px;display:grid}.side-grid.two-up{grid-template-columns:repeat(2,minmax(0,1fr))}.side-section .field{gap:5px;min-width:0;display:flex}.side-section .field:first-child{min-width:0}.side-section .lbl{color:#786f66;letter-spacing:.055em;text-transform:uppercase;font-size:9px;font-weight:650}.side-section .fieldrow{width:100%}.side-section .sel,.side-section .bpmin,.side-section .btn.word{background-color:var(--muted);width:100%;height:36px;color:var(--do-ink);border:0;border-radius:9px;font-size:11px;font-weight:570}.side-section .sel{background-position:right 9px center;padding:0 25px 0 9px}.side-section #octave{background:var(--muted);border:0;border-radius:9px;width:100%;max-width:none;height:40px;margin-top:10px}.octave-stepper{background:var(--muted);border-radius:9px;grid-template-columns:32px minmax(24px,1fr) 32px;align-items:center;gap:0;height:36px;display:grid}.octave-stepper .btn{background:0 0;width:32px;height:32px;font-size:16px}.octave-stepper .octval{line-height:32px}.tune-field{margin-top:10px}.tune-row{align-items:center;gap:7px;display:flex}.tune-row .bpmin{text-align:center;width:72px}.tune-row span{color:var(--do-muted);font-size:10px}.setting-toggle{max-width:76px}.setting-toggle.on{background:var(--do-ink);color:#fff}.output-section{grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);align-items:end;gap:12px;display:grid}.output-section h2,.output-section .railmeta{grid-column:1/-1}.output-section .field{align-self:end}.export-field .fieldrow{grid-template-columns:1fr 1fr;gap:6px;display:grid}.railmeta{justify-content:flex-start;align-items:center;margin-top:2px;display:flex}.railmeta .getpill{background:var(--muted);height:32px;color:var(--do-ink);border:0;padding-inline:12px;font-size:9px}.foot{margin:0}.foot .credit{color:#8b8177;font-size:9px;line-height:1.45}.piano:not([hidden]){z-index:35;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#fffffff7;position:fixed;bottom:18px;left:20px;right:20px}@media (width>=900px){body{height:100dvh;padding:9px 18px 12px;overflow:hidden}.app{grid-template:"title title"64px"canvas deck"minmax(0,1fr)"dock deck"84px/minmax(0,1fr) 306px;align-items:stretch;gap:8px 16px;width:100%;max-width:1600px;height:100%;min-height:0;display:grid}.titlebar{grid-area:title}.canvas-wrap{aspect-ratio:auto;grid-area:canvas;width:100%;height:100%;min-height:0}.canvas-dock{grid-area:dock}.prodeck{grid-area:deck}.piano{grid-area:canvas}.foot{z-index:2;padding:0;position:fixed;bottom:12px;right:34px}.foot .getpill{display:none}}@media (width>=1280px){.app{grid-template-columns:minmax(0,1fr) 320px;column-gap:18px}.prodeck{padding-inline:18px}.canvas-dock{gap:9px}.canvas-dock>*+*{padding-left:9px}}@media (width<=899px){body{padding:max(8px, env(safe-area-inset-top)) 10px max(12px, env(safe-area-inset-bottom));overflow-y:auto}.app{gap:9px;width:100%;max-width:760px;display:flex}.titlebar{order:0}.title{font-size:22px}.title-mark{width:27px;height:27px;font-size:20px}.actionbtn span{display:none}.canvas-wrap{aspect-ratio:3/4;order:1;align-self:center;width:min(100%,43.5dvh);max-height:58dvh}.canvas-dock{order:2;height:80px;padding-top:7px}.canvas-dock .palette{grid-template-columns:repeat(9,28px);gap:7px}.canvas-dock .swatch{width:28px;height:28px}.prodeck{border-top:1px solid #e2d9ce;border-left:0;order:3;width:100%;padding:6px 4px 8px;overflow:visible}.sound-section{padding-top:14px}.prorow{grid-template-columns:1fr;display:grid!important}.output-section{grid-template-columns:1fr 1fr}.piano{order:4}.foot{order:5;padding-top:2px}}@media (width<=520px){.title-note-icon{display:none}.title-actions,.sharegroup{gap:2px}.btn.actionbtn,.helpbtn,.recpill{width:36px;min-width:36px;height:36px;padding:0}.recpill span:not(.dot){display:none}.canvas-dock>*+*{padding-left:9px}.canvas-dock{gap:9px}.side-grid.two-up{grid-template-columns:repeat(2,minmax(0,1fr))}}:root{--wm-font-ui:"Avenir Next", "SF Pro Display", "Segoe UI", sans-serif;--wm-font-doodle:"Playpen Sans", "Avenir Next", "Segoe UI", sans-serif;--do-font:var(--wm-font-ui)}body:before{display:none}.title,.canvas-dock .btn span,.programbtn span,.btn.beat span,.side-section h2{font-family:var(--wm-font-doodle)}.canvas-dock{grid-template-columns:86px minmax(0,1fr) 86px;align-items:center;gap:0;padding-inline:0;display:grid;overflow:visible}.canvas-dock>*+*{border-left:0;padding-left:0}.canvas-dock:before{content:"";grid-column:1;display:block}.canvas-dock-main{scrollbar-width:none;grid-column:2;justify-content:center;align-items:center;gap:8px;min-width:0;display:flex;overflow:auto hidden}.canvas-dock-main>*{flex:none}.studio-toggle{background:0 0;border:0;border-radius:13px;flex-direction:column;grid-column:3;justify-self:end;gap:1px;width:78px;height:58px;padding:5px 4px 4px;font-size:9px;font-weight:650;display:inline-flex}.studio-toggle:hover{background:var(--do-soft)}.studio-toggle-state{color:var(--do-muted);font-size:8px;font-weight:520}body.studio-collapsed .studio-toggle{background:var(--do-ink);color:#fff}body.studio-collapsed .studio-toggle img{filter:invert()}.side-segment{background:0 0;gap:10px;padding:0}.side-segment .programbtn,.side-segment .btn.beat{border:0;border-bottom:3px solid #0000;border-radius:0;height:62px;padding:5px 2px 7px;font-size:9px;font-weight:650;position:relative;color:var(--do-ink)!important;background:0 0!important}.side-segment .programbtn img{opacity:.58;width:27px;height:27px;transition:opacity .15s,transform .15s;filter:none!important}.side-segment .programbtn.on,.side-segment .btn.beat.on{border-bottom-color:var(--do-ink);color:var(--do-ink)!important;background:0 0!important}.side-segment .programbtn.on img{opacity:1;transform:translateY(-2px)rotate(-2deg);filter:none!important}.side-segment .btn.beat{height:78px;overflow:visible}.side-segment .btn.beat img{object-fit:contain;opacity:.38;width:48px;height:48px;transition:filter .16s,opacity .16s,transform .16s;transform:scale(.92);filter:grayscale()!important}.side-segment .btn.beat:hover img{opacity:.64;transform:scale(.97)}.side-segment .btn.beat.on img{opacity:1;animation:.9s ease-in-out infinite alternate beat-ready;transform:translateY(-3px)scale(1)rotate(-2deg);filter:none!important}@keyframes beat-ready{0%{transform:translateY(-3px)scale(1)rotate(-2deg)}to{transform:translateY(-5px)scale(1.025)rotate(1deg)}}.prodeck{border-left-color:#e7ded3;padding:8px 16px 18px}.side-section{border-bottom:0;padding:13px 3px 15px}.side-section h2{color:var(--do-ink);letter-spacing:.15em;margin-bottom:13px;font-size:12px;font-weight:760}.side-section .lbl{color:#7d746b;font-weight:690}.side-section .sel,.side-section .bpmin,.side-section .btn.word{background-color:#0000;border:0;border-bottom:1px solid #ded5ca;border-radius:0;height:34px;font-size:11px;font-weight:620}.side-section .sel:hover,.side-section .sel:focus,.side-section .bpmin:hover,.side-section .bpmin:focus{border-bottom-color:var(--do-ink)}.octave-stepper{background:0 0;border-bottom:1px solid #ded5ca;border-radius:0;height:34px}.octave-stepper .btn{background:0 0}.side-section #octave{background:var(--muted);border-radius:9px;height:42px}.setting-toggle{max-width:72px;background:var(--muted)!important;border-bottom:0!important;border-radius:8px!important}.setting-toggle.on{color:#fff;background:var(--do-ink)!important}.export-field .btn.word{background:var(--muted);border-bottom:0;border-radius:8px}@media (width>=900px){.app{grid-template:"title title"64px"canvas deck"minmax(0,1fr)"dock dock"88px/minmax(0,1fr) 320px;column-gap:18px}.canvas-dock{grid-area:dock}.prodeck{grid-area:deck}body.studio-collapsed .app{grid-template-columns:minmax(0,1fr);grid-template-areas:"title""canvas""dock"}body.studio-collapsed .prodeck{display:none}}@media (width<=899px){.canvas-dock{grid-template-columns:minmax(0,1fr) 72px;overflow:hidden}.canvas-dock:before{display:none}.canvas-dock-main{grid-column:1;justify-content:flex-start}.studio-toggle{grid-column:2;width:68px}body.studio-collapsed .prodeck{display:none}}@media (prefers-reduced-motion:reduce){.side-segment .btn.beat.on img{animation:none}}.side-segment{gap:8px}.side-segment .programbtn,.side-segment .btn.beat{outline-offset:-2px;border:0;border-radius:10px;outline:2px solid #0000;background:var(--muted)!important}.side-segment .programbtn{height:58px}.side-segment .btn.beat{height:86px}.side-segment .programbtn.on,.side-segment .btn.beat.on{outline-color:var(--do-ink);border:0;background:var(--muted)!important}.side-segment .programbtn img,.side-segment .programbtn.on img{opacity:.62;transform:none}.side-segment .programbtn.on img{opacity:1}.side-segment .btn.beat img{width:60px;height:60px;transition:none;transform:none}.side-segment .btn.beat:hover img{transform:none}.side-segment .btn.beat.on img{animation:none;transform:none}.side-section .sel,.side-section .bpmin,.side-section .btn.word{background-color:var(--muted);outline-offset:-2px;border:0;border-radius:9px;outline:2px solid #0000}.side-section .sel:hover,.side-section .bpmin:hover{background-color:var(--accent)}.side-section .sel:focus,.side-section .bpmin:focus,.side-section .btn.word:focus-visible{outline-color:var(--do-ink)}.octave-stepper{background:var(--muted);border:0;border-radius:9px}.prodeck{padding-bottom:6px}.side-section{padding-block:10px}.side-section+.side-section{padding-top:12px}.side-section h2{margin-bottom:10px}.side-control+.side-control{margin-top:12px}.railmeta .getpill{height:26px}:root{--wm-select:#df6a3e}button:focus-visible,input:focus-visible,select:focus-visible,a:focus-visible{outline-color:color-mix(in srgb, var(--wm-select) 55%, transparent)}.side-segment .programbtn.on,.side-segment .btn.beat.on,.swatch.on{outline-color:var(--wm-select)}.canvas-dock .row.tools .btn.on{color:var(--do-ink);background:0 0}.canvas-dock .row.tools .btn.on img{box-sizing:border-box;background:var(--wm-select);filter:none;border-radius:50%;width:34px;height:34px;padding:5px}.canvas-dock .row.tools .btn svg{box-sizing:border-box;fill:currentColor;width:28px;height:28px;padding:4px}.canvas-dock .row.tools .btn.on svg{background:var(--wm-select);border-radius:50%;width:34px;height:34px;padding:7px}.titlebar,.canvas-dock,.prodeck{border-color:#0000}.canvas-dock{border-top:0}.canvas-dock-main>*+*{border-left:0;padding-left:8px}.prodeck{border-left:0}@media (width<=899px){.prodeck{border-top:0}}.canvas-dock{background:#fdfaf5;border-radius:18px;padding-inline:12px}.prodeck{background:#fdfaf5;border-radius:18px}@media (width>=900px){.app{column-gap:8px}}.custom-select{width:100%;min-width:0;position:relative}.native-select-hidden{clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;opacity:0;pointer-events:none;overflow:hidden;width:1px!important;height:1px!important;padding:0!important;position:absolute!important}.select-trigger{background:color-mix(in srgb, var(--background) 55%, var(--muted));width:100%;height:36px;color:var(--do-ink);text-align:left;cursor:pointer;border:0;border-radius:10px;justify-content:space-between;align-items:center;gap:8px;padding:0 10px 0 11px;font-size:11px;font-weight:620;display:flex}.select-trigger:hover{background:var(--muted)}.custom-select.open .select-trigger{background:var(--accent)}.select-value{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.select-arrow{flex:0 0 13px;width:13px;height:13px;transition:transform .15s}.select-arrow svg{width:100%;height:100%}.custom-select.open .select-arrow{transform:rotate(180deg)}.select-menu{z-index:60;border:1px solid var(--border);background:var(--popover);border-radius:12px;width:max(100%,148px);max-height:214px;padding:5px;position:absolute;top:calc(100% + 5px);left:0;overflow-y:auto}.select-menu[hidden]{display:none}.select-option{width:100%;min-height:32px;color:var(--do-ink);text-align:left;cursor:pointer;background:0 0;border:0;border-radius:8px;padding:7px 28px 7px 9px;font-size:11px;font-weight:560;position:relative}.select-option:hover,.select-option:focus-visible{background:var(--muted);outline:0}.select-option.selected{background:var(--accent);font-weight:680}.select-option.selected:after{content:"";background:var(--wm-select);border-radius:50%;width:7px;height:7px;position:absolute;top:50%;right:11px;transform:translateY(-50%)}.canvas-dock .cloudwrap{gap:6px}.background-choices{align-items:center;gap:5px;display:flex}.background-choice{width:42px;height:56px;color:var(--do-ink);cursor:pointer;background:0 0;border:0;border-radius:10px;flex-direction:column;justify-content:center;align-items:center;gap:3px;padding:3px 2px 2px;font-size:8px;font-weight:620;display:inline-flex}.background-choice[hidden],.background-choices .fitrow[hidden]{display:none!important}.background-preview{background:#fff;border-radius:8px;width:34px;height:30px;position:relative;overflow:hidden;box-shadow:inset 0 0 0 1px #e3dbd0}.paper-preview{background:#fff}.paper-preview:after{content:"";opacity:.55;background-image:radial-gradient(#ded5ca .6px,#0000 .7px);background-size:6px 6px;position:absolute;inset:0}.photo-preview{background-position:50%;background-size:cover}.background-choice.on .background-preview{outline:2px solid var(--wm-select);outline-offset:2px}.background-add{color:#7b7269;cursor:pointer;background:#f1ece4;border:0;border-radius:9px;width:27px;height:32px;padding:0;font-size:17px;font-weight:450}.background-add:hover{color:var(--do-ink);background:#e8e0d6}.background-choices .fitrow{gap:3px}.background-choices .fitopt{background:#f1ece4;border:0;border-radius:8px;width:27px;height:27px}.studio-toggle,body.sky .studio-toggle,body.photo .studio-toggle{width:52px;height:48px;color:var(--do-ink);-webkit-backdrop-filter:none;backdrop-filter:none;background:#f1ece4;border-radius:12px;gap:0;padding:4px 3px 3px}.studio-toggle:hover,body.sky .studio-toggle:hover,body.photo .studio-toggle:hover{background:#e8e0d6}.studio-toggle-label{font-size:8px}.studio-toggle-state{font-size:7px}body.studio-collapsed .studio-toggle,body.sky.studio-collapsed .studio-toggle,body.photo.studio-collapsed .studio-toggle{color:var(--do-ink);background:#fbe9df}body.studio-collapsed .studio-toggle img,body.sky.studio-collapsed .studio-toggle img,body.photo.studio-collapsed .studio-toggle img{filter:none}body.studio-collapsed .studio-toggle-state{color:var(--do-muted)}@media (width>=900px){.canvas-dock{grid-template-columns:58px minmax(0,1fr) 58px}}@media (width<=899px){.canvas-dock{grid-template-columns:minmax(0,1fr) 56px}.studio-toggle{width:52px}}.canvas-dock{height:76px;padding:7px 10px}.canvas-dock-main{gap:9px}.canvas-dock-main>*+*{padding-left:0}#play{width:50px;height:50px}#play img{width:24px;height:24px}.transport{gap:7px}.tempo-control{width:76px}.tempo-readout .bpmin{width:48px;font-size:20px}.transport input[type=range]{width:74px}.tapbtn{height:34px;border-radius:10px!important;padding-inline:10px!important}.canvas-dock .row.tools{background:#f1ece4;border-radius:14px;gap:2px;padding:3px}.canvas-dock .row.tools .btn,.canvas-dock .paperrow .btn{border-radius:11px;flex-basis:38px;justify-content:center;width:38px;height:38px;padding:0}.canvas-dock .row.tools .btn:hover,.canvas-dock .paperrow .btn:hover{background:#e6ddd2}.canvas-dock .row.tools .btn svg{width:22px;height:22px;padding:3px}.canvas-dock .paperrow{gap:2px}.canvas-dock .palette{grid-template-columns:repeat(9,24px);gap:6px;padding-block:4px}.dock-label{display:none}.canvas-dock .cloudwrap{padding-right:0}.studio-toggle,body.sky .studio-toggle,body.photo .studio-toggle{border-radius:11px;width:48px;height:44px}.tip{--tip-arrow-x:50%;z-index:80;color:#fff;font-family:var(--wm-font-ui);letter-spacing:0;transform-origin:bottom;background:#17191c;border:1px solid #ffffff1a;border-radius:6px;padding:6px 8px;font-size:11px;font-weight:550;line-height:1.2;transition:opacity .12s,transform .12s;transform:translateY(2px)scale(.98);box-shadow:0 4px 12px #11141824}.tip:after{content:"";left:var(--tip-arrow-x);background:#17191c;width:7px;height:7px;position:absolute;top:100%;transform:translate(-50%,-4px)rotate(45deg)}.tip.show{opacity:1;transform:translateY(0)scale(1)}.tip.below{transform-origin:top}.tip.below:after{top:auto;bottom:100%;transform:translate(-50%,4px)rotate(45deg)}@media (width>=900px){.canvas-dock{grid-template-columns:54px minmax(0,1fr) 54px}}@media (width<=1120px) and (width>=900px){.canvas-dock-main{justify-content:flex-start}.canvas-dock .palette{grid-template-columns:repeat(9,22px);gap:5px}.canvas-dock .swatch{width:22px;height:22px}}@media (width<=899px){.canvas-dock{height:72px;padding:6px 8px}.canvas-dock-main{justify-content:flex-start}.studio-toggle{width:48px}}.background-choice{border-radius:50%;flex-direction:row;gap:0;width:38px;height:38px;padding:2px;font-size:0}.background-choice:hover{background:#e8e0d6}.legacy-background-toggle[hidden]{display:none!important}.background-preview{border-radius:50%;width:32px;height:32px}.photo-preview{background:#f1ece4 50%/cover}.photo-preview:before,.photo-preview:after{content:"";pointer-events:none;position:absolute}.photo-preview:before{border:1.4px solid #756b61;border-radius:3px;width:16px;height:13px;top:8px;left:8px}.photo-preview:after{clip-path:polygon(0 100%,36% 28%,55% 60%,75% 38%,100% 100%);background:#756b61;width:10px;height:6px;top:14px;left:11px}.photo-preview.has-photo:before,.photo-preview.has-photo:after{display:none}.side-segment .btn.beat,.side-segment .btn.beat:hover,.side-segment .btn.beat:active,.side-segment .btn.beat.on{transition:background-color .14s,outline-color .14s;transform:none}.side-segment .btn.beat img,.side-segment .btn.beat:hover img,.side-segment .btn.beat:active img,.side-segment .btn.beat.on img{animation:none;transform:none}.canvas-dock:before{display:none}.canvas-dock-main{grid-column:1;justify-content:flex-start}.studio-toggle{grid-column:2}.tempo-readout .bpmin{font-variant-numeric:tabular-nums;letter-spacing:-.04em}.transport input[type=range]#speed{--tempo-progress:42.86%;appearance:none;cursor:pointer;background:0 0;border:0;outline:0;width:84px;height:18px;margin:0;padding:0}.transport #speed::-webkit-slider-runnable-track{background:linear-gradient(to right, var(--do-ink) 0 var(--tempo-progress), #d9cfc3 var(--tempo-progress) 100%);border-radius:999px;height:4px}.transport #speed::-webkit-slider-thumb{appearance:none;border:3px solid var(--do-ink);background:#fff;border-radius:50%;width:14px;height:14px;margin-top:-5px;transition:border-color .12s,transform .12s}.transport #speed:hover::-webkit-slider-thumb{transform:scale(1.08)}.transport #speed:active::-webkit-slider-thumb{border-color:var(--wm-select);transform:scale(1.08)}.transport #speed:focus-visible::-webkit-slider-thumb{outline:3px solid color-mix(in srgb, var(--wm-select) 28%, transparent);outline-offset:2px}.transport #speed::-moz-range-track{background:#d9cfc3;border:0;border-radius:999px;height:4px}.transport #speed::-moz-range-progress{background:var(--do-ink);border-radius:999px;height:4px}.transport #speed::-moz-range-thumb{border:3px solid var(--do-ink);background:#fff;border-radius:50%;width:9px;height:9px}.transport #speed:focus-visible::-moz-range-thumb{outline:3px solid color-mix(in srgb, var(--wm-select) 28%, transparent);outline-offset:2px}@media (width<=899px){.canvas-dock{grid-template-columns:minmax(0,1fr) 50px}.studio-toggle{grid-column:2}}.canvas-dock{grid-template-columns:180px minmax(0,1fr) 180px}.canvas-dock-main{grid-column:1/3;grid-template-columns:180px minmax(0,1fr);align-items:center;gap:0;width:100%;display:grid;overflow:visible}.transport{grid-column:1;justify-self:start}.creative-controls{grid-column:2;justify-content:center;align-items:center;gap:8px;min-width:0;max-width:100%;display:flex}.creative-controls>*{flex:none}.studio-toggle,body.sky .studio-toggle,body.photo .studio-toggle{border-radius:50%;grid-column:3;justify-self:end;width:42px;height:42px;padding:0}.studio-toggle img{width:22px;height:22px}.canvas-dock .row.tools .btn,.canvas-dock .paperrow .btn{flex-basis:42px;width:42px;height:42px}.canvas-dock .row.tools .btn svg{width:24px;height:24px}.canvas-dock .row.tools .btn.on svg{width:36px;height:36px;padding:8px}.canvas-dock .palette{grid-template-columns:repeat(9,27px);gap:6px}.canvas-dock .swatch{width:27px;height:27px}.background-choice{width:42px;height:42px}.background-preview{width:36px;height:36px}.sky-preview{background:#4bb8ed}.sky-preview img{object-fit:cover;width:100%;height:100%;display:block}.photo-preview{place-items:center;display:grid}.photo-preview:before,.photo-preview:after{display:none}.photo-preview img{opacity:.76;width:21px;height:21px;display:block}.photo-preview.has-photo img{display:none}@media (width<=1200px) and (width>=900px){.canvas-dock-main{scrollbar-width:none;overflow:auto hidden}.canvas-dock-main::-webkit-scrollbar{display:none}.creative-controls{scrollbar-width:none;justify-content:flex-start;overflow-x:auto}.creative-controls::-webkit-scrollbar{display:none}}@media (width<=899px){.canvas-dock{height:auto;min-height:224px;padding:10px 8px 11px;display:block;overflow:visible}.canvas-dock-main{grid-template-columns:minmax(0,1fr);gap:9px;width:100%;display:grid;overflow:visible}.transport{grid-column:1;justify-self:start}.creative-controls{grid-column:1;grid-template-columns:auto auto;justify-content:start;align-items:center;gap:8px 10px;width:100%;max-width:100%;display:grid;overflow:visible}.creative-controls .row.tools,.creative-controls .palette{grid-column:1/-1;justify-self:start}.creative-controls .paperrow{grid-column:1;justify-self:start}.creative-controls .cloudwrap{grid-column:2;justify-self:start}.studio-toggle{display:none!important}body.studio-collapsed .prodeck{display:block}}@media (width>=900px){.canvas-dock{grid-template-columns:minmax(0,1fr) 50px}.canvas-dock-main{grid-column:1;grid-template-columns:auto minmax(0,1fr);min-width:0;overflow:hidden}.transport{grid-column:1}.creative-controls{scrollbar-width:none;grid-column:2;justify-content:center;width:100%;min-width:0;overflow:auto hidden}.creative-controls::-webkit-scrollbar{display:none}.studio-toggle,body.sky .studio-toggle,body.photo .studio-toggle{grid-column:2;width:42px;height:42px}}.tempo-control{gap:3px;width:132px}.tempo-topline{justify-content:space-between;align-items:center;gap:8px;min-height:28px;display:flex}.tempo-readout{gap:3px}.tempo-readout .bpmin{width:46px;font-size:20px;line-height:1}.tempo-readout span{letter-spacing:.04em;font-size:8px}.tapbtn{background:#f1ece4;flex:0 0 38px;width:38px;min-width:38px;height:27px;min-height:27px;font-size:10px;font-weight:600;border:0!important;border-radius:999px!important;padding:0!important}.tapbtn:hover{background:#e6ddd2}.transport input[type=range]#speed{width:132px}.canvas-dock #play{border-color:#0000;width:48px;height:48px;transition:background-color .14s,color .14s,transform .12s}.canvas-dock #play svg{fill:currentColor;width:20px;height:20px;transform:translate(1px)}.canvas-dock #play:not(.on),body.sky .canvas-dock #play:not(.on),body.photo .canvas-dock #play:not(.on){color:var(--do-ink);background:#f1ece4}.canvas-dock #play:not(.on):hover,body.sky .canvas-dock #play:not(.on):hover,body.photo .canvas-dock #play:not(.on):hover{background:#e6ddd2}.canvas-dock #play.on,body.sky .canvas-dock #play.on,body.photo .canvas-dock #play.on{background:var(--do-ink);color:#fff}.visually-hidden{clip:rect(0, 0, 0, 0)!important;white-space:nowrap!important;border:0!important;width:1px!important;height:1px!important;margin:-1px!important;padding:0!important;position:absolute!important;overflow:hidden!important}.brush-shelf{flex-direction:column;align-items:stretch;gap:3px;min-width:0;display:flex}.brush-strip{scrollbar-width:none;scroll-snap-type:x proximity;align-items:center;gap:3px;max-width:336px;padding:2px 2px 4px;display:flex;overflow:auto hidden}.brush-strip::-webkit-scrollbar{display:none}.brush-choice,body.sky .brush-choice,body.photo .brush-choice{width:45px;min-width:45px;height:49px;box-shadow:none;cursor:pointer;scroll-snap-align:start;background:0 0;border:0;border-radius:13px 10px 14px 11px/11px 14px 10px 13px;padding:3px;transition:background-color .12s,transform .12s,box-shadow .12s}.brush-choice:hover{background:#f1ece4;transform:translateY(-1px)}.brush-choice.on,body.sky .brush-choice.on,body.photo .brush-choice.on{background:#fbe9df;border-color:#0000;border-radius:999px;transform:translateY(-2px)rotate(-1deg);box-shadow:inset 0 0 0 1.5px #e49a78}.brush-choice img,.canvas-dock #pen img,.canvas-dock #erase img{object-fit:contain;filter:none;width:39px;height:39px;margin:auto;display:block}.brush-shelf-head{justify-content:flex-end;min-height:13px;padding:0 5px;display:flex}.brush-size-row{border:0;justify-content:center;align-items:center;gap:5px;margin:0;padding:0;display:flex}.brush-size-choice{width:28px;height:28px;color:var(--do-ink);cursor:pointer;background:0 0;border:0;border-radius:50%;place-items:center;padding:0;display:grid}.brush-size-choice:hover{background:#eee8e0}.brush-size-choice.on{background:#fbe9df;box-shadow:inset 0 0 0 1.5px #e49a78}.brush-size-choice:focus-visible{outline:2px solid var(--do-ink);outline-offset:2px}.brush-size-choice:disabled{opacity:.3;cursor:default}.brush-size-choice span{width:var(--brush-dot);height:var(--brush-dot);pointer-events:none;background:currentColor;border-radius:50%}.drawing-actions{border-left:1px solid #e7ded3;padding-left:4px}@media (width<=899px){.canvas-dock{min-height:278px}.creative-controls .brush-shelf{grid-column:1/-1;width:100%;max-width:100%}.brush-strip{width:100%;max-width:none}.brush-choice,body.sky .brush-choice,body.photo .brush-choice{width:47px;min-width:47px;height:51px}.brush-choice img,.canvas-dock #pen img,.canvas-dock #erase img{width:41px;height:41px}.brush-shelf-head{justify-content:center}.creative-controls .drawing-actions{border-left:0;grid-column:1/-1;padding-left:0}.tempo-control,.transport input[type=range]#speed{width:132px}}.side-control .side-segment{grid-template-columns:repeat(3,64px);width:max-content;max-width:100%}.side-segment .programbtn,.side-segment .btn.beat{width:64px;height:64px;transition:none!important;animation:none!important;transform:none!important}.side-segment .programbtn:hover,.side-segment .programbtn:active,.side-segment .programbtn.on,.side-segment .btn.beat:hover,.side-segment .btn.beat:active,.side-segment .btn.beat.on{animation:none!important;transform:none!important}.side-segment .programbtn img,.side-segment .btn.beat img{object-fit:contain;opacity:.42;width:40px;height:40px;filter:grayscale()!important;transition:none!important;animation:none!important;transform:none!important}.side-segment .programbtn:hover img,.side-segment .btn.beat:hover img{opacity:.62}.side-segment .programbtn.on img,.side-segment .btn.beat.on img{opacity:1;filter:none!important;animation:none!important;transform:none!important}body.sky,body.photo{background:var(--do-background)}body.sky .app,body.photo .app{isolation:isolate;background:0 0;position:relative;overflow:hidden}body.sky:before,body.photo:before{content:"";z-index:0;pointer-events:none;opacity:1;height:100dvh;display:block;position:absolute;top:0;left:0;right:0}body.sky:before{background:radial-gradient(closest-side,#fffffff2,#fff0 100%) 82% 8%/520px 360px no-repeat,radial-gradient(closest-side,#ffffffbf,#fff0 100%) 0 42%/360px 260px no-repeat,radial-gradient(closest-side,#ffffffd9,#fff0 100%) 22% 86%/480px 320px no-repeat,radial-gradient(closest-side,#ffffff8c,#fff0 100%) 72% 98%/420px 280px no-repeat,linear-gradient(#93b6df,#a4c0e3 55%,#b9cde8)}body.photo:before{background-color:var(--do-background);background-image:var(--photo);background-position:50%;background-repeat:no-repeat;background-size:cover}body.photo.fit-contain:before{background-size:contain}body.photo.fit-stretch:before{background-size:100% 100%}body.sky .wm-below,body.photo .wm-below{z-index:1;background:#fff;position:relative}@media (width>=900px){.app{grid-template-rows:48px minmax(0,1fr) 88px}.titlebar{gap:8px;height:48px;min-height:0;padding:0 2px}.title{letter-spacing:-.055em;gap:6px;font-size:24px}.title-mark{width:24px;height:24px;font-size:18px}.title-note-icon{width:17px;height:17px}.title-actions{gap:6px}.sharegroup{gap:4px}.btn.actionbtn,.helpbtn,.recpill{min-width:34px;height:34px;padding-inline:9px;font-size:11px}.actionbtn img{width:15px;height:15px}}.draw-section .brush-choice,body.sky .draw-section .brush-choice,body.photo .draw-section .brush-choice{width:100%;min-width:0;height:44px;padding:3px}.draw-section .brush-choice img,.draw-section #pen img,.draw-section #erase img{width:34px;height:34px}.draw-section .swatch{aspect-ratio:1;place-items:center;width:100%;max-width:27px;height:auto;display:grid;position:relative}.swatch-edit-icon{pointer-events:none;filter:drop-shadow(0 1px 1px #0000002e);width:15px;height:15px}.draw-section .row.tools .btn,.draw-section .paperrow .btn{flex:0 0 40px;width:40px;height:40px}.draw-section .row.tools .btn svg,.draw-section .paperrow .btn img{width:22px;height:22px}.draw-section .background-choice{width:42px;height:42px}.draw-section .background-preview{width:36px;height:36px}.app{box-sizing:border-box;background:0 0;border:0;border-radius:0;padding:0;overflow:visible}.editor-surface{--do-paper:var(--background);--do-background:color-mix(in srgb, var(--background) 68%, var(--muted));--do-soft:var(--muted);--do-muted:var(--muted-foreground);--do-border:var(--border);--do-accent:var(--primary);--do-accent-soft:var(--accent);--paper:var(--do-background);--raised:var(--background);--hair:var(--border);--record:var(--primary);--wm-select:var(--primary);isolation:isolate;box-sizing:border-box;background:var(--do-background);border:0;border-radius:16px;width:100%;padding:8px 12px;position:relative;overflow:hidden}.titlebar{background:0 0}.canvas-toolbar{background:0 0;justify-content:center;align-items:center;min-width:0;min-height:44px;padding:0 7px;display:flex;position:relative}.canvas-toolbar .drawing-actions{border:0;flex-wrap:nowrap;gap:7px;width:auto;padding:0;display:flex}.canvas-toolbar .paperrow{display:contents}.canvas-toolbar .row.tools .btn{background:#fffdfac7;border:0;border-radius:14px;flex:0 0 38px;width:38px;min-width:38px;height:38px;padding:7px}.canvas-toolbar .row.tools .btn:hover{background:#fffdfa}.canvas-toolbar .row.tools .gridbtn.on{background:var(--accent);color:var(--primary);box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--primary) 35%, transparent)}.btn.editor-action:hover{transform:none}.btn.editor-action:active{transform:scale(.97)}.canvas-toolbar .row.tools .btn svg{width:22px;height:22px}.canvas-dock,body.sky .canvas-dock,body.photo .canvas-dock{-webkit-backdrop-filter:none;backdrop-filter:none;background:0 0;border:0;border-radius:0}.prodeck,body.sky .prodeck,body.photo .prodeck{background:color-mix(in srgb, var(--background) 91%, transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:0;border-radius:14px}.editor-surface .brush-strip,.editor-surface .side-segment .programbtn,.editor-surface .side-segment .btn.beat{background:color-mix(in srgb, var(--background) 72%, var(--muted))!important}.editor-surface .side-segment .programbtn.on,.editor-surface .side-segment .btn.beat.on{outline-color:var(--primary);background:#fff!important}body.sky:before,body.photo:before{display:none}body.sky .editor-surface,body.photo .editor-surface{background:0 0}body.sky .editor-surface:before,body.photo .editor-surface:before{content:"";z-index:-2;pointer-events:none;position:absolute;inset:0}body.sky .editor-surface:before{background:radial-gradient(closest-side,#fffffff2,#fff0 100%) 82% 8%/520px 360px no-repeat,radial-gradient(closest-side,#ffffffbf,#fff0 100%) 0 42%/360px 260px no-repeat,radial-gradient(closest-side,#ffffffd9,#fff0 100%) 22% 86%/480px 320px no-repeat,radial-gradient(closest-side,#ffffff8c,#fff0 100%) 72% 98%/420px 280px no-repeat,linear-gradient(#93b6df,#a4c0e3 55%,#b9cde8)}body.photo .editor-surface:before{background-color:var(--do-background);background-image:var(--photo);background-position:50%;background-repeat:no-repeat;background-size:cover}body.photo.fit-contain .editor-surface:before{background-size:contain}body.photo.fit-stretch .editor-surface:before{background-size:100% 100%}.canvas-wrap,body.sky .canvas-wrap,body.photo .canvas-wrap{border:0;border-radius:10px}@media (width>=900px){.app{flex-direction:column;gap:6px;display:flex}.editor-surface{flex:auto;grid-template-columns:minmax(0,1fr) 320px;grid-template-areas:"canvas-tools canvas-tools""canvas deck""dock dock";gap:6px 8px;min-height:0;display:grid}.canvas-toolbar{grid-area:canvas-tools}body.studio-collapsed .editor-surface{grid-template-columns:minmax(0,1fr);grid-template-areas:"canvas-tools""canvas""dock"}}@media (width<=899px){.app{gap:8px;padding:0}.editor-surface{border-radius:14px;flex-direction:column;gap:8px;padding:7px 10px;display:flex}.canvas-toolbar{order:1;min-height:42px;padding-inline:4px}.canvas-wrap{order:2}.canvas-dock{order:3}.prodeck{order:4}}.canvas-dock,body.sky .canvas-dock,body.photo .canvas-dock{grid-template-columns:minmax(0,1fr) auto 38px;align-items:center;gap:7px;height:60px;min-height:60px;padding:4px 7px;display:grid}.canvas-dock-main{scrollbar-width:none;grid-column:1;align-items:center;gap:10px;width:100%;min-width:0;display:flex;overflow:auto hidden}.canvas-dock-main::-webkit-scrollbar{display:none}.canvas-dock .transport{flex:none;gap:6px}.canvas-dock #play{width:42px;height:42px}.canvas-dock #play svg{width:15px;height:15px}.canvas-dock .tempo-control,.canvas-dock .transport input[type=range]#speed{width:112px}.canvas-dock .tempo-readout .bpmin{width:43px;font-size:18px}.canvas-dock .tapbtn{height:26px;font-size:9px;padding-inline:8px!important}.canvas-dock .creative-controls{justify-content:flex-start;align-items:center;gap:7px;width:max-content;min-width:max-content;display:flex;overflow:visible}.canvas-dock .brush-strip{background:color-mix(in srgb, var(--background) 62%, var(--muted));border-radius:11px;gap:3px;width:auto;max-width:none;padding:2px;display:flex;overflow:visible}.canvas-dock .brush-choice,body.sky .canvas-dock .brush-choice,body.photo .canvas-dock .brush-choice{border-radius:9px;width:36px;min-width:36px;height:38px;padding:2px;transform:none}.canvas-dock .brush-choice.on,body.sky .canvas-dock .brush-choice.on,body.photo .canvas-dock .brush-choice.on{box-shadow:none;z-index:1;background:0 0;transform:translateY(-5px)scale(1.25)}.canvas-dock .brush-choice img,.canvas-dock #pen img,.canvas-dock #erase img{width:32px;height:32px}.brush-size-picker{flex:none;position:relative}.brush-size-trigger{border:1px solid var(--border);background:var(--background);width:36px;height:36px;color:var(--foreground);cursor:pointer;border-radius:50%;place-items:center;padding:0;display:grid}.brush-size-trigger[aria-expanded=true]{border-color:var(--primary);box-shadow:0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent)}.brush-size-trigger>span{width:var(--brush-dot);height:var(--brush-dot);background:currentColor;border-radius:50%}.brush-size-popover{z-index:70;border:1px solid var(--border);background:var(--popover);color:var(--popover-foreground);border-radius:10px;padding:7px;position:fixed;top:50%;left:50%;transform:translate(-50%,-100%);box-shadow:0 8px 24px #4a37281f}.editor-surface .lbl,.editor-surface .side-section .lbl,.editor-surface .studio-toggle-state{color:var(--muted-foreground)}.brush-size-popover[hidden]{display:none}.brush-size-popover .brush-size-row{gap:3px}.brush-size-popover .brush-size-choice.on{background:var(--accent);box-shadow:inset 0 0 0 1.5px var(--primary)}.canvas-dock .palette{grid-template-columns:repeat(9,24px);gap:6px;width:auto;padding:0;display:grid}.canvas-dock .swatch{width:24px;max-width:none;height:24px}.canvas-dock .paperrow{gap:0;display:flex}.canvas-dock .paperrow .btn{border-radius:9px;flex-basis:36px;width:36px;height:36px}.canvas-dock .paperrow .btn img{width:20px;height:20px}.canvas-dock .dock-background{grid-column:2;justify-self:end;padding:0}.canvas-dock .background-choice{width:36px;height:36px}.canvas-dock .background-preview{width:30px;height:30px}.canvas-dock .studio-toggle,body.sky .canvas-dock .studio-toggle,body.photo .canvas-dock .studio-toggle{grid-column:3;justify-self:end;width:36px;height:36px}.canvas-dock .studio-toggle img{width:19px;height:19px}@media (width<=899px){.canvas-dock,body.sky .canvas-dock,body.photo .canvas-dock{scrollbar-width:none;align-items:center;gap:8px;overflow:auto hidden;display:flex!important}.canvas-dock::-webkit-scrollbar{display:none}.canvas-dock-main{flex:none;width:max-content;min-width:max-content;overflow:visible}.canvas-dock .dock-background{flex:none}}@media (width>=1200px){.canvas-dock,body.sky .canvas-dock,body.photo .canvas-dock{grid-template-columns:180px minmax(0,1fr) auto 38px;position:relative}.canvas-dock-main{display:contents}.canvas-dock .transport{grid-column:1}.canvas-dock .creative-controls{grid-column:1/-1;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.canvas-dock .dock-background{grid-column:3}.canvas-dock .studio-toggle,body.sky .canvas-dock .studio-toggle,body.photo .canvas-dock .studio-toggle{grid-column:4}}@media (width<=599px){.canvas-toolbar .drawing-actions{gap:3px}.canvas-toolbar .row.tools .btn{border-radius:12px;flex:0 0 30px;width:30px;min-width:30px;height:30px;padding:5px}.canvas-toolbar .row.tools .btn svg{width:19px;height:19px}}