/* =====================================================================================================================
   MY LUSTLIT v2 (2026-10-09): the member's own LustLit, Spotify's shape in the house's look. Code/my/README.md is the
   manual. Hayden, 2026-10-09: "so they can save images to their Dashboard. Videos. create playlists. Think Spotify."

   Built on LL-UI (rows, tiles, buttons, pills, seams: Code/ui/, the video session's, never patched here), the shared
   tokens (head.css) and the shared client's look (ll-library.css: .lll-* hearts, "Save to", the question, the toast).
   Only .llm-* lives in this file.
   THE RULES IT KEEPS (design-system.md, site-art.md, ui/README.md):
   - dark; #ef4444 is the accent and the only red type; #c41e3a only as a fill; numbers white (there are none: no counts);
   - a glow is filter: drop-shadow() or a gradient, never box-shadow on a red line;
   - every picture is shown WHOLE, in a box of its own shape (--ar). Nothing scales a picture; nothing sits over a
     picture's bottom-right corner (hearts and "Save to" top right, badges bottom left; the player's controls live
     above and below the picture, never on it);
   - no eyebrow over a title; drawn icons only;
   - reduced motion: no drift, tilt, pop, slide or morph; fades of 150 ms or less.
   ================================================================================================================== */

/* her colour, animatable, so the room's light crossfades from one woman to the next */
@property --llm-c {
    syntax: '<color>';
    inherits: true;
    initial-value: #ef4444;
}

.llm {
    --llm-c: var(--llm-start, #ef4444);
    --llm-ink: rgba(255, 255, 255, .84);
    --llm-mute: rgba(255, 255, 255, .58);
    --llm-panel: #0b0b0c;
    --llm-tile: rgba(255, 255, 255, .055);
    position: relative;
    color: #fff;
    background: var(--ll-black, #0a0a0a);
    overflow-x: clip;
    transition: --llm-c 900ms var(--ll-ease-settle, ease);
}
.llm *, .llm *::before, .llm *::after { box-sizing: border-box; }
.llm a { color: inherit; }
.llm h1, .llm h2, .llm h3, .llm p { margin: 0; }
.llm [hidden] { display: none !important; }                             /* LL-UI's pills and tiles set display; hidden wins */
.llm-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---- THE ROOM'S LIGHT: her colour pooled low, a red ember far left, a slow drift, a little grain ------------------ */
.llm-aura { position: absolute; inset: 0 0 auto; height: min(1100px, 120svh); z-index: 0; pointer-events: none; overflow: hidden; }
.llm-aura::before {
    content: ""; position: absolute; inset: -18% -12% -6%;
    background:
        radial-gradient(38% 42% at 70% 44%, color-mix(in srgb, var(--llm-c) 46%, transparent), transparent 70%),
        radial-gradient(60% 34% at 70% 70%, color-mix(in srgb, var(--llm-c) 30%, transparent), transparent 72%),
        radial-gradient(30% 30% at 96% 8%, color-mix(in srgb, var(--llm-c) 22%, transparent), transparent 72%),
        radial-gradient(40% 36% at 2% 70%, rgba(196, 30, 58, .2), transparent 72%);
    animation: llm-drift 26s ease-in-out infinite alternate;
}
.llm-aura::after {                                                     /* the floor of the room, and a whisper of grain */
    content: ""; position: absolute; inset: 0;
    background:
        linear-gradient(180deg, transparent 62%, var(--ll-black, #0a0a0a) 100%),
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .05 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
@keyframes llm-drift {
    0% { transform: translate3d(0, 0, 0) scale(1); }
    100% { transform: translate3d(-3%, 2%, 0) scale(1.06); }
}

/* =====================================================================================================================
   TONIGHT: the words left; she stands on the floor of the room, whole, right.
   ================================================================================================================== */
.llm-hero {
    position: relative; z-index: 1;
    display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); align-items: end;
    gap: clamp(12px, 3vw, 48px);
    min-height: min(76svh, 720px);
    padding: calc(var(--llui-bar, 56px) + clamp(28px, 5vw, 72px)) var(--llui-gutter, 16px) 0;
}
.llm-hero__words { align-self: center; max-width: 640px; padding-bottom: clamp(32px, 5vw, 72px); }
.llm-hero__words > * + * { margin-top: 20px; }
.llm-hero__title {
    font: 800 clamp(2.9rem, 6.2vw, 5.4rem)/.94 var(--font-heading, 'Plus Jakarta Sans', sans-serif);
    letter-spacing: -.045em; color: #fff; text-wrap: balance;
}
.llm-hero__title em { font-style: normal; color: var(--llm-c); transition: color 900ms var(--ll-ease-settle); filter: drop-shadow(0 0 22px color-mix(in srgb, var(--llm-c) 45%, transparent)); }
.llm-hero__line { max-width: 36ch; font: 500 clamp(1.05rem, 1.5vw, 1.3rem)/1.5 var(--font-body, sans-serif); color: var(--llm-ink); }
.llm-hero .llui-actions { margin-top: 30px; }
.llm-hero__her {
    position: relative; align-self: end; justify-self: center; display: block;
    height: min(66svh, 640px); aspect-ratio: var(--ar, .7); max-width: 100%;
    text-decoration: none; border-radius: 0;
}
.llm-hero__her img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%;
    filter: drop-shadow(0 30px 60px rgba(0, 0, 0, .55)); transition: opacity 500ms var(--ll-ease-settle); }
.llm-hero__floor {                                                     /* the stage edge she stands on: her colour, lit */
    position: absolute; left: 6%; right: 6%; bottom: 0; height: 2px; border-radius: 2px;
    background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--llm-c) 85%, #fff) 30%, color-mix(in srgb, var(--llm-c) 85%, #fff) 70%, transparent);
    filter: drop-shadow(0 0 10px var(--llm-c)) drop-shadow(0 0 26px color-mix(in srgb, var(--llm-c) 60%, transparent));
    transition: background 900ms var(--ll-ease-settle);
}
.llm-hero__tag {                                                       /* her name, on glass, beside her (never over her corner) */
    position: absolute; left: 0; bottom: 22%; transform: translateX(-30%);
    display: inline-flex; flex-direction: column; gap: 4px; padding: 12px 16px; border-radius: 12px;
    background: var(--ll-glass-bg, rgba(11, 11, 12, .55)); -webkit-backdrop-filter: var(--ll-glass-filter, blur(20px)); backdrop-filter: var(--ll-glass-filter, blur(20px));
    border: 1px solid rgba(255, 255, 255, .14); text-align: left;
}
.llm-hero__tag b { font: 800 1rem/1.15 var(--font-heading, sans-serif); letter-spacing: -.01em; color: #fff; }
.llm-hero__tag span { font: 600 .6875rem/1.2 var(--font-body, sans-serif); letter-spacing: .1em; text-transform: uppercase; color: var(--llm-mute); }
.llm-hero__tag span::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: var(--llm-c); vertical-align: 1px; filter: drop-shadow(0 0 5px var(--llm-c)); }

/* =====================================================================================================================
   THE TABS: For you, Your Library. They stay under the menu while you scroll; the one you are in carries the seam.
   ================================================================================================================== */
.llm-tabs { position: sticky; top: var(--header-height, 56px); z-index: 20; margin-top: clamp(8px, 2vw, 24px);
    background: linear-gradient(180deg, rgba(10, 10, 10, .92), rgba(10, 10, 10, .78));
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom: 1px solid var(--ll-hairline, rgba(255, 255, 255, .08)); }
.llm-tabs__track { display: flex; gap: clamp(18px, 3vw, 36px); padding: 0 var(--llui-gutter, 16px); }
.llm-tab { position: relative; padding: 16px 0 14px; border: 0; background: none; cursor: pointer; color: var(--llm-mute);
    font: 800 clamp(1rem, 1.5vw, 1.15rem)/1 var(--font-heading, 'Plus Jakarta Sans', sans-serif); letter-spacing: -.01em;
    transition: color var(--ll-dur-fast, 150ms) ease; }
.llm-tab:hover { color: #fff; }
.llm-tab[aria-selected="true"] { color: #fff; }
.llm-tab[aria-selected="true"]::after {                                 /* the neon seam (neon-seam.md: #ef4444 core, drop-shadow aura) */
    content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; border-radius: 2px; background: #ef4444;
    filter: drop-shadow(0 0 6px rgba(239, 68, 68, .9)) drop-shadow(0 0 14px rgba(239, 68, 68, .5)); }
.llm-tab:focus-visible { outline: 2px solid #fff; outline-offset: 4px; border-radius: 4px; }
.llm-panel { position: relative; z-index: 1; padding-top: clamp(20px, 3vw, 36px); }

/* =====================================================================================================================
   SECTIONS AND HEADS
   ================================================================================================================== */
.llm-section { position: relative; z-index: 1; margin: clamp(36px, 5vw, 64px) 0; }
.llm-panel > .llm-section:first-child { margin-top: 0; }
.llm-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 12px 24px; padding: 0 var(--llui-gutter, 16px); margin-bottom: 18px; }
.llm-head .llui-row__title { font-size: clamp(1.3rem, 2vw, 1.75rem); font-weight: 800; letter-spacing: -.02em; }
.llm-head__sub { margin-top: 6px !important; font: 400 .9375rem/1.5 var(--font-body, sans-serif); color: var(--llm-mute); max-width: 60ch; }
.llm-inline-icon { display: inline-grid; place-items: center; width: 22px; height: 22px; vertical-align: -6px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .25); }
.llm-inline-icon svg { width: 13px; height: 13px; }
.llm .llui-row { z-index: 1; }
.llm .llui-btn svg { width: 16px; height: 16px; }

/* ---- the heart and "Save to", top right of a picture (the shared client draws them; this only places them) -------- */
.llm-acts { position: absolute; top: 8px; right: 8px; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.llm .llui-row__item { position: relative; }
.llm .llui-row__item > .llm-acts { top: 12px; }

/* =====================================================================================================================
   JUMP BACK IN: Spotify's quick grid. A small cover, the name, play on the right (never over a picture).
   ================================================================================================================== */
.llm-quick { padding: 0 var(--llui-gutter, 16px); margin-bottom: clamp(8px, 2vw, 20px); }
.llm-quick__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; list-style: none; margin: 0; padding: 0; }
.llm-quick__item { position: relative; }
.llm-quick__tile { display: flex; align-items: center; gap: 14px; width: 100%; height: 68px; padding: 0 56px 0 0; border: 0; border-radius: 10px; overflow: hidden; cursor: pointer;
    background: var(--llm-tile); color: #fff; text-align: left; transition: background-color var(--ll-dur-fast, 150ms) ease; }
.llm-quick__tile:hover { background: rgba(255, 255, 255, .1); }
.llm-quick__tile:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.llm-quick__tile .llm-deck { flex: none; width: 68px; height: 68px; border-radius: 0; }
.llm-quick__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 .9375rem/1.25 var(--font-heading, sans-serif); letter-spacing: -.005em; }
.llm-quick__play, .llm-pl__play {
    position: absolute; z-index: 2; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
    background: #c41e3a; color: #fff; filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .5));
    transition: opacity var(--ll-dur, 240ms) ease, transform var(--ll-dur, 240ms) var(--ll-ease-settle), background-color 150ms ease; }
.llm-quick__play { right: 12px; top: 50%; transform: translateY(-50%); }
.llm-quick__play svg, .llm-pl__play svg { width: 16px; height: 16px; margin-left: 2px; }
.llm-quick__play:hover, .llm-pl__play:hover { background: #d42d4a; }
.llm-quick__play:focus-visible, .llm-pl__play:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) {
    .llm-quick__play { opacity: 0; }
    .llm-quick__item:hover .llm-quick__play, .llm-quick__play:focus-visible, .llm-quick__tile:focus-visible + .llm-quick__play { opacity: 1; }
}

/* =====================================================================================================================
   A PLAYLIST'S COVER: its first picture WHOLE on a pool of her colour, the edges of the next two behind it
   ================================================================================================================== */
.llm-deck { position: relative; display: block; width: 100%; aspect-ratio: 1; border-radius: 10px; overflow: hidden; isolation: isolate;
    background: radial-gradient(120% 95% at 50% 112%, color-mix(in srgb, var(--c, #c41e3a) 72%, #0b0b0c) 0%, color-mix(in srgb, var(--c, #c41e3a) 26%, #0b0b0c) 55%, #0d0d0f 100%); }
.llm-deck__stack { position: absolute; left: 50%; bottom: 8%; height: 74%; aspect-ratio: var(--ar, .78); max-width: 76%; transform: translateX(-50%); isolation: isolate;
    filter: drop-shadow(0 8px 16px rgba(0, 0, 0, .5)); }
.llm-deck__stack::before, .llm-deck__stack::after { content: ""; position: absolute; z-index: -1; border-radius: 6px; }
.llm-deck__stack::before { left: 7%; right: 7%; top: -7%; bottom: 7%; background: color-mix(in srgb, var(--c2, #c41e3a) 62%, #1c1c20); }
.llm-deck__stack::after { left: 15%; right: 15%; top: -13%; bottom: 13%; background: color-mix(in srgb, var(--c3, #c41e3a) 42%, #1c1c20); }
.llm-deck__stack img { position: relative; display: block; width: 100%; height: 100%; object-fit: contain; border-radius: 6px; }
.llm-deck__icon { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; }
.llm-deck__icon svg { width: 38%; height: 38%; max-width: 46px; max-height: 46px; filter: drop-shadow(0 0 10px rgba(255, 255, 255, .35)); }
.llm-deck.is-empty .llm-deck__icon path[d^="M12 21C5"] { fill: #fff; }   /* Liked's heart, filled */

/* ---- a shelf of playlists: a rail (Made for you) or a grid (Your Playlists) ------------------------------------ */
.llm-shelf { list-style: none; margin: 0; }
.llm-shelf.llui-row__rail > .llm-pl__item { flex: none; width: clamp(150px, 15vw, 210px); scroll-snap-align: start; }
.llm-shelf--grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(clamp(140px, 15vw, 200px), 1fr)); gap: clamp(14px, 1.6vw, 22px); padding: 0 var(--llui-gutter, 16px); }
.llm-pl__item { position: relative; }
.llm-pl { display: block; width: 100%; padding: 0; border: 0; background: none; color: #fff; text-align: left; text-decoration: none; cursor: pointer; }
.llm-pl .llm-deck { transition: transform var(--ll-dur, 240ms) var(--ll-ease-settle); }
.llm-pl:focus-visible { outline: none; }
.llm-pl:focus-visible .llm-deck { outline: 2px solid #fff; outline-offset: 3px; }
.llm-pl__text { display: block; padding-top: 12px; min-width: 0; }
.llm-pl__name { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 .9375rem/1.3 var(--font-heading, sans-serif); letter-spacing: -.01em; color: #fff; }
.llm-pl__line { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 4px; font: 500 .8125rem/1.4 var(--font-body, sans-serif); color: var(--llm-mute); }
.llm-pl__play { top: 10px; right: 10px; }                               /* top right of the cover: never a picture's bottom-right corner */
@media (hover: hover) and (pointer: fine) {
    .llm-pl:hover .llm-deck { transform: translateY(-4px); }
    .llm-pl__play { opacity: 0; transform: translateY(4px); }
    .llm-pl__item:hover .llm-pl__play, .llm-pl__play:focus-visible, .llm-pl:focus-visible + .llm-pl__play { opacity: 1; transform: none; }
}

/* YOUR GIRLS: full row height (who she is drives the likes); her colour lights the room on hover and focus */
.llm-girls { --llui-row-h: clamp(250px, 25vw, 380px); }
.llm-girls .llui-tile__pic { cursor: pointer; }

/* =====================================================================================================================
   YOUR LIBRARY: the tools, her face to filter by, the wall
   ================================================================================================================== */
.llm-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.llm-filter { display: inline-flex; flex-wrap: wrap; gap: 6px; padding: 4px; border-radius: var(--ll-radius-pill, 999px);
    background: rgba(255, 255, 255, .05); border: 1px solid var(--ll-hairline, rgba(255, 255, 255, .08)); }
.llm-filter button {
    display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 0 14px; border-radius: var(--ll-radius-pill, 999px);
    border: 0; background: transparent; cursor: pointer;
    font: 700 .75rem/1 var(--font-body, sans-serif); letter-spacing: .08em; text-transform: uppercase; color: var(--llm-mute);
    transition: background-color var(--ll-dur-fast, 150ms) ease, color var(--ll-dur-fast, 150ms) ease;
}
.llm-filter button:hover { color: #fff; }
.llm-filter button[aria-pressed="true"] { background: rgba(255, 255, 255, .12); color: #fff; }
.llm-filter button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.llm-faces { display: flex; flex-wrap: wrap; gap: 4px 6px; padding: 0 var(--llui-gutter, 16px); margin: -4px 0 20px; list-style: none; }
.llm-faces button { display: flex; flex-direction: column; align-items: center; gap: 7px; width: 74px; padding: 6px 2px; border: 0; border-radius: 12px; cursor: pointer;
    background: transparent; color: var(--llm-mute); font: 600 .75rem/1.2 var(--font-body, sans-serif); transition: color 150ms ease, background-color 150ms ease; }
.llm-faces button:hover { color: #fff; background: rgba(255, 255, 255, .04); }
.llm-faces button:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }
.llm-face { position: relative; display: block; width: 52px; height: 52px; border-radius: 50%; overflow: hidden;
    background: radial-gradient(80% 80% at 50% 30%, color-mix(in srgb, var(--c) 70%, #fff 10%), color-mix(in srgb, var(--c) 40%, #0b0b0c));
    outline: 2px solid transparent; outline-offset: 2px; transition: outline-color 150ms ease; }
.llm-face img { display: block; width: 100%; height: 100%; object-fit: cover; }    /* a headshot made for a circle */
.llm-face.is-dot { width: 52px; height: 52px; }
.llm-face.is-dot::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 12px; margin: -6px; border-radius: 50%; background: #fff; opacity: .9; }
.llm-face__name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.llm-faces button[aria-pressed="true"] { color: #fff; }
.llm-faces button[aria-pressed="true"] .llm-face { outline-color: var(--c); filter: drop-shadow(0 0 8px color-mix(in srgb, var(--c) 70%, transparent)); }

/* THE WALL: everything liked, justified (every row one height, every picture whole at its own shape) */
.llm-grid { --h: clamp(170px, 19vw, 290px); display: flex; flex-wrap: wrap; gap: clamp(10px, 1.1vw, 16px); list-style: none; margin: 0; padding: 0 var(--llui-gutter, 16px); }
.llm-grid::after { content: ""; flex: 999 1 0; }                       /* the last row keeps its height instead of stretching */
.llm-cell { position: relative; flex: var(--ar) 1 calc(var(--h) * var(--ar)); max-width: calc(var(--h) * var(--ar) * 1.7); min-width: 0; }
.llm-cell[hidden] { display: none; }
.llm-cell.is-leaving { animation: llm-leave 260ms var(--ll-ease-settle) forwards; }
@keyframes llm-leave { to { opacity: 0; transform: translateY(6px); } }
.llm-card { display: block; text-decoration: none; color: inherit; }
.llm-card__pic { position: relative; display: block; width: 100%; aspect-ratio: var(--ar); overflow: hidden; border-radius: var(--ll-radius-poster, 8px);
    background: #141416; outline: 1px solid var(--ll-hairline, rgba(255, 255, 255, .08)); outline-offset: -1px; transition: transform var(--ll-dur, 240ms) var(--ll-ease-settle); }
.llm-card__pic img { display: block; width: 100%; height: 100%; object-fit: cover; }   /* the box is the picture's own shape: whole */
.llm-card__pic video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 300ms var(--ll-ease-settle); }
.llm-card.is-playing .llm-card__pic video { opacity: 1; }
.llm-card__text { display: block; padding: 12px 2px 0; min-width: 0; }
.llm-card__kicker { display: flex; align-items: center; gap: 7px; font: 700 .6875rem/1.2 var(--font-body, sans-serif); letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .62); }
.llm-card__kicker::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--c, #ef4444); flex: none; }
.llm-card__name { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; margin-top: 5px;
    font: 700 .9375rem/1.3 var(--font-heading, sans-serif); letter-spacing: -.01em; color: #fff; }
.llm-cell[data-kind="pic"] .llm-card__name { font-style: italic; font-weight: 500; color: var(--llm-ink); }   /* her line from the story */
.llm-cell[data-kind="pic"] .llm-card__name::before { content: "\201C"; }
.llm-cell[data-kind="pic"] .llm-card__name::after { content: "\201D"; }
.llm-badge { position: absolute; left: 8px; bottom: 8px; z-index: 1; display: inline-flex; align-items: center; gap: 6px; padding: 5px 8px; border-radius: 5px;
    background: rgba(0, 0, 0, .74); font: 700 .75rem/1 var(--font-body, sans-serif); color: #fff; letter-spacing: .02em; }
.llm-badge svg { width: 11px; height: 11px; flex: none; }
.llm-badge--lock { border: 1px solid rgba(239, 68, 68, .6); letter-spacing: .08em; text-transform: uppercase; font-size: .6875rem; }
@media (hover: hover) and (pointer: fine) {
    .llm-card:hover .llm-card__pic { transform: translateY(-4px); }
}
.llm-card:focus-visible { outline: none; }
.llm-card:focus-visible .llm-card__pic { outline: 2px solid #fff; outline-offset: 3px; }

/* ---- EMPTY: the wall before the first heart -------------------------------------------------------------------- */
.llm-empty { margin: 0 var(--llui-gutter, 16px); padding: clamp(28px, 4vw, 48px); border-radius: var(--ll-radius-card, 12px);
    border: 1px dashed rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .02); display: grid; grid-template-columns: auto 1fr; gap: 20px 28px; align-items: center; }
.llm-empty[hidden] { display: none; }
.llm-empty__heart { width: 64px; height: 64px; display: grid; place-items: center; border-radius: 50%; background: rgba(239, 68, 68, .08); border: 1px solid rgba(239, 68, 68, .35); }
.llm-empty__heart svg { width: 28px; height: 28px; filter: drop-shadow(0 0 8px rgba(239, 68, 68, .7)); animation: llm-beat 2.4s ease-in-out infinite; }
.llm-empty__heart path { fill: rgba(239, 68, 68, .9); stroke: #ef4444; stroke-width: 2; stroke-linejoin: round; }
.llm-empty h3 { font: 800 1.25rem/1.25 var(--font-heading, sans-serif); letter-spacing: -.01em; }
.llm-empty p { margin-top: 6px; color: var(--llm-mute); font-size: .9375rem; line-height: 1.55; max-width: 58ch; }
@keyframes llm-beat { 0%, 100% { transform: scale(1); } 12% { transform: scale(1.14); } 24% { transform: scale(1); } 36% { transform: scale(1.1); } 48% { transform: scale(1); } }

/* =====================================================================================================================
   THE PLAYLIST (a dialog): its cover, its name, play, shuffle, rename, delete; its rows, reordered by the grip
   ================================================================================================================== */
.llm-list, .llm-her { padding: 0; border: 0; color: #fff; background: transparent; max-width: none; max-height: none; width: 100%; height: 100%; margin: 0; overflow: hidden; }
.llm-list::backdrop, .llm-her::backdrop { background: rgba(5, 5, 6, .72); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.llm-list[open], .llm-her[open] { display: grid; place-items: center; }
.llm-list__panel {
    --c: #ef4444;
    position: relative; isolation: isolate; width: min(980px, 94vw); height: min(880px, 92svh); overflow: hidden;
    border-radius: 18px; background: var(--llm-panel); border: 1px solid rgba(255, 255, 255, .1);
    filter: drop-shadow(0 40px 80px rgba(0, 0, 0, .6));
}
.llm-list[open] .llm-list__panel, .llm-her[open] .llm-her__panel { animation: llm-rise 420ms var(--ll-ease-settle); }
@keyframes llm-rise { from { opacity: 0; transform: translateY(18px) scale(.985); } to { opacity: 1; transform: none; } }
.llm-list__wash { position: absolute; inset: 0 0 auto; height: 380px; z-index: -1; pointer-events: none;
    background: linear-gradient(180deg, color-mix(in srgb, var(--c) 42%, transparent), transparent); }
.llm-list__close { position: absolute; top: 14px; right: 14px; z-index: 5; }
.llm-list__body { height: 100%; overflow-y: auto; overscroll-behavior: contain; padding: clamp(24px, 3vw, 36px) clamp(16px, 3vw, 36px) 40px;
    scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .2) transparent; }
.llm-list__head { display: grid; grid-template-columns: clamp(140px, 22vw, 220px) minmax(0, 1fr); align-items: end; gap: clamp(18px, 3vw, 32px); padding-right: 48px; margin-bottom: clamp(22px, 3vw, 34px); }
.llm-list__cover .llm-deck { border-radius: 12px; filter: drop-shadow(0 20px 40px rgba(0, 0, 0, .55)); }
.llm-list__name { font: 800 clamp(2rem, 5vw, 3.6rem)/.98 var(--font-heading, sans-serif); letter-spacing: -.04em; text-wrap: balance; overflow-wrap: anywhere; }
.llm-list__line { margin-top: 12px !important; color: var(--llm-ink); font-size: .9375rem; line-height: 1.5; }
.llm-list__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 20px; }
.llm-list__tool { width: 44px; height: 44px; }
.llm-list__none { padding: 24px; border-radius: 12px; border: 1px dashed rgba(255, 255, 255, .16); color: var(--llm-mute); line-height: 1.55; }
.llm-list__rows { list-style: none; margin: 0; padding: 0; }
.llm-li { position: relative; display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 12px; transition: background-color 150ms ease; }
.llm-li:hover { background: rgba(255, 255, 255, .05); }
.llm-li.is-dragging { background: rgba(255, 255, 255, .08); outline: 1px solid color-mix(in srgb, var(--c) 60%, transparent); }
.llm-li__grip { display: grid; place-items: center; flex: none; width: 32px; height: 44px; padding: 0; border: 0; border-radius: 8px; background: none; color: var(--llm-mute); cursor: grab; touch-action: none; }
.llm-li__grip:hover { color: #fff; background: rgba(255, 255, 255, .06); }
.llm-li__grip:focus-visible { outline: 2px solid #fff; outline-offset: 1px; color: #fff; }
.llm-li.is-dragging .llm-li__grip { cursor: grabbing; }
.llm-li__grip svg { width: 18px; height: 18px; }
.llm-li__main { display: flex; align-items: center; gap: 14px; flex: 1 1 auto; min-width: 0; text-decoration: none; color: #fff; border-radius: 8px; }
.llm-li__main:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.llm-li__pic { position: relative; flex: none; width: 72px; height: 64px; border-radius: 6px; overflow: hidden; background: #141416; outline: 1px solid rgba(255, 255, 255, .08); outline-offset: -1px; }   /* one slot for every shape: the picture whole inside it, the words in line */
.llm-li__pic img { display: block; width: 100%; height: 100%; object-fit: contain; }
.llm-li__text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.llm-li--gone .llm-li__pic { display: grid; place-items: center; color: var(--llm-mute); }
.llm-li--gone .llm-li__pic svg { width: 22px; height: 22px; }
.llm-li--gone .llm-li__title { color: var(--llm-mute); }
.llm-li__kicker { display: flex; align-items: center; gap: 7px; font: 700 .6875rem/1.2 var(--font-body, sans-serif); letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .62); }
.llm-li__kicker::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--c); flex: none; }
.llm-li__title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 .9375rem/1.3 var(--font-heading, sans-serif); }
.llm-li__meta { font: 500 .8125rem/1.3 var(--font-body, sans-serif); color: var(--llm-mute); }
.llm-li__acts { display: flex; align-items: center; gap: 8px; flex: none; }
.llm-li__acts .lll-heart, .llm-li__acts .lll-save { width: 36px; height: 36px; }
.llm-li__remove { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border-radius: 50%; cursor: pointer; color: #fff;
    background: transparent; border: 1px solid rgba(255, 255, 255, .22); transition: border-color 150ms ease, background-color 150ms ease; }
.llm-li__remove:hover { border-color: rgba(239, 68, 68, .7); background: rgba(239, 68, 68, .1); }
.llm-li__remove:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.llm-li__remove svg { width: 16px; height: 16px; }
.llm-rename { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.llm-rename__input { flex: 1 1 240px; min-width: 0; min-height: 52px; padding: 0 16px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .25);
    background: rgba(255, 255, 255, .06); color: #fff; font: 800 clamp(1.2rem, 3vw, 1.8rem)/1.1 var(--font-heading, sans-serif); letter-spacing: -.02em; }
.llm-rename__input:focus { outline: 2px solid #fff; outline-offset: 1px; border-color: transparent; }
.llm-rename__input::placeholder { color: rgba(255, 255, 255, .35); }

/* ---- a small question (delete, clear, a new playlist's name) ------------------------------------------------------ */
.llm-confirm { padding: 0; border: 0; margin: auto; inset: 0; background: transparent; color: #fff; max-width: min(500px, 92vw); }
.llm-confirm::backdrop { background: rgba(5, 5, 6, .7); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.llm-confirm__box { display: grid; gap: 14px; padding: 28px 28px 24px; border-radius: 18px; background: #0f0f12; border: 1px solid rgba(255, 255, 255, .12); filter: drop-shadow(0 30px 60px rgba(0, 0, 0, .6)); }
.llm-confirm[open] .llm-confirm__box { animation: llm-rise 280ms var(--ll-ease-settle); }
.llm-confirm__title { font: 800 1.45rem/1.15 var(--font-heading, sans-serif); letter-spacing: -.02em; overflow-wrap: anywhere; }
.llm-confirm__line { color: var(--llm-ink); line-height: 1.55; }
.llm-confirm .llui-actions { margin-top: 6px; }
.llm-confirm .llm-rename__input { font-size: 1.15rem; min-height: 48px; }

/* =====================================================================================================================
   THE PLAYER: a lean-back show. The picture whole in the middle row; the controls above and below it, never on it.
   ================================================================================================================== */
.llm-play { padding: 0; border: 0; margin: 0; width: 100%; height: 100%; max-width: none; max-height: none; background: #000; color: #fff; overflow: hidden; }
.llm-play::backdrop { background: #000; }
.llm-play[open] { display: block; }
.llm-play__stage { position: relative; width: 100%; height: 100%; display: grid; grid-template-rows: 64px minmax(0, 1fr) auto;
    background: radial-gradient(70% 60% at 50% 55%, color-mix(in srgb, var(--c, #ef4444) 16%, #000), #000 72%); }
.llm-play__top { display: flex; align-items: center; gap: 10px; padding: 12px 14px 0 var(--llui-gutter, 16px); transition: opacity 400ms ease; }
.llm-play__title { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font: 700 .75rem/1 var(--font-body, sans-serif); letter-spacing: .12em; text-transform: uppercase; color: var(--llm-mute, rgba(255, 255, 255, .58)); }
.llm-play__fig { margin: 0; min-height: 0; display: grid; place-items: center; padding: 8px 76px; container-type: size; }
.llm-play__pic { position: relative; width: min(100cqw, 100cqh * var(--ar, .78)); aspect-ratio: var(--ar, .78); }   /* the largest box of her shape that fits */
.llm-play__pic img { display: block; width: 100%; height: 100%; object-fit: contain; transition: opacity 150ms ease; }
.llm-play__pic img.is-out { opacity: 0; }
.llm-play__lock { position: absolute; left: 50%; bottom: 14%; transform: translateX(-50%); display: grid; justify-items: center; gap: 12px; padding: 18px 22px;
    border-radius: 14px; background: var(--ll-glass-bg, rgba(11, 11, 12, .55)); -webkit-backdrop-filter: var(--ll-glass-filter, blur(20px)); backdrop-filter: var(--ll-glass-filter, blur(20px));
    border: 1px solid rgba(255, 255, 255, .16); text-align: center; width: max-content; max-width: 80%; }
.llm-play__lock p { margin: 0; font: 600 .875rem/1.45 var(--font-body, sans-serif); color: rgba(255, 255, 255, .84); }
.llm-play__side { position: absolute; top: calc(64px + (100% - 64px - var(--llm-bar-h, 120px)) / 2); transform: translateY(-50%); z-index: 2; transition: opacity 400ms ease; }
.llm-play__side--prev { left: 14px; }
.llm-play__side--next { right: 14px; }
.llm-play__bar { --llm-bar-h: 120px; position: relative; padding: 14px var(--llui-gutter, 16px) max(16px, env(safe-area-inset-bottom)); }
.llm-play__seam { position: relative; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, .14); margin-bottom: 14px; overflow: visible; }
.llm-play__seam i { position: absolute; inset: 0; border-radius: 2px; background: #ef4444; transform: scaleX(0); transform-origin: left center;
    filter: drop-shadow(0 0 5px rgba(239, 68, 68, .85)); }
.llm-play__seam.is-run i { animation: llm-seam var(--t, 7000ms) linear forwards; }
@keyframes llm-seam { to { transform: scaleX(1); } }
.llm-play__ctrl { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 14px; transition: opacity 400ms ease; }
.llm-play__cap { display: flex; flex-direction: column; gap: 4px; min-width: 0; margin: 0; }
.llm-play__cap b { display: flex; align-items: center; gap: 8px; font: 800 1rem/1.2 var(--font-heading, sans-serif); color: #fff; }
.llm-play__cap b::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--c, #ef4444); filter: drop-shadow(0 0 5px var(--c, #ef4444)); flex: none; }
.llm-play__cap span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 400 .875rem/1.4 var(--font-body, sans-serif); font-style: italic; color: rgba(255, 255, 255, .78); }
.llm-play__mid { display: flex; align-items: center; gap: 10px; }
.llm-play__pp { width: 56px; height: 56px; background: #fff; color: #0a0a0a; border-color: #fff; }
.llm-play__pp:hover { background: #fff; color: #0a0a0a; transform: scale(1.04); }
.llm-play__pp svg { width: 22px; height: 22px; }
.llm-play__shuffle[aria-pressed="true"] { color: #ef4444; border-color: rgba(239, 68, 68, .7); }
.llm-play__right { display: flex; justify-content: flex-end; }
.llm-play__keep { display: flex; align-items: center; gap: 8px; }
.llm-play__stage.is-one .llm-play__side, .llm-play__stage.is-one .llm-play__mid .llui-iconbtn:not(.llm-play__pp), .llm-play__stage.is-one .llm-play__pp, .llm-play__stage.is-one .llm-play__seam { visibility: hidden; }
.llm-play.is-quiet .llm-play__top, .llm-play.is-quiet .llm-play__ctrl, .llm-play.is-quiet .llm-play__side { opacity: 0; }
.llm-play.is-quiet { cursor: none; }

/* =====================================================================================================================
   HER ROOM (a dialog): everything of hers, and everything of hers you liked
   ================================================================================================================== */
.llm-her__panel {
    --c: #ef4444;
    position: relative; isolation: isolate; width: min(1240px, 94vw); height: min(900px, 92svh); overflow: hidden;
    border-radius: 18px; background: var(--llm-panel); border: 1px solid rgba(255, 255, 255, .1);
    display: grid; grid-template-columns: minmax(280px, 34%) minmax(0, 1fr);
    filter: drop-shadow(0 40px 80px rgba(0, 0, 0, .6));
}
.llm-her__wash { position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: radial-gradient(70% 60% at 18% 100%, color-mix(in srgb, var(--c) 46%, transparent), transparent 70%),
                radial-gradient(50% 40% at 0% 0%, color-mix(in srgb, var(--c) 16%, transparent), transparent 70%); }
.llm-her__side { position: relative; display: flex; flex-direction: column; justify-content: flex-end; padding: 28px 28px 0; border-right: 1px solid var(--ll-hairline, rgba(255, 255, 255, .08)); min-height: 0; }
.llm-her__who > * + * { margin-top: 12px; }
.llm-her__who { padding-bottom: 28px; }
.llm-her__name { font: 800 clamp(2rem, 3.2vw, 2.9rem)/.98 var(--font-heading, sans-serif); letter-spacing: -.035em; }
.llm-her__tagline { font-style: italic; color: var(--llm-ink); line-height: 1.5; }   /* italic means tagline (design-system §2) */
.llm-her__cut { position: relative; flex: 1 1 auto; min-height: 220px; margin: 0 0 20px; }
.llm-her__cut img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%; filter: drop-shadow(0 24px 40px rgba(0, 0, 0, .5)); }
.llm-her__cut::after { content: ""; position: absolute; left: 4%; right: 4%; bottom: 0; height: 2px; border-radius: 2px;
    background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--c) 85%, #fff) 30%, color-mix(in srgb, var(--c) 85%, #fff) 70%, transparent);
    filter: drop-shadow(0 0 10px var(--c)); }
.llm-her__main { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 28px 0 40px; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .2) transparent; }
.llm-her__main .llm-head { padding: 0 28px; }
.llm-her__main .llm-grid { --h: clamp(150px, 15vw, 230px); padding: 0 28px; }
.llm-her__main .llm-section { margin: 0 0 36px; }
.llm-her__close { position: absolute; top: 14px; right: 14px; z-index: 5; }
.llm-her__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.llm-her__links { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.llm-her__visit { display: inline-flex; font: 600 .8125rem/1 var(--font-body, sans-serif); letter-spacing: .06em; text-transform: uppercase; color: #ef4444; text-decoration: none; }
.llm-her__visit:hover { color: #fff; }
.llm-her__none { padding: 0 28px; color: var(--llm-mute); font-size: .9375rem; }

/* =====================================================================================================================
   YOUR MEMBERSHIP: the card in your wallet
   ================================================================================================================== */
.llm-account { display: grid; grid-template-columns: minmax(280px, 440px) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: center; padding: 0 var(--llui-gutter, 16px); }
.llm-vip {
    --mx: 50%; --my: 30%; --rx: 0deg; --ry: 0deg;
    position: relative; isolation: isolate; aspect-ratio: 1.586; border-radius: 18px; overflow: hidden; padding: clamp(18px, 2.4vw, 26px);
    display: grid; grid-template-rows: auto 1fr auto; color: #fff;
    background:
        radial-gradient(60% 80% at var(--mx) var(--my), rgba(255, 255, 255, .12), transparent 60%),
        repeating-linear-gradient(135deg, rgba(255, 255, 255, .025) 0 2px, transparent 2px 6px),
        linear-gradient(160deg, #1a1a1e 0%, #0d0d10 55%, #060607 100%);
    border: 1px solid rgba(255, 255, 255, .14);
    transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry));
    transition: transform 400ms var(--ll-ease-settle);
    filter: drop-shadow(0 28px 44px rgba(0, 0, 0, .55));
}
.llm-vip.is-tilting { transition: none; }
.llm-vip::after {                                                       /* the seam along its foot */
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
    background: linear-gradient(90deg, transparent, #ef4444 18%, #ef4444 82%, transparent); filter: drop-shadow(0 0 8px rgba(239, 68, 68, .9));
}
.llm-vip--free::after { background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .35) 18%, rgba(255, 255, 255, .35) 82%, transparent); filter: none; }
.llm-vip__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.llm-vip__mark { height: clamp(16px, 2vw, 20px); width: auto; opacity: .96; }
.llm-vip__chip { width: 38px; height: 28px; border-radius: 6px; background: linear-gradient(135deg, #3a3a40, #1b1b1f); border: 1px solid rgba(255, 255, 255, .18); position: relative; }
.llm-vip__chip::before { content: ""; position: absolute; inset: 6px 8px; border: 1px solid rgba(255, 255, 255, .22); border-radius: 3px; }
.llm-vip__who { align-self: end; display: flex; align-items: center; gap: 14px; }
.llm-vip__avatar { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; overflow: hidden; flex: none;
    background: #18181c; box-shadow: 0 0 0 1px rgba(255, 255, 255, .12); font: 800 1.1rem/1 var(--font-heading, sans-serif); }
.llm-vip__avatar img { width: 100%; height: 100%; object-fit: cover; }
.llm-vip__avatar--mark { background: #0a0a0a; box-shadow: 0 0 0 1px rgba(255, 255, 255, .16); }   /* the favicon's own black */
.llm-vip__avatar--mark img { width: 84%; height: 84%; object-fit: contain; }                        /* whole, never cropped by the circle */
.llm-vip__tier { display: block; font: 800 clamp(1.05rem, 1.6vw, 1.3rem)/1.1 var(--font-heading, sans-serif); letter-spacing: -.01em; }
.llm-vip__since { display: block; margin-top: 4px; font: 600 .6875rem/1.2 var(--font-body, sans-serif); letter-spacing: .12em; text-transform: uppercase; color: var(--llm-mute); }
.llm-vip__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; }
.llm-vip__foot .ll-founder { transform-origin: left center; }
.llm-vip__number { font: 600 .75rem/1 ui-monospace, 'SF Mono', Menlo, monospace; letter-spacing: .2em; color: rgba(255, 255, 255, .5); }
.llm-account__side > * + * { margin-top: 18px; }
.llm-account__side h2 { font: 800 clamp(1.3rem, 2vw, 1.75rem)/1.15 var(--font-heading, sans-serif); letter-spacing: -.02em; }
.llm-account__side p { color: var(--llm-mute); line-height: 1.6; max-width: 56ch; }
.llm-account__links { display: flex; flex-wrap: wrap; gap: 10px 22px; font: 600 .875rem/1.4 var(--font-body, sans-serif); }
.llm-account__links a, .llm-account__links button { color: #ef4444; text-decoration: none; background: none; border: 0; padding: 0; cursor: pointer; font: inherit; }
.llm-account__links a:hover, .llm-account__links button:hover { color: #fff; }

/* =====================================================================================================================
   THE DOOR (guests): what the room holds, and the key (a free Patreon login)
   ================================================================================================================== */
.llm-hero.llm-door { grid-template-columns: minmax(0, 1fr); align-items: start; min-height: 0; }
.llm-door .llm-hero__words { padding-bottom: 0; max-width: 760px; }
.llm-door__lineup { position: relative; justify-self: center; width: 100%; max-width: 1480px; margin-top: clamp(8px, 2vw, 28px); }
.llm-door__lineup picture, .llm-door__lineup img { display: block; width: 100%; height: auto; }
.llm-door__lineup img { filter: drop-shadow(0 30px 60px rgba(0, 0, 0, .55)); }
.llm-door__lineup::after {                                             /* the stage they stand on, lit */
    content: ""; position: absolute; left: 4%; right: 4%; bottom: 0; height: 2px; border-radius: 2px;
    background: linear-gradient(90deg, transparent, #ef4444 22%, #ef4444 78%, transparent); filter: drop-shadow(0 0 10px #ef4444) drop-shadow(0 0 26px rgba(239, 68, 68, .6)); }
.llm-door__note { font: 500 .8125rem/1.5 var(--font-body, sans-serif); color: var(--llm-mute); }
.llm-promises { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 20px); padding: 0 var(--llui-gutter, 16px); list-style: none; margin: 0; }
.llm-promise { position: relative; overflow: hidden; border-radius: var(--ll-radius-card, 12px); padding: 22px 22px 24px; background: rgba(255, 255, 255, .03); border: 1px solid var(--ll-hairline, rgba(255, 255, 255, .08)); }
.llm-promise__art { position: relative; height: 150px; margin: -2px -2px 18px; border-radius: 10px; overflow: hidden; background: #111114; }
.llm-promise h3 { font: 800 1.15rem/1.25 var(--font-heading, sans-serif); letter-spacing: -.01em; }
.llm-promise p { margin-top: 8px; color: var(--llm-mute); line-height: 1.55; font-size: .9375rem; }
/* three pictures side by side, each whole (never overlapping), and the heart beside them */
.llm-promise__art--strip { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 52px 14px 14px; }
.llm-strip { flex: 0 1 auto; width: 29%; max-height: 100%; aspect-ratio: var(--ar); border-radius: 7px; overflow: hidden; filter: drop-shadow(0 8px 16px rgba(0, 0, 0, .45)); }
.llm-strip img { display: block; width: 100%; height: 100%; object-fit: contain; }
.llm-promise__heart { position: absolute; right: 12px; top: 12px; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
    background: rgba(10, 10, 10, .6); border: 1px solid rgba(239, 68, 68, .7); }
.llm-promise__heart svg { width: 17px; height: 17px; filter: drop-shadow(0 0 6px rgba(239, 68, 68, .9)); }
.llm-promise__heart path { fill: #ef4444; stroke: #ef4444; }
.llm-promise__art--cast { display: flex; align-items: flex-end; justify-content: center; gap: 6px; padding: 10px 10px 0; }
.llm-cast { position: relative; height: 100%; aspect-ratio: var(--ar); border-radius: 8px 8px 0 0; overflow: hidden;
    background: radial-gradient(110% 70% at 50% 100%, color-mix(in srgb, var(--c) 62%, #0b0b0c) 0%, color-mix(in srgb, var(--c) 22%, #0b0b0c) 52%, #0d0d0f 100%); }
.llm-cast img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%; }
/* a little show: one picture whole, and the player's bar under it */
.llm-promise__art--show { display: grid; grid-template-rows: minmax(0, 1fr) auto; justify-items: center; gap: 10px; padding: 12px 18px 14px; background: #000; }
.llm-show__pic { height: 100%; aspect-ratio: var(--ar); border-radius: 6px; overflow: hidden; }
.llm-show__pic img { display: block; width: 100%; height: 100%; object-fit: contain; }
.llm-show__bar { display: flex; align-items: center; gap: 10px; width: 100%; }
.llm-show__play { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #fff; color: #0a0a0a; flex: none; }
.llm-show__play svg { width: 11px; height: 11px; margin-left: 1px; }
.llm-show__seam { position: relative; flex: 1 1 auto; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, .16); }
.llm-show__seam i { position: absolute; left: 0; top: 0; bottom: 0; width: 42%; border-radius: 2px; background: #ef4444; filter: drop-shadow(0 0 4px rgba(239, 68, 68, .8)); }

/* ---- THE PROOF'S SWITCH (admin only, never on the live page) ------------------------------------------------------ */
.llm-proofbar { position: fixed; z-index: 10040; left: 50%; bottom: 18px; transform: translateX(-50%); display: flex; align-items: center; gap: 4px; padding: 5px;
    border-radius: 999px; background: rgba(12, 12, 14, .9); border: 1px solid rgba(255, 255, 255, .16); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    font: 700 .6875rem/1 var(--font-body, sans-serif); letter-spacing: .08em; text-transform: uppercase; }
.llm-proofbar span { padding: 0 10px; color: #ef4444; }
.llm-proofbar a { padding: 8px 12px; border-radius: 999px; color: rgba(255, 255, 255, .7); text-decoration: none; }
.llm-proofbar a:hover { color: #fff; }
.llm-proofbar a[aria-current="page"] { background: rgba(255, 255, 255, .14); color: #fff; }

/* =====================================================================================================================
   SCREENS
   ================================================================================================================== */
@media (min-width: 1024px) {
    .llm-quick__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1023px) {
    .llm-hero { grid-template-columns: minmax(0, 1fr) minmax(0, .8fr); }
    .llm-hero__tag { transform: none; left: auto; right: 0; bottom: 18%; }
    .llm-her__panel { grid-template-columns: minmax(240px, 38%) minmax(0, 1fr); }
    .llm-promises { grid-template-columns: 1fr; }
    .llm-quick__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 699px) {
    .llm-hero { display: block; min-height: 0; padding-top: calc(var(--llui-bar, 56px) + 20px); }
    .llm-hero__words { padding-bottom: 8px; }
    .llm-hero__title { font-size: clamp(2.6rem, 13vw, 3.4rem); }
    .llm-hero__her { height: 54svh; margin: 18px auto 0; }
    .llm-hero__tag { right: -6px; bottom: 14%; padding: 10px 12px; }
    .llm-tabs__track { gap: 22px; }
    .llm-quick__grid { gap: 8px; }
    .llm-quick__tile { height: 56px; gap: 10px; padding-right: 8px; }
    .llm-quick__tile .llm-deck { width: 56px; height: 56px; }
    .llm-quick__name { font-size: .8125rem; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
    .llm-quick__play { display: none; }                                  /* on a phone the tile opens; Play is inside */
    .llm-shelf--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px; }
    .llm-shelf.llui-row__rail > .llm-pl__item { width: 42vw; }
    .llm-girls { --llui-row-h: 64vw; }
    .llm-grid { --h: 34vw; gap: 8px; }
    .llm-head > .llm-tools { width: 100%; }
    .llm-filter { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; border-radius: 14px; max-width: 100%; }
    .llm-filter::-webkit-scrollbar { display: none; }
    .llm-filter button { flex: none; padding: 0 12px; }
    .llm-faces { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
    .llm-faces::-webkit-scrollbar { display: none; }
    .llm-faces li { flex: none; }
    .llm-cell { max-width: calc(var(--h) * var(--ar) * 2.2); }
    .llm-acts { top: 6px; right: 6px; gap: 5px; }
    .llm-acts .lll-heart { width: 34px; height: 34px; }
    .llm-acts .lll-heart svg { width: 16px; height: 16px; }
    .llm-acts .lll-save { width: 32px; height: 32px; }
    .llm-acts .lll-save svg { width: 15px; height: 15px; }
    .llm-empty { grid-template-columns: 1fr; text-align: left; }
    .llm-list__panel, .llm-her__panel { width: 100vw; height: 100svh; border-radius: 0; }
    .llm-list__head { grid-template-columns: 1fr; padding-right: 0; }
    .llm-list__cover { width: min(56vw, 220px); justify-self: center; }
    .llm-list__body { padding-top: 56px; }
    .llm-li { gap: 6px; padding: 6px 2px; }
    .llm-li__pic { width: 60px; height: 54px; }
    .llm-li__main { gap: 10px; }
    .llm-li__acts { gap: 4px; }
    .llm-li__acts .lll-save { display: none; }                           /* on a phone: the heart and take-out; Save is in the player */
    .llm-her__panel { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); }
    .llm-her__side { flex-direction: row; align-items: flex-end; gap: 14px; padding: 18px 16px 0; border-right: 0; border-bottom: 1px solid var(--ll-hairline, rgba(255, 255, 255, .08)); }
    .llm-her__cut { flex: 0 0 34%; min-height: 0; height: 30svh; margin: 0; order: -1; }
    .llm-her__who { padding-bottom: 16px; }
    .llm-her__name { font-size: 1.8rem; }
    .llm-her__main { padding-top: 20px; }
    .llm-her__main .llm-head, .llm-her__main .llm-grid { padding: 0 16px; }
    .llm-her__main .llm-grid { --h: 38vw; }
    .llm-account { grid-template-columns: 1fr; }
    .llm-vip { max-width: 440px; }
    .llm-play__stage { grid-template-rows: 56px minmax(0, 1fr) auto; }
    .llm-play__fig { padding: 4px 8px; }
    .llm-play__side { display: none; }                                   /* a swipe, or the bar's arrows */
    .llm-play__ctrl { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "cap cap" "mid right"; row-gap: 12px; }
    .llm-play__left { grid-area: cap; }
    .llm-play__mid { grid-area: mid; }
    .llm-play__right { grid-area: right; }
    .llm-play__pp { width: 52px; height: 52px; }
    .llm-confirm__box { padding: 24px 20px 22px; }
    .llm-proofbar { left: 8px; right: 8px; bottom: 10px; transform: none; overflow-x: auto; }
}
@media (prefers-reduced-motion: reduce) {
    .llm { transition: none; }
    .llm-aura::before { animation: none; }
    .llm-vip { transform: none !important; transition: none; }
    .llm-empty__heart svg { animation: none !important; }
    .llm-her[open] .llm-her__panel, .llm-list[open] .llm-list__panel, .llm-confirm[open] .llm-confirm__box { animation: none; }
    .llm-card__pic, .llm-pl .llm-deck { transition: none; }
    .llm-card:hover .llm-card__pic, .llm-pl:hover .llm-deck { transform: none; }
    .llm-cell.is-leaving { animation-duration: 120ms; }
    .llm-play__seam.is-run i { animation: none; }
    .llm-play__pic img { transition: none; }
    .llm-play__top, .llm-play__ctrl, .llm-play__side, .llm-pl__play, .llm-quick__play { transition: none; }
}