:root{font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Helvetica Neue",Arial,sans-serif;font-synthesis:none;color:#fff;background:#030c04;--acid:#46ff12;--muted:rgba(255,255,255,.74);--safe-bottom:env(safe-area-inset-bottom,0px);--border:rgba(255,255,255,.13)}*{box-sizing:border-box}html,body{margin:0;min-height:100%;width:100%}body{background:#061c06;color:white}button,input{font:inherit}button{cursor:pointer;color:inherit;border:0}button:disabled{opacity:.24;cursor:default}button:focus-visible,input:focus-visible{outline:2px solid var(--acid);outline-offset:3px}svg.icon{display:block;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;width:25px;height:25px}.svg-symbols{position:absolute;width:0;height:0;overflow:hidden}.icon.small{width:22px;height:22px}.app-shell{position:relative;isolation:isolate;overflow:hidden;max-width:720px;min-height:100vh;min-height:100dvh;margin:auto;box-shadow:0 0 130px #000d}#fluid-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:-3;pointer-events:none}.visual-dim{position:absolute;inset:0;z-index:-2;background:linear-gradient(180deg,rgba(0,0,0,.08) 0%,transparent 30%,rgba(0,0,0,.13) 100%);pointer-events:none}.app-shell.custom-bg #fluid-canvas{opacity:0}.app-shell.custom-bg{background-position:center;background-size:cover}.glass{background:rgba(5,20,7,.46);border:1px solid rgba(255,255,255,.11);-webkit-backdrop-filter:blur(17px) saturate(150%);backdrop-filter:blur(17px) saturate(150%)}.topbar{height:85px;padding:calc(17px + env(safe-area-inset-top,0px)) 28px 0;display:flex;align-items:flex-start;justify-content:space-between;gap:8px}.topbar-left,.topbar-right{display:flex;align-items:center;gap:12px}.icon-button{width:54px;height:54px;display:grid;place-items:center;background:transparent;border-radius:50%}.icon-button.edge{width:54px}.icon-button.bolt{color:var(--acid)}.icon-button.bolt svg{fill:currentColor;stroke-width:1.3}.create-pill{display:flex;align-items:center;gap:10px;justify-content:center;min-width:139px;padding:15px 24px;font-size:20px;font-weight:700;border-radius:28px;background:rgba(8,34,10,.74)}.topbar-right .icon-button{width:57px;height:57px}.main{min-height:calc(100dvh - 86px);display:flex;flex-direction:column;padding:0 32px calc(92px + var(--safe-bottom));}.brand-line{display:flex;justify-content:space-between;align-items:center;margin-top:65px;gap:14px}.brand-identity{display:flex;align-items:center;gap:12px;min-width:0}.brand-identity img{width:63px;height:63px;object-fit:cover;flex:0 0 auto;border-radius:10px}.brand-identity h1{font-size:46px;line-height:.97;margin:0 0 7px;letter-spacing:-2.4px;font-weight:800}.build-badge{font-size:15px;letter-spacing:.3em;font-weight:900;color:var(--acid);white-space:nowrap}.quick-actions{display:flex;align-items:center;gap:8px}.round-quick{flex:0 0 51px;width:51px;height:51px;border-radius:50%;display:grid;place-items:center;color:var(--acid);background:rgba(9,47,14,.43)}.round-quick.primary{background:#45ff08;color:#001300}.round-quick.primary svg{width:29px;height:29px;stroke-width:3}.round-quick.is-favorite svg{fill:var(--acid)}.floating-lyrics{width:100%;margin:auto 0 24px;padding:17px 18px;text-align:center;font-size:20px;font-weight:700;line-height:1.4;text-shadow:0 3px 14px #000e;max-height:90px;overflow:hidden}.floating-lyrics[hidden]{display:none}.player{margin-top:auto;position:relative;width:100%;min-height:590px;display:flex;align-items:center;flex-direction:column;border-radius:32px;padding:24px 22px 30px;box-shadow:0 14px 50px rgba(0,0,0,.18);background:rgba(0,15,3,.34);overflow:hidden}.cover-wrap{width:min(55%,290px);aspect-ratio:1;max-height:290px;position:relative;margin:0 auto 18px;padding:0;background:rgba(2,8,2,.45);border-radius:21px;box-shadow:0 11px 32px #000a,0 0 0 1px rgba(255,255,255,.15);overflow:hidden;flex:0 0 auto}.cover-wrap img{width:100%;height:100%;object-fit:cover;display:block}.cover-overlay{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(transparent,rgba(0,0,0,.7));font-size:11px;padding:26px 8px 10px;display:flex;gap:5px;align-items:center;justify-content:center;transition:opacity .2s}.cover-overlay svg{width:15px;height:15px}.cover-wrap.has-audio .cover-overlay{opacity:0}.cover-wrap.has-audio:hover .cover-overlay{opacity:1}.player h2{max-width:100%;font-size:clamp(23px,4.8vw,32px);line-height:1.1;text-align:center;margin:5px 0 8px;font-weight:800;letter-spacing:-.7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.artist{font-size:24px;text-align:center;line-height:1.1;margin:0;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}.transport{display:flex;justify-content:center;align-items:center;gap:16px;margin:22px 0 23px}.transport-btn{width:66px;height:56px;display:grid;place-items:center;background:transparent}.transport-btn svg{width:43px;height:43px;fill:#fff;stroke-width:1}.play-button{border-radius:50%;background:#fff;color:black;width:96px;height:96px;display:grid;place-items:center;flex:0 0 auto}.play-button svg{fill:#080808;stroke:#080808;width:40px;height:40px}.progress-block{width:100%;margin-top:auto}.progress-label{display:flex;justify-content:space-between;align-items:center;font-size:17px;font-weight:700;padding:0 4px 10px}.progress-label span:last-child{font-weight:500;font-size:20px}input[type="range"]{width:100%;accent-color:#fff;cursor:pointer}#seek-slider{height:5px;display:block;appearance:none;-webkit-appearance:none;background:linear-gradient(to right,#fff 0%,#fff var(--progress,0%),rgba(255,255,255,.32) var(--progress,0%));border-radius:40px;margin:22px 0 15px}#seek-slider::-webkit-slider-thumb{appearance:none;width:23px;height:23px;border-radius:50%;background:#fff;box-shadow:0 1px 8px #0008}#seek-slider::-moz-range-thumb{border:none;width:23px;height:23px;border-radius:50%;background:#fff}.progress-foot{height:26px;display:flex;align-items:center;justify-content:space-between;color:rgba(255,255,255,.6);font-size:13px}.reaction-pill{margin-top:-29px;margin-right:0;min-width:65px;display:flex;align-items:center;flex-direction:column;background:transparent;color:var(--acid);font-size:12px;font-weight:900;letter-spacing:.08em;gap:7px}.reaction-pill .icon{width:58px;height:58px;border-radius:50%;padding:18px;background:rgba(0,16,1,.55);border:1px solid rgba(255,255,255,.1)}.app-bottom-hint{font-size:12px;text-align:center;margin-top:26px;opacity:.68;max-width:400px;align-self:center;text-shadow:0 1px 6px #000}.bottom-dock{position:absolute;bottom:calc(12px + var(--safe-bottom));left:50%;transform:translateX(-50%);display:flex;gap:8px;padding:9px 12px;border-radius:28px;background:rgba(0,15,4,.83);box-shadow:0 9px 24px #0009}.dock-button{display:flex;flex-direction:column;align-items:center;min-width:64px;gap:2px;background:transparent;border-radius:18px;padding:6px 9px;font-size:10px;font-weight:700;color:rgba(255,255,255,.84)}.dock-button .icon{width:22px;height:22px}.dock-button:hover{background:rgba(255,255,255,.1)}.panel-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.58);z-index:8;backdrop-filter:blur(4px)}.bottom-sheet{z-index:9;position:absolute;bottom:0;left:0;right:0;background:rgba(10,18,11,.96);box-shadow:0 -13px 60px #0009;border:1px solid rgba(255,255,255,.11);border-bottom:0;border-radius:30px 30px 0 0;height:min(82dvh,720px);display:flex;flex-direction:column;padding:0 25px calc(22px + var(--safe-bottom));animation:rise .22s ease-out}@keyframes rise{from{transform:translateY(24px);opacity:.6}to{transform:translateY(0);opacity:1}}.panel-backdrop[hidden],.bottom-sheet[hidden],.toast[hidden]{display:none}.sheet-grabber{height:5px;width:50px;border-radius:3px;background:#fff5;margin:12px auto 15px}.sheet-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}.sheet-header .eyebrow{font-size:10px;letter-spacing:.25em;font-weight:900;color:var(--acid)}.sheet-header h2{margin:3px 0 0;font-size:30px}.sheet-content{overflow:auto;overscroll-behavior:contain;flex:1;scrollbar-color:#66e82933 transparent}.search-bar{display:flex;gap:8px;margin:0 0 13px}.search-bar input,.field{background:rgba(255,255,255,.09);color:#fff;border:1px solid var(--border);border-radius:16px;min-width:0;font-size:16px;padding:12px 14px;width:100%}.search-bar button,.action-button{background:var(--acid);color:#071607;border:0;border-radius:15px;padding:12px 15px;font-weight:800;white-space:nowrap}.action-button.alt{background:rgba(255,255,255,.1);border:1px solid var(--border);color:white}.action-button.danger{background:#722322;color:white}.section-head{font-size:11px;color:var(--acid);font-weight:900;letter-spacing:.18em;margin:20px 0 11px;text-transform:uppercase}.section-note{color:#c3ccc3;font-size:13px;line-height:1.5;margin:8px 0 14px}.media-list{display:flex;flex-direction:column;gap:8px}.media-item{padding:10px;border-radius:15px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.055);display:flex;align-items:center;gap:12px}.media-item img{width:48px;height:48px;object-fit:cover;border-radius:9px}.media-item .media-text{min-width:0;flex:1;display:flex;flex-direction:column;gap:4px}.media-item strong{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.media-item small{font-size:12px;color:#bec8be;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.media-item button{color:var(--acid);border-radius:9px;background:rgba(45,255,26,.07);font-weight:800;min-width:50px;padding:9px 12px}.chip-row{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}.chip{border-radius:20px;background:rgba(255,255,255,.09);border:1px solid var(--border);padding:10px 15px;font-size:13px;font-weight:800}.chip.selected{border-color:var(--acid);color:#010e02;background:var(--acid)}.setting{padding:18px 0;border-bottom:1px solid var(--border);display:flex;flex-direction:column;gap:11px}.setting-title{display:flex;justify-content:space-between;font-size:14px;font-weight:700}.setting input[type="range"]{accent-color:var(--acid)}.button-row{display:flex;flex-wrap:wrap;gap:9px;margin-top:13px}.status-text{font-size:12px;color:#bee5b7}.lyrics-box{display:flex;flex-direction:column;gap:10px;text-align:center;padding:16px 12px}.lyric-line{font-size:18px;color:#a3b8a5;line-height:1.55}.lyric-line.active{font-size:23px;font-weight:800;color:var(--acid);text-shadow:0 0 18px #27fd497a}.card-help{border:1px solid var(--border);background:rgba(255,255,255,.05);padding:15px;border-radius:17px;margin-bottom:14px;font-size:14px;line-height:1.6}.card-help strong{color:var(--acid)}.toast{z-index:12;position:absolute;top:calc(100px + env(safe-area-inset-top,0px));left:50%;transform:translateX(-50%);max-width:90%;white-space:normal;padding:13px 19px;background:#071507;border:1px solid #55ff66c0;border-radius:16px;color:#fff;box-shadow:0 8px 30px #000b;text-align:center;font-weight:700;font-size:14px}.app-shell.dragover::after{position:absolute;inset:10px;content:'Solte o arquivo de áudio aqui';display:grid;place-items:center;z-index:15;border:3px dashed var(--acid);border-radius:22px;background:#001b03e8;color:var(--acid);font-size:24px;font-weight:800}.row-end{display:flex;justify-content:space-between;align-items:center;gap:12px}.row-end>*{min-width:0}.separator{height:1px;background:var(--border);margin:12px 0}.footer-caption{font-size:11px;opacity:.6;line-height:1.5}.accent{color:var(--acid)}@media(min-width:900px){.app-shell{margin:24px auto;min-height:calc(100dvh - 48px);height:auto;max-width:660px;border-radius:31px;border:1px solid rgba(255,255,255,.2)}.main{min-height:calc(100dvh - 140px)}.brand-line{margin-top:32px}.player{margin-top:180px}}@media(max-width:650px){.topbar{padding:calc(15px + env(safe-area-inset-top,0px)) 18px 0;gap:4px;height:85px}.topbar-left,.topbar-right{gap:2px}.icon-button,.icon-button.edge,.topbar-right .icon-button{width:47px;height:47px}.create-pill{min-width:112px;font-size:15px;padding:12px 16px}.main{padding:0 20px calc(88px + var(--safe-bottom));min-height:calc(100dvh - 83px)}.brand-line{margin-top:28px;gap:8px}.brand-identity{gap:9px}.brand-identity img{width:47px;height:47px}.brand-identity h1{font-size:34px;letter-spacing:-1.5px}.build-badge{font-size:12px;letter-spacing:.23em}.quick-actions{gap:7px}.round-quick{flex-basis:42px;width:42px;height:42px}.round-quick .icon{width:22px;height:22px}.player{min-height:525px;border-radius:28px;padding:18px 16px 25px}.cover-wrap{width:min(62%,245px)}.artist{font-size:18px}.transport{margin:18px 0}.play-button{width:80px;height:80px}.transport-btn{width:49px}.transport-btn svg{width:35px;height:35px}.progress-label{font-size:14px}.progress-label span:last-child{font-size:16px}.bottom-sheet{padding-left:18px;padding-right:18px}}@media(max-width:410px){.main{padding:0 13px calc(88px + var(--safe-bottom))}.brand-line{margin-top:26px}.quick-actions{gap:4px}.round-quick{flex-basis:37px;width:37px;height:37px}.brand-identity h1{font-size:30px}.brand-identity img{width:41px;height:41px}.build-badge{font-size:10px}.player{min-height:495px}.player h2{font-size:24px}.cover-wrap{max-width:220px}.topbar .icon-button{width:39px;height:44px}.topbar .create-pill{min-width:102px}.bottom-dock{gap:3px}.dock-button{min-width:59px}}@media(max-height:750px){.player{min-height:475px}.brand-line{margin-top:18px}.cover-wrap{max-height:180px;width:180px}.player h2{margin-top:2px}.transport{margin:10px 0}.app-bottom-hint{display:none}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}
/* Phone-sized Stage 72 proportions: album card below the action row, not filling the screen. */
@media(max-width:650px) and (min-height:751px){
  .player{min-height:425px;padding:14px 16px 21px}
  .cover-wrap{width:min(47%,165px);max-height:165px;border-radius:19px;margin-bottom:11px}
  .player h2{font-size:clamp(19px,5.3vw,26px);margin:1px 0 6px}
  .artist{font-size:17px}
  .transport{gap:12px;margin:15px 0 12px}
  .play-button{width:75px;height:75px}
  .play-button svg{width:35px;height:35px}
  .progress-label{font-size:12px;padding-bottom:3px}
  #seek-slider{margin:13px 0 15px}
  .reaction-pill .icon{width:49px;height:49px;padding:14px}
  .app-bottom-hint{margin-top:18px}
}

/* Stage 72 parity corrections · compact player, screen-native density */
.app-shell .player{min-height:0;height:auto;max-width:100%;padding:18px 18px 20px;border-radius:27px;gap:0;margin-top:auto;margin-bottom:22px;backdrop-filter:blur(12px) saturate(140%);-webkit-backdrop-filter:blur(12px) saturate(140%)}
.app-shell .cover-wrap{width:clamp(116px,42%,196px);max-height:196px;margin-bottom:13px;border-radius:17px}
.app-shell .player h2{font-size:clamp(19px,4.6vw,26px);margin:2px 0 6px;letter-spacing:-.65px}
.app-shell .artist{font-size:clamp(15px,3.4vw,18px)}
.app-shell .transport{gap:13px;margin:13px 0 15px}
.app-shell .play-button{width:70px;height:70px}
.app-shell .play-button svg{width:32px;height:32px}
.app-shell .transport-btn{width:47px;height:52px}
.app-shell .transport-btn svg{width:35px;height:35px}
.app-shell .progress-block{margin-top:0}
.app-shell .progress-label{font-size:12px;padding-bottom:4px}
.app-shell .progress-label span:last-child{font-size:13px}
.app-shell #seek-slider{margin:14px 0 11px}
.app-shell .progress-foot{height:24px}
.app-shell .reaction-pill{margin-top:-21px;font-size:10px}
.app-shell .reaction-pill .icon{width:47px;height:47px;padding:12px}
.app-shell .main{padding-bottom:calc(88px + var(--safe-bottom))}
.app-shell .app-bottom-hint{margin-top:0;margin-bottom:8px;opacity:.78;font-size:11px}
.app-shell.cover-bg #fluid-canvas{opacity:0}
.app-shell.cover-bg{background-size:cover;background-position:center}
.app-shell .cover-wrap.has-audio .cover-overlay{opacity:0;pointer-events:none}
.app-shell .cover-wrap.has-audio:focus-visible .cover-overlay{opacity:1}
@media(min-width:900px){.app-shell .player{max-width:590px;margin-left:auto;margin-right:auto;margin-top:82px;min-height:0}.app-shell .main{min-height:calc(100dvh - 140px)}}
@media(max-width:650px){.app-shell .player{padding:14px 14px 18px;margin-bottom:16px}.app-shell .cover-wrap{width:min(41vw,166px)}.app-shell .brand-line{margin-top:20px}.app-shell .progress-label span:last-child{font-size:12px}.app-shell .app-bottom-hint{font-size:10px}}
@media(max-height:720px){.app-shell .player{padding-top:10px;padding-bottom:11px;margin-bottom:8px}.app-shell .cover-wrap{width:min(30vw,120px);margin-bottom:7px}.app-shell .transport{margin:8px 0}.app-shell .play-button{width:58px;height:58px}}

/* Stage72 α3: fast presets visible on the card, safe-area density, and official embed. */
.preset-rail{width:100%;display:flex;justify-content:center;gap:6px;flex-wrap:wrap;margin:9px 0 1px}
.preset-chip{border:1px solid #ffffff38;background:rgba(0,17,5,.48);color:#f1fff0;padding:7px 10px;border-radius:999px;font-size:11px;font-weight:800;letter-spacing:.015em;white-space:nowrap;transition:background .15s}
.preset-chip.active{background:var(--acid);color:#082008;border-color:var(--acid)}
.preset-chip:active{transform:scale(.97)}
.youtube-modal{position:fixed;inset:0;z-index:100;background:rgba(0,0,0,.85);display:grid;place-items:center;padding:18px}
.youtube-modal[hidden]{display:none!important}
.youtube-modal-card{width:min(100%,560px);padding:16px;border-radius:20px;background:#07140af5;box-shadow:0 30px 90px #000e}
.youtube-modal-head{display:flex;align-items:center;justify-content:space-between;gap:20px;font-size:18px;padding:0 6px 12px}
.youtube-frame-wrap{position:relative;aspect-ratio:16/9;background:#000;overflow:hidden;border-radius:14px}
.youtube-frame-wrap iframe{border:0;position:absolute;inset:0;width:100%;height:100%}
.youtube-modal-card p{font-size:12px;line-height:1.6;color:#ddd}
.youtube-modal-card a{color:var(--acid);font-weight:800}
@media(max-width:410px){.preset-rail{gap:4px}.preset-chip{font-size:10px;padding:6px 8px}.app-shell .player{padding:12px 12px 13px}.app-shell .transport{margin:9px 0}}

/* Invite-only Stage72 audio gate. Main player dimensions stay untouched. */
.beta-gate-card{max-width:430px}
.beta-gate-form{display:flex;flex-direction:column;gap:10px;margin:16px 0}
.beta-gate-form label{font-size:13px;color:#fff9}
.beta-gate-form input{font-size:17px;padding:13px;border-radius:12px;border:1px solid #ffffff50;background:#071a10;color:white;min-width:0}
.beta-gate-form button{background:var(--acid);color:#041609;border:0;padding:13px;border-radius:12px;font-weight:800}
.beta-gate-form button:disabled{opacity:.5}
#beta-play-official{width:100%;margin-top:7px}

.player-status{max-width:100%;font-size:12px;line-height:1.3;text-align:center;color:#e8ffe6;background:#031903ba;border:1px solid #ffffff22;border-radius:10px;padding:6px 10px;margin:8px 0 0}.player-status[hidden]{display:none!important}

/* Stage 72 CreativeVisualTaxonomy · Tema / Experiência / Ritmo as independent choices */
.visual-status{background:rgba(9,24,15,.75);border:1px solid rgba(255,255,255,.18);padding:14px;border-radius:15px;display:flex;flex-direction:column;gap:5px;margin-bottom:12px}
.visual-status strong{font-size:15px;letter-spacing:.025em;color:var(--acid)}
.visual-status small{color:#f0f7ed;font-size:13px}
.visual-status span{font-size:12px;color:#b8c5b9;line-height:1.4}
.visual-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;margin:14px 0 17px;border-radius:14px;padding:5px;background:rgba(255,255,255,.07)}
.visual-tabs button{border-radius:10px;background:transparent;color:#d4e1d3;padding:12px 4px;font-size:12px;font-weight:800;letter-spacing:-.03em}
.visual-tabs button.active{background:var(--acid);color:#071b06}
.visual-choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin-bottom:20px}
.visual-choice{display:flex;flex-direction:column;align-items:flex-start;gap:5px;border-radius:14px;padding:12px;border:1px solid #ffffff23;background:rgba(255,255,255,.055);text-align:left;min-height:65px;overflow:hidden}
.visual-choice .swatch{height:37px;width:100%;border-radius:9px;background:linear-gradient(110deg,var(--swatch-a),var(--swatch-b),var(--swatch-c));box-shadow:inset 0 0 9px #0005}
.visual-choice strong{font-size:12px;letter-spacing:.01em;line-height:1.3}
.visual-choice small{font-size:11px;line-height:1.35;color:#bdc6bd}
.visual-choice.active{border-color:var(--acid);box-shadow:0 0 0 1px var(--acid),inset 0 0 25px #45ff0516}
.visual-choice.active strong{color:var(--acid)}
#stem-status{background:rgba(255,255,255,.045);padding:10px;border-radius:10px}
@media(max-width:410px){.visual-choice{padding:9px}.visual-choice strong{font-size:11px}.visual-tabs button{font-size:11px}}


/* GNARLY Stage 72 mixer rails — design-system source: Figma GNARLY WEB Stage72. */
.sheet-content .setting,.setting{background:linear-gradient(125deg,rgba(20,34,31,.77),rgba(12,20,23,.65));border:1px solid rgba(207,255,222,.11);border-radius:16px;padding:15px 17px;margin:11px 0;gap:12px}
.setting-title{font-weight:730;letter-spacing:.01em;align-items:center}
.setting-title span:last-child{font-variant-numeric:tabular-nums;color:var(--acid)}
.setting input[type="range"]{--mix-fill:50%;appearance:none;-webkit-appearance:none;width:100%;height:8px;border-radius:999px;background:linear-gradient(to right,var(--accent,var(--acid)) 0%,var(--accent,var(--acid)) var(--mix-fill),rgba(206,236,229,.16) var(--mix-fill));outline-offset:6px;touch-action:pan-y}
.setting input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:24px;height:24px;border:3px solid var(--accent,var(--acid));border-radius:50%;background:#f7fff9;box-shadow:0 0 0 5px rgba(69,255,80,.09),0 2px 14px rgba(0,0,0,.58)}
.setting input[type="range"]::-moz-range-thumb{width:18px;height:18px;border:3px solid var(--accent,var(--acid));border-radius:50%;background:#f7fff9;box-shadow:0 2px 12px #0009}
.setting input[type="range"]:disabled{filter:grayscale(1);opacity:.45}
.setting:has([data-stem-level="vocal"]){--accent:#be88ff}.setting:has([data-stem-level="drums"]){--accent:#60ceff}.setting:has([data-stem-level="bass"]){--accent:#ffb865}.setting:has([data-stem-level="other"]){--accent:#82ffac}

/* STAGE 72 PANEL PARITY (P1-P3)
   Keep the existing audio/visual engines untouched. User screenshot is the UI source. */
[hidden]{display:none!important}
.app-shell{--gnarly-panel:rgba(25,20,24,.82);--gnarly-stroke:rgba(255,255,255,.19);}
.app-shell .topbar{position:relative;z-index:4;display:flex;align-items:center;justify-content:space-between;gap:clamp(2px,.6vw,8px);width:100%;height:auto;min-height:85px;padding:calc(13px + env(safe-area-inset-top,0px)) clamp(10px,3vw,24px) 0}
.app-shell .topbar>.icon-button{display:grid;place-items:center;flex:0 0 clamp(34px,9vw,47px);width:clamp(34px,9vw,47px);height:45px;border-radius:50%;background:rgba(35,34,33,.56);border:1px solid rgba(255,255,255,.07);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
.app-shell .topbar>.bolt{background:rgba(15,23,17,.42)}
.app-shell .topbar>.icon-button .icon{width:24px;height:24px}
.app-shell .topbar .create-pill{min-width:0;width:clamp(92px,26vw,133px);height:44px;padding:0 7px;flex:0 1 auto;gap:7px;font-size:14px;border-radius:25px;background:rgba(21,22,23,.79);white-space:nowrap}
.app-shell .topbar .create-pill .icon{width:20px;height:20px}
.record-button{border:2px solid var(--acid)!important}
.record-dot{width:12px;height:12px;border-radius:100%;background:#ff484d;box-shadow:0 0 0 2px #fa426022}
.record-button.recording{animation:gnarly-rec 1.15s ease-in-out infinite}
.record-button.recording .record-dot{width:17px;height:17px;border-radius:4px}
@keyframes gnarly-rec{50%{filter:brightness(1.8)}}
.app-shell .main{padding:0 clamp(14px,5vw,34px) calc(26px + var(--safe-bottom));min-height:calc(100dvh - 90px);display:flex;flex-direction:column}
.app-shell .brand-line{margin-top:9px}
.app-shell .brand-identity{gap:9px}
.app-shell .brand-identity img{width:clamp(40px,11vw,58px);height:clamp(40px,11vw,58px)}
.app-shell .brand-identity h1{font-size:clamp(27px,8.5vw,46px);line-height:1;letter-spacing:-1.7px}
.app-shell .build-badge{font-size:clamp(9px,2.4vw,13px);letter-spacing:.18em;margin-top:4px}
.app-shell .more-button{width:42px;height:42px;border-radius:50%;background:rgba(38,34,35,.56)}
.app-shell .more-button .icon{width:22px;height:22px}
.app-shell .player{width:100%;max-width:640px;min-height:0!important;height:auto;margin:clamp(112px,20dvh,215px) auto 0;padding:15px clamp(12px,3.4vw,24px) 14px;border-radius:29px;flex:0 0 auto;background:rgba(28,17,21,.31);border:1px solid rgba(255,255,255,.12);box-shadow:0 17px 55px #0004;-webkit-backdrop-filter:blur(12px) saturate(150%);backdrop-filter:blur(12px) saturate(150%)}
.app-shell .cover-wrap{width:clamp(128px,39vw,196px);max-width:196px;max-height:none;margin:0 auto 11px;aspect-ratio:1;border-radius:17px}
.app-shell .player h2{font-size:clamp(18px,4.9vw,25px);font-weight:780;margin:6px 0 4px;line-height:1.17}
.app-shell .artist{font-size:clamp(13px,3.7vw,18px);margin:0;line-height:1.23}
.app-shell .transport{gap:12px;margin:12px 0 15px}
.app-shell .transport-btn{width:46px;height:44px}
.app-shell .transport-btn svg{width:28px;height:28px}
.app-shell .play-button{width:clamp(55px,15.5vw,73px);height:clamp(55px,15.5vw,73px)}
.app-shell .play-button svg{width:29px;height:29px}
.app-shell .progress-block{margin-top:4px}
.app-shell .progress-label{font-size:11px;padding:0 2px 5px}
.app-shell .progress-label span:last-child{font-size:14px}
.app-shell #seek-slider{height:4px;margin:14px 0 11px}
.app-shell #seek-slider::-webkit-slider-thumb{width:14px;height:14px}
.app-shell .progress-foot{height:17px;font-size:11px}
.app-shell .reaction-pill{position:absolute;right:14px;bottom:11px;min-width:40px;margin:0;font-size:9px;gap:5px;letter-spacing:.04em}
.app-shell .reaction-pill .icon{width:46px;height:46px;padding:14px;background:rgba(38,32,32,.6);border:1px solid rgba(255,255,255,.13)}
.app-shell .progress-foot #elapsed-label{opacity:.7}
.app-shell .omnibox-shell{position:relative;margin:8px auto 0;width:min(88%,510px);flex:0 0 auto;border-radius:999px;background:rgba(45,39,41,.63);border:1px solid var(--acid);box-shadow:0 9px 25px rgba(0,0,0,.22);backdrop-filter:blur(20px) saturate(150%);-webkit-backdrop-filter:blur(20px) saturate(150%)}
.omnibox-toggle{width:100%;min-height:45px;display:flex;align-items:center;justify-content:center;gap:11px;padding:8px 15px;background:transparent;color:white;font-size:12px;font-weight:650;text-align:center}
.omnibox-toggle .icon{width:20px;height:20px;flex:0 0 auto}
.omnibox-caption{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.omnibox-accent{width:19px;height:3px;border-radius:5px;background:var(--acid);margin-left:auto;flex:0 0 auto}
.omnibox-chevron{width:15px!important;height:15px!important}
.omnibox-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;margin:0 0 16px;padding:5px;border-radius:14px;background:#ffffff10}
.omnibox-tabs button{padding:11px 2px;border-radius:10px;background:transparent;color:#ecebeb;font-size:11px;font-weight:650;white-space:nowrap}
.omnibox-tabs button.active{background:color-mix(in srgb,var(--acid) 75%,#262126);color:#101113}
.app-shell .bottom-dock{display:none!important}
.app-shell.zen-mode .topbar{justify-content:flex-start}
.app-shell.zen-mode #search-toggle{border-color:var(--acid)}
.app-shell .bottom-sheet{height:min(83dvh,770px);background:rgba(27,23,25,.95);border-color:rgba(255,255,255,.15)}
.app-shell .bottom-sheet.music-sheet{background:linear-gradient(160deg,rgba(51,37,40,.96),rgba(34,31,32,.97))}
.app-shell .bottom-sheet.display-sheet{top:calc(86px + env(safe-area-inset-top,0px));bottom:auto;height:min(78dvh,780px);border:1px solid rgba(255,255,255,.17);border-radius:22px;max-width:600px;left:clamp(12px,4vw,32px);right:clamp(12px,4vw,32px);margin:auto}
.app-shell .bottom-sheet .sheet-header{margin-bottom:10px}
.app-shell .bottom-sheet.display-sheet .sheet-header{display:none}
.app-shell .sheet-content{padding-bottom:18px}
.music-panel{padding-bottom:10px;color:#f2e9e5}
.music-panel-kicker,.music-kicker{font-weight:760;letter-spacing:.18em;color:var(--acid);font-size:12px;margin:0 0 14px}
.music-panel-kicker{margin:6px 0 20px}
.music-segment{margin-bottom:28px}
.music-presets{display:flex;gap:8px;flex-wrap:wrap;align-items:stretch}
.music-preset,.stem-shortcuts button{min-height:46px;border-radius:25px;padding:11px 13px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.08);color:#f8f2ed;font-weight:680;font-size:12px;flex:1 0 auto}
.music-preset.active{border-color:var(--acid);color:var(--acid);background:color-mix(in srgb,var(--acid) 9%,transparent)}
.music-tabs{display:grid;grid-template-columns:1fr 1fr;gap:5px;padding:5px;border-radius:13px;background:rgba(255,255,255,.09);margin:0 0 16px}
.music-tabs button{padding:13px 5px;border-radius:9px;background:transparent;color:#e4dcdd;font-weight:750;font-size:13px}
.music-tabs button.active{background:rgba(255,255,255,.25);color:#fff}
.music-pitch-row{display:flex;justify-content:space-between;align-items:center;gap:13px;border:1px solid rgba(255,255,255,.13);border-radius:18px;padding:17px 15px;margin:18px 0 22px;background:rgba(255,255,255,.08)}
.music-pitch-row strong{font-size:14px;display:block}.music-pitch-row small{color:#c6babb;font-size:11px;display:block;line-height:1.5;margin-top:4px}
.music-switch{position:relative;flex:0 0 52px;height:32px}
.music-switch input{position:absolute;opacity:0;inset:0;cursor:pointer}
.music-switch span{width:52px;height:32px;background:#747074;border-radius:99px;display:block;transition:background .2s}
.music-switch span:before{content:'';position:absolute;top:3px;left:3px;background:#fff;width:26px;height:26px;border-radius:50%;transition:transform .2s}
.music-switch input:checked+span{background:var(--acid)}
.music-switch input:checked+span:before{transform:translateX(20px)}
.music-switch input:focus-visible+span{outline:3px solid #fff;outline-offset:3px}
.music-parameter{margin:15px 0 24px}
.music-parameter-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:0 0 9px}
.music-parameter-head label{font-size:12px;letter-spacing:.16em;color:#bdb1b1;font-weight:780}
.music-parameter-head output{font-size:25px;font-weight:780;font-variant-numeric:tabular-nums}
.music-range{display:block!important;width:100%;height:61px!important;appearance:none!important;-webkit-appearance:none!important;border:1px solid rgba(255,255,255,.18);border-radius:20px;background:linear-gradient(90deg,var(--rail-accent,var(--acid)) 0%,color-mix(in srgb,var(--rail-accent,var(--acid)) 35%,#dee1ff) var(--mix-fill,50%),rgba(36,30,33,.58) var(--mix-fill,50%))!important;cursor:pointer;touch-action:pan-y;outline-offset:4px}
.music-range::-webkit-slider-thumb{appearance:none!important;-webkit-appearance:none!important;width:34px;height:58px;border-radius:19px;background:linear-gradient(120deg,#fcfdff,#c6cfe4);border:1px solid rgba(255,255,255,.55);box-shadow:0 6px 21px #0005;cursor:grab}
.music-range::-moz-range-thumb{width:34px;height:52px;border-radius:17px;background:#f5f9ff;border:1px solid #ffffff99}
.music-range:disabled{opacity:.4;filter:saturate(.3)}
.music-footnote{font-size:11px;line-height:1.55;color:#c6bfc3;margin-top:17px}
.music-stems-status{background:rgba(255,255,255,.08);padding:13px;border-radius:12px;font-size:12px;line-height:1.5}
.music-model{font-size:12px;color:var(--acid)}
.music-stem-actions{display:flex;flex-wrap:wrap;gap:8px}
.music-stem-actions button{border:1px solid #ffffff30;border-radius:14px;background:#ffffff14;padding:11px;color:#fff;font-size:12px;font-weight:680}
.music-stem-actions button.primary{background:var(--acid);color:#141514}
.stem-shortcuts{margin-top:14px}
.stem-shortcuts button{min-height:36px;padding:7px}
.stem-parameter .music-parameter-head output{color:var(--rail-accent);font-size:21px}
.rhythm-segment{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));background:rgba(255,255,255,.12);border-radius:11px;padding:4px;gap:4px}
.rhythm-segment button{padding:11px 0;border-radius:9px;background:none;color:#f7ecec;font-size:12px}
.rhythm-segment button.active{background:rgba(255,255,255,.28);font-weight:790}
.display-panel{padding:4px 2px 10px;color:#f7f4f4}
.display-lead{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:2px 0 12px}
.display-lead strong{font-size:19px}.display-lead button{background:transparent;font-size:14px;font-weight:750}
.display-panel>p,.display-footer{font-size:12px;line-height:1.55;color:#b9b3b5}
.display-panel h3{font-size:11px;letter-spacing:.08em;color:#a9a4a8;margin:19px 0 12px}
.display-layouts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-bottom:10px}
.display-layout-btn{border-radius:15px;background:rgba(255,255,255,.08);padding:13px 5px;min-height:74px;display:flex;flex-direction:column;gap:8px;align-items:center;justify-content:center;font-size:12px;font-weight:700}
.display-layout-btn span{font-size:22px}
.display-toggle{display:flex;align-items:center;justify-content:space-between;min-height:59px;padding:11px 3px;border-bottom:1px solid #ffffff25;position:relative;gap:10px;cursor:pointer}
.display-toggle-text{display:flex;align-items:center;gap:11px;font-size:15px}
.display-toggle input{position:absolute;right:0;opacity:0;width:50px;height:32px;cursor:pointer}
.display-toggle-switch{width:48px;height:27px;border-radius:15px;background:#5c5960;position:relative;flex:0 0 48px}
.display-toggle-switch:after{content:'';position:absolute;top:3px;left:3px;width:21px;height:21px;background:white;border-radius:50%;transition:transform .18s}
.display-toggle input:checked+.display-toggle-switch{background:var(--acid)}
.display-toggle input:checked+.display-toggle-switch:after{transform:translateX(21px)}
.display-toggle input:focus-visible+.display-toggle-switch{outline:2px solid #fff;outline-offset:2px}
.display-group-head{display:flex;align-items:center;gap:8px}
.display-group-head h3{flex:1}
.display-group-head button{background:none;font-size:12px;font-weight:700}
.display-hide-button{width:100%;background:rgba(255,255,255,.08);padding:13px;border-radius:12px;margin-top:16px}
.export-formats{display:flex;flex-direction:column;gap:3px}
.export-option{width:100%;text-align:left;padding:15px 10px;background:rgba(255,255,255,.07);border-bottom:1px solid rgba(255,255,255,.18);display:flex;justify-content:space-between;gap:9px}
.export-option small{color:var(--acid);font-size:10px}
@media(max-width:420px){
 .app-shell .topbar{padding-left:8px;padding-right:8px;gap:2px}
 .app-shell .topbar>.icon-button{flex-basis:35px;width:35px;height:39px}
 .app-shell .topbar>.icon-button .icon{width:21px;height:21px}
 .app-shell .topbar .create-pill{width:90px;height:41px;font-size:13px}
 .app-shell .topbar .create-pill .icon{width:18px;height:18px}
 .app-shell .player{margin-top:clamp(105px,18dvh,177px)}
 .music-preset{flex-basis:31%}
 .app-shell .player h2{font-size:19px}
 .omnibox-toggle{gap:8px;padding:8px 10px;font-size:11px}
}
@media(max-height:750px){.app-shell .player{margin-top:clamp(60px,11dvh,115px)}}
@media(min-width:900px){.app-shell .player{margin-top:clamp(80px,14dvh,155px)}.app-shell .main{min-height:calc(100dvh - 130px)}}

/* Photo and album source remain separate from theme and experience. */
.photo-background{position:absolute;inset:0;z-index:-2;background-position:center;background-size:cover;background-repeat:no-repeat;pointer-events:none;transform-origin:center;will-change:transform}
.app-shell.custom-bg{background-image:none!important;background-color:#0a0a0e}
.app-shell.custom-bg .visual-dim{z-index:-1}
.background-menu{display:flex;flex-direction:column;border-radius:15px;overflow:hidden;background:rgba(255,255,255,.07)}
.background-menu-row{display:flex;align-items:center;gap:12px;width:100%;padding:16px 14px;text-align:left;background:transparent;border-bottom:1px solid rgba(255,255,255,.14);font-size:15px;color:var(--acid)}
.background-menu-row span{color:#fff;flex:1}
.background-menu-row b{color:var(--acid);font-size:15px}
.background-menu-row.danger span,.background-menu-row.danger{color:#ff6c65}
.background-menu-row:disabled{opacity:.35}
.photo-editor{background:rgba(255,255,255,.07);border-radius:13px;padding:15px;margin-top:14px;display:flex;flex-direction:column;gap:10px}
.photo-editor label{display:flex;justify-content:space-between;font-size:12px}
.photo-editor input{accent-color:var(--acid)}

/* STAGE 72 | View editor: independent player density and glass transparency.
   These choices are browser-specific adaptations; Stage72 panel visibility/Zen
   remains in ui/display-panel.js. No changes to audio, shaders or stem logic. */
.app-shell{--player-surface:rgba(11,16,16,.10);--player-glass-blur:2px;--player-glass-saturation:105%}
.app-shell[data-player-material="clear"]{--player-surface:rgba(8,14,12,.095);--player-glass-blur:1.5px;--player-glass-saturation:100%}
.app-shell[data-player-material="balanced"]{--player-surface:rgba(14,20,18,.22);--player-glass-blur:7px;--player-glass-saturation:112%}
.app-shell[data-player-material="frosted"]{--player-surface:rgba(14,20,18,.48);--player-glass-blur:17px;--player-glass-saturation:135%}
.app-shell .player{
 background:var(--player-surface)!important;
 -webkit-backdrop-filter:blur(var(--player-glass-blur)) saturate(var(--player-glass-saturation))!important;
 backdrop-filter:blur(var(--player-glass-blur)) saturate(var(--player-glass-saturation))!important;
 transition:background .25s ease,backdrop-filter .25s ease,max-width .35s ease,
   padding .35s ease,margin-top .35s ease,border-radius .35s ease;
}
.app-shell[data-player-size="compact"] .player{
 max-width:520px!important;width:92%;margin-top:clamp(72px,12dvh,125px)!important;
 padding:12px 14px 10px!important;border-radius:24px;
}
.app-shell[data-player-size="compact"] .cover-wrap{
 width:clamp(106px,29vw,164px);max-width:164px;margin-bottom:7px;border-radius:15px;
}
.app-shell[data-player-size="compact"] .player h2{
 font-size:clamp(17px,4.5vw,22px);margin:4px 0 3px;
}
.app-shell[data-player-size="compact"] .artist{font-size:clamp(12px,3.3vw,16px)}
.app-shell[data-player-size="compact"] .transport{margin:8px 0 9px;gap:8px}
.app-shell[data-player-size="compact"] .play-button{width:58px;height:58px}
.app-shell[data-player-size="compact"] .transport-btn{width:38px;height:36px}
.app-shell[data-player-size="compact"] .progress-label{padding-bottom:2px}
.app-shell[data-player-size="compact"] #seek-slider{margin:10px 0 8px}
.app-shell[data-player-size="compact"] .progress-foot{height:16px}
.app-shell[data-player-size="compact"] .reaction-pill{right:10px;bottom:8px}
.app-shell[data-player-size="compact"] .reaction-pill .icon{width:38px;height:38px;padding:11px}
.app-shell[data-player-size="standard"] .player{
 max-width:600px!important;width:100%;margin-top:clamp(105px,18dvh,180px)!important;
}
.app-shell[data-player-size="minimal"] .player{
 max-width:465px!important;width:88%;margin-top:clamp(50px,9dvh,95px)!important;
 padding:10px 13px 8px!important;border-radius:22px;
}
.app-shell[data-player-size="minimal"] .cover-wrap{
 width:clamp(74px,21vw,112px);max-width:112px;margin-bottom:5px;border-radius:12px;
}
.app-shell[data-player-size="minimal"] .player h2{
 font-size:clamp(16px,4vw,19px);margin:2px 0;
}
.app-shell[data-player-size="minimal"] .artist{font-size:clamp(11px,3vw,14px)}
.app-shell[data-player-size="minimal"] .transport{margin:6px 0;gap:6px}
.app-shell[data-player-size="minimal"] .play-button{width:48px;height:48px}
.app-shell[data-player-size="minimal"] .play-button svg{width:24px;height:24px}
.app-shell[data-player-size="minimal"] .transport-btn{width:33px;height:31px}
.app-shell[data-player-size="minimal"] .transport-btn svg{width:23px;height:23px}
.app-shell[data-player-size="minimal"] .progress-label{padding-bottom:1px;font-size:10px}
.app-shell[data-player-size="minimal"] #seek-slider{margin:8px 0 6px}
.app-shell[data-player-size="minimal"] .progress-foot{height:14px}
.app-shell[data-player-size="minimal"] .reaction-pill{right:8px;bottom:5px;font-size:8px}
.app-shell[data-player-size="minimal"] .reaction-pill .icon{width:32px;height:32px;padding:9px}
.display-player-settings{margin:14px 0 16px;padding:2px 0 15px;border-bottom:1px solid rgba(255,255,255,.17)}
.display-player-settings h3{margin:14px 0 10px}
.display-segmented{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;padding:4px;background:rgba(255,255,255,.08);border-radius:13px}
.display-segmented button{background:transparent;border-radius:10px;padding:11px 3px;font-size:12px;color:#fff;min-height:42px}
.display-segmented button.active{background:var(--acid);color:#111a11;font-weight:800;box-shadow:0 2px 10px #0002}
.display-segmented button:focus-visible{outline:2px solid white;outline-offset:2px}
.display-player-hint{font-size:11px;line-height:1.55;color:#c3c3c3;margin:10px 2px 2px}
@media(max-height:760px){
 .app-shell[data-player-size="compact"] .player{margin-top:clamp(36px,7dvh,70px)!important}
 .app-shell[data-player-size="minimal"] .player{margin-top:clamp(22px,4dvh,44px)!important}
}
@media(prefers-reduced-motion:reduce){
 .app-shell .player{transition:none!important}
}

/* Stage72: separate internal player surface. Global background/theme unaffected. */
.app-shell .player{
  isolation:isolate;overflow:visible!important;z-index:2;
  background:transparent!important;
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important;
}
.app-shell .player>.player-surface{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  border-radius:inherit;overflow:hidden;background:transparent;
  -webkit-backdrop-filter:none;backdrop-filter:none;
}
.app-shell .player>:not(.player-surface):not(.player-surface-menu){
  position:relative;z-index:1;
}
.player-surface-track{
  position:absolute;inset:0 auto 0 0;width:200%;height:100%;
  display:flex;opacity:0;transform:translate3d(0,0,0);
}
.player-surface-artwork{
  flex:0 0 50%;height:100%;
  background-size:cover;background-position:center;background-repeat:no-repeat;
  background-color:#121d16;
}
.player-surface-overlay{
  position:absolute;inset:0;
  background:linear-gradient(180deg,#00000018,#00000007 42%,#00000029);
}
.app-shell[data-player-surface-mode="turbulent"] .player-surface{
  background:rgba(8,15,9,.025);
}
.app-shell[data-player-surface-mode="frosted"] .player-surface{
  background:rgba(24,29,26,.55);
  -webkit-backdrop-filter:blur(25px) saturate(130%);
  backdrop-filter:blur(25px) saturate(130%);
}
.app-shell[data-player-surface-mode="frosted"] .player-surface-overlay{
  background:linear-gradient(180deg,#080b0c30,#11151360);
}
.app-shell[data-player-surface-mode="sharp"] .player-surface,
.app-shell[data-player-surface-mode="moving"] .player-surface{background:#101614}
.app-shell[data-player-surface-mode="sharp"] .player-surface-track,
.app-shell[data-player-surface-mode="moving"] .player-surface-track{opacity:1}
.app-shell[data-player-surface-mode="sharp"] .player-surface-overlay{
  background:linear-gradient(180deg,#00000025,#00000035 54%,#00000069);
}
@keyframes gnarly-player-pan-x{
 from{transform:translate3d(0,0,0)}
 to{transform:translate3d(-50%,0,0)}
}
.app-shell[data-player-surface-mode="moving"] .player-surface-track{
  animation:gnarly-player-pan-x 19s linear infinite;will-change:transform;
}
.app-shell[data-player-surface-mode="moving"] .player-surface-overlay{
  background:linear-gradient(180deg,#0000002d,#00000040 55%,#00000075);
}
/* Timeline control: anchored in the actual time row, never floating over seek. */
.app-shell .player .progress-foot{
  height:auto;min-height:34px;padding:2px 0 0;
  display:flex;align-items:center;justify-content:space-between;gap:10px;
}
.app-shell .progress-foot #elapsed-label{flex:0 0 auto;font-variant-numeric:tabular-nums}
.app-shell .progress-foot .player-surface-pill{
  position:static;z-index:2;flex:0 0 auto;
  max-width:min(56%,160px);width:auto;min-width:0;min-height:31px;
  padding:3px 10px 3px 5px;margin:0;
  display:inline-flex;align-items:center;justify-content:center;flex-direction:row;gap:6px;
  border:1px solid rgba(255,255,255,.23);border-radius:999px;
  color:var(--acid);background:rgba(19,28,25,.69);
  -webkit-backdrop-filter:blur(9px);backdrop-filter:blur(9px);
  font-size:9px;line-height:1.1;font-weight:800;letter-spacing:.04em;
  white-space:nowrap;touch-action:manipulation;
}
.app-shell .progress-foot .player-surface-pill .icon{
  width:23px;height:23px;flex:0 0 23px;padding:5px;border-radius:50%;
  background:rgba(51,66,48,.50);border:1px solid rgba(255,255,255,.12);
}
.app-shell .progress-foot .player-surface-pill #player-surface-label{
  display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;
}
.app-shell .progress-foot .player-surface-pill[aria-expanded="true"]{
  border-color:var(--acid);background:rgba(32,42,33,.94);
}
.app-shell .progress-foot .player-surface-pill:focus-visible{outline:3px solid var(--acid);outline-offset:3px}
.app-shell .player>.player-surface-menu{
  position:absolute;z-index:12;
  right:12px;bottom:65px;left:auto;top:auto;transform:none;
  width:min(294px,calc(100% - 24px));
  max-height:min(70dvh,370px);overflow:auto;
  border:1px solid #ffffff38;border-radius:19px;
  background:rgba(34,38,35,.94);
  -webkit-backdrop-filter:blur(24px) saturate(125%);
  backdrop-filter:blur(24px) saturate(125%);
  box-shadow:0 16px 50px #0008;
}
.app-shell .player>.player-surface-menu[hidden]{display:none!important}
.player-surface-option{
  width:100%;min-height:68px;padding:12px 16px;
  display:flex;gap:10px;align-items:center;justify-content:space-between;
  font-size:clamp(14px,3.9vw,17px);font-weight:500;
  text-align:left;background:transparent;border-bottom:1px solid #ffffff32;
  color:#f9fbf9;
}
.player-surface-option:last-child{border-bottom:0}
.player-surface-option:active{background:#ffffff13}
.player-surface-option:focus-visible{outline:2px solid var(--acid);outline-offset:-3px}
.surface-option-glyph{flex:0 0 26px;text-align:center;color:var(--acid);font-size:23px;font-weight:740}
.player-surface-option.selected .surface-option-glyph{font-size:27px}
.app-shell[data-player-size="minimal"] .progress-foot .player-surface-pill{font-size:8px;min-height:28px;padding:2px 8px 2px 4px}
.app-shell[data-player-size="minimal"] .progress-foot .player-surface-pill .icon{width:22px;height:22px;flex-basis:22px;padding:4px}
@media(max-width:390px){
 .app-shell .player>.player-surface-menu{right:8px;bottom:61px;width:min(280px,calc(100% - 16px))}
}
@media(prefers-reduced-motion:reduce){
 .app-shell[data-player-surface-mode="moving"] .player-surface-track{
  animation:none;will-change:auto;transform:translateX(0);
 }
}


/* Stage 78: genuine desktop canvas. Never constrain the shader to a phone column. */
@media (min-width:900px) and (pointer:fine){
 html,body{width:100%;height:100%;min-height:100%;overflow:hidden}
 .app-shell{
   width:100%;max-width:none;height:100dvh;min-height:100dvh;
   margin:0;border:0;border-radius:0;box-shadow:none;overflow:hidden;
 }
 .app-shell #fluid-canvas,.app-shell .photo-background{
   width:100%;height:100%;inset:0;
 }
 .app-shell .topbar{
   width:min(100%,1450px);margin-inline:auto;
   min-height:76px;padding:clamp(15px,2vh,25px) clamp(22px,3vw,58px) 0;
   justify-content:space-between;
 }
 .app-shell .main{
   width:100%;height:calc(100dvh - 76px);min-height:0!important;
   display:flex;flex-direction:column;align-items:stretch;
   padding:0 clamp(28px,4vw,88px) clamp(14px,2.1vh,30px);
   overflow:visible;
 }
 .app-shell .brand-line{
   width:min(100%,1390px);align-self:center;
   margin-top:clamp(8px,1.8vh,25px);
 }
 .app-shell .player,
 .app-shell[data-player-size="compact"] .player,
 .app-shell[data-player-size="standard"] .player,
 .app-shell[data-player-size="minimal"] .player{
   margin: auto auto 0!important;
   width:min(100%,clamp(490px,40vw,780px))!important;
   max-width:780px!important;
   max-height:calc(100dvh - 265px);
 }
 .app-shell[data-player-size="standard"] .player{
   width:min(100%,clamp(540px,43vw,850px))!important;
   max-width:850px!important;
 }
 .app-shell[data-player-size="minimal"] .player{
   width:min(100%,clamp(410px,32vw,650px))!important;
   max-width:650px!important;
 }
 .app-shell .cover-wrap{
   width:clamp(105px,min(17vw,19vh),210px);max-width:210px;
 }
 .app-shell .player h2{font-size:clamp(19px,1.65vw,29px)}
 .app-shell .artist{font-size:clamp(14px,1.15vw,20px)}
 .app-shell .omnibox-shell{
   width:min(100%,clamp(425px,37vw,730px));max-width:730px;
   margin:clamp(9px,1.7vh,20px) auto 0;
 }
 .app-shell .bottom-sheet:not(.display-sheet){
   top:clamp(90px,11vh,125px);bottom:auto;left:auto;right:clamp(16px,2vw,45px);
   width:min(530px,37vw);height:min(77dvh,850px);
   border:1px solid rgba(255,255,255,.17);border-radius:24px;
 }
 .app-shell .bottom-sheet.display-sheet{
   top:clamp(90px,11vh,125px);bottom:auto;
   left:auto;right:clamp(16px,2vw,45px);margin:0;
   width:min(530px,37vw);max-width:530px;height:min(77dvh,850px);
 }
 .app-shell .floating-lyrics{max-width:min(90vw,900px);align-self:center;margin:auto 0 8px}
}
/* Laptop with shorter viewport: preserve the browser viewport without clipping the timeline. */
@media (min-width:900px) and (pointer:fine) and (max-height:760px){
 .app-shell .topbar{min-height:62px;padding-top:8px}
 .app-shell .main{height:calc(100dvh - 62px);padding-bottom:11px}
 .app-shell .brand-line{margin-top:2px}
 .app-shell .cover-wrap{width:clamp(85px,15vh,150px)}
 .app-shell .transport{margin:7px 0!important}
 .app-shell .player{padding-top:9px!important;padding-bottom:7px!important;max-height:calc(100dvh - 205px)}
 .app-shell .omnibox-shell{margin-top:8px}
}


/* Stage 80 — fullscreen persistent GNARLY visual, independent of document height.
   The canvas remains at viewport DPR regardless of how long the DJ/Music/Export
   drawers are. Never stretch the shader over a many-thousand-pixel page. */
html,body{min-height:100%;height:auto;overflow-x:clip;overflow-y:auto}
body{position:relative;min-height:100dvh;background:#05090a}
#gnarly-background{
 position:fixed;inset:0;width:100%;height:100vh;height:100dvh;
 z-index:0;pointer-events:none;overflow:hidden;isolation:isolate;
 background:#05090a;
}
#gnarly-background #fluid-canvas{
 position:absolute;inset:0;width:100%;height:100%;z-index:0;
 pointer-events:none;display:block;opacity:1;
}
#gnarly-background .photo-background{
 position:absolute;inset:0;width:100%;height:100%;z-index:1;
 background-size:cover;background-position:center;background-repeat:no-repeat;
 pointer-events:none;transform-origin:center;
}
#gnarly-background .photo-background[hidden]{display:none!important}
#gnarly-background .visual-dim{
 position:absolute;inset:0;width:100%;height:100%;z-index:2;
 background:linear-gradient(180deg,#00000017 0%,transparent 28%,#00000023 100%);
 pointer-events:none;
}
#gnarly-background.cover-bg #fluid-canvas,
#gnarly-background.custom-bg #fluid-canvas{opacity:0}
.app-shell,.app-shell.custom-bg,.app-shell.cover-bg{
 position:relative;z-index:1;isolation:isolate;
 background:transparent!important;background-image:none!important;
 overflow:visible;
}
.app-shell{min-height:100dvh;height:auto}
/* Player has a fixed viewport-derived anchor, not flex-auto margins influenced
   by the height of subsequent retractable drawers. */
.app-shell .main{
 display:flex;flex-direction:column;align-items:center;
 height:auto!important;min-height:0!important;
 overflow:visible!important;
}
.app-shell .brand-line{align-self:stretch;width:100%}
.app-shell .player,
.app-shell[data-player-size="compact"] .player,
.app-shell[data-player-size="standard"] .player,
.app-shell[data-player-size="minimal"] .player{
 align-self:center;
 margin:clamp(34px,calc((100dvh - 690px)/2),144px) auto 0!important;
 flex:0 0 auto;
}
.app-shell .omnibox-shell{align-self:center;margin:clamp(8px,1.4vh,16px) auto 0}
.app-shell .module-dock{flex:0 0 auto;align-self:center}
.app-shell .floating-lyrics{margin:clamp(8px,1.5vh,16px) auto 0!important}
@media (min-width:900px) and (pointer:fine){
 html,body{height:auto!important;min-height:100%!important;overflow-x:clip!important;overflow-y:auto!important}
 .app-shell{
  height:auto!important;min-height:100dvh!important;
  overflow:visible!important;max-width:none!important;
  margin:0!important;border:0!important;border-radius:0!important;box-shadow:none!important;
 }
 .app-shell .main{height:auto!important;min-height:0!important;overflow:visible!important}
 .app-shell .player,
 .app-shell[data-player-size="compact"] .player,
 .app-shell[data-player-size="standard"] .player,
 .app-shell[data-player-size="minimal"] .player{
  margin:clamp(24px,calc((100dvh - 690px)/2),130px) auto 0!important;
  max-height:none;
 }
 .app-shell .module-dock{width:min(100%,730px);max-width:730px;margin-bottom:36px}
 .app-shell .omnibox-shell{margin-top:clamp(8px,1.2vh,16px)}
}
@media(max-width:420px){
 .app-shell .player,
 .app-shell[data-player-size="compact"] .player,
 .app-shell[data-player-size="standard"] .player,
 .app-shell[data-player-size="minimal"] .player{
  margin-top:clamp(28px,calc((100dvh - 690px)/2),120px)!important;
 }
}


/* Stage81: preserve native detail through the compositor: never apply an
   inherited opacity/filter/scale to the full-resolution GNARLY shader. */
#gnarly-background{filter:none!important;opacity:1;transform:none}
#gnarly-background #fluid-canvas{
 display:block;image-rendering:auto;
 -webkit-filter:none!important;filter:none!important;
 mix-blend-mode:normal;
}
#gnarly-background .visual-dim{
 background:linear-gradient(180deg,rgba(0,0,0,.055),transparent 23%,rgba(0,0,0,.09) 100%);
}

/* GNARLY install guide lives under Mais; never adds persistent UI over player. */
.install-app-panel{display:flex;flex-direction:column;gap:15px;padding:5px 0 20px}
.install-brand{display:flex;gap:15px;align-items:center;padding:16px;border-radius:22px;border:1px solid rgba(255,255,255,.16);background:rgba(26,34,31,.52)}
.install-brand img{width:72px;height:72px;flex:0 0 72px;object-fit:cover;border-radius:17px;box-shadow:0 9px 27px #0008}
.install-brand h3{font-size:18px;margin:4px 0 6px;letter-spacing:-.025em}
.install-brand p{margin:0;color:#bfcbc7;font-size:12px;line-height:1.4}
.install-overline{color:var(--acid);font-size:10px;letter-spacing:.16em;font-weight:850}
.install-status{border-left:3px solid var(--acid);background:color-mix(in srgb,var(--acid) 9%,rgba(12,20,18,.8));border-radius:10px;padding:13px;font-size:13px;line-height:1.5}
.install-status.is-installed{border-color:var(--acid)}
.install-steps{counter-reset:install-step;list-style:none;display:grid;gap:11px;margin:0;padding:0}
.install-steps li{counter-increment:install-step;padding:12px 13px 12px 48px;position:relative;border-radius:15px;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.13);line-height:1.5;font-size:13px}
.install-steps li:before{content:counter(install-step);position:absolute;left:12px;top:11px;background:color-mix(in srgb,var(--acid) 22%,rgba(18,23,20,.9));color:var(--acid);border-radius:10px;width:25px;height:25px;display:grid;place-items:center;font-weight:850}
.install-hint{font-size:12px;color:#c5d1c8;line-height:1.5;margin:0}