:root{color-scheme:light;--ink:#2a3038;--muted:#888b88;--paper:#fffefa;--line:#dedfd6;--mint:#48a58a;--lime:#ddf29b}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;margin:0;overscroll-behavior:none}
body{background:#f2f0ea;color:var(--ink);font-family:ui-rounded,"Avenir Next",Avenir,"Trebuchet MS",sans-serif;overflow:hidden;user-select:none;-webkit-user-select:none}
button,input{font:inherit}button{color:inherit;cursor:pointer;touch-action:manipulation}button svg{display:block;width:21px;height:21px;pointer-events:none}
button:focus-visible,input:focus-visible,canvas:focus-visible{outline:3px solid #48a58a;outline-offset:4px}button:active{transform:translateY(1px) scale(.95)}button:disabled{opacity:.3;cursor:default}
.app{height:100svh;height:100dvh;max-width:1250px;margin:auto;padding:max(24px,env(safe-area-inset-top)) 36px max(22px,env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:22px}
.header{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-shrink:0}.brand{display:flex;align-items:center;gap:12px}.brand-logo{width:40px;height:40px;display:block;object-fit:contain;border-radius:11px;flex-shrink:0}h1{font-size:27px;letter-spacing:-1.1px;margin:0;font-weight:850}.header-tools{display:flex;gap:8px}
.icon{width:42px;height:42px;display:grid;place-items:center;border:1px solid var(--line);border-radius:14px;background:transparent;transition:background .15s,transform .12s}.icon:hover{background:#fffefa}.icon.on{background:var(--ink);color:white;border-color:var(--ink)}
.studio{display:grid;grid-template-columns:76px minmax(0,1fr);gap:24px;flex:1;min-height:0}.rail{display:flex;flex-direction:column;gap:25px;align-items:center;padding:6px 0}.tools,.palette{display:flex;flex-direction:column;gap:9px}.tools{flex-direction:row;gap:5px}.tool{width:35px;height:37px;border-radius:12px}.tone{width:64px;height:64px;border:0;border-radius:19px;background:transparent;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;position:relative;transition:background .2s,transform .12s}.tone svg{width:28px;height:28px}.tone span{font-size:10px;font-weight:750;letter-spacing:.3px}.tone[aria-pressed=true]{background:#fffefa;box-shadow:0 2px 0 #d9dbd2,0 0 0 1px #dedfd6}.tone[aria-pressed=true]::after{content:"";width:4px;height:4px;border-radius:50%;background:currentColor;position:absolute;right:7px;top:7px}
.paper{position:relative;min-height:0;background:var(--paper);border:1px solid #dddfd5;border-radius:27px;box-shadow:0 3px 0 #e3e3da;overflow:hidden}.paper canvas{display:block;width:100%;height:100%;touch-action:none;cursor:crosshair;outline-offset:-5px}.paper.erasing canvas{cursor:cell}.empty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;pointer-events:none;color:#a1a79d;gap:12px;transition:opacity .2s}.empty svg{width:150px;height:57px;overflow:visible}.empty p{margin:0;font-size:17px;font-weight:650;letter-spacing:-.3px}.empty small{font-size:11px;color:#afb3aa}.empty.hidden{opacity:0;visibility:hidden}.paper-note{position:absolute;left:22px;bottom:12px;font-size:10px;letter-spacing:1px;color:#a6ab9f;pointer-events:none;text-transform:uppercase}
.footer{padding-left:100px;display:grid;grid-template-columns:64px minmax(120px,1fr) auto;align-items:center;gap:24px;flex-shrink:0}.play{border:0;background:var(--lime);width:64px;height:64px;border-radius:23px;display:grid;place-items:center;box-shadow:0 4px 0 #c0d48a}.play:hover{background:#e6f6b5}.play svg{width:27px;height:27px}.tempo{display:flex;flex-direction:column;align-items:center;gap:8px;max-width:240px;width:100%;justify-self:center}.tempo label{font-size:10px;letter-spacing:1.4px;color:#939a8a}.tempo output{font-variant-numeric:tabular-nums;color:var(--ink);font-weight:750;font-size:15px;letter-spacing:0;margin-right:5px}.tempo input{appearance:none;-webkit-appearance:none;height:4px;width:100%;background:#dfe3d4;border-radius:4px;cursor:pointer;accent-color:var(--ink)}.tempo input::-webkit-slider-thumb{appearance:none;width:15px;height:15px;border-radius:50%;background:var(--ink)}.footer-tools{display:flex;gap:8px}.footer-tools .icon{width:44px;height:44px}.footer-tools .on{background:#e2e8d7;color:#56614b;border-color:#d0d8c1}
.status{position:fixed;bottom:3px;left:0;right:0;text-align:center;pointer-events:none;color:#7b8275;font-size:11px}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.paper-controls{position:absolute;left:20px;right:20px;bottom:9px;display:flex;align-items:center;justify-content:space-between;gap:10px}.echo-controls,.length-controls{display:flex;align-items:center;gap:8px}.paper-controls .mini{width:34px;height:34px;border-radius:12px;background:var(--paper)}.paper-controls .mini.on{background:#e2e8d7;color:#56614b;border-color:#cbd5bd}.paper-controls .mini svg{width:18px;height:18px}.echo-amount{display:flex;align-items:center;gap:7px}.echo-amount input{width:90px;height:4px;accent-color:#718750;cursor:pointer}.echo-amount input:disabled{opacity:.35}.echo-amount output{font-size:10px;color:#7e8776;width:26px;font-variant-numeric:tabular-nums}.length-controls>span{min-width:32px;text-align:center;font-size:14px;font-weight:750;font-variant-numeric:tabular-nums}.length-controls small{display:block;font-size:8px;letter-spacing:.4px;font-weight:500;color:#87907e}
@media(max-width:700px){.app{padding:max(17px,env(safe-area-inset-top)) 18px max(22px,env(safe-area-inset-bottom));gap:16px}.header{gap:8px}.brand{gap:9px}h1{font-size:25px}.brand-logo{width:34px;height:34px;border-radius:9px}.studio{grid-template-columns:1fr;grid-template-rows:48px minmax(0,1fr);gap:13px}.rail{flex-direction:row;justify-content:space-between;padding:0;gap:12px}.tools,.palette{flex-direction:row;gap:7px}.tone{width:46px;height:46px;border-radius:15px}.tone svg{width:24px;height:24px}.tone span{display:none}.tool{width:42px;height:42px;border-radius:14px}.footer{padding-left:0;grid-template-columns:58px minmax(80px,1fr) 96px;gap:18px}.play{width:58px;height:58px;border-radius:21px}.tempo{max-width:180px}.paper{border-radius:23px}.empty p{font-size:16px}.empty svg{width:125px}.paper-note{left:16px;font-size:9px}.header-tools{gap:6px}}
@media(max-width:700px){.paper-controls{left:12px;right:12px;gap:8px}.echo-controls,.length-controls{gap:5px}.echo-amount{gap:4px}.echo-amount input{width:46px}.paper-controls .mini{width:32px;height:34px}}
@media(max-width:350px){.app{padding-left:14px;padding-right:14px;gap:13px}.brand{gap:7px}h1{font-size:23px}.header-tools .icon{width:37px;height:37px}.rail{gap:8px}.tone{width:41px;height:43px}.palette{gap:5px}.tools{gap:5px}.tool{width:38px;height:40px}.footer{grid-template-columns:54px minmax(60px,1fr) 86px;gap:13px}.play{width:54px;height:54px}.footer-tools{gap:6px}.footer-tools .icon{width:40px;height:40px}.tempo label{font-size:9px}}
@media(max-height:480px) and (orientation:landscape){.app{padding:12px 24px;gap:10px}.header h1{font-size:22px}.header-tools .icon{height:34px;width:36px}.studio{grid-template-columns:56px minmax(0,1fr);grid-template-rows:minmax(0,1fr);gap:14px}.rail{padding:0;gap:8px;flex-direction:column}.tools{gap:3px}.tool{width:27px;height:28px;border-radius:9px}.tool svg{width:17px}.palette{flex-direction:column;gap:3px}.tone{width:42px;height:35px;border-radius:11px}.tone svg{width:22px;height:22px}.tone span{display:none}.footer{padding-left:70px;grid-template-columns:44px 1fr auto;gap:15px}.play{width:44px;height:44px;border-radius:16px}.footer-tools .icon{height:36px;width:38px}.tempo{gap:5px}.empty svg{height:33px}.empty p{font-size:14px}.empty small{display:none}}
.studio{grid-template-columns:132px minmax(0,1fr)}.footer{padding-left:156px}.rail{gap:22px}.palette{display:grid;grid-template-columns:repeat(2,56px);gap:8px}.tone{width:56px;height:56px;color:#536050;border-radius:17px}.tone svg{width:25px;height:25px}.tone span{font-size:9px}.ink-palette{display:grid;grid-template-columns:repeat(3,38px);gap:7px}.swatch{width:38px;height:38px;border:3px solid transparent;border-radius:50%;padding:3px;background:var(--swatch);background-clip:content-box;display:grid;place-items:center;outline:1.5px solid transparent;outline-offset:1px;transition:transform .12s,outline-color .15s}.swatch[aria-pressed=true]{outline-color:#374235}.swatch svg{width:17px;height:17px;opacity:0;filter:drop-shadow(0 1px 1px #0003)}.swatch[aria-pressed=true] svg{opacity:1}
@media(max-width:700px){.studio{grid-template-columns:1fr;grid-template-rows:90px minmax(0,1fr)}.rail{display:grid;grid-template-columns:auto 1fr;grid-template-rows:46px 34px;gap:10px 12px;align-items:center}.palette{display:flex;flex-direction:row;justify-self:end;gap:7px}.tone{width:46px;height:46px;border-radius:15px}.ink-palette{grid-column:1/-1;display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:4px;justify-items:center}.swatch{width:34px;max-width:100%;height:34px;padding:2px;border-width:2px}.footer{padding-left:0}}
@media(max-width:350px){.rail{column-gap:8px}.palette{gap:5px}.tone{width:41px;height:43px}.swatch{height:30px;width:30px}.ink-palette{gap:3px}.swatch svg{width:14px;height:14px}}
@media(max-height:480px) and (orientation:landscape){.studio{grid-template-columns:116px minmax(0,1fr);grid-template-rows:minmax(0,1fr)}.rail{display:flex;flex-direction:column;gap:9px}.palette{display:grid;grid-template-columns:repeat(2,42px);gap:4px}.tone{width:42px;height:32px;border-radius:10px}.tone svg{width:21px;height:21px}.ink-palette{display:grid;grid-template-columns:repeat(3,27px);gap:5px}.swatch{width:27px;height:27px;padding:2px;border-width:1px}.swatch svg{width:13px;height:13px}.footer{padding-left:130px}}
.transport-mix{width:100%;max-width:240px;justify-self:center;display:flex;flex-direction:column;gap:7px}.transport-mix .tempo{gap:5px}.volume-controls{display:flex;align-items:center;gap:7px;width:100%;height:28px}.volume-toggle{border:0;background:transparent;color:#77816c;width:28px;height:28px;padding:5px;display:grid;place-items:center;border-radius:9px;flex-shrink:0}.volume-toggle:hover{background:#e4e9da}.volume-toggle[aria-pressed=true]{color:#a47c6e}.volume-toggle svg{width:18px;height:18px}.volume-controls input{min-width:0;width:100%;height:4px;appearance:none;-webkit-appearance:none;border-radius:4px;background:#dfe3d4;accent-color:#718750;cursor:pointer}.volume-controls input::-webkit-slider-thumb{appearance:none;width:12px;height:12px;border-radius:50%;background:#718750}.volume-controls output{font-size:9px;color:#87907e;font-variant-numeric:tabular-nums;width:29px;flex-shrink:0;text-align:right}
@media(max-width:700px){.transport-mix{gap:4px}.volume-controls{gap:4px}.volume-controls output{width:25px;font-size:8px}}
@media(max-height:480px) and (orientation:landscape){.transport-mix{max-width:480px;display:grid;grid-template-columns:1fr 1fr;align-items:end;gap:18px}.volume-controls{margin-bottom:-2px}}
@media(max-height:480px) and (orientation:landscape){.brand-logo{width:32px;height:32px;border-radius:9px}}
[hidden]{display:none!important}.mode-toggle{display:flex;align-items:center;gap:10px;min-height:38px;padding:6px 12px;border:1px solid #d9dfd0;border-radius:22px;background:#fffefa;color:#617054;font-size:11px;font-weight:750;letter-spacing:.2px;flex-shrink:0}.mode-switch{width:29px;height:17px;border-radius:20px;background:#dce1d5;position:relative}.mode-switch::after{content:"";position:absolute;left:3px;top:3px;width:11px;height:11px;background:white;border-radius:50%;box-shadow:0 1px 2px #0002;transition:transform .18s}.mode-toggle[aria-pressed=true]{background:#e4edcf;border-color:#cfdbb8}.mode-toggle[aria-pressed=true] .mode-switch{background:#82965c}.mode-toggle[aria-pressed=true] .mode-switch::after{transform:translateX(12px)}.app .rail{overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;padding:5px 3px 8px;gap:18px}.app .tools{display:grid;grid-template-columns:repeat(2,38px);gap:6px}.app .tools .tool{width:38px;height:38px}.app .palette{grid-template-columns:repeat(2,50px);gap:6px}.app .tone{width:50px;height:46px;border-radius:14px;gap:3px}.app .tone svg{width:23px;height:23px}.app .tone span{font-size:8px}.app.simple .rail{gap:25px}.app.simple .footer{grid-template-columns:64px minmax(120px,240px) 44px;justify-content:start}.app.simple .transport-mix{display:block}.app.simple .volume-controls{height:38px}.app.simple .volume-toggle{width:34px;height:34px}.app.simple .volume-controls output{font-size:10px}
@media(max-width:700px){.app .brand{gap:7px}.app .brand h1{font-size:23px}.mode-toggle{gap:7px;padding:6px 10px;font-size:10px}.app .studio{grid-template-rows:172px minmax(0,1fr)}.app .rail{display:grid;grid-template-columns:1fr;grid-template-rows:38px 80px 34px;gap:10px;padding:0 2px;overflow:visible}.app .tools{grid-template-columns:repeat(4,38px);justify-content:start;grid-row:1}.app .palette{display:grid;grid-row:2;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;width:100%;justify-self:stretch}.app .tone{width:100%;height:38px}.app .tone span{display:none}.app .ink-palette{grid-column:1;grid-row:3}.app.simple .studio{grid-template-rows:82px minmax(0,1fr)}.app.simple .rail{grid-template-rows:38px 34px;gap:10px}.app.simple .ink-palette{grid-row:2}.app.simple .footer{grid-template-columns:58px minmax(80px,1fr) 44px;gap:18px;justify-content:stretch}.app.simple .transport-mix{max-width:240px}}
@media(max-width:350px){.app .brand h1{font-size:20px;letter-spacing:-.8px}.app .brand-logo{width:30px;height:30px}.mode-toggle{padding:5px 9px;gap:6px}.app .rail{grid-template-rows:36px 76px 30px;gap:8px}.app .studio{grid-template-rows:158px minmax(0,1fr)}.app .tools .tool{height:36px}.app .tone{height:36px}.app.simple .rail{grid-template-rows:36px 30px;gap:8px}.app.simple .studio{grid-template-rows:74px minmax(0,1fr)}.app.simple .footer{grid-template-columns:54px minmax(60px,1fr) 40px;gap:14px}}
@media(max-height:480px) and (orientation:landscape){.app .studio,.app.simple .studio{grid-template-columns:116px minmax(0,1fr);grid-template-rows:minmax(0,1fr)}.app .rail,.app.simple .rail{display:flex;flex-direction:column;gap:12px;overflow-y:auto;padding:2px 3px 7px}.app .tools{display:grid;grid-template-columns:repeat(2,30px);gap:4px;flex-shrink:0}.app .tools .tool{width:30px;height:30px}.app .palette{display:grid;grid-template-columns:repeat(2,42px);gap:4px;width:auto;flex-shrink:0}.app .tone{width:42px;height:32px}.app .ink-palette{flex-shrink:0;grid-template-columns:repeat(3,27px)}.app.simple .footer{grid-template-columns:44px minmax(120px,220px) 38px;gap:15px;justify-content:start}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}
/* Appearance changes never change the drawing, instruments or transport. */
.header-tools{align-items:center;flex-shrink:0}.theme-toggle{height:38px;display:flex;align-items:center;gap:6px;padding:6px 10px;border:1px solid #d9dfd0;border-radius:12px;background:#fffefa;color:#617054;font-size:11px;font-weight:700}.theme-toggle svg{width:17px;height:17px}.theme-toggle[aria-pressed=true]{background:#e4edcf}.paint-colors{flex-shrink:0}
@media(max-width:700px){.header-tools{gap:6px}.theme-toggle{padding:6px 8px}.theme-toggle span{display:none}}
@media(max-width:350px){.theme-toggle{width:32px;padding:6px}.header-tools .mode-toggle{padding:5px 7px;gap:5px}.header-tools{gap:4px}}
body.paint-theme{background:#008080;font-family:Tahoma,"MS Sans Serif",Arial,sans-serif}
.app.paint{height:calc(100svh - 24px);height:calc(100dvh - 24px);margin:12px auto;max-width:1250px;padding:4px;gap:7px;background:#c0c0c0;border:2px solid;border-color:#fff #404040 #404040 #fff;box-shadow:1px 1px 0 #000;--ink:#111;--paper:#fff;--line:#808080;--lime:#c0c0c0}
.app.paint .header{min-height:32px;gap:8px;background:#000080;color:#fff;padding:3px 5px;align-items:center}.app.paint .brand{gap:7px}.app.paint .brand-logo{width:24px;height:24px;border-radius:0}.app.paint .brand h1{font-size:16px;letter-spacing:0;font-family:Tahoma,Arial,sans-serif;font-weight:700}.app.paint .header-tools{gap:5px}
.app.paint button{font-family:Tahoma,Arial,sans-serif;border-radius:0;transition:none}.app.paint button:active{transform:translate(1px,1px)}
.app.paint .icon,.app.paint .tone,.app.paint .play,.app.paint .mode-toggle,.app.paint .theme-toggle,.app.paint .volume-toggle{background:#c0c0c0;color:#111;border:2px solid;border-color:#fff #404040 #404040 #fff;box-shadow:inset -1px -1px 0 #808080,inset 1px 1px 0 #dfdfdf;border-radius:0}
.app.paint .icon:hover,.app.paint .tone:hover,.app.paint .theme-toggle:hover,.app.paint .play:hover{background:#d2d2d2}.app.paint .icon.on,.app.paint .tone[aria-pressed=true],.app.paint .theme-toggle[aria-pressed=true],.app.paint .volume-toggle[aria-pressed=true]{background:#e3e3e3;border-color:#404040 #fff #fff #404040;box-shadow:inset 1px 1px 0 #808080}.app.paint .tone[aria-pressed=true]::after{display:none}
.app.paint .mode-toggle{height:28px;min-height:28px;font-size:10px;padding:3px 6px;gap:6px}.app.paint .mode-switch{width:23px;height:13px;border-radius:0;background:#808080}.app.paint .mode-switch::after{width:9px;height:9px;top:2px;left:2px;border-radius:0;box-shadow:none}.app.paint .mode-toggle[aria-pressed=true] .mode-switch::after{transform:translateX(10px)}.app.paint .theme-toggle{height:28px;padding:3px 6px;font-size:10px}
.app.paint .studio,.app.paint.simple .studio{grid-template-columns:94px minmax(0,1fr);grid-template-rows:minmax(0,1fr);gap:6px;padding:0 3px}.app.paint .rail,.app.paint.simple .rail{display:flex;flex-direction:column;gap:14px;padding:3px 2px;overflow-y:auto;align-items:center}.app.paint .tools{display:grid;grid-template-columns:repeat(2,40px);gap:2px}.app.paint .tools .tool{width:40px;height:40px}.app.paint .palette{display:grid;grid-template-columns:repeat(2,40px);gap:2px;width:auto}.app.paint .tone{width:40px;height:40px;gap:2px}.app.paint .tone svg{width:21px;height:21px}.app.paint .tone span{font-size:7px}
.app.paint .paper{border:2px solid;border-color:#404040 #fff #fff #404040;border-radius:0;box-shadow:inset 1px 1px #808080;background-color:#fff;background-image:linear-gradient(45deg,#f4f4f4 25%,transparent 25%,transparent 75%,#f4f4f4 75%),linear-gradient(45deg,#f4f4f4 25%,transparent 25%,transparent 75%,#f4f4f4 75%);background-size:20px 20px;background-position:0 0,10px 10px}.app.paint .empty{color:#707070}.app.paint .empty p{font-size:14px;font-weight:400;letter-spacing:0}.app.paint .empty small{color:#808080}
.app.paint .paint-colors{margin:0 5px;padding:4px 6px 4px 98px;border-top:1px solid #808080;border-bottom:1px solid #fff;min-height:37px;display:flex;align-items:center}.app.paint .ink-palette{display:grid;grid-template-columns:repeat(9,26px);grid-template-rows:26px;gap:3px;width:auto}.app.paint .swatch{width:26px;height:26px;max-width:none;min-width:0;padding:2px;border:2px solid;border-color:#808080 #fff #fff #808080;border-radius:0;outline-offset:1px}.app.paint .swatch[aria-pressed=true]{outline:1px dotted #111}.app.paint .swatch svg{width:15px;height:15px}
.app.paint .footer,.app.paint.simple .footer{grid-template-columns:44px minmax(110px,260px) auto;justify-content:start;gap:15px;padding:0 7px 5px 104px;align-items:center}.app.paint .play{width:44px;height:40px}.app.paint .play svg{width:21px;height:21px}.app.paint .footer-tools .icon{width:36px;height:34px}.app.paint .volume-toggle,.app.paint.simple .volume-toggle{width:28px;height:26px;padding:3px}.app.paint .volume-controls,.app.paint.simple .volume-controls{height:26px}.app.paint .volume-controls output,.app.paint .tempo label{color:#333}.app.paint .transport-mix{max-width:260px;gap:4px}.app.paint .tempo output{font-size:12px}.app.paint input[type=range]{accent-color:#000080;background:#808080;border-radius:0}.app.paint input[type=range]::-webkit-slider-thumb{border-radius:0;background:#c0c0c0;border:1px solid;border-color:#fff #404040 #404040 #fff;width:12px;height:16px}
.app.paint .paper-controls{background:#c0c0c0;left:0;right:0;bottom:0;padding:5px 8px;border-top:1px solid #808080}.app.paint .paper-controls .mini{border-radius:0;background:#c0c0c0}.app.paint .echo-amount output,.app.paint .length-controls small{color:#333}
body.paint-theme .status{background:#c0c0c0;color:#222;font-size:10px;bottom:0;min-height:11px}
@media(max-width:700px){.app.paint{margin:5px;height:calc(100svh - 10px);height:calc(100dvh - 10px);padding:3px;gap:5px}.app.paint .brand h1{font-size:14px}.app.paint .brand-logo{width:20px;height:20px}.app.paint .header{padding:3px;gap:5px}.app.paint .header-tools{gap:3px}.app.paint .mode-toggle{padding:3px 4px;gap:4px}.app.paint .theme-toggle{width:28px;padding:3px}.app.paint .studio,.app.paint.simple .studio{grid-template-columns:74px minmax(0,1fr);gap:4px;padding:0}.app.paint .rail,.app.paint.simple .rail{gap:10px;padding:1px 0}.app.paint .tools,.app.paint .palette{grid-template-columns:repeat(2,34px);gap:2px}.app.paint .tools .tool,.app.paint .tone{width:34px;height:36px}.app.paint .tone span{display:none}.app.paint .paint-colors{margin:0;padding:4px;justify-content:center;min-height:35px}.app.paint .ink-palette{grid-template-columns:repeat(9,minmax(0,26px));gap:3px}.app.paint .footer,.app.paint.simple .footer{padding:0 4px 4px;grid-template-columns:40px minmax(70px,1fr) auto;gap:10px;justify-content:stretch}.app.paint .play{width:40px;height:38px}.app.paint .footer-tools{gap:3px}.app.paint .footer-tools .icon{width:30px;height:32px}.app.paint .paper-controls{padding:4px;gap:5px}.app.paint .paper-controls .mini{width:26px;height:30px}.app.paint .echo-amount input{width:35px}.app.paint .echo-amount output{display:none}.app.paint .length-controls>span{min-width:23px;font-size:12px}.app.paint .length-controls small{display:none}.app.paint .empty p{font-size:12px}.app.paint .empty small{font-size:9px}.app.paint .empty svg{width:95px}}
@media(max-height:480px) and (orientation:landscape){.app.paint{margin:4px 10px;height:calc(100dvh - 8px);gap:4px}.app.paint .studio,.app.paint.simple .studio{grid-template-columns:78px minmax(0,1fr)}.app.paint .tools,.app.paint .palette{grid-template-columns:repeat(2,32px)}.app.paint .tools .tool,.app.paint .tone{width:32px;height:30px}.app.paint .paint-colors{padding:2px 6px 2px 82px;min-height:29px}.app.paint .ink-palette{grid-template-columns:repeat(9,23px);grid-template-rows:23px}.app.paint .swatch{width:23px;height:23px}.app.paint .footer,.app.paint.simple .footer{padding-left:87px;grid-template-columns:38px minmax(150px,350px) auto}.app.paint .play{height:32px;width:38px}.app.paint .transport-mix{display:flex;flex-direction:row;gap:18px;max-width:350px}.app.paint .transport-mix .tempo{min-width:100px}.app.paint .volume-controls{margin-bottom:0}.app.paint .footer-tools .icon{height:30px}}


/* Navigation shares the title column; the mode toggle keeps its own space. */
.app .header .brand{display:grid;grid-template-columns:40px auto;column-gap:10px;row-gap:0;align-items:center;min-width:0}
.app .header .brand-logo{grid-column:1;grid-row:1/3;align-self:center}
.app .header .brand h1{grid-column:2;grid-row:1;line-height:1.05;white-space:nowrap;font-size:25px}
.hub-back{grid-column:2;grid-row:2;justify-self:start;display:inline-flex;align-items:center;min-height:28px;padding:0 5px;margin-left:-5px;border-radius:7px;color:#657450;font-family:inherit;font-size:11px;font-weight:700;line-height:1;text-decoration:none;white-space:nowrap;touch-action:manipulation;pointer-events:auto}
.hub-back:hover{background:#e4edcf;color:#37442a}.hub-back:focus-visible{outline:2px solid #82965c;outline-offset:2px}
.app .header .mode-toggle{flex-shrink:0}
@media(max-width:700px){.app .header .brand{grid-template-columns:34px auto;column-gap:7px}.app .header .brand h1{font-size:23px}.hub-back{font-size:10px}}
@media(max-width:350px){.app .header .brand{grid-template-columns:30px auto;column-gap:6px}.app .header .brand h1{font-size:20px}}
@media(max-height:480px) and (orientation:landscape){.app .header .brand{grid-template-columns:32px auto;column-gap:8px}.app .header .brand h1{font-size:20px}.hub-back{min-height:26px}}
.app.paint .header .brand{grid-template-columns:24px auto;column-gap:7px}
.app.paint .header .brand h1{font-size:16px;letter-spacing:0}
.app.paint .hub-back{min-height:24px;margin:2px 0 0;padding:2px 6px;border:2px solid;border-color:#fff #404040 #404040 #fff;border-radius:0;box-shadow:inset -1px -1px 0 #808080,inset 1px 1px 0 #dfdfdf;background:#c0c0c0;color:#111;font-size:10px;font-weight:400}
.app.paint .hub-back:hover{background:#d2d2d2}.app.paint .hub-back:active{border-color:#404040 #fff #fff #404040}.app.paint .hub-back:focus-visible{outline:1px dotted #fff;outline-offset:2px}
@media(max-width:700px){.app.paint .header .brand{grid-template-columns:20px auto;column-gap:6px}.app.paint .header .brand h1{font-size:14px}}