/* Vibe Check (light/dark/system, packages carousel, player, mood canvas) — from the Covers artifact */
html.mouse-lens #tuneModal .fq-zone, html.mouse-lens #tuneModal .mood-zone{ cursor: none !important; }
html[data-theme="dark"]{ color-scheme: dark; }
html[data-theme="light"]{ color-scheme: light; }
html[data-mood="Package 1"]{ --nbg: 1 2 8; }
html[data-mood="Package 2"]{ --nbg: 8 1 1; }
html[data-mood="Package 3"]{ --nbg: 6 7 1; }
html[data-mood="Package 4"]{ --nbg: 8 5 2; }
html[data-mood="Package 5"]{ --nbg: 1 7 4; }
html[data-mood="Package 6"]{ --nbg: 5 5 6; }
html[data-mood] #siteNav::before{ background: rgb(var(--nbg) / 94%); }
html[data-mood][data-theme="light"] #siteNav::before{ background: rgb(var(--nbg) / 92%); }
#tuneModal{ --navH: 12px; }
#tuneModal{ --base: #f6f7f9; --fg: #15151a; --mut: rgba(21,21,26,.62); --glass: rgba(255,255,255,.8); --gl: rgba(0,0,0,.08); --acc: #6f8cff;
  position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; background: rgba(0,0,0,.4); -webkit-backdrop-filter: blur(36px) saturate(1.15); backdrop-filter: blur(36px) saturate(1.15); font: 400 14px/1.5 Inter, system-ui, sans-serif; }
html[data-theme="light"] #tuneModal{ background: rgba(255,255,255,.35); }
html[data-theme="dark"] #tuneModal{ background: rgba(8,8,10,.55); --base: #0b0b0e; --fg: #f2f2f5; --mut: rgba(242,242,245,.66); --glass: rgba(20,20,24,.5); --gl: rgba(255,255,255,.16); }
#tuneModal[hidden]{ display: none; }
#tuneModal .tm-card{ position: relative; width: 100vw; height: 100dvh; box-sizing: border-box; overflow: hidden; background: none; color: var(--fg); isolation: isolate; animation: tmIn .45s cubic-bezier(.2,.7,.2,1); }
#tuneModal button{ font: inherit; color: inherit; cursor: pointer; }
#tuneModal button:disabled{ cursor: default; opacity: .4; }
#tuneModal :focus-visible{ outline: 2px solid var(--acc); outline-offset: 2px; }
#tuneModal .tm-top{ position: absolute; z-index: 6; top: 9px; left: 18px; right: 18px; display: flex; align-items: center; justify-content: flex-end; pointer-events: none; }
#tuneModal .tm-top > *{ pointer-events: auto; }
#tuneModal .tm-left{ display: flex; align-items: center; gap: 10px; }
#tuneModal .gl{ background: var(--glass); border: 1px solid var(--gl); -webkit-backdrop-filter: blur(20px) saturate(1.4); backdrop-filter: blur(20px) saturate(1.4); }
#tuneModal .tm-mode{ display: flex; padding: 3px; gap: 2px; border-radius: 999px; }
#tuneModal .tm-mode button{ width: 32px; height: 28px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 999px; background: none; opacity: .6; transition: background .2s, opacity .2s; }
#tuneModal .tm-mode button:hover{ opacity: 1; }
#tuneModal .tm-mode button[aria-checked="true"]{ opacity: 1; background: var(--fg); color: var(--base); }
#tuneModal .fq-zone{ position: absolute; z-index: 2; left: 0; right: 0; top: calc(var(--navH) + 56px); bottom: 112px; perspective: 1800px; touch-action: pan-y; cursor: grab !important; user-select: none; -webkit-user-select: none; outline-offset: -4px; }
#tuneModal .fq-zone.drag{ cursor: grabbing !important; }
#tuneModal .fq-zone *{ cursor: inherit !important; }
#tuneModal .fq-cards{ position: absolute; inset: 0; transform-style: preserve-3d; }
#tuneModal .fq-head{ position: absolute; left: 0; right: 0; top: calc(14vh - var(--navH) - 56px); line-height: 34px; text-align: center; font: 400 28px/34px Inter, system-ui, sans-serif; letter-spacing: -.02em; color: var(--fg); pointer-events: none; z-index: 2000; }
#tuneModal .fq-esc{ position: absolute; z-index: 2001; left: calc(50% + var(--ch, 480px) * .83); transform: translateX(-100%); top: calc(14vh - var(--navH) - 51px); height: 28px; font: 500 11px/1 ui-monospace, Menlo, monospace !important; letter-spacing: .08em; text-transform: uppercase; color: var(--mut); background: none; border: 1px solid color-mix(in srgb, var(--fg) 28%, transparent); border-radius: 999px; padding: 0 12px; transition: background .2s, color .2s, opacity .5s ease; }
#tuneModal .fq-esc:hover, #tuneModal .fq-esc:focus-visible{ color: var(--base); background: var(--fg); border-color: var(--fg); }
#tuneModal .fq-zone:focus{ outline: none; }
#tuneModal .fq-zone:focus-visible{ outline: 2px solid color-mix(in srgb, currentColor 35%, transparent); outline-offset: -4px; border-radius: 18px; }
#tuneModal .fq-card{ position: absolute; left: 50%; top: 50%; width: var(--cw, 420px); height: var(--ch, 520px); margin: calc(var(--ch, 520px) / -2) 0 0 calc(var(--cw, 420px) / -2); border-radius: 15px; overflow: hidden; background: #111; color: #fff; will-change: transform, opacity, filter; box-shadow: 0 24px 60px rgba(0,0,0,.22); backface-visibility: hidden; }
#tuneModal .fq-card .art, #tuneModal .fq-card video{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background-size: cover; background-position: center; pointer-events: none; }
#tuneModal .fq-card video{ opacity: 0; transition: opacity .5s ease; }
#tuneModal .fq-card video.on{ opacity: 1; }
#tuneModal .fq-card .cap{ position: absolute; left: 0; right: 0; bottom: 0; padding: 56px 20px 18px; display: flex; justify-content: space-between; align-items: baseline; background: linear-gradient(to top, rgba(0,0,0,.55), transparent); font: 600 11px 'IBM Plex Mono', ui-monospace, monospace; letter-spacing: .08em; text-transform: uppercase; pointer-events: none; }
#tuneModal .fq-glow{ position: absolute; inset: 0; z-index: 1; pointer-events: none; transition: --g1 .9s ease, --g2 .9s ease;
  background: radial-gradient(82% 75% at 50% 52%, color-mix(in srgb, var(--g1) 30%, transparent), transparent 72%), radial-gradient(57% 54% at 66% 40%, color-mix(in srgb, var(--g2) 20%, transparent), transparent 75%); }
#tuneModal[data-mode="mood"] .fq-glow{ display: none; }
#tuneModal .mood-zone{ position: absolute; inset: 0; z-index: 2; display: none; touch-action: none; cursor: grab !important; user-select: none; -webkit-user-select: none; }
#tuneModal .mood-zone.drag{ cursor: grabbing !important; }
#tuneModal .mood-zone *{ cursor: inherit !important; }
#tuneModal .mood-zone:focus{ outline: none; }
#tuneModal .mood-zone canvas{ position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#tuneModal[data-mode="mood"] .mood-zone{ display: block; }
#tuneModal[data-mode="mood"] .fq-zone{ display: none; }
#tuneModal .fq-player{ position: absolute; z-index: 6; left: 50%; bottom: 22px; transform: translateX(-50%); width: min(820px, calc(100% - 32px)); height: 70px; box-sizing: border-box; padding: 0 14px; display: flex; align-items: center; gap: 8px; border-radius: 999px; }
#tuneModal .fq-btn{ width: 40px; height: 40px; flex: none; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: none; transition: background .2s, transform .15s; }
#tuneModal .fq-btn:not(:disabled):hover{ background: var(--gl); transform: scale(1.07); }
#tuneModal .fq-play{ width: 44px; height: 44px; }
#tuneModal .fq-play .pa{ display: none; }
#tuneModal .fq-play[data-on="1"] .pl{ display: none; }
#tuneModal .fq-play[data-on="1"] .pa{ display: block; }
#tuneModal .fq-cap{ position: relative; flex: 1; min-width: 0; height: 48px; margin: 0 6px; padding: 0 14px 0 6px; box-sizing: border-box; display: flex; align-items: center; gap: 12px; border-radius: 12px; background: rgba(14,14,16,.82); color: #fff; overflow: hidden; }
#tuneModal .fq-cap .th{ width: 36px; height: 36px; flex: none; border-radius: 8px; background-size: cover; background-position: center; }
#tuneModal .fq-cap .tx{ min-width: 0; display: grid; line-height: 1.25; }
#tuneModal .fq-cap b{ font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#tuneModal .fq-cap b.ph{ opacity: .65; }
#tuneModal .fq-cap small{ font-size: 11px; opacity: .65; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#tuneModal .fq-seek{ position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 10px; margin: 0; padding: 0; -webkit-appearance: none; appearance: none; background: transparent; cursor: pointer; }
#tuneModal .fq-seek::-webkit-slider-runnable-track{ height: 3px; background: linear-gradient(to right, #fff var(--p, 0%), rgba(255,255,255,.22) var(--p, 0%)); }
#tuneModal .fq-seek::-webkit-slider-thumb{ -webkit-appearance: none; width: 0; height: 0; }
#tuneModal .fq-seek::-moz-range-track{ height: 3px; background: rgba(255,255,255,.22); }
#tuneModal .fq-seek::-moz-range-progress{ height: 3px; background: #fff; }
#tuneModal .fq-seek::-moz-range-thumb{ width: 0; height: 0; border: 0; }
#tuneModal .fq-vol{ display: flex; align-items: center; gap: 8px; flex: none; padding-right: 6px; }
#tuneModal .fq-vol input{ -webkit-appearance: none; appearance: none; width: 88px; height: 28px; margin: 0; background: transparent; cursor: pointer; }
#tuneModal .fq-vol input::-webkit-slider-runnable-track{ height: 4px; border-radius: 2px; background: linear-gradient(to right, var(--fg) var(--p, 60%), rgba(128,128,128,.35) var(--p, 60%)); }
#tuneModal .fq-vol input::-webkit-slider-thumb{ -webkit-appearance: none; width: 16px; height: 16px; margin-top: -6px; border-radius: 50%; background: var(--fg); border: 3px solid var(--base); box-shadow: 0 0 0 1px var(--fg); transition: transform .15s; }
#tuneModal .fq-vol input:hover::-webkit-slider-thumb{ transform: scale(1.18); }
#tuneModal .fq-vol input::-moz-range-track{ height: 4px; border-radius: 2px; background: rgba(128,128,128,.35); }
#tuneModal .fq-vol input::-moz-range-progress{ height: 4px; border-radius: 2px; background: var(--fg); }
#tuneModal .fq-vol input::-moz-range-thumb{ width: 10px; height: 10px; border-radius: 50%; background: var(--fg); border: 3px solid var(--base); }
#tuneModal .sr{ position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 700px){#tuneModal .fq-vol input{ display: none; }
#tuneModal .fq-player{ padding: 0 8px; gap: 2px; }
#tuneModal .fq-zone{ top: calc(var(--navH) + 52px); bottom: 104px; }}
@media (prefers-reduced-motion: reduce){#tuneModal .tm-card{ animation: none; }
#tuneModal *{ transition: none !important; }}
html[data-mood]{ --pl: color-mix(in srgb, var(--mt) 5%, #fff); --pd: color-mix(in srgb, var(--mt) 8%, #060607); --ma: var(--ma-l); }
html[data-mood][data-theme="dark"]{ --ma: var(--ma-d); }
html[data-mood][data-mood]:not(.over-ui) #dot, html[data-mood][data-mood].in-work.mouse-lens:not(.out):not(.over-ui) #dot{ background: var(--ma) !important; }
html[data-mood] #siteNav #navMood{ display: none; }
html[data-mood] #siteNav #navTune.vibed, html[data-mood] #siteNav #navTune[aria-expanded="true"]{ color: var(--ma-d); border-color: var(--ma-d); }
html[data-mood] #siteNav #navTune.vibed:hover, html[data-mood] #siteNav #navTune.vibed:focus-visible, html[data-mood] #siteNav #navTune[aria-expanded="true"]:hover, html[data-mood] #siteNav #navTune[aria-expanded="true"]:focus-visible{ background: color-mix(in srgb, var(--ma-d) 16%, transparent); color: var(--ma-d); border-color: var(--ma-d); }
#tuneModal .fq-note{ position: absolute; inset: 0; z-index: 7; display: grid; place-items: center; margin: 0; padding: 0 24px; text-align: center; font: 400 28px/1.25 Inter, system-ui, sans-serif; letter-spacing: -.02em; color: var(--fg); pointer-events: none; opacity: 0; transition: opacity .6s ease, filter .6s ease; filter: blur(6px); }
#tuneModal.intro .fq-note{ opacity: 1; filter: none; }
#tuneModal .fq-zone, #tuneModal .fq-glow, #tuneModal .fq-player, #tuneModal .tm-top, #tuneModal .fq-esc{ transition: opacity .7s ease .1s; }
#tuneModal.intro .fq-zone, #tuneModal.intro .fq-glow, #tuneModal.intro .fq-player, #tuneModal.intro .tm-top{ opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: reduce){#tuneModal .fq-note{ filter: none; }}
html[data-mood] #siteNav .tile:hover, html[data-mood] #siteNav .tile:focus-visible{ border-color: var(--ma-d); }
html[data-mood] #siteNav .tile.on{ background: var(--ma-d); border-color: var(--ma-d); color: #111; }
html[data-theme="light"] #tuneModal .fq-cap{ background: rgba(255,255,255,.78); color: #15151a; box-shadow: inset 0 0 0 1px rgba(0,0,0,.06); }
html[data-theme="light"] #tuneModal .fq-seek::-webkit-slider-runnable-track{ background: linear-gradient(to right, #15151a var(--p, 0%), rgba(0,0,0,.14) var(--p, 0%)); }
html[data-theme="light"] #tuneModal .fq-seek::-moz-range-track{ background: rgba(0,0,0,.14); }
html[data-theme="light"] #tuneModal .fq-seek::-moz-range-progress{ background: #15151a; }
#siteNav #navMood{ display: none; }
#siteNav .fq-wave{ width: 32px; height: 28px; padding: 0; display: grid; place-items: center; border: 0; border-radius: 999px; background: none; color: inherit; transition: background .2s; }
#siteNav .fq-wave:hover, #siteNav .fq-wave:focus-visible{ background: rgba(255,255,255,.16); }
#siteNav .fq-bars{ display: flex; align-items: center; gap: 2px; height: 16px; }
#siteNav .fq-bars i{ width: 2px; height: 100%; border-radius: 1px; background: currentColor; transform: scaleY(var(--h, .6)); animation: fqBar calc((.9s + var(--k) * .14s) * var(--fqs, 1)) ease-in-out infinite; animation-delay: calc(var(--k) * -.23s); }
#siteNav .fq-wave[aria-pressed="false"] .fq-bars i{ animation: none; transform: scaleY(.18); opacity: .6; }
@media (prefers-reduced-motion: reduce){#siteNav .fq-bars i{ animation: none; }}
@media (max-width: 700px){#siteNav .fq-wave{ display: none; }}
@media (max-width: 700px){#siteNav .fq-wave.fq-search{ display: grid; }}
@keyframes tmIn{ from { opacity: 0; transform: translateY(14px) scale(.985); } }
@keyframes fqBar{ 0%, 100% { transform: scaleY(.22); } 50% { transform: scaleY(1); } }

/* keep the menu's tuned darkness with a mood: 88.8% on home, 85% on inner pages */
html[data-mood][data-theme] #siteNav::before{background:rgb(var(--nbg) / 88.8%)}
html.page-open[data-mood][data-theme] #siteNav::before{background:rgb(var(--nbg) / 85%)}