/* PXLGEN Oct 20 phone + view pass (home-demo-flow). Loaded last. Dark, square, no blur. */

/* ---- view: one FPS readout (the editor's own, folded into the label line); gear + fullscreen as one top-right cluster */
.hud{-webkit-backdrop-filter:none!important;backdrop-filter:none!important;border-radius:0!important}
.hud.tr{display:none!important}
.hud.tl #fps{cursor:pointer;color:rgb(255 255 255/.7);white-space:nowrap}
.hud.tl #fps::before{content:"·";margin:0 .45em;color:rgb(255 255 255/.35)}
.hud.tl #fps[hidden]{display:none}
.hud.tl #fps:hover{color:#fff}
.canvas-wrap:not(.fs-on) .fs-btn{top:12px;bottom:auto;right:12px;width:28px;height:28px}
.sbx-vo-gear{top:12px!important;right:46px!important;width:28px!important;height:28px!important}
.sbx-vo-fps{display:none!important}
html.phone .canvas-wrap:not(.fs-on) .fs-btn{top:8px;right:8px;width:32px;height:32px}
html.phone .sbx-vo-gear{top:8px!important;right:46px!important;width:32px!important;height:32px!important}
html.phone .hud.tl{top:8px;height:24px;max-width:calc(100% - 100px);font-size:10.5px}
html.phone .hud.tl #fps{position:relative}
html.phone .hud.tl #fps::after{content:"";position:absolute;left:-6px;right:-6px;top:50%;height:44px;transform:translateY(-50%)}

/* ---- top bar (phone): menu · logo · Looks · Randomize. Undo/Redo sit by the timeline, the lock lives on the Export tab */
html.phone .nav .hist,html.phone .nav .nav-export{display:none!important}
html.phone .dock .hist{display:flex;flex:none;gap:0}
html.phone .dock .hist-b{position:relative;width:28px;height:30px;display:grid;place-items:center;border:0;background:none;color:rgb(255 255 255/.75)}
html.phone .dock .hist-b:disabled{opacity:.3}
html.phone .dock .hist-b::before{content:"";position:absolute;left:0;right:0;top:50%;height:44px;transform:translateY(-50%)}
html.phone .dock .hist-b svg{width:14px;height:14px}

/* ---- timeline: one slim row, times inline */
html.phone .dock{height:38px!important;padding:0 6px!important;gap:4px!important}
html.phone .dock .play{width:32px!important;height:32px!important;position:relative}
html.phone .dock .play::before{content:"";position:absolute;left:0;right:0;top:50%;height:44px;transform:translateY(-50%)}
html.phone .dock .chip-tgl,html.phone .dock .tp-btn{width:40px!important;height:38px!important}
html.phone .dock .chip-tgl::before,html.phone .dock .tp-btn::before{left:-2px!important;right:-2px!important}
html.phone .dock .chip-tgl::before,html.phone .dock .tp-btn::before{content:"";position:absolute;left:0;right:0;top:50%;height:44px;transform:translateY(-50%)}
html.phone .dock .chip-tgl:has(input:checked)::after{left:11px;right:11px;bottom:5px}
html.phone .scrub{display:flex!important;flex-direction:row!important;align-items:center;gap:6px!important}
html.phone .scrub .timeline{flex:1;min-width:40px}
html.phone .scrub-meta{display:flex;gap:2px;flex:none;font-size:10.5px;margin:0!important}
html.phone .scrub-meta #tcEnd::before{content:"/ "}

/* ---- sheet: small handle */
html.phone .m-grab{height:14px!important}
html.phone .m-handle{width:28px!important;height:3px!important}

/* ---- one header grammar for every sheet: a row with the title (15px semibold) left and small square actions right */
html.phone .insp-head{display:flex;align-items:center;gap:6px;padding:4px 12px 8px!important;flex-wrap:nowrap}
html.phone .insp-head .row1{order:2;margin-left:auto;min-height:0}
html.phone .insp-head .row1 .eyebrow{display:none}
html.phone .insp-head .ttl{order:1;display:flex;align-items:baseline;gap:6px;min-width:0;margin:0!important;font-family:var(--font-sans,inherit);font-size:15.5px!important;font-weight:600;letter-spacing:0;text-transform:none;font-stretch:100%}
html.phone .insp-head .ttl .t{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html.phone .insp-head .ttl .n{font-size:11px!important;margin:0!important;vertical-align:baseline}
html.phone .insp-head .ttl .info-btn{width:24px;height:24px;flex:none;position:relative}
html.phone .insp-head .ttl .info-btn::before{content:"";position:absolute;inset:-10px}
html.phone .insp-head .acts .icon,html.phone .o20-btn{position:relative;width:32px;height:32px;border-radius:0}
html.phone .insp-head .acts .icon::before{content:"";position:absolute;left:0;right:0;top:50%;height:44px;transform:translateY(-50%)}
html.phone .insp-head .acts{gap:6px}
html.phone .sec-title{padding:6px 10px 6px 12px!important;min-height:36px}
html.phone .sec-title .pm{width:32px;height:32px}

/* Layers: preset row + layers row on one grid, shared edges, same small buttons */
html.phone .sp-head{display:grid!important;grid-template-columns:1fr auto;align-items:center;gap:6px 8px;padding:4px 12px 0!important;margin:0!important;border:0!important}
html.phone .sp-head .sp-k{display:none}
html.phone .sp-head .sp-hname{justify-self:start;display:inline-flex;height:32px;min-height:0;align-items:center;gap:6px;min-width:0;font-size:15.5px;font-weight:600}
html.phone .sp-head .sp-hname b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html.phone .sp-head .sp-meta{grid-column:1;grid-row:2;justify-self:start;height:20px;display:inline-flex;align-items:center;padding:0 6px;border:1px solid rgb(255 255 255/.16);font:500 11px/1 var(--font-sans,inherit);letter-spacing:0;text-transform:none;color:rgb(255 255 255/.6)}
html.phone .sp-head .sp-plus{grid-column:2;grid-row:1}
html.phone #layersPanel .panel-head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 12px 8px!important;margin:0!important;border-bottom:1px solid rgb(255 255 255/.07)!important}
html.phone #layersPanel .panel-head .eyebrow{font-family:var(--font-sans,inherit);font-size:13px;font-weight:600;letter-spacing:0;text-transform:none;color:#fff}
html.phone #layersPanel .panel-head .eyebrow i{display:none}
html.phone #layersPanel .panel-head .eyebrow b{font-weight:500;color:rgb(255 255 255/.5)}
html.phone #layersPanel .panel-head .eyebrow b::before{content:"· "}
html.phone .sp-head .sp-plus,html.phone #addLayer{position:relative;height:32px!important;min-height:0!important;padding:0 10px!important;display:inline-flex;align-items:center;gap:6px;border:1px solid rgb(255 255 255/.22)!important;background:transparent!important;font:600 12.5px/1 var(--font-sans,inherit)!important;letter-spacing:0!important;color:#fff!important;border-radius:0!important}
html.phone .sp-head .sp-plus svg,html.phone #addLayer svg{width:12px;height:12px}
html.phone .sp-head .sp-plus::before,html.phone #addLayer::before{content:"";position:absolute;left:0;right:0;top:50%;height:44px;transform:translateY(-50%)}
/* Looks / Export headers: the same row */
html.phone .m-pane-head,html.phone #exportPop .pop-head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:4px 12px 8px!important;margin:0!important}
html.phone .m-pane-head .eyebrow,html.phone #exportPop .pop-head .eyebrow{display:none}
html.phone .m-pane-head h3,html.phone #exportPop .pop-head h3{margin:0!important;font-family:var(--font-sans,inherit);font-size:15.5px!important;font-weight:600;letter-spacing:0;text-transform:none;font-stretch:100%}

/* ---- bottom tabs: floating clear glass (no blur), bright edge + thin rim light; lit active tab */
html.phone .m-tabs{left:calc(10px + env(safe-area-inset-left))!important;right:calc(10px + env(safe-area-inset-right))!important;bottom:calc(8px + env(safe-area-inset-bottom))!important;height:56px!important;padding:4px!important;gap:4px!important;grid-template-columns:repeat(4,1fr)!important;border-radius:0!important;
  background:linear-gradient(180deg,rgb(255 255 255/.07),rgb(255 255 255/.02)) ,rgb(10 10 12/.62)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;
  border:1px solid rgb(255 255 255/.24)!important;box-shadow:inset 0 1px 0 rgb(255 255 255/.32),inset 0 -1px 0 rgb(255 255 255/.06),0 12px 34px -12px rgb(0 0 0/.9)!important}
html.phone .m-tabs button{border-radius:0!important;color:rgb(255 255 255/.5)!important;font-size:11.5px!important;gap:3px!important}
html.phone .m-tabs button[aria-selected="true"]{color:#fff!important;background:rgb(255 255 255/.1)!important;box-shadow:inset 0 0 0 1px rgb(255 255 255/.3),0 0 16px -2px rgb(255 255 255/.22)}
html.phone .m-tabs button[aria-selected="true"] svg{filter:drop-shadow(0 0 4px rgb(255 255 255/.6))}
html.phone .m-body{padding-bottom:calc(76px + env(safe-area-inset-bottom))}
html.phone .m-menu-btn .m-mb-ar{display:none}
html.phone .dock .mx-song{margin-left:4px!important}
html.phone .sp-head .sp-hname{position:relative;height:32px!important;min-height:0!important}
html.phone .sp-head .sp-hname::before{content:"";position:absolute;left:0;right:0;top:50%;height:46px;transform:translateY(-50%)}
html.phone .dock .hist{position:static!important;inset:auto!important;transform:none!important;margin:0!important;padding:0!important;border:0!important;background:none!important;box-shadow:none!important;height:auto!important;width:auto!important}
html.phone .dock .scrub-meta #tcEnd{display:none}
html.phone .m-pal-global{padding-left:12px!important;padding-right:12px!important}
html.phone .insp-head .acts .icon{width:32px!important;height:32px!important;min-width:0!important}
html.phone .insp-head .acts{gap:12px!important}
html.phone .dock .wm-up{margin-left:16px!important}
html.phone .sp-head .sp-hname b{display:flex;align-items:center;height:32px}
html.phone .sp-head .sp-hname{border:0!important;padding-top:0!important;padding-bottom:0!important}