@media (pointer:coarse) and (max-width:1050px){.canvas-bar{flex-wrap:nowrap}.canvas-bar>*{flex-shrink:0}}@media (max-width:1050px){.bottom-area{height:auto;min-height:0;padding:8px 0 10px;gap:8px}.dock{min-height:0}}@media (max-width:600px){.studio{padding:0 10px}.topbar{height:56px;min-height:56px;flex-wrap:nowrap;padding:4px 2px 2px;gap:8px}.topbar{justify-content:space-between;position:relative;z-index:17}.brand{width:auto;justify-content:flex-start;font-size:21px;gap:8px;flex-shrink:0}.brand-logo{width:34px;height:34px;border-radius:11px}.top-actions{width:auto;justify-content:flex-end;gap:2px!important;flex-wrap:nowrap}.top-actions .icon-button{width:40px;height:40px;border-radius:13px}.top-actions #theme-toggle,.top-actions #fullscreen,.top-actions #volume{display:none}.style-button{width:40px;height:40px;padding:0;gap:0;justify-content:center;border-radius:13px}.style-button #style-label,.style-button .style-chevron{display:none}.style-options,.file-options{position:fixed;left:12px;right:12px;top:62px;width:auto;max-height:calc(100dvh - 80px);overflow-y:auto}.canvas-bar{height:auto;min-height:44px;gap:4px;padding:0 0 6px}.canvas-bar .icon-button{width:38px;min-width:38px;height:38px}.workspace{gap:4px}.bottom-area{padding:6px 0 calc(8px + env(safe-area-inset-bottom,0px));gap:6px}.dock{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;row-gap:10px;column-gap:6px;width:100%;max-width:none;padding:10px 12px 11px;border-radius:22px}.dock>.divider{display:none}.palette-area{grid-column:1/-1;width:100%;gap:9px}.bank-slots{width:100%;gap:3px;padding:3px;border-radius:14px}.bank-slot{flex:1 1 0;justify-content:center;gap:4px;min-height:32px;padding:3px 2px;border-radius:11px}.palette-area .palette{width:100%;max-width:none;flex-wrap:nowrap;justify-content:space-between;gap:5px;padding:0}.palette-area .pebble{flex:1 1 0;min-width:0;width:auto;max-width:46px;height:42px;border-radius:13px}.palette-area .pebble .icon{width:18px;height:18px}.pebble.selected:after{bottom:-8px}.drawing-tools{grid-column:1;justify-self:start;gap:0}.drawing-tools .icon-button{width:36px;height:40px}.play-button{grid-column:2;width:60px;height:56px;border-radius:20px;margin:0}.dock-end{grid-column:3;justify-self:end;display:flex;align-items:center;gap:2px}.dock-end>.divider{display:none}.time-button{min-width:0;padding:9px 6px;gap:4px}.time-options{left:auto;right:-40px;transform:none}.loop-progress{width:64px}.toast{inset:66px auto auto 50%;transform:translate(-50%);max-width:calc(100vw - 28px);text-align:center}.timeline{height:84px;gap:7px;padding-top:6px}.selection-bar{max-width:calc(100% - 12px)}}@media (max-width:420px){.brand>span{display:none}}@media (max-height:540px) and (min-width:640px) and (max-width:1050px){.studio{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto auto;column-gap:10px;min-height:0;padding:0 max(12px,env(safe-area-inset-right,0px)) 0 max(12px,env(safe-area-inset-left,0px))}.canvas-bar{grid-row:1;grid-column:1;height:48px;min-height:48px;padding:0;gap:4px;align-self:center}.canvas-bar .icon-button{width:36px;min-width:36px;height:36px}.canvas-bar .parts-toggle{margin-left:6px;position:static}.topbar{grid-row:1;grid-column:2;height:48px;min-height:48px;padding:0;gap:6px;justify-content:flex-end;flex-wrap:nowrap}.brand{display:none}.top-actions{width:auto;gap:2px!important;flex-wrap:nowrap}.top-actions .icon-button{width:36px;height:36px;border-radius:12px}.top-actions #theme-toggle,.top-actions #fullscreen{display:none}.style-button{width:36px;height:36px;padding:0;gap:0;justify-content:center;border-radius:12px}.style-button #style-label,.style-button .style-chevron{display:none}.volume-control input{width:64px}.workspace{grid-row:2;grid-column:1/-1;min-height:0;gap:4px}.timeline{grid-row:3;grid-column:1/-1;height:64px;padding-top:4px}.part-tab canvas{width:72px;height:36px}.sequence-play{width:46px;height:46px}.bottom-area{grid-row:4;grid-column:1/-1;height:auto;min-height:0;padding:4px 0 calc(5px + env(safe-area-inset-bottom,0px));gap:3px}.dock{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;width:100%;max-width:none;min-height:0;padding:6px 10px;gap:6px;border-radius:18px}.dock>.divider{display:none}.palette-area{display:flex;flex-direction:row;align-items:center;gap:8px;width:auto;flex:1 1 100%;min-width:0}.bank-slots{flex-shrink:0;width:auto;padding:2px;gap:2px;border-radius:11px}.bank-slot{min-height:30px;padding:3px 7px;border-radius:9px}.bank-slot span{display:none}.palette-area .palette{flex:1 1 auto;width:auto;max-width:none;flex-wrap:nowrap;justify-content:space-between;gap:4px;padding:0;min-width:0}.palette-area .pebble{flex:1 1 0;min-width:0;width:auto;max-width:40px;height:34px;border-radius:11px}.palette-area .pebble .icon{width:16px;height:16px}.pebble.selected:after{bottom:-6px}.drawing-tools{flex-shrink:0;gap:0}.drawing-tools .icon-button{width:32px;height:34px}.play-button{flex-shrink:0;width:48px;height:42px;border-radius:15px;margin:0 2px}.play-button>.icon{width:22px;height:22px}.dock-end{display:flex;align-items:center;gap:2px;flex-shrink:0}.dock-end>.divider{display:none}.time-button{min-width:0;padding:6px 5px;gap:4px;font-size:13px}.time-options{left:auto;right:-30px;transform:none;bottom:calc(100% + 14px)}.loop-progress{width:56px}.toast{bottom:auto;top:56px}.dj-panel{inset:54px 12px auto auto;max-height:calc(100dvh - 64px)}}@media (max-height:540px) and (min-width:740px) and (max-width:1050px){.dock{flex-wrap:nowrap}.palette-area{flex:1 1 auto}}@media (max-height:540px) and (max-width:639px){.topbar{height:48px;min-height:48px;padding-top:2px}.top-actions .icon-button,.style-button{width:36px;height:36px}.canvas-bar{min-height:40px;padding-bottom:4px}.canvas-bar .icon-button{width:34px;min-width:34px;height:34px}.dock{row-gap:6px;padding:6px 10px}.palette-area{display:flex;flex-direction:row;align-items:center;gap:6px}.bank-slots{width:auto;flex-shrink:0;padding:2px;gap:2px}.bank-slot{flex:0 0 auto;min-height:28px;padding:3px 6px}.bank-slot span{display:none}.palette-area .palette{flex:1 1 auto;min-width:0;gap:4px}.palette-area .pebble{height:32px}.play-button{width:48px;height:42px}.register-label{display:none}}