.gribou-canvas{aspect-ratio:1.8;isolation:isolate;background:#faf8f1;border-radius:12px;width:100%;min-width:0;height:100%;min-height:260px;position:relative;overflow:hidden;box-shadow:inset 0 0 0 1px #817b6019,0 5px 22px #393c2205}.gribou-canvas__surface{position:absolute;inset:0}.gribou-canvas__surface>canvas{touch-action:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;display:block;width:100%!important;height:100%!important}.gribou-canvas__surface>canvas:focus-visible{outline-offset:-4px;border-radius:12px;outline:2px solid #788857}.gribou-canvas__instructions{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.gribou-canvas__notice{color:#61684f;text-align:center;background:#faf8f1e8;flex-direction:column;justify-content:center;align-items:center;gap:12px;padding:24px;font-family:inherit;font-size:14px;line-height:1.5;display:flex;position:absolute;inset:0}.gribou-canvas__notice button{font:inherit;color:#fff;cursor:pointer;background:#788857;border:1px solid #788857;border-radius:24px;padding:10px 22px}.gribou-canvas__compatibility{pointer-events:none;color:#757c64;background:#faf8f1dc;border-radius:12px;padding:3px 7px;font:10px/1.4 sans-serif;position:absolute;top:9px;right:12px}@media (width<=540px){.gribou-canvas{aspect-ratio:1.05;border-radius:10px;min-height:300px}}.rebond-signature{border-top:1px solid var(--line);margin-top:24px;padding-top:20px}.rebond-signature-heading{align-items:center;gap:12px;margin-bottom:12px;display:flex}.rebond-signature-heading svg{flex-shrink:0;width:76px;height:42px}.rebond-signature-heading h3{font:28px var(--serif)}.rebond-signature>p{color:var(--muted);margin-bottom:14px;font-size:14px;line-height:1.65}.rebond-signature>button{max-width:100%;min-height:44px}@font-face{font-family:DM Sans;font-style:normal;font-weight:400 700;font-display:swap;src:url(/fonts/dm-sans-normal-latin-ext-a5d38fe99f.woff2)format("woff2");unicode-range:U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:DM Sans;font-style:normal;font-weight:400 700;font-display:swap;src:url(/fonts/dm-sans-normal-latin-9fea608a94.woff2)format("woff2");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Instrument Serif;font-style:italic;font-weight:400;font-display:swap;src:url(/fonts/instrument-serif-italic-latin-ext-d001482125.woff2)format("woff2");unicode-range:U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Instrument Serif;font-style:italic;font-weight:400;font-display:swap;src:url(/fonts/instrument-serif-italic-latin-5a51946dff.woff2)format("woff2");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Instrument Serif;font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/instrument-serif-normal-latin-ext-290e6267dd.woff2)format("woff2");unicode-range:U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Instrument Serif;font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/instrument-serif-normal-latin-5eb09b5ac0.woff2)format("woff2");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}:root{color:#30352c;font-synthesis:none;--paper:#fffef9;--olive:#66774b;--line:#ddded2;--muted:#666c60;--serif:"Instrument Serif",Georgia,serif;-webkit-font-smoothing:antialiased;text-rendering:optimizelegibility;background:#f4f2eb;font-family:DM Sans,sans-serif}*{box-sizing:border-box}body{min-width:320px;margin:0}button,input,select{font:inherit;color:inherit}button{cursor:pointer;-webkit-tap-highlight-color:transparent;background:0 0;border:0;min-width:44px;min-height:44px}button:disabled{cursor:default;opacity:.4}button,a,input,select,summary{outline-offset:3px}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:2px solid var(--olive)}button{transition:background .15s,box-shadow .15s,transform .15s}button:active:not(:disabled){transform:translateY(1px)}button svg{flex-shrink:0}p,h1,h2,h3{margin:0}svg{display:block}::selection{background:#dce4c8}.sr-only{clip:rect(0,0,0,0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.app-shell{max-width:1800px;margin:auto;padding:0 32px}.app-header{border-bottom:1px solid var(--line);justify-content:space-between;align-items:center;gap:16px;height:60px;display:flex}.brand,.app-header nav{align-items:center;display:flex}.brand{color:#343c2b;gap:5px}.brand>span{font-family:var(--serif);letter-spacing:-1.4px;font-size:32px;line-height:1}.brand svg{width:42px;height:28px}.brand-dot{color:#ca745c}.app-header nav{gap:8px}.header-button,.button,.text-button,.preview-button{justify-content:center;align-items:center;gap:8px;display:inline-flex}.header-button{border-radius:8px;padding:8px 12px;font-size:13px}.header-button:hover,.icon-button:hover:not(:disabled),.tool-button:hover:not(:disabled){background:#e9e9df}.icon-button,.tool-button{border-radius:8px;flex-shrink:0;justify-content:center;align-items:center;width:44px;height:44px;padding:0;display:inline-flex}.button{border-radius:8px;padding:10px 16px;font-size:13px;font-weight:550}.primary{background:var(--olive);color:#fff;box-shadow:0 2px 4px #3b482515}.primary:hover:not(:disabled){background:#53633c}.secondary{background:#eceee3;border:1px solid #d9ddcc}.danger{color:#8a382e;background:#f5e2dc}.text-button{color:#506238;padding:8px;font-size:13px}.text-button:hover{text-decoration:underline}.startup{text-align:center;flex-direction:column;justify-content:center;align-items:center;gap:24px;min-height:65svh;padding:24px;display:flex}.startup h1{font:40px var(--serif)}.startup p{align-items:center;gap:10px;max-width:480px;line-height:1.6;display:flex}.page-heading{justify-content:space-between;align-items:center;gap:16px;min-height:70px;padding:12px 3px;display:flex}.page-name{min-width:0;font:30px var(--serif);overflow-wrap:anywhere;flex:1}.title-field{align-items:center;gap:8px;min-width:0;display:flex}.title-field input{font-family:var(--serif);background:0 0;border:0;border-radius:0;width:100%;min-width:0;height:34px;padding:0;font-size:22px;line-height:1.2}.title-field svg{color:#8b907e;opacity:.55;flex-shrink:0;transition:opacity .2s}.title-field:hover svg,.title-field:focus-within svg{opacity:1}.studio-error,.message{font-size:13px;line-height:1.55}.studio-error{background:#f5e4dd;border:1px solid #e9d0c4;border-radius:8px;align-items:center;gap:12px;margin-bottom:10px;padding:6px 12px;display:flex}.studio-error>span{flex:1}.message{background:#eef0e5;border-radius:8px;margin:14px 0;padding:12px}.message.error{color:#853c30;background:#f5e4dd}.message.warning{color:#715625;background:#f7ecd6}.paper{background:var(--paper);border:1px solid #dbddcf;border-radius:13px;position:relative;overflow:hidden;box-shadow:0 3px 3px #333a1e03,0 14px 45px #333a1e06}.canvas-toolbar{border-bottom:1px solid #e9e9df;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;min-height:66px;padding:9px 14px;display:grid}.drawing-tools,.history-tools{align-items:center;gap:2px;display:flex}.drawing-tools{border-right:1px solid var(--line);justify-self:start;padding-right:10px}.history-tools{justify-self:end}.tool-divider{background:var(--line);width:1px;height:24px;margin:0 6px 0 8px}.tool-button[aria-pressed=true]{color:#465931;background:#e9eddf}.color-palette{justify-content:center;align-items:center;gap:6px;display:flex}.color-choice{border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:44px;height:44px;padding:0;display:flex;position:relative}.color-choice:before{content:"";border:2px solid var(--ink);opacity:0;border-radius:50%;transition:opacity .15s,transform .2s cubic-bezier(.2,.8,.3,1.2);position:absolute;inset:1px;transform:scale(.7)}.color-choice[aria-pressed=true]:before{opacity:1;transform:none}.color-choice:hover:not(:disabled){background:var(--soft-ink)}.color-swatch{background:var(--ink);width:32px;height:32px;color:var(--icon);border-radius:50%;justify-content:center;align-items:center;transition:transform .15s;display:flex;box-shadow:inset 0 1px #ffffff30,inset 0 -2px #00000018}.color-choice:hover:not(:disabled) .color-swatch{transform:scale(1.08)}.color-choice:active:not(:disabled) .color-swatch{transform:scale(.96)}.canvas-stage{height:clamp(360px,100svh - 242px,1000px);position:relative}.canvas-stage.is-busy{pointer-events:none}.canvas-stage .gribou-canvas{aspect-ratio:auto;width:100%;height:100%;min-height:0;box-shadow:none;background:var(--paper);border-radius:0}.canvas-stage .gribou-canvas__surface>canvas{border-radius:0}.canvas-invitation{pointer-events:none;text-align:center;color:#6b7955;flex-direction:column;justify-content:center;align-items:center;gap:12px;padding:40px;display:flex;position:absolute;inset:0}.canvas-invitation svg{opacity:.7;width:94px;height:40px;margin-bottom:4px}.canvas-invitation p{font:italic 30px var(--serif)}.canvas-invitation>span{color:#72796b;font-size:12px}.template-entry{white-space:nowrap;background:#fffef9e8;border-radius:8px;padding:7px 12px;position:absolute;bottom:16px;left:50%;transform:translate(-50%)}.template-entry:active:not(:disabled){transform:translate(-50%)translateY(1px)}.transport{grid-template-columns:auto 190px auto;justify-content:center;align-items:center;gap:28px;min-height:100px;padding:14px 12px 18px;display:grid}.editor-transport{grid-template-columns:auto minmax(150px,190px) max-content minmax(300px,324px);gap:20px}.scale-control{border:0;width:100%;min-width:0;margin:0;padding:0}.scale-control legend{margin-bottom:6px;font-size:12px}.mood-options{grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;display:grid}.mood-option{--mood-ink:#826328;--mood-paper:#f8efd8;min-width:0;position:relative}.mood-minor{--mood-ink:#526d91;--mood-paper:#eaf0f7}.mood-hijaz{--mood-ink:#7a5b88;--mood-paper:#f2eaf5}.mood-option input{opacity:0;cursor:pointer;width:100%;height:100%;margin:0;position:absolute;inset:0}.mood-option>span{border:1px solid var(--line);min-height:54px;color:var(--muted);background:#fffef966;border-radius:10px;flex-direction:column;justify-content:center;align-items:center;gap:3px;padding:6px 3px;font-size:12px;transition:color .15s,background .15s,border-color .15s;display:flex}.mood-option input:checked+span{color:var(--mood-ink);background:var(--mood-paper);border-color:var(--mood-ink);font-weight:600}.mood-option svg{width:20px;height:20px}.mood-option input:hover:not(:disabled)+span{border-color:var(--mood-ink)}.mood-option input:focus-visible+span{outline:2px solid var(--olive);outline-offset:3px}.mood-option input:disabled{cursor:default}.scale-control:disabled{opacity:.4}.play-button{background:var(--olive);color:#fff;border-radius:30px;justify-content:center;align-items:center;gap:10px;min-width:132px;height:50px;padding:10px 22px;font-size:14px;display:flex;box-shadow:0 3px 8px #43502d15}.play-button:hover:not(:disabled){background:#53633c}.speed-control{width:100%}.accompaniments{min-width:0}.accompaniment-heading{color:var(--muted);margin-bottom:7px;font-size:11px;line-height:14px;display:block}.accompaniment-buttons{gap:6px;display:flex}.accompaniment-button{color:#616953;white-space:nowrap;background:#fffef980;border:1px solid #d7dacb;border-radius:9px;justify-content:center;align-items:center;gap:7px;min-height:44px;padding:0 12px;font-size:12px;font-weight:500;display:inline-flex}.accompaniment-button:hover:not(:disabled){background:#e9eddf;border-color:#aab598}.accompaniment-button[aria-pressed=true]{color:#394e25;background:#e4eacf;border-color:#7d8f60;box-shadow:inset 0 0 0 1px #7d8f6020}.accompaniment-button[aria-pressed=true]:hover:not(:disabled){background:#dce4c3;border-color:#697e49}.active-accompaniments{flex-wrap:wrap;gap:5px 10px;display:flex}.accompaniment-indicator{color:#506238;align-items:center;gap:5px;font-size:11px;line-height:1.5;display:inline-flex}.accompaniment-indicator svg{flex-shrink:0;width:16px;height:16px}.project-accompaniment{padding:0 13px 7px}.project-thumbnail .rhythm-miniature{color:#78885c}.shared-transport{grid-template-columns:auto minmax(0,340px) auto}.shared-accompaniments{max-width:300px}.speed-heading,.speed-labels{justify-content:space-between;gap:8px;display:flex}.speed-heading{font-size:12px}.speed-value,.speed-labels{color:var(--muted);font-size:10px}.speed-control input[type=range]{width:100%;height:24px;accent-color:var(--olive);cursor:pointer;touch-action:none;margin:0;display:block}.speed-labels{line-height:1}.shared-page-actions{align-items:center;gap:8px;display:flex}.shared-paper .canvas-stage{height:clamp(360px,100svh - 278px,1000px)}.shared-listen{max-width:400px}.fine-print{color:var(--muted);font-size:12px;line-height:1.6}.dialog{color:inherit;overscroll-behavior:contain;background:#fffef9;border:1px solid #dadccf;border-radius:18px;width:min(520px,100% - 24px);max-height:calc(100svh - 48px);padding:26px;box-shadow:0 24px 100px #303a272d}.dialog::backdrop{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#30372d57}.dialog-wide{width:min(960px,100% - 32px)}.dialog-header{justify-content:space-between;align-items:center;gap:20px;margin-bottom:20px;display:flex}.dialog-header h2{font:34px var(--serif)}.dialog-header .icon-button{margin-right:-8px}.dialog-intro{color:var(--muted);margin-bottom:20px;font-size:14px;line-height:1.65}.template-start{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;margin-bottom:26px;display:flex}.template-start .dialog-intro{margin:0}.template-section+.template-section{margin-top:28px}.template-section h3{font:23px var(--serif);margin-bottom:14px}.project-grid,.template-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:15px;display:grid}.project-card{background:#fffefb;border:1px solid #dedfd3;border-radius:11px;min-width:0;position:relative;overflow:hidden}.project-open{text-align:left;width:100%;padding:0 13px 12px;display:block}.project-open:hover{background:#f7f7ef}.project-thumbnail{color:#7a8464;background:#f7f5ed;border-bottom:1px solid #edece0;justify-content:center;align-items:center;height:132px;margin:0 -13px 12px;display:flex;overflow:hidden}.project-thumbnail>svg,.project-thumbnail>.brush-miniature{width:100%;height:100%}.brush-miniature{object-fit:contain;display:block}.project-thumbnail>svg.lucide{width:32px;height:32px}.project-card-title{justify-content:space-between;align-items:center;gap:8px;margin-bottom:5px;display:flex}.project-card-title strong{overflow-wrap:anywhere;font-size:14px;font-weight:550}.project-open small{color:var(--muted);font-size:11px;line-height:1.55;display:block}.preview-button{color:#506238;border-radius:6px;justify-content:flex-start;padding:8px 13px;font-size:11px}.preview-button[aria-pressed=true]{background:#eaf0dc}.card-actions{justify-content:space-between;align-items:center;padding:0 6px 4px 0;display:flex}.template-card>.preview-button{min-height:44px;margin:0 8px 6px}.featured-patterns .template-card{flex-direction:column;display:flex}.featured-patterns .project-open{flex-direction:column;flex:1;display:flex}.featured-patterns .project-thumbnail{flex-shrink:0}.featured-patterns .project-card-title strong{font-size:16px}.featured-patterns .project-open small{font-size:12px}.delete-confirm{background:#f8eee7;border-radius:8px;padding:14px;font-size:12px;line-height:1.5}.delete-confirm>div{justify-content:flex-end;align-items:center;gap:8px;margin-top:8px;display:flex}.library-footer{margin-top:20px}.empty-state{text-align:center;color:var(--muted);padding:40px}.musical-settings{flex-direction:column;gap:23px;display:flex}.setting{border:0;flex-direction:column;flex:1;gap:10px;min-width:0;margin:0;padding:0;display:flex}.setting label,.setting legend{font-size:13px;font-weight:550}.setting label span{color:var(--muted);margin-left:6px;font-weight:400}.setting input,.setting select{border:1px solid var(--line);background:#f8f8f0;border-radius:7px;width:100%;min-height:46px;padding:10px 12px}.setting-row{gap:20px;display:flex}.setting-description{color:var(--muted);font-size:12px;line-height:1.5}.segmented{background:#eeefe7;border-radius:8px;gap:4px;margin-top:10px;padding:4px;display:flex}.segmented button{border-radius:6px;flex:1;font-size:13px}.segmented button[aria-pressed=true]{background:#fff;box-shadow:0 1px 4px #30372d15}.settings-actions{justify-content:flex-end;gap:10px;margin-top:8px;display:flex}.help-steps{flex-direction:column;gap:24px;margin-bottom:24px;display:flex}.help-steps p{gap:18px;font-size:14px;line-height:1.65;display:flex}.help-steps svg{color:var(--olive);flex-shrink:0;margin-top:4px}.shortcuts{border-top:1px solid var(--line);padding:20px 0}.shortcuts h3{margin-bottom:15px;font-size:13px;font-weight:550}.shortcuts dl{flex-direction:column;gap:12px;margin:0;font-size:12px;display:flex}.shortcuts dl>div{justify-content:space-between;gap:12px;display:flex}.shortcuts dd{margin:0}kbd{border:1px solid var(--line);background:#f7f7ee;border-radius:4px;padding:3px 5px;font:11px inherit}.author-link{border-top:1px solid var(--line);padding:16px 0}.author-link>input{border:1px solid var(--line);background:#f8f8f0;border-radius:7px;width:100%;min-height:44px;padding:10px;font-size:13px}.share-actions{flex-wrap:wrap;align-items:center;gap:8px;margin:12px 0;display:flex}.share-actions .icon-button{margin-left:auto}.previous-shares{margin-top:24px}.previous-shares summary{cursor:pointer;min-height:44px;padding:12px 0;font-size:13px}.spin{animation:1.2s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}@media (width>=1600px){.app-shell{padding:0 46px}.canvas-toolbar{padding-left:22px;padding-right:22px}.color-palette{gap:10px}}@media (width<=900px){.app-shell{padding:0 18px}.app-header nav{gap:2px}.header-button{padding:8px}.canvas-toolbar{gap:6px;padding:8px}.drawing-tools{padding-right:4px}.color-palette{gap:0}.project-grid,.template-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.featured-patterns .template-card:last-child:nth-child(odd){grid-column:1/-1}.transport{grid-template-columns:auto minmax(0,190px);gap:12px 24px;padding:12px 8px 16px}.transport>.accompaniments{grid-column:1/-1;justify-self:center;width:100%;max-width:380px}.accompaniment-heading{text-align:center}.accompaniment-button{flex:1}.shared-accompaniments .active-accompaniments{justify-content:center}.canvas-stage{height:clamp(310px,100svh - 292px,900px)}.shared-paper .canvas-stage{height:clamp(310px,100svh - 320px,900px)}}@media (width>=681px) and (width<=1120px){.editor-transport{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px 20px;max-width:720px;margin-inline:auto;padding:12px 8px 16px}.editor-transport .play-button{grid-area:1/1;min-width:0}.editor-transport .speed-control{grid-area:1/2}.editor-transport>.accompaniments{grid-area:1/3/auto/-1;width:100%}.editor-transport .accompaniment-button{gap:6px;padding-inline:8px}.editor-transport .scale-control{grid-area:2/1/auto/-1;justify-self:center;max-width:324px}.canvas-stage{height:clamp(300px,100svh - 314px,900px)}}@media (width<=680px){.app-shell{padding:0 8px}.app-header{gap:8px;height:54px;padding:0 4px}.brand>span{letter-spacing:-1.1px;font-size:27px}.brand svg{width:32px;height:23px}.app-header nav{gap:2px}.header-button span,.header-share span{display:none}.header-button,.header-share{width:44px;height:44px;padding:0}.header-share{margin-left:3px}.page-heading{gap:8px;min-height:64px;padding:9px 8px}.page-name{font-size:27px}.title-field input{font-size:20px}.project-current .title-field input{font-size:13px}.canvas-toolbar{grid-template-columns:1fr 1fr;gap:2px;min-height:102px;padding:7px 10px}.drawing-tools{border:0;padding:0}.history-tools{justify-content:flex-end}.color-palette{grid-area:2/1/auto/-1;justify-content:space-between;gap:0}.canvas-stage{height:clamp(300px,100svh - 419px,900px)}.canvas-invitation{gap:10px;padding:24px}.canvas-invitation p{text-wrap:balance;max-width:320px;font-size:28px}.canvas-invitation>span{font-size:11px}.template-entry{font-size:11px;bottom:12px}.transport{grid-template-columns:auto minmax(0,175px);column-gap:20px}.editor-transport{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 18px;max-width:380px;margin-inline:auto;display:grid}.editor-transport .play-button{grid-area:1/1;gap:8px;width:100%;min-width:0;padding-inline:12px}.scale-control{grid-area:3/1/auto/-1;width:100%}.editor-transport .speed-control{grid-area:1/2;width:100%;max-width:none}.editor-transport>.accompaniments{grid-area:2/1/auto/-1}.play-button{min-width:113px;padding:10px 16px;font-size:13px}.speed-control{min-width:0}.accompaniment-button{gap:6px;padding:0 8px}.project-accompaniment{padding:0 10px 7px}.project-accompaniment .accompaniment-indicator{font-size:10px}.dialog{max-height:calc(100svh - 24px);padding:19px}.dialog-wide{width:calc(100% - 16px);padding:16px}.dialog-header{gap:10px;margin-bottom:16px}.dialog-header h2{font-size:30px}.project-grid,.template-grid{gap:10px}.project-open{padding:0 10px 8px}.project-thumbnail{height:104px;margin:0 -10px 10px}.project-card-title strong{font-size:13px}.project-card-title>svg{display:none}.project-open small{font-size:10px}.preview-button{padding:7px 8px;font-size:10px}.template-card>.preview-button{margin-left:2px}.shared-page-actions .button{padding:8px 10px;font-size:11px}.shared-page-actions .button svg{display:none}.shared-paper .canvas-stage{height:clamp(300px,100svh - 300px,900px)}.shared-listen{max-width:190px;font-size:10px}.settings-actions{gap:6px}.setting-row{gap:12px}}@media (width<=370px){.color-palette{grid-template-columns:repeat(4,44px);justify-content:space-around;display:grid}.canvas-stage{height:clamp(300px,100svh - 451px,850px)}.transport{column-gap:14px}.accompaniment-buttons{gap:4px}.accompaniment-button{gap:5px;padding:0 6px;font-size:11px}.accompaniment-button svg{width:18px;height:18px}.brand svg{width:26px}.brand>span{font-size:25px}.template-grid,.project-grid{grid-template-columns:minmax(0,1fr)}.project-thumbnail{height:130px}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}.is-introduction,.is-shared{max-width:1180px;margin:0 auto}.welcome-banner{justify-content:space-between;align-items:flex-start;gap:12px;padding:26px 3px 14px;display:flex}.welcome-banner h1{font:52px/1.12 var(--serif);letter-spacing:-1.3px;text-wrap:balance}.welcome-banner h1 em{color:#657749;font-weight:400;display:inline-block;position:relative}.welcome-banner h1 svg{stroke:#c6ccad;stroke-width:3px;fill:none;stroke-linecap:round;width:100%;height:10px;position:absolute;bottom:-6px;left:0}.welcome-banner p{color:#747967;margin-top:17px;font-size:14px;line-height:1.6}.welcome-dismiss{color:#787e6e}.is-introduction .canvas-stage{height:clamp(300px,100svh - 424px,650px)}.first-line-hint{color:#83896e;pointer-events:none;font:italic 25px var(--serif);flex-direction:column;align-items:center;gap:10px;display:flex;position:absolute;top:28%;left:61%;transform:rotate(-5deg)}.first-line-hint svg{stroke:#9a9f87;stroke-width:1.7px;stroke-linecap:round;stroke-linejoin:round;width:62px;height:48px}.welcome-prompt{border-top:1px solid var(--line);justify-content:space-between;align-items:center;gap:8px 20px;min-height:50px;padding:0 4px 12px;display:flex}.welcome-prompt p{color:#707760;align-items:center;gap:9px;padding-top:12px;font-size:12px;line-height:1.5;display:flex}.prompt-dot{background:#9ba77c;border-radius:50%;flex-shrink:0;width:6px;height:6px}.welcome-prompt .text-button{flex-shrink:0;padding-top:12px}.shared-masthead{text-align:center;padding:32px 0 10px}.shared-masthead>p{font:italic 35px/1.2 var(--serif);color:#607147}.shared-masthead>span{color:var(--muted);margin-top:10px;font-size:13px;display:block}.is-shared .canvas-stage{height:clamp(280px,100svh - 372px,650px)}.shared-transport{grid-template-columns:auto auto;gap:20px 35px}.shared-copy{flex-direction:column;align-items:center;gap:7px;display:flex}.shared-copy .button{border-radius:30px;min-height:50px;padding:10px 22px}.shared-copy p{color:var(--muted);text-align:center;max-width:240px;font-size:11px;line-height:1.4}.shared-transport .play-button{align-self:start}.shared-transport>.shared-accompaniments{grid-column:1/-1;justify-self:center}.share-drawing-card{background:var(--paper);border:1px solid var(--line);border-radius:10px;margin-bottom:20px;overflow:hidden}.share-drawing-card>svg,.share-drawing-card>.brush-miniature{width:100%;height:180px;padding:10px;display:block}.share-drawing-card>span{border-top:1px solid var(--line);font:22px var(--serif);overflow-wrap:anywhere;padding:12px 16px;display:block}.share-drawing-card>.title-field{border-top:1px solid var(--line);padding:8px 14px 8px 16px}.project-current{cursor:default}.project-current:hover{background:0 0}.project-current .title-field{margin-bottom:5px}.project-current .title-field input{height:30px;font-family:inherit;font-size:14px;font-weight:550;line-height:1.4}.share-snapshot-note{color:var(--muted);margin:-6px 0 20px;font-size:12px;line-height:1.5}@media (width<=900px){.is-introduction .canvas-stage{height:clamp(260px,100svh - 449px,650px)}}@media (width<=680px){.welcome-banner{gap:0;padding:18px 8px 8px}.welcome-banner h1{letter-spacing:-.7px;font-size:clamp(30px,9.5vw,37px)}.welcome-banner p{max-width:270px;margin-top:12px;font-size:12px}.welcome-dismiss{width:44px;min-width:44px;margin-top:-8px;margin-right:-3px}.is-introduction .canvas-stage{height:clamp(240px,100svh - 478px,650px)}.first-line-hint{text-align:center;gap:5px;max-width:110px;font-size:21px;top:22%;left:61%}.first-line-hint svg{width:48px;height:38px}.welcome-prompt{flex-wrap:wrap;gap:0;margin:0 8px;padding-bottom:8px}.welcome-prompt p{font-size:11px}.welcome-prompt .text-button{min-height:38px;padding:4px 0;font-size:12px}.shared-masthead{padding:27px 10px 8px}.shared-masthead>p{font-size:30px}.shared-masthead>span{font-size:12px}.is-shared .canvas-stage{height:clamp(260px,100svh - 368px,650px)}.shared-transport{grid-template-columns:auto auto;align-items:start;gap:14px;padding-top:18px}.shared-copy .button{padding:10px 16px;font-size:12px}.shared-copy p{max-width:178px;font-size:10px}}