/* PXLGEN phone layout. Every rule here is scoped to html.phone (set by index.html/editor/mobile.js for phones:
   <=430px wide, or <=430px tall in landscape), so the desktop editor renders exactly as before. */
html:not(.phone) .m-ui{display:none!important}
html.phone{--sat:env(safe-area-inset-top,0px);--sab:env(safe-area-inset-bottom,0px);--sal:env(safe-area-inset-left,0px);--sar:env(safe-area-inset-right,0px);
  --m-l:calc(var(--sal) + 10px);--m-r:calc(var(--sar) + 10px);--m-tabs-h:62px;--m-tabs-b:calc(var(--sab) + 10px);
  touch-action:manipulation;overscroll-behavior:none;-webkit-text-size-adjust:100%;text-size-adjust:100%;-webkit-tap-highlight-color:transparent}
html.phone body{position:fixed;inset:0;overflow:hidden;overscroll-behavior:none;font-size:14px}
html.phone input,html.phone textarea{font-size:16px} /* iOS: no zoom-on-focus */
html.phone .backdrop{overflow:hidden}
html.phone .backdrop .aura{top:24%;width:120vw;height:50vh}

/* ---------- compact top bar ---------- */
html.phone .nav{top:calc(var(--sat) + 8px);left:var(--m-l);right:var(--m-r);height:52px;padding:0 6px 0 16px;gap:10px}
html.phone .nav::after{left:22px;right:22px}
html.phone .nav .vsep,html.phone .nav .doc,html.phone #presetSel,html.phone #aspectSel,html.phone #accentPick,html.phone #stageBtn{display:none}
html.phone .brand{gap:9px;min-width:0;flex:none}
html.phone .brand .logo{width:22px;height:22px}
html.phone .brand .wm{font-size:13px;white-space:nowrap}
.m-menu-btn{display:flex;align-items:center;gap:8px;height:40px;min-width:0;max-width:58%;margin-left:auto;padding:0 13px 0 15px;border-radius:999px;border:1px solid var(--line-2);background:rgb(255 255 255/.04);
  font-size:14px;font-weight:600;letter-spacing:-.01em;transition:border-color .25s,background .25s}
.m-menu-btn:active{background:rgb(255 255 255/.09)}
.m-menu-btn .m-mb-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.m-menu-btn .m-mb-ar{flex:none;font:500 12px/1 var(--font-mono);color:var(--accent);letter-spacing:.04em}
.m-menu-btn svg{width:10px;height:10px;color:var(--mute);flex:none}
html.phone[data-mmodal=look] .m-menu-btn{border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-12)}

/* ---------- stage: canvas full width at the top (fixed; app.js fitPhone places it) ---------- */
html.phone .app{position:static;inset:auto}
html.phone .stage{position:fixed;inset:0;left:0;right:0;z-index:1;pointer-events:none}
html.phone .canvas-wrap{pointer-events:auto;border-radius:18px;box-shadow:0 0 0 1px var(--line-2),0 0 80px -24px var(--accent-glow),0 30px 80px -30px rgb(0 0 0/.9)}
html.phone .hud{top:10px;height:28px;padding:0 10px;font-size:12px;letter-spacing:.06em}
html.phone .hud.tl{left:10px;max-width:calc(100% - 96px);overflow:hidden;white-space:nowrap}
html.phone .hud.tr{right:10px}
html.phone .canvas-wrap.narrow .hud.tr{display:none}
html.phone .canvas-wrap.narrow .hud.tl{max-width:calc(100% - 20px)}
html.phone .canvas-wrap.narrow .hud.tl #hudRes{overflow:hidden;text-overflow:ellipsis}

/* ---------- floating play / scrub / loop dock ---------- */
html.phone .dock{pointer-events:auto;top:var(--m-dock-top,300px)!important;bottom:auto!important;left:var(--m-l);right:var(--m-r);transform:none;max-width:none;height:64px;padding:0 10px;gap:12px;transition:none}
html.phone .dock .dsep,html.phone .dock #qualitySel,html.phone .dock #shuffleAll,html.phone .dock #exportBtn,html.phone .dock .stepper{display:none}
html.phone .dock .play{width:44px;height:44px}
html.phone .dock .play svg{width:15px;height:15px}
html.phone .scrub{flex:1;min-width:0;width:auto;gap:4px}
html.phone .timeline{height:26px}
html.phone .timeline::after{content:"";position:absolute;left:-4px;right:-4px;top:-9px;bottom:-9px} /* 44px touch target */
html.phone .timeline::before,html.phone .timeline .fillbar{top:11px}
html.phone .timeline i{top:5px;height:16px;width:4px;margin-left:-2px;border-radius:1px}
html.phone .tc{font-size:12px;letter-spacing:.04em}
html.phone .chip-tgl{height:44px;padding:0 15px 0 13px;font-size:12px;gap:8px;flex:none}
html.phone .chip-tgl svg{width:12px;height:12px}

/* ---------- floating tab bar ---------- */
.m-tabs{position:fixed;z-index:40;left:var(--m-l);right:var(--m-r);bottom:var(--m-tabs-b);height:var(--m-tabs-h);border-radius:999px;display:grid;grid-template-columns:repeat(4,1fr);gap:4px;padding:6px;
  background:rgb(16 16 19/.78);box-shadow:0 24px 70px -20px rgb(0 0 0/.95)}
.m-tabs button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;min-width:0;border-radius:999px;font-size:12px;font-weight:600;letter-spacing:-.005em;color:var(--mute);transition:background .25s,color .25s}
.m-tabs button svg{width:16px;height:16px}
.m-tabs button[aria-selected=true]{color:var(--fg);background:rgb(255 255 255/.09);box-shadow:inset 0 0 0 1px var(--line-2)}
.m-tabs button[aria-selected=true] svg{color:var(--accent);filter:drop-shadow(0 0 6px var(--accent-glow))}
.m-tabs button[data-locked=true] svg{color:var(--accent)}
.m-tabs button span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}

/* ---------- swipeable bottom sheet (Layers / Controls / Export) ---------- */
.m-sheet{position:fixed;z-index:35;left:var(--m-l);right:var(--m-r);top:var(--m-full-top,70px);bottom:calc(var(--m-tabs-b) + var(--m-tabs-h) + 10px);display:flex;flex-direction:column;overflow:hidden;
  border-radius:28px;border:1px solid var(--line-2);background:rgb(15 15 17/.9);-webkit-backdrop-filter:blur(20px) saturate(1.4);backdrop-filter:blur(20px) saturate(1.4);
  box-shadow:0 -10px 60px -30px rgb(0 0 0/.9);transition:transform .5s var(--ease-out-expo),clip-path .5s var(--ease-out-expo),visibility 0s;will-change:transform}
.m-sheet::before{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;background:linear-gradient(180deg,rgb(255 255 255/.05),transparent 120px)}
.m-sheet.closed{visibility:hidden;transition:transform .4s var(--ease-out-expo),clip-path .4s var(--ease-out-expo),visibility 0s .4s}
.m-sheet.dragging,.m-modal.dragging{transition:none}
.m-grab{flex:none;height:26px;display:grid;place-items:center;touch-action:none;cursor:grab}
.m-handle{width:40px;height:5px;border-radius:999px;background:rgb(255 255 255/.26)}
.m-body{position:relative;flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.m-body::-webkit-scrollbar{display:none}
.m-pane{display:none}
.m-sheet[data-pane=layers] .m-pane[data-pane=layers],.m-sheet[data-pane=controls] .m-pane[data-pane=controls],.m-sheet[data-pane=stage] .m-pane[data-pane=stage],.m-sheet[data-pane=export] .m-pane[data-pane=export]{display:block}
html.phone .m-pane .panel{position:static;inset:auto;width:auto;border:0;border-radius:0;background:none;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none;overflow:visible}
html.phone .m-pane .panel::before{display:none}
html.phone .panel-head,html.phone .insp-head,html.phone .pop-head,.m-modal-head{touch-action:none}

/* layers pane */
html.phone .panel-head{padding:2px 14px 12px 20px}
html.phone .eyebrow{font-size:12px;letter-spacing:.14em}
html.phone .add-btn{height:40px;padding:0 16px 0 14px;font-size:14px;gap:8px}
html.phone .add-btn svg{width:12px;height:12px}
html.phone .layer-list{padding:0 12px 6px;overflow:visible}
html.phone .layer{flex-wrap:wrap;gap:6px 12px;padding:8px 4px 8px 8px;border-radius:20px;margin-bottom:6px;min-height:64px}
html.phone .layer.sel::before{left:-12px}
html.phone .layer .thumb{width:72px;height:46px;border-radius:12px}
html.phone .layer .thumb .kind{width:18px;height:18px;border-radius:6px}
html.phone .layer .thumb .kind svg{width:8px;height:8px}
html.phone .layer .nm{font-size:15px}
html.phone .layer .nm small{font-size:12px;letter-spacing:.06em;margin-top:3px}
html.phone .layer .eye{width:44px;height:44px}
html.phone .layer .eye svg{width:14px;height:14px}
html.phone .layer .ops{display:none}
html.phone .layer.sel .ops{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;position:static;transform:none;opacity:1;pointer-events:auto;order:9;flex-basis:100%;background:none;border:0;padding:4px 4px 2px 0;border-radius:0}
html.phone .layer.sel .ops .icon{display:flex;flex-direction:column;gap:5px;width:auto;height:52px;border-radius:16px;background:rgb(255 255 255/.04);border:1px solid var(--line);color:var(--fg);font-size:12px;font-weight:500}
html.phone .layer.sel .ops .icon::after{content:attr(title);white-space:nowrap}
html.phone .layer.sel .ops .icon svg{width:12px;height:12px;color:var(--accent)}
html.phone .layer.sel .ops .icon:active{background:var(--accent-12);border-color:var(--accent)}
html.phone .hint{font-size:13px;padding:14px 20px 22px;margin-top:4px}
html.phone .hint svg{width:12px;height:12px;margin-top:3px}

/* controls pane (inspector) */
html.phone .inspector{overflow:visible}
html.phone .insp-head{padding:2px 14px 14px 20px;background:linear-gradient(180deg,rgb(17 17 19) 78%,rgb(17 17 19/0))}
html.phone .insp-head .acts{gap:8px}
html.phone .insp-head .icon{width:44px;height:44px}
html.phone .insp-head .icon svg{width:14px;height:14px}
html.phone .insp-head .ttl{font-size:28px;margin-top:8px}
html.phone .sec{margin:0 12px 10px;border-radius:22px}
html.phone .sec-title{min-height:54px;padding:12px 12px 12px 16px;gap:12px}
html.phone .sec-title .ix,html.phone .sec-title .ct{font-size:12px}
html.phone .sec-title .tt{font-size:15px}
html.phone .sec-title .pm{width:32px;height:32px}
html.phone .sec-title .pm svg{width:10px;height:10px}
html.phone .sec-body{padding:0 16px 16px}
html.phone .ctl{margin-top:14px}
html.phone .ctl:first-child{margin-top:0}
html.phone .ctl-top{font-size:14px;gap:6px;margin-bottom:0;min-height:36px}
html.phone .ctl-top .mini{width:36px;height:36px}
html.phone .ctl-top .mini svg{width:12px;height:12px}
html.phone .ctl-top .vt{font-size:13px;height:32px;min-width:58px;padding:0 10px}
html.phone .ctl-top .vt input{width:62px;font-size:16px}
/* touch slider: 44px hit area; pan-y keeps vertical sheet scrolling, horizontal drags go to the slider (never the page) */
html.phone .sl{height:44px;touch-action:pan-y}
html.phone .sl .rail,html.phone .sl .fl{top:20px;height:4px}
html.phone .sl .z{top:15px;height:14px}
html.phone .sl .kn{top:11px;width:22px;height:22px;margin-left:-11px;border-radius:6px}
html.phone .lfo{flex-wrap:wrap;gap:4px 10px;border-radius:20px;padding:2px 8px 8px 14px;font-size:12px}
html.phone .lfo>svg{width:12px;height:12px}
html.phone .lfo .sl{flex:1;min-width:120px;height:44px}
html.phone .lfo .sl .rail,html.phone .lfo .sl .fl{top:20px}
html.phone .lfo .sl .kn{top:12px;width:20px;height:20px;margin-left:-10px}
html.phone .lfo .vt{font-size:12px;min-width:40px}
html.phone .lfo .cyc{gap:4px}
html.phone .lfo .cyc button{min-width:44px;height:36px;font-size:12px}
html.phone .ctl .sel-pill{height:44px;font-size:15px;padding:0 14px 0 16px}
html.phone .sel-pill .k{font-size:12px}
html.phone .swatches{gap:8px}
html.phone .swatches button{height:40px}
html.phone .color-pill,html.phone .toggle{height:44px;font-size:12px}
html.phone .note{font-size:13px}
html.phone .ctl .btn,html.phone .lyr-btns .btn{height:44px;font-size:14px}
html.phone .lyr{font-size:16px;height:180px}
html.phone .empty{font-size:15px}

/* export pane */
html.phone .m-pane #exportPop{display:block!important;position:static;width:auto;border:0;border-radius:0;background:none;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none;padding:2px 20px 24px;animation:none}
html.phone .pop-head h3{font-size:30px}
html.phone #exportClose{width:44px;height:44px}
html.phone .pop .row{margin-top:18px}
html.phone .pop .row>label{font-size:12px;margin-bottom:10px}
html.phone .seg{gap:8px}
html.phone .seg button{height:44px;font-size:14px}
html.phone .pop .spec{font-size:12px;letter-spacing:.04em}
html.phone .status{font-size:13px}
html.phone .btn.wide{height:52px;font-size:15px}
.m-loop-slot .stepper{display:inline-flex;height:48px;padding:0 4px;font-size:13px;color:var(--mute)}
.m-loop-slot .stepper button{width:40px;height:40px}
.m-loop-slot .stepper button svg{width:11px;height:11px}
.m-loop-slot .stepper input{width:40px;font-size:16px}
.m-loop-slot .stepper span{font-size:13px;margin:0 6px 0 2px}

/* ---------- modal sheets: Add layer, Preset & frame ---------- */
.m-scrim{position:fixed;inset:0;z-index:45;background:rgb(0 0 0/.5);opacity:0;pointer-events:none;transition:opacity .35s}
.m-scrim.on{opacity:1;pointer-events:auto}
.m-modal{position:fixed;z-index:50;left:var(--m-l);right:var(--m-r);bottom:calc(var(--sab) + 10px);max-height:calc(100dvh - var(--sat) - 70px);display:flex;flex-direction:column;overflow:hidden;
  border-radius:28px;border:1px solid var(--line-2);background:rgb(16 16 19/.95);-webkit-backdrop-filter:blur(24px) saturate(1.4);backdrop-filter:blur(24px) saturate(1.4);
  box-shadow:0 -20px 80px -20px rgb(0 0 0/.9);transform:translate3d(0,calc(100% + 40px),0);visibility:hidden;transition:transform .45s var(--ease-out-expo),visibility 0s .45s}
.m-modal.open{transform:none;visibility:visible;transition:transform .5s var(--ease-out-expo),visibility 0s}
.m-modal-head{flex:none;display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:0 14px 14px 20px}
.m-modal-head h3{font-size:28px;margin-top:10px}
.m-modal .m-x{width:44px;height:44px}
.m-modal .m-body{padding-bottom:6px}
html.phone .m-add #addMenu{display:block;position:static;max-height:none;overflow:visible;border:0;border-radius:0;background:none;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none;padding:0 16px 18px;animation:none}
html.phone .add-menu h6{font-size:12px;margin:14px 4px 8px;letter-spacing:.14em}
html.phone .add-menu h6:first-child{margin-top:0}
html.phone .add-menu .tiles{gap:8px}
html.phone .add-menu button{min-height:52px;font-size:14px;padding:10px 12px;border-radius:16px;gap:10px}
html.phone .add-menu button svg{width:12px;height:12px}
.m-look{padding:0 20px 22px}
.m-field{margin-top:20px}
.m-field:first-child{margin-top:0}
.m-field>.eyebrow{margin-bottom:10px}
.m-field .note{margin-top:10px}
.m-proj .doc{display:block;cursor:text}
.m-proj .doc .eyebrow{display:none}
.m-proj .doc input{display:block;width:100%;height:48px;padding:0 16px;border-radius:16px;border:1px solid var(--line-2);background:rgb(255 255 255/.04);font-size:16px;font-weight:600;color:var(--fg);outline:none}
.m-proj .doc input:focus{border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-12);color:var(--fg)}
.m-presets{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.m-presets button{display:flex;align-items:center;gap:10px;min-height:52px;padding:10px 12px;border-radius:16px;border:1px solid var(--line);background:rgb(255 255 255/.02);text-align:left;font-size:14px;font-weight:600;line-height:1.2}
.m-presets button i{flex:none;width:18px;height:18px;border-radius:5px;box-shadow:inset 0 0 0 1px rgb(255 255 255/.15)}
.m-presets button.on{border-color:var(--accent);background:var(--accent-12)}
.m-accents{display:flex;flex-wrap:wrap;gap:8px}
.m-accents button{width:44px;height:44px;border-radius:999px;display:grid;place-items:center;border:1px solid var(--line-2)}
.m-accents button i{width:16px;height:16px;border-radius:4px}
.m-accents button.on{box-shadow:0 0 0 2px var(--fg) inset}
.m-shuffle{margin-top:24px}
html.phone .m-look .seg button.on,html.phone #exportPop .seg button.on{font-weight:600}

/* pill-select menus become bottom action sheets */
.m-menu-scrim{position:fixed;inset:0;z-index:59;background:rgb(0 0 0/.45);animation:fade .25s ease}
html.phone .menu:not(.accent-menu){left:var(--m-l)!important;right:var(--m-r)!important;top:auto!important;bottom:calc(var(--sab) + 10px)!important;min-width:0!important;max-height:min(62dvh,520px);border-radius:24px;padding:8px;overscroll-behavior:contain}
html.phone .menu button{min-height:48px;font-size:15px;padding:10px 14px;gap:12px}
html.phone .menu .grp{font-size:12px}

/* locked export on phones: the card becomes a bottom sheet, the watermark stays legible */
html.phone .lock-card{left:var(--m-l);right:var(--m-r);top:auto;bottom:calc(var(--sab) + 10px);width:auto;transform:none;animation:lockup .45s var(--ease-out-expo);padding:26px 22px 22px}
@keyframes lockup{from{transform:translateY(40px);opacity:0}}
html.phone .lock-card h3{font-size:28px}
html.phone .lock-copy{font-size:14px}
html.phone .lock-btns .btn{height:50px;font-size:15px}
html.phone .lock-x{width:44px;height:44px;top:14px;right:14px}
html.phone .wm-lock{right:10px;bottom:10px;height:26px;font-size:12px;letter-spacing:.06em}
html.phone .canvas-wrap.narrow .wm-lock span{display:none}

/* ---------- landscape phones: dock rides in the top bar, the sheet docks right, the canvas refits beside it ---------- */
html.phone.land{--m-tabs-h:54px}
html.phone.land .dock{top:var(--m-dock-t,12px)!important;left:var(--m-dock-l,200px);right:auto;width:var(--m-dock-w,360px);height:44px;padding:0;gap:10px;background:none;border:0;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none;z-index:31}
html.phone.land .stage{z-index:31}
html.phone.land .canvas-wrap{transition:left .45s var(--ease-out-expo),top .45s var(--ease-out-expo),width .45s var(--ease-out-expo),height .45s var(--ease-out-expo)}
html.phone.land .dock .play{width:40px;height:40px}
html.phone.land .scrub-meta{display:none}
html.phone.land .timeline{height:22px}
html.phone.land .timeline::before,html.phone.land .timeline .fillbar{top:9px}
html.phone.land .timeline i{top:3px}
html.phone.land .timeline::after{top:-11px;bottom:-11px}
html.phone.land .scrub{flex-direction:row;align-items:center;gap:10px}
html.phone.land .scrub .timeline{flex:1}
html.phone.land .chip-tgl{height:40px}
html.phone.land .m-tabs{right:auto;left:var(--m-col-c,50%);width:min(440px,var(--m-col-w,100%));transform:translateX(-50%);transition:left .45s var(--ease-out-expo)}
html.phone.land .m-tabs button{gap:3px}
html.phone.land .m-sheet{left:auto;width:min(400px,48vw);bottom:calc(var(--sab) + 10px)}
html.phone.land .m-modal{left:max(var(--m-l),calc(50% - 320px));right:max(var(--m-r),calc(50% - 320px));max-height:calc(100dvh - var(--sat) - 16px)}
html.phone.land .add-menu .tiles,html.phone.land .m-presets{grid-template-columns:repeat(3,1fr)}
html.phone.land .lock-card{left:max(var(--m-l),calc(50% - 230px));right:max(var(--m-r),calc(50% - 230px))}
@media (prefers-reduced-motion:reduce){.m-sheet,.m-modal,html.phone.land .canvas-wrap{transition-duration:.001ms!important}}
/* fixed chrome never pans or zooms the page; taps still click */
html.phone .nav,html.phone .dock,.m-tabs{touch-action:none}

/* =========== PXL SUPPLY v5 phone layout: square, mono white, edge to edge (overrides the rules above) =========== */
html.phone{--accent:#f4f4f2!important;--accent-ink:#050505!important;--accent-glow:rgb(255 255 255/.16)!important;--accent-12:rgb(255 255 255/.09)!important;--accent-22:rgb(255 255 255/.16)!important;
  --m-l:0px;--m-r:0px;--m-tabs-h:60px;--m-tabs-b:0px;--m-line:rgb(255 255 255/.1);--m-pad-l:calc(var(--sal) + 18px);--m-pad-r:calc(var(--sar) + 18px)}
html.phone body{background:#050505}
html.phone .backdrop .aura{opacity:.06}
/* top bar */
html.phone .nav{top:0;left:0;right:0;height:calc(52px + var(--sat));padding:var(--sat) calc(var(--sar) + 8px) 0 calc(var(--sal) + 16px);background:#050505;border:0;border-bottom:1px solid var(--m-line);box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
html.phone .nav::before,html.phone .nav::after{display:none}
.m-menu-btn{height:40px;max-width:62%;padding:0 12px 0 14px;border:1px solid var(--m-line);background:none;font-size:14px}
.m-menu-btn .m-mb-ar{color:rgb(255 255 255/.55)}
html.phone[data-mtab=looks] .m-menu-btn{border-color:#fff}
/* canvas: full width at its own aspect, pinned under the bar */
html.phone .canvas-wrap{box-shadow:none;border:0}
html.phone .hud{height:26px;font-size:11px}
/* play / scrub / loop row under the canvas */
html.phone:not(.land) .dock{left:0;right:0;height:56px;padding:0 calc(var(--sar) + 10px) 0 calc(var(--sal) + 10px);gap:12px;background:#050505;border:0;border-bottom:1px solid var(--m-line);box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
html.phone .dock::before,html.phone .dock::after{display:none}
/* bottom tab bar */
.m-tabs{left:0;right:0;bottom:0;height:calc(var(--m-tabs-h) + var(--sab));padding:0 var(--sar) var(--sab) var(--sal);gap:0;grid-template-columns:repeat(5,1fr);background:#0a0a0b;border:0;border-top:1px solid var(--m-line);box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
.m-tabs::before,.m-tabs::after{display:none}
.m-tabs button{position:relative;gap:6px;font-size:11px;font-weight:600;letter-spacing:.02em;color:rgb(255 255 255/.5);background:none;box-shadow:none}
.m-tabs button svg{width:15px;height:15px}
.m-tabs button[aria-selected=true]{color:#fff;background:rgb(255 255 255/.04);box-shadow:none}
.m-tabs button[aria-selected=true]::before{content:"";position:absolute;left:24%;right:24%;top:-1px;height:2px;background:#fff}
.m-tabs button[aria-selected=true] svg,.m-tabs button[data-locked=true] svg{color:#fff;filter:none}
/* bottom sheet */
.m-sheet{left:0;right:0;bottom:calc(var(--m-tabs-h) + var(--sab));border:0;border-top:1px solid var(--m-line);background:#111214;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none}
.m-sheet::before{display:none}
.m-grab{height:22px}
.m-handle{width:36px;height:3px;background:rgb(255 255 255/.3)}
.m-sheet[data-pane=looks] .m-pane[data-pane=looks],.m-sheet[data-pane=color] .m-pane[data-pane=color]{display:block}
.m-pane-head{padding:2px var(--m-pad-r) 4px var(--m-pad-l)}
.m-pane-head h3{font-size:26px;margin-top:6px}
html.phone .panel-head,html.phone .insp-head{padding-left:var(--m-pad-l);padding-right:calc(var(--sar) + 12px)}
html.phone .insp-head{background:linear-gradient(180deg,#111214 78%,rgb(17 18 20/0))}
html.phone .m-pane #exportPop{padding:2px var(--m-pad-r) 28px var(--m-pad-l)}
html.phone .layer-list{padding:0 calc(var(--sar) + 12px) 6px calc(var(--sal) + 12px)}
html.phone .sec{margin:0 calc(var(--sar) + 12px) 8px calc(var(--sal) + 12px);background:rgb(255 255 255/.02)}
/* looks pane */
.m-look,.m-color{padding:10px var(--m-pad-r) 28px var(--m-pad-l)}
.m-field{margin-top:22px}
.m-presets{gap:6px}
.m-presets button{min-height:56px;border:1px solid var(--m-line);background:rgb(255 255 255/.02);color:var(--fg)}
.m-presets button i{width:22px;height:22px}
.m-presets button.on{border-color:#fff;background:rgb(255 255 255/.08)}
.m-look-acts{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:24px}
.m-look-acts .btn{height:52px;gap:10px;font-size:14px}
.m-look-acts .btn svg{width:12px;height:12px}
.m-proj .doc input{height:48px;border:1px solid var(--m-line)}
/* color pane */
.m-pal-all{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.m-pal{display:flex;flex-direction:column;align-items:stretch;gap:8px;min-width:0;padding:6px 6px 10px;border:1px solid var(--m-line);background:rgb(255 255 255/.02);font-size:13px;font-weight:600;text-align:left;color:var(--fg)}
.m-pal i{display:block;height:40px}
.m-pal span{padding-left:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.m-pal.on{border-color:#fff;background:rgb(255 255 255/.08)}
.m-pal-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(44px,1fr));gap:6px}
.m-chip{height:44px;padding:4px;border:1px solid var(--m-line);background:none}
.m-chip i{display:block;width:100%;height:100%}
.m-chip.on{border-color:#fff;box-shadow:inset 0 0 0 1px #fff}
.m-color>.note{margin-top:22px}
/* thumb-sized sliders + big readouts */
html.phone .ctl-top{font-size:15px;min-height:40px}
html.phone .ctl-top .vt{height:38px;min-width:76px;padding:0 10px;font:600 17px/1 var(--font-mono)}
html.phone .ctl-top .vt input{width:70px;font:600 17px/1 var(--font-mono)}
html.phone .sl{height:48px}
html.phone .sl .rail,html.phone .sl .fl{top:21px;height:6px}
html.phone .sl .z{top:17px;height:14px}
html.phone .sl .kn{top:10px;width:28px;height:28px;margin-left:-14px;background:#fff;box-shadow:0 0 0 1px rgb(0 0 0/.6),0 4px 14px rgb(0 0 0/.5)}
html.phone .lfo .sl .kn{top:12px;width:24px;height:24px;margin-left:-12px}
/* my presets in the sheet */
html.phone .mp-name{font-size:16px}
html.phone .m-mine .mp-list{height:min(340px,46dvh);overflow-y:auto;align-content:start;overscroll-behavior:contain;scrollbar-width:thin}
html.phone .m-mine .mp-list:has(> .mp-empty){align-content:center}
html.phone .menu.menu-presets{width:auto;height:min(62dvh,520px)}
/* landscape keeps the docked sheet; five tabs */
html.phone.land .m-sheet{bottom:calc(var(--sab) + 10px)}
html.phone.land .m-tabs{bottom:calc(var(--sab) + 8px);height:var(--m-tabs-h);padding:0;border:1px solid var(--m-line)}
html.phone.land .nav{height:calc(52px + var(--sat))}

/* PXL SUPPLY v5: hard edges to match the 5-block mark */
*, *::before, *::after { border-radius: 0 !important; }

/* Undo / Redo in the phone top bar (Oct 17) */
html.phone .nav .hist{order:5;margin-left:auto;border-color:var(--m-line)}
html.phone .nav .hist-b{width:34px;height:34px}
html.phone .nav .m-menu-btn{order:6}
@media (max-width:430px){html.phone .nav .hist-b{width:30px} html.phone .nav .m-menu-btn .m-mb-ar{display:none} html.phone .nav .m-menu-btn{max-width:none;flex:1 1 auto;min-width:0}}
/* Palette hint + the Custom chip's "+" (Oct 17: make picking your own colors obvious) */
.m-pal-hint{margin:-2px 0 10px;font-size:12.5px;line-height:1.4;color:rgb(255 255 255/.6)}
.m-chip.custom{position:relative}
.m-chip.custom b{position:absolute;inset:0;display:grid;place-items:center;font:500 16px/1 var(--font-mono,ui-monospace,monospace);color:#fff;text-shadow:0 0 6px #000,0 0 2px #000;pointer-events:none}
/* Any color — square swatches in the Color sheet */
html.phone .m-any-colors{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:10px}
html.phone .m-any-swatch{position:relative;display:flex;flex-direction:column;align-items:stretch;gap:4px;border:1px solid var(--m-line,#2a2a2e);background:#0a0a0c;padding:6px;cursor:pointer}
html.phone .m-any-swatch i{display:block;aspect-ratio:1;border:1px solid rgb(255 255 255 / .12)}
html.phone .m-any-swatch span{font-family:var(--font-mono,ui-monospace,monospace);font-size:0.58rem;letter-spacing:0.12em;text-transform:uppercase;color:rgb(255 255 255 / .55);text-align:center}
html.phone .m-any-swatch input[type=color]{position:absolute;inset:0;opacity:0;cursor:pointer;border:0;padding:0}

/* ---------- Oct 8: home strip under the canvas (portrait, all sheets closed) ---------- */
.m-home{display:none}
html.phone:not(.land).m-home-on .m-home{display:flex}
html.phone:not(.land) .m-home{position:fixed;z-index:30;left:0;right:0;top:calc(var(--m-dock-top,300px) + 56px);bottom:calc(var(--m-tabs-h) + var(--sab));flex-direction:column;gap:18px;padding:16px var(--m-pad-r,18px) 18px var(--m-pad-l,18px);overflow-y:auto;overscroll-behavior:contain;background:#050505}
html.phone[data-mmodal] .m-home{visibility:hidden}
.m-home-head{display:flex;align-items:center;justify-content:space-between}
.m-home-head .btn{height:36px;padding:0 14px;font-size:13px}
.m-chips{display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x mandatory;margin:-6px calc(-1 * var(--m-pad-r,18px)) 0 calc(-1 * var(--m-pad-l,18px));padding:0 var(--m-pad-r,18px) 4px var(--m-pad-l,18px);scrollbar-width:none}
.m-chips::-webkit-scrollbar{display:none}
.m-chip-l{flex:none;width:112px;scroll-snap-align:start;display:flex;flex-direction:column;gap:7px;text-align:left;padding:5px 5px 9px;border:1px solid var(--m-line,var(--line));background:#0b0b0d;color:var(--fg);font-size:12.5px}
.m-chip-l i{position:relative;display:grid;place-items:center;aspect-ratio:16/9;background:#18181b;color:#fff}
.m-chip-l i svg{width:11px;height:11px;filter:drop-shadow(0 0 2px #000)}
.m-chip-l span{padding:0 3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.m-chip-l.on{border-color:var(--fg)}
.m-chip-l.off{opacity:.45}
.m-home-tempo .tp{grid-template-columns:132px 1fr;gap:14px;margin:0}
.m-home-tempo .tp-bpm{font-size:42px}
.m-home-tempo .tp-type,.m-home-tempo .tp-info{display:none}
.m-home-tempo .tp-row .seg button{height:40px;font-size:12px}
.m-home-tempo .tp-bars button:nth-child(5){display:none}
.m-home-acts{display:grid;grid-template-columns:1fr 1fr 1.2fr;gap:8px;margin-top:auto}
.m-home-acts .btn{height:48px;font-size:14px}
html.phone .dock #tempoBtn{display:none}