/* GNARLY stylesheet: styles.css */
: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}
.app-shell .omnibox-toggle .omnibox-chevron{width:16px;height:16px;flex:0 0 16px;stroke-width:2;opacity:.8;transition:transform .18s ease}
.omnibox-toggle[aria-expanded="true"] .omnibox-chevron{transform:rotate(180deg)}
.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%;min-width:0;height:46px!important;margin:0;padding:0;appearance:none!important;-webkit-appearance:none!important;border:0;border-radius:12px;background:transparent!important;cursor:pointer;touch-action:pan-y;outline-offset:3px}
.music-range::-webkit-slider-runnable-track{box-sizing:border-box;width:100%;height:8px;border:1px solid rgba(255,255,255,.16);border-radius:999px;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(206,218,214,.18) var(--mix-fill,50%))}
.music-range::-webkit-slider-thumb{appearance:none!important;-webkit-appearance:none!important;box-sizing:border-box;width:24px;height:24px;margin-top:-9px;border-radius:50%;background:linear-gradient(120deg,#fcfdff,#d3dce6);border:2px solid rgba(255,255,255,.85);box-shadow:0 2px 8px #0006;cursor:grab}
.music-range::-moz-range-track{box-sizing:border-box;width:100%;height:8px;border:1px solid rgba(255,255,255,.16);border-radius:999px;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(206,218,214,.18) var(--mix-fill,50%))}
.music-range::-moz-range-thumb{box-sizing:border-box;width:24px;height:24px;border-radius:50%;background:#f5f9ff;border:2px solid rgba(255,255,255,.85);box-shadow:0 2px 8px #0006;cursor:grab}
.music-range:active::-webkit-slider-thumb{cursor:grabbing}
.music-range:active::-moz-range-thumb{cursor:grabbing}
.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}


/* TRUE RESOLUTION ART DIRECTION / v2.
   Never blow a 360p video still to 2K merely because CSS says "cover".
   A bounded native-size focal artwork sits over sharp, cheap CSS gradients. */
#gnarly-background .photo-background{
 image-rendering:auto;
 background-repeat:no-repeat;
 transition:none;
}
#gnarly-background .photo-background[data-art-quality="low"],
#gnarly-background .photo-background[data-art-quality="unknown"]{
 background-color:#10151b;
 background-size:cover;
 background-position:center center;
 box-shadow:inset 0 0 0 100vmax rgba(0,0,0,.035);
}
/* Ambient fill is generated from CSS vectors, not a JPEG enlarged to infinity. */
#gnarly-background .photo-background[data-art-quality="low"]::before,
#gnarly-background .photo-background[data-art-quality="unknown"]::before{
 content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
 background:
  radial-gradient(ellipse 68% 57% at 12% 21%,hsl(var(--gnarly-cover-hue,176deg) 72% 44% / .30),transparent 85%),
  radial-gradient(ellipse 62% 58% at 86% 76%,hsl(calc(var(--gnarly-cover-hue,176deg) + 94deg) 65% 42% / .24),transparent 82%),
  linear-gradient(152deg,rgba(6,15,22,.38),transparent 40%,rgba(15,12,22,.42));
}
#gnarly-background .photo-background[data-art-quality="low"]::after,
#gnarly-background .photo-background[data-art-quality="unknown"]::after{
 content:"";position:absolute;inset:0;pointer-events:none;
 background:linear-gradient(180deg,rgba(0,0,0,.32),transparent 27%,transparent 65%,rgba(0,0,0,.46));
}
#gnarly-background .photo-background[data-art-quality="medium"]{
 background-size:cover;background-position:center;
}
.app-shell[data-player-surface-mode="sharp"] .player-surface-artwork[data-art-quality="low"],
.app-shell[data-player-surface-mode="moving"] .player-surface-artwork[data-art-quality="low"],
.app-shell[data-player-surface-mode="sharp"] .player-surface-artwork[data-art-quality="unknown"],
.app-shell[data-player-surface-mode="moving"] .player-surface-artwork[data-art-quality="unknown"]{
 background-size:cover;
 background-position:center;
 background-repeat:no-repeat;
 background-color:#111a20;
}
/* Soft ambient color without applying a destructive blur to the album itself. */
.app-shell[data-player-surface-mode="sharp"] .player-surface-artwork[data-art-quality="low"],
.app-shell[data-player-surface-mode="moving"] .player-surface-artwork[data-art-quality="low"]{
 box-shadow:inset 0 0 150px 45px rgba(10,37,28,.38);
}
.app-shell .cover-wrap img[data-art-quality="low"]{
 image-rendering:auto;
 filter:none;
}
@media(prefers-reduced-motion:reduce){
 #gnarly-background .photo-background{transition:none}
}

/* Preserve approved edge-to-edge album composition regardless of source
   quality. A quality flag must never create a postage-stamp cover. */
#gnarly-background .photo-background,
#gnarly-background .photo-background[data-art-quality="low"],
#gnarly-background .photo-background[data-art-quality="unknown"],
#gnarly-background .photo-background[data-art-quality="medium"]{
 background-size:cover!important;background-position:center center!important;background-repeat:no-repeat!important;
}
.app-shell[data-player-surface-mode="sharp"] .player-surface-artwork,
.app-shell[data-player-surface-mode="moving"] .player-surface-artwork{
 background-size:cover!important;background-position:center!important;
}
/* Use animated background until an actual cover has decoded. */
#gnarly-background.cover-bg:not(.cover-art-ready) #fluid-canvas{opacity:1}
#gnarly-background.cover-bg.cover-art-ready #fluid-canvas{opacity:0}

/* Swift CoverFill parity: original image scales to fill the entire viewport,
   with intentional 15pt-equivalent blur. The image stays edge-to-edge even
   when the provider has no verified album master. Custom uploaded photos and
   animated themes remain untouched. */
#gnarly-background.cover-bg .photo-background {
  inset:-22px;
  width:calc(100% + 44px);
  height:calc(100% + 44px);
  background-size:cover!important;
  background-position:center center!important;
  filter:blur(15px) saturate(1.06);
  -webkit-filter:blur(15px) saturate(1.06);
}
#gnarly-background.cover-bg .visual-dim {
  background:linear-gradient(180deg,rgba(0,0,0,.27),rgba(0,0,0,.17) 42%,rgba(0,0,0,.3));
}

/* Responsive GNARLY Shell · iOS and desktop receive appropriate controls.
   Never overlap a long material name with the action group. */
.app-shell .brand-line{
 display:grid;grid-template-columns:minmax(0,1fr) auto;
 gap:clamp(9px,2vw,20px);align-items:center;min-width:0;
}
.app-shell .brand-identity{min-width:0;width:100%;align-items:center}
.app-shell .brand-copy{min-width:0;max-width:100%}
.app-shell .brand-identity h1{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.app-shell .build-badge{
 max-width:100%;white-space:normal;overflow-wrap:anywhere;
 font-size:clamp(9px,1.5vw,13px);line-height:1.32;
 letter-spacing:clamp(.065em,.13vw,.17em);
}
.app-shell .quick-actions{min-width:0;flex:none;display:flex;align-items:center;gap:clamp(5px,1.2vw,12px)}
.app-shell #support-button{
 display:grid;place-items:center;flex:0 0 42px;width:42px;height:42px;
 border:1px solid color-mix(in srgb,var(--acid) 38%,rgba(255,255,255,.22));
 border-radius:50%;background:rgba(27,29,28,.48);color:var(--acid);
 -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
 box-shadow:0 0 18px color-mix(in srgb,var(--acid) 9%,transparent);
 text-decoration:none;
}
.app-shell #support-button .icon{width:22px;height:22px}
.app-shell #support-button:focus-visible,.app-shell #search-toggle:focus-visible{
 outline:2px solid var(--acid);outline-offset:4px;
}
.support-external-link{
 display:block;padding:15px 16px;border-radius:14px;margin:10px 0 14px;
 border:1px solid color-mix(in srgb,var(--acid) 52%,transparent);
 background:color-mix(in srgb,var(--acid) 10%,rgba(13,18,21,.9));
 color:var(--acid);font-weight:800;text-align:center;text-decoration:none;
}
.app-shell[data-icons-collapsed="true"] .topbar{
 justify-content:flex-start;min-height:70px;
}
.app-shell[data-icons-collapsed="true"] .topbar > :not(#search-toggle){display:none!important}
.app-shell[data-icons-collapsed="true"] #search-toggle{
 color:var(--acid);border-color:color-mix(in srgb,var(--acid) 60%,transparent);
}
.app-shell #search-toggle{touch-action:manipulation;-webkit-touch-callout:none;user-select:none}
/* Native tint follows whichever authored material/theme is active. The GPU
   shader remains unchanged; only the surrounding UI halo responds. */
.app-shell .topbar>.icon-button{
 border-color:color-mix(in srgb,var(--acid) 13%,rgba(255,255,255,.10));
}
.app-shell .player{
 border-color:color-mix(in srgb,var(--acid) 21%,rgba(255,255,255,.15));
 box-shadow:0 17px 55px rgba(0,0,0,.25),
  0 0 44px color-mix(in srgb,var(--acid) 10%,transparent);
}
.app-shell .omnibox-shell{
 box-shadow:0 9px 25px rgba(0,0,0,.22),0 0 23px color-mix(in srgb,var(--acid) 12%,transparent);
}
.app-shell .progress-foot .player-surface-pill{
 border-color:color-mix(in srgb,var(--acid) 29%,rgba(255,255,255,.14));
}
@media(max-width:920px) and (pointer:coarse){
 .app-shell[data-device-layout="phone"] #performance-button,
 .app-shell[data-device-layout="phone"] #fullscreen-button{display:none!important}
}
.app-shell[data-device-layout="phone"] .brand-line{
 grid-template-columns:minmax(0,1fr) auto;gap:7px;
 align-items:start;
}
.app-shell[data-device-layout="phone"] .brand-identity{gap:8px;align-items:flex-start}
.app-shell[data-device-layout="phone"] .brand-identity img{
 width:clamp(41px,11vw,56px);height:clamp(41px,11vw,56px);
}
.app-shell[data-device-layout="phone"] .brand-identity h1{
 font-size:clamp(29px,7.7vw,39px);line-height:1.03;margin-bottom:4px;
}
.app-shell[data-device-layout="phone"] .build-badge{
 font-size:clamp(9px,2.45vw,11px);line-height:1.23;
 letter-spacing:.09em;max-width:100%;
}
.app-shell[data-device-layout="phone"] .quick-actions{
 gap:clamp(4px,1.4vw,9px);align-self:start;
}
.app-shell[data-device-layout="phone"] #support-button,
.app-shell[data-device-layout="phone"] .more-button{
 width:clamp(37px,10vw,42px);height:clamp(37px,10vw,42px);
 min-width:37px;flex-basis:clamp(37px,10vw,42px);
}
@media(max-width:360px){
 .app-shell[data-device-layout="phone"] .brand-identity h1{font-size:27px}
 .app-shell[data-device-layout="phone"] .brand-line{gap:5px}
 .app-shell[data-device-layout="phone"] .brand-identity img{width:39px;height:39px}
}

/* GNARLY search: unobtrusive, progressively loaded catalogue results. */
.search-more-zone{padding:18px 0 24px;text-align:center;min-height:72px}
.search-more-zone[hidden]{display:none!important}
.search-more-zone #search-more{border:1px solid rgba(255,255,255,.18);border-radius:16px;background:rgba(255,255,255,.075);color:var(--acid);font-weight:750;font-size:13px;padding:12px 22px;min-height:44px;cursor:pointer}
.search-more-zone #search-more:disabled{opacity:.55;cursor:progress}
.search-more-zone #search-more:focus-visible{outline:2px solid var(--acid);outline-offset:3px}
#search-sentinel{height:1px;pointer-events:none}
#search-state[hidden]{display:none!important}

/* Clearly visible gesture chevrons on ALL four draggable header shortcuts.
   The 10px sprite-based hint was difficult to perceive on both screen sizes.
   A self-contained vector path now renders crisply below the circular controls. */
.app-shell .topbar #search-toggle,
.app-shell .topbar :is(#theme-button,#experience-button,#lyric-style-button){
 position:relative;overflow:visible;
}
.app-shell .topbar #search-toggle .eye-gesture-arrow,
.app-shell .topbar :is(#theme-button,#experience-button,#lyric-style-button) .eye-gesture-arrow{
 display:block;position:absolute;z-index:2;left:50%;bottom:-7px;
 width:16px;height:16px;min-width:16px;min-height:16px;max-width:16px;max-height:16px;
 transform:translateX(-50%);
 fill:none;stroke:var(--acid,#46ff12);stroke-width:3;
 stroke-linecap:round;stroke-linejoin:round;
 opacity:1;pointer-events:none;
 filter:drop-shadow(0 0 3px rgba(70,255,18,.55));
 transition:transform .18s ease;
}
.app-shell .topbar #search-toggle:hover .eye-gesture-arrow,
.app-shell .topbar #search-toggle:focus-visible .eye-gesture-arrow,
.app-shell .topbar :is(#theme-button,#experience-button,#lyric-style-button):hover .eye-gesture-arrow,
.app-shell .topbar :is(#theme-button,#experience-button,#lyric-style-button):focus-visible .eye-gesture-arrow{
 transform:translate(-50%,1px);
}
@media(prefers-reduced-motion:reduce){
 .app-shell .topbar #search-toggle .eye-gesture-arrow,
 .app-shell .topbar :is(#theme-button,#experience-button,#lyric-style-button) .eye-gesture-arrow{
  transition:none!important;
 }
 .app-shell .topbar #search-toggle:hover .eye-gesture-arrow,
 .app-shell .topbar #search-toggle:focus-visible .eye-gesture-arrow,
 .app-shell .topbar :is(#theme-button,#experience-button,#lyric-style-button):hover .eye-gesture-arrow,
 .app-shell .topbar :is(#theme-button,#experience-button,#lyric-style-button):focus-visible .eye-gesture-arrow{
  transform:translateX(-50%);
 }
}

/* Menu polish: native controls, restrained icons and one consistent state model. */
.display-panel .display-menu-icon{width:20px;height:20px;flex:0 0 20px;stroke-width:1.8;opacity:.78;pointer-events:none}
.display-panel .display-letter-icon{display:inline-grid;place-items:center;width:20px;height:20px;flex:0 0 20px;font-size:14px;font-weight:700;line-height:1;opacity:.78}
.display-lead strong{display:flex;align-items:center;gap:9px}
.display-lead .display-menu-icon{color:var(--acid);opacity:1}
.display-lead button{min-height:44px;padding:10px 12px;border:1px solid var(--border);border-radius:12px;background:rgba(255,255,255,.06)}
.display-layout-btn{border:1px solid rgba(255,255,255,.12);min-width:0}
.display-layout-btn[aria-pressed="true"]{border-color:var(--acid);color:var(--acid);background:color-mix(in srgb,var(--acid) 10%,rgba(255,255,255,.06))}
.display-toggle-text{min-width:0;line-height:1.35}
.display-toggle-text>span:last-child{overflow-wrap:anywhere}
.display-toggle input{top:50%;width:54px;height:44px;margin:0;transform:translateY(-50%)}
.display-toggle-switch{pointer-events:none}
.display-group-head{flex-wrap:wrap;gap:6px}
.display-group-head button{min-height:44px;min-width:44px;padding:8px;border:1px solid rgba(255,255,255,.12);border-radius:11px;background:rgba(255,255,255,.04)}
.display-group-head button[aria-pressed="true"]{color:var(--acid);border-color:color-mix(in srgb,var(--acid) 55%,transparent);background:color-mix(in srgb,var(--acid) 8%,rgba(255,255,255,.04))}
.display-panel button:focus-visible,.omnibox-tabs button:focus-visible,.music-tabs button:focus-visible{outline:2px solid var(--acid);outline-offset:2px}
.music-switch{height:44px;display:flex;align-items:center}
.music-switch input{width:100%;height:44px;margin:0}
.music-switch span{position:relative;pointer-events:none;flex:0 0 52px}
@media(hover:hover){.display-lead button:hover,.display-layout-btn:hover,.display-group-head button:hover{background-color:rgba(255,255,255,.11)}}
@media(prefers-reduced-motion:reduce){.app-shell .omnibox-toggle .omnibox-chevron{transition:none}.app-shell .topbar #search-toggle:hover .eye-gesture-arrow,.app-shell .topbar #search-toggle:focus-visible .eye-gesture-arrow{transform:translateX(-50%)}}

/* A confirmed upstream 429 is not solved with another extraction attempt.
   Give listeners an explicit path to the official player (separate engine). */
.playback-official-fallback{
 display:inline-flex;align-items:center;justify-content:center;gap:7px;
 background:color-mix(in srgb,var(--acid,#46ff12) 14%,rgba(9,17,14,.94));
 color:#f5fff2;border:1px solid color-mix(in srgb,var(--acid,#46ff12) 54%,#ffffff21);
 border-radius:999px;padding:10px 15px;margin:9px auto 3px;
 font-size:12px;font-weight:750;letter-spacing:.01em;
 box-shadow:0 3px 18px #0005;
}
.playback-official-fallback[hidden]{display:none!important}
.playback-official-fallback:hover{border-color:var(--acid,#46ff12)}
.playback-official-fallback:focus-visible{outline:2px solid var(--acid,#46ff12);outline-offset:3px}

/* GNARLY LIVE LYRIC SYNC — compact studio panel, never overlaid on the player. */
.lyric-sync-workshop{
 margin:12px 0 16px;padding:14px 14px 12px;border-radius:16px;
 border:1px solid color-mix(in srgb,var(--acid,#46ff12) 32%,#ffffff25);
 background:linear-gradient(142deg,color-mix(in srgb,var(--acid,#46ff12) 9%,#151518),
  rgba(13,16,17,.87));
 box-shadow:inset 0 1px #ffffff16;
}
.lyric-sync-workshop>strong{font-size:12px;letter-spacing:.075em;color:var(--acid,#46ff12)}
.lyric-sync-workshop .section-note{margin:9px 0;font-size:12px;line-height:1.5}
.lyric-sync-next{
 margin:11px 0;padding:17px 13px;border-radius:12px;
 background:rgba(0,0,0,.34);border:1px solid #ffffff18;
 font-weight:770;font-size:clamp(15px,4vw,22px);line-height:1.35;
 text-align:center;overflow-wrap:anywhere;
}
.lyric-sync-workshop textarea{
 display:block;width:100%;min-height:110px;max-height:220px;resize:vertical;
 padding:12px;margin:9px 0;border-radius:10px;
 border:1px solid #ffffff45;background:rgba(1,8,5,.56);color:#f5fff2;
 font:inherit;font-size:13px;line-height:1.55;
}
.lyric-sync-workshop textarea:focus-visible{
 outline:2px solid var(--acid,#46ff12);outline-offset:2px;
}
.lyric-sync-workshop .lyrics-actions{display:flex;gap:8px;flex-wrap:wrap}
.lyric-sync-workshop .lyrics-actions button{min-height:40px;touch-action:manipulation}

/* Official YouTube playback is a first-class, VISIBLE page section.
 * Its native controls/branding must never be covered by GNARLY overlays. */
.app-shell .youtube-modal.official-inline{
 position:relative;inset:auto;z-index:1;display:block;place-items:unset;
 width:100%;max-width:590px;margin:0 auto 18px;padding:0;
 background:none;overflow:visible;
}
.app-shell .youtube-modal.official-inline[hidden]{display:none!important}
.youtube-modal.official-inline .youtube-modal-card{
 width:100%;padding:13px;border-radius:22px;
 background:linear-gradient(145deg,rgba(3,20,9,.95),rgba(13,20,19,.94));
 border:1px solid color-mix(in srgb,var(--acid,#46ff12) 34%,#ffffff1f);
 box-shadow:0 14px 40px #0008,inset 0 1px #ffffff18;
}
.youtube-modal.official-inline .youtube-modal-head{
 display:flex;align-items:center;justify-content:space-between;gap:12px;
 padding:4px 4px 12px;
}
.youtube-modal.official-inline .youtube-modal-head>div{display:flex;flex-direction:column;gap:3px;min-width:0}
.youtube-modal.official-inline .youtube-modal-head strong{
 font-size:clamp(13px,3.6vw,18px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.youtube-modal.official-inline .youtube-official-kicker{
 font-size:10px;font-weight:800;letter-spacing:.13em;color:var(--acid,#46ff12);
}
.youtube-modal.official-inline .youtube-frame-wrap{
 position:relative;width:100%;aspect-ratio:16/9;min-height:200px;
 overflow:hidden;border-radius:12px;background:#080808;
}
/* YouTube requires at least 200x200 physical pixels for the player viewport. */
.youtube-modal.official-inline .youtube-frame-wrap iframe{
 position:absolute;inset:0;width:100%;height:100%;border:none;
}
.youtube-official-footer{
 display:flex;align-items:center;justify-content:space-between;gap:8px;
 padding:12px 5px 3px;font-size:11px;line-height:1.35;color:#d0dfd1;
}
.youtube-official-footer a{color:var(--acid,#46ff12);white-space:nowrap;font-weight:850}
.youtube-modal.official-inline .youtube-modal-head .icon-button{width:42px;height:42px;flex:0 0 42px;font-size:23px}
.app-shell[data-audio-provider="youtube-official"] #player-section .progress-block,
.app-shell[data-audio-provider="youtube-official"] #player-section .transport{
 opacity:.38;
}
/* Keep navigation physically usable, but do not pretend the native time slider
 * or speed/reverb controls can control the separate YouTube sound. */
.app-shell[data-audio-provider="youtube-official"] #seek-slider{pointer-events:none}
@media(max-width:360px){
 .youtube-modal.official-inline .youtube-frame-wrap{min-height:205px}
 .youtube-official-footer{flex-wrap:wrap}
}

/* Unified GNARLY player: source swap, not a stacked video card. YouTube
   controls remain fully visible and never sit beneath a GNARLY overlay. */
.app-shell[data-audio-provider="youtube-official"] #player-section.player{
 display:flex!important;flex-direction:column!important;justify-content:center!important;
 width:min(100%,590px)!important;max-width:590px!important;
 height:auto!important;min-height:0!important;aspect-ratio:auto!important;
 padding:14px!important;margin:18px auto 24px!important;
 overflow:visible!important;isolation:isolate;border-radius:27px!important;
 background:linear-gradient(155deg,rgba(14,26,22,.91),rgba(5,13,13,.94))!important;
 border:1px solid rgba(255,255,255,.15)!important;
 box-shadow:0 25px 80px rgba(0,0,0,.27)!important;
}
.app-shell[data-audio-provider="youtube-official"] #player-section > :not(#youtube-player-dialog){display:none!important}
.app-shell[data-audio-provider="youtube-official"] #player-section > #youtube-player-dialog{
 display:block!important;position:relative;z-index:1;align-self:stretch;
 width:100%;max-width:none;margin:0;padding:0;
}
.app-shell[data-audio-provider="youtube-official"] #player-section > #youtube-player-dialog[hidden]{display:none!important}
.app-shell[data-audio-provider="youtube-official"] .youtube-modal.official-inline .youtube-modal-card{
 width:100%;padding:0;border:0;border-radius:16px;background:transparent;box-shadow:none;
}
.youtube-modal.official-inline .youtube-modal-head{display:flex;gap:10px;padding:5px 3px 12px;min-width:0}
.youtube-modal.official-inline .youtube-track-art{
 display:block;width:48px;height:48px;min-width:48px;border-radius:10px;object-fit:cover;background:#070d0b
}
.youtube-modal.official-inline .youtube-track-caption{display:flex;flex:1;flex-direction:column;gap:2px;min-width:0}
.youtube-modal.official-inline .youtube-track-caption strong{font-size:clamp(14px,3.6vw,18px)}
.youtube-modal.official-inline .youtube-track-artist{
 display:block;max-width:100%;font-size:11px;color:rgba(244,255,247,.70);
 overflow:hidden;text-overflow:ellipsis;white-space:nowrap
}
.youtube-modal.official-inline .youtube-frame-wrap{
 width:100%;aspect-ratio:16/9;min-height:200px;overflow:hidden;border-radius:13px;background:#090909
}
.youtube-modal.official-inline .youtube-frame-wrap iframe{display:block;inset:0;position:absolute;width:100%;height:100%;border:0}
.youtube-official-actions{display:grid;grid-template-columns:1fr minmax(0,1.4fr) 1fr;gap:8px;margin:12px 1px 4px}
.youtube-official-actions button{
 border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.07);
 color:#efffed;min-height:40px;padding:7px 9px;border-radius:12px;
 font:700 12px/1.25 -apple-system,BlinkMacSystemFont,sans-serif;cursor:pointer
}
.youtube-official-actions button:disabled{opacity:.45;cursor:default}
.youtube-official-actions button:focus-visible{outline:2px solid var(--acid,#46ff12);outline-offset:2px}
.youtube-official-actions .youtube-native-retry{
 border-color:color-mix(in srgb,var(--acid,#46ff12) 55%,transparent);
 color:var(--acid,#46ff12);background:rgba(41,84,43,.17)
}
.youtube-native-status{margin:9px 4px 3px;font-size:11px;line-height:1.45;color:rgba(236,255,237,.75);min-height:16px}
.youtube-modal.official-inline .youtube-official-footer{padding:8px 4px 2px;font-size:10px;opacity:.80}
.music-official-note{padding:12px;border-radius:12px;border:1px solid rgba(255,255,255,.13);font-size:12px;line-height:1.5;color:#cbe5d0;background:rgba(5,20,12,.66)}
@media(max-width:380px){
 .app-shell[data-audio-provider="youtube-official"] #player-section.player{padding:10px!important;margin:14px auto 22px!important}
 .youtube-official-actions{gap:5px}
 .youtube-official-actions button{font-size:11px;padding:5px 3px;min-height:44px}
 .youtube-modal.official-inline .youtube-frame-wrap{min-height:200px}
 .youtube-modal.official-inline .youtube-official-footer{flex-wrap:wrap}
}

/* A failed native source never replaces the GNARLY card without consent. */
.playback-source-choice{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px 12px;width:100%;max-width:480px;margin:10px auto 0;padding:0 4px;text-align:center}
.playback-source-choice[hidden]{display:none!important}
.playback-source-choice button{padding:9px 14px;border:1px solid var(--acid);border-radius:999px;background:rgba(8,30,12,.73);color:var(--acid);font-size:12px;font-weight:750}
.playback-source-choice span{max-width:220px;color:rgba(235,255,236,.7);font-size:10px;line-height:1.35}

/* Quiet visual affordance: smart Next can resolve a successor asynchronously. */
.app-shell :is(#next-button,#ipod-next-button,#youtube-next)[aria-busy="true"]{position:relative}
.app-shell :is(#next-button,#ipod-next-button,#youtube-next)[aria-busy="true"]::after{
 content:"";position:absolute;width:6px;height:6px;right:2px;top:3px;
 border-radius:50%;background:var(--acid);box-shadow:0 0 8px var(--acid);
 animation:gnarly-navigation-pulse 1.1s ease-in-out infinite;pointer-events:none
}
@keyframes gnarly-navigation-pulse{0%,100%{opacity:.25;transform:scale(.8)}50%{opacity:1;transform:scale(1.15)}}
@media(prefers-reduced-motion:reduce){.app-shell :is(#next-button,#ipod-next-button,#youtube-next)[aria-busy="true"]::after{animation:none;opacity:.9}}


/* TDR: lightweight, accessible session performance dashboard, not part of the
   audio/rendering pipeline. Uses existing panel glass and typography. */
.tdr-panel{display:grid;gap:12px;padding-bottom:16px;color:inherit}
.tdr-panel>.section-note{margin:2px 0;line-height:1.5}
.tdr-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
.tdr-stat{display:flex;flex-direction:column;justify-content:center;gap:5px;min-width:0;padding:14px 12px;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.14);border-radius:15px}
.tdr-stat-label{font-size:.72rem;font-weight:700;letter-spacing:.065em;opacity:.74}
.tdr-stat strong{font-size:clamp(1.4rem,3.6vw,2rem);font-weight:750;letter-spacing:-.035em;font-variant-numeric:tabular-nums;line-height:1.1}
.tdr-stat small{font-size:.74rem;line-height:1.35;opacity:.72}
.tdr-current,.tdr-phase,.tdr-attempt{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:11px 12px;border:1px solid rgba(255,255,255,.1);border-radius:10px;background:rgba(255,255,255,.035)}
.tdr-current{background:rgba(255,255,255,.07)}
.tdr-current strong,.tdr-phase strong,.tdr-attempt strong{white-space:nowrap;font-variant-numeric:tabular-nums}
.tdr-breakdown,.tdr-attempts{display:grid;gap:5px}
.tdr-phase{display:grid;grid-template-columns:minmax(0,1fr) auto;row-gap:1px}
.tdr-phase span{min-width:0}
.tdr-phase small{grid-column:1 / -1;font-size:.75rem;opacity:.7}
.tdr-panel .button-row{display:flex;flex-wrap:wrap;gap:8px}
.tdr-panel .button-row>button{min-height:40px}
@media(max-width:380px){.tdr-stat{padding:12px 9px}.tdr-stat strong{font-size:1.35rem}.tdr-current,.tdr-phase,.tdr-attempt{padding:10px 9px}}


/* GNARLY stylesheet: performance.css */
/* GNARLY Performance / Stage79 — instrument within the active visual universe.
 * One fluid translucent card, unified theme accent, no arbitrary RGB pad rows,
 * no deceptive "guided MIDI lights" or industrial hardware mimicry.
 */
.dj-launch{border:1px solid color-mix(in srgb,var(--acid) 36%,transparent);border-radius:16px;background:rgba(22,28,26,.44);color:var(--acid);font-size:12px;font-weight:850;letter-spacing:.06em;padding:10px;min-height:44px;min-width:47px;backdrop-filter:blur(9px)}
.dj-launch:hover,.dj-launch:focus-visible{background:color-mix(in srgb,var(--acid) 12%,rgba(20,25,24,.8))}
.bottom-sheet.performance-sheet{height:min(92dvh,840px);padding:0 clamp(13px,3vw,24px) calc(14px + var(--safe-bottom));background:rgba(22,25,27,.91);backdrop-filter:blur(24px) saturate(130%);-webkit-backdrop-filter:blur(24px) saturate(130%)}
.performance-sheet .sheet-content{overflow-y:auto;scrollbar-width:thin}
.dj-panel{--dj-accent:var(--acid);color:#fff;padding:1px 0 15px}
.dj-heading{display:flex;align-items:flex-start;justify-content:space-between;padding:0 3px;margin:0 0 16px}
.dj-overline{color:var(--dj-accent);font-size:10px;letter-spacing:.22em;font-weight:850}
.dj-heading strong{display:block;font-size:clamp(24px,4vw,30px);font-weight:780;letter-spacing:-.048em;line-height:1.15;margin-top:5px}
.dj-heading p{font-size:12px;color:#c9cfce;margin:5px 0 0;line-height:1.45}
.dj-title-star{font-size:18px;color:var(--dj-accent)}
.dj-bank-mark{width:35px;height:35px;flex:0 0 35px;border:1px solid color-mix(in srgb,var(--dj-accent) 45%,transparent);border-radius:13px;display:grid;place-items:center;color:var(--dj-accent);font-size:13px;font-weight:850}
.dj-current-track{display:flex;gap:12px;align-items:center;padding:12px 13px;border-radius:19px;background:color-mix(in srgb,var(--dj-accent) 8%,rgba(18,22,26,.72));border:1px solid rgba(255,255,255,.14);margin-bottom:12px;min-height:75px}
.dj-track-icon{width:40px;height:40px;flex:0 0 40px;display:grid;place-items:center;border-radius:14px;color:var(--dj-accent);font-size:23px;background:color-mix(in srgb,var(--dj-accent) 12%,rgba(32,35,39,.7));border:1px solid rgba(255,255,255,.13)}
.dj-track-copy{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.dj-track-eyebrow{font-size:9px;font-weight:830;letter-spacing:.17em;color:var(--dj-accent)}
.dj-track-copy strong{font-size:13px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;font-weight:770}
.dj-track-copy #dj-song-status{font-size:11px;color:#bbc7c4;line-height:1.35}
.dj-refresh{width:34px;height:34px;flex:0 0 34px;display:grid;place-items:center;border-radius:12px;color:var(--dj-accent);background:rgba(255,255,255,.065);font-size:22px}
.dj-refresh:hover{background:rgba(255,255,255,.12)}
.dj-stage{position:relative;padding:clamp(10px,2.5vw,17px);border:1px solid rgba(255,255,255,.19);border-radius:26px;background:linear-gradient(146deg,rgba(42,46,50,.40),rgba(12,18,20,.32));box-shadow:0 14px 40px #0002,inset 0 1px #ffffff15}
.dj-grid-head{display:flex;align-items:center;justify-content:space-between;gap:6px;color:#b9c9c3;margin:0 3px 12px;font-size:10px;font-weight:800;letter-spacing:.15em}
.dj-grid-head span:last-child{color:var(--dj-accent)}
.dj-pads{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(6px,1.5vw,10px)}
.dj-pad{position:relative;isolation:isolate;min-width:0;aspect-ratio:1/1;min-height:61px;display:flex;flex-direction:column;justify-content:space-between;text-align:left;touch-action:manipulation;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;overflow:hidden;padding:clamp(7px,1.6vw,12px);border-radius:clamp(13px,2vw,19px);color:#e9f5f0;background:linear-gradient(144deg,rgba(215,230,228,.16),rgba(60,76,76,.19) 26%,rgba(12,21,24,.43) 78%);border:1px solid rgba(255,255,255,.18);box-shadow:inset 0 1px 0 #ffffff30,inset 0 -2px #0003,0 2px 9px #0002;transition:background .12s,border-color .12s,transform .12s,box-shadow .12s}
.dj-pad:before{content:'';position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse at 17% 7%,color-mix(in srgb,var(--dj-accent) 15%,transparent),transparent 65%);opacity:.8}
.dj-pad:after{content:'';position:absolute;inset:-20% -35%;pointer-events:none;opacity:.09;transform:rotate(-20deg);background:repeating-linear-gradient(75deg,transparent 0 8px,#fff 9px,transparent 10px 19px)}
.dj-pad:hover{border-color:color-mix(in srgb,var(--dj-accent) 60%,#ddd);background:linear-gradient(144deg,rgba(255,255,255,.2),rgba(33,53,50,.35))}
.dj-pad-top,.dj-pad-bottom{display:flex;align-items:center;justify-content:space-between;gap:2px}
.dj-pad-number{font-size:10px;letter-spacing:.06em;color:#c0ceca;font-weight:800}
.dj-pad-spark{font-size:11px;color:var(--dj-accent);opacity:.48;line-height:1}
.dj-pad-center{display:block;font-size:clamp(10px,2.2vw,14px);font-weight:820;letter-spacing:-.015em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dj-pad-bottom{font-size:10px;font-weight:800;color:#a5bab0}
.dj-pattern-dot{width:5px;height:5px;border-radius:50%;background:transparent}
.dj-pad.is-programmed .dj-pattern-dot{background:var(--dj-accent)}
.dj-pad.is-hit,.dj-pad:active{transform:translateY(1px) scale(.975);background:color-mix(in srgb,var(--dj-accent) 43%,rgba(32,39,40,.85));border-color:var(--dj-accent);color:white;box-shadow:inset 0 0 23px color-mix(in srgb,var(--dj-accent) 28%,transparent),0 0 17px color-mix(in srgb,var(--dj-accent) 25%,transparent)}
.dj-pad.is-hit .dj-pad-spark,.dj-pad:active .dj-pad-spark{opacity:1;color:#fff}
.dj-pad:focus-visible{outline:2px solid var(--dj-accent);outline-offset:2px}
.dj-under-grid{display:flex;gap:9px;align-items:center;margin:12px 3px 0;color:#aabbb3;font-size:10px;line-height:1.4}
.dj-under-accent{width:24px;height:3px;flex:0 0 24px;border-radius:3px;background:var(--dj-accent);opacity:.7}
.dj-advanced{margin-top:12px;border:1px solid rgba(255,255,255,.13);border-radius:17px;background:rgba(16,25,26,.39);overflow:hidden}
.dj-advanced summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;min-height:49px;padding:12px 16px;font-weight:790;font-size:12px;color:#edf6f1}
.dj-advanced summary::-webkit-details-marker{display:none}
.dj-advanced summary:before{content:'＋';color:var(--dj-accent);font-size:18px;margin-right:11px}
.dj-advanced[open] summary:before{content:'−'}
.dj-advanced summary span:first-child{flex:1}
.dj-summary-note{font-size:10px;color:#a6b4b0;letter-spacing:.08em}
.dj-advanced-inner{padding:0 15px 17px}
.dj-advanced-inner>p{font-size:11px;line-height:1.5;color:#a9b9b3}
.dj-steps{display:grid;grid-template-columns:repeat(16,minmax(0,1fr));gap:3px;margin:14px 0}
.dj-step{height:4px;border-radius:999px;background:rgba(255,255,255,.22)}
.dj-step:nth-child(4n+1){background:rgba(255,255,255,.42)}
.dj-step.is-current{background:var(--dj-accent)}
.dj-actions{display:grid;grid-template-columns:1fr 1fr auto;gap:8px}
.dj-actions button,.dj-midi-head button{border-radius:12px;border:1px solid rgba(255,255,255,.18);min-height:40px;padding:8px 12px;background:rgba(255,255,255,.075);font-size:11px;font-weight:800}
.dj-actions button[aria-pressed="true"]{background:var(--dj-accent);color:#071612}
.dj-actions button.recording{background:#e83d5f;color:#fff}
.dj-tempo{margin:15px 1px 9px;display:flex;gap:12px;align-items:center;font-size:11px;font-weight:780}
.dj-tempo input{flex:1;accent-color:var(--dj-accent);min-width:0}
.dj-tempo output{min-width:28px;text-align:right;color:var(--dj-accent)}
.dj-midi{margin-top:12px;border-top:1px solid rgba(255,255,255,.11);padding-top:12px}
.dj-midi-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.dj-midi-head strong{font-size:12px;font-weight:760}
.dj-midi-head button{min-height:33px;color:var(--dj-accent)}
.dj-midi-enabled{color:var(--dj-accent);font-size:10px;font-weight:770}
.dj-midi p{font-size:10px;line-height:1.5;color:#9fafaa}
.dj-output-label{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:11px}
.dj-output-label select{max-width:65%;padding:7px;border:1px solid rgba(255,255,255,.15);border-radius:9px;background:#17221e;color:#fff}
.dj-midi-note{opacity:.83}
.music-dj-entry{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;border:1px solid color-mix(in srgb,var(--acid) 36%,transparent);border-radius:17px;background:rgba(18,25,24,.63);color:var(--acid);padding:13px 15px;margin-top:16px;font-size:12px;font-weight:820;letter-spacing:.06em}
.music-dj-entry span{font-size:10px;opacity:.85}
@media (min-width:900px) and (pointer:fine){
 .app-shell .bottom-sheet.performance-sheet{width:min(680px,48vw);max-width:680px;left:auto;right:clamp(18px,2vw,50px)}
 .dj-pad-center{font-size:14px}
}
@media(max-width:390px){.dj-stage{padding:8px}.dj-pads{gap:6px}.dj-pad{min-height:52px;padding:7px}.dj-pad-center{font-size:10px}.dj-under-grid{font-size:9px}}
@media(prefers-reduced-motion:reduce){.dj-pad{transition:none}}

/* Performance remains the existing retractable window under the Omnibox.
   Its new glass pad bank inherits theme colors, never an unrelated RGB deck. */
.module-drawer[data-module="performance"]{--module-tint:var(--acid);background:linear-gradient(155deg,rgba(46,42,47,.47),rgba(16,22,25,.57))}
.module-drawer[data-module="performance"].is-open{border-color:color-mix(in srgb,var(--acid) 34%,rgba(255,255,255,.16));box-shadow:0 11px 38px #0005,inset 0 1px #ffffff23}
.module-drawer[data-module="performance"] .module-body{background:transparent}
.module-drawer[data-module="performance"] .dj-panel{padding:0 0 3px}
.module-drawer[data-module="performance"] .dj-heading{margin-bottom:12px}
@media (min-width:900px) and (pointer:fine){
 .module-drawer[data-module="performance"]{max-width:100%;width:100%}
 .module-drawer[data-module="performance"] .dj-pads{gap:12px}
}

/* Optional MIDI + chord intelligence, integrated inside the current glass DJ drawer. */
.dj-intelligence{margin:0 0 13px;border:1px solid rgba(255,255,255,.17);border-radius:17px;background:rgba(14,23,25,.43);overflow:hidden}
.dj-intelligence summary{display:flex;justify-content:space-between;align-items:center;gap:10px;cursor:pointer;padding:12px 14px;color:var(--dj-accent);font-weight:830;font-size:11px;letter-spacing:.08em;list-style:none}
.dj-intelligence summary::-webkit-details-marker{display:none}
.dj-intelligence summary small{color:#adbbb7;font-size:10px;letter-spacing:0;font-weight:600}
.dj-intelligence-inner{padding:0 14px 14px}
.dj-intelligence-inner>p{font-size:11px;line-height:1.55;color:#b6c6c0;margin:5px 0 11px}
.dj-intelligence-inner strong{color:#eafaf4}
.dj-intelligence-actions{display:flex;flex-wrap:wrap;gap:7px}
.dj-intelligence-actions button{font-weight:800;font-size:11px;border-radius:11px;min-height:37px;padding:8px 11px;background:color-mix(in srgb,var(--dj-accent) 12%,rgba(25,33,33,.76));border:1px solid color-mix(in srgb,var(--dj-accent) 34%,rgba(255,255,255,.14));color:#e8f7f1}
.dj-intelligence-actions button:first-child{color:var(--dj-accent)}
.dj-intelligence-actions button:disabled{opacity:.47;cursor:default}
.dj-intelligence-status{color:var(--dj-accent)!important}
.dj-intelligence-results{display:flex;flex-wrap:wrap;gap:8px;font-size:11px}
.dj-intelligence-results>*{border-radius:10px;padding:8px 10px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1)}
.dj-intelligence-hint{font-size:10px!important;opacity:.75}
@media(max-width:420px){.dj-intelligence summary{padding:11px}.dj-intelligence-inner{padding:0 11px 11px}.dj-intelligence-actions button{flex:1 1 auto}}


/* GNARLY stylesheet: module-dock.css */
/* GNARLY Stage 72 — independent retractable windows below Omnibox. */
.module-dock{width:100%;max-width:720px;align-self:center;display:flex;flex-direction:column;gap:11px;margin:clamp(18px,3dvh,28px) auto 26px;isolation:isolate}
.module-dock[hidden],.module-drawer[hidden],.module-body[hidden]{display:none!important}
.module-drawer{--module-tint:var(--acid);overflow:hidden;flex:none;min-width:0;border-radius:21px;border:1px solid rgba(255,255,255,.17);background:linear-gradient(150deg,rgba(44,32,42,.58),rgba(13,17,17,.68));-webkit-backdrop-filter:blur(14px) saturate(135%);backdrop-filter:blur(14px) saturate(135%);box-shadow:inset 0 1px #ffffff1b,0 4px 19px #0003}
.module-drawer[data-module="export"]{--module-tint:#d1b7ff}
.module-drawer.is-open{border-color:color-mix(in srgb,var(--module-tint) 30%,rgba(255,255,255,.14));background:linear-gradient(145deg,rgba(54,37,51,.72),rgba(14,18,18,.83));box-shadow:0 11px 35px #0006,inset 0 1px #ffffff16}
.module-handle{display:flex;align-items:center;justify-content:space-between;gap:14px;width:100%;min-height:58px;padding:12px clamp(13px,3vw,18px);color:#f9f6fb;background:transparent;text-align:left;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.module-handle-label{display:flex;align-items:center;gap:11px;min-width:0}
.module-glyph{display:grid;place-items:center;flex:none;width:31px;height:31px;border-radius:10px;color:var(--module-tint);font-size:20px;background:color-mix(in srgb,var(--module-tint) 11%,transparent);border:1px solid color-mix(in srgb,var(--module-tint) 27%,transparent)}
.module-handle-label strong{display:block;color:var(--module-tint);font-size:11px;letter-spacing:.16em;font-weight:900}
.module-handle-label small{display:block;color:rgba(245,246,244,.65);font-size:11px;margin-top:3px}
.app-shell .module-handle .module-chevron{width:16px;height:16px;flex:0 0 16px;stroke-width:2;opacity:.8;transition:transform .18s ease}
.module-drawer.is-open .module-chevron{transform:rotate(180deg);color:var(--module-tint)}
.module-body{border-top:1px solid rgba(255,255,255,.13);padding:clamp(14px,3vw,21px);overflow-x:hidden;max-height:none;overscroll-behavior:contain}
.module-body .music-panel{padding-bottom:0}
.module-body .music-panel-kicker{display:none}
.module-body .music-segment:last-child{margin-bottom:8px}
.module-body .dj-panel{padding-bottom:0}
.module-body .dj-stage{box-shadow:inset 0 1px #ffffff1a,0 7px 25px #0005}
.module-body .export-formats{margin-top:4px}
.module-body .module-export-intro{color:#c9bfcc;font-size:12px;line-height:1.5;margin:0 0 17px}
.module-body .section-head{margin-top:17px}
.app-shell .main .module-dock{margin-top:clamp(17px,2.5dvh,28px)}
.app-shell .topbar #music-toggle-button{color:var(--acid)}
.app-shell .topbar #music-toggle-button[aria-expanded="true"],.app-shell .topbar #share-button[aria-expanded="true"]{color:var(--acid);background:color-mix(in srgb,var(--acid) 13%,transparent)}
.app-shell #performance-button[aria-expanded="true"]{background:color-mix(in srgb,var(--acid) 18%,#091b0c);box-shadow:0 0 16px color-mix(in srgb,var(--acid) 20%,transparent)}
@media(min-width:900px){.module-dock{max-width:660px}}
@media(max-width:650px){.module-dock{gap:9px}.module-body{padding:13px}.module-handle{min-height:54px}}
@media(max-width:360px){.module-handle-label small{font-size:10px}.module-handle-label strong{font-size:10px}.module-handle{padding:11px}}
@media(prefers-reduced-motion:reduce){.module-chevron{transition:none}}

/* Distinguish verified timed lyrics from un-timed/AI results without a second overlay. */
.lyrics-actions{display:flex;flex-wrap:wrap;gap:9px;margin:11px 0}
.lyrics-ai-consent{display:flex;align-items:flex-start;gap:10px;cursor:pointer;margin:12px 0;padding:11px;border:1px solid rgba(255,255,255,.15);border-radius:12px;background:rgba(255,255,255,.04)}
.lyrics-ai-consent input{flex:none;margin-top:3px;accent-color:var(--acid)}
.lyrics-unsynced .lyric-line{opacity:.95;cursor:default;transition:none}

/* Smart Queue resides inside the existing Omnibox sheet; no new tab or overlay. */
.smart-queue-panel{padding:12px;border:1px solid rgba(255,255,255,.13);border-radius:15px;background:rgba(12,18,20,.24);margin-bottom:15px}
.smart-queue-panel .section-head{margin:0 0 12px}
.smart-chip-row{display:flex;gap:6px;flex-wrap:wrap;margin:4px 0 10px}
.smart-chip{min-height:33px;padding:7px 10px;border-radius:12px;background:rgba(255,255,255,.075);border:1px solid rgba(255,255,255,.17);color:#f1f6f0;font-size:12px;touch-action:manipulation}
.smart-chip.active{color:var(--acid);background:color-mix(in srgb,var(--acid) 14%,transparent);border-color:color-mix(in srgb,var(--acid) 48%,transparent)}
.smart-queue-explain{color:rgba(247,248,247,.7);font-size:12px;line-height:1.45;margin-bottom:10px}
.smart-anchor{display:block;color:#fff;font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-bottom:10px}
.smart-queue-actions{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:5px}
.smart-queue-actions .action-button,.smart-playlist-controls .action-button,.smart-playlist-subactions .action-button{font-size:12px;padding:8px 11px;min-height:34px}
.smart-playlist-controls{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-top:14px}
.smart-playlist-name{font-size:10px;letter-spacing:.12em;font-weight:800;opacity:.8}
#smart-playlist-select{border:1px solid rgba(255,255,255,.26);border-radius:9px;background:#182421;color:#f9fff9;min-width:120px;max-width:190px;padding:9px;font-size:12px}
.smart-playlist-subactions{margin-top:7px}
.smart-playlist-heading{font-size:12px;font-weight:800;margin:10px 0}
#sheet-content .media-item{min-width:0}
#sheet-content .media-item>button[data-action]{flex-shrink:0;min-width:29px;min-height:32px;touch-action:manipulation}
#sheet-content .media-item>button[data-action="up"],
#sheet-content .media-item>button[data-action="down"],
#sheet-content .media-item>button[data-action="remove"],
#sheet-content .media-item>button[data-action="playlist-remove"]{font-size:16px}
@media(max-width:390px){.smart-queue-panel{padding:10px}.smart-chip{padding:6px 8px}.smart-queue-explain{font-size:11px}#sheet-content .media-item>button[data-action]{min-width:26px}}

/* Quick visual architecture: painter = L1 theme, bolt = L2 experience,
   Aa = independent karaoke typography. Eight topbar controls fit 320px. */
.app-shell .topbar{gap:clamp(1px,.7vw,7px);padding-inline:clamp(7px,2.5vw,24px)}
.app-shell .topbar>.icon-button{flex:0 1 clamp(32px,8.15vw,44px);width:clamp(32px,8.15vw,44px);height:44px;min-width:0}
.app-shell .topbar>.icon-button .icon{width:clamp(19px,5.3vw,23px);height:clamp(19px,5.3vw,23px)}
.app-shell .topbar>.palette{color:var(--acid);background:color-mix(in srgb,var(--acid) 9%,rgba(12,18,17,.55))}
.app-shell .topbar>.lyric-typography-button{color:#f5f4fa}
.app-shell .topbar>.lyric-typography-button span{font-size:19px;font-weight:780;letter-spacing:-.1em;line-height:1;font-family:Georgia,serif;padding-right:2px}
.app-shell .topbar>.palette[aria-expanded="true"],
.app-shell .topbar>.bolt[aria-expanded="true"],
.app-shell .topbar>.lyric-typography-button[aria-expanded="true"]{color:var(--acid);border-color:color-mix(in srgb,var(--acid) 45%,transparent);background:color-mix(in srgb,var(--acid) 13%,rgba(12,18,17,.5))}
@media(max-width:359px){
 .app-shell .topbar{gap:1px;padding-inline:7px}
 .app-shell .topbar>.icon-button{flex-basis:32px;width:32px;height:42px}
 .app-shell .topbar>.lyric-typography-button span{font-size:17px}
}
/* Font-selection UI. Future datasets provide descriptors, never arbitrary CSS. */
.lyric-style-panel{max-width:760px;margin-inline:auto}
.lyric-font-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:13px 0 17px}
.lyric-font-option{display:flex;align-items:center;gap:10px;padding:13px 10px;min-height:78px;color:#fff;text-align:left;border:1px solid rgba(255,255,255,.16);border-radius:15px;background:rgba(255,255,255,.065)}
.lyric-font-option[aria-pressed="true"]{border-color:var(--acid);background:color-mix(in srgb,var(--acid) 12%,rgba(5,13,9,.7));box-shadow:inset 0 0 16px color-mix(in srgb,var(--acid) 7%,transparent)}
.lyric-font-specimen{font-size:25px;flex:0 0 39px;text-align:center;letter-spacing:-.07em}
.lyric-font-option[data-preview-font="system"] .lyric-font-specimen{font-family:-apple-system,BlinkMacSystemFont,sans-serif}
.lyric-font-option[data-preview-font="editorial"] .lyric-font-specimen{font-family:Georgia,serif;font-style:italic}
.lyric-font-option[data-preview-font="rounded"] .lyric-font-specimen{font-family:ui-rounded,"Trebuchet MS",sans-serif;font-weight:900}
.lyric-font-option[data-preview-font="mono"] .lyric-font-specimen{font-family:ui-monospace,Menlo,monospace;letter-spacing:-.11em}
.lyric-font-option[data-preview-font="display"] .lyric-font-specimen{font-family:Impact,"Arial Narrow",sans-serif;text-transform:uppercase}
.lyric-font-detail{display:flex;flex-direction:column;min-width:0;gap:3px}
.lyric-font-detail strong{font-size:12px;line-height:1.1}
.lyric-font-detail small{font-size:10px;color:#bccbc1;line-height:1.25}
.lyric-font-selection{color:var(--acid);font-size:16px;font-weight:800;margin-left:auto}
.lyric-font-future{border-top:1px solid rgba(255,255,255,.12);padding-top:13px;line-height:1.5}
@media(max-width:359px){.lyric-font-grid{gap:7px}.lyric-font-option{padding:10px 7px;gap:6px}.lyric-font-specimen{font-size:21px;flex-basis:29px}}
/* Single typography contract shared between the HUD and the Karaoke sheet. */
.app-shell .floating-lyrics,.app-shell .lyrics-box .lyric-line{
 font-family:var(--gnarly-lyric-font,-apple-system,BlinkMacSystemFont,sans-serif);
 font-weight:var(--gnarly-lyric-weight,700);
 letter-spacing:var(--gnarly-lyric-spacing,0em);
 text-transform:var(--gnarly-lyric-transform,none);
 overflow-wrap:anywhere;
}
.app-shell .floating-lyrics{font-size:calc(20px * var(--gnarly-lyric-scale,1))}
.app-shell .lyrics-box .lyric-line{font-size:calc(18px * var(--gnarly-lyric-scale,1))}
.app-shell .lyrics-box .lyric-line.active{font-size:calc(23px * var(--gnarly-lyric-scale,1));font-weight:var(--gnarly-lyric-weight,800)}
.app-shell[data-lyric-treatment="neon"] .floating-lyrics,
.app-shell[data-lyric-treatment="neon"] .lyrics-box .lyric-line.active{text-shadow:0 0 9px color-mix(in srgb,var(--acid) 80%,white),0 0 25px color-mix(in srgb,var(--acid) 48%,transparent)}
.app-shell[data-lyric-treatment="editorial"] .floating-lyrics,
.app-shell[data-lyric-treatment="editorial"] .lyrics-box .lyric-line.active{font-style:italic;text-shadow:0 3px 15px #000e}
.app-shell[data-lyric-treatment="mono"] .floating-lyrics,
.app-shell[data-lyric-treatment="mono"] .lyrics-box .lyric-line.active{text-shadow:2px 2px 0 #000e}
.app-shell[data-lyric-treatment="kinetic"] .floating-lyrics,
.app-shell[data-lyric-treatment="kinetic"] .lyrics-box .lyric-line.active{text-shadow:1px 2px 0 #000,3px 4px 0 #000b,0 0 15px color-mix(in srgb,var(--acid) 38%,transparent)}
.app-shell[data-lyric-treatment="minimal"] .floating-lyrics,
.app-shell[data-lyric-treatment="minimal"] .lyrics-box .lyric-line.active{text-shadow:0 2px 7px #000b}
@media(prefers-reduced-motion:reduce){.lyric-font-option{transition:none!important}}

/* GNARLY Aa · curated typography studio. Lightweight CSS only; no shader nodes. */
.lyric-style-panel{max-width:760px}
.lyric-type-preview{padding:15px;border:1px solid color-mix(in srgb,var(--acid) 28%,rgba(255,255,255,.13));border-radius:18px;background:linear-gradient(155deg,rgba(40,47,45,.3),rgba(10,16,19,.55));margin:12px 0 16px;text-align:center;min-width:0}
.lyric-type-preview small{font-size:10px;letter-spacing:.13em;color:var(--acid);font-weight:850}
.lyric-type-preview>div{font-family:var(--gnarly-lyric-font,sans-serif);font-size:clamp(21px,5vw,37px);font-weight:var(--gnarly-lyric-weight,700);line-height:1.22;margin:16px 0;color:#f4fff9;overflow-wrap:anywhere;text-wrap:balance;text-shadow:0 3px 14px rgba(0,0,0,.6);transition:font-weight .1s}
.lyric-type-preview>span{color:#cad5d0;font-size:11px}
.lyric-font-scope,.lyric-font-filters,.lyric-font-actions{display:flex;flex-wrap:wrap;gap:6px;margin:9px 0 12px}
.lyric-font-scope button,.lyric-font-filters button,.lyric-font-actions button{border:1px solid rgba(255,255,255,.19);background:rgba(255,255,255,.07);color:#f4f6f6;border-radius:999px;min-height:38px;padding:9px 12px;font-size:11px;font-weight:780;touch-action:manipulation}
.lyric-font-scope button[aria-pressed="true"],.lyric-font-filters button[aria-pressed="true"]{color:#101a10;background:var(--acid);border-color:var(--acid)}
.lyric-font-scope button:disabled{opacity:.36}
.lyric-font-actions button{min-height:33px;border-color:color-mix(in srgb,var(--acid) 22%,rgba(255,255,255,.16))}
.lyric-font-scope-description{font-size:11px;line-height:1.5;color:#c3cdc8;margin:2px 0 9px}
.lyric-font-search{display:block;width:100%;min-height:43px;border:1px solid rgba(255,255,255,.23);border-radius:12px;background:rgba(16,22,23,.65);color:#fff;padding:10px 13px;font-size:13px;outline-offset:3px}
.lyric-font-search:focus-visible{outline:2px solid var(--acid)}
.lyric-font-filters{margin:12px 0 13px}
.lyric-font-filters button{min-height:32px;padding:7px 10px}
.lyric-font-option{min-width:0;position:relative;gap:9px;min-height:83px;padding:11px 9px}
.lyric-font-option[hidden]{display:none!important}
.lyric-font-specimen{min-width:0;flex:0 0 48px;font-size:clamp(21px,5.5vw,30px);letter-spacing:-.04em;font-weight:700;white-space:nowrap}
.lyric-font-detail strong{font-size:12px;line-height:1.16;overflow-wrap:anywhere}
.lyric-font-detail small{font-size:10px}
.lyric-font-empty{padding:16px;color:#c7d2ce;text-align:center;font-size:12px}
.app-shell .floating-lyrics,.app-shell .lyrics-box .lyric-line{font-kerning:normal;text-rendering:optimizeLegibility;overflow-wrap:anywhere;text-wrap:balance}
.app-shell .floating-lyrics{max-width:min(93vw,900px)}
.app-shell .lyrics-box .lyric-line{line-height:1.32}
/* Explicit long lyrics remain in the same scroll container; no animations triggered per word. */
@media(max-width:380px){.lyric-font-option{gap:5px;padding:9px 7px;min-height:77px}.lyric-font-specimen{flex-basis:33px;font-size:22px}.lyric-font-detail strong{font-size:11px}.lyric-font-scope button{flex:1 1 auto}}
@media(prefers-reduced-motion:reduce){.lyric-type-preview>div{transition:none}}


/* GNARLY Fullscreen · app and independent viewport-fixed artwork.
 * True browser Fullscreen API where available, immersive viewport on iOS Safari. */
.app-shell .fullscreen-toggle{width:39px;height:39px;min-width:37px;flex:0 0 39px;display:grid;place-items:center;border-radius:12px;background:rgba(255,255,255,.11);border:1px solid rgba(255,255,255,.20);color:#eef5f1;touch-action:manipulation}
.app-shell .fullscreen-toggle [data-fullscreen-glyph]{font-size:24px;line-height:1;font-weight:700}
.app-shell .fullscreen-toggle[aria-pressed="true"]{color:var(--acid);border-color:color-mix(in srgb,var(--acid) 60%,transparent);background:color-mix(in srgb,var(--acid) 11%,rgba(10,20,14,.8))}
html.gnarly-fullscreen,html.gnarly-fullscreen body{min-height:100%;width:100%;background:#080e10}
html.gnarly-fullscreen .app-shell{max-width:min(100%,1240px);min-height:100dvh;height:auto;margin:0 auto;border:0;border-radius:0;box-shadow:none}
html.gnarly-fullscreen .app-shell .main{max-width:1120px;margin:0 auto;min-height:calc(100dvh - 100px)}
html.gnarly-fullscreen .app-shell .brand-line,
html.gnarly-fullscreen .app-shell .omnibox-shell,
html.gnarly-fullscreen .app-shell .module-dock{max-width:870px;margin-left:auto;margin-right:auto}
html.gnarly-fullscreen .app-shell .player{max-width:min(680px,100%);margin-left:auto;margin-right:auto}
html.gnarly-fullscreen .gnarly-background,html.gnarly-fullscreen .photo-background{min-height:100dvh;min-width:100%}
html.gnarly-fullscreen .app-shell .topbar{max-width:1080px;margin-left:auto;margin-right:auto}
body.gnarly-immersive{min-height:100dvh}
.app-shell #cover-image,.app-shell .media-item img,.karaoke-stage-art{image-rendering:auto;object-fit:cover}
.gnarly-background .photo-background{background-position:center;background-size:cover;background-repeat:no-repeat;image-rendering:auto}
@media(max-width:380px){.app-shell .fullscreen-toggle{width:32px;height:36px;flex-basis:32px;min-width:32px}.app-shell .fullscreen-toggle [data-fullscreen-glyph]{font-size:20px}.app-shell .quick-actions{gap:4px}}

/* One tap cycles. Downward drag selects precisely, without Safari native
 * long-press text selection, loupe or callout. Scope capture to these three
 * controls only; other scrollable app views keep normal touch behavior. */
#theme-button,#experience-button,#lyric-style-button{
 touch-action:none!important;
 -webkit-touch-callout:none!important;
 -webkit-user-select:none!important;user-select:none!important;
 -webkit-tap-highlight-color:transparent;
 overscroll-behavior:contain;
}
#theme-button *,#experience-button *,#lyric-style-button *{
 -webkit-touch-callout:none!important;
 -webkit-user-select:none!important;user-select:none!important;
 pointer-events:none;
}

/* Listening Intelligence — understated memory indicators in the queue drawer */
.smart-taste-insight{display:flex;align-items:center;flex-wrap:wrap;gap:7px 12px;
 padding:10px 12px;margin:9px 0 12px;border-radius:13px;border:1px solid rgba(255,255,255,.12);
 background:rgba(255,255,255,.045);font-size:11px;line-height:1.55;color:rgba(236,244,247,.82)}
.smart-taste-clear{margin-left:auto;border:1px solid rgba(255,255,255,.23);border-radius:999px;
 padding:6px 11px;background:rgba(255,255,255,.075);color:inherit;font:inherit;font-weight:700;cursor:pointer}
.smart-taste-clear:hover,.smart-taste-clear:focus-visible{border-color:var(--acid,#46ff12);color:var(--acid,#46ff12)}

/* GNARLY 2 layer locks: quiet glass controls without another permanent toolbar. */
.gnarly2-studio{margin:16px 0;padding:12px;border:1px solid rgba(255,255,255,.16);
 background:linear-gradient(130deg,rgba(98,150,187,.08),rgba(239,97,177,.06));border-radius:17px}
.gnarly2-lock-row{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 16px}
.gnarly2-lock{border:1px solid rgba(255,255,255,.19);color:inherit;
 background:rgba(255,255,255,.07);border-radius:100px;
 padding:9px 13px;font-size:12px;font-weight:740;min-height:40px}
.gnarly2-lock.active,.gnarly2-lock[aria-pressed="true"]{border-color:var(--acid,#46ff12);
 background:color-mix(in srgb,var(--acid,#46ff12) 16%,rgba(0,12,14,.8))}
.gnarly2-lock:focus-visible{outline:2px solid var(--acid,#46ff12);outline-offset:3px}
@media(max-width:375px){.gnarly2-lock-row{gap:6px}.gnarly2-lock{font-size:11px;padding:8px 10px}}

/* GNARLY · restrained premium controls, matched to iOS concept in Figma.
   Accent belongs to the selected theme. Never introduce a separate neon
   palette or replace the existing music/visual architecture. */
.app-shell .topbar{
 min-height:82px;
 gap:clamp(4px,1.25vw,11px);
 padding-inline:clamp(11px,3vw,35px);
}
.app-shell .topbar>.icon-button{
 display:grid;place-items:center;
 flex:0 1 clamp(36px,10.6vw,46px);
 width:clamp(36px,10.6vw,46px);
 height:clamp(40px,11.3vw,46px);
 border-radius:999px;
 background:linear-gradient(155deg,rgba(28,39,57,.58),rgba(12,17,30,.54));
 border:1px solid rgba(231,237,250,.22);
 color:rgba(240,244,255,.90);
 box-shadow:0 4px 14px rgba(0,0,0,.16),inset 0 1px 0 rgba(255,255,255,.085);
 -webkit-backdrop-filter:blur(16px) saturate(125%);
 backdrop-filter:blur(16px) saturate(125%);
 transition:background-color .2s,border-color .2s,box-shadow .2s,transform .18s;
 -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;
}
.app-shell .topbar>.icon-button .icon{
 width:clamp(20px,5.4vw,24px);
 height:clamp(20px,5.4vw,24px);
 opacity:.94;
}
.app-shell .topbar>.palette,
.app-shell .topbar>.bolt{
 color:color-mix(in srgb,var(--acid) 60%,#dee3ee);
 background:linear-gradient(155deg,rgba(28,39,57,.58),rgba(12,17,30,.54));
}
.app-shell .topbar>.lyric-typography-button{color:rgba(247,248,252,.95)}
.app-shell .topbar #music-toggle-button{color:rgba(238,245,255,.86)}
.app-shell .topbar>.icon-button[aria-expanded="true"]:not(#search-toggle){
 border-color:color-mix(in srgb,var(--acid) 46%,rgba(245,246,255,.16));
 background:color-mix(in srgb,var(--acid) 13%,rgba(16,24,36,.79));
 color:color-mix(in srgb,var(--acid) 64%,white);
}
.app-shell .topbar>.icon-button:active{
 transform:scale(.94);
 background:color-mix(in srgb,var(--acid) 12%,rgba(21,27,40,.75));
}
.app-shell .topbar #record-button{
 border:1px solid rgba(251,102,112,.54)!important;
 background:linear-gradient(150deg,rgba(41,30,43,.57),rgba(16,20,34,.53));
}
.app-shell .topbar #record-button.recording{
 border-color:#fc646f!important;box-shadow:0 0 0 3px rgba(252,100,111,.18);
}
.app-shell .topbar #record-button .record-dot{background:#f55b69}
.app-shell .brand-line{
 margin-top:clamp(18px,2.8vh,30px);
}
.app-shell .topbar #search-toggle{
 touch-action:none!important;
 -webkit-touch-callout:none!important;
 -webkit-user-select:none!important;user-select:none!important;
 overscroll-behavior:contain;
 position:relative;
}
.app-shell .topbar #search-toggle,
.app-shell .topbar #search-toggle *{
 -webkit-touch-callout:none!important;-webkit-user-select:none!important;
 user-select:none!important;
}
/* The SVG hint replaces the older underline; never stack both affordances. */
.app-shell .topbar #search-toggle:after{content:none}
.app-shell .topbar #search-toggle:focus-visible{
 outline:2px solid var(--acid);outline-offset:4px;
}
@media(max-width:650px){
 .app-shell .topbar{gap:clamp(3px,1.25vw,7px);padding-inline:clamp(9px,2.4vw,16px)}
 .app-shell .brand-line{margin-top:clamp(22px,3.2vh,31px)}
}
@media(max-width:355px){
 .app-shell .topbar{gap:3px;padding-inline:7px}
 .app-shell .topbar>.icon-button{flex-basis:37px;width:37px;height:40px}
 .app-shell .brand-line{margin-top:20px}
}
@media(prefers-reduced-motion:reduce){
 .app-shell .topbar>.icon-button{transition:none}
}

/* GNARLY native-inspired Queue. The engine stays intelligent; the sheet
   presents music first, not configuration forms, debug data or long prose. */
#sheet-content .smart-queue-panel.native-queue{
 margin:14px 0 14px;padding:0;
 border:0;border-radius:0;background:transparent;
}
#sheet-content .native-queue-top{
 display:flex;justify-content:space-between;align-items:center;
 margin-bottom:12px;gap:10px;
}
#sheet-content .native-queue-top>div{
 display:flex;align-items:center;gap:12px;flex-wrap:wrap;
}
#sheet-content .native-queue-name{
 display:inline-flex;align-items:center;gap:8px;
 font-size:clamp(17px,4.7vw,23px);letter-spacing:-.035em;
 font-weight:790;color:rgba(255,255,255,.96);
}
#sheet-content .native-queue-number{
 font-size:12px;font-weight:700;letter-spacing:0;
 display:grid;place-items:center;min-width:25px;height:23px;
 padding:0 6px;border-radius:13px;
 background:rgba(255,255,255,.14);color:#edf1f3;
}
#sheet-content .native-queue-auto{
 display:inline-flex;align-items:center;gap:7px;
 font-weight:650;font-size:11px;color:color-mix(in srgb,var(--acid) 52%,white);
 white-space:nowrap;
}
#sheet-content .native-queue-pulse{
 height:6px;width:6px;flex:0 0 6px;border-radius:50%;
 background:var(--acid);
 box-shadow:0 0 9px color-mix(in srgb,var(--acid) 44%,transparent);
}
#sheet-content .native-queue-actions{
 display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
 gap:8px;margin:0 0 13px;
}
#sheet-content .native-queue-action{
 display:flex;justify-content:center;align-items:center;
 gap:7px;min-width:0;min-height:45px;
 padding:10px 6px;
 border:1px solid rgba(245,245,251,.13);
 border-radius:17px;color:#f6f5f8;
 background:linear-gradient(145deg,rgba(255,255,255,.105),rgba(255,255,255,.045));
 font-size:clamp(11px,3.1vw,14px);
 font-weight:720;letter-spacing:-.005em;
 -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
 box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
 touch-action:manipulation;
}
#sheet-content .native-queue-action.primary{
 background:color-mix(in srgb,var(--acid) 70%,#252a2a);
 border-color:color-mix(in srgb,var(--acid) 65%,white);
 color:#11181c;
}
#sheet-content .native-queue-action span[aria-hidden]{font-size:18px;font-weight:800}
#sheet-content .native-queue-action:active{transform:scale(.975)}
#sheet-content .native-queue-action:focus-visible,
#sheet-content .native-queue-track:focus-visible,
#sheet-content .native-queue-remove:focus-visible{
 outline:2px solid var(--acid);outline-offset:2px;
}
#sheet-content .native-queue-action:disabled{opacity:.43;cursor:not-allowed}
#sheet-content .native-queue-status{
 font-size:12px;line-height:1.4;
 color:rgba(247,247,252,.7);margin:7px 3px 11px;
}
#sheet-content .native-queue-hint,
#sheet-content .native-queue-empty{
 padding:30px 18px;line-height:1.45;
 text-align:center;font-size:13px;
 color:rgba(238,239,244,.66);
 border:1px dashed rgba(255,255,255,.15);
 border-radius:18px;background:rgba(255,255,255,.025);
}
#sheet-content .native-queue-list{
 display:flex;flex-direction:column;gap:9px;
 padding-bottom:calc(14px + env(safe-area-inset-bottom,0px));
}
#sheet-content .native-queue-row{
 display:flex;align-items:center;min-width:0;gap:6px;
 padding:6px 7px 6px 8px;
 border:1px solid rgba(245,245,255,.09);
 border-radius:17px;
 background:linear-gradient(110deg,rgba(171,193,214,.14),rgba(159,142,182,.105));
 -webkit-backdrop-filter:blur(11px) saturate(112%);
 backdrop-filter:blur(11px) saturate(112%);
}
#sheet-content .native-queue-track{
 display:flex;align-items:center;flex:1 1 auto;gap:11px;
 min-width:0;padding:4px 0;
 background:transparent;text-align:left;border-radius:12px;
 color:rgba(255,255,255,.98);
}
#sheet-content .native-queue-track img{
 width:54px;height:54px;object-fit:cover;flex:0 0 54px;
 border-radius:11px;image-rendering:auto;
 background:rgba(255,255,255,.07);
}
#sheet-content .native-queue-track-info{
 min-width:0;flex:1;display:flex;flex-direction:column;gap:5px;
}
#sheet-content .native-queue-track-info strong{
 font-size:14px;line-height:1.23;font-weight:760;
 overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
#sheet-content .native-queue-track-info small{
 font-size:12px;color:rgba(242,240,248,.67);
 overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
#sheet-content .native-queue-offline{color:var(--acid);font-weight:730}
#sheet-content .native-queue-index{
 flex:0 0 23px;min-width:23px;
 color:rgba(242,242,245,.48);font-size:12px;
 text-align:center;
}
#sheet-content .native-queue-remove{
 flex:0 0 30px;width:30px;height:36px;
 display:grid;place-items:center;border-radius:10px;
 border:0;background:transparent;color:rgba(255,255,255,.54);
 font-size:23px;font-weight:300;
 touch-action:manipulation;
}
#sheet-content .native-queue-remove:active{
 background:rgba(255,255,255,.1);color:white;
}
@media(max-width:390px){
 #sheet-content .native-queue-top>div{gap:7px}
 #sheet-content .native-queue-actions{gap:5px}
 #sheet-content .native-queue-action{min-height:44px;gap:3px;padding:9px 3px}
 #sheet-content .native-queue-row{padding-inline:6px}
 #sheet-content .native-queue-track{gap:8px}
 #sheet-content .native-queue-track img{width:47px;height:47px;flex-basis:47px}
 #sheet-content .native-queue-track-info strong{font-size:13px}
 #sheet-content .native-queue-track-info small{font-size:11px}
 #sheet-content .native-queue-remove{flex-basis:26px;width:26px}
}
@media(prefers-reduced-motion:reduce){
 #sheet-content .native-queue-action{transition:none}
}

/* Local-first GNARLY library: keep existing search/queue compact, expose
 * on-device copies without turning the interface into a download manager. */
#sheet-content .offline-library-head{
 display:flex;flex-direction:column;gap:8px;margin:6px 0 14px;padding:17px;
 border-radius:19px;border:1px solid rgba(245,245,255,.14);
 background:linear-gradient(126deg,color-mix(in srgb,var(--acid) 10%,rgba(18,23,36,.78)),rgba(24,23,37,.76));
}
#sheet-content .offline-library-head strong{
 font-size:clamp(20px,5.5vw,26px);letter-spacing:-.035em;
}
#sheet-content .offline-library-kicker{
 font-size:10px;font-weight:800;letter-spacing:.19em;
 color:color-mix(in srgb,var(--acid) 68%,white);
}
#sheet-content .offline-library-summary{
 font-size:13px;font-weight:740;color:color-mix(in srgb,var(--acid) 65%,white);
}
#sheet-content .offline-library-head p{
 font-size:12px;line-height:1.45;color:rgba(245,242,255,.75);
 margin:2px 0;
}
#sheet-content .offline-library-head small{
 font-size:11px;line-height:1.4;color:rgba(234,235,241,.65);
}
#sheet-content .offline-row-button{
 flex:0 0 31px;min-height:38px;
 border:1px solid color-mix(in srgb,var(--acid) 38%,rgba(245,245,255,.16));
 border-radius:11px;background:color-mix(in srgb,var(--acid) 10%,rgba(20,20,28,.65));
 color:color-mix(in srgb,var(--acid) 66%,white);
 font-size:20px;font-weight:750;
 touch-action:manipulation;-webkit-tap-highlight-color:transparent;
}
#sheet-content .offline-row-button:disabled{opacity:.43;cursor:wait}
#sheet-content .offline-row-button:focus-visible{
 outline:2px solid var(--acid);outline-offset:2px;
}
@media(max-width:385px){
 #sheet-content .media-item .offline-row-button{flex-basis:29px;padding-inline:4px}
}

/* Timeline micro-save: visually 21px, touch target 32px, no player reflow. */
.progress-block{position:relative}
.duration-stack{display:inline-flex;position:relative;align-items:center;justify-content:flex-end}
#quick-playlist-button.quick-playlist-plus{
 position:absolute;right:0;bottom:calc(100% + 3px);
 height:28px;width:29px;min-width:29px;padding:0;
 display:grid;place-items:center;border:1px solid var(--acid);
 border-radius:10px;background:rgba(16,23,22,.72);
 -webkit-backdrop-filter:blur(9px);backdrop-filter:blur(9px);
 color:var(--acid);font-size:20px;line-height:1;font-weight:550;
 box-shadow:0 0 13px color-mix(in srgb,var(--acid) 17%,transparent);
 z-index:3;touch-action:manipulation;
 -webkit-tap-highlight-color:transparent;
}
#quick-playlist-button:disabled{opacity:.42}
#quick-playlist-button:focus-visible,.quick-playlist-popover button:focus-visible,
.quick-playlist-popover input:focus-visible{
 outline:2px solid var(--acid);outline-offset:2px
}
.quick-playlist-popover{
 position:absolute;z-index:21;right:0;
 bottom:calc(100% + 38px);
 width:min(325px,calc(100vw - 44px));
 max-height:min(350px,58dvh);overflow-y:auto;overscroll-behavior:contain;
 border-radius:19px;border:1px solid color-mix(in srgb,var(--acid) 34%,rgba(255,255,255,.22));
 padding:13px;background:rgba(15,19,25,.96);
 -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
 box-shadow:0 17px 50px #000a,0 0 20px color-mix(in srgb,var(--acid) 10%,transparent);
}
.quick-playlist-popover[hidden]{display:none!important}
.quick-playlist-header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:9px}
.quick-playlist-header strong{font-size:14px;letter-spacing:-.01em}
.quick-playlist-dismiss{
 width:29px;height:29px;border-radius:10px;color:white;
 background:rgba(255,255,255,.10);font-size:21px;
}
.quick-playlist-options{display:grid;gap:5px;max-height:155px;overflow-y:auto;scrollbar-width:thin}
.quick-playlist-options button{
 min-height:39px;padding:9px 11px;border-radius:11px;
 text-align:left;color:#fafafa;background:rgba(255,255,255,.07);
 border:1px solid rgba(255,255,255,.1);font-size:13px;
 overflow-wrap:anywhere;
}
.quick-playlist-options button.selected{
 border-color:color-mix(in srgb,var(--acid) 56%,white);
 background:color-mix(in srgb,var(--acid) 14%,rgba(20,23,27,.8));
}
.quick-playlist-create{margin-top:12px;display:grid;gap:6px}
.quick-playlist-create label{
 font-size:10px;letter-spacing:.1em;font-weight:770;color:rgba(255,255,255,.72);
}
.quick-playlist-create>div{display:flex;gap:6px}
.quick-playlist-create input{
 min-width:0;flex:1;max-width:100%;border:1px solid rgba(255,255,255,.2);
 border-radius:10px;padding:9px 8px;font-size:13px;color:white;background:#242830;
}
.quick-playlist-create button{
 flex:0 0 auto;padding:8px 9px;border:1px solid var(--acid);
 border-radius:10px;background:color-mix(in srgb,var(--acid) 22%,#1b2320);
 color:#fff;font-size:11px;font-weight:760;
}
.music-enable-studio{
 display:block;width:100%;min-height:43px;margin:12px 0 4px;
 padding:10px 12px;border-radius:13px;
 border:1px solid color-mix(in srgb,var(--acid) 50%,rgba(255,255,255,.24));
 background:color-mix(in srgb,var(--acid) 14%,rgba(19,23,28,.8));
 color:#fff;font-size:13px;font-weight:760;
}

.module-handle:focus-visible{outline:2px solid var(--module-tint,var(--acid));outline-offset:-4px;border-radius:inherit}
@media(hover:hover){.module-handle:hover{background:rgba(255,255,255,.035)}}


/* GNARLY stylesheet: ipod-mode.css */
/* GNARLY Hardware Studio. Every rule is confined to the iPod or its editor. */
#ipod-device[hidden],#ipod-shell-image[hidden]{display:none!important}
#ipod-device{display:none}
.app-shell[data-player-surface-mode="ipod"] #player-section.player{
 width:min(84vw,408px)!important;max-width:408px!important;min-width:0;aspect-ratio:.61;
 height:auto!important;padding:0!important;margin:26px auto 34px!important;border:0!important;
 border-radius:0!important;overflow:visible!important;box-shadow:none!important;
 background:transparent!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;isolation:isolate;
}
.app-shell[data-player-surface-mode="ipod"] #player-section.player::before,
.app-shell[data-player-surface-mode="ipod"] #player-section.player::after{display:none!important}
.app-shell[data-player-surface-mode="ipod"] #player-section>:not(#ipod-device):not(#player-surface-menu):not(#youtube-player-dialog){display:none!important}
.app-shell[data-player-surface-mode="ipod"] #ipod-device{position:absolute;inset:0;width:100%;height:100%;display:block!important}
.gnarly-ipod{
 --ipod-body:#c3cdcf;--ipod-frame:#c4ced1;--ipod-wheel:#263038;--ipod-center:#1a2128;
 --ipod-bezel:#171c22;--ipod-labels:#e9ede5;--ipod-center-label:#e9ede5;--ipod-brand:#384a4c;
 --ipod-base:#c3cdcf;--ipod-pattern:none;--ipod-pattern-size:36%;--ipod-pattern-position:50% 50%;
 --ipod-rotation:0deg;--ipod-texture:.55;--ipod-finish:.65;--ipod-print-contrast:1;
 --ipod-tint:#e4f2ee10;--ipod-sheen:linear-gradient(112deg,#fff6 0%,#fff0 23%,#fff2 47%,#fff0 68%,#0002 100%);
 --ipod-grain:repeating-linear-gradient(0deg,#fff2 0 .45px,#0001 .6px 1px,transparent 1px 2px);
 --ipod-body-alpha:1;--ipod-internal-alpha:0;--ipod-grain-strength:.5;
 position:relative;isolation:isolate;border-radius:clamp(25px,5vw,34px);aspect-ratio:.61;
 -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;touch-action:pan-y;
}
.gnarly-ipod::after{content:"";position:absolute;left:9%;right:9%;bottom:-1.8%;height:3%;z-index:-2;border-radius:50%;background:#0009;filter:blur(10px);pointer-events:none}
.gnarly-ipod .ipod-shell-base{position:absolute;inset:0;border-radius:inherit;z-index:0;
 background:linear-gradient(100deg,#fafdfa 0%,var(--ipod-frame) 5%,#718084 12%,var(--ipod-frame) 28%,#ecf4f1 52%,var(--ipod-frame) 73%,#7f9094 96%,#fff 100%);
 border:1px solid #d5e2e0;
 box-shadow:0 2px 1px #0008,0 10px 0 -5px #273533,0 22px 28px -12px #0008,0 48px 60px -15px #0008,inset 0 1px 1px #fff;
}
.gnarly-ipod .ipod-shell-base::before{content:"";position:absolute;inset:1.5% -.35% -1.35%;border-radius:inherit;z-index:-1;
 background:linear-gradient(95deg,#657470,#e2eae6 4%,#788581 10%,#273333 50%,#aab7b5 91%,#e3ede8 97%,#64706f);box-shadow:inset 0 -2px 3px #000a,0 4px 3px #0005}
.gnarly-ipod .ipod-body{position:absolute;inset:1.05%;border-radius:inherit;overflow:hidden;background:#334945;
 box-shadow:0 0 0 1px #ffffff65,inset 0 0 0 1px #0003,inset 0 4px 6px #fff8}
.gnarly-ipod .ipod-color,.gnarly-ipod .ipod-print,.gnarly-ipod .ipod-micro,.gnarly-ipod .ipod-light,.gnarly-ipod .ipod-internals{position:absolute;inset:0;pointer-events:none;border-radius:inherit}
.gnarly-ipod .ipod-color{background:var(--ipod-base);opacity:var(--ipod-body-alpha)}
.gnarly-ipod .ipod-print{inset:-50%;border-radius:0;background-image:var(--ipod-pattern);background-size:var(--ipod-pattern-size);background-position:var(--ipod-pattern-position);transform:var(--ipod-print-transform,none);opacity:.85;filter:var(--ipod-print-filter,none)}
.gnarly-ipod .ipod-micro{background-image:var(--ipod-grain);opacity:calc(var(--ipod-texture) * var(--ipod-grain-strength));mix-blend-mode:normal}
/* Cache the static light field separately from frequent color/print repaints.
   One bounded overlay per visible device; the isolated paint probe justifies it. */
.gnarly-ipod .ipod-light{will-change:opacity;background:var(--ipod-sheen);opacity:calc(.24 + var(--ipod-finish) * .76);box-shadow:inset 0 2px 4px #fffc,inset 2px 0 8px #fff7,inset -3px 0 6px #0002,inset 0 -9px 18px #0003}
.gnarly-ipod .ipod-light::after{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(ellipse at 35% -12%,#fff7,transparent 55%),linear-gradient(var(--ipod-tint),var(--ipod-tint));box-shadow:inset 0 0 0 1px #fff4}
.gnarly-ipod .ipod-internals{opacity:var(--ipod-internal-alpha);background:
 repeating-linear-gradient(90deg,transparent 0 22px,#c9f2bc42 23px 24px,transparent 25px 48px),
 repeating-linear-gradient(0deg,#263e38 0 37px,#8db79866 38px 39px,#263e38 40px 63px);}
.gnarly-ipod .ipod-internals::before{content:"GNL / SIGNAL BOARD 072";position:absolute;left:8%;right:8%;bottom:3%;height:38%;padding:8%;border:1px solid #f4ffe488;border-radius:13px;background:
 linear-gradient(90deg,#ced7bb 2px,transparent 2px) 0 0/11px 100%,linear-gradient(#243a33,#22352e);box-shadow:inset 0 0 0 7px #274638,inset 0 0 0 8px #d6efab66;color:#d2e4c0;font:8px/1.6 monospace;letter-spacing:.13em}
.gnarly-ipod .ipod-internals::after{content:"";position:absolute;top:52%;left:13%;width:19%;height:9%;border-radius:5px;border:3px solid #384942;background:repeating-linear-gradient(0deg,#111e1c 0 3px,#93a78b 3px 4px);box-shadow:128px 32px 0 -9px #d8e8ba,156px -12px 0 -10px #1c2924}
/* Material response changes the light field, microstructure and transmissivity. */
.gnarly-ipod[data-ipod-material="polished"]{--ipod-sheen:linear-gradient(117deg,#fff9 0%,#fff1 19%,#0002 39%,#ffffff85 47%,#fff2 54%,#0002 78%,#fff7);--ipod-grain-strength:.2}
.gnarly-ipod[data-ipod-material="chrome"]{--ipod-sheen:linear-gradient(110deg,#ffffffcf 0%,#eff8ff60 15%,#1b2d4380 29%,#e4f3ffb0 36%,#fff8 41%,#28374880 49%,#789aaf38 58%,#ffffffc0 64%,#fff2 70%,#0c192e65 87%,#fff9);--ipod-grain:none}
.gnarly-ipod[data-ipod-material="anodized"]{--ipod-sheen:linear-gradient(118deg,#fff5,transparent 34%,#0002 64%,#fff2 88%,#0003);--ipod-grain:repeating-linear-gradient(90deg,#fff3 0 .45px,transparent .7px 2px);--ipod-grain-strength:.45}
.gnarly-ipod[data-ipod-material="gloss"]{--ipod-sheen:linear-gradient(120deg,#ffffffb0,transparent 24%,transparent 50%,#fff6 52%,#fff1 62%,#0002 91%);--ipod-grain:none}
.gnarly-ipod[data-ipod-material="soft"]{--ipod-sheen:radial-gradient(ellipse at 26% 0%,#fff3,transparent 68%),linear-gradient(110deg,#fff1,#0002);--ipod-grain:repeating-conic-gradient(#ffffff35 0 25%,transparent 0 50%);--ipod-grain-strength:.45}
.gnarly-ipod[data-ipod-material="soft"] .ipod-micro{background-size:3px 3px}
.gnarly-ipod[data-ipod-material="acrylic"]{--ipod-body-alpha:.53;--ipod-internal-alpha:1;--ipod-grain:none;--ipod-sheen:linear-gradient(120deg,#fff7,transparent 23%,#fff1 56%,#fffa 58%,#fff1 65%,#0002)}
.gnarly-ipod[data-ipod-material="frost"]{--ipod-body-alpha:.82;--ipod-internal-alpha:.5;--ipod-grain:repeating-conic-gradient(#ffffff55 0 25%,transparent 0 50%);--ipod-grain-strength:.9;--ipod-sheen:radial-gradient(ellipse at 25% 0,#fff7,transparent 78%)}
.gnarly-ipod[data-ipod-material="frost"] .ipod-micro{background-size:2px 3px}
.gnarly-ipod[data-ipod-material="carbon"]{--ipod-grain:repeating-linear-gradient(45deg,#fff3 0 1px,transparent 1px 4px),repeating-conic-gradient(#020c1470 0 25%,#a9bdc240 0 50%);--ipod-grain-strength:1;--ipod-sheen:linear-gradient(119deg,#fff6,transparent 28%,#0003 48%,#fff3 65%,#0002)}
.gnarly-ipod[data-ipod-material="carbon"] .ipod-micro{background-size:auto,12px 12px;mix-blend-mode:normal}
.gnarly-ipod[data-ipod-material="ceramic"]{--ipod-grain:none;--ipod-sheen:radial-gradient(ellipse at 27% 0,#fff8,transparent 58%),linear-gradient(90deg,#fff7,#fff0 8% 93%,#0003)}
.gnarly-ipod[data-ipod-material="rubber"]{--ipod-grain:radial-gradient(circle,#000b 0 1px,transparent 1.4px);--ipod-grain-strength:.9;--ipod-sheen:radial-gradient(ellipse at 30% 0,#fff2,transparent 68%),linear-gradient(100deg,transparent,#0003)}
.gnarly-ipod[data-ipod-material="rubber"] .ipod-micro{background-size:5px 5px;mix-blend-mode:normal}
.gnarly-ipod[data-ipod-material="pearl"]{--ipod-grain:none;--ipod-sheen:radial-gradient(ellipse at 10% 12%,#ffe2caa0,transparent 65%),radial-gradient(ellipse at 95% 68%,#96cfe478,transparent 64%),linear-gradient(117deg,#fff8,#efd7e344 40%,#d6ecdd8c 70%,#fff8)}
.gnarly-ipod[data-ipod-material="holo"]{--ipod-grain:repeating-linear-gradient(125deg,#fff4 0 .4px,transparent .8px 3px);--ipod-grain-strength:.5;--ipod-sheen:linear-gradient(128deg,#eeafd6a0,#b4dff78c 19%,#d5edaa99 34%,#f3d2b699 48%,#a0a5e3a0 62%,#cfecef90 76%,#eeb3dd90)}
.gnarly-ipod[data-ipod-material="leather"]{--ipod-grain:repeating-conic-gradient(from 25deg,#0006 0 4%,transparent 5% 22%,#fff5 23% 25%,transparent 26% 50%);--ipod-grain-strength:.9;--ipod-sheen:radial-gradient(ellipse at 28% 8%,#fff3,transparent 65%),linear-gradient(110deg,transparent,#0003)}
.gnarly-ipod[data-ipod-material="leather"] .ipod-micro{background-size:7px 9px;mix-blend-mode:normal}
.gnarly-ipod[data-ipod-material="leather"] .ipod-body::after{content:"";position:absolute;inset:2.6%;border:1px dashed #eadbc36e;border-radius:23px;pointer-events:none}
.gnarly-ipod[data-ipod-frame="dark"] .ipod-shell-base{background:linear-gradient(95deg,#0b151a,#7b8b8d 4%,#202e31 10%,#344449 60%,#152328 94%,#8b9694);border-color:#657674}
.gnarly-ipod[data-ipod-frame="brushed"] .ipod-shell-base{background:repeating-linear-gradient(0deg,#fff3 0 1px,transparent 1px 3px),linear-gradient(90deg,var(--ipod-frame),#e7eeea,var(--ipod-frame));border-color:var(--ipod-frame)}
.gnarly-ipod[data-ipod-frame="color"] .ipod-shell-base{background:linear-gradient(95deg,#fff4,var(--ipod-frame) 8% 80%,#0004),var(--ipod-frame);border-color:var(--ipod-frame)}
.gnarly-ipod .ipod-shell-image{position:absolute;inset:1.05%;width:97.9%;height:97.9%;object-fit:cover;border-radius:inherit;z-index:1;pointer-events:none;image-rendering:auto}
.gnarly-ipod[data-hardware-active="true"] .ipod-shell-image{display:none!important}
/* Legacy images remain readable; their decorative art can never hide controls. */
.gnarly-ipod.has-skin:not([data-hardware-active="true"]) .ipod-fallback-brand{opacity:0}
.gnarly-ipod .ipod-screen{
 position:absolute;top:5.3%;left:8.6%;width:82.8%;height:43.8%;border-radius:13px;z-index:3;overflow:hidden;isolation:isolate;
 background:radial-gradient(ellipse at 35% 15%,#263839,#080e12 78%);border:5px solid var(--ipod-bezel);
 box-shadow:0 0 0 1px #ffffff88,0 0 0 2px #0005,0 4px 8px #0005,inset 0 0 14px #000c;
}
.gnarly-ipod .ipod-screen::after{content:"";position:absolute;inset:0;z-index:4;pointer-events:none;border-radius:8px;background:linear-gradient(119deg,#fff3,transparent 29%,transparent 68%,#fff1 69%,transparent 71%);box-shadow:inset 0 1px 2px #fff4,inset 0 0 7px #0007}
/* Full-bleed album art: source pixel count affects quality diagnostics,
   not its CSS display size. Do not letterbox tiny images on high-DPR iPhones. */
.gnarly-ipod .ipod-screen>img{
 position:absolute;inset:0;width:100%;height:100%;
 display:block;max-width:none;max-height:none;
 object-fit:cover;object-position:center center;image-rendering:auto;
}
.gnarly-ipod .ipod-screen-scrim{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,#07101b15,transparent 34%,#020a12a6 65%,#020912f5)}
.gnarly-ipod .ipod-screen-copy{position:absolute;left:6%;right:6%;bottom:5.5%;z-index:2;display:flex;flex-direction:column;gap:3px;color:#fff;min-width:0;text-shadow:0 1px 3px #000b}
.gnarly-ipod .ipod-screen-source{font:700 clamp(8px,1.6vw,10px)/1.5 -apple-system,BlinkMacSystemFont,sans-serif;letter-spacing:.16em;color:#e3efd5}
.gnarly-ipod .ipod-screen-copy strong{font-size:clamp(15px,4vw,23px);font-weight:760;line-height:1.16;letter-spacing:-.025em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gnarly-ipod .ipod-screen-copy small{font-size:clamp(10px,2.5vw,14px);opacity:.82;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gnarly-ipod .ipod-screen-time{display:flex;justify-content:space-between;margin-top:5px;font:600 10px/1.4 monospace;letter-spacing:.02em;font-variant-numeric:tabular-nums;color:#d6e3d5}
.gnarly-ipod .ipod-screen-progress{height:3px;overflow:hidden;border-radius:4px;background:#ffffff38;margin-top:1px}
.gnarly-ipod .ipod-screen-progress>span{display:block;width:0;height:100%;background:#e8f3d7;background:color-mix(in srgb,var(--acid) 24%,#f0f5e9);border-radius:inherit;box-shadow:0 0 4px #fff5}
.gnarly-ipod .ipod-fallback-brand{position:absolute;top:51.3%;left:8.8%;z-index:2;pointer-events:none;color:var(--ipod-brand);font:italic 900 clamp(21px,5vw,30px)/1 Impact,Haettenschweiler,'Arial Narrow Bold',sans-serif;letter-spacing:-.065em;text-shadow:0 1px 0 #ffffff70}
.gnarly-ipod .ipod-edition{position:absolute;top:51.8%;right:9%;z-index:2;pointer-events:none;color:var(--ipod-brand);text-align:right;font:700 7px/1.5 monospace;letter-spacing:.13em;opacity:.8}
.gnarly-ipod .ipod-wheel{position:absolute;left:19.5%;top:58%;width:61%;aspect-ratio:1;z-index:4;border-radius:50%;
 background:radial-gradient(ellipse at 30% 5%,#fff2,transparent 65%),conic-gradient(from -35deg,transparent,#ffffff12 55deg,#00000016 130deg,#ffffff12 190deg,#00000012 270deg,transparent),var(--ipod-wheel);
 border:1px solid #0009;box-shadow:0 -1px 2px #0007,0 1px 1px #ffffffb0,0 0 0 3px #0002,inset 0 2px 5px #ffffff28,inset 0 -3px 5px #0005;
}
.gnarly-ipod .ipod-wheel::before{content:"";position:absolute;inset:-4px;border:1px solid #fff4;border-bottom-color:#0002;border-radius:50%;pointer-events:none}
.gnarly-ipod .ipod-wheel::after{content:"";position:absolute;inset:29%;border-radius:50%;background:#050a0c;box-shadow:0 1px 1px #ffffff80,0 -1px 4px #0007;pointer-events:none}
.gnarly-ipod .ipod-wheel button{position:absolute;z-index:2;display:grid;place-items:center;min-width:44px;min-height:44px;border:0;background:transparent;color:var(--ipod-labels);cursor:pointer;font-weight:800;text-shadow:0 1px 1px #0002;touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:transform .1s,background-color .1s}
.gnarly-ipod .ipod-wheel .icon{width:21px;height:21px;opacity:1;visibility:visible;stroke:currentColor}
.gnarly-ipod .ipod-wheel button:focus-visible{outline:2px solid var(--acid);outline-offset:-3px;border-radius:50%}
.gnarly-ipod .ipod-wheel button:active{transform:translateY(1px);background:#ffffff0c;border-radius:50%}
.gnarly-ipod .ipod-wheel button:disabled{opacity:.4;cursor:default}
.gnarly-ipod .ipod-wheel-menu{left:28%;top:0;width:44%;height:28%;font-size:11px;letter-spacing:.09em}
.gnarly-ipod .ipod-wheel-prev{left:0;top:31%;width:29%;height:38%}
.gnarly-ipod .ipod-wheel-next{right:0;top:31%;width:29%;height:38%}
.gnarly-ipod .ipod-wheel-play{left:28%;bottom:0;width:44%;height:28%}
.gnarly-ipod .ipod-wheel .ipod-wheel-center{inset:32%;width:36%;height:36%;border-radius:50%;color:var(--ipod-center-label);background:radial-gradient(ellipse at 28% 0,#ffffff24,transparent 85%),var(--ipod-center);border:1px solid #ffffff35;box-shadow:inset 0 1px 2px #fff3,inset 0 -2px 3px #0009,0 2px 3px #0007;font:italic 900 clamp(23px,6vw,36px)/1 Impact,sans-serif;text-shadow:0 1px 1px #0005}
.gnarly-ipod .ipod-wheel .ipod-wheel-center:active{box-shadow:inset 0 2px 4px #0009,0 0 0 1px #0004;transform:translateY(1px)}
.gnarly-ipod .ipod-port{position:absolute;bottom:.65%;left:43%;width:14%;height:.65%;border-radius:8px;z-index:5;background:#182826;box-shadow:0 1px 1px #fff6,inset 0 1px 2px #000}
.gnarly-ipod .ipod-rivet{position:absolute;bottom:2%;width:1.2%;height:.7%;border-radius:50%;background:radial-gradient(circle at 30% 20%,#fff,var(--ipod-frame) 50%,#32413c);box-shadow:0 1px 1px #0006;z-index:5}
.gnarly-ipod .ipod-rivet.left{left:8%}.gnarly-ipod .ipod-rivet.right{right:8%}
.app-shell[data-player-surface-mode="ipod"] #player-surface-menu{z-index:30!important;position:absolute!important;top:14%!important;left:10%!important;right:auto!important;bottom:auto!important;width:80%!important;max-height:65%!important;background:#101a1bf5;border-color:#ffffff40;overflow-y:auto}
.app-shell[data-player-surface-mode="ipod"] #player-surface-menu .player-surface-option{min-height:44px;padding:9px 12px;font-size:13px}
.app-shell[data-player-surface-mode="ipod"] #player-surface-menu .ipod-customize-option{border-top:1px solid #ffffff24;color:#d7f4b4;font-weight:750}
/* Lazy native dialog: the SAME device is moved here, never cloned. */
.ipod-studio{--studio-accent:#d7f7a4;color:#e8ece3;background:#111815;border:1px solid #b8c9a345;border-radius:23px;padding:0;width:min(1060px,calc(100vw - 40px));max-width:none;height:min(850px,calc(100dvh - 40px));max-height:none;box-shadow:0 35px 120px #000c;overflow:hidden;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif}
.ipod-studio::backdrop{background:#050a08d9}
.ipod-studio *{box-sizing:border-box}
.ipod-studio button,.ipod-studio input,.ipod-studio select{font:inherit}
.ipod-studio button{cursor:pointer;color:inherit}
.ipod-studio-header{height:79px;display:flex;align-items:center;justify-content:space-between;padding:18px 26px;gap:12px;border-bottom:1px solid #c9dab018}
.ipod-studio-eyebrow{font-size:9px;font-weight:800;letter-spacing:.22em;color:#adb99e;display:block;margin-bottom:5px}
.ipod-studio h2{margin:0;font-size:20px;font-weight:650;letter-spacing:-.04em}
.ipod-studio-close{background:#ffffff0a;border:1px solid #ffffff1f;width:38px;height:38px;border-radius:50%;font-size:24px;font-weight:300;flex-shrink:0}
.ipod-studio-main{display:grid;grid-template-columns:minmax(270px,45%) minmax(0,1fr);height:calc(100% - 79px);min-height:0}
.ipod-studio-stage{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:25px;background:radial-gradient(ellipse at 50% 35%,#b9c2ac24,transparent 65%),linear-gradient(135deg,#384039,#202824 70%);position:relative;isolation:isolate;padding:25px 24px 30px;overflow:auto;border-right:1px solid #dae7c517}
.ipod-studio-stage::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.12;background:repeating-linear-gradient(0deg,#fff2 0 .5px,transparent .5px 3px);z-index:-1}
.ipod-studio-preview{width:min(100%,330px);flex-shrink:0}
.ipod-studio-preview #ipod-device{display:block!important;position:relative;inset:auto;width:100%;height:auto;aspect-ratio:.61}
.ipod-studio-caption{color:#c2cbb7;font-size:10px;letter-spacing:.12em;text-align:center;line-height:1.8}
.ipod-studio-caption strong{color:#f0f4e4;font-weight:600}
.ipod-studio-controls{overflow:auto;overscroll-behavior:contain;min-width:0;padding:22px 24px 30px;scrollbar-width:thin;scrollbar-color:#69765b #18201a}
.ipod-studio-subtitle{font-size:12px;line-height:1.7;color:#abb5a3;margin:0 0 18px}
.ipod-studio-mode{display:flex;gap:3px;padding:4px;background:#070f0a;border:1px solid #bacb9a1c;border-radius:10px;margin-bottom:22px}
.ipod-studio-mode button{flex:1;min-height:34px;background:none;border:0;border-radius:7px;font-size:11px;color:#9ea992}
.ipod-studio-mode button[aria-pressed="true"]{color:#e7f7d3;background:#405137;box-shadow:0 1px 3px #0004}
.ipod-studio-section{border:0;border-top:1px solid #c5d7a51c;margin:22px 0 0;padding:19px 0 0;min-width:0}
.ipod-studio-section legend{padding:0 9px 0 0;font-size:10px;font-weight:800;letter-spacing:.12em;color:#dce8cd}
.ipod-studio-section>p{font-size:11px;line-height:1.65;color:#9daa92;margin:0 0 12px}
.ipod-studio-presets{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.ipod-design-card{background:none;border:1px solid transparent;border-radius:10px;padding:7px 4px 5px;text-align:center;min-width:0}
.ipod-design-card[aria-pressed="true"]{background:#d7f7a40a;border-color:#b5d28b9c}
.ipod-design-card span:last-child{display:block;font-size:9px;line-height:1.3;min-height:24px;color:#c0cdb3;margin-top:7px;overflow-wrap:anywhere}
.ipod-design-mini{display:block;position:relative;width:42px;height:68px;margin:0 auto;border:2px solid var(--mini-frame,#b8c3be);border-radius:6px;background:var(--mini-print,none) center/60%,var(--mini-base,#c3cdcf);box-shadow:inset 0 1px 2px #fff9,0 4px 9px #0005}
.ipod-design-mini::before{content:"";position:absolute;left:10%;top:5%;width:80%;height:43%;border:2px solid #222b28;border-radius:3px;background:linear-gradient(130deg,#49584b,#0d1a14)}
.ipod-design-mini::after{content:"";position:absolute;left:22%;top:59%;width:56%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,var(--mini-center,#18231f) 0 27%,#fff1 29% 32%,var(--mini-wheel,#34453a) 34% 100%);box-shadow:inset 0 1px 2px #fff4,0 1px 2px #0005}
.ipod-studio label{font-size:11px;display:block;color:#c0ccb2;line-height:1.5;min-width:0}
.ipod-studio input[type="text"],.ipod-studio input[type="number"],.ipod-studio select{min-height:39px;padding:8px 10px;color:#eef4e4;background:#0b130e;border:1px solid #b1c28b30;border-radius:7px;width:100%;margin:5px 0 10px;min-width:0;outline-offset:2px}
.ipod-studio select{color-scheme:dark}
.ipod-studio input:focus-visible,.ipod-studio select:focus-visible,.ipod-studio button:focus-visible{outline:2px solid #d6f99c;outline-offset:2px}
.ipod-studio input[type="range"]{width:100%;accent-color:#c9e6a4;margin:10px 0 8px;height:22px;cursor:pointer}
.ipod-studio input[type="color"]{width:37px;height:34px;border:0;padding:0;border-radius:5px;cursor:pointer;background:none;flex-shrink:0}
.ipod-studio input[type="color"]::-webkit-color-swatch-wrapper{padding:0}
.ipod-studio input[type="color"]::-webkit-color-swatch{border:1px solid #c2d5a352;border-radius:5px}
.ipod-studio-palette{display:flex;flex-wrap:wrap;gap:7px;margin:3px 0 13px}
.ipod-studio-palette button{width:25px;height:25px;border:1px solid #ffffff50;border-radius:50%;background:var(--swatch);box-shadow:inset 0 1px 2px #fff3;position:relative}
.ipod-studio-palette button[aria-pressed="true"]::after{content:"";position:absolute;inset:-4px;border:1px solid #c9e6a4;border-radius:50%}
.ipod-studio-color{display:flex;align-items:center;gap:8px;margin-bottom:9px}
.ipod-studio-color input[type="text"]{margin:0;max-width:115px;min-height:34px;font-size:11px;font-family:monospace;text-transform:uppercase}
.ipod-studio-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 14px}
.ipod-studio-grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.ipod-studio-label{display:flex;align-items:center;justify-content:space-between;gap:5px;font-size:11px;color:#bdcbb0}
.ipod-studio-label output{color:#f2f7e9;font:10px monospace;flex-shrink:0}
.ipod-studio-patterns{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
.ipod-pattern-card{min-width:0;border:1px solid #afc09320;border-radius:7px;background:#ffffff03;padding:5px 3px;font-size:8px;color:#acb99c}
.ipod-pattern-card i{display:block;height:36px;border-radius:4px;margin-bottom:5px;background:var(--sample-print,none) center/75%,var(--sample-base,#50604b)}
.ipod-pattern-card[aria-pressed="true"]{border-color:#c1dc96;background:#c1dc9610;color:#eef6dd}
.ipod-studio-small-head{font-size:10px;margin:17px 0 8px;color:#d4dfc5;font-weight:600}
.ipod-studio-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:13px}
.ipod-studio-actions button,.ipod-studio-save button,.ipod-user-design button{border:1px solid #afc38c40;background:#ffffff06;border-radius:7px;padding:9px 12px;font-size:11px;min-height:38px}
.ipod-studio-actions button.primary,.ipod-studio-save button{background:#cde5ac;color:#162415;font-weight:700;border-color:#cde5ac}
.ipod-studio-save{display:flex;align-items:center;gap:8px}
.ipod-studio-save input[type="text"]{margin:0;flex:1;min-width:0}
.ipod-studio-save button{flex-shrink:0}
.ipod-user-design{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:6px;margin-top:7px}
.ipod-user-design button{min-width:0;font-size:10px;padding:7px 9px}
.ipod-user-design button:first-child{text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ipod-studio-status{font-size:11px;line-height:1.5;color:#d7e5bf;min-height:16px;margin:12px 0 0}
.ipod-studio-status:empty{display:none}
.ipod-studio-note{font-size:10px!important;color:#8e9d83!important;line-height:1.6}
.ipod-studio [hidden]{display:none!important}
@media(max-width:700px){
 .ipod-studio{width:100%;height:100dvh;max-height:100dvh;border-radius:0;border:0;margin:0;max-width:100vw;inset:0}
 .ipod-studio-header{height:75px;padding:calc(10px + env(safe-area-inset-top,0px)) 20px 12px}
 .ipod-studio h2{font-size:19px}
 .ipod-studio-main{display:block;height:calc(100% - 75px);overflow:auto;overscroll-behavior:contain}
 .ipod-studio-stage{border-right:0;border-bottom:1px solid #d5e9be21;padding:25px 30px 29px;gap:22px;overflow:visible}
 .ipod-studio-preview{width:min(75vw,286px);min-width:230px}
 .ipod-studio-controls{overflow:visible;padding:23px 20px calc(34px + env(safe-area-inset-bottom,0px))}
 .ipod-studio-presets{grid-template-columns:repeat(5,minmax(0,1fr));gap:5px}
 .ipod-design-card{padding:7px 2px 4px}
 .ipod-design-card span:last-child{font-size:8px}
 .ipod-studio-grid.three{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:360px){
 .app-shell[data-player-surface-mode="ipod"] #player-section.player{width:88vw!important}
 .ipod-studio-stage{padding-inline:20px}
 .ipod-studio-presets{grid-template-columns:repeat(4,minmax(0,1fr))}
 .ipod-studio-patterns{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media(prefers-reduced-motion:reduce){
 .gnarly-ipod *,.ipod-studio *{transition:none!important;animation:none!important;scroll-behavior:auto!important}
}
.ipod-studio-tabs{position:sticky;top:-1px;z-index:6;display:flex;gap:3px;padding:0 0 14px;margin-bottom:17px;background:#111815;border-bottom:1px solid #bacd9b20}
.ipod-studio-tabs button{flex:1;padding:8px 4px;min-height:38px;border:0;border-radius:6px;font-size:10px;background:none;color:#9ba98f;white-space:nowrap}
.ipod-studio-tabs button[aria-selected="true"]{background:#d4e8ac12;color:#e1efcb;box-shadow:inset 0 -2px #c5df9e}
.ipod-studio-reset{margin-top:26px;padding-top:17px;border-top:1px solid #b8c69e18}
.ipod-studio{position:fixed;inset:0;margin:auto;z-index:10001}
.ipod-studio:not([open]){display:none}
.ipod-studio-backdrop{position:fixed;inset:0;z-index:10000;background:#050a08e6}
.ipod-studio-controls{scroll-padding-top:75px}
.ipod-design-card,.ipod-pattern-card{scroll-margin-top:75px}
.ipod-studio-stage{justify-content:flex-start}
.ipod-studio-preview{margin-top:auto}
.ipod-studio-caption{margin-bottom:auto}
.gnarly-ipod .ipod-internals::before{display:flex;align-items:flex-end;justify-content:center;padding:10px 5px;font-size:6px}
/* A noninteractive material proof keeps edits visible on short phone screens.
   The full preview above still contains the only functional iPod and controls. */
.ipod-studio-mini-live{display:none}
@media(max-width:700px){
 .ipod-studio-header{height:calc(75px + env(safe-area-inset-top,0px))}
 .ipod-studio-main{height:calc(100% - 75px - env(safe-area-inset-top,0px))}
 .ipod-studio input[type="text"],.ipod-studio input[type="number"],.ipod-studio select{font-size:16px}
 .ipod-studio-mini-live{display:flex;gap:20px;align-items:center;position:sticky;top:0;z-index:8;height:126px;margin:-5px 0 18px;padding:10px 0 12px;background:#111815;border-bottom:1px solid #b8cd9628}
 .ipod-studio-mini-live strong{display:block;font-size:12px;color:#e7f0db;font-weight:650}
 .ipod-studio-mini-live span{display:block;font-size:10px;color:#9cab90;line-height:1.6;margin-top:4px}
 .ipod-studio-mini-live button{display:block;border:0;background:none;color:#c7e4a0;font-size:10px;padding:8px 0;margin-top:4px;min-height:32px}
 .ipod-studio-mini{position:relative;width:60px;min-width:60px;height:98px;border-radius:6px;pointer-events:none;aspect-ratio:.61}
 .ipod-studio-mini::after{filter:blur(3px)}
 .ipod-studio-mini .ipod-screen{border-width:1px;border-radius:3px;box-shadow:0 0 0 .5px #ffffff65}
 .ipod-studio-mini .ipod-screen::after{border-radius:2px}
 .ipod-studio-mini .ipod-fallback-brand{font-size:6px}
 .ipod-studio-mini .ipod-internals::before{font-size:0;border-width:.5px;padding:1px;box-shadow:none;border-radius:3px}
 .ipod-studio-mini .ipod-wheel{box-shadow:0 0 0 .5px #ffffff78,inset 0 1px 2px #0006;border-width:.5px}
 .ipod-studio-mini .ipod-wheel::before{inset:-1px;border-width:.5px}
 .ipod-studio-mini .ipod-mini-center{position:absolute;inset:32%;border-radius:50%;background:var(--ipod-center);box-shadow:inset 0 .5px 1px #fff5;z-index:2}
 .ipod-studio-tabs{top:126px}
 .ipod-studio-controls{scroll-padding-top:205px}
}
@media(max-width:700px){
 .ipod-studio-close{width:44px;height:44px}
 .ipod-studio-mode button,.ipod-studio-tabs button{min-height:44px}
 .ipod-studio-tabs button{min-width:0;white-space:normal;line-height:1.3}
 .ipod-studio input[type="text"],.ipod-studio input[type="number"],.ipod-studio select{min-height:44px}
 .ipod-studio input[type="color"]{width:44px;height:44px}
 .ipod-studio input[type="range"]{height:32px}
 .ipod-studio-actions button,.ipod-studio-save button,.ipod-user-design button{min-height:44px}
 .ipod-studio-palette button{width:44px;height:44px;border:8px solid #111815}
}

.gnarly-ipod .ipod-body{contain:paint}
.gnarly-ipod[data-ipod-pattern="none"] .ipod-print{display:none}
.ipod-studio input[aria-invalid="true"]{border-color:#d58e86}

/* A source change does not erase the user's iPod selection. While the
   official source is active, use a compliant visible player card; returning
   to native audio restores the precise original iPod shell automatically. */
.app-shell[data-audio-provider="youtube-official"][data-player-surface-mode="ipod"] #player-section.player{
 width:min(100%,590px)!important;max-width:590px!important;
 aspect-ratio:auto!important;height:auto!important;min-height:0!important;
 padding:14px!important;margin:18px auto 24px!important;
 border-radius:27px!important;overflow:visible!important;
 background:linear-gradient(155deg,rgba(14,26,22,.91),rgba(5,13,13,.94))!important;
 border:1px solid rgba(255,255,255,.15)!important;
 box-shadow:0 25px 80px rgba(0,0,0,.27)!important;
}
.app-shell[data-audio-provider="youtube-official"][data-player-surface-mode="ipod"] #player-section #ipod-device{display:none!important}
.app-shell[data-audio-provider="youtube-official"][data-player-surface-mode="ipod"] #player-section > #youtube-player-dialog{display:block!important}


/* GNARLY stylesheet: cover-charge.css */
/* GNARLY SIGNAL FILL — opt-in, compositor-only loading treatment.
 * Visual activity, never an estimate of download or extraction percentage.
 * Keeps the verified album artwork visible behind a refractive acid wash.
 */
.gnarly-cover-charge{
 position:absolute;inset:0;z-index:3;overflow:hidden;border-radius:inherit;
 pointer-events:none;opacity:0;visibility:hidden;
 transition:opacity .23s ease,visibility .23s ease;
 isolation:isolate;contain:paint;
}
#player-section[data-audio-charge="loading"] .gnarly-cover-charge,
#player-section[data-audio-charge="buffering"] .gnarly-cover-charge,
#player-section[data-audio-charge="recovering"] .gnarly-cover-charge{
 opacity:1;visibility:visible;
}
.gnarly-cover-charge-wash{
 position:absolute;inset:0;
 background:
  linear-gradient(0deg,color-mix(in srgb,var(--acid,#46ff12) 55%,transparent),
   color-mix(in srgb,var(--acid,#46ff12) 22%,transparent) 53%,transparent 100%),
  repeating-linear-gradient(0deg,#ffffff0a 0 1px,transparent 1px 5px);
 opacity:.55;mix-blend-mode:screen;
 transform:translateZ(0);
 clip-path:inset(100% 0 0 0);
}
.gnarly-cover-charge-wave{
 position:absolute;left:-12%;width:124%;height:2px;top:104%;
 background:linear-gradient(90deg,transparent,var(--acid,#46ff12) 18%,#f5fff0 49%,var(--acid,#46ff12) 82%,transparent);
 box-shadow:0 0 9px 2px color-mix(in srgb,var(--acid,#46ff12) 62%,transparent),
            0 0 21px 5px color-mix(in srgb,var(--acid,#46ff12) 30%,transparent);
 transform:rotate(-2deg) translateZ(0);opacity:.88;
}
.gnarly-cover-charge-signal{
 position:absolute;top:8%;left:7%;right:7%;
 display:flex;align-items:center;justify-content:center;gap:8px;
 width:max-content;max-width:86%;margin:auto;padding:6px 10px;
 color:#f7fff5;background:#07170cba;border:1px solid color-mix(in srgb,var(--acid,#46ff12) 50%,#ffffff2b);
 border-radius:999px;box-shadow:0 3px 19px #0009,inset 0 1px #ffffff20;
 font:800 clamp(8px,1.6vw,10px)/1.15 -apple-system,BlinkMacSystemFont,sans-serif;
 letter-spacing:.12em;text-shadow:0 1px 3px #000;
 white-space:nowrap;
}
.gnarly-cover-charge-signal::after{content:"SINTONIZANDO";overflow:hidden;text-overflow:ellipsis}
#player-section[data-audio-charge="buffering"] .gnarly-cover-charge-signal::after{content:"AJUSTANDO SINAL"}
#player-section[data-audio-charge="recovering"] .gnarly-cover-charge-signal::after{content:"RECONECTANDO"}
.gnarly-cover-charge-bars{display:flex;align-items:flex-end;gap:2px;height:10px;flex:0 0 auto}
.gnarly-cover-charge-bars i{display:block;width:2px;height:4px;border-radius:1px;background:var(--acid,#46ff12);
 box-shadow:0 0 5px color-mix(in srgb,var(--acid,#46ff12) 80%,transparent)}
#player-section[data-audio-charge="loading"] .gnarly-cover-charge-wash,
#player-section[data-audio-charge="recovering"] .gnarly-cover-charge-wash{
 animation:gnarly-charge-fill 3.4s cubic-bezier(.25,.01,.63,.94) infinite;
}
#player-section[data-audio-charge="loading"] .gnarly-cover-charge-wave,
#player-section[data-audio-charge="recovering"] .gnarly-cover-charge-wave{
 animation:gnarly-charge-sweep 3.4s cubic-bezier(.25,.01,.63,.94) infinite;
}
#player-section[data-audio-charge="buffering"] .gnarly-cover-charge-wash{
 clip-path:inset(66% 0 0 0);opacity:.24;
 animation:gnarly-charge-buffer 1.6s ease-in-out infinite alternate;
}
#player-section[data-audio-charge="buffering"] .gnarly-cover-charge-wave{
 top:66%;opacity:.54;animation:gnarly-charge-buffer-wave 1.6s ease-in-out infinite alternate;
}
#player-section[data-audio-charge] .gnarly-cover-charge-bars i:nth-child(1){animation:gnarly-charge-bar .67s ease-in-out infinite alternate}
#player-section[data-audio-charge] .gnarly-cover-charge-bars i:nth-child(2){animation:gnarly-charge-bar .8s -.24s ease-in-out infinite alternate}
#player-section[data-audio-charge] .gnarly-cover-charge-bars i:nth-child(3){animation:gnarly-charge-bar .72s -.46s ease-in-out infinite alternate}
@keyframes gnarly-charge-fill{
 0%{clip-path:inset(100% 0 0 0);opacity:.2}
 70%{clip-path:inset(8% 0 0 0);opacity:.62}
 85%{clip-path:inset(2% 0 0 0);opacity:.38}
 100%{clip-path:inset(0 0 0 0);opacity:0}
}
@keyframes gnarly-charge-sweep{
 0%{top:104%;opacity:0}
 8%{opacity:.85}
 70%{top:8%;opacity:.95}
 84%{top:2%;opacity:.7}
 100%{top:0;opacity:0}
}
@keyframes gnarly-charge-bar{from{height:3px;opacity:.55}to{height:10px;opacity:1}}
@keyframes gnarly-charge-buffer{from{opacity:.12}to{opacity:.32}}
@keyframes gnarly-charge-buffer-wave{from{opacity:.22}to{opacity:.62}}
/* The iPod glass is a separate window; artwork and labels keep their own layers.
   Never paint over the click wheel or physically customized chassis. */
.gnarly-ipod .ipod-screen .gnarly-cover-charge{z-index:2}
.gnarly-ipod .ipod-screen .gnarly-cover-charge-signal{
 top:6%;padding:4px 7px;font-size:clamp(7px,1.3vw,9px);gap:5px;letter-spacing:.07em;
}
.gnarly-ipod .ipod-screen .gnarly-cover-charge-bars{height:8px}
.gnarly-ipod .ipod-screen .gnarly-cover-charge-bars i{width:1.5px}
@media(prefers-reduced-motion:reduce){
 .gnarly-cover-charge,.gnarly-cover-charge-wash,.gnarly-cover-charge-wave,
 .gnarly-cover-charge-bars i{transition:none!important;animation:none!important}
 #player-section[data-audio-charge] .gnarly-cover-charge-wash{clip-path:inset(62% 0 0 0);opacity:.29}
 #player-section[data-audio-charge] .gnarly-cover-charge-wave{top:62%;opacity:.62}
 .gnarly-cover-charge-bars i{height:6px!important}
}

/* Screen readers get the same real player status in iPod mode. */
.gnarly-charge-sr-only{
 position:absolute!important;width:1px!important;height:1px!important;
 padding:0!important;margin:-1px!important;overflow:hidden!important;
 clip-path:inset(50%)!important;white-space:nowrap!important;border:0!important;
}


/* GNARLY stylesheet: karaoke-art.css */
/* GNARLY TYPOGRAPHY STUDIO · original CSS art direction; GPU-compositor-friendly.
   The lyric LRC clock stays outside this layer. Animations run only on active lines. */
.app-shell .gnarly-typeart{display:inline-flex;flex-wrap:wrap;justify-content:center;align-items:baseline;gap:.06em .15em;max-width:100%;line-height:1.36;vertical-align:baseline;isolation:isolate;overflow-wrap:anywhere;position:relative}
.app-shell .gnarly-typeart--studio{display:inline;line-height:1.3}
.app-shell .gnarly-word{display:inline-block;position:relative;padding:.015em .14em;margin:.045em .01em;max-width:100%;white-space:normal;transform:rotate(var(--word-tilt,0deg));transform-origin:center center;will-change:auto;vertical-align:baseline;line-height:1.25;isolation:isolate}
.app-shell .gnarly-word-gap{display:inline-block;width:.12em;flex:0 0 .12em}
.app-shell .gnarly-tone-0{--tile:#111216;--ink:#fff;--accent-tile:var(--acid,#baff20)}
.app-shell .gnarly-tone-1{--tile:#f6f1e5;--ink:#101015;--accent-tile:var(--acid,#baff20)}
.app-shell .gnarly-tone-2{--tile:var(--acid,#baff20);--ink:#101413;--accent-tile:#fff}
.app-shell .gnarly-tone-3{--tile:#f49cd3;--ink:#151315;--accent-tile:#baff20}
.app-shell .gnarly-face-0{font-family:Impact,"Arial Narrow",sans-serif;font-weight:900}
.app-shell .gnarly-face-1{font-family:Georgia,Times,serif;font-weight:800}
.app-shell .gnarly-face-2{font-family:ui-monospace,Menlo,monospace;font-weight:900;letter-spacing:-.06em}
.app-shell .gnarly-face-3{font-family:var(--gnarly-lyric-font,system-ui);font-weight:900}
.app-shell .floating-lyrics .gnarly-typeart,.app-shell .lyrics-box .lyric-line.active .gnarly-typeart{font-size:inherit;max-width:100%}
.app-shell .lyrics-box .lyric-line:not(.active) .gnarly-typeart{opacity:.8}
.app-shell .gnarly-typeart--preview{font-size:.76em;line-height:1.18}
.lyric-design-specimen .gnarly-typeart{font-size:clamp(14px,3.6vw,19px);line-height:1.1;justify-content:center}
.lyric-type-preview .gnarly-typeart{font-size:clamp(17px,4vw,28px);line-height:1.18}
.lyric-font-option[data-design-mode] {min-height:126px;display:flex;flex-direction:column;align-items:stretch;justify-content:center;gap:7px;padding:12px}
.lyric-font-option[data-design-mode] .lyric-design-specimen{min-height:49px;display:flex;align-items:center;justify-content:center;overflow:hidden;padding:5px 6px;border-radius:10px;background:rgba(0,0,0,.28);min-width:0}
.lyric-font-option[data-design-mode] .lyric-font-detail{width:100%;flex-direction:row;flex-wrap:wrap;gap:5px;justify-content:space-between;align-items:baseline}
.lyric-font-option[data-design-mode] .lyric-font-detail strong{font-size:11px;line-height:1.2}
.lyric-font-option[data-design-mode] .lyric-font-detail small{font-size:9px;flex-basis:100%}
.lyric-font-option[data-design-mode] .lyric-font-selection{position:absolute;top:5px;right:9px}
.lyric-design-tier{margin:10px 0 5px;color:var(--acid);font-size:11px;font-weight:850;letter-spacing:.14em}
.app-shell .gnarly-typeart--art .gnarly-word{transition:background-color .2s,color .2s}
@keyframes gnarly-tile-land {from{opacity:.25;transform:translate3d(0,.28em,0) rotate(calc(var(--word-tilt) - 5deg)) scale(.88)}to{opacity:1;transform:translate3d(0,0,0) rotate(var(--word-tilt)) scale(1)}}
@keyframes gnarly-type-pulse {0%,100%{transform:translateY(0)}50%{transform:translateY(-.065em)}}
@keyframes gnarly-type-shear {0%,100%{transform:skewX(0)}50%{transform:skewX(-7deg)}}
@keyframes gnarly-type-jitter {0%,91%,95%,100%{transform:translateX(0)}92%{transform:translateX(.065em)}93%{transform:translateX(-.075em)}}
@keyframes gnarly-type-bounce {0%{transform:translateY(.35em) scale(.85);opacity:0}65%{transform:translateY(-.065em) scale(1.08);opacity:1}100%{transform:translateY(0) scale(1);opacity:1}}
@keyframes gnarly-type-flare {0%,100%{text-shadow:0 0 .06em currentColor}50%{text-shadow:0 0 .27em currentColor,0 0 .46em currentColor}}
@keyframes gnarly-type-slide {from{opacity:.2;transform:translateX(-.4em)}to{opacity:1;transform:translateX(0)}}
@keyframes gnarly-type-rise {from{opacity:0;transform:translateY(.5em) scaleY(.8)}to{opacity:1;transform:translateY(0) scaleY(1)}}
@keyframes gnarly-type-wobble{0%,100%{border-radius:20% 14% 21% 13%}50%{border-radius:12% 23% 13% 25%}}
@keyframes gnarly-type-scan {0%{background-position:0% 0%}100%{background-position:0% 160%}}
@media(prefers-reduced-motion:reduce){.app-shell .gnarly-typeart *, .lyric-design-specimen *{animation:none!important;transition:none!important;transform:none!important;will-change:auto!important}}
@media(max-width:390px){.lyric-font-option[data-design-mode]{min-height:105px;padding:8px}.lyric-font-option[data-design-mode] .lyric-design-specimen{min-height:38px}.app-shell .gnarly-word{padding:.01em .09em}}

/* 01 · Magazine Cutout: stable mixed ink/paper/rotation per word, ported conceptually from iOS. */
.app-shell [data-lyric-art="art-magazine-cutout"] .gnarly-word{background:var(--tile);color:var(--ink);box-shadow:0 2px 0 #0009,1px 3px 5px #0007;clip-path:polygon(1% 2%,99% 0,100% 99%,0 100%);transform:rotate(var(--word-tilt));padding:.08em .19em}
.app-shell [data-lyric-art="art-magazine-cutout"] .gnarly-tone-2{background:var(--acid);color:#111}
.app-shell [data-lyric-art="art-magazine-cutout"] .gnarly-word:nth-of-type(4n){text-decoration:underline wavy .07em;text-underline-offset:.13em}
.app-shell .lyric-line.active [data-lyric-art="art-magazine-cutout"] .gnarly-word,.app-shell .floating-lyrics [data-lyric-art="art-magazine-cutout"] .gnarly-word{animation:gnarly-tile-land .38s both;animation-delay:calc(var(--word-order)*35ms)}
/* 02 · Xerox Ransom */
.app-shell [data-lyric-art="art-xerox-ransom"] .gnarly-word{font-family:Impact,Georgia,serif;background:var(--tile);color:var(--ink);border:2px dotted #0007;box-shadow:2px 3px 0 #f3eee3,4px 5px 0 #0009;clip-path:polygon(2% 0,100% 3%,98% 96%,0 100%)}
.app-shell [data-lyric-art="art-xerox-ransom"] .gnarly-word:nth-of-type(3n){letter-spacing:.12em;filter:contrast(1.25);text-decoration:line-through .07em}
.app-shell .lyric-line.active [data-lyric-art="art-xerox-ransom"] .gnarly-word,.app-shell .floating-lyrics [data-lyric-art="art-xerox-ransom"] .gnarly-word{animation:gnarly-type-jitter 3.5s infinite}
/* 03 · Neon Stencil */
.app-shell [data-lyric-art="art-neon-stencil"] .gnarly-word{font-family:Impact,Arial,sans-serif;text-transform:uppercase;letter-spacing:.065em;color:#0b1115;background:var(--acid);clip-path:polygon(0 0,46% 0,46% 12%,51% 12%,51% 0,100% 0,100% 100%,0 100%);box-shadow:inset 0 0 .12em #101018}
.app-shell [data-lyric-art="art-neon-stencil"] .gnarly-word:nth-child(4n){background:#0d151b;color:#e8faff;text-shadow:0 0 8px var(--acid)}
/* 04 · Chrome Surge */
.app-shell [data-lyric-art="art-chrome-surge"] .gnarly-word{color:transparent;background:linear-gradient(170deg,#fff 8%,#7c838d 26%,#fff 40%,#353b4a 52%,#f9fbff 73%,#9aabb6);-webkit-background-clip:text;background-clip:text;-webkit-text-stroke:.025em #f2faff;text-shadow:.045em .09em #0008;transform:skewX(-6deg)}
.app-shell .lyric-line.active [data-lyric-art="art-chrome-surge"] .gnarly-word,.app-shell .floating-lyrics [data-lyric-art="art-chrome-surge"] .gnarly-word{animation:gnarly-type-flare 3s ease-in-out infinite}
/* 05 · Glitch Zine */
.app-shell [data-lyric-art="art-glitch-zine"] .gnarly-word{color:#fff;background:#080b14;font-weight:900;text-shadow:-.07em 0 #ff347a,.07em 0 #4aeefa;box-shadow:inset 0 -.2em rgba(245,250,255,.08)}
.app-shell [data-lyric-art="art-glitch-zine"] .gnarly-word:nth-child(4n){transform:translateY(.09em) rotate(var(--word-tilt))}
.app-shell .lyric-line.active [data-lyric-art="art-glitch-zine"] .gnarly-word,.app-shell .floating-lyrics [data-lyric-art="art-glitch-zine"] .gnarly-word{animation:gnarly-type-jitter 2.1s steps(2) infinite}
/* 06 · Type Tornado */
.app-shell [data-lyric-art="art-type-tornado"] .gnarly-word{font-family:Impact,sans-serif;font-stretch:condensed;font-size:1.13em;letter-spacing:-.06em;color:#fff;-webkit-text-stroke:.02em #111;background:linear-gradient(125deg,#e92d7f,#5512bf);transform:rotate(calc(var(--word-tilt) * 2)) skewX(-6deg)}
.app-shell .lyric-line.active [data-lyric-art="art-type-tornado"] .gnarly-word,.app-shell .floating-lyrics [data-lyric-art="art-type-tornado"] .gnarly-word{animation:gnarly-type-bounce .5s cubic-bezier(.2,.8,.25,1) both;animation-delay:calc(var(--word-order) * 45ms)}
/* 07 · Prism Split */
.app-shell [data-lyric-art="art-prism-split"] .gnarly-word{font-family:var(--gnarly-lyric-font);letter-spacing:.02em;color:#fff;text-shadow:-.065em 0 #f452a8,.065em 0 #4be4ff,0 -.045em #f5d5b7;-webkit-text-stroke:.02em #121a27}
.app-shell [data-lyric-art="art-prism-split"] .gnarly-word:nth-child(3n){background:linear-gradient(110deg,#adfdff4b,#a974ff35);border-bottom:.13em solid #00e4ff}
/* 08 · Digital Havoc */
.app-shell [data-lyric-art="art-digital-havoc"] .gnarly-word{font-family:ui-monospace,Menlo,monospace;color:#7affd9;background:repeating-linear-gradient(0deg,#081316 0 2px,#10292c 2px 4px);border:1px solid #62eac9;letter-spacing:-.04em}
.app-shell [data-lyric-art="art-digital-havoc"] .gnarly-word:nth-child(3n){background:#74ffbb;color:#031214}
.app-shell .lyric-line.active [data-lyric-art="art-digital-havoc"] .gnarly-word,.app-shell .floating-lyrics [data-lyric-art="art-digital-havoc"] .gnarly-word{animation:gnarly-type-scan 1s linear infinite alternate}
/* 09 · Spray Tag */
.app-shell [data-lyric-art="art-spray-tag"] .gnarly-word{font-family:"Permanent Marker",cursive;font-style:italic;color:#fcffeb;text-shadow:.05em .07em #ec266d,-.08em -.02em #0c1318;transform:rotate(var(--word-tilt));text-decoration:underline .08em wavy var(--acid);text-underline-offset:.15em}
.app-shell [data-lyric-art="art-spray-tag"] .gnarly-word:nth-child(3n){color:#fdff65;font-size:1.1em}
/* 10 · Liquid Type */
.app-shell [data-lyric-art="art-liquid-type"] .gnarly-word{color:#d4ffff;background:linear-gradient(145deg,#3de9e854,#d075fd59);border:1px solid #adf8f9aa;border-radius:22% 9% 18% 6%;text-shadow:0 0 .28em #65f9ff}
.app-shell .lyric-line.active [data-lyric-art="art-liquid-type"] .gnarly-word,.app-shell .floating-lyrics [data-lyric-art="art-liquid-type"] .gnarly-word{animation:gnarly-type-wobble 3s ease-in-out infinite alternate}
/* 11 · Tape Collage */
.app-shell [data-lyric-art="art-tape-collage"] .gnarly-word{font-family:Arial,sans-serif;background:#ebd8ad;color:#1b2424;box-shadow:0 .06em 0 #16191b,0 .12em .16em #0006;border-top:.2em solid #e1d8b77a;transform:rotate(var(--word-tilt))}
.app-shell [data-lyric-art="art-tape-collage"] .gnarly-word:nth-of-type(3n){background:#c9ebf5;letter-spacing:.09em;transform:rotate(calc(var(--word-tilt) * -1))}
/* 12 · Ransom Spectrum */
.app-shell [data-lyric-art="art-ransom-spectrum"] .gnarly-word{color:var(--ink);background:var(--tile);padding:.10em .25em;clip-path:polygon(0 4%,96% 0,100% 90%,7% 100%);box-shadow:0 0 .15em #0009}
.app-shell [data-lyric-art="art-ransom-spectrum"] .gnarly-tone-3{background:#f49cd3;color:#1b0820}
.app-shell .lyric-line.active [data-lyric-art="art-ransom-spectrum"] .gnarly-word,.app-shell .floating-lyrics [data-lyric-art="art-ransom-spectrum"] .gnarly-word{animation:gnarly-type-bounce .38s both;animation-delay:calc(var(--word-order)*50ms)}
/* 13 · Electric Ticket */
.app-shell [data-lyric-art="art-electric-ticket"] .gnarly-word{font-family:Impact,Arial,sans-serif;text-transform:uppercase;color:#101824;background:#ffef4c;border-left:.12em dashed #1d2630;border-right:.12em dashed #1d2630;box-shadow:inset 0 .055em #0006,inset 0 -.055em #0005}
.app-shell [data-lyric-art="art-electric-ticket"] .gnarly-word:nth-child(4n){background:#fb6daa;color:#101121}
/* 14 · Halftone Punch */
.app-shell [data-lyric-art="art-halftone-punch"] .gnarly-word{font-family:Impact,sans-serif;color:#fff;background:radial-gradient(#0006 20%,transparent 25%) 0 0/5px 5px,#f12d6e;-webkit-text-stroke:.035em #111;box-shadow:.12em .11em #171923;transform:rotate(var(--word-tilt)) skewX(-6deg)}
.app-shell .lyric-line.active [data-lyric-art="art-halftone-punch"] .gnarly-word,.app-shell .floating-lyrics [data-lyric-art="art-halftone-punch"] .gnarly-word{animation:gnarly-tile-land .36s both}
/* 15 · Y2K Warp */
.app-shell [data-lyric-art="art-y2k-warp"] .gnarly-word{color:#fff9fd;font-family:Arial,sans-serif;font-weight:900;letter-spacing:-.08em;font-style:italic;text-shadow:.045em .075em #aa20ff,.09em .125em #111,.14em .16em #ff5598;background:linear-gradient(120deg,#ffd2f952,#6d66ed68);border-radius:.3em}
.app-shell .lyric-line.active [data-lyric-art="art-y2k-warp"] .gnarly-word,.app-shell .floating-lyrics [data-lyric-art="art-y2k-warp"] .gnarly-word{animation:gnarly-type-shear 1.4s ease-in-out infinite alternate}
/* 16 · Barcode Beats */
.app-shell [data-lyric-art="art-barcode-beats"] .gnarly-word{font-family:ui-monospace,monospace;background:repeating-linear-gradient(90deg,#0d1117 0 2px,#e5f9f0 2px 3px,#0d1117 3px 5px);color:#fff;text-shadow:0 0 .12em #111,0 1px #000;padding:.13em .2em;border-bottom:.15em solid #47f6ba}
.app-shell [data-lyric-art="art-barcode-beats"] .gnarly-word:nth-child(3n){background:#ceff48;color:#101a16;text-shadow:none}
/* 17 · Elastic Words */
.app-shell [data-lyric-art="art-elastic-words"] .gnarly-word{font-family:Arial,sans-serif;font-weight:900;border-radius:2em;color:#0b1216;background:#baff45;padding:.08em .19em;letter-spacing:-.07em}
.app-shell .lyric-line.active [data-lyric-art="art-elastic-words"] .gnarly-word,.app-shell .floating-lyrics [data-lyric-art="art-elastic-words"] .gnarly-word{animation:gnarly-type-bounce .58s cubic-bezier(.16,.9,.29,1.25) both;animation-delay:calc(var(--word-order)*35ms)}
/* 18 · Kinetic Masthead */
.app-shell [data-lyric-art="art-kinetic-masthead"] .gnarly-word{font-family:Impact,Arial,sans-serif;font-weight:900;font-stretch:condensed;color:#e8ecff;background:#18232d;border-bottom:.2em solid var(--acid);text-transform:uppercase;letter-spacing:.02em}
.app-shell .lyric-line.active [data-lyric-art="art-kinetic-masthead"] .gnarly-word,.app-shell .floating-lyrics [data-lyric-art="art-kinetic-masthead"] .gnarly-word{animation:gnarly-type-slide .46s both;animation-delay:calc(var(--word-order)*35ms)}
/* 19 · Paper Trail */
.app-shell [data-lyric-art="art-paper-trail"] .gnarly-word{font-family:Georgia,serif;color:#222019;background:#e8ddc7;outline:1px solid #b6a994;box-shadow:.08em .08em #f4f0dc,.16em .16em #302f32;transform:rotate(var(--word-tilt));padding:.1em .18em}
.app-shell [data-lyric-art="art-paper-trail"] .gnarly-word:nth-child(4n){color:#a23c46;background:#fcf5e6;text-decoration:underline}
/* 20 · Stereo Echo */
.app-shell [data-lyric-art="art-stereo-echo"] .gnarly-word{font-weight:900;letter-spacing:-.055em;color:#f7fffd;text-shadow:-.085em .08em #42d6ff,.085em -.07em #fc4b9c,.18em .12em #000;transform:rotate(var(--word-tilt))}
.app-shell .lyric-line.active [data-lyric-art="art-stereo-echo"] .gnarly-word,.app-shell .floating-lyrics [data-lyric-art="art-stereo-echo"] .gnarly-word{animation:gnarly-type-pulse 1.6s ease-in-out infinite}

/* PREMIUM STUDIO — 20 individually art-directed composition treatments. */
.app-shell [data-lyric-art="studio-vogue-editorial"]{font-family:Georgia,serif;font-style:italic;font-weight:700;letter-spacing:-.065em;font-size:1.12em;color:#fff2e5;text-shadow:0 3px 12px #000b}
.app-shell [data-lyric-art="studio-swiss-grid"]{font-family:Arial,sans-serif;font-weight:850;text-transform:uppercase;letter-spacing:-.055em;color:#fff;border-left:.19em solid var(--acid);padding-left:.26em;text-align:left}
.app-shell [data-lyric-art="studio-brutalist-index"]{font-family:Impact,Arial,sans-serif;text-transform:uppercase;font-weight:900;letter-spacing:-.035em;color:#101313;background:#d8ff38;padding:.05em .2em;box-shadow:.13em .14em #08090a}
.app-shell [data-lyric-art="studio-typographic-atlas"]{font-family:ui-monospace,monospace;letter-spacing:.07em;font-size:.85em;border:1px solid #cbdbdc8e;padding:.18em .35em;color:#e0fefa;background:linear-gradient(0deg,#11445466,#0b192566)}
.app-shell [data-lyric-art="studio-midnight-serif"]{font-family:Georgia,serif;font-style:italic;letter-spacing:.012em;color:#eae7ff;font-size:1.1em;text-shadow:0 0 .2em #c5b9ff,0 .08em .1em #07060c}
.app-shell [data-lyric-art="studio-monochrome-folio"]{font-family:Georgia,serif;font-weight:400;letter-spacing:-.04em;font-size:1.13em;color:#f8f8f4;border-block:.018em solid #f8f8f4;padding:.09em 0}
.app-shell [data-lyric-art="studio-acid-broadsheet"]{font-family:Arial,sans-serif;font-weight:900;text-transform:uppercase;font-size:1.06em;line-height:1.14;letter-spacing:-.055em;background:#ceff54;color:#080e06;box-shadow:.11em .11em #111;padding:.1em .25em;transform:skewX(-4deg)}
.app-shell [data-lyric-art="studio-art-deco-cinema"]{font-family:Impact,Arial,sans-serif;font-weight:700;letter-spacing:.17em;text-transform:uppercase;color:#f6d397;border-block:2px solid #c99858;padding:.12em .27em;text-shadow:0 1px .15em #92582d}
.app-shell [data-lyric-art="studio-cyanotype"]{font-family:ui-monospace,monospace;font-size:.93em;letter-spacing:.05em;text-transform:uppercase;color:#d6faff;background:repeating-linear-gradient(0deg,#1f4268 0 1px,#163557 1px 18px);outline:1px solid #7cc9ee;padding:.11em .25em}
.app-shell [data-lyric-art="studio-hot-metal"]{font-family:Georgia,serif;font-weight:900;color:#f5eee5;text-shadow:1px 1px #776c61,2px 2px #443d3a,4px 4px #080b0a;letter-spacing:-.035em}
.app-shell [data-lyric-art="studio-fashion-caption"]{font-family:Arial,sans-serif;font-size:.9em;font-weight:500;text-transform:uppercase;letter-spacing:.21em;color:#fff;text-decoration:underline .035em;text-underline-offset:.24em}
.app-shell [data-lyric-art="studio-analog-contact"]{font-family:ui-monospace,monospace;font-size:.9em;color:#faebdb;background:#131717;outline:1px solid #d2bcb0;border-left:.32em solid #e1c09b;padding:.15em .24em;letter-spacing:.055em}
.app-shell [data-lyric-art="studio-cyber-monogram"]{font-family:Impact,Arial,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:#c8ffff;-webkit-text-stroke:.022em #5adfff;text-shadow:0 0 .25em #38c2e5;border-bottom:2px solid #8be9f0}
.app-shell [data-lyric-art="studio-archival-stamp"]{font-family:ui-monospace,monospace;font-size:.92em;text-transform:uppercase;font-weight:900;letter-spacing:.07em;border:2px double #d6bd96;color:#ead3b2;background:#372924;padding:.1em .24em;transform:rotate(-2deg)}
.app-shell [data-lyric-art="studio-brutalist-italic"]{font-family:Impact,Arial,sans-serif;font-size:1.11em;font-weight:900;font-style:italic;letter-spacing:-.055em;text-transform:uppercase;color:#f8f8ff;text-shadow:.055em .095em #fd3b85,.11em .18em #14161c}
.app-shell [data-lyric-art="studio-liquid-chrome"]{font-family:Georgia,serif;font-weight:900;color:transparent;background:linear-gradient(175deg,#fff 10%,#d1d9df 35%,#333846 52%,#fdfeff 69%,#7c9fb7 90%);-webkit-background-clip:text;background-clip:text;-webkit-text-stroke:.025em #ffffffb0;text-shadow:.05em .07em #10151a45}
.app-shell [data-lyric-art="studio-velvet-noir"]{font-family:Georgia,serif;font-style:italic;font-weight:600;color:#f1e4e8;text-shadow:0 0 .2em #a22e5b,0 .075em .1em #000;background:#13091099;padding:.08em .2em}
.app-shell [data-lyric-art="studio-ultra-minimal"]{font-family:Arial,sans-serif;letter-spacing:-.055em;font-weight:600;font-size:.99em;color:#fff;text-shadow:0 2px 10px #000e}
.app-shell [data-lyric-art="studio-neon-serif"]{font-family:Georgia,serif;font-style:italic;font-weight:800;letter-spacing:.02em;color:#fcecf3;text-shadow:0 0 .14em #e742b9,0 0 .45em #e742b9,0 0 .7em #ff8bd6}
.app-shell [data-lyric-art="studio-concrete-poster"]{font-family:Impact,Arial,sans-serif;font-size:1.07em;letter-spacing:.035em;text-transform:uppercase;color:#fff;background:linear-gradient(135deg,#34383a,#171a1b);outline:2px solid #d7d9d9;padding:.04em .15em;text-shadow:.05em .075em #070809}

/* Lightweight editorial motion preview: only the selected Aa card or current
 lyric line is animated; every other specimen stays static and crisp. */
.lyric-type-preview [data-lyric-art="art-magazine-cutout"] .gnarly-word,.lyric-font-option[aria-pressed="true"] [data-lyric-art="art-magazine-cutout"] .gnarly-word{animation:gnarly-tile-land .38s both;animation-delay:calc(var(--word-order) * 37ms)}
.lyric-type-preview [data-lyric-art="art-xerox-ransom"] .gnarly-word,.lyric-font-option[aria-pressed="true"] [data-lyric-art="art-xerox-ransom"] .gnarly-word{animation:gnarly-type-jitter 3.5s steps(2) infinite;animation-delay:calc(var(--word-order) * 37ms)}
.lyric-type-preview [data-lyric-art="art-neon-stencil"] .gnarly-word,.lyric-font-option[aria-pressed="true"] [data-lyric-art="art-neon-stencil"] .gnarly-word{animation:gnarly-type-flare 3.2s ease-in-out infinite;animation-delay:calc(var(--word-order) * 37ms)}
.lyric-type-preview [data-lyric-art="art-chrome-surge"] .gnarly-word,.lyric-font-option[aria-pressed="true"] [data-lyric-art="art-chrome-surge"] .gnarly-word{animation:gnarly-type-flare 3.5s ease-in-out infinite;animation-delay:calc(var(--word-order) * 37ms)}
.lyric-type-preview [data-lyric-art="art-glitch-zine"] .gnarly-word,.lyric-font-option[aria-pressed="true"] [data-lyric-art="art-glitch-zine"] .gnarly-word{animation:gnarly-type-jitter 2.2s steps(2) infinite;animation-delay:calc(var(--word-order) * 37ms)}
.lyric-type-preview [data-lyric-art="art-type-tornado"] .gnarly-word,.lyric-font-option[aria-pressed="true"] [data-lyric-art="art-type-tornado"] .gnarly-word{animation:gnarly-type-bounce .44s both;animation-delay:calc(var(--word-order) * 37ms)}
.lyric-type-preview [data-lyric-art="art-prism-split"] .gnarly-word,.lyric-font-option[aria-pressed="true"] [data-lyric-art="art-prism-split"] .gnarly-word{animation:gnarly-type-pulse 2.5s ease-in-out infinite;animation-delay:calc(var(--word-order) * 37ms)}
.lyric-type-preview [data-lyric-art="art-digital-havoc"] .gnarly-word,.lyric-font-option[aria-pressed="true"] [data-lyric-art="art-digital-havoc"] .gnarly-word{animation:gnarly-type-scan 1.4s linear infinite alternate;animation-delay:calc(var(--word-order) * 37ms)}
.lyric-type-preview [data-lyric-art="art-spray-tag"] .gnarly-word,.lyric-font-option[aria-pressed="true"] [data-lyric-art="art-spray-tag"] .gnarly-word{animation:gnarly-type-slide .54s both;animation-delay:calc(var(--word-order) * 37ms)}
.lyric-type-preview [data-lyric-art="art-liquid-type"] .gnarly-word,.lyric-font-option[aria-pressed="true"] [data-lyric-art="art-liquid-type"] .gnarly-word{animation:gnarly-type-wobble 3.6s ease-in-out infinite alternate;animation-delay:calc(var(--word-order) * 37ms)}
.lyric-type-preview [data-lyric-art="art-tape-collage"] .gnarly-word,.lyric-font-option[aria-pressed="true"] [data-lyric-art="art-tape-collage"] .gnarly-word{animation:gnarly-tile-land .44s both;animation-delay:calc(var(--word-order) * 37ms)}
.lyric-type-preview [data-lyric-art="art-ransom-spectrum"] .gnarly-word,.lyric-font-option[aria-pressed="true"] [data-lyric-art="art-ransom-spectrum"] .gnarly-word{animation:gnarly-type-bounce .35s both;animation-delay:calc(var(--word-order) * 37ms)}
.lyric-type-preview [data-lyric-art="art-electric-ticket"] .gnarly-word,.lyric-font-option[aria-pressed="true"] [data-lyric-art="art-electric-ticket"] .gnarly-word{animation:gnarly-type-rise .45s both;animation-delay:calc(var(--word-order) * 37ms)}
.lyric-type-preview [data-lyric-art="art-halftone-punch"] .gnarly-word,.lyric-font-option[aria-pressed="true"] [data-lyric-art="art-halftone-punch"] .gnarly-word{animation:gnarly-tile-land .32s both;animation-delay:calc(var(--word-order) * 37ms)}
.lyric-type-preview [data-lyric-art="art-y2k-warp"] .gnarly-word,.lyric-font-option[aria-pressed="true"] [data-lyric-art="art-y2k-warp"] .gnarly-word{animation:gnarly-type-shear 2.2s ease-in-out infinite alternate;animation-delay:calc(var(--word-order) * 37ms)}
.lyric-type-preview [data-lyric-art="art-barcode-beats"] .gnarly-word,.lyric-font-option[aria-pressed="true"] [data-lyric-art="art-barcode-beats"] .gnarly-word{animation:gnarly-type-scan 2.4s linear infinite alternate;animation-delay:calc(var(--word-order) * 37ms)}
.lyric-type-preview [data-lyric-art="art-elastic-words"] .gnarly-word,.lyric-font-option[aria-pressed="true"] [data-lyric-art="art-elastic-words"] .gnarly-word{animation:gnarly-type-bounce .65s both;animation-delay:calc(var(--word-order) * 37ms)}
.lyric-type-preview [data-lyric-art="art-kinetic-masthead"] .gnarly-word,.lyric-font-option[aria-pressed="true"] [data-lyric-art="art-kinetic-masthead"] .gnarly-word{animation:gnarly-type-slide .5s both;animation-delay:calc(var(--word-order) * 37ms)}
.lyric-type-preview [data-lyric-art="art-paper-trail"] .gnarly-word,.lyric-font-option[aria-pressed="true"] [data-lyric-art="art-paper-trail"] .gnarly-word{animation:gnarly-tile-land .6s both;animation-delay:calc(var(--word-order) * 37ms)}
.lyric-type-preview [data-lyric-art="art-stereo-echo"] .gnarly-word,.lyric-font-option[aria-pressed="true"] [data-lyric-art="art-stereo-echo"] .gnarly-word{animation:gnarly-type-pulse 2s ease-in-out infinite;animation-delay:calc(var(--word-order) * 37ms)}
.lyric-font-option[data-design-mode]:hover .lyric-design-specimen{outline:1px solid color-mix(in srgb,var(--acid) 35%,transparent)}
@media(prefers-reduced-motion:reduce){.lyric-type-preview .gnarly-word,.lyric-font-option[aria-pressed="true"] .gnarly-word{animation:none!important}}


/* GNARLY stylesheet: karaoke-art-refined.css */
/* GNARLY TYPE LAB / art-direction refinement v2.
 * Intentionally typography, hierarchy and material — not a list of font names.
 * CSS-only, active-line animations and native fallback for low-power devices.
 * External families are already allowlisted and loaded on demand by Aa.
 */
.app-shell .gnarly-typeart{
 -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
 font-optical-sizing:auto;font-kerning:normal;
 text-wrap:balance;overflow-wrap:anywhere;max-width:100%;
}
.app-shell .gnarly-word{
 font-synthesis:none;letter-spacing:-.035em;
 box-decoration-break:clone;-webkit-box-decoration-break:clone;
}
.app-shell .lyric-line .gnarly-typeart,.karaoke-stage .gnarly-typeart{max-width:100%}
.lyric-type-preview .gnarly-typeart,.lyric-design-specimen .gnarly-typeart{max-width:100%;overflow-wrap:anywhere}
.lyric-design-specimen{isolation:isolate;contain:layout style}
.lyric-font-option[data-design-mode]{border:1px solid rgba(228,235,230,.16);background:linear-gradient(155deg,rgba(44,52,54,.24),rgba(12,14,18,.54));box-shadow:inset 0 1px rgba(255,255,255,.06)}
.lyric-font-option[data-design-mode][aria-pressed=true]{border-color:var(--acid);box-shadow:inset 0 0 0 1px var(--acid),0 0 18px rgba(81,255,42,.1)}
.lyric-font-option[data-design-mode] .lyric-design-specimen{background:linear-gradient(160deg,#12181c,#22272d 65%,#15171e);border:1px solid rgba(255,255,255,.09);border-radius:10px;min-height:66px}
.lyric-font-option[data-design-mode] .lyric-font-detail strong{font-size:12px;font-weight:800;letter-spacing:-.02em}
.lyric-font-option[data-design-mode] .lyric-font-detail small{font-size:10px;opacity:.8}
.lyric-type-preview{border-radius:20px;background:radial-gradient(ellipse at 70% 30%,#36404780,transparent 75%),linear-gradient(140deg,#11171d,#151a1c)}
.lyric-type-preview #lyric-live-specimen{min-height:78px;display:flex;align-items:center;justify-content:center;padding:6px}
.app-shell .gnarly-typeart--art .gnarly-word{transition:none}
.app-shell .gnarly-typeart--art:not([data-lyric-art="art-magazine-cutout"]):not([data-lyric-art="art-xerox-ransom"]):not([data-lyric-art="art-ransom-spectrum"]):not([data-lyric-art="art-tape-collage"]) .gnarly-word{
 font-family:var(--gnarly-lyric-font,Impact,sans-serif);
}
/* Magazine Cutout: physical print collage. Four purposeful real typographic
 * roles, not four mismatched system fonts randomly assigned to all styles. */
.app-shell [data-lyric-art="art-magazine-cutout"]{gap:.02em .1em;align-items:baseline}
.app-shell [data-lyric-art="art-magazine-cutout"] .gnarly-word{
 border-radius:1px;clip-path:polygon(0% 2%,98% 0,100% 95%,2% 100%);
 box-shadow:0 .065em 0 #0008,0 .12em .21em #0006;
 letter-spacing:-.075em;line-height:1.12;padding:.07em .14em;
 transform:rotate(calc(var(--word-tilt)*.55));
 text-shadow:none;-webkit-text-stroke:0;
}
.app-shell [data-lyric-art="art-magazine-cutout"] .gnarly-face-0{font-family:Impact,"Arial Narrow",sans-serif;font-style:normal;font-weight:900}
.app-shell [data-lyric-art="art-magazine-cutout"] .gnarly-face-1{font-family:"Instrument Serif",Georgia,serif;font-weight:400;font-style:italic;letter-spacing:-.035em}
.app-shell [data-lyric-art="art-magazine-cutout"] .gnarly-face-2{font-family:"Space Mono",ui-monospace,monospace;font-weight:700;font-size:.8em;letter-spacing:-.065em;text-transform:uppercase}
.app-shell [data-lyric-art="art-magazine-cutout"] .gnarly-face-3{font-family:"Bricolage Grotesque",Arial,sans-serif;font-weight:800;letter-spacing:-.04em}
.app-shell [data-lyric-art="art-magazine-cutout"] .gnarly-tone-0{background:#111217;color:#f9fbf6}
.app-shell [data-lyric-art="art-magazine-cutout"] .gnarly-tone-1{background:#f3efe7;color:#181714}
.app-shell [data-lyric-art="art-magazine-cutout"] .gnarly-tone-2{background:var(--acid,#c8fc28);color:#101513}
.app-shell [data-lyric-art="art-magazine-cutout"] .gnarly-tone-3{background:#c8fc28;color:#132013}
.app-shell [data-lyric-art="art-magazine-cutout"] .gnarly-word:nth-of-type(5n){border-bottom:.07em solid #d02f72}
.app-shell [data-lyric-art="art-magazine-cutout"] .gnarly-word:nth-of-type(7n){text-decoration:none;outline:1px solid rgba(255,255,255,.44);outline-offset:-2px}
/* Xerox Ransom — newsprint grain and ripped stock, no generic RGB glow. */
.app-shell [data-lyric-art="art-xerox-ransom"] .gnarly-word{
 background:#f2eddf;color:#121517;font-family:Impact,"Archivo Black",sans-serif;
 border:0;outline:1px solid #0d1012;letter-spacing:-.065em;
 box-shadow:.08em .09em 0 #080b0c;transform:rotate(calc(var(--word-tilt)*.6));text-decoration:none;
}
.app-shell [data-lyric-art="art-xerox-ransom"] .gnarly-word:nth-of-type(3n){background:#141619;color:#f3efe7;font-family:Georgia,serif;font-style:italic;letter-spacing:0;text-decoration:none}
/* Chrome Surge — one continuous metallized headline, with real highlight edges. */
.app-shell [data-lyric-art="art-chrome-surge"]{align-items:center}
.app-shell [data-lyric-art="art-chrome-surge"] .gnarly-word{
 font-family:"Unbounded",Impact,sans-serif;font-size:.92em;
 font-weight:900;transform:skewX(-4deg);
 color:transparent;background:linear-gradient(180deg,#fbffff 0%,#a5b5c4 22%,#27323f 42%,#ebf6ff 52%,#8d9fa8 76%,#f9fcff 94%);
 -webkit-background-clip:text;background-clip:text;-webkit-text-stroke:.012em #b4e6ef;
 text-shadow:0 .075em rgba(0,0,0,.28);
}
/* Prism Split — thin graphic chromatic registration rather than chunky shadow. */
.app-shell [data-lyric-art="art-prism-split"] .gnarly-word{
 font-family:"Syne",Arial,sans-serif;font-weight:800;letter-spacing:-.06em;
 color:#fff;text-shadow:-.055em 0 rgba(62,239,247,.92),.055em 0 rgba(249,79,152,.9);
 -webkit-text-stroke:0;background:transparent;border:0;
}
/* Neon Stencil — disciplined ink/outlines. */
.app-shell [data-lyric-art="art-neon-stencil"] .gnarly-word{
 font-family:"Rajdhani",Impact,sans-serif;font-weight:900;
 color:#101716;background:#d3ff42;border-radius:0;
 clip-path:polygon(0 0,43% 0,43% 11%,53% 11%,53% 0,100% 0,100% 100%,0 100%);
 letter-spacing:.015em;
}
/* Glitch Zine — print offsets with no layout jitter outside the active line. */
.app-shell [data-lyric-art="art-glitch-zine"] .gnarly-word{
 font-family:"Syne",Arial,sans-serif;letter-spacing:-.065em;
 color:#f6faff;background:#11101d;text-shadow:-.048em 0 #ed3f89,.048em 0 #31cde0;
}
.app-shell [data-lyric-art="art-type-tornado"] .gnarly-word{
 font-family:"Bebas Neue",Impact,sans-serif;font-size:1.07em;letter-spacing:.01em;
 color:#f7f7f9;background:linear-gradient(135deg,#30175c,#a31e77);
 border:1px solid #f4ecff4d;transform:rotate(calc(var(--word-tilt)*.55));
}
/* Liquid Type — translucency from gradients, not costly backdrop-filter/blur. */
.app-shell [data-lyric-art="art-liquid-type"] .gnarly-word{
 font-family:"Fraunces",Georgia,serif;font-weight:800;font-style:italic;
 color:#f0ffff;background:linear-gradient(145deg,#3dffe64d,#b23ffc5c);
 border:1px solid #b2f7ebc2;border-radius:.3em .12em .3em .08em;
 text-shadow:0 1px #0d2b38;
}
.app-shell [data-lyric-art="art-paper-trail"] .gnarly-word{
 font-family:"EB Garamond",Georgia,serif;font-weight:700;font-style:italic;
 background:#f3ead9;color:#27201b;border:1px solid #aa9a7d;letter-spacing:-.025em;
 box-shadow:.05em .05em #fff5,.12em .14em #15171b;
}
.app-shell [data-lyric-art="art-stereo-echo"] .gnarly-word{
 font-family:"Unbounded",Arial,sans-serif;letter-spacing:-.065em;color:#fafffc;
 text-shadow:-.052em .045em #30d5ef,.055em -.03em #f947ad,.12em .09em #080b0c;
}
/* Individual premium stage treatments: framed page compositions, not fonts only. */
.app-shell [data-lyric-art^="studio-"]{
 position:relative;display:inline-block;max-width:100%;
 padding:.1em .19em;font-optical-sizing:auto;
 text-wrap:balance;line-height:1.18;isolation:isolate;
}
.app-shell [data-lyric-art="studio-vogue-editorial"]{
 font-family:"Playfair Display",Georgia,serif;font-weight:700;font-style:italic;
 color:#f9eee4;letter-spacing:-.055em;border-bottom:.018em solid #e6be9d;
}
.app-shell [data-lyric-art="studio-swiss-grid"]{
 font-family:"Inter",Arial,sans-serif;font-style:normal;letter-spacing:-.085em;
 border-left:.13em solid #d5fd43;border-bottom:.015em solid rgba(255,255,255,.55);
 text-align:left;padding-left:.35em;
}
.app-shell [data-lyric-art="studio-brutalist-index"]{
 font-family:"Archivo Black",Impact,sans-serif;font-weight:900;
 background:#c2ff39;color:#10140f;border-radius:0;
 box-shadow:.09em .1em 0 #080a0c;
 padding:.09em .19em;line-height:1.1;
}
.app-shell [data-lyric-art="studio-typographic-atlas"]{
 font-family:"Space Grotesk",Arial,sans-serif;font-weight:700;
 text-transform:uppercase;letter-spacing:.095em;font-size:.92em;
 border:1px solid #cee6ebba;border-left:4px solid #cee6eb;
 color:#eaf9fb;background:linear-gradient(110deg,#25445350,#10222cbd);
 padding:.2em .36em;
}
.app-shell [data-lyric-art="studio-midnight-serif"]{
 font-family:"Cormorant Garamond",Georgia,serif;font-size:1.2em;font-weight:700;
 font-style:italic;color:#f9f4ff;text-shadow:0 .08em .19em #08040f;
 letter-spacing:-.03em;border-bottom:.02em solid #8f83ae;
}
.app-shell [data-lyric-art="studio-monochrome-folio"]{
 font-family:"Instrument Serif",Georgia,serif;font-size:1.18em;font-weight:400;
 letter-spacing:-.04em;font-style:normal;color:#fff;
 border-block:.023em solid #f9f9f3;padding:.12em .05em;
}
.app-shell [data-lyric-art="studio-acid-broadsheet"]{
 font-family:"Syne",Arial,sans-serif;font-weight:900;text-transform:uppercase;
 color:#090e0a;background:#d1fe50;padding:.07em .18em;
 letter-spacing:-.065em;transform:skewX(-3deg);
 box-shadow:.09em .11em #11161c;
}
.app-shell [data-lyric-art="studio-art-deco-cinema"]{
 font-family:"Bebas Neue",Impact,sans-serif;font-weight:600;
 letter-spacing:.14em;color:#f3d8a6;border-top:2px solid #b68f57;border-bottom:2px solid #b68f57;
 text-shadow:0 .035em .1em #402915;
}
.app-shell [data-lyric-art="studio-cyanotype"]{
 font-family:"IBM Plex Mono",monospace;font-weight:700;color:#dff8ff;
 background:repeating-linear-gradient(0deg,#1c476b 0 1px,#123452 1px 16px);
 border:1px solid #82bfd8;letter-spacing:.025em;text-shadow:none;
}
.app-shell [data-lyric-art="studio-hot-metal"]{
 font-family:"EB Garamond",Georgia,serif;font-weight:900;color:#f4f2e8;
 text-shadow:1px 1px #958c7c,2px 2px #433d33,3px 3px #111;
 letter-spacing:-.055em;
}
.app-shell [data-lyric-art="studio-fashion-caption"]{
 font-family:"DM Sans",Arial,sans-serif;text-transform:uppercase;
 font-weight:600;letter-spacing:.22em;font-size:.87em;
 border-bottom:1px solid #fff6;padding-bottom:.19em;
}
.app-shell [data-lyric-art="studio-analog-contact"]{
 font-family:"Space Mono",monospace;font-weight:700;letter-spacing:-.02em;
 background:#181818;color:#ffe8db;border:1px solid #bea393;
 border-left:5px solid #d6b8a4;padding:.2em .3em;
}
.app-shell [data-lyric-art="studio-cyber-monogram"]{
 font-family:"Orbitron",Arial,sans-serif;font-weight:900;
 letter-spacing:.055em;text-transform:uppercase;color:#d1fff6;
 -webkit-text-stroke:.01em #6adfed;text-shadow:0 0 .13em #26c5bd;
 border-bottom:.07em solid #5ae7e2;
}
.app-shell [data-lyric-art="studio-archival-stamp"]{
 font-family:"Oswald",Arial,sans-serif;letter-spacing:.04em;font-weight:600;
 color:#e8ceae;border:2px solid #a88865;background:#30261d;
 padding:.1em .28em;transform:rotate(-1deg);
}
.app-shell [data-lyric-art="studio-brutalist-italic"]{
 font-family:"Unbounded",Arial,sans-serif;font-weight:900;
 font-style:italic;letter-spacing:-.07em;
 color:#fff;text-shadow:.055em .065em #e53379,.11em .13em #181721;
}
.app-shell [data-lyric-art="studio-liquid-chrome"]{
 font-family:"Fraunces",Georgia,serif;font-weight:900;
 color:transparent;background:linear-gradient(173deg,#fff 4%,#a9b7c2 28%,#2a3b48 44%,#fff 57%,#799cbb 79%,#fff 94%);
 -webkit-background-clip:text;background-clip:text;-webkit-text-stroke:.015em #d8f3f4;
 text-shadow:none;
}
.app-shell [data-lyric-art="studio-velvet-noir"]{
 font-family:"Instrument Serif",Georgia,serif;font-size:1.21em;font-style:italic;
 font-weight:400;background:rgba(18,8,15,.66);color:#f9e0e9;
 border:1px solid #8d546b87;text-shadow:0 2px 5px #000b;
}
.app-shell [data-lyric-art="studio-ultra-minimal"]{
 font-family:"Manrope",Arial,sans-serif;font-weight:650;
 letter-spacing:-.065em;color:#fff;text-shadow:0 2px 8px #070b0cd1;
 padding:.1em .03em;
}
.app-shell [data-lyric-art="studio-neon-serif"]{
 font-family:"Lora",Georgia,serif;font-style:italic;font-weight:700;
 color:#fff8fc;letter-spacing:-.025em;
 text-shadow:0 0 .12em #e447bd,0 0 .24em #c72c91;
}
.app-shell [data-lyric-art="studio-concrete-poster"]{
 font-family:"Anton",Impact,sans-serif;font-size:1.03em;
 text-transform:uppercase;font-weight:800;color:#f0f3f1;
 background:linear-gradient(145deg,#353b3d,#171d1c);
 border:1px solid #d7dad2;padding:.08em .19em;
 box-shadow:.09em .1em 0 rgba(0,0,0,.8);
}
@media(max-width:410px){
 .lyric-font-option[data-design-mode] .lyric-design-specimen{min-height:52px}
 .app-shell .gnarly-typeart--art .gnarly-word{padding-inline:.09em}
 .app-shell [data-lyric-art^="studio-"]{max-width:95%}
}
@media(prefers-reduced-motion:reduce){
 .app-shell .gnarly-typeart *,.lyric-font-option .gnarly-typeart *{animation:none!important;transition:none!important}
}


/* GNARLY stylesheet: karaoke-stage.css */
/* Expanded GNARLY karaoke inspired by the native NowPlayingScreen.
 * Same page/player/lyrics; no second audio graph or media source.
 */
.karaoke-stage[hidden]{display:none!important}
.karaoke-stage{
 position:fixed;inset:0;z-index:90;isolation:isolate;overflow:hidden;
 background:rgba(10,13,17,.94);color:#f7f9fa;
 font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display",Arial,sans-serif;
 padding:env(safe-area-inset-top,0px) 0 env(safe-area-inset-bottom,0px);
}
html.karaoke-stage-open,html.karaoke-stage-open body{overflow:hidden;overscroll-behavior:none}
.karaoke-stage-wallpaper{position:absolute;inset:-12%;z-index:-2;overflow:hidden;pointer-events:none;background:#0d1118}
.karaoke-stage-wallpaper img{width:100%;height:100%;object-fit:cover;filter:blur(55px) saturate(1.6);opacity:.27;transform:scale(1.12)}
.karaoke-stage:before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(180deg,rgba(7,9,13,.78),rgba(10,13,17,.72) 48%,rgba(11,14,19,.90))}
.karaoke-stage-glass{height:100%;width:min(100%,930px);margin:0 auto;display:flex;flex-direction:column;min-height:0;padding:clamp(10px,3vw,24px) clamp(14px,3.4vw,32px) 12px}
.karaoke-stage-header{display:flex;align-items:center;gap:12px;flex:0 0 auto;padding:4px 0 16px}
.karaoke-stage-art{width:58px;height:58px;border-radius:14px;object-fit:cover;border:1px solid rgba(255,255,255,.19);box-shadow:0 8px 22px #0005}
.karaoke-stage-song{min-width:0;flex:1}
.karaoke-stage-song h2{font-size:clamp(16px,4.3vw,24px);line-height:1.12;letter-spacing:-.035em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0 0 5px}
.karaoke-stage-song p{color:#bdc6c8;font-size:13px;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.karaoke-stage-transport{flex:0 0 42px;height:42px;border-radius:50%;background:#f7f9fa;color:#151b1d;font-size:18px;font-weight:850;box-shadow:0 3px 12px #0004}
.karaoke-stage-close{flex:0 0 42px;height:42px;border-radius:50%;background:#ffffff17;border:1px solid #ffffff26;color:#f7f7f7;font-size:17px}
.karaoke-stage-actions{display:flex;flex-wrap:wrap;align-items:center;gap:9px;flex:0 0 auto;margin:4px 0 16px}
.karaoke-stage-actions button,.karaoke-stage-footer button{border:1px solid #ffffff30;background:rgba(255,255,255,.11);color:#fafbff;border-radius:999px;padding:10px 13px;min-height:39px;font-size:13px;font-weight:730;touch-action:manipulation}
.karaoke-stage-actions button[aria-pressed="true"]{background:color-mix(in srgb,var(--acid,#46ff12) 20%,#171d21);border-color:var(--acid,#46ff12);color:#fff}
.karaoke-stage-actions button:disabled{opacity:.4}
.karaoke-score-card{flex:0 0 auto;display:grid;grid-template-columns:1fr 1.25fr;gap:7px 13px;padding:14px 17px 11px;border:1px solid color-mix(in srgb,var(--acid,#46ff12) 24%,#ffffff33);border-radius:22px;background:rgba(97,116,119,.18);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:inset 0 1px #ffffff10}
.karaoke-score-label{display:block;color:#d4dde1;font-size:10px;letter-spacing:.11em;font-weight:850}
.karaoke-score-number{display:block;font-size:27px;line-height:1.3;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.karaoke-score-right{align-self:center;text-align:right;display:flex;flex-direction:column;gap:6px}
.karaoke-score-right strong{display:inline-block;align-self:flex-end;border-radius:20px;background:color-mix(in srgb,var(--acid,#46ff12) 19%,#26383d);padding:6px 10px;font-size:13px;white-space:nowrap;font-variant-numeric:tabular-nums}
.karaoke-score-right small{font-size:10px;color:#bcc7d0;line-height:1.3}
.karaoke-score-meter{grid-column:1/-1;overflow:hidden;background:#ffffff18;border-radius:20px;height:4px}
.karaoke-score-meter span{display:block;height:100%;width:0%;border-radius:inherit;background:var(--acid,#46ff12);transition:width .09s linear}
.karaoke-score-rating{grid-column:1/-1;min-height:18px;margin:1px 0 0;text-align:center;font-size:11px;line-height:1.4;color:#d9e1e3}
.karaoke-stage-status{flex:0 0 auto;text-align:center;font-size:11px;font-weight:700;color:#d1dadc;letter-spacing:.04em;padding:14px 0 5px}
.karaoke-reader{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none;scroll-padding-block:32vh 28vh;-webkit-overflow-scrolling:touch;mask-image:linear-gradient(to bottom,transparent,#000 9%,#000 90%,transparent)}
.karaoke-reader::-webkit-scrollbar{display:none}
.karaoke-reader-lines{min-height:100%;display:flex;flex-direction:column;align-items:stretch;gap:clamp(15px,4vh,31px);padding:20vh 0 28vh}
.karaoke-reader-line{
 display:block;width:100%;margin:0;padding:8px clamp(7px,3vw,28px);border:0;border-radius:18px;
 text-align:center;background:transparent;color:#d1d4da;font-family:var(--gnarly-lyric-font,-apple-system,BlinkMacSystemFont,sans-serif);
 font-weight:var(--gnarly-lyric-weight,750);font-size:clamp(22px,5vw,43px);line-height:1.35;
 letter-spacing:var(--gnarly-lyric-spacing,-.012em);text-transform:var(--gnarly-lyric-transform,none);
 overflow-wrap:anywhere;opacity:.25;transition:opacity .2s ease,color .2s ease,text-shadow .2s ease;touch-action:manipulation}
.karaoke-reader-line.is-live{opacity:1;color:var(--acid,#46ff12);background:color-mix(in srgb,var(--acid,#46ff12) 8%,transparent);text-shadow:0 0 19px color-mix(in srgb,var(--acid,#46ff12) 28%,transparent);font-size:clamp(25px,5.8vw,47px)}
.karaoke-reader-line.is-past{opacity:.12}
.karaoke-reader-line.is-future{opacity:calc(.48 - .075 * var(--distance,1))}
.karaoke-reader-line:focus-visible,.karaoke-stage button:focus-visible{outline:2px solid var(--acid,#46ff12);outline-offset:2px}
.karaoke-reader-empty{font-size:17px;font-weight:700;text-align:center;color:#b5c6cd;padding:16px}
.karaoke-stage-footer{flex:0 0 auto;display:flex;align-items:center;gap:9px;justify-content:space-between;padding:10px 0 2px}
.karaoke-stage-footer button{white-space:nowrap}
.karaoke-stage-footer button.is-following{border-color:color-mix(in srgb,var(--acid,#46ff12) 35%,transparent);color:var(--acid,#46ff12)}
.karaoke-stage-footer span{font-size:10px;max-width:48%;text-align:right;line-height:1.4;color:#bac5cb}
.karaoke-compact-expand{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:31px;height:31px;display:grid;place-items:center;border-radius:50%;background:rgba(10,16,18,.63);border:1px solid #ffffff5b;color:var(--acid,#46ff12);touch-action:manipulation}
.karaoke-compact-expand svg{width:17px;height:17px}
.app-shell .floating-lyrics{position:relative;padding-right:43px}
.app-shell .floating-lyrics #floating-line{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:420px){
 .karaoke-stage-art{height:48px;width:48px;border-radius:11px}
 .karaoke-stage-actions{gap:6px}
 .karaoke-stage-actions button{font-size:11px;padding:9px 10px}
 .karaoke-score-card{padding:11px 12px}
 .karaoke-reader-lines{padding-top:20vh;gap:19px}
 .karaoke-stage-footer button{font-size:11px}
}
@media(prefers-reduced-motion:reduce){.karaoke-reader-line,.karaoke-score-meter span{transition:none}}

/* Scope existing Aa art compositions inside the fullscreen reader without
 * promoting the entire dialog to the app's layout shell. */
.karaoke-stage .karaoke-stage-art-root.app-shell{all:unset;display:block;width:100%;min-height:100%;font-family:inherit;color:inherit}
.karaoke-stage .karaoke-stage-art-root .gnarly-typeart{font-size:inherit;max-width:100%;justify-content:center}
.karaoke-stage .karaoke-reader-line.is-live .gnarly-typeart{font-size:inherit}

/* More detail from actual HD artwork; 55px blur excessively erased cover texture. */
.karaoke-stage-wallpaper{inset:-4%}
.karaoke-stage-wallpaper img{filter:blur(clamp(9px,1.6vw,17px)) saturate(1.07);opacity:.48;transform:scale(1.025);image-rendering:auto}
.karaoke-stage-fullscreen{flex:0 0 42px;height:42px;border-radius:50%;border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.12);color:#fff;font-size:23px;font-weight:700;touch-action:manipulation}
.karaoke-stage-fullscreen[aria-pressed="true"]{color:var(--acid);border-color:var(--acid)}


/* KARAOKE STAGE HOTFIX · do not let LRC follow-mode move the document viewport.
 * Stacking, scroll boundaries and touch targets remain independent of all
 * GNARLY smart queue, omnibox, themes, fullscreen and player surfaces.
 */
.karaoke-stage:not([hidden]){
 position:fixed!important;inset:0!important;
 width:100%!important;height:100vh;height:100dvh;
 max-height:100dvh;overflow:hidden!important;z-index:1000;
 display:flex;align-items:stretch;justify-content:center;
 pointer-events:auto;touch-action:manipulation;
 padding:env(safe-area-inset-top,0px) 0 env(safe-area-inset-bottom,0px);
 box-sizing:border-box;
}
.karaoke-stage-glass{
 position:relative;isolation:isolate;flex:1 1 auto;
 max-width:min(100%,1100px);width:100%;height:100%;max-height:100%;
 min-height:0;overflow:hidden;display:flex;flex-direction:column;
 padding:clamp(10px,2vh,22px) clamp(12px,3vw,28px) clamp(7px,1.2vh,14px);
 box-sizing:border-box;
}
.karaoke-stage-header{
 position:relative;z-index:4;display:flex;flex:none;align-items:center;
 gap:clamp(6px,1.3vw,14px);width:100%;min-width:0;
 padding:3px 0 clamp(9px,1.6vh,16px);
 margin:0;overflow:visible;
}
.karaoke-stage-header button{
 display:grid;place-items:center;flex-shrink:0;min-width:44px;
 min-height:44px;touch-action:manipulation;position:relative;z-index:4;
}
.karaoke-stage-song{min-width:0;flex:1 1 0;overflow:hidden}
.karaoke-stage-header h2,.karaoke-stage-header p{min-width:0}
.karaoke-stage-actions{
 position:relative;z-index:4;flex:none;min-width:0;
 gap:8px;display:flex;align-items:center;margin:0 0 clamp(8px,1.6vh,16px);
}
.karaoke-stage-actions button{
 min-height:43px;touch-action:manipulation;pointer-events:auto;
}
.karaoke-stage .karaoke-score-card,.karaoke-stage .karaoke-stage-status{
 position:relative;flex:none;z-index:2;
}
.karaoke-stage-status{padding:clamp(6px,1.25vh,12px) 0 5px}
.karaoke-stage .karaoke-reader{
 position:relative;flex:1 1 0;min-height:60px;max-height:100%;
 overflow-y:auto;overflow-x:hidden;
 overscroll-behavior-y:contain;touch-action:pan-y;
 scroll-behavior:auto;mask-image:linear-gradient(to bottom,transparent,#000 5%,#000 96%,transparent);
}
.karaoke-stage .karaoke-reader-lines{min-height:100%;padding-top:14vh;padding-bottom:20vh}
.karaoke-stage .karaoke-reader-line{line-height:1.27}
.karaoke-stage .karaoke-reader-line.is-future{opacity:calc(.65 - .075*var(--distance,1))}
.karaoke-stage .karaoke-reader-line.is-past{opacity:.22}
.karaoke-stage-footer{position:relative;z-index:4;flex:none;min-height:48px}
.karaoke-stage-feedback{
 position:relative;z-index:5;flex:none;margin:0 0 10px;
 border-radius:12px;border:1px solid rgba(125,255,96,.4);
 background:rgba(17,42,31,.92);color:#f5fff3;
 padding:10px 13px;line-height:1.35;font-size:12px;font-weight:680;
}
.karaoke-stage-feedback[hidden],.karaoke-stage-font-menu[hidden]{display:none!important}
.karaoke-stage-font-menu:not([hidden]){
 position:relative;z-index:6;flex:0 1 auto;min-height:0;
 max-height:min(28dvh,215px);overflow-y:auto;overscroll-behavior:contain;
 display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:6px;
 margin:0 0 10px;padding:10px;border:1px solid rgba(255,255,255,.22);
 border-radius:14px;background:rgba(11,21,25,.96);box-shadow:0 8px 20px #0008;
}
.karaoke-stage-font-menu button{
 padding:9px;border-radius:9px;min-height:36px;text-align:left;
 background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);
 color:#fff;font-size:12px;touch-action:manipulation;
}
.karaoke-stage-font-menu button[aria-pressed="true"]{
 border-color:var(--acid,#46ff12);color:var(--acid,#46ff12);
}
@media(max-width:540px){
 .karaoke-stage-glass{padding-inline:12px}
 .karaoke-stage-header{gap:5px}
 .karaoke-stage-art{width:44px;height:44px;flex:0 0 44px}
 .karaoke-stage-header button{width:40px;min-width:40px;height:42px;min-height:42px;flex-basis:40px}
 .karaoke-stage-actions{gap:6px}
 .karaoke-stage-actions button{min-height:40px;padding:8px 9px;font-size:11px}
 .karaoke-score-card{padding:9px 11px}
 .karaoke-reader-line.is-live{font-size:clamp(25px,7vw,37px)}
 .karaoke-stage-footer span{font-size:9px}
}
@media(max-height:690px){
 .karaoke-stage-glass{padding-block:6px}
 .karaoke-stage-header{padding-bottom:6px}
 .karaoke-stage-actions{margin-bottom:6px}
 .karaoke-score-card{padding-block:7px}
 .karaoke-stage-status{padding:6px 0 2px}
 .karaoke-reader-lines{padding-top:9vh;padding-bottom:15vh}
}
@media(prefers-reduced-motion:reduce){
 .karaoke-stage .karaoke-reader-line{transition:none}
}

/* Karaoke uses the same pixel-validated cover decision as GNARLY player.
 * High-resolution stage artwork remains cover; low-resolution video thumbnails
 * are shown at native device-pixel size in a decorative letterbox composition.
 */
.karaoke-stage-wallpaper:has(img[data-art-quality="low"]),
.karaoke-stage-wallpaper:has(img[data-art-quality="unknown"]){
 background:radial-gradient(ellipse at 18% 22%,#16413c 0,transparent 58%),
 radial-gradient(ellipse at 84% 72%,#3c2539 0,transparent 60%),#0b1015;
}
/* Quality badges never reduce the immersive cover size. */
.karaoke-stage-wallpaper img[data-art-quality="low"],
.karaoke-stage-wallpaper img[data-art-quality="unknown"]{
 object-fit:cover;width:100%;height:100%;margin:0;display:block;
 filter:blur(5px) saturate(1.08);opacity:.53;transform:scale(1.018);
}

/* Compact karaoke HUD · stable geometry independent of lyric/stanza length.
 * No flex-auto margins, height changes or single-line ellipsis may push
 * the fixed player anchor. The reader remains independently scrollable when
 * an unusually long lyric exceeds the available space at the minimum size. */
.app-shell .compact-karaoke-slot{
  flex:0 0 clamp(112px,14dvh,150px);
  height:clamp(112px,14dvh,150px);
  width:100%;max-width:min(100%,900px);min-width:0;
  align-self:center;
  margin:clamp(8px,1.5vh,16px) auto 0;
  display:grid;grid-template:1fr/1fr;
  place-items:center;
  position:relative;isolation:isolate;
}
.app-shell .compact-karaoke-slot .floating-lyrics{
  display:flex;align-items:center;justify-content:center;
  position:relative;min-width:0;
  width:100%;height:100%;max-height:none!important;
  max-width:100%;margin:0!important;
  padding:8px clamp(41px,7.5vw,55px) 8px clamp(10px,2.5vw,20px);
  overflow:visible!important;
  font-size:calc(20px * var(--gnarly-lyric-scale,1) * var(--gnarly-hud-fit-scale,1));
  line-height:1.25;
}
.app-shell .compact-karaoke-slot .floating-lyrics[hidden]{
  display:none!important;
}
.app-shell .compact-karaoke-slot #floating-line{
  /* Absolutely bound to the reserved slot: percentages inside the flex row
     allowed tall stanzas to enlarge their own scroll viewport on Safari. */
  position:absolute;top:8px;bottom:8px;
  left:clamp(10px,2.5vw,20px);right:clamp(41px,7.5vw,55px);
  display:block;width:auto;min-width:0;max-width:none;
  height:auto;max-height:none!important;min-height:0;
  align-content:safe center;
  overflow-x:hidden;overflow-y:auto;
  white-space:normal!important;text-overflow:clip!important;
  overflow-wrap:anywhere;word-break:normal;text-wrap:balance;
  line-height:1.27;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
}
.app-shell .compact-karaoke-slot #floating-line::-webkit-scrollbar{display:none}
.app-shell .compact-karaoke-slot #floating-line .gnarly-typeart{
  max-width:100%;white-space:normal;
  overflow-wrap:anywhere;
}
.app-shell .compact-karaoke-slot .karaoke-compact-expand{
  right:clamp(4px,1.4vw,12px);top:50%;
  transform:translateY(-50%);
  flex:0 0 34px;z-index:1;
}
@media(max-height:650px){
 .app-shell .compact-karaoke-slot{
   flex-basis:92px;height:92px;margin-top:5px;
 }
 .app-shell .compact-karaoke-slot .floating-lyrics{padding-block:3px}
 .app-shell .compact-karaoke-slot #floating-line{top:3px;bottom:3px}
}
@media(max-width:360px){
 .app-shell .compact-karaoke-slot .floating-lyrics{
   padding-right:39px;padding-left:4px;
 }
 .app-shell .compact-karaoke-slot #floating-line{right:39px;left:4px}
}

/* Phone pairing belongs to the existing expanded karaoke, not a second player. */
.karaoke-remote-panel[hidden]{display:none!important}
.karaoke-remote-panel{flex:0 0 auto;display:grid;gap:7px;padding:12px 14px;margin:0 0 11px;
 background:rgba(15,25,20,.92);border:1px solid color-mix(in srgb,var(--acid,#46ff12) 42%,#ffffff2f);
 border-radius:17px;color:#f8fff8}
.karaoke-remote-panel strong{font-size:14px}.karaoke-remote-panel p{font-size:12px;color:#d3e3d4;margin:1px 0}
.karaoke-remote-panel label,.karaoke-remote-panel small{font-size:11px;color:#b2c1b3;line-height:1.4}
.karaoke-remote-link-row{display:flex;gap:8px;min-width:0}
.karaoke-remote-link-row input{min-width:0;flex:1;background:#060e08;color:#dcffe4;border:1px solid #ffffff3a;
 border-radius:10px;padding:10px 9px;font-size:12px}
.karaoke-remote-link-row button{flex:0 0 auto;min-height:42px;border-radius:10px;border:0;
 padding:0 12px;background:var(--acid,#46ff12);color:#091109;font-size:12px;font-weight:800}
@media(max-width:560px){.karaoke-remote-link-row{flex-direction:column}}

.karaoke-input-panel{padding:16px 0;border-bottom:1px solid #ffffff20}.karaoke-input-panel [data-karaoke-feedback]{font-size:12px;color:#c8eda5}.karaoke-input-panel [data-karaoke-input-state]{font-size:12px}.karaoke-input-panel .karaoke-score-meter{height:5px;background:#ffffff15;border-radius:8px;overflow:hidden}.karaoke-input-panel .karaoke-score-meter span{height:100%;display:block;background:#c8eda5;width:0;transition:width .1s}
/* Exibição > Legendas: hide ONLY the inline lyrics, never the stage, audio,
   timing pipeline or the independent button that opens expanded karaoke.
   Reclaim the large reserved subtitle slot when the option is turned off. */
.app-shell[data-lyrics-visible="false"] .compact-karaoke-slot{
 flex:0 0 44px!important;height:44px!important;
 margin:4px auto 0!important;
}
.app-shell[data-lyrics-visible="false"] .compact-karaoke-slot #floating-line{
 display:none!important;
}
.app-shell[data-lyrics-visible="false"] .compact-karaoke-slot .floating-lyrics{
 padding:0 8px!important;justify-content:flex-end!important;
}
.app-shell[data-lyrics-visible="false"] .compact-karaoke-slot .karaoke-compact-expand{
 position:relative;top:auto;right:auto;transform:none;
 width:35px;height:35px;flex:0 0 35px;
 border-color:color-mix(in srgb,var(--acid,#46ff12) 55%,#ffffff38);
}


/* GNARLY stylesheet: search-hierarchy.css */
/* GNARLY search hierarchy — a small search control, full-power sheet.
 * Loaded after legacy pill and desktop rules; no shader/audio changes.
 */
/* Preserve native hidden semantics: the old desktop .omnibox-shell rules
 * used display and could otherwise make a hidden magnifier reappear. */
.app-shell .quick-actions #omnibox-shell[hidden],
.app-shell #brand-line[hidden]{display:none!important}
.app-shell .quick-actions #omnibox-shell{
 position:relative;display:block;flex:0 0 42px;
 width:42px!important;max-width:42px!important;height:42px;
 margin:0!important;padding:0;border:0;border-radius:50%;
 background:transparent;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;
}
.app-shell .quick-actions #omnibox-toggle{
 display:grid;place-items:center;min-width:42px;width:42px;height:42px;
 min-height:42px;margin:0;padding:0;border-radius:50%;
 color:#f6fff7;border:1px solid rgba(255,255,255,.21);
 background:rgba(27,29,28,.48);
 -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
 box-shadow:0 0 18px color-mix(in srgb,var(--acid) 7%,transparent);
 transition:color .18s,border-color .18s,background .18s;
}
.app-shell .quick-actions #omnibox-toggle .icon{width:22px;height:22px}
.app-shell .quick-actions #omnibox-toggle:hover,
.app-shell .quick-actions #omnibox-toggle[aria-expanded="true"]{
 color:var(--acid);border-color:color-mix(in srgb,var(--acid) 65%,rgba(255,255,255,.14));
 background:color-mix(in srgb,var(--acid) 12%,rgba(27,29,28,.65));
}
.app-shell .quick-actions #omnibox-toggle:focus-visible{outline:2px solid var(--acid);outline-offset:3px}
.app-shell .brand-line.search-only{display:flex;justify-content:center}
.app-shell .brand-line.search-only .brand-identity,
.app-shell .brand-line.search-only .quick-actions>*:not(#omnibox-shell){display:none!important}
/* The search launcher stays reachable when the user scrolls through an open
 * Music/Export/DJ module. It doesn't move the player or GPU canvas.
 */
.app-shell:has(.module-drawer.is-open) .brand-line:not([hidden]){
 position:sticky;top:calc(3px + env(safe-area-inset-top,0px));z-index:7;
}
.app-shell:has(.module-drawer.is-open) .brand-line:not([hidden])::before{
 content:'';position:absolute;inset:-5px -8px;z-index:-1;pointer-events:none;
 border-radius:16px;background:rgba(9,16,16,.55);
 -webkit-backdrop-filter:blur(13px);backdrop-filter:blur(13px);
}
/* Search and other sheets are VIEWPORT modals, not absolutely placed at the
 * beginning of the growing page. The Music drawer must never push them away.
 */
.app-shell #panel-backdrop{
 position:fixed;inset:0;z-index:40;
 /* Full-viewport hit target, never positioned after the Music drawer. */
}
.app-shell #bottom-sheet{
 position:fixed;z-index:41;
 /* Legacy @keyframes rise translated the open modal 24px BELOW the viewport
  * for the first frame. Keep it anchored from the very first paint. */
 animation:none;
 max-height:calc(100dvh - env(safe-area-inset-top,0px) - 8px);
}
html.gnarly-sheet-open,body.gnarly-sheet-open{
 overflow:hidden!important;overscroll-behavior:none;
}
.app-shell #toast:not([hidden]){z-index:42;position:fixed}
.app-shell #bottom-sheet[hidden],.app-shell #panel-backdrop[hidden]{display:none!important}
.app-shell #bottom-sheet .sheet-content{min-height:0;overscroll-behavior:contain}
/* Expanding Music no longer grows a multi-screen document and displaces the
 * search access. Only the drawer's own controls scroll when necessary. */
.app-shell .module-drawer.is-open .module-body{
 max-height:min(62dvh,650px);overflow-y:auto;overscroll-behavior:contain;
 scrollbar-color:color-mix(in srgb,var(--acid) 35%,transparent) transparent;
}
@media(max-width:650px){
 .app-shell .quick-actions #omnibox-shell{
  flex-basis:clamp(37px,10vw,42px);
  width:clamp(37px,10vw,42px)!important;
  max-width:clamp(37px,10vw,42px)!important;
  height:clamp(37px,10vw,42px);
 }
 .app-shell .quick-actions #omnibox-toggle{
  min-width:37px;width:100%;height:100%;min-height:37px;
 }
 .app-shell .quick-actions #omnibox-toggle .icon{width:20px;height:20px}
 .app-shell #bottom-sheet{width:100%;left:0;right:0;bottom:0}
}
@media(min-width:900px) and (pointer:fine){
 .app-shell #bottom-sheet:not(.display-sheet),
 .app-shell #bottom-sheet.display-sheet{
  top:clamp(90px,11vh,125px);bottom:auto;
  height:min(77dvh,850px);
  max-height:calc(100dvh - 100px);
 }
}
@media(prefers-reduced-motion:reduce){
 .app-shell .quick-actions #omnibox-toggle{transition:none}
}

/* The quick-action row takes precedence over the old fullscreen/desktop
 * .app-shell .omnibox-shell pill dimensions. No duplicate search launcher.
 */
html.gnarly-fullscreen .app-shell .quick-actions #omnibox-shell{
 margin:0!important;max-width:42px!important;
}
@media(max-width:420px){
 .app-shell .brand-line:has(#omnibox-shell:not([hidden])) .quick-actions{gap:3px}
 .app-shell .brand-line:has(#omnibox-shell:not([hidden])) .brand-identity h1{font-size:clamp(25px,7vw,34px)}
}

/* The support heart was flush with the page border after adding the loupe.
 * Reserve an actual safe inset for the rightmost action instead of allowing
 * the button border/focus ring to be laid out against the shell edge.
 * The magnifier's 42px diameter, styling, and icon are not modified. */
@media(max-width:650px){
 .app-shell .brand-line:not(.search-only){
  box-sizing:border-box;
  grid-template-columns:minmax(0,1fr) max-content;
  gap:5px;
  padding-inline-end:max(10px,env(safe-area-inset-right,0px));
 }
 .app-shell .brand-line:not(.search-only) .brand-identity,
 .app-shell .brand-line:not(.search-only) .brand-copy{
  min-width:0;
 }
 .app-shell .brand-line:not(.search-only) .quick-actions{
  min-width:0;gap:3px;flex:0 0 auto;
 }
 .app-shell .brand-line:not(.search-only) .build-badge{
  overflow-wrap:anywhere;
 }
}

/* Viewport-safe action rows: the previous patch only tested the support link
 * against the brand-row box. Eight topbar circles and their halos need their
 * own safe insets; flex-basis accumulated and pushed the last button past the
 * mobile viewport. Grid gives every icon a definite, shrinkable cell. */
@media(max-width:650px){
 .app-shell .topbar{
  display:grid;
  grid-template-columns:repeat(8,minmax(0,1fr));
  column-gap:clamp(1px,.55vw,4px);
  justify-content:normal;
  align-items:center;
  width:100%;
  min-width:0;
  padding-inline:max(15px,env(safe-area-inset-left,0px))
                 max(15px,env(safe-area-inset-right,0px));
 }
 .app-shell .topbar > .icon-button{
  box-sizing:border-box;
  display:grid;
  justify-self:center;
  place-self:center;
  flex:none;
  width:min(100%,42px);
  min-width:0;
  max-width:100%;
  height:clamp(36px,10.2vw,44px);
 }
 /* Performance and fullscreen stay available through More on compact
  * screens, including a resized desktop browser with a fine pointer. */
 .app-shell #performance-button,
 .app-shell #fullscreen-button{display:none!important}
 .app-shell .brand-line:not(.search-only){
  box-sizing:border-box;
  grid-template-columns:minmax(0,1fr) max-content;
  min-width:0;
  max-width:100%;
  padding-inline-end:max(22px,env(safe-area-inset-right,0px));
 }
 .app-shell .brand-line:not(.search-only) .quick-actions{
  flex-wrap:nowrap;gap:3px;justify-content:flex-end;
  max-width:100%;
 }
}
@media(min-width:651px){
 /* The last header button needs space for its border and shadow even
  * when the brand row itself correctly fits the viewport. */
 .app-shell .brand-line:not(.search-only){
  box-sizing:border-box;
  min-width:0;max-width:100%;
  padding-inline-end:max(20px,env(safe-area-inset-right,0px));
 }
}