/*
 * Template "Now Playing" (Pernikahan): a music-streaming app.
 * Colors from the variant (x-inv.head): --inv-primary (the vibrant accent: buttons, highlights),
 * --inv-accent (secondary highlight), --inv-background (app background, dark), --inv-text,
 * --inv-surface (cards), --inv-muted (secondary text).
 */

:root {
    --inv-primary: #1ed760;
    --inv-accent: #b4f461;
    --inv-background: #0b0f0d;
    --inv-text: #f2f6f3;
    --inv-surface: #161d19;
    --inv-muted: #94a39a;
    --inv-radius: 12px;
    --np-col: min(100vw, 460px);
    --np-sans: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --np-display: 'Bricolage Grotesque', 'Figtree', system-ui, sans-serif;
    --np-line: color-mix(in srgb, var(--inv-text) 10%, transparent);
    --np-soft: color-mix(in srgb, var(--inv-text) 7%, transparent);
    /* text on the vivid primary: the dark app background */
    --np-on-primary: var(--inv-background);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
p, h1, h2, h3, figure, blockquote, dl, dd, ol { margin: 0; }
a { color: inherit; }
img { max-width: 100%; }
html { scroll-behavior: smooth; }

body.np-body {
    min-height: 100vh;
    background: var(--inv-background);
    color: var(--inv-text);
    font-family: var(--np-sans);
    font-size: 15px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

.np-preview {
    position: fixed; top: 0; left: 50%; z-index: 60; transform: translateX(-50%);
    padding: .3rem .9rem; border-radius: 0 0 10px 10px; white-space: nowrap;
    background: var(--inv-primary); color: var(--np-on-primary); font-size: .72rem; font-weight: 700;
}

/* ---------- ambient background (around the column on wide screens) ---------- */
.np-ambient { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.np-ambient::before {
    content: ''; position: absolute; inset: -10%;
    background: var(--np-photo, radial-gradient(circle at 30% 20%, var(--inv-primary), transparent 60%)) center / cover no-repeat;
    filter: blur(70px) saturate(1.5); opacity: .5; transform: scale(1.15);
}
.np-ambient::after {
    content: ''; position: absolute; inset: 0;
    background: radial-gradient(ellipse at 50% 0%, color-mix(in srgb, var(--inv-primary) 22%, transparent), transparent 65%),
        linear-gradient(180deg, color-mix(in srgb, var(--inv-background) 40%, transparent), var(--inv-background) 95%);
}

/* ---------- shared bits ---------- */
.np-art-empty {
    display: flex; align-items: center; justify-content: center; gap: .15em; width: 100%; height: 100%;
    background: linear-gradient(135deg, var(--inv-primary), var(--inv-accent));
    color: var(--np-on-primary); font: 800 4rem/1 var(--np-display);
}
.np-badge {
    display: inline-flex; align-items: center; justify-content: center; gap: 1px; flex: none;
    width: 1.6rem; height: 1.6rem; border-radius: 50%;
    background: var(--inv-primary); color: var(--np-on-primary); font: 800 .58rem/1 var(--np-sans);
}

/* equalizer bars (the "now playing" indicator) */
.np-eq { display: inline-flex; align-items: flex-end; gap: 2px; height: 13px; }
.np-eq i { display: block; width: 3px; height: 40%; border-radius: 1px; background: var(--inv-primary); animation: np-eq .9s ease-in-out infinite alternate; }
.np-eq i:nth-child(2) { animation-delay: -.35s; animation-duration: .7s; }
.np-eq i:nth-child(3) { animation-delay: -.6s; animation-duration: 1.1s; }
@keyframes np-eq { from { height: 25%; } to { height: 100%; } }

/* ---------- cover: the now-playing screen ---------- */
.np-cover {
    position: fixed; top: 0; bottom: 0; left: 50%; z-index: 30; width: var(--np-col); transform: translateX(-50%);
    display: flex; flex-direction: column; justify-content: space-between; gap: clamp(.6rem, 2.2vh, 1.3rem);
    padding: calc(1rem + env(safe-area-inset-top)) 1.5rem calc(1.25rem + env(safe-area-inset-bottom));
    overflow-x: hidden; overflow-y: auto; isolation: isolate;
    background: var(--inv-background); color: var(--inv-text);
}
.np-cover__bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.np-cover__bg::before {
    content: ''; position: absolute; inset: -15%;
    background: var(--np-photo, linear-gradient(160deg, var(--inv-primary), var(--inv-accent))) center / cover no-repeat;
    filter: blur(48px) saturate(1.6); opacity: .75;
    animation: np-drift 18s ease-in-out infinite alternate;
}
.np-cover__bg::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--inv-primary) 30%, rgb(0 0 0 / .25)) 0%,
        color-mix(in srgb, var(--inv-background) 55%, transparent) 45%,
        var(--inv-background) 88%);
}
@keyframes np-drift { from { transform: scale(1.05) translate(0, 0); } to { transform: scale(1.2) translate(-3%, 2%); } }

.np-cover__top { display: grid; grid-template-columns: 24px 1fr 24px; align-items: center; gap: .75rem; text-align: center; }
.np-cover__icon { opacity: .9; }
.np-cover__label { font-size: .68rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; opacity: .75; }
.np-cover__guest { font-weight: 800; font-size: .98rem; line-height: 1.25; overflow-wrap: anywhere; }

.np-cover__art {
    position: relative; align-self: center; flex: none;
    width: min(100%, 44vh); aspect-ratio: 1; border-radius: 10px; overflow: hidden;
    box-shadow: 0 28px 60px -12px rgb(0 0 0 / .7), 0 0 0 1px rgb(255 255 255 / .06);
}
.np-cover__art img { display: block; width: 100%; height: 100%; object-fit: cover; }
.np-sticker {
    position: absolute; left: .7rem; bottom: .7rem;
    display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .6rem; border-radius: 6px;
    background: rgb(0 0 0 / .55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    color: #fff; font: 800 .8rem/1 var(--np-display); letter-spacing: .12em;
}
.np-sticker span + span::before { content: '·'; margin-right: .35rem; color: var(--inv-primary); }

.np-cover__track { display: flex; align-items: center; gap: 1rem; }
.np-cover__names { flex: 1; min-width: 0; }
.np-cover__title { font: 800 clamp(1.55rem, 7vw, 1.95rem)/1.1 var(--np-display); letter-spacing: -.015em; overflow-wrap: anywhere; }
.np-cover__artist { margin-top: .2rem; color: var(--inv-muted); font-weight: 500; font-size: .98rem; }
.np-cover__heart { flex: none; color: var(--inv-primary); animation: np-beat 2.2s ease-in-out infinite; }
@keyframes np-beat { 0%, 60%, 100% { transform: scale(1); } 15% { transform: scale(1.18); } 30% { transform: scale(1); } 45% { transform: scale(1.1); } }

.np-bar { position: relative; height: 4px; border-radius: 4px; background: color-mix(in srgb, var(--inv-text) 22%, transparent); }
.np-bar__fill {
    position: absolute; inset: 0 auto 0 0; width: 38%; border-radius: inherit; background: var(--inv-text);
    animation: np-fill 2.4s cubic-bezier(.2, .7, .2, 1) .8s both;
}
.np-bar__fill::after {
    content: ''; position: absolute; right: -6px; top: 50%; width: 12px; height: 12px; margin-top: -6px;
    border-radius: 50%; background: var(--inv-text); box-shadow: 0 2px 6px rgb(0 0 0 / .4);
}
@keyframes np-fill { from { width: 0; } to { width: 38%; } }
.np-cover__times { display: flex; justify-content: space-between; gap: 1rem; margin-top: .5rem; font-size: .74rem; font-weight: 600; color: var(--inv-muted); font-variant-numeric: tabular-nums; }

.np-cover__controls { display: flex; align-items: center; justify-content: space-between; gap: .4rem; }
.np-ctrl { flex: none; color: var(--inv-text); opacity: .9; }
.np-ctrl--on { color: var(--inv-primary); opacity: 1; }
.np-play {
    flex: none; gap: .45rem; padding: .95rem 1.35rem;
    background: var(--inv-primary); color: var(--np-on-primary);
    font: 800 .95rem/1 var(--np-sans); letter-spacing: .01em;
    box-shadow: 0 10px 28px -8px color-mix(in srgb, var(--inv-primary) 70%, transparent);
}

.np-cover__lyric {
    padding: .85rem 1rem; border-radius: 12px;
    background: color-mix(in srgb, var(--inv-primary) 26%, var(--inv-surface));
}
.np-cover__lyric-label { display: block; margin-bottom: .3rem; font-size: .7rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.np-cover__lyric p { font: 700 .95rem/1.4 var(--np-display); display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }

/* room for the preview ribbon */
.np-preview ~ .np-cover, .np-preview ~ .np-app .np-hero { padding-top: calc(2.4rem + env(safe-area-inset-top)); }

.np-cover--leave { transition: transform .6s cubic-bezier(.6, 0, .4, 1), opacity .6s ease; }
.np-cover--gone { transform: translateX(-50%) translateY(100%); opacity: 0; }

/* ---------- app column ---------- */
.np-app {
    position: relative; z-index: 1; width: var(--np-col); min-height: 100vh; margin: 0 auto;
    background: var(--inv-background); overflow-x: clip;
    box-shadow: 0 0 80px rgb(0 0 0 / .5);
}

/* album header */
.np-hero { position: relative; isolation: isolate; padding: calc(.9rem + env(safe-area-inset-top)) 1.25rem 0; }
.np-hero__glow { position: absolute; inset: 0 0 -4rem; z-index: -1; overflow: hidden; }
.np-hero__glow::before {
    content: ''; position: absolute; inset: -20%;
    background: var(--np-photo, linear-gradient(160deg, var(--inv-primary), var(--inv-accent))) center / cover no-repeat;
    filter: blur(50px) saturate(1.6); opacity: .6;
}
.np-hero__glow::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(180deg, color-mix(in srgb, var(--inv-primary) 28%, transparent), color-mix(in srgb, var(--inv-background) 60%, transparent) 45%, var(--inv-background));
}
.np-hero__bar { display: flex; align-items: center; justify-content: space-between; font-size: .72rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.np-hero__art {
    width: 66%; aspect-ratio: 1; margin: 1.4rem auto 1.6rem; border-radius: 6px; overflow: hidden;
    box-shadow: 0 24px 50px -10px rgb(0 0 0 / .65);
}
.np-hero__art img { display: block; width: 100%; height: 100%; object-fit: cover; }
.np-hero__title { font: 800 clamp(1.9rem, 9vw, 2.4rem)/1.05 var(--np-display); letter-spacing: -.02em; overflow-wrap: anywhere; }
.np-hero__artist { display: flex; align-items: center; gap: .5rem; margin-top: .7rem; font-weight: 700; font-size: .92rem; }
.np-hero__meta { margin-top: .35rem; font-size: .8rem; color: var(--inv-muted); }
.np-hero__actions { display: flex; align-items: center; gap: 1.1rem; margin-top: .9rem; }
.np-hero__spacer { flex: 1; }
.np-icon-btn { display: inline-grid; place-items: center; color: var(--inv-muted); text-decoration: none; }
a.np-icon-btn { color: var(--inv-text); }
.np-icon-btn--muted { opacity: .8; }
.np-bigplay {
    display: grid; place-items: center; width: 3.5rem; height: 3.5rem; border-radius: 50%;
    background: var(--inv-primary); color: var(--np-on-primary); text-decoration: none;
    box-shadow: 0 10px 24px -8px color-mix(in srgb, var(--inv-primary) 75%, transparent);
    transition: transform .2s ease;
}
.np-bigplay:hover { transform: scale(1.05); }
.np-bigplay svg { margin-left: 3px; }

/* sections */
.np-main { position: relative; z-index: 1; padding: .5rem 1.1rem calc(7.6rem + env(safe-area-inset-bottom)); } /* clear of the mini player, music button and auto-scroll pill */
.np-sec { margin-top: 2.6rem; }
.np-sec__head { margin-bottom: 1rem; }
.np-kicker {
    display: flex; align-items: center; gap: .35rem;
    font-size: .7rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--inv-primary);
}
.np-sec__title { margin-top: .2rem; font: 800 1.5rem/1.15 var(--np-display); letter-spacing: -.01em; }
.np-card { padding: 1.15rem; border-radius: 14px; background: var(--inv-surface); }

/* opening: liner notes */
.np-arabic { margin-bottom: .9rem; text-align: center; font-family: 'Amiri', 'Traditional Arabic', serif; font-size: 1.7rem; line-height: 1.7; }
.np-notes__greeting { font-weight: 800; font-size: 1.02rem; }
.np-notes__message { margin-top: .5rem; color: color-mix(in srgb, var(--inv-text) 80%, transparent); }
.np-quote { margin-top: 1.1rem; padding-top: 1rem; border-top: 1px solid var(--np-line); }
.np-quote__mark { color: var(--inv-primary); }
.np-quote blockquote { margin-top: .3rem; font: 600 1.08rem/1.45 var(--np-display); }
.np-quote figcaption { margin-top: .5rem; font-size: .82rem; font-weight: 800; color: var(--inv-primary); }

/* couple: artist profiles */
.np-artists__list { display: grid; gap: 1rem; }
.np-artist { border-radius: 16px; overflow: hidden; background: var(--inv-surface); }
.np-artist__cover {
    position: relative; display: flex; align-items: flex-end; aspect-ratio: 1; padding: 1rem;
    background: var(--np-photo, linear-gradient(135deg, var(--inv-primary), var(--inv-accent))) center 45% / cover no-repeat;
}
.np-artist__cover::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgb(0 0 0 / .75)); }
.np-artist__initial { position: absolute; inset: 0; display: grid; place-items: center; color: var(--np-on-primary); font: 800 6rem/1 var(--np-display); }
.np-artist__over { position: relative; color: #fff; }
.np-verified { display: flex; align-items: center; gap: .35rem; font-size: .74rem; font-weight: 700; }
.np-verified svg { color: #3d91ff; }
.np-artist__nick { font: 800 2.6rem/1 var(--np-display); letter-spacing: -.02em; overflow-wrap: anywhere; }
.np-artist__body { padding: 1rem 1.1rem 1.15rem; }
.np-artist__name { font-weight: 800; font-size: 1.05rem; }
.np-artist__listeners { font-size: .8rem; color: var(--inv-muted); }
.np-artist__parents { margin-top: .7rem; font-size: .88rem; color: var(--inv-muted); }
.np-artist__parents strong { color: var(--inv-text); font-weight: 700; }
.np-follow {
    display: inline-block; margin-top: .85rem; padding: .45rem 1rem; border-radius: 999px;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--inv-text) 45%, transparent);
    font-size: .8rem; font-weight: 800; text-decoration: none;
}

/* countdown: upcoming release */
.np-release__card { background: linear-gradient(150deg, color-mix(in srgb, var(--inv-primary) 30%, var(--inv-surface)), var(--inv-surface) 70%); }
.np-release__top { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.1rem; }
.np-release__art {
    flex: none; width: 4.75rem; height: 4.75rem; border-radius: 6px; box-shadow: 0 8px 20px -6px rgb(0 0 0 / .6);
    background: var(--np-photo, linear-gradient(135deg, var(--inv-primary), var(--inv-accent))) center / cover no-repeat;
}
.np-release__title { font: 800 1.45rem/1.1 var(--np-display); }
.np-release__date { margin-top: .2rem; font-size: .85rem; color: color-mix(in srgb, var(--inv-text) 80%, transparent); }
.inv-countdown { gap: .45rem; }
.inv-countdown__item { flex: 1; min-width: 0; padding: .7rem .2rem; border-radius: 10px; background: rgb(0 0 0 / .28); }
.inv-countdown__value { font: 800 1.65rem/1.1 var(--np-display); color: var(--inv-primary); font-variant-numeric: tabular-nums; }
.inv-countdown__label { margin-top: .15rem; font-size: .66rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; opacity: .7; }
.inv-countdown__done { text-align: center; }
.inv-countdown__actions .inv-button { padding: .55rem 1rem; font-size: .8rem; }

/* events: tracklist */
.np-tracklist { list-style: none; padding: 0; display: grid; gap: .15rem; }
.np-track summary { list-style: none; }
.np-track summary::-webkit-details-marker { display: none; }
.np-track__row {
    display: grid; grid-template-columns: 1.6rem minmax(0, 1fr) auto 20px; align-items: center; gap: .8rem;
    padding: .65rem .35rem; border-radius: 8px; cursor: pointer; transition: background-color .2s ease;
}
.np-track__row:hover { background: var(--np-soft); }
.np-track__row:focus-visible { outline: 2px solid var(--inv-primary); outline-offset: 2px; }
.np-track__no { display: grid; place-items: center; }
.np-track__num { font-weight: 600; color: var(--inv-muted); font-variant-numeric: tabular-nums; }
.np-track__no .np-eq { display: none; }
.np-track details[open] .np-track__num { display: none; }
.np-track details[open] .np-track__no .np-eq { display: inline-flex; }
.np-track__text { display: grid; min-width: 0; }
.np-track__name { font-weight: 700; font-size: 1.02rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.np-track details[open] .np-track__name { color: var(--inv-primary); }
.np-track__venue { font-size: .84rem; color: var(--inv-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.np-track__time { font-size: .85rem; color: var(--inv-muted); font-variant-numeric: tabular-nums; }
.np-track__chev { color: var(--inv-muted); transition: transform .3s ease; }
.np-track details[open] .np-track__chev { transform: rotate(180deg); }
.np-track__card { margin: .35rem 0 .9rem; border-radius: 14px; overflow: hidden; background: var(--inv-surface); animation: np-open .4s ease both; }
@keyframes np-open { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.np-track__photo { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.np-track__details { display: grid; gap: .8rem; padding: 1rem 1.1rem .4rem; }
.np-track__details dt { font-size: .68rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--inv-muted); }
.np-track__details dd { margin-top: .1rem; font-weight: 600; }
.np-track__details strong { display: block; font-weight: 800; }
.np-track__address { display: block; font-weight: 400; font-size: .88rem; color: color-mix(in srgb, var(--inv-text) 75%, transparent); }
.np-track__card .inv-maps { padding: .6rem 1.1rem 1.1rem; }
.inv-maps .inv-button { width: 100%; padding: .7rem 1rem; font-size: .88rem; }

/* love story: lyrics */
.np-lyrics__card {
    padding: 1.4rem 1.25rem 1.5rem; border-radius: 16px;
    background: var(--inv-primary); color: var(--np-on-primary);
}
.np-lyrics__label { font-size: .78rem; font-weight: 800; letter-spacing: .04em; }
.np-verse { margin-top: 1.5rem; }
.np-verse__tag { font-size: .76rem; font-weight: 800; opacity: .6; }
.np-verse__title { margin-top: .15rem; font: 800 1.6rem/1.15 var(--np-display); letter-spacing: -.01em; }
.np-verse__story { margin-top: .35rem; font: 700 1.12rem/1.4 var(--np-display); opacity: .68; }
.np-verse__photo { display: block; width: 100%; aspect-ratio: 4 / 3; margin-top: .85rem; object-fit: cover; border-radius: 10px; }

/* gallery: album photos */
.inv-gallery { gap: 3px; border-radius: 12px; overflow: hidden; }
.inv-gallery__item { border-radius: 0; }

/* live streaming */
.np-live__card {
    display: grid; gap: .35rem; padding: 1.2rem; border-radius: 16px; text-decoration: none;
    background: linear-gradient(140deg, color-mix(in srgb, var(--inv-accent) 35%, var(--inv-surface)), var(--inv-surface) 75%);
}
.np-live__badge {
    justify-self: start; display: inline-flex; align-items: center; gap: .35rem; padding: .22rem .55rem; border-radius: 4px;
    background: #ff2d55; color: #fff; font-size: .68rem; font-weight: 800; letter-spacing: .1em;
}
.np-live__dot { width: 6px; height: 6px; border-radius: 50%; background: #fff; animation: np-blink 1.2s ease-in-out infinite; }
@keyframes np-blink { 50% { opacity: .25; } }
.np-live__title { margin-top: .3rem; font: 800 1.35rem/1.15 var(--np-display); }
.np-live__text { color: color-mix(in srgb, var(--inv-text) 80%, transparent); font-size: .92rem; }
.np-live__note { font-size: .84rem; font-weight: 700; color: var(--inv-accent); }
.np-live__cta {
    justify-self: start; display: inline-flex; align-items: center; gap: .35rem; margin-top: .5rem; padding: .6rem 1.1rem; border-radius: 999px;
    background: var(--inv-text); color: var(--inv-background); font-size: .85rem; font-weight: 800;
}

/* buttons */
.inv-button { background: var(--inv-primary); color: var(--np-on-primary); font-weight: 800; }
.inv-button--outline { background: transparent; color: var(--inv-text); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--inv-text) 40%, transparent); }

/* gift: support the artist */
.np-support__text { margin-bottom: 1rem; color: color-mix(in srgb, var(--inv-text) 80%, transparent); font-size: .92rem; }
/* accounts: compact cards, two per row (an odd last one spans both); the address stays full width below */
.inv-gift__accounts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
.inv-gift__account:last-child:nth-child(odd) { grid-column: 1 / -1; }
.inv-gift__account { min-width: 0; padding: .8rem; border-radius: 10px; background: var(--np-soft); }
.inv-gift__account + .inv-gift__account { margin-top: 0; }
.inv-gift__accounts + .inv-gift__address { margin-top: .6rem; }
.inv-gift__bank { margin: 0 0 .4rem; font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--inv-primary); }
.inv-gift__logo { height: 1.5rem; padding: .2rem .45rem; border-radius: .4rem; }
.inv-gift__logo img { max-width: 5rem; }
.inv-gift__number { margin: 0; font: 700 1rem/1.25 ui-monospace, 'SF Mono', Menlo, Consolas, monospace; letter-spacing: .02em; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.inv-gift__holder { margin: .2rem 0 .55rem; font-size: .6rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--inv-muted); overflow-wrap: anywhere; }
.inv-gift__address .inv-gift__holder { font-size: .86rem; letter-spacing: 0; text-transform: none; }
.inv-gift__address p:not([class]) { margin: 0 0 .7rem; font-size: .9rem; }
.inv-gift__account .inv-button { padding: .35rem .7rem; font-size: .65rem; }

/* forms */
.np-form .inv-form label, .np-form .inv-form__choices legend { color: color-mix(in srgb, var(--inv-text) 85%, transparent); }
.np-form .inv-form input:not([type=radio]):not([type=checkbox]), .np-form .inv-form select, .np-form .inv-form textarea {
    border: 1px solid color-mix(in srgb, var(--inv-text) 14%, transparent); border-radius: 10px;
    background: color-mix(in srgb, var(--inv-text) 6%, transparent); color: var(--inv-text);
}
.np-form .inv-form input::placeholder, .np-form .inv-form textarea::placeholder { color: var(--inv-muted); }
.np-form .inv-form input:focus, .np-form .inv-form select:focus, .np-form .inv-form textarea:focus { outline: 2px solid var(--inv-primary); outline-offset: 0; border-color: transparent; }
.np-form .inv-form select option { background: var(--inv-surface); color: var(--inv-text); }
.np-form .inv-form .inv-button { width: 100%; padding: .85rem 1rem; }
.inv-form__notice { background: color-mix(in srgb, var(--inv-primary) 16%, transparent); }

/* wishes: comments */
.np-comments .inv-wishes { --inv-wishes-height: 19.5rem; }
.inv-wishes__list { gap: 0; margin-top: 1.1rem; }
.inv-wish { padding: .65rem .2rem .65rem 0; border-radius: 0; background: none; border-top: 1px solid var(--np-line); }
.inv-wish__name { font-size: .9rem; font-weight: 800; }
.inv-wish__message { color: color-mix(in srgb, var(--inv-text) 85%, transparent); font-size: .88rem; line-height: 1.45; }
.inv-wish__time { color: var(--inv-muted); opacity: 1; font-size: .7rem; }
.inv-wish__reply { border-left-color: var(--inv-primary); background: color-mix(in srgb, var(--inv-primary) 10%, transparent); }
.np-form .inv-wishes__more { width: auto; }

/* closing: thanks for listening */
.np-outro { text-align: center; padding-top: 1rem; }
.np-outro__art { width: 62%; aspect-ratio: 1; margin: 0 auto 1.5rem; border-radius: 8px; overflow: hidden; box-shadow: 0 24px 50px -12px rgb(0 0 0 / .7); }
.np-outro__art img { display: block; width: 100%; height: 100%; object-fit: cover; }
.np-outro .np-kicker { justify-content: center; }
.np-outro__title { margin-top: .3rem; font: 800 1.85rem/1.1 var(--np-display); letter-spacing: -.015em; }
.np-outro__message { margin-top: .9rem; color: color-mix(in srgb, var(--inv-text) 80%, transparent); }
.np-outro__sign { margin-top: 1.4rem; font-size: .88rem; color: var(--inv-muted); }
.np-outro__names { margin-top: .1rem; font: 800 1.6rem/1.2 var(--np-display); color: var(--inv-primary); }
.np-outro__credits { margin-top: 1.6rem; font-size: .72rem; color: var(--inv-muted); }

.np-branding { color: var(--inv-muted); opacity: 1; }
.inv-checkin { color: #1a1a1a; }

/* ---------- mini player ---------- */
.np-mini {
    position: fixed; bottom: calc(.5rem + env(safe-area-inset-bottom)); left: 50%; z-index: 20;
    width: calc(var(--np-col) - 1rem); transform: translateX(-50%);
    display: flex; align-items: center; gap: .65rem; padding: .45rem .7rem .45rem .45rem; border-radius: 10px;
    background: color-mix(in srgb, var(--inv-primary) 24%, var(--inv-surface));
    box-shadow: 0 12px 30px -6px rgb(0 0 0 / .6); overflow: hidden;
}
.np-mini--player { padding-right: 3.85rem; }
.np-mini__art {
    flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 1px;
    width: 2.6rem; height: 2.6rem; border-radius: 5px;
    background: var(--np-photo, linear-gradient(135deg, var(--inv-primary), var(--inv-accent))) center / cover no-repeat;
    color: var(--np-on-primary); font-weight: 800; font-size: .7rem;
}
.np-mini__text { flex: 1; min-width: 0; display: grid; }
.np-mini__title, .np-mini__artist { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.np-mini__title { font-weight: 800; font-size: .88rem; }
.np-mini__artist { display: flex; align-items: center; gap: .4rem; font-size: .76rem; color: color-mix(in srgb, var(--inv-text) 75%, transparent); }
.np-mini__artist .np-eq { height: 10px; flex: none; }
.np-mini__like { flex: none; display: grid; place-items: center; color: var(--inv-text); }
.np-mini__progress { position: absolute; left: .45rem; right: .45rem; bottom: 0; height: 2px; border-radius: 2px; background: color-mix(in srgb, var(--inv-text) 20%, transparent); }
.np-mini__progress span { display: block; height: 100%; width: 30%; border-radius: inherit; background: var(--inv-text); }
/* the progress follows the scroll where the browser supports it */
@supports (animation-timeline: scroll()) {
    .np-mini__progress span { width: 100%; transform-origin: left; animation: np-progress linear both; animation-timeline: scroll(root); }
    @keyframes np-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
}

/* the music button is the mini player's play button, inside the column */
.np-body .inv-music { right: max(1.05rem, calc(50vw - 230px + 1.05rem)); bottom: calc(.5rem + .45rem + env(safe-area-inset-bottom)); }
.np-body .inv-music__space { display: none; }
.np-body .inv-music__button {
    width: 2.6rem; height: 2.6rem; background: var(--inv-text); color: var(--inv-background);
    font-size: .95rem; font-weight: 800; box-shadow: none;
}
.np-body .inv-music__button--playing { animation: none; }
.np-body .inv-autoscroll { box-shadow: 0 6px 16px rgb(0 0 0 / .45); }
.np-body .inv-autoscroll--running { box-shadow: 0 0 0 3px color-mix(in srgb, var(--inv-primary) 60%, transparent); }
/* nothing of the player shows on the now-playing screen itself */
html:not(.inv-opened) .np-body .inv-music { opacity: 0; pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .np-cover__bg::before, .np-cover__heart, .np-eq i, .np-bar__fill, .np-live__dot, .np-track__card { animation: none; }
    .np-mini__progress span { animation: none; transform: none; width: 30%; }
}