/* P4F16 — consolidated LP Listener layout/state cleanup.
   One shared geometry model, one typography system, and one drawer state owner. */
:root{
    --cream:#f1e8cf;
    --muted:#a99e8b;
    --amber:#e5b763;
    --green:#8dac83;
    --safe-top:env(safe-area-inset-top,0px);
    --safe-bottom:env(safe-area-inset-bottom,0px);

    --ui-mono:"Courier New","Lucida Console",monospace;

    --mobius-black:#070707;
    --mobius-white:#eeeae1;
    --mobius-ink:#11100f;

    /* One accent owner. P6F keeps the historic red as the default, but every
       Möbius accent shade derives from this single variable so an album-derived
       color can replace it later with one JS setProperty call. */
    --mobius-accent:#a9131b;
    --mobius-red:var(--mobius-accent);
    --mobius-red-dark:color-mix(in srgb,var(--mobius-accent) 70%,#000);
    --mobius-red-bright:color-mix(in srgb,var(--mobius-accent) 86%,#fff);
    --mobius-red-top:color-mix(in srgb,var(--mobius-accent) 90%,#fff);
    --mobius-red-hover-top:color-mix(in srgb,var(--mobius-accent) 84%,#fff);
    --mobius-red-hover-bottom:color-mix(in srgb,var(--mobius-accent) 82%,#000);

    --listen-w:clamp(230px,22dvh,295px);
    --ticker-h:38px;
    --artwork-top-gap:40px;
    --artwork-size:min(94vw,calc(100dvh - var(--safe-top) - var(--safe-bottom) - var(--artwork-top-gap) - var(--ticker-h)));
    --artwork-top-y:calc(var(--safe-top) + var(--artwork-top-gap));

    --actuator-h:28px;
    --actuator-gap:4px;
    --drawer-thumb-size:min(210px,calc(var(--listen-w) - 56px));
    --actuator-w:var(--drawer-thumb-size);
    --caret-w:30px;
    --caret-h:30px;
    --drawer-slide-ms:360ms;
    --ticker-gap:10px;
}

*{box-sizing:border-box}
html,body{
    margin:0;
    width:100%;
    height:100%;
    overflow:hidden;
    background:#090809;
    color:var(--cream);
    font-family:var(--ui-mono);
}
button,a{font:inherit}
button{color:inherit}

/* -----------------------------
   Canvas / artwork
   ----------------------------- */
.visualizer-canvas{
    position:relative;
    width:100vw;
    height:100dvh;
    overflow:hidden;
    background:radial-gradient(circle at 50% 45%,#181116 0,#0b090b 58%,#050405 100%);
    isolation:isolate;
}
.canvas-artwork[hidden]{display:none !important}
.canvas-artwork{
    position:absolute;
    z-index:2;
    left:50%;
    top:var(--artwork-top-y);
    width:var(--artwork-size);
    height:var(--artwork-size);
    transform:translateX(-50%);
    background:#050505;
}
.canvas-cover{display:block;object-fit:contain}
.pixel-canvas{
    display:block;
    image-rendering:pixelated;
    image-rendering:crisp-edges;
    filter:saturate(.9) contrast(1.08);
}
.canvas-placeholder{
    position:absolute;
    inset:0;
    z-index:1;
    display:grid;
    place-content:center;
    justify-items:center;
    gap:24px;
    color:#766d63;
    letter-spacing:.32em;
    font:600 .78rem var(--ui-mono);
}
.canvas-placeholder[hidden]{display:none}
.canvas-record{
    position:relative;
    width:min(42vw,280px);
    aspect-ratio:1;
    border-radius:50%;
    background:repeating-radial-gradient(circle,#101010 0 4px,#1c1b1c 5px 8px);
    box-shadow:0 0 0 1px #333,0 24px 80px #000;
}
.canvas-record-label{position:absolute;inset:35%;border-radius:50%;background:var(--mobius-red-bright)}
.canvas-placeholder>span{
    color:var(--mobius-red-bright);
    font-style:italic;
    text-shadow:0 0 5px color-mix(in srgb,var(--mobius-accent) 22%,transparent);
}
.canvas-shade{
    position:absolute;
    inset:0;
    z-index:3;
    pointer-events:none;
    background:linear-gradient(90deg,rgba(0,0,0,.12),transparent 10%,transparent 90%,rgba(0,0,0,.12));
}
/* -----------------------------
   LP: LISTEN actuator + live meter
   ----------------------------- */
.drawer-actuator{
    position:absolute;
    z-index:82;
    inset:0;
    pointer-events:none;
}
.drawer-actuator button{pointer-events:auto}
.drawer-actuator button[hidden]{display:none !important}

.drawer-actuator-title{
    position:absolute;
    top:calc(var(--artwork-top-y) - var(--actuator-h) - var(--actuator-gap));
    left:calc((var(--listen-w) - var(--actuator-w))/2);
    width:var(--actuator-w);
    height:var(--actuator-h);
    margin:0;
    padding:0 10px;
    border:1px solid #f1ede5;
    border-radius:3px;
    background:linear-gradient(180deg,var(--mobius-red-top) 0%,var(--mobius-red) 100%);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.12),inset 0 -1px 0 rgba(0,0,0,.35);
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    overflow:hidden;
}
.drawer-actuator-title:hover,
.drawer-actuator-title:focus-visible,
.drawer-actuator-title.recognition-active,
.drawer-actuator-mic-button:hover,
.drawer-actuator-mic-button:focus-visible,
.drawer-actuator-mic-button.recognition-active{
    background:linear-gradient(180deg,var(--mobius-red-hover-top) 0%,var(--mobius-red-hover-bottom) 100%);
    border-color:#fff;
}
.drawer-actuator-title:focus-visible,
.drawer-actuator-mic-button:focus-visible,
.drawer-actuator-caret:focus-visible{outline:1px solid #fff;outline-offset:1px}
.drawer-actuator-label{
    display:inline-flex;
    align-items:baseline;
    gap:5px;
    color:#fff;
    font:400 italic .79rem/1 var(--ui-mono);
    letter-spacing:.045em;
    white-space:nowrap;
}
.drawer-actuator-lp,
.drawer-actuator-listen-text{
    margin:0;
    color:inherit;
    font:inherit;
    letter-spacing:inherit;
}

.drawer-actuator-caret,
.drawer-actuator-mic-button{
    position:absolute;
    top:calc(var(--artwork-top-y) - var(--actuator-h) - var(--actuator-gap));
    width:var(--caret-w);
    height:var(--actuator-h);
    min-height:var(--actuator-h);
    margin:0;
    padding:0;
    border:1px solid #efeee9;
    border-radius:3px;
    background:var(--mobius-red-dark);
    color:#fff;
    display:grid;
    place-items:center;
    cursor:pointer;
    box-shadow:none;
}
.drawer-actuator-left,
.drawer-actuator-right{
    left:calc((var(--listen-w) - var(--actuator-w))/2 - var(--caret-w) - var(--actuator-gap));
    font:700 1.15rem/1 var(--ui-mono);
}
.drawer-actuator-mic-button{
    left:calc((var(--listen-w) - var(--actuator-w))/2 + var(--actuator-w) + var(--actuator-gap));
    background:var(--mobius-red-dark);
}
.drawer-mic-icon{
    width:15px;
    height:15px;
    fill:#fff;
}
.drawer-actuator-caret:hover,
.drawer-actuator-caret:focus-visible{background:var(--mobius-red);border-color:#fff}

.actuator-signal-diagnostics{
    position:absolute;
    top:calc(var(--artwork-top-y) - var(--actuator-h) - var(--actuator-gap) + 3px);
    left:calc((var(--listen-w) - var(--actuator-w))/2 + var(--actuator-w) + var(--actuator-gap) + var(--caret-w) + 9px);
    width:clamp(145px,22vw,260px);
    height:var(--actuator-h);
    margin:0;
    pointer-events:none;
    display:grid;
    grid-template-rows:14px 11px;
    gap:2px;
    opacity:1;
    transition:opacity 120ms ease;
}
.actuator-signal-diagnostics .signal-bar{
    height:14px;
    border:1px solid #80786e;
    background:#000;
    overflow:hidden;
}
.signal-bar-fill{
    width:0;
    height:100%;
    background:linear-gradient(90deg,#60785c 0 52%,#b69a55 74%,#ad3b48 100%);
    transition:width 90ms linear;
}
.actuator-signal-diagnostics .signal-readouts{
    display:grid;
    grid-template-columns:1fr auto;
    gap:8px;
    margin:0;
    color:#eeeae1;
    font:400 .50rem/1 var(--ui-mono);
    letter-spacing:.03em;
    white-space:nowrap;
}
body:not(.listening) .actuator-signal-diagnostics{opacity:0}
body:not(.listening) .actuator-signal-diagnostics .signal-bar-fill{width:0 !important;transition:none}

/* -----------------------------
   Möbius drawer
   Same vertical bounds as the main artwork.
   ----------------------------- */
.listener-drawer.mobius-strip{
    position:absolute;
    z-index:50;
    top:var(--artwork-top-y);
    left:0;
    width:var(--listen-w);
    height:var(--artwork-size);
    display:grid !important;
    grid-template-rows:30fr 24fr 8fr 32fr 6fr;
    overflow:hidden;
    background:var(--mobius-black);
    border:0;
    box-shadow:none;
    transform:translate3d(0,0,0);
    transition:transform var(--drawer-slide-ms) cubic-bezier(.22,.78,.24,1);
    will-change:transform;
}
body.drawer-collapsed .listener-drawer.mobius-strip{
    transform:translate3d(-100%,0,0);
    pointer-events:none;
}
.mobius-block{
    position:relative;
    min-width:0;
    min-height:0;
    overflow:hidden;
    border-bottom:3px solid var(--mobius-black);
}
.mobius-block:last-child{border-bottom:0}

/* Thumbnail section */
.mobius-block-brand{
    display:grid;
    place-items:center;
    padding:10px 12px;
    background:var(--mobius-white);
}
/* The clean cover thumbnail is centered directly in the first white block. */
.drawer-cover-thumb-wrap{
    width:100%;
    height:100%;
    min-height:0;
    display:grid;
    place-items:center;
    overflow:hidden;
}
.drawer-cover-thumb-wrap[hidden]{display:none !important}
.drawer-cover-thumb{
    display:block;
    width:var(--drawer-thumb-size);
    max-width:100%;
    max-height:100%;
    aspect-ratio:1;
    object-fit:contain;
    background:#fff;
    border:2px solid var(--mobius-black);
}

.drawer-cover-thumb,
.drawer-cover-listening-canvas{
    grid-area:1 / 1;
}
.drawer-cover-listening-canvas{
    display:block;
    width:var(--drawer-thumb-size);
    max-width:100%;
    max-height:100%;
    aspect-ratio:1;
    background:#fff;
    border:2px solid var(--mobius-black);
    image-rendering:pixelated;
    image-rendering:crisp-edges;
    pointer-events:none;
    transform-origin:center;
}
.drawer-cover-listening-canvas[hidden]{display:none !important}
body.thumbnail-listening .drawer-cover-listening-canvas{
    animation:thumbnail-listen-shudder 1.8s ease-in-out infinite;
}
@keyframes thumbnail-listen-shudder{
    0%,100%{transform:translate3d(0,0,0) scale(1);opacity:.98}
    24%{transform:translate3d(.45px,-.35px,0) scale(1.004);opacity:.94}
    52%{transform:translate3d(-.35px,.3px,0) scale(.997);opacity:1}
    78%{transform:translate3d(.25px,.2px,0) scale(1.003);opacity:.96}
}
@media (prefers-reduced-motion:reduce){
    body.thumbnail-listening .drawer-cover-listening-canvas{animation:none}
}

/* Status + result section */
.mobius-block-metadata{
    display:grid;
    grid-template-rows:auto minmax(0,1fr);
    align-content:start;
    gap:11px;
    padding:10px 14px 12px;
    background:var(--mobius-white);
    color:var(--mobius-ink);
    font-family:var(--ui-mono);
}
.status-display{
    color:#f0ead8;
    font-family:var(--ui-mono);
    letter-spacing:.08em;
}
.metadata-status-display{
    justify-self:center;
    min-width:min(190px,100%);
    min-height:36px;
    padding:7px 12px;
    border:2px solid var(--mobius-black);
    background:#080908;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    font-size:.66rem;
    white-space:nowrap;
}
.metadata-status-display #statusText,
.metadata-status-display .status-timer{font-weight:700}
.status-lamp{
    display:inline-block;
    width:9px;
    height:9px;
    border-radius:50%;
    background:var(--green);
    box-shadow:0 0 9px var(--green);
}
.status-separator{color:#9a8d82}
.status-timer{color:var(--mobius-red-bright);letter-spacing:.08em}

.metadata-result-grid{
    width:100%;
    display:grid;
    align-content:start;
    gap:7px;
    min-width:0;
}
.metadata-row{
    display:grid;
    grid-template-columns:72px minmax(0,1fr);
    align-items:baseline;
    gap:9px;
    min-width:0;
    margin:0;
    font-size:.76rem;
    font-weight:400;
    line-height:1.18;
}
.metadata-label,
.metadata-value{
    font:inherit;
}
.metadata-label{
    color:var(--mobius-red);
    letter-spacing:.06em;
}
.metadata-value{
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    color:var(--mobius-ink);
}

/* White spacer block */
.mobius-block-blank{background:var(--mobius-white)}

/* Red service block */
.mobius-block-links{
    display:flex;
    align-items:flex-end;
    justify-content:center;
    padding:12px 12px 15px;
    background:var(--mobius-red);
    border-top:0;
}
.music-links{
    width:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:18px;
    padding:0;
    margin:0;
    border:0;
}
.music-link{text-decoration:none}
.service-icon-link{
    width:48px;
    height:48px;
    min-height:48px;
    padding:5px;
    border:2px solid var(--mobius-black);
    border-radius:50%;
    background:var(--mobius-white);
    display:grid;
    place-items:center;
}
.service-icon-link:hover{border-color:#fff}
.service-icon-link.disabled{pointer-events:none;opacity:.30}
.service-icon{display:block;max-width:100%;max-height:100%;object-fit:contain}
.service-icon-discogs{filter:grayscale(1) brightness(.15)}
.service-icon-allmusic{max-width:31px;max-height:38px}
.service-icon-amazon{max-width:34px;max-height:34px}

/* Bottom red block remains completely inside drawer geometry. */
.mobius-block-footer{
    margin:0;
    padding:0;
    background:var(--mobius-red-dark);
    border-top:0;
}

/* -----------------------------
   Bottom result ticker
   ----------------------------- */
.now-playing-ticker{
    position:absolute;
    z-index:34;
    left:0;
    right:0;
    bottom:var(--safe-bottom);
    height:var(--ticker-h);
    min-height:var(--ticker-h);
    overflow:hidden;
    background:#010301;
    border-top:1px solid #1d351e;
    border-bottom:1px solid #081008;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
}
body.has-identification .now-playing-ticker{opacity:1;visibility:visible}
.ticker-marquee-track{
    position:absolute;
    inset:0 auto 0 0;
    width:max-content;
    display:flex;
    align-items:center;
    gap:0;
    will-change:transform;
    --ticker-duration:48s;
}
.ticker-marquee-track.ticker-running{
    animation:lpTickerSeamless var(--ticker-duration) linear infinite;
}
@keyframes lpTickerSeamless{
    from{transform:translate3d(0,0,0)}
    to{transform:translate3d(-50%,0,0)}
}
.winamp-ticker-line{
    width:max-content;
    min-width:max-content;
    flex:0 0 auto;
    display:flex;
    align-items:center;
    gap:8px;
    height:100%;
    padding:0 var(--ticker-gap) 0 6px;
    color:#45ff39;
    font:400 .78rem/1 var(--ui-mono);
    letter-spacing:.035em;
    white-space:nowrap;
    text-shadow:0 0 2px rgba(69,255,57,.28);
}
.ticker-field{display:inline-flex;align-items:baseline;gap:5px}
.ticker-label{
    color:#45ff39;
    font-family:inherit;
    font-size:inherit;
    font-style:italic;
    font-weight:400;
    line-height:inherit;
    letter-spacing:.045em;
}
.ticker-value{
    color:#45ff39;
    font-family:inherit;
    font-size:inherit;
    font-style:normal;
    font-weight:400;
    letter-spacing:inherit;
}
.ticker-separator{color:#45ff39}
.ticker-tail-separator{margin-left:-2px}
.now-playing-ticker.result-pulse{box-shadow:inset 0 0 20px rgba(69,255,57,.12)}

/* -----------------------------
   Settings
   ----------------------------- */
.settings-button{
    position:absolute;
    z-index:90;
    top:calc(var(--safe-top) + 12px);
    right:12px;
    width:44px;
    height:44px;
    border:1px solid rgba(181,170,160,.48);
    border-radius:50%;
    background:rgba(18,15,16,.88);
    color:var(--cream);
    font-size:1.25rem;
    cursor:pointer;
    backdrop-filter:blur(9px);
    -webkit-backdrop-filter:blur(9px);
}
.settings-panel{
    position:absolute;
    z-index:91;
    top:calc(var(--safe-top) + 62px);
    right:12px;
    width:min(320px,calc(100vw - 24px));
    padding:13px 14px 15px;
    border:1px solid rgba(181,170,160,.48);
    border-radius:10px;
    background:rgba(18,15,17,.97);
    box-shadow:0 14px 44px rgba(0,0,0,.55);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
}
.settings-panel[hidden]{display:none}
.settings-panel-heading{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:11px;
    color:var(--muted);
    font-size:.68rem;
    letter-spacing:.18em;
}
.settings-panel-heading button{
    width:32px;
    height:32px;
    border:0;
    background:transparent;
    color:var(--cream);
    font-size:1.25rem;
    cursor:pointer;
}
.checkbox-setting{display:flex;align-items:center;gap:10px;min-height:42px;color:var(--cream);font-size:.85rem;cursor:pointer}
.checkbox-setting input{width:18px;height:18px;accent-color:var(--amber)}
.settings-note{color:#80776c;font-size:.69rem;line-height:1.35}
.settings-divider{height:1px;margin:12px 0;background:rgba(102,93,85,.48)}
.settings-heading{margin-bottom:6px;color:var(--muted);font-size:.66rem;letter-spacing:.16em}
.setting-preview{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-bottom:1px solid rgba(102,93,85,.24);font-size:.71rem;letter-spacing:.06em}
.setting-preview span{color:#746c63;font-size:.63rem}
.randomizer-preview{margin-top:10px;padding:7px 10px;border:1px solid #5a524c;color:var(--muted);background:#171414;letter-spacing:.08em;font-size:.7rem}
.randomizer-preview:disabled{cursor:not-allowed;opacity:.38}
.debug-download{
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:36px;
    margin-top:9px;
    border:1px solid rgba(181,170,160,.42);
    border-radius:4px;
    color:var(--cream);
    font-size:.67rem;
    letter-spacing:.08em;
    text-decoration:none;
    background:rgba(255,255,255,.025);
}
.debug-download.disabled{pointer-events:none;opacity:.38}
.debug-status{margin-top:6px}

/* -----------------------------
   Responsive
   ----------------------------- */
@media(max-width:700px){
    :root{
        --listen-w:clamp(210px,62vw,255px);
        --ticker-h:34px;
        --artwork-top-gap:36px;
        --actuator-h:25px;
        --drawer-thumb-size:min(170px,calc(var(--listen-w) - 52px));
        --caret-w:28px;
        --caret-h:28px;
        --ticker-gap:8px;
    }
    .drawer-actuator-title{padding-inline:8px}
    .drawer-mic-icon{width:14px;height:14px}
    .drawer-actuator-label{font-size:.70rem;letter-spacing:.035em;gap:4px}
    .actuator-signal-diagnostics{
        left:calc((var(--listen-w) - var(--actuator-w))/2 + var(--actuator-w) + var(--actuator-gap) + var(--caret-w) + 7px);
        width:clamp(115px,30vw,180px);
        grid-template-rows:12px 10px;
    }
    .actuator-signal-diagnostics .signal-bar{height:12px}
    .actuator-signal-diagnostics .signal-readouts{font-size:.43rem;gap:5px}
    .mobius-block-brand{padding:8px 10px}
    .mobius-block-metadata{padding:8px 10px 10px;gap:8px}
    .metadata-status-display{min-height:31px;padding:5px 8px;font-size:.58rem}
    .metadata-result-grid{gap:5px}
    .metadata-row{grid-template-columns:61px minmax(0,1fr);gap:7px;font-size:.68rem}
    .service-icon-link{width:42px;height:42px;min-height:42px}
    .winamp-ticker-line{font-size:.69rem;gap:8px;padding-left:10px}
}

@media(max-width:430px){
    :root{
        --listen-w:min(245px,68vw);
        --artwork-top-gap:34px;
        --ticker-h:32px;
        --drawer-thumb-size:min(155px,calc(var(--listen-w) - 48px));
    }
    .drawer-actuator-label{font-size:.66rem}
    .actuator-signal-diagnostics{display:none}
    .metadata-row{grid-template-columns:56px minmax(0,1fr);font-size:.64rem}
}

@media(prefers-reduced-motion:reduce){
    .listener-drawer.mobius-strip{transition:none}
    .signal-bar-fill{transition:none}
    .ticker-marquee-track.ticker-running{animation:none;transform:none}
}

/* -----------------------------
   P5C visualizer selector + reactive canvas
   ----------------------------- */
.reactive-canvas{
    display:block;
    image-rendering:auto;
    filter:contrast(1.04);
}

.mobius-block-links{
    display:grid;
    grid-template-rows:minmax(0,1fr) auto;
    align-items:stretch;
    justify-items:stretch;
    gap:8px;
    padding:8px 10px 10px;
}

.visualizer-selector{
    min-width:0;
    min-height:0;
    margin:0;
    padding:0;
    border:0;
    display:grid;
    align-content:center;
    gap:4px;
}
.visualizer-selector legend{
    width:100%;
    margin:0 0 2px;
    padding:0 2px;
    color:rgba(255,255,255,.58);
    font:700 .53rem/1 var(--ui-mono);
    letter-spacing:.13em;
}
.visualizer-choice{
    display:block;
    min-width:0;
    cursor:pointer;
}
.visualizer-choice input{
    position:absolute;
    inline-size:1px;
    block-size:1px;
    opacity:0;
    pointer-events:none;
}
.visualizer-choice-face{
    min-height:27px;
    padding:3px 7px;
    border:1px solid rgba(7,7,7,.72);
    border-radius:3px;
    background:var(--mobius-white);
    color:var(--mobius-ink);
    display:grid;
    grid-template-columns:20px minmax(0,1fr);
    align-items:center;
    gap:7px;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.28),inset 0 -1px 0 rgba(0,0,0,.10);
    font:700 .59rem/1 var(--ui-mono);
    letter-spacing:.025em;
    white-space:nowrap;
    overflow:hidden;
}
.visualizer-choice-face>span{
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
}
.visualizer-choice-face svg{
    width:17px;
    height:17px;
    fill:currentColor;
}
.visualizer-choice:hover .visualizer-choice-face{
    border-color:#fff;
}
.visualizer-choice input:focus-visible + .visualizer-choice-face{
    outline:1px solid #fff;
    outline-offset:1px;
}
.visualizer-choice input:checked + .visualizer-choice-face{
    background:linear-gradient(180deg,var(--mobius-red-top) 0%,var(--mobius-red-dark) 100%);
    color:#fff;
    border-color:#fff;
}

.mobius-block-links .music-links{
    align-self:end;
    gap:14px;
}
.mobius-block-links .service-icon-link{
    width:42px;
    height:42px;
    min-height:42px;
}

@media(max-width:700px){
    .mobius-block-links{padding:6px 8px 8px;gap:6px}
    .visualizer-selector{gap:3px}
    .visualizer-selector legend{font-size:.47rem}
    .visualizer-choice-face{
        min-height:24px;
        grid-template-columns:17px minmax(0,1fr);
        gap:5px;
        padding:2px 6px;
        font-size:.51rem;
    }
    .visualizer-choice-face svg{width:14px;height:14px}
    .mobius-block-links .music-links{gap:10px}
    .mobius-block-links .service-icon-link{width:36px;height:36px;min-height:36px;padding:4px}
}

/* Keep the selector compact enough for the portrait/iOS drawer. */
.mobius-block-links{justify-content:stretch}
@media(max-width:700px){
    .mobius-block-links{padding:4px 6px 6px;gap:3px}
    .visualizer-selector{gap:2px}
    .visualizer-selector legend{display:none}
    .visualizer-choice-face{
        min-height:18px;
        grid-template-columns:13px minmax(0,1fr);
        gap:4px;
        padding:1px 5px;
        font-size:.43rem;
        line-height:1;
    }
    .visualizer-choice-face svg{width:11px;height:11px}
    .mobius-block-links .music-links{gap:8px}
    .mobius-block-links .service-icon-link{width:30px;height:30px;min-height:30px;padding:3px;border-width:1px}
}

/* -----------------------------
   P5E compact top controls + upward Settings drawer
   ----------------------------- */
.drawer-actuator-left,
.drawer-actuator-right{
    left:max(10px,calc((var(--listen-w) - var(--actuator-w))/2 - var(--caret-w) - var(--actuator-gap)));
    border:1px solid #f1ede5;
    border-radius:3px;
}
.drawer-actuator-mic-button{
    border:1px solid #f1ede5;
    border-radius:3px;
}

.mobius-block-footer{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    padding:4px 10px;
}
.settings-button{
    position:static;
    z-index:auto;
    width:30px;
    height:30px;
    min-width:30px;
    min-height:30px;
    padding:0;
    border:1px solid #f1ede5;
    border-radius:3px;
    background:var(--mobius-red-dark);
    color:#fff;
    display:grid;
    place-items:center;
    font:700 1rem/1 var(--ui-mono);
    cursor:pointer;
    box-shadow:none;
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
}
.settings-button:hover,
.settings-button:focus-visible,
.settings-button[aria-expanded="true"]{
    background:var(--mobius-red);
    border-color:#fff;
}
.settings-button:focus-visible{outline:1px solid #fff;outline-offset:1px}

.settings-panel{
    position:absolute;
    z-index:91;
    top:auto;
    right:auto;
    left:8px;
    bottom:calc(var(--safe-bottom) + var(--ticker-h) + 8px);
    width:min(calc(var(--listen-w) - 16px),calc(100vw - 16px));
    max-height:calc(100dvh - var(--safe-top) - var(--ticker-h) - 24px);
    overflow:auto;
    padding:8px;
    border:2px solid var(--mobius-black);
    border-radius:4px 4px 0 0;
    background:var(--mobius-red);
    box-shadow:0 -12px 32px rgba(0,0,0,.42);
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
    transform-origin:left bottom;
}
.settings-panel-heading{
    min-height:25px;
    margin:0 0 6px;
    padding:0 2px;
    color:rgba(255,255,255,.70);
    font:700 .55rem/1 var(--ui-mono);
    letter-spacing:.13em;
}
.settings-panel-heading button{
    width:25px;
    height:25px;
    border:1px solid rgba(255,255,255,.76);
    border-radius:3px;
    background:var(--mobius-red-dark);
    color:#fff;
    display:grid;
    place-items:center;
    font:700 .95rem/1 var(--ui-mono);
}
.settings-heading{
    margin:0 0 3px;
    padding:0 2px;
    color:rgba(255,255,255,.58);
    font:700 .50rem/1 var(--ui-mono);
    letter-spacing:.13em;
}
.settings-section-gap{margin-top:8px}
.settings-note{
    margin:3px 2px 0;
    color:rgba(255,255,255,.58);
    font:.48rem/1.25 var(--ui-mono);
}
.settings-divider{display:none}

.settings-choice{
    display:block;
    min-width:0;
    cursor:pointer;
}
.settings-choice input{
    position:absolute;
    inline-size:1px;
    block-size:1px;
    opacity:0;
    pointer-events:none;
}
.settings-choice-face,
.settings-control-row,
.settings-action{
    width:100%;
    min-height:26px;
    padding:4px 7px;
    border:1px solid rgba(7,7,7,.72);
    border-radius:3px;
    background:var(--mobius-white);
    color:var(--mobius-ink);
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.28),inset 0 -1px 0 rgba(0,0,0,.10);
    font:700 .53rem/1 var(--ui-mono);
    letter-spacing:.025em;
    text-decoration:none;
}
.settings-choice input:checked + .settings-choice-face{
    background:linear-gradient(180deg,var(--mobius-red-top) 0%,var(--mobius-red-dark) 100%);
    color:#fff;
    border-color:#fff;
}
.settings-choice input:focus-visible + .settings-choice-face{
    outline:1px solid #fff;
    outline-offset:1px;
}
.settings-choice-state::before{content:"OFF";font-size:.46rem;letter-spacing:.08em;opacity:.68}
.settings-choice input:checked + .settings-choice-face .settings-choice-state::before{content:"ON";opacity:1}
.settings-control-row{margin-top:3px}
.settings-control-row>span:last-child,
.settings-action>span:last-child{
    color:#71695f;
    font-size:.45rem;
    letter-spacing:.07em;
}
.settings-action{margin-top:3px;cursor:pointer}
.settings-action:hover{border-color:#fff}
.settings-action.disabled,
.settings-action:disabled{pointer-events:none;opacity:.42}
.settings-action-button{appearance:none;text-align:left}

.settings-toggle-button{appearance:none;text-align:left}
.settings-toggle-button[aria-pressed="true"]{
    background:linear-gradient(180deg,var(--mobius-red-top) 0%,var(--mobius-red-dark) 100%);
    color:#fff;
    border-color:#fff;
}
.settings-toggle-button[aria-pressed="true"]>span:last-child{color:#fff}
.settings-toggle-button:focus-visible{outline:1px solid #fff;outline-offset:1px}
.debug-status{margin-top:4px}

@media(max-width:700px){
    .drawer-actuator-left,.drawer-actuator-right{left:max(7px,calc((var(--listen-w) - var(--actuator-w))/2 - var(--caret-w) - var(--actuator-gap)))}
    .mobius-block-footer{padding:3px 7px}
    .settings-button{width:26px;height:26px;min-width:26px;min-height:26px;font-size:.88rem}
    .settings-panel{left:6px;width:min(calc(var(--listen-w) - 12px),calc(100vw - 12px));padding:6px}
    .settings-choice-face,.settings-control-row,.settings-action{min-height:23px;padding:3px 6px;font-size:.48rem}
}

/* -----------------------------
   P5G top-control alignment + reopening hit area + bottom Settings drawer
   ----------------------------- */
:root{
    --top-control-side-pad:6px;
}

/* Fit all three top controls exactly inside the Möbius drawer width. */
.drawer-actuator-left,
.drawer-actuator-right{
    left:var(--top-control-side-pad);
}
.drawer-actuator-title{
    left:calc(var(--top-control-side-pad) + var(--caret-w) + var(--actuator-gap));
    width:calc(var(--listen-w) - var(--top-control-side-pad) - var(--top-control-side-pad) - var(--caret-w) - var(--caret-w) - var(--actuator-gap) - var(--actuator-gap));
}
.drawer-actuator-mic-button{
    left:calc(var(--listen-w) - var(--top-control-side-pad) - var(--caret-w));
    width:var(--caret-w);
}
.actuator-signal-diagnostics{
    left:calc(var(--listen-w) + 9px);
}

/* Settings gear belongs at the far-left of the red footer. */
.mobius-block-footer{
    justify-content:flex-start;
    padding:4px var(--top-control-side-pad);
}
.settings-button{
    display:grid;
    place-items:center;
}
.settings-gear-icon{
    display:block;
    width:16px;
    height:16px;
    margin:0;
    fill:currentColor;
}

/* Settings is a black drawer that rises from the bottom and slides back down. */
.settings-panel{
    left:0;
    bottom:calc(var(--safe-bottom) + var(--ticker-h));
    width:var(--listen-w);
    max-height:min(calc(100dvh - var(--safe-top) - var(--ticker-h) - 8px),calc(var(--artwork-size) + 8px));
    padding:8px;
    overflow:auto;
    border:2px solid #2b2726;
    border-bottom:0;
    border-radius:4px 4px 0 0;
    background:#050505;
    color:#fff;
    box-shadow:0 -12px 32px rgba(0,0,0,.48);
    transform:translate3d(0,calc(100% + 10px),0);
    visibility:hidden;
    pointer-events:none;
    transition:transform 300ms cubic-bezier(.22,.78,.24,1),visibility 0s linear 300ms;
    will-change:transform;
}
.settings-panel.settings-open{
    transform:translate3d(0,0,0);
    visibility:visible;
    pointer-events:auto;
    transition:transform 300ms cubic-bezier(.22,.78,.24,1),visibility 0s linear 0s;
}
.settings-panel-heading{
    display:flex;
    align-items:center;
    justify-content:space-between;
    min-height:25px;
    margin:0 0 6px;
    padding:0 2px;
    color:rgba(255,255,255,.72);
}
.settings-panel-heading button{
    width:25px;
    height:25px;
    padding:0 0 3px;
    border:1px solid #f1ede5;
    border-radius:3px;
    background:var(--mobius-red-dark);
    color:#fff;
    display:grid;
    place-items:center;
    font:700 1rem/1 var(--ui-mono);
    cursor:pointer;
}
.settings-panel-heading button:hover,
.settings-panel-heading button:focus-visible{
    background:var(--mobius-red);
    border-color:#fff;
}

.settings-heading{
    color:rgba(255,255,255,.56);
}
.settings-note{
    color:rgba(255,255,255,.48);
}
.settings-choice-gap{margin-top:4px}
.settings-choice-face,
.settings-control-row,
.settings-action{
    background:#0b0b0b;
    color:#f1ede5;
    border-color:#45413e;
    box-shadow:none;
}
.settings-choice-face{
    justify-content:space-between;
}
.settings-choice-label{
    min-width:0;
    display:flex;
    align-items:center;
    justify-content:flex-start;
    gap:7px;
}
.settings-checkbox-mark{
    position:relative;
    width:14px;
    height:14px;
    min-width:14px;
    border:1px solid #f1ede5;
    border-radius:2px;
    background:#fff;
}
.settings-choice input:checked + .settings-choice-face{
    background:#0b0b0b;
    color:#f1ede5;
    border-color:#45413e;
}
.settings-choice input:checked + .settings-choice-face .settings-checkbox-mark{
    background:var(--mobius-red);
    border-color:#fff;
}
.settings-choice input:checked + .settings-choice-face .settings-checkbox-mark::after{
    content:"✓";
    position:absolute;
    inset:0;
    display:grid;
    place-items:center;
    color:#fff;
    font:700 10px/1 Arial,sans-serif;
}
.settings-choice input:focus-visible + .settings-choice-face{
    outline:1px solid #fff;
    outline-offset:1px;
}
.settings-choice-detail,
.settings-control-row>span:last-child,
.settings-action>span:last-child{
    color:#8c857e;
    font-size:.45rem;
    letter-spacing:.07em;
}
.settings-action:hover{border-color:#f1ede5}
.settings-action.disabled,
.settings-action:disabled{opacity:.38}

/* Legacy push-button auto-listen styling no longer applies: Auto Listen is a checkbox. */
.settings-toggle-button,
.settings-toggle-button[aria-pressed="true"]{
    background:#0b0b0b;
    color:#f1ede5;
    border-color:#45413e;
}

@media(max-width:700px){
    :root{--top-control-side-pad:5px}
    .drawer-actuator-left,
    .drawer-actuator-right{left:var(--top-control-side-pad)}
    .mobius-block-footer{padding:3px var(--top-control-side-pad)}
    .settings-panel{
        left:0;
        width:var(--listen-w);
        padding:6px;
    }
}

@media(prefers-reduced-motion:reduce){
    .settings-panel{transition:none}
}

/* -----------------------------
   P5H immersive visualizer + integrated listen meter + settings refinements
   ----------------------------- */
:root{
    --top-control-side-pad:2px;
    --actuator-gap:3px;
}

/* Fill the drawer width more closely with caret / LP:LISTEN / mic. */
.drawer-actuator-left,
.drawer-actuator-right{left:var(--top-control-side-pad)}
.drawer-actuator-title{
    left:calc(var(--top-control-side-pad) + var(--caret-w) + var(--actuator-gap));
    width:calc(var(--listen-w) - var(--top-control-side-pad) - var(--top-control-side-pad) - var(--caret-w) - var(--caret-w) - var(--actuator-gap) - var(--actuator-gap));
    --listen-glow-alpha:0;
}
.drawer-actuator-mic-button{
    left:calc(var(--listen-w) - var(--top-control-side-pad) - var(--caret-w));
    width:var(--caret-w);
}

/* Meter lives inside LP: LISTEN. Idle is simply the normal red button. */
.listen-level-meter{
    position:absolute;
    left:3px;
    right:3px;
    bottom:2px;
    height:3px;
    overflow:hidden;
    border-radius:2px;
    background:transparent;
    pointer-events:none;
    opacity:0;
    transition:opacity 100ms linear;
}
.listen-level-fill{
    display:block;
    width:0;
    height:100%;
    border-radius:inherit;
    background:linear-gradient(90deg,#78986e 0 48%,#e1bc62 72%,#fff2dc 100%);
    transition:width 75ms linear;
    box-shadow:0 0 5px rgba(255,238,205,.35);
}
body.listening .listen-level-meter{opacity:1}
body.listening .drawer-actuator-title{
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.12),
        inset 0 -1px 0 rgba(0,0,0,.35),
        0 0 12px rgba(229,183,99,var(--listen-glow-alpha));
}
body:not(.listening) .listen-level-fill{width:0 !important;transition:none}

/* Closed drawer = immersive visualizer. Keep the square renderer undistorted and crop as needed. */
.reactive-canvas{
    transition:
        width var(--drawer-slide-ms) cubic-bezier(.22,.78,.24,1),
        height var(--drawer-slide-ms) cubic-bezier(.22,.78,.24,1),
        top var(--drawer-slide-ms) cubic-bezier(.22,.78,.24,1),
        transform var(--drawer-slide-ms) cubic-bezier(.22,.78,.24,1);
}
body.drawer-collapsed .reactive-canvas{
    top:calc((100dvh - var(--safe-bottom) - var(--ticker-h)) / 2);
    width:max(100vw,calc(100dvh - var(--safe-bottom) - var(--ticker-h)));
    height:max(100vw,calc(100dvh - var(--safe-bottom) - var(--ticker-h)));
    transform:translate(-50%,-50%);
}

/* The ticker now belongs to the same red visual language as LP: LISTEN. */
.winamp-ticker-line,
.ticker-label,
.ticker-value,
.ticker-separator{color:var(--mobius-red-bright)}
.winamp-ticker-line{text-shadow:0 0 3px color-mix(in srgb,var(--mobius-accent) 25%,transparent)}
.now-playing-ticker.result-pulse{box-shadow:inset 0 0 20px color-mix(in srgb,var(--mobius-accent) 14%,transparent)}

/* Keep the Settings actuator and close caret in the same bottom-left physical target. */
.listener-drawer.mobius-strip{
    grid-template-rows:30fr 24fr 8fr 32fr 40px;
}
.mobius-block-footer{
    align-items:center;
    padding:0 var(--top-control-side-pad);
}
.settings-panel{
    padding:8px 8px 44px;
    background:#050505;
}
.settings-panel-title{
    margin:0 2px 6px;
    color:rgba(255,255,255,.70);
    font:700 .55rem/1 var(--ui-mono);
    letter-spacing:.13em;
}
.settings-close-docked{
    position:absolute;
    left:var(--top-control-side-pad);
    bottom:5px;
    width:30px;
    height:30px;
    min-width:30px;
    min-height:30px;
    margin:0;
    padding:0 0 3px;
    border:1px solid #f1ede5;
    border-radius:3px;
    background:var(--mobius-red-dark);
    color:#fff;
    display:grid;
    place-items:center;
    font:700 1rem/1 var(--ui-mono);
    cursor:pointer;
}
.settings-close-docked:hover,
.settings-close-docked:focus-visible{
    background:var(--mobius-red);
    border-color:#fff;
    outline:none;
}

/* Settings choices: white when off, full red when selected. */
.settings-choice-face,
.settings-control-row,
.settings-action{
    background:var(--mobius-white);
    color:var(--mobius-ink);
    border-color:#4a4541;
    box-shadow:none;
}
.settings-choice input:checked + .settings-choice-face{
    background:var(--mobius-red);
    color:#fff;
    border-color:#fff;
}
.settings-checkbox-mark{
    background:#fff;
    border-color:#211f1d;
}
.settings-choice input:checked + .settings-choice-face .settings-checkbox-mark{
    background:var(--mobius-red-dark);
    border-color:#fff;
}
.settings-choice-detail,
.settings-control-row>span:last-child,
.settings-action>span:last-child{color:#71695f}
.settings-choice input:checked + .settings-choice-face .settings-choice-detail{color:#fff}
.settings-heading{
    margin-top:10px;
    color:rgba(255,255,255,.66);
}

@media(max-width:700px){
    :root{--top-control-side-pad:2px;--actuator-gap:3px}
    .listener-drawer.mobius-strip{grid-template-rows:30fr 24fr 8fr 32fr 36px}
    .settings-panel{padding:6px 6px 38px}
    .settings-close-docked{
        bottom:5px;
        width:26px;
        height:26px;
        min-width:26px;
        min-height:26px;
    }
}

@media(prefers-reduced-motion:reduce){
    .reactive-canvas{transition:none}
}


/* -----------------------------
   P5J consolidated visualizer/settings/ticker pass
   ----------------------------- */
.sr-only{
    position:absolute!important;
    width:1px!important;
    height:1px!important;
    padding:0!important;
    margin:-1px!important;
    overflow:hidden!important;
    clip:rect(0,0,0,0)!important;
    white-space:nowrap!important;
    border:0!important;
}

/* Four visualizers + one compact analyzer-resolution row + service icons. */
.mobius-block-links{
    grid-template-rows:minmax(0,1fr) auto auto;
    gap:5px;
}
.visualizer-precision-selector{
    margin:0;
    padding:0;
    border:0;
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:3px;
}
.visualizer-precision-choice{display:block;min-width:0;cursor:pointer}
.visualizer-precision-choice input{
    position:absolute;
    inline-size:1px;
    block-size:1px;
    opacity:0;
    pointer-events:none;
}
.visualizer-precision-choice span{
    min-height:20px;
    padding:2px 2px;
    border:1px solid rgba(7,7,7,.72);
    border-radius:3px;
    background:var(--mobius-white);
    color:var(--mobius-ink);
    display:grid;
    place-items:center;
    font:700 .46rem/1 var(--ui-mono);
    letter-spacing:.02em;
}
.visualizer-precision-choice input:checked + span{
    background:var(--mobius-red-dark);
    color:#fff;
    border-color:#fff;
}
.visualizer-precision-choice input:focus-visible + span{outline:1px solid #fff;outline-offset:1px}

/* ghost art is independent of analyzer precision. */
.settings-range-row{
    width:100%;
    min-height:30px;
    margin-top:4px;
    padding:4px 7px;
    border:1px solid #4a4541;
    border-radius:3px;
    background:var(--mobius-white);
    color:var(--mobius-ink);
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    font:700 .50rem/1 var(--ui-mono);
}
.settings-range-control{
    min-width:0;
    display:flex;
    align-items:center;
    gap:6px;
}
.settings-range-control input[type="range"]{
    width:84px;
    accent-color:var(--mobius-red);
}
.settings-range-control span{min-width:28px;text-align:right;font-size:.45rem;color:#71695f}

/* The Settings drawer's bottom edge is exactly the top edge of the ticker. */
.settings-panel{bottom:calc(var(--safe-bottom) + var(--ticker-h));}

/* Ticker: readable value text with red labels/separators and tighter continuity. */
.winamp-ticker-line{
    gap:5px;
    padding:0 4px 0 6px;
    color:#fff;
    font-size:.84rem;
    font-weight:600;
    letter-spacing:.02em;
    text-shadow:0 0 2px rgba(255,255,255,.13);
}
.ticker-field{gap:3px}
.ticker-label,
.ticker-separator{
    color:var(--mobius-red-bright);
    font-weight:700;
    text-shadow:0 0 3px color-mix(in srgb,var(--mobius-accent) 28%,transparent);
}
.ticker-value{
    color:#fff;
    font-weight:600;
    text-shadow:0 0 2px rgba(255,255,255,.12);
}
.ticker-tail-separator{margin-left:-1px;margin-right:-2px}

@media(max-width:700px){
    .mobius-block-links{gap:3px}
    .visualizer-precision-choice span{min-height:17px;font-size:.39rem;padding:1px}
    .settings-range-control input[type="range"]{width:70px}
    .winamp-ticker-line{gap:4px;font-size:.74rem;padding-left:7px}
    .ticker-field{gap:2px}
}

/* -----------------------------
   P5K consolidated drawer / visualizer / settings refinements
   ----------------------------- */

/* The visualizer remains immersive at all times; the Möbius strip overlays it. */
.reactive-canvas,
body.drawer-collapsed .reactive-canvas{
    top:calc((100dvh - var(--safe-bottom) - var(--ticker-h)) / 2);
    width:max(100vw,calc(100dvh - var(--safe-bottom) - var(--ticker-h)));
    height:max(100vw,calc(100dvh - var(--safe-bottom) - var(--ticker-h)));
    transform:translate(-50%,-50%);
}

/* LP: LISTEN should read more strongly. */
.drawer-actuator-label,
.drawer-actuator-lp,
.drawer-actuator-listen-text{font-weight:700}

/* Compact recognition state box. */
.metadata-status-display{
    min-height:18px;
    padding:2px 8px;
    font-size:.56rem;
    gap:5px;
}
.status-lamp{width:7px;height:7px}

/* Result metadata: bold values, labels immediately attached to values. */
.metadata-result-grid{gap:5px}
.metadata-row{
    grid-template-columns:max-content minmax(0,1fr);
    gap:0;
    font-size:.76rem;
}
.metadata-label{font-weight:700}
.metadata-value{font-weight:700}

/* External service links now live immediately beneath TRACK. */
.metadata-music-links{
    width:auto;
    justify-content:flex-start;
    gap:8px;
    margin:0 0 2px;
    padding:0;
}
.metadata-music-links .service-icon-link{
    width:28px;
    height:28px;
    min-height:28px;
    padding:3px;
    border-width:1px;
}
.metadata-music-links .service-icon-allmusic{max-width:22px;max-height:24px}
.metadata-music-links .service-icon-amazon{max-width:22px;max-height:22px}

/* Give metadata a little more room now that the external links moved here. */
.listener-drawer.mobius-strip{grid-template-rows:28fr 28fr 6fr 32fr 40px}

/* Visualizer block: four modes, Blocks row, ghost art and dynamic center trim. */
.mobius-block-links{
    grid-template-rows:minmax(0,1fr) auto auto auto auto;
    gap:3px;
    padding:5px 8px 7px;
}
.visualizer-selector{gap:3px}
.visualizer-choice-face{min-height:23px}
.visualizer-subheading{
    margin:1px 1px 0;
    color:rgba(255,255,255,.72);
    font:700 .45rem/1 var(--ui-mono);
    letter-spacing:.12em;
}
.visualizer-precision-selector{
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:3px;
}
.visualizer-precision-choice span{
    min-height:18px;
    padding:1px 2px;
    font-size:.42rem;
}

/* ghost art: one compact block with its strength meter built into it. */
.ghost-art-control{
    min-width:0;
    overflow:hidden;
    border:1px solid rgba(7,7,7,.72);
    border-radius:3px;
    background:var(--mobius-white);
    color:var(--mobius-ink);
}
.ghost-art-control.ghost-enabled{
    background:linear-gradient(180deg,var(--mobius-red-top) 0%,var(--mobius-red-dark) 100%);
    color:#fff;
    border-color:#fff;
}
.ghost-art-toggle{
    width:100%;
    min-height:18px;
    padding:2px 6px 1px;
    border:0;
    background:transparent;
    color:inherit;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    cursor:pointer;
    font:700 .46rem/1 var(--ui-mono);
    letter-spacing:.04em;
}
.ghost-art-toggle span:last-child{min-width:34px;text-align:right}
.ghost-art-meter{
    position:relative;
    height:9px;
    margin:0 5px 4px;
    overflow:hidden;
    border:1px solid currentColor;
    border-radius:2px;
    background:rgba(0,0,0,.15);
}
.ghost-art-meter-fill{
    position:absolute;
    inset:0 auto 0 0;
    width:58%;
    background:currentColor;
    opacity:.32;
    pointer-events:none;
}
.ghost-art-control.ghost-enabled .ghost-art-meter-fill{background:#fff;opacity:.34}
.ghost-art-meter input[type="range"]{
    position:absolute;
    inset:-5px 0;
    width:100%;
    height:18px;
    margin:0;
    opacity:0;
    cursor:ew-resize;
}

/* Small live center/normal trim lives with the visualizers. */
.visualizer-center-control{
    display:grid;
    grid-template-columns:28px minmax(0,1fr) 28px;
    gap:3px;
}
.visualizer-center-control button{
    min-height:20px;
    padding:1px 4px;
    border:1px solid rgba(7,7,7,.72);
    border-radius:3px;
    background:var(--mobius-white);
    color:var(--mobius-ink);
    cursor:pointer;
    font:700 .48rem/1 var(--ui-mono);
}
.visualizer-center-control button:hover,
.visualizer-center-control button:focus-visible{border-color:#fff;outline:none}
.visualizer-center-readout{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:6px;
}
.visualizer-center-readout.auto-center-active{
    background:var(--mobius-red-dark);
    color:#fff;
    border-color:#fff;
}
.visualizer-center-readout span:last-child{min-width:24px;text-align:right}

/* Settings rises from the black top edge of the footer block. JS locks the exact anchor. */
.mobius-block-footer{border-top:3px solid var(--mobius-black)}
.settings-panel{
    left:0;
    width:var(--listen-w);
    padding:8px;
    border:2px solid #24201f;
    border-bottom:3px solid var(--mobius-black);
    border-radius:4px 4px 0 0;
    background:#050505;
    transform:translate3d(0,calc(100% + 4px),0);
}
.settings-panel.settings-open{transform:translate3d(0,0,0)}
.settings-panel-title{margin:0 2px 6px}
.settings-tuning-row{margin-top:4px}
.settings-range-row{
    min-height:29px;
    padding:4px 7px;
}
.settings-range-control{flex:1;justify-content:flex-end}
.settings-range-control input[type="range"]{width:min(105px,46%)}
.settings-range-control span{min-width:34px}
/* The old dedicated close caret is intentionally gone; the gear toggles this drawer. */
.settings-close-docked{display:none!important}

/* Ticker: labels tight to values, but more breathing room around separators. */
.winamp-ticker-line{
    gap:0;
    font-weight:700;
}
.ticker-field{gap:0}
.ticker-label{font-weight:700}
.ticker-value{font-weight:700}
.ticker-separator{
    margin:0 11px;
    font-weight:700;
}
.ticker-tail-separator{margin-left:11px;margin-right:11px}

@media(max-width:700px){
    .listener-drawer.mobius-strip{grid-template-rows:28fr 29fr 5fr 32fr 36px}
    .metadata-status-display{min-height:17px;padding:2px 6px;font-size:.51rem}
    .metadata-row{font-size:.65rem}
    .metadata-music-links{gap:6px}
    .metadata-music-links .service-icon-link{width:24px;height:24px;min-height:24px;padding:2px}
    .mobius-block-links{padding:4px 6px 5px;gap:2px}
    .visualizer-choice-face{min-height:19px}
    .visualizer-subheading{font-size:.40rem}
    .visualizer-precision-choice span{min-height:16px;font-size:.37rem}
    .ghost-art-toggle{min-height:16px;font-size:.40rem}
    .ghost-art-meter{height:7px;margin:0 4px 3px}
    .visualizer-center-control{grid-template-columns:24px minmax(0,1fr) 24px;gap:2px}
    .visualizer-center-control button{min-height:18px;font-size:.41rem}
    .settings-panel{padding:6px}
    .settings-range-control input[type="range"]{width:min(88px,42%)}
    .ticker-separator{margin:0 8px}
    .ticker-tail-separator{margin-left:8px;margin-right:8px}
}

/* -----------------------------
   P5L drawer / settings / controls refinement
   ----------------------------- */

/* Reserve a real white service band between metadata and the visualizer controls. */
.listener-drawer.mobius-strip{
    grid-template-rows:28fr 27fr 9fr 32fr 36px;
}
.mobius-block-services{
    display:flex;
    align-items:center;
    justify-content:center;
    padding:3px 8px;
    background:var(--mobius-white);
}
.mobius-block-services .metadata-music-links{
    width:100%;
    margin:0;
    justify-content:center;
    gap:10px;
}
.mobius-block-services .service-icon-link{
    width:28px;
    height:28px;
    min-height:28px;
    padding:3px;
    border-width:1px;
}
.mobius-block-services .service-icon-allmusic{max-width:22px;max-height:24px}
.mobius-block-services .service-icon-amazon{max-width:22px;max-height:22px}

/* Put the VISUALIZER label back without consuming much room. */
.visualizer-selector{align-content:start}
.visualizer-section-title{
    width:100%;
    margin:0 0 3px;
    padding:0 1px;
    color:rgba(255,255,255,.74);
    font:700 .48rem/1 var(--ui-mono);
    letter-spacing:.13em;
}

/* ghost art and CENTER now use the same compact slider language as Settings. */
.drawer-range-row{
    width:100%;
    min-width:0;
    min-height:24px;
    padding:3px 6px;
    border:1px solid rgba(7,7,7,.72);
    border-radius:3px;
    background:var(--mobius-white);
    color:var(--mobius-ink);
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:6px;
    font:700 .45rem/1 var(--ui-mono);
}
.drawer-range-row>span:first-child{white-space:nowrap}
.drawer-range-control{
    min-width:0;
    flex:1;
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:5px;
}
.drawer-range-control input[type="range"]{
    width:min(102px,62%);
    margin:0;
    accent-color:var(--mobius-red);
}
.drawer-range-control span{
    min-width:31px;
    text-align:right;
    color:#71695f;
    font-size:.42rem;
}
.drawer-range-row.ghost-disabled{opacity:.78}

/* Settings stays anchored to the black top edge of the gear block and reveals upward.
   The panel never slides through the gear block, so the gear remains visible. */
.mobius-block-footer{border-top:3px solid var(--mobius-black)}
.settings-panel{
    z-index:91;
    transform:none;
    transform-origin:left bottom;
    clip-path:inset(100% 0 0 0);
    visibility:hidden;
    pointer-events:none;
    opacity:0;
    transition:clip-path 300ms cubic-bezier(.22,.78,.24,1),opacity 120ms linear,visibility 0s linear 300ms;
}
.settings-panel.settings-open{
    transform:none;
    clip-path:inset(0 0 0 0);
    visibility:visible;
    pointer-events:auto;
    opacity:1;
    transition:clip-path 300ms cubic-bezier(.22,.78,.24,1),opacity 120ms linear,visibility 0s linear 0s;
}

/* Auto state details must be unmistakable. */
.settings-choice-detail{white-space:nowrap}

@media(max-width:700px){
    .listener-drawer.mobius-strip{grid-template-rows:28fr 27fr 9fr 32fr 34px}
    .mobius-block-services{padding:2px 6px}
    .mobius-block-services .metadata-music-links{gap:7px}
    .mobius-block-services .service-icon-link{width:24px;height:24px;min-height:24px;padding:2px}
    .visualizer-section-title{font-size:.41rem;margin-bottom:2px}
    .drawer-range-row{min-height:21px;padding:2px 5px;font-size:.40rem}
    .drawer-range-control input[type="range"]{width:min(84px,58%)}
    .drawer-range-control span{font-size:.38rem;min-width:28px}
}

@media(prefers-reduced-motion:reduce){
    .settings-panel,.settings-panel.settings-open{transition:none}
}

/* -----------------------------
   P5M layout / readability / ghost-art refinement
   ----------------------------- */
:root{
    --drawer-slide-ms:190ms;
}

/* Full-height level color lives behind the LP: LISTEN label. */
.listen-level-meter{
    inset:0;
    width:auto;
    height:auto;
    border-radius:2px;
    opacity:0;
    z-index:0;
}
.listen-level-fill{
    height:100%;
    border-radius:0;
    opacity:.78;
    background:linear-gradient(90deg,#78986e 0 48%,#e1bc62 72%,#fff2dc 100%);
    box-shadow:none;
}
.drawer-actuator-label{position:relative;z-index:1;text-shadow:0 1px 2px rgba(0,0,0,.75)}
body.listening .listen-level-meter{opacity:1}

/* Thumbnail + listening state become one compact top module. */
.listener-drawer.mobius-strip{
    grid-template-rows:31fr 19fr 6fr 38fr 36px;
}
.mobius-block-brand{
    display:grid;
    grid-template-rows:minmax(0,1fr) auto;
    place-items:center;
    gap:4px;
    padding:5px 10px 6px;
}
.drawer-cover-thumb-wrap{
    align-self:start;
    padding-top:0;
}
.drawer-cover-thumb,
.drawer-cover-listening-canvas{
    max-height:calc(100% - 1px);
}
.mobius-block-brand .metadata-status-display{
    width:min(190px,100%);
    min-height:17px;
    margin:0;
    padding:2px 7px;
    font-size:.53rem;
}
.mobius-block-metadata{
    grid-template-rows:minmax(0,1fr);
    gap:0;
    padding:7px 12px 8px;
}
.metadata-result-grid{align-content:start;gap:5px}
.metadata-label{font-weight:400}
.metadata-value{font-weight:700}

/* Pull the service strip upward/tighter and give the visualizer more vertical room. */
.mobius-block-services{padding:1px 8px}
.mobius-block-services .metadata-music-links{gap:9px}
.mobius-block-services .service-icon-link{
    width:25px;
    height:25px;
    min-height:25px;
    padding:2px;
}

/* Visualizer spacing and Blocks hierarchy. */
.mobius-block-links{
    grid-template-rows:minmax(0,1fr) auto auto auto auto;
    gap:3px;
    padding:6px 8px 7px;
}
.visualizer-section-title{
    margin:0 0 7px;
    font-size:.50rem;
}
.visualizer-selector{gap:3px}
.visualizer-choice-face{min-height:22px}
.visualizer-subheading{
    margin:-1px 1px 1px;
    font-size:.58rem;
    letter-spacing:.11em;
}
.visualizer-precision-selector{grid-template-columns:repeat(4,minmax(0,1fr));gap:3px}
.visualizer-precision-choice span{
    min-height:21px;
    font-size:.50rem;
    letter-spacing:.01em;
}

/* CENTER is manual display occupancy trim; place it before ghost art. */
.drawer-range-row{
    min-height:25px;
    padding:3px 5px 3px 8px;
    font-size:.52rem;
}
.drawer-range-row>span:first-child{font-size:.52rem}
.drawer-range-control{
    flex:0 1 70%;
    justify-content:flex-end;
    gap:6px;
}
.drawer-range-control input[type="range"]{
    width:min(116px,72%);
}
.drawer-range-control span{
    min-width:34px;
    font-size:.46rem;
}

/* More literal ticker spacing: ~2 spaces after colon and ~5 around bullets. */
.ticker-field{gap:2ch}
.ticker-separator{margin-left:5ch;margin-right:5ch}
.ticker-tail-separator{margin-left:5ch;margin-right:5ch}
.ticker-label{font-weight:700}
.ticker-value{font-weight:700}

/* Quicker drawer/settings response; settings still reveals upward from footer top line. */
.settings-panel{
    will-change:clip-path,opacity;
    transition:clip-path 185ms cubic-bezier(.2,.8,.25,1),opacity 90ms linear,visibility 0s linear 185ms;
}
.settings-panel.settings-open{
    transition:clip-path 185ms cubic-bezier(.2,.8,.25,1),opacity 90ms linear,visibility 0s linear 0s;
}

@media(max-width:700px){
    .listener-drawer.mobius-strip{grid-template-rows:31fr 19fr 6fr 38fr 34px}
    .mobius-block-brand{padding:4px 7px 5px;gap:3px}
    .mobius-block-brand .metadata-status-display{min-height:16px;font-size:.49rem}
    .mobius-block-metadata{padding:5px 8px 6px}
    .mobius-block-services .service-icon-link{width:22px;height:22px;min-height:22px}
    .visualizer-section-title{margin-bottom:5px;font-size:.44rem}
    .visualizer-subheading{font-size:.51rem}
    .visualizer-precision-choice span{min-height:18px;font-size:.44rem}
    .drawer-range-row,.drawer-range-row>span:first-child{font-size:.45rem}
    .drawer-range-control input[type="range"]{width:min(92px,68%)}
    .ticker-field{gap:1.5ch}
    .ticker-separator,.ticker-tail-separator{margin-left:4ch;margin-right:4ch}
}

/* -----------------------------
   P5O control regrouping / expanded CENTER / independent ghost-art blocks
   ----------------------------- */
:root{
    --drawer-thumb-size:min(170px,calc(var(--listen-w) - 64px));
}

/* Compress the upper album/status area and give the service + visualizer areas more room. */
.listener-drawer.mobius-strip{
    grid-template-rows:26fr 15fr 8fr 51fr 36px;
}
.mobius-block-brand{
    grid-template-rows:auto auto;
    align-content:start;
    gap:5px;
    padding:1px 8px 3px;
}
.drawer-cover-thumb-wrap{
    width:100%;
    height:auto;
    place-items:start center;
    align-self:start;
}
.drawer-cover-thumb,
.drawer-cover-listening-canvas{
    width:var(--drawer-thumb-size);
    max-height:none;
}
.mobius-block-brand .metadata-status-display{
    margin-top:0;
}
.mobius-block-metadata{
    padding:4px 10px 5px;
}
.metadata-result-grid{gap:4px}
.mobius-block-services{
    padding:3px 8px;
}
.mobius-block-services .service-icon-link{
    width:28px;
    height:28px;
    min-height:28px;
}

/* All visualizer tuning now lives together in the red visualizer section. */
.mobius-block-links{
    grid-template-rows:none;
    display:flex;
    flex-direction:column;
    align-items:stretch;
    justify-content:flex-start;
    gap:3px;
    padding:5px 8px 6px;
    overflow:hidden;
}
.visualizer-selector{
    flex:0 0 auto;
    align-content:start;
}
.visualizer-section-title{margin-bottom:5px}
.visualizer-subheading{
    flex:0 0 auto;
    margin:1px 1px 0;
}
.visualizer-precision-selector{
    flex:0 0 auto;
}
.drawer-range-row{
    flex:0 0 auto;
    min-height:23px;
    padding:2px 5px 2px 7px;
}
.drawer-range-row-tuning>span:first-child,
.drawer-range-row-center>span:first-child,
.drawer-range-row-ghost>span:first-child{
    min-width:70px;
}
.drawer-range-control{
    flex:1 1 auto;
}
.drawer-range-control input[type="range"]{
    width:min(128px,74%);
}

/* CENTER has much more positive headroom: 0 now sits toward the left of its track. */
.drawer-range-row-center .drawer-range-control span{
    min-width:42px;
}

/* Separate block resolution for the album-memory layer. */
.ghost-blocks-label{
    margin-top:0;
    font-size:.49rem;
    opacity:.92;
}

.ghost-art-behavior-selector{
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:3px;
}
.ghost-art-behavior-selector .visualizer-precision-choice span{
    min-height:18px;
    font-size:.41rem;
}

.ghost-art-precision-selector{
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:3px;
}
.ghost-art-precision-selector .visualizer-precision-choice span{
    min-height:18px;
    font-size:.43rem;
}

@media(max-width:700px){
    :root{--drawer-thumb-size:min(145px,calc(var(--listen-w) - 58px));}
    .listener-drawer.mobius-strip{grid-template-rows:25fr 15fr 8fr 52fr 34px}
    .mobius-block-brand{padding:1px 6px 2px;gap:4px}
    .mobius-block-metadata{padding:3px 7px 4px}
    .mobius-block-services{padding:2px 6px}
    .mobius-block-services .service-icon-link{width:24px;height:24px;min-height:24px}
    .mobius-block-links{padding:4px 6px 5px;gap:2px}
    .visualizer-section-title{margin-bottom:4px}
    .drawer-range-row{min-height:20px;padding:1px 4px 1px 6px}
    .drawer-range-row-tuning>span:first-child,
    .drawer-range-row-center>span:first-child,
    .drawer-range-row-ghost>span:first-child{min-width:62px}
    .drawer-range-control input[type="range"]{width:min(96px,70%)}
    .ghost-blocks-label{font-size:.43rem}
    .ghost-art-behavior-selector .visualizer-precision-choice span{min-height:16px;font-size:.36rem}
    .ghost-art-precision-selector .visualizer-precision-choice span{min-height:16px;font-size:.38rem}
}

/* P5P: coarse LOW / MED / HIGH tuning controls replace continuous sliders. */
.drawer-level-row{
    width:100%;
    min-width:0;
    min-height:23px;
    padding:2px 5px 2px 7px;
    border:1px solid rgba(7,7,7,.72);
    border-radius:3px;
    background:var(--mobius-white);
    color:var(--mobius-ink);
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:6px;
    flex:0 0 auto;
    font:700 .45rem/1 var(--ui-mono);
}
.drawer-level-row>span:first-child{
    min-width:70px;
    white-space:nowrap;
    font-size:.52rem;
}
.drawer-level-selector{
    min-width:0;
    flex:1 1 auto;
    margin:0;
    padding:0;
    border:0;
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:3px;
}
.drawer-level-selector label{min-width:0;cursor:pointer}
.drawer-level-selector input{
    position:absolute;
    inline-size:1px;
    block-size:1px;
    opacity:0;
    pointer-events:none;
}
.drawer-level-selector span{
    min-height:18px;
    padding:3px 5px;
    border:1px solid rgba(42,38,34,.32);
    border-radius:2px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#eee9df;
    color:#5c554d;
    font:700 .41rem/1 var(--ui-mono);
    letter-spacing:.035em;
}
.drawer-level-selector input:checked+span{
    background:var(--mobius-black);
    border-color:var(--mobius-black);
    color:#fff;
}
.drawer-level-selector input:focus-visible+span{
    outline:1px solid var(--mobius-red);
    outline-offset:1px;
}
.drawer-level-row.ghost-disabled{opacity:.78}

@media (max-width: 640px){
    .drawer-level-row{min-height:20px;padding:1px 4px 1px 6px}
    .drawer-level-row>span:first-child{min-width:62px;font-size:.45rem}
    .drawer-level-selector span{min-height:16px;padding:2px 3px;font-size:.36rem}
}

/* -----------------------------
   P5Q low-cost baseline + visualizer layout cleanup
   ----------------------------- */

/* Primary visualizer modes: compact 2x2 matrix instead of four stacked boxes. */
.visualizer-selector{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:4px;
}
.visualizer-selector .visualizer-section-title{
    grid-column:1 / -1;
}
.visualizer-choice-face{
    min-height:28px;
    padding:4px 6px;
    grid-template-columns:16px minmax(0,1fr);
    gap:5px;
    font-size:.50rem;
}
.visualizer-choice-face svg{width:14px;height:14px}

/* Tuning rows are no longer white boxes around more boxes. The drawer itself
   provides the section background; only the actual choices look selectable. */
.drawer-level-row{
    min-height:25px;
    padding:2px 1px;
    border:0;
    border-radius:0;
    background:transparent;
    color:#fff;
    gap:8px;
}
.drawer-level-row>span:first-child{
    min-width:72px;
    color:rgba(255,255,255,.80);
    font-size:.48rem;
    letter-spacing:.08em;
}
.drawer-level-selector{gap:3px}
.drawer-level-selector span{
    min-height:20px;
    padding:3px 4px;
    border-color:rgba(255,255,255,.30);
    background:rgba(255,255,255,.94);
    color:#514b45;
}
.drawer-level-selector input:checked+span{
    background:#080808;
    border-color:#fff;
    color:#fff;
}
.ghost-opacity-selector{grid-template-columns:repeat(4,minmax(0,1fr))}

/* Settings: plain rows; checked state lives only in the checkbox. The <label>
   remains the hit target, so clicking the text still toggles the setting. */
.settings-choice-face,
.settings-choice input:checked + .settings-choice-face{
    background:transparent;
    color:#f1ede5;
    border-color:transparent;
    border-radius:0;
    box-shadow:none;
}
.settings-choice-face{
    min-height:30px;
    padding:5px 4px;
}
.settings-choice:hover .settings-choice-face{background:rgba(255,255,255,.05)}
.settings-choice input:checked + .settings-choice-face .settings-checkbox-mark{
    background:#fff;
    border-color:#fff;
}
.settings-choice input:checked + .settings-choice-face .settings-checkbox-mark::after{
    color:#171412;
}
.settings-choice-detail,
.settings-choice input:checked + .settings-choice-face .settings-choice-detail{
    color:#a69f97;
}

/* Hidden legacy ghost-art controls stay hidden even if older CSS tries to lay them out. */
.ghost-art-behavior-selector[hidden],
.ghost-art-precision-selector[hidden],
.ghost-blocks-label[hidden]{display:none !important}

@media(max-width:700px){
    .visualizer-selector{gap:3px}
    .visualizer-choice-face{min-height:24px;font-size:.43rem;padding:3px 4px}
    .drawer-level-row{min-height:22px;padding:1px 0}
    .drawer-level-row>span:first-child{min-width:64px;font-size:.41rem}
    .drawer-level-selector span{min-height:18px;font-size:.35rem;padding:2px}
    .settings-choice-face{min-height:27px;padding:4px 3px}
}

/* -----------------------------
   P5R shared tuning + segmented ticker controls
   ----------------------------- */

/* All tuning controls use one compact segmented-pill language. */
.drawer-level-row{
    display:grid;
    grid-template-columns:72px minmax(0,1fr);
    align-items:center;
    gap:8px;
    min-height:28px;
    padding:2px 1px;
}
.drawer-level-row>span:first-child{
    min-width:0;
    color:rgba(255,255,255,.86);
    font-size:.46rem;
    letter-spacing:.075em;
    white-space:nowrap;
}
.drawer-level-selector{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:0;
    min-width:0;
    padding:2px;
    margin:0;
    border:1px solid rgba(248,241,228,.72);
    border-radius:999px;
    overflow:hidden;
    background:rgba(41,4,9,.24);
}
.drawer-level-selector.blocks-ticker,
.drawer-level-selector.ghost-opacity-selector{
    grid-template-columns:repeat(4,minmax(0,1fr));
}
.drawer-level-selector label{
    display:block;
    min-width:0;
    cursor:pointer;
}
.drawer-level-selector input{
    position:absolute;
    inline-size:1px;
    block-size:1px;
    opacity:0;
    pointer-events:none;
}
.drawer-level-selector span{
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:22px;
    padding:3px 5px;
    border:0;
    border-radius:999px;
    background:transparent;
    color:rgba(248,241,228,.86);
    font-size:.39rem;
    line-height:1;
    letter-spacing:.055em;
    white-space:nowrap;
    transition:background .12s ease,color .12s ease,box-shadow .12s ease;
}
.drawer-level-selector input:checked+span{
    background:#f3ede2;
    color:#8f111c;
    border:0;
    box-shadow:0 1px 4px rgba(28,0,4,.24);
}
.drawer-level-selector input:focus-visible+span{
    outline:1px solid #fff;
    outline-offset:-1px;
}
.drawer-level-row.ghost-disabled{opacity:1}

@media(max-width:700px){
    .drawer-level-row{
        grid-template-columns:64px minmax(0,1fr);
        gap:5px;
        min-height:25px;
        padding:1px 0;
    }
    .drawer-level-row>span:first-child{font-size:.40rem}
    .drawer-level-selector{padding:2px}
    .drawer-level-selector span{
        min-height:20px;
        padding:2px 3px;
        font-size:.34rem;
    }
}

/* -----------------------------
   P5S responsiveness / legibility / selected-state pass
   ----------------------------- */

/* Visualizer selected state is now unambiguously WHITE. */
.visualizer-choice input:checked + .visualizer-choice-face,
.drawer-level-selector input:checked + span{
    background:#fff;
    color:var(--mobius-red-dark);
    border-color:#fff;
    box-shadow:0 1px 4px rgba(28,0,4,.24);
}

/* Roughly double the tiny visualizer typography used in P5R. */
.visualizer-section-title{
    font-size:1rem;
    letter-spacing:.11em;
}
.visualizer-choice-face{
    min-height:42px;
    padding:7px 8px;
    font-size:1rem;
    line-height:1.05;
}
.visualizer-choice-face svg{width:22px;height:22px}
.drawer-level-row{
    grid-template-columns:106px minmax(0,1fr);
    min-height:38px;
    gap:9px;
    padding:3px 1px;
}
.drawer-level-row>span:first-child{
    font-size:.90rem;
    letter-spacing:.06em;
}
.drawer-level-selector span{
    min-height:31px;
    padding:5px 6px;
    font-size:.76rem;
}

/* Settings typography gets the same legibility treatment. */
.settings-panel-title{
    font-size:1.08rem;
    letter-spacing:.11em;
    margin-bottom:10px;
}
.settings-choice-face{
    min-height:44px;
    padding:7px 6px;
    font-size:1rem;
    line-height:1.05;
}
.settings-choice-label{gap:10px}
.settings-checkbox-mark{
    width:20px;
    height:20px;
    min-width:20px;
}
.settings-choice input:checked + .settings-choice-face .settings-checkbox-mark::after{
    font-size:14px;
}
.settings-choice-detail,
.settings-choice input:checked + .settings-choice-face .settings-choice-detail{
    font-size:.88rem;
}

/* Center the Settings gear inside its footer block. */
.mobius-block-footer{
    justify-content:center;
    padding-left:0;
    padding-right:0;
}
.settings-button{margin-left:auto;margin-right:auto}
.settings-gear-icon{width:20px;height:20px}

/* Give the album-art thumbnail a small visual buffer from the top edge. */
.drawer-cover-thumb-wrap{
    padding-top:7px;
    box-sizing:border-box;
}

@media(max-width:700px){
    .visualizer-section-title{font-size:.82rem}
    .visualizer-choice-face{min-height:36px;font-size:.78rem;padding:5px 6px}
    .visualizer-choice-face svg{width:18px;height:18px}
    .drawer-level-row{grid-template-columns:88px minmax(0,1fr);min-height:33px;gap:6px}
    .drawer-level-row>span:first-child{font-size:.72rem}
    .drawer-level-selector span{min-height:27px;font-size:.63rem;padding:4px 3px}
    .settings-panel-title{font-size:.92rem}
    .settings-choice-face{min-height:39px;font-size:.82rem;padding:6px 4px}
    .settings-choice-detail,.settings-choice input:checked + .settings-choice-face .settings-choice-detail{font-size:.72rem}
    .settings-checkbox-mark{width:18px;height:18px;min-width:18px}
    .drawer-cover-thumb-wrap{padding-top:6px}
}

/* -----------------------------
   P5T typography + music-player hierarchy
   ----------------------------- */
:root{
    --ui-mono:"Cascadia Mono","Segoe UI Mono",Consolas,"Lucida Console",monospace;
    --ui-display:"Cascadia Mono","Segoe UI Mono",Consolas,"Courier New",monospace;
}

/* Top album module: LISTENING / timer is part of the white album area rather
   than a separate black status box. */
.listener-drawer.mobius-strip{
    grid-template-rows:30fr 14fr 7fr 49fr 38px;
}
.mobius-block-brand{
    grid-template-rows:auto minmax(0,1fr);
    align-content:start;
    gap:5px;
    padding:5px 8px 5px;
}
.mobius-block-brand .metadata-status-display{
    order:0;
    width:100%;
    min-width:0;
    min-height:24px;
    margin:0;
    padding:1px 5px 2px;
    border:0;
    border-radius:0;
    background:transparent;
    color:var(--mobius-red-dark);
    justify-content:flex-start;
    gap:6px;
    font-family:var(--ui-display);
    font-size:.96rem;
    font-style:italic;
    font-weight:800;
    letter-spacing:.055em;
}
.mobius-block-brand .metadata-status-display #statusText,
.mobius-block-brand .metadata-status-display .status-timer{
    color:var(--mobius-red-dark);
    font-weight:800;
}
.mobius-block-brand .metadata-status-display .status-separator{
    color:rgba(118,11,16,.48);
}
.mobius-block-brand .status-lamp{
    width:8px;
    height:8px;
    flex:0 0 auto;
}
.drawer-cover-thumb-wrap{
    order:1;
    align-self:start;
    padding-top:3px;
}

/* Now-playing metadata is presented as music information rather than a form. */
.mobius-block-metadata{
    display:block;
    padding:6px 11px 7px;
}
.metadata-result-grid{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    justify-content:flex-start;
    gap:2px;
    min-width:0;
    width:100%;
    font-family:var(--ui-display);
}
.metadata-track-title,
.metadata-artist-name,
.metadata-album-line{
    width:100%;
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.metadata-track-title{
    color:var(--mobius-red-dark);
    font-size:1.08rem;
    line-height:1.05;
    font-weight:800;
    letter-spacing:.01em;
}
.metadata-artist-name{
    color:var(--mobius-ink);
    font-size:.88rem;
    line-height:1.08;
    font-weight:700;
}
.metadata-album-line{
    display:flex;
    align-items:baseline;
    gap:7px;
    color:#4e4740;
    font-size:.68rem;
    line-height:1.1;
    font-weight:500;
    letter-spacing:.025em;
}
.metadata-album-name{
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.metadata-album-separator{
    flex:0 0 auto;
    color:var(--mobius-red);
    font-weight:800;
}
.metadata-year{flex:0 0 auto}

/* VISUALIZER / TUNING use the LP: LISTEN display treatment while retaining
   the app's red / white / tan / black palette. */
.mobius-block-links{
    gap:4px;
    padding:6px 8px 7px;
}
.visualizer-section-title,
.tuning-heading{
    width:100%;
    min-height:20px;
    margin:0 0 4px;
    padding:0 1px;
    color:var(--mobius-white);
    display:flex;
    align-items:center;
    gap:8px;
    font-family:var(--ui-display);
    font-size:.92rem;
    line-height:1;
    font-style:italic;
    font-weight:800;
    letter-spacing:.12em;
}
.visualizer-section-title::after,
.tuning-heading::after{
    content:"";
    height:1px;
    flex:1 1 auto;
    background:rgba(238,234,225,.72);
}
.tuning-heading{
    flex:0 0 auto;
    margin-top:3px;
    margin-bottom:2px;
}
.visualizer-choice-face{
    min-height:36px;
    padding:5px 7px;
    border-color:rgba(238,234,225,.88);
    border-radius:4px;
    background:var(--mobius-white);
    color:var(--mobius-ink);
    font-family:var(--ui-mono);
    font-size:.70rem;
    font-weight:700;
    line-height:1.04;
    letter-spacing:.015em;
}
.visualizer-choice-face svg{width:19px;height:19px}
.visualizer-choice input:checked + .visualizer-choice-face{
    background:#fff;
    color:var(--mobius-red);
    border-color:#fff;
}
.drawer-level-row{
    grid-template-columns:94px minmax(0,1fr);
    min-height:31px;
    gap:7px;
    padding:1px 1px;
}
.drawer-level-row>span:first-child{
    color:var(--mobius-white);
    font-family:var(--ui-mono);
    font-size:.66rem;
    font-weight:600;
    letter-spacing:.055em;
}
.drawer-level-selector{
    border-color:rgba(238,234,225,.82);
    background:rgba(70,4,10,.22);
}
.drawer-level-selector span{
    min-height:25px;
    padding:3px 4px;
    color:rgba(238,234,225,.92);
    font-family:var(--ui-mono);
    font-size:.57rem;
    font-weight:500;
    letter-spacing:.02em;
}
.drawer-level-selector input:checked + span{
    background:#fff;
    color:var(--mobius-red-dark);
    box-shadow:0 1px 4px rgba(28,0,4,.24);
    font-weight:800;
}

/* SETTINGS follows the same display/mono hierarchy, with no About section. */
.settings-panel{
    padding:10px 10px 11px;
}
.settings-panel-title{
    width:100%;
    margin:0 0 10px;
    padding:0 1px;
    color:var(--mobius-white);
    display:flex;
    align-items:center;
    gap:9px;
    font-family:var(--ui-display);
    font-size:1rem;
    line-height:1;
    font-style:italic;
    font-weight:800;
    letter-spacing:.12em;
}
.settings-panel-title::after{
    content:"";
    height:1px;
    flex:1 1 auto;
    background:rgba(238,234,225,.55);
}
.settings-choice-face,
.settings-choice input:checked + .settings-choice-face{
    min-height:38px;
    padding:5px 3px;
    font-family:var(--ui-mono);
    font-size:.72rem;
    line-height:1.12;
    font-weight:500;
    letter-spacing:.005em;
}
.settings-choice-label{gap:9px}
.settings-choice-detail,
.settings-choice input:checked + .settings-choice-face .settings-choice-detail{
    color:#aaa39b;
    font-size:.62rem;
    font-weight:500;
    letter-spacing:.04em;
}

/* The entire red Settings footer is one large toggle target. */
.mobius-block-footer{
    padding:0;
    display:block;
    background:var(--mobius-red-dark);
    cursor:pointer;
}
.settings-button{
    width:100%;
    height:100%;
    min-width:100%;
    min-height:38px;
    margin:0;
    padding:0;
    border:0;
    border-radius:0;
    background:var(--mobius-red-dark);
    display:grid;
    place-items:center;
}
.settings-button:hover,
.settings-button:focus-visible,
.settings-button[aria-expanded="true"]{
    background:var(--mobius-red);
    border:0;
}
.settings-button:focus-visible{
    outline:1px solid #fff;
    outline-offset:-2px;
}
.settings-gear-icon{width:21px;height:21px}

@media(max-width:700px){
    .listener-drawer.mobius-strip{grid-template-rows:30fr 14fr 7fr 49fr 36px}
    .mobius-block-brand{gap:4px;padding:4px 6px}
    .mobius-block-brand .metadata-status-display{min-height:21px;font-size:.72rem;padding:1px 4px}
    .drawer-cover-thumb-wrap{padding-top:2px}
    .mobius-block-metadata{padding:5px 8px 6px}
    .metadata-track-title{font-size:.90rem}
    .metadata-artist-name{font-size:.73rem}
    .metadata-album-line{font-size:.58rem;gap:5px}
    .visualizer-section-title,.tuning-heading{font-size:.70rem;gap:6px}
    .visualizer-choice-face{min-height:32px;padding:4px 5px;font-size:.60rem}
    .visualizer-choice-face svg{width:17px;height:17px}
    .drawer-level-row{grid-template-columns:80px minmax(0,1fr);min-height:28px;gap:5px}
    .drawer-level-row>span:first-child{font-size:.56rem}
    .drawer-level-selector span{min-height:23px;font-size:.49rem;padding:3px 2px}
    .settings-panel-title{font-size:.86rem}
    .settings-choice-face,.settings-choice input:checked + .settings-choice-face{min-height:34px;font-size:.64rem;padding:4px 2px}
    .settings-choice-detail,.settings-choice input:checked + .settings-choice-face .settings-choice-detail{font-size:.55rem}
    .settings-button{min-height:36px}
}

/* -----------------------------
   P5U compact drawer polish
   ----------------------------- */

/* LP: LISTEN is now one full-width drawer control. The microphone lives inside
   the button; the side caret/microphone controls are intentionally gone. */
.drawer-actuator-title{
    left:0;
    width:var(--listen-w);
    padding:0 12px;
    justify-content:center;
}
.drawer-mic-icon-inline{
    position:absolute;
    left:10px;
    top:50%;
    width:14px;
    height:14px;
    transform:translateY(-50%);
    z-index:2;
    fill:#fff;
}
.drawer-actuator-caret,
.drawer-actuator-mic-button{display:none !important}

/* Listening/identified state is information, not another alert panel. Match the
   LP: LISTEN type scale, remove the lamp, and use black ink on the cream field. */
.mobius-block-brand .metadata-status-display{
    min-height:20px;
    padding:0 3px;
    gap:5px;
    color:var(--mobius-ink);
    font-family:var(--ui-mono);
    font-size:.79rem;
    line-height:1;
    font-style:italic;
    font-weight:700;
    letter-spacing:.045em;
}
.mobius-block-brand .metadata-status-display #statusText,
.mobius-block-brand .metadata-status-display .status-timer,
.mobius-block-brand .metadata-status-display .status-separator{
    color:var(--mobius-ink);
    font-weight:700;
}
.mobius-block-brand .status-lamp{display:none !important}

/* Remove the black divider between album thumbnail and metadata and pull the
   music information up close to the thumbnail. */
.mobius-block-brand{border-bottom:0 !important;padding-bottom:1px}
.mobius-block-metadata{
    border-top:0 !important;
    padding:1px 10px 5px;
}
.metadata-result-grid{
    gap:1px;
    font-family:"Bahnschrift Condensed","Arial Narrow",var(--ui-mono);
    letter-spacing:-.015em;
}
.metadata-track-title{
    font-size:.82rem;
    line-height:1.02;
    letter-spacing:-.025em;
}
.metadata-artist-name{
    font-size:.66rem;
    line-height:1.02;
    letter-spacing:-.02em;
}
.metadata-album-line{
    display:block;
    font-size:.53rem;
    line-height:1.04;
    letter-spacing:-.01em;
}
.metadata-year-line{
    width:100%;
    color:#4e4740;
    font-size:.49rem;
    line-height:1.04;
    font-weight:500;
    letter-spacing:.02em;
}
.metadata-album-separator{display:none}

/* Section headers use one shared, non-italic treatment. No decorative rules. */
.visualizer-section-title,
.tuning-heading{
    min-height:0;
    margin:0 0 4px;
    padding:0 1px;
    display:block;
    color:var(--mobius-white);
    font-family:var(--ui-mono);
    font-size:.80rem;
    line-height:1.05;
    font-style:normal;
    font-weight:700;
    letter-spacing:.075em;
}
.visualizer-section-title::after,
.tuning-heading::after{display:none !important}
.tuning-heading{margin-top:4px;margin-bottom:2px}

/* Let the visualizer names wrap instead of ellipsizing. Pixel modes naturally
   occupy two lines while one-word modes stay centered and fully visible. */
.visualizer-choice-face{
    min-height:39px;
    padding:4px 6px;
    grid-template-columns:19px minmax(0,1fr);
    gap:6px;
    font-size:.61rem;
    line-height:1.02;
    white-space:normal;
}
.visualizer-choice-face>span.visualizer-name{
    display:block;
    min-width:0;
    overflow:visible;
    text-overflow:clip;
    white-space:normal;
    line-height:1.05;
    text-align:left;
}

/* Keep row spacing, but make the segmented ticker itself sleeker/shallower. */
.drawer-level-row{
    grid-template-columns:94px minmax(0,1fr);
    min-height:31px;
    gap:7px;
    padding:1px 1px;
}
.drawer-level-row>span:first-child{
    font-size:.62rem;
    letter-spacing:.045em;
    white-space:nowrap;
}
.drawer-level-selector{
    min-height:20px;
    align-self:center;
}
.drawer-level-selector span{
    min-height:18px;
    padding:1px 3px;
    font-size:.53rem;
    line-height:1;
}

/* Settings: plain title, no divider, smaller controls and tighter vertical rhythm. */
.settings-panel{padding:8px 9px 9px}
.settings-panel-title{
    display:block;
    margin:0 0 5px;
    padding:0 1px;
    color:var(--mobius-white);
    font-family:var(--ui-mono);
    font-size:.80rem;
    line-height:1;
    font-style:normal;
    font-weight:700;
    letter-spacing:.075em;
}
.settings-panel-title::after{display:none !important}
.settings-choice-gap{margin-top:1px}
.settings-choice-face,
.settings-choice input:checked + .settings-choice-face{
    min-height:27px;
    padding:2px 3px;
    font-size:.61rem;
    line-height:1.04;
}
.settings-choice-label{gap:6px}
.settings-checkbox-mark{
    width:15px;
    height:15px;
    min-width:15px;
}
.settings-choice input:checked + .settings-choice-face .settings-checkbox-mark::after{
    font-size:11px;
}
.settings-choice-detail,
.settings-choice input:checked + .settings-choice-face .settings-choice-detail{
    font-size:.54rem;
}

@media(max-width:700px){
    .drawer-actuator-title{left:0;width:var(--listen-w)}
    .drawer-mic-icon-inline{left:8px;width:12px;height:12px}
    .mobius-block-brand .metadata-status-display{font-size:.66rem;min-height:18px}
    .mobius-block-metadata{padding:0 8px 4px}
    .metadata-track-title{font-size:.72rem}
    .metadata-artist-name{font-size:.59rem}
    .metadata-album-line{font-size:.48rem}
    .metadata-year-line{font-size:.45rem}
    .visualizer-section-title,.tuning-heading{font-size:.69rem}
    .visualizer-choice-face{min-height:36px;font-size:.54rem;padding:3px 5px}
    .drawer-level-row{grid-template-columns:80px minmax(0,1fr);min-height:28px;gap:5px}
    .drawer-level-row>span:first-child{font-size:.54rem}
    .drawer-level-selector{min-height:18px}
    .drawer-level-selector span{min-height:16px;font-size:.46rem;padding:1px 2px}
    .settings-panel-title{font-size:.70rem;margin-bottom:4px}
    .settings-choice-face,.settings-choice input:checked + .settings-choice-face{min-height:24px;font-size:.56rem;padding:1px 2px}
    .settings-checkbox-mark{width:14px;height:14px;min-width:14px}
    .settings-choice-detail,.settings-choice input:checked + .settings-choice-face .settings-choice-detail{font-size:.49rem}
}


/* -----------------------------
   P5V typography / contrast refinement
   ----------------------------- */

/* Status belongs to the album module, but it should read like the LP: LISTEN
   actuator rather than like a warning. */
.mobius-block-brand .metadata-status-display{
    width:100%;
    justify-content:center;
    text-align:center;
    color:var(--mobius-ink);
    font-family:var(--ui-mono);
    font-size:.78rem;
    line-height:1;
    font-style:italic;
    font-weight:400;
    letter-spacing:.04em;
}
.mobius-block-brand .metadata-status-display #statusText,
.mobius-block-brand .metadata-status-display .status-timer,
.mobius-block-brand .metadata-status-display .status-separator{
    color:var(--mobius-ink);
    font-weight:400;
}

/* Keep the compact condensed player typography the user liked, but make the
   hierarchy substantially larger and pull it directly under the cover art. */
.mobius-block-brand{border-bottom:0 !important;padding-bottom:0}
.mobius-block-metadata{
    border-top:0 !important;
    padding:0 10px 4px;
    margin-top:-1px;
}
.metadata-result-grid{
    gap:1px;
    font-family:"Bahnschrift Condensed","Arial Narrow",var(--ui-mono);
}
.metadata-track-title{
    font-size:1.30rem;
    line-height:.98;
    font-weight:800;
    letter-spacing:-.035em;
    white-space:normal;
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
    overflow:hidden;
}
.metadata-artist-name{
    font-size:1.02rem;
    line-height:1;
    font-weight:700;
    letter-spacing:-.025em;
}
.metadata-album-line{
    font-size:.82rem;
    line-height:1;
    font-weight:500;
    letter-spacing:-.015em;
}
.metadata-year-line{
    font-family:"Bahnschrift Condensed","Arial Narrow",var(--ui-mono);
    color:#4e4740;
    font-size:.78rem;
    line-height:1;
    font-weight:500;
    letter-spacing:.01em;
}

/* One heading language. Previous mobile rules were shrinking these after the
   desktop rule, which is why VISUALIZER appeared resistant to changes. */
.visualizer-section-title,
.tuning-heading{
    min-height:0;
    display:block;
    margin:0 0 5px;
    padding:0 1px;
    color:var(--mobius-white);
    font-family:var(--ui-mono);
    font-size:1.20rem;
    line-height:1;
    font-style:normal;
    font-weight:400;
    letter-spacing:.065em;
}
.visualizer-section-title::after,
.tuning-heading::after{display:none !important}
.tuning-heading{
    margin-top:11px; /* deliberate visual return before TUNING */
    margin-bottom:4px;
}

/* Long visualizer names get an explicit two-line treatment instead of being
   allowed to ellipsize inside the narrow drawer. */
.visualizer-choice-face{
    min-height:43px;
    padding:4px 6px;
    align-items:center;
}
.visualizer-choice-face>span.visualizer-name{
    display:block;
    overflow:visible;
    text-overflow:clip;
    white-space:normal;
    line-height:1.02;
    text-align:left;
}

/* Make the segmented ticker read as a distinct hardware control surface. */
.drawer-level-selector{
    background:#070707;
    border-color:rgba(255,255,255,.90);
}
.drawer-level-selector span{
    color:#eeeae1;
}
.drawer-level-selector input:checked + span{
    background:#fff;
    color:var(--mobius-red-dark);
}

@media(max-width:700px){
    .mobius-block-brand .metadata-status-display{font-size:.66rem}
    .mobius-block-metadata{padding:0 8px 3px;margin-top:-1px}
    .metadata-track-title{font-size:1.08rem}
    .metadata-artist-name{font-size:.86rem}
    .metadata-album-line{font-size:.70rem}
    .metadata-year-line{font-size:.66rem}
    .visualizer-section-title,
    .tuning-heading{
        font-size:1.08rem;
        font-weight:400;
    }
    .tuning-heading{margin-top:10px;margin-bottom:4px}
    .visualizer-choice-face{min-height:40px}
}

/* -----------------------------
   P5X title cascade / player metadata / service-list polish
   ----------------------------- */

/* VISUALIZER was being held down by the older, more-specific
   `.visualizer-selector legend` rule. Override the concrete selectors here and
   intentionally make all three drawer section titles use the SETTINGS style. */
.mobius-block-links .visualizer-selector > legend.visualizer-section-title,
.mobius-block-links .visualizer-subheading.tuning-heading,
.settings-panel .settings-panel-title{
    display:block;
    min-height:0;
    margin:0 0 5px;
    padding:0 1px;
    color:var(--mobius-white);
    font-family:var(--ui-mono);
    font-size:.80rem;
    line-height:1;
    font-style:normal;
    font-weight:700;
    letter-spacing:.075em;
}
.mobius-block-links .visualizer-selector > legend.visualizer-section-title::after,
.mobius-block-links .visualizer-subheading.tuning-heading::after,
.settings-panel .settings-panel-title::after{display:none !important}
.mobius-block-links .visualizer-subheading.tuning-heading{
    margin-top:10px;
    margin-bottom:4px;
}

/* Visualizer modes use the same black hardware surface as the tuning tickers.
   The selected state remains white with dark-red text. */
.mobius-block-links .visualizer-choice-face{
    background:#070707;
    color:#f4efe6;
    border-color:rgba(255,255,255,.90);
    box-shadow:none;
}
.mobius-block-links .visualizer-choice:hover .visualizer-choice-face{
    border-color:#fff;
    background:#111;
}
.mobius-block-links .visualizer-choice input:checked + .visualizer-choice-face{
    background:#fff;
    color:var(--mobius-red-dark);
    border-color:#fff;
    box-shadow:0 1px 4px rgba(28,0,4,.24);
}

/* Larger condensed music hierarchy, tucked directly under the album thumbnail. */
.listener-drawer.mobius-strip{
    grid-template-rows:30fr 11fr 12fr 47fr 38px;
}
.mobius-block-brand{padding-bottom:0}
.mobius-block-metadata{
    padding:0 9px 2px;
    margin-top:-5px;
}
.metadata-result-grid{gap:0}
.metadata-track-title{
    font-size:1.55rem;
    line-height:.94;
    letter-spacing:-.045em;
}
.metadata-artist-name{
    margin-top:2px;
    font-size:1.18rem;
    line-height:.96;
    letter-spacing:-.03em;
}
.metadata-album-line{
    margin-top:2px;
    font-size:.96rem;
    line-height:.98;
}
.metadata-year-line{
    margin-top:2px;
    font-size:.90rem;
    line-height:.98;
}

/* External destinations become a compact vertical list. The metadata section
   is shorter, which raises its bottom divider and brings this list upward. */
.mobius-block-services{
    align-items:flex-start;
    justify-content:flex-start;
    padding:3px 9px 4px;
}
.mobius-block-services .metadata-music-links.service-link-list{
    display:flex;
    flex-direction:column;
    align-items:stretch;
    justify-content:flex-start;
    gap:2px;
    width:100%;
    margin:0;
}
.mobius-block-services .service-list-link{
    min-height:22px;
    padding:1px 2px;
    border:0;
    border-radius:0;
    background:transparent;
    color:var(--mobius-ink);
    display:grid;
    grid-template-columns:24px minmax(0,1fr);
    align-items:center;
    gap:6px;
    font-family:var(--ui-mono);
    font-size:.58rem;
    font-weight:600;
    line-height:1;
    text-decoration:none;
}
.mobius-block-services .service-list-link:hover,
.mobius-block-services .service-list-link:focus-visible{
    background:color-mix(in srgb,var(--mobius-accent) 8%,transparent);
    outline:0;
}
.mobius-block-services .service-list-link.disabled{
    pointer-events:none;
    opacity:.30;
}
.service-list-icon-wrap{
    width:22px;
    height:20px;
    display:grid;
    place-items:center;
}
.mobius-block-services .service-list-icon-wrap .service-icon{
    max-width:20px;
    max-height:18px;
}
.mobius-block-services .service-list-icon-wrap .service-icon-allmusic{
    max-width:22px;
    max-height:17px;
}
.mobius-block-services .service-list-label{
    min-width:0;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

@media(max-width:700px){
    .listener-drawer.mobius-strip{grid-template-rows:30fr 11fr 12fr 47fr 36px}
    .mobius-block-links .visualizer-selector > legend.visualizer-section-title,
    .mobius-block-links .visualizer-subheading.tuning-heading,
    .settings-panel .settings-panel-title{
        font-size:.70rem;
        font-weight:700;
        letter-spacing:.075em;
    }
    .mobius-block-links .visualizer-subheading.tuning-heading{margin-top:9px;margin-bottom:4px}
    .mobius-block-metadata{padding:0 7px 1px;margin-top:-4px}
    .metadata-track-title{font-size:1.28rem}
    .metadata-artist-name{font-size:.98rem}
    .metadata-album-line{font-size:.80rem}
    .metadata-year-line{font-size:.75rem}
    .mobius-block-services{padding:2px 7px 3px}
    .mobius-block-services .metadata-music-links.service-link-list{gap:1px}
    .mobius-block-services .service-list-link{
        min-height:19px;
        grid-template-columns:21px minmax(0,1fr);
        gap:5px;
        font-size:.51rem;
    }
    .service-list-icon-wrap{width:19px;height:18px}
    .mobius-block-services .service-list-icon-wrap .service-icon{max-width:18px;max-height:16px}
    .mobius-block-services .service-list-icon-wrap .service-icon-allmusic{max-width:19px;max-height:15px}
}

/* P5X service-list fit refinement: keep the list compact enough for the fixed
   drawer geometry while preserving three distinct rows. */
.listener-drawer.mobius-strip{grid-template-rows:30fr 11fr 14fr 45fr 38px}
.mobius-block-services .service-list-link{
    min-height:16px;
    grid-template-columns:19px minmax(0,1fr);
    gap:5px;
    padding:0 2px;
    font-size:.54rem;
}
.service-list-icon-wrap{width:17px;height:15px}
.mobius-block-services .service-list-icon-wrap .service-icon{max-width:16px;max-height:14px}
.mobius-block-services .service-list-icon-wrap .service-icon-allmusic{max-width:18px;max-height:13px}
@media(max-width:700px){
    .listener-drawer.mobius-strip{grid-template-rows:30fr 11fr 14fr 45fr 36px}
    .mobius-block-services .service-list-link{
        min-height:14px;
        grid-template-columns:17px minmax(0,1fr);
        gap:4px;
        font-size:.48rem;
    }
    .service-list-icon-wrap{width:15px;height:13px}
    .mobius-block-services .service-list-icon-wrap .service-icon{max-width:14px;max-height:12px}
    .mobius-block-services .service-list-icon-wrap .service-icon-allmusic{max-width:16px;max-height:11px}
}


/* P5Y — O-Scope / Wave Ribbon must composite transparently over the app canvas.
   The renderer clears these modes to alpha=0; do not reintroduce a CSS black box. */
.reactive-canvas{
    background:transparent !important;
}

/* P5Z — tighter player hierarchy + larger service list. */
.mobius-block-metadata{
    padding-left:16px !important;
    padding-right:9px !important;
    margin-top:-11px !important;
}

/* Match external-link typography to the album line and make the icon column
   visually useful rather than tiny. Center the three-link stack vertically. */
.mobius-block-services{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    padding:2px 9px !important;
}
.mobius-block-services .metadata-music-links.service-link-list{
    justify-content:center !important;
    gap:2px !important;
}
.mobius-block-services .service-list-link{
    min-height:27px !important;
    grid-template-columns:34px minmax(0,1fr) !important;
    gap:7px !important;
    padding:0 2px !important;
    font-family:"Bahnschrift Condensed","Arial Narrow",var(--ui-mono) !important;
    font-size:.96rem !important;
    font-weight:500 !important;
    letter-spacing:-.015em !important;
}
.service-list-icon-wrap{
    width:32px !important;
    height:26px !important;
}
.mobius-block-services .service-list-icon-wrap .service-icon{
    max-width:30px !important;
    max-height:26px !important;
}
.mobius-block-services .service-list-icon-wrap .service-icon-allmusic{
    max-width:32px !important;
    max-height:25px !important;
}
@media(max-width:700px){
    .mobius-block-metadata{
        padding-left:13px !important;
        margin-top:-9px !important;
    }
    .mobius-block-services{padding:1px 7px !important}
    .mobius-block-services .service-list-link{
        min-height:24px !important;
        grid-template-columns:30px minmax(0,1fr) !important;
        gap:6px !important;
        font-size:.80rem !important;
    }
    .service-list-icon-wrap{width:28px !important;height:23px !important}
    .mobius-block-services .service-list-icon-wrap .service-icon{max-width:27px !important;max-height:23px !important}
    .mobius-block-services .service-list-icon-wrap .service-icon-allmusic{max-width:29px !important;max-height:22px !important}
}


/* -----------------------------
   P600 palette + visualizer rotation
   ----------------------------- */
.mobius-block-links .visualizer-selector{
    display:block !important;
    position:relative;
}
.mobius-block-links .visualizer-mode-grid{
    position:relative;
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:4px;
}
.mobius-block-links .visualizer-rotate-button{
    position:absolute;
    left:50%;
    top:50%;
    width:26px;
    height:26px;
    min-width:26px;
    padding:0;
    transform:translate(-50%,-50%);
    z-index:8;
    display:grid;
    place-items:center;
    border:2px solid #fff;
    border-radius:50%;
    background:#070707;
    color:#fff;
    box-shadow:0 1px 4px rgba(0,0,0,.55);
    font:700 1rem/1 var(--ui-mono);
    cursor:pointer;
}
.mobius-block-links .visualizer-rotate-button span{
    display:block;
    transform:translateY(-1px);
}
.mobius-block-links .visualizer-rotate-button:hover,
.mobius-block-links .visualizer-rotate-button:focus-visible{
    outline:none;
    background:#171717;
}
.mobius-block-links .visualizer-rotate-button[aria-pressed="true"]{
    background:#fff;
    color:var(--mobius-red-dark);
    border-color:#fff;
}
/* Rotation reads as an all-selected state, while the renderer advances through
   the four actual modes every eight seconds. */
.mobius-block-links .visualizer-selector.rotation-active .visualizer-choice-face{
    background:#fff !important;
    color:var(--mobius-red-dark) !important;
    border-color:#fff !important;
    box-shadow:0 1px 4px rgba(28,0,4,.24) !important;
}
.mobius-block-links .palette-selector{
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:1px;
}
.mobius-block-links .palette-selector span{
    padding-left:1px;
    padding-right:1px;
    font-size:.42rem;
    letter-spacing:-.025em;
}
@media(max-width:700px){
    .mobius-block-links .visualizer-rotate-button{
        width:24px;
        height:24px;
        min-width:24px;
        font-size:.88rem;
    }
    .mobius-block-links .palette-selector span{font-size:.38rem}
}

/* -----------------------------
   P6B palette / rotation / tuning-width refinement
   ----------------------------- */
/* Rotation ON keeps the rotate actuator white, but only the currently active
   visualizer is white. The other three remain black so the live mode is clear. */
.mobius-block-links .visualizer-selector.rotation-active .visualizer-choice-face{
    background:#070707 !important;
    color:#f4efe6 !important;
    border-color:rgba(255,255,255,.90) !important;
    box-shadow:none !important;
}
.mobius-block-links .visualizer-selector.rotation-active .visualizer-choice input:checked + .visualizer-choice-face{
    background:#fff !important;
    color:var(--mobius-red-dark) !important;
    border-color:#fff !important;
    box-shadow:0 1px 4px rgba(28,0,4,.24) !important;
}

/* Give the hardware tickers about 25-30% more horizontal room by reclaiming
   unused label-column width; increase the value text slightly at the same time. */
.mobius-block-links .drawer-level-row{
    grid-template-columns:64px minmax(0,1fr) !important;
    gap:5px !important;
}
.mobius-block-links .drawer-level-row > span:first-child{
    font-size:.58rem !important;
    letter-spacing:.025em !important;
}
.mobius-block-links .drawer-level-selector span{
    font-size:.60rem !important;
    letter-spacing:.015em !important;
}
.mobius-block-links .palette-selector span{
    font-size:.55rem !important;
    letter-spacing:-.025em !important;
}

/* Pull the metadata block slightly closer to the art and indent it a touch more. */
.mobius-block-metadata{
    padding-left:20px !important;
    margin-top:-15px !important;
}

@media(max-width:700px){
    .mobius-block-links .drawer-level-row{
        grid-template-columns:58px minmax(0,1fr) !important;
        gap:4px !important;
    }
    .mobius-block-links .drawer-level-row > span:first-child{font-size:.52rem !important}
    .mobius-block-links .drawer-level-selector span{font-size:.54rem !important}
    .mobius-block-links .palette-selector span{font-size:.49rem !important}
    .mobius-block-metadata{
        padding-left:17px !important;
        margin-top:-12px !important;
    }
}


/* -----------------------------
   P6C Möbius accordion — ALBUM / LINKS / VISUALIZER / SETTINGS
   ----------------------------- */
.listener-drawer.mobius-strip{
    display:flex !important;
    flex-direction:column !important;
    grid-template-rows:none !important;
    height:var(--artwork-size) !important;
    overflow:hidden !important;
    background:var(--mobius-black);
}
.drawer-section-header{
    appearance:none;
    -webkit-appearance:none;
    width:100%;
    min-width:0;
    height:38px;
    min-height:38px;
    flex:0 0 38px;
    margin:0;
    padding:0 10px;
    border:0;
    border-bottom:3px solid var(--mobius-black);
    border-radius:0;
    background:var(--mobius-red-dark);
    color:var(--mobius-white);
    display:flex;
    align-items:center;
    justify-content:flex-start;
    font-family:var(--ui-mono);
    font-size:.80rem;
    line-height:1;
    font-style:normal;
    font-weight:700;
    letter-spacing:.075em;
    text-align:left;
    cursor:pointer;
    touch-action:manipulation;
}
.drawer-section-header:hover,
.drawer-section-header:focus-visible,
.drawer-section-header[aria-expanded="true"]{
    background:var(--mobius-red);
    color:#fff;
}
.drawer-section-header:focus-visible{
    outline:1px solid #fff;
    outline-offset:-2px;
}
.drawer-section-body{
    flex:1 1 auto;
    min-height:0;
    width:100%;
    overflow-y:auto;
    overflow-x:hidden;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
}
.drawer-section-body[hidden]{display:none !important}
.drawer-section-body-album{
    background:var(--mobius-white);
    display:flex;
    flex-direction:column;
}
.drawer-section-body-album .mobius-block-brand{
    flex:1 1 auto;
    min-height:0;
    height:auto !important;
    overflow:visible !important;
}
.drawer-section-body-album .mobius-block-metadata{
    flex:0 0 auto;
    height:auto !important;
    overflow:visible !important;
    margin-top:-8px !important;
}
.drawer-section-body-links{
    background:var(--mobius-white);
}
.drawer-section-body-links .mobius-block-services{
    min-height:100%;
    height:auto !important;
    overflow:visible !important;
    border-bottom:0;
}
.drawer-section-body-visualizer{
    background:var(--mobius-red);
    padding:0;
}
.drawer-section-body-visualizer .mobius-block-links{
    min-height:max-content;
    height:auto !important;
    overflow:visible !important;
    border-bottom:0;
}
.drawer-section-body-settings{
    background:var(--mobius-black);
}
.drawer-section-body-settings .settings-panel,
.drawer-section-body-settings .settings-panel.settings-open{
    position:static !important;
    inset:auto !important;
    left:auto !important;
    right:auto !important;
    top:auto !important;
    bottom:auto !important;
    width:100% !important;
    height:auto !important;
    max-height:none !important;
    margin:0 !important;
    padding:8px 9px 10px !important;
    border:0 !important;
    transform:none !important;
    transition:none !important;
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
    display:block !important;
    background:var(--mobius-black) !important;
    box-shadow:none !important;
}
.drawer-section-body-settings .settings-panel-title{display:none !important}
/* The visible section header now owns the VISUALIZER label. */
.drawer-section-body-visualizer .visualizer-selector > legend{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0,0,0,0) !important;white-space:nowrap !important;border:0 !important}

@media(max-width:700px){
    .drawer-section-header{
        height:34px;
        min-height:34px;
        flex-basis:34px;
        padding:0 8px;
        font-size:.70rem;
    }
    .drawer-section-body-album .mobius-block-metadata{margin-top:-6px !important}
    .drawer-section-body-visualizer .mobius-block-links{padding-top:6px !important}
}

/* -----------------------------
   P6D independent compact Möbius sections
   ----------------------------- */
.drawer-section-header{
    height:19px !important;
    min-height:19px !important;
    flex:0 0 19px !important;
    padding:0 8px !important;
    border-bottom-width:2px !important;
    font-size:.64rem !important;
    line-height:19px !important;
}
.drawer-section-body{
    flex:1 1 0 !important;
    min-height:0 !important;
    align-content:flex-start !important;
}
.drawer-section-body-album,
.drawer-section-body-links,
.drawer-section-body-visualizer,
.drawer-section-body-settings{
    justify-content:flex-start !important;
    align-items:stretch !important;
}
.drawer-section-body-album .mobius-block-brand{
    flex:0 0 auto !important;
    min-height:0 !important;
    justify-content:flex-start !important;
    align-content:flex-start !important;
}
.drawer-section-body-album .mobius-block-metadata{
    flex:0 0 auto !important;
    justify-content:flex-start !important;
    align-content:flex-start !important;
}
.drawer-section-body-links .mobius-block-services{
    min-height:0 !important;
    justify-content:flex-start !important;
    align-content:flex-start !important;
}
.drawer-section-body-visualizer .mobius-block-links{
    min-height:0 !important;
    justify-content:flex-start !important;
    align-content:flex-start !important;
}
.drawer-section-body-settings .settings-panel,
.drawer-section-body-settings .settings-panel.settings-open{
    align-content:flex-start !important;
}
@media(max-width:700px){
    .drawer-section-header{
        height:17px !important;
        min-height:17px !important;
        flex-basis:17px !important;
        padding:0 6px !important;
        font-size:.58rem !important;
        line-height:17px !important;
    }
}

/* -----------------------------
   P6E natural-height Möbius + inline Listen status
   ----------------------------- */
/* The drawer itself no longer paints a full-height black slab. Its visible
   height follows the section content up to the artwork viewport; if the
   combined open sections exceed that viewport, the whole drawer scrolls. */
.listener-drawer.mobius-strip{
    height:auto !important;
    max-height:var(--artwork-size) !important;
    overflow-x:hidden !important;
    overflow-y:auto !important;
    background:transparent !important;
    align-content:flex-start !important;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
}
.drawer-section-body{
    flex:0 0 auto !important;
    width:100% !important;
    min-height:0 !important;
    height:auto !important;
    max-height:none !important;
    overflow:visible !important;
}
.drawer-section-body-album,
.drawer-section-body-links,
.drawer-section-body-visualizer,
.drawer-section-body-settings{
    flex:0 0 auto !important;
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
}
.drawer-section-body-album .mobius-block-brand,
.drawer-section-body-album .mobius-block-metadata,
.drawer-section-body-links .mobius-block-services,
.drawer-section-body-visualizer .mobius-block-links,
.drawer-section-body-settings .settings-panel,
.drawer-section-body-settings .settings-panel.settings-open{
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
}
/* No status row above the thumbnail anymore, so the album module begins at
   the actual album content rather than reserving a phantom status line. */
.drawer-section-body-album .mobius-block-brand{
    padding-top:5px !important;
}

/* Recognition state shares the LP: LISTEN bar. Keep the title visually
   centered while status/timer occupies a small right-side readout. */
.listen-inline-status{
    position:absolute;
    z-index:3;
    right:7px;
    top:50%;
    transform:translateY(-50%);
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:3px;
    max-width:42%;
    min-width:0;
    margin:0;
    padding:0;
    color:#fff;
    font-family:var(--ui-mono);
    font-size:.46rem;
    line-height:1;
    font-style:normal;
    font-weight:700;
    letter-spacing:.025em;
    white-space:nowrap;
    overflow:hidden;
    pointer-events:none;
    text-shadow:0 1px 2px rgba(0,0,0,.72);
}
.listen-inline-status #statusText{
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    color:#fff;
}
.listen-inline-status .status-separator,
.listen-inline-status .status-timer{
    flex:0 0 auto;
    color:#fff;
    font-weight:700;
}
.listen-inline-status .status-lamp{display:none !important}

@media(max-width:700px){
    .listen-inline-status{
        right:5px;
        max-width:40%;
        gap:2px;
        font-size:.39rem;
        letter-spacing:.015em;
    }
    .drawer-section-body-album .mobius-block-brand{padding-top:3px !important}
}


/* -----------------------------
   P6F compact album / unified status
   ----------------------------- */
/* Section headers stay compact and use the same type SIZE as the LP bar. */
.drawer-section-header-row{
    width:100%;
    height:20px;
    min-height:20px;
    flex:0 0 20px;
    display:flex;
    align-items:stretch;
    background:var(--mobius-red-dark);
    border-bottom:2px solid var(--mobius-black);
}
.drawer-section-header{
    flex:1 1 auto !important;
    width:auto !important;
    height:20px !important;
    min-height:20px !important;
    line-height:20px !important;
    padding:0 7px !important;
    border:0 !important;
    background:transparent !important;
    font-size:.79rem !important;
    font-style:normal !important;
    font-weight:700 !important;
    letter-spacing:.045em !important;
}
.drawer-section-header-row.is-open{background:var(--mobius-red)}
.drawer-section-header:focus-visible{
    outline:1px solid #fff;
    outline-offset:-2px;
}
.drawer-section-header-row:hover{background:var(--mobius-red)}

/* Center the complete ALBUM module and give the thumbnail a real breathing
   space before the song title; P5Z/P6B negative pulls are intentionally reset. */
.drawer-section-body-album{
    align-items:center !important;
    text-align:center !important;
}
.drawer-section-body-album .mobius-block-brand,
.drawer-section-body-album .mobius-block-metadata{
    width:100% !important;
}
.drawer-section-body-album .mobius-block-brand{
    justify-items:center !important;
    align-items:start !important;
    padding-top:6px !important;
    padding-bottom:0 !important;
}
.drawer-section-body-album .drawer-cover-thumb-wrap{
    align-self:start !important;
    justify-self:center !important;
    margin-left:auto !important;
    margin-right:auto !important;
}
.drawer-section-body-album .mobius-block-metadata{
    margin-top:7px !important;
    padding-left:9px !important;
    padding-right:9px !important;
    text-align:center !important;
}
.drawer-section-body-album .metadata-result-grid{
    align-items:center !important;
    text-align:center !important;
}
.drawer-section-body-album .metadata-track-title,
.drawer-section-body-album .metadata-artist-name,
.drawer-section-body-album .metadata-album-line,
.drawer-section-body-album .metadata-year-line{
    text-align:center !important;
    justify-content:center !important;
}

/* The LP button is now one typographic sentence: LP: STATUS · TIMER. No
   separate small status readout and no fixed LISTEN word. */
.drawer-actuator-title{justify-content:center !important}
.drawer-actuator-label.listen-inline-status{
    position:relative !important;
    inset:auto !important;
    top:auto !important;
    right:auto !important;
    transform:none !important;
    z-index:3 !important;
    display:inline-flex !important;
    align-items:baseline !important;
    justify-content:center !important;
    gap:5px !important;
    max-width:calc(100% - 34px) !important;
    min-width:0 !important;
    margin:0 !important;
    padding:0 !important;
    color:#fff !important;
    font-family:var(--ui-mono) !important;
    font-size:.79rem !important;
    line-height:1 !important;
    font-style:italic !important;
    font-weight:700 !important;
    letter-spacing:.045em !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-shadow:0 1px 2px rgba(0,0,0,.72) !important;
}
.drawer-actuator-label.listen-inline-status #statusText,
.drawer-actuator-label.listen-inline-status .status-separator,
.drawer-actuator-label.listen-inline-status .status-timer,
.drawer-actuator-label.listen-inline-status .drawer-actuator-lp{
    color:inherit !important;
    font:inherit !important;
    letter-spacing:inherit !important;
    flex:0 0 auto;
}
.drawer-actuator-label.listen-inline-status #statusText{
    min-width:0 !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
}
.drawer-actuator-label.listen-inline-status .status-lamp{display:none !important}

@media(max-width:700px){
    .drawer-section-header-row{
        height:18px;
        min-height:18px;
        flex-basis:18px;
    }
    .drawer-section-header{
        height:18px !important;
        min-height:18px !important;
        line-height:18px !important;
        padding:0 6px !important;
        font-size:.70rem !important;
    }
    .drawer-actuator-label.listen-inline-status{
        max-width:calc(100% - 30px) !important;
        gap:4px !important;
        font-size:.70rem !important;
        letter-spacing:.035em !important;
    }
    .drawer-section-body-album .mobius-block-brand{padding-top:4px !important}
    .drawer-section-body-album .mobius-block-metadata{
        margin-top:6px !important;
        padding-left:7px !important;
        padding-right:7px !important;
    }
}
@media(max-width:430px){
    .drawer-section-header{font-size:.66rem !important}
    .drawer-actuator-label.listen-inline-status{font-size:.66rem !important}
}

/* -----------------------------
   P6G centered cover
   ----------------------------- */
/* Make the album image wrapper size to the artwork rather than to the drawer.
   This removes the last source of left bias while preserving the listening
   overlay canvas in the same centered grid cell. */
.drawer-section-body-album .mobius-block-brand{
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:flex-start !important;
    width:100% !important;
}
.drawer-section-body-album .drawer-cover-thumb-wrap{
    width:fit-content !important;
    height:auto !important;
    max-width:100% !important;
    margin-left:auto !important;
    margin-right:auto !important;
    display:grid;
    place-items:center;
}
.drawer-section-body-album .drawer-cover-thumb-wrap[hidden]{display:none !important}
.drawer-section-body-album .drawer-cover-thumb,
.drawer-section-body-album .drawer-cover-listening-canvas{
    margin-left:auto !important;
    margin-right:auto !important;
}

/* -----------------------------
   P6H section-bar definition
   ----------------------------- */
/* Give each compact section header its own black frame so a header remains
   visually distinct when it follows an expanded red section body. */
.drawer-section-header-row{
    box-sizing:border-box !important;
    border:1px solid var(--mobius-black) !important;
}

@media(max-width:700px){
    .drawer-section-header-row{
        border-width:1px !important;
    }
}

/* -----------------------------
   P6J album-derived accent + compact section stack
   ----------------------------- */
/* Section labels are centered now that the lock controls have been removed. */
.drawer-section-header{
    justify-content:center !important;
    text-align:center !important;
    padding-left:6px !important;
    padding-right:6px !important;
}

/* Put the first section frame directly against the lower edge of the LP status
   actuator instead of starting after the old artwork-top gap. */
.listener-drawer.mobius-strip{
    top:calc(var(--artwork-top-y) - var(--actuator-gap)) !important;
    max-height:calc(var(--artwork-size) + var(--actuator-gap)) !important;
}

/* Keep natural-height drawer scrolling, but never paint browser scrollbars.
   Touch, wheel and trackpad scrolling still work when open sections exceed the viewport. */
.listener-drawer.mobius-strip{
    scrollbar-width:none !important;
    -ms-overflow-style:none;
}
.listener-drawer.mobius-strip::-webkit-scrollbar{
    display:none !important;
    width:0 !important;
    height:0 !important;
}


/* P6M iOS: full available viewport for the accordion, not a square crop.
   Portrait has considerably more vertical space than the cover width. */
.listener-drawer.mobius-strip{
    max-height:calc(100dvh - var(--artwork-top-y) - var(--ticker-h) - var(--safe-bottom) - 10px) !important;
    overflow-y:auto !important;
    scrollbar-width:thin !important;
    scrollbar-color:rgba(255,255,255,.80) rgba(0,0,0,.45) !important;
}
.listener-drawer.mobius-strip::-webkit-scrollbar{
    display:block !important;
    width:9px !important;
}
.listener-drawer.mobius-strip::-webkit-scrollbar-track{background:rgba(0,0,0,.4)}
.listener-drawer.mobius-strip::-webkit-scrollbar-thumb{
    background:rgba(255,255,255,.78);
    border:2px solid rgba(0,0,0,.40);
    border-radius:8px;
}
/* iOS overlays native scrollbars briefly; this custom rail is persistent
   whenever the accordion actually overflows. */
.drawer-scroll-indicator{
    position:fixed;
    z-index:81;
    width:8px;
    border-radius:6px;
    background:rgba(0,0,0,.55);
    pointer-events:none;
}
.drawer-scroll-indicator[hidden]{display:none !important}
.drawer-scroll-indicator > span{
    position:absolute;
    top:0;
    left:1px;
    width:6px;
    border-radius:6px;
    background:rgba(255,255,255,.85);
    box-shadow:0 0 2px #000;
    will-change:transform;
}
@media(orientation:landscape) and (max-height:600px) and (pointer:coarse){
    .listener-drawer.mobius-strip{
        max-height:calc(100dvh - var(--artwork-top-y) - var(--ticker-h) - var(--safe-bottom) - 4px) !important;
    }
}
.listen-retry-prompt{
    position:fixed;
    z-index:120;
    inset:0;
    display:grid;
    place-items:center;
    padding:20px;
    background:rgba(0,0,0,.62);
}
.listen-retry-prompt[hidden]{display:none !important}
.listen-retry-card{
    width:min(360px,100%);
    padding:18px 15px;
    border:2px solid #f6e7bf;
    border-radius:7px;
    background:#161416;
    color:#fff;
    box-shadow:0 12px 36px #000b;
    text-align:center;
}
.listen-retry-card p{
    margin:0 0 17px;
    font:700 1rem/1.4 var(--ui-mono);
    letter-spacing:.02em;
}
.listen-retry-actions{display:flex;flex-wrap:wrap;gap:9px;justify-content:center}
.listen-retry-actions button{
    padding:11px 10px;
    border:1px solid #ede8de;
    border-radius:5px;
    color:#fff;
    background:#3e4943;
    font:700 .72rem/1.1 var(--ui-mono);
    cursor:pointer;
}
.listen-retry-actions button:first-child{background:#176b73}
.settings-export-perf{
    display:block;
    width:100%;
    margin-top:12px;
    padding:9px 5px;
    border:1px solid #c8c0b7;
    background:#273c43;
    color:#fff;
    font:700 .60rem/1.2 var(--ui-mono);
    letter-spacing:.03em;
    cursor:pointer;
}

/* Seven palettes: avoid shrinking the full CONTRAST label on phones. */
.mobius-block-links .palette-selector{
    grid-template-columns:repeat(7,minmax(0,1fr)) !important;
    gap:1px !important;
}
.mobius-block-links .palette-selector span{
    font-size:.42rem !important;
    padding-inline:0 !important;
    letter-spacing:-.045em !important;
}
@media(max-width:700px) and (orientation:portrait){
    .mobius-block-links .palette-selector{grid-template-columns:repeat(4,minmax(0,1fr)) !important}
    .mobius-block-links .palette-selector span{font-size:.49rem !important}
}
@media(max-height:520px) and (orientation:landscape){
    .mobius-block-links .palette-selector span{font-size:.37rem !important}
}

/* P6N: two-row palettes (album-derived, then stylized) and backgrounds
   (still/fade, then animated effects). Readability wins over a one-line ticker. */
.mobius-block-links .drawer-level-row-palette,
.mobius-block-links .drawer-level-row-ghost {
    align-items:center;
    min-height:52px;
}
.mobius-block-links .palette-selector {
    grid-template-columns:repeat(12,minmax(0,1fr)) !important;
    grid-auto-flow:row !important;
    gap:2px !important;
    padding:3px !important;
    border-radius:12px !important;
}
.mobius-block-links .palette-selector label[data-palette-group="derived"] { grid-column:span 2; }
.mobius-block-links .palette-selector label.palette-sized-album { grid-column:span 3; }
.mobius-block-links .palette-selector label.palette-sized-contrast { grid-column:span 5; }
.mobius-block-links .palette-selector label[data-palette-group="styled"] { grid-column:span 4; }
.mobius-block-links .background-mode-selector {
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:2px !important;
    padding:3px !important;
    border-radius:12px !important;
}
.mobius-block-links .palette-selector span,
.mobius-block-links .background-mode-selector span {
    min-height:20px;
    font-size:.59rem !important;
    letter-spacing:-.018em !important;
    padding:2px 1px !important;
}
@media(max-width:700px) and (orientation:portrait) {
    .mobius-block-links .palette-selector {grid-template-columns:repeat(12,minmax(0,1fr)) !important;}
    .mobius-block-links .palette-selector span,
    .mobius-block-links .background-mode-selector span {font-size:.55rem !important;}
}
@media(max-height:520px) and (orientation:landscape) {
    .mobius-block-links .palette-selector span,
    .mobius-block-links .background-mode-selector span {font-size:.54rem !important;}
}