/* "My toolkit" as a CD stack (inv.js). Framer's own block is hidden once ours is in (html.lh-inv). */
html.lh-inv #tools .framer-1j5fq5x { display: none !important; }
html.lh-inv #tools { background: transparent !important; padding: 0 0 140px !important; }

#lh-inv { width: 100%; margin: 0; padding: 0; box-sizing: border-box; color: #111; font-family: Geist, Manrope, system-ui, sans-serif; }
.iv-hd { margin-bottom: 44px; }
.iv-hd .lw-eyebrow { display: block; }
.iv-h { margin: 18px 0 0; font: 600 clamp(40px, 5vw, 72px)/1.02 Urbanist, Manrope, system-ui, sans-serif; letter-spacing: -.045em; color: #0b0b0c; }
.iv-h .mu { font-family: "Pixelify Sans", monospace; font-weight: 700; letter-spacing: 0; color: #9aa3b5; }

.cd-wrap { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 40px; align-items: center; }

/* ---- the shelf: jewel cases standing upright, spines facing out. Hover lifts a case, the picked one rises out. ---- */
.cd-pile { display: flex; flex-direction: row; align-items: flex-end; justify-content: center; padding: 60px 0 0; border-bottom: 6px solid #d9dbe2; }
.cd-spine { --w: clamp(36px, 3.5vw, 46px); position: relative; display: flex; flex-direction: column; align-items: center; gap: 14px; flex: none; width: var(--w); height: clamp(260px, 26vw, 330px);
  margin: 0 -1px 0 0; padding: 12px 0 14px; border: 0; border-radius: 3px; font: inherit; cursor: pointer; color: var(--fg); background: var(--bg);
  transform-origin: 50% 100%; transform: translateY(calc(var(--dx) * .25)) rotate(calc(var(--rot) * .6));
  box-shadow: inset 1px 0 0 rgba(255, 255, 255, .28), inset -2px 0 0 rgba(0, 0, 0, .28), 1px 0 0 rgba(0, 0, 0, .25), 3px 0 6px rgba(0, 0, 0, .1);
  transition: transform .45s cubic-bezier(.3, 1.4, .5, 1), box-shadow .3s; }
/* clear plastic ends of the case (top and bottom) */
.cd-spine::before, .cd-spine::after { content: ""; position: absolute; left: 0; right: 0; height: 7px; background: linear-gradient(180deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, .15)); }
.cd-spine::before { top: 0; border-radius: 3px 3px 0 0; } .cd-spine::after { bottom: 0; border-radius: 0 0 3px 3px; transform: scaleY(-1); }
.cd-spine img { flex: none; width: 26px; height: 26px; margin-top: 6px; border-radius: 6px; object-fit: contain; background: #fff; }
/* spine text runs bottom-to-top, like a real CD on a shelf */
.cd-sp-name { flex: 1; min-height: 0; writing-mode: vertical-rl; transform: rotate(180deg); font: 700 14px/1 Geist, Manrope, sans-serif; letter-spacing: .14em;
  text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cd-sp-no { flex: none; writing-mode: vertical-rl; transform: rotate(180deg); font: 500 11px/1 "Geist Mono", ui-monospace, monospace; letter-spacing: .06em; opacity: .7; }
.cd-spine:hover { transform: translateY(-16px) rotate(0deg); }
.cd-spine.out { z-index: 2; transform: translateY(-46px) rotate(0deg); box-shadow: inset 1px 0 0 rgba(255, 255, 255, .28), inset -2px 0 0 rgba(0, 0, 0, .28), 0 18px 26px rgba(0, 0, 0, .22); }
.cd-spine:focus-visible { outline: 3px solid #224bf0; outline-offset: 3px; }

/* ---- the player (after a portable CD player): disc stands half out of the slot, deck with buttons + LCD ---- */
.pl { --bg: #1e1e1e; --fg: #fff; position: relative; width: 100%; max-width: 430px; justify-self: center; font-family: Geist, Manrope, system-ui, sans-serif; }
.pl-top { position: relative; height: clamp(200px, 18vw, 230px); overflow: hidden; border-radius: 22px 22px 0 0;
  background: linear-gradient(var(--bg) 0 38%, #ececef 38%); transition: background .3s; }
.pl-side { position: absolute; z-index: 2; bottom: 24%; display: flex; flex-direction: column; gap: 6px; color: #111; }
.pl-l { left: 5%; } .pl-r { right: 5%; align-items: flex-end; text-align: right; }
.pl-genre { max-width: 7em; font: 900 18px/1 'Big Shoulders', Impact, sans-serif; text-transform: uppercase; }
.pl-no { padding: 4px 7px; background: #111; color: #fff; font: 600 10px/1 "Geist Mono", ui-monospace, monospace; letter-spacing: .06em; }
.cd-disc { position: absolute; z-index: 1; left: 20%; top: 12%; width: 60%; aspect-ratio: 1; border-radius: 50%;
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .3)); transition: transform .28s cubic-bezier(.5, 0, .8, .4), opacity .28s; }
.cd-disc .dk { animation: cd-spin 4s linear infinite; animation-play-state: paused; }
.cd-stage.play:not(.paused) .cd-disc .dk { animation-play-state: running; }
.cd-stage.eject .cd-disc { transform: translateY(-45%); opacity: 0; }
.cd-stage.play .cd-disc { animation: pl-in .55s cubic-bezier(.2, .9, .3, 1.15) both; }
@keyframes pl-in { from { transform: translateY(-45%); opacity: 0; } }
@keyframes cd-spin { to { transform: rotate(360deg); } }

.pl-deck { position: relative; z-index: 2; padding: 20px 20px 18px; border-radius: 0 0 22px 22px; color: #c9ccd3;
  background: linear-gradient(180deg, #2a2b30, #151619 60%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 34px 60px -24px rgba(10, 20, 50, .55); }
/* the hood over the slot, rising over the disc */
.pl-deck::before { content: ""; position: absolute; left: 50%; top: -26px; width: 46%; height: 52px; transform: translateX(-50%); border-radius: 60px 60px 0 0;
  background: #2a2b30; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12); }
.pl-slot { position: absolute; left: 50%; top: -20px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 3px;
  font: 800 17px/1 'Big Shoulders', Impact, sans-serif; letter-spacing: .06em; text-transform: uppercase; color: #d9dce2; }
.pl-slot i { font-size: 9px; font-style: normal; color: #9a9ea8; }
/* controls under the screen: previous record, play / pause, next record */
.pl-deck button { font-family: inherit; color: inherit; cursor: pointer; }
.pl-ctrl { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 14px; }
.pl-prev, .pl-next { display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%;
  background: radial-gradient(circle at 40% 32%, #3d3e45, #17181b 70%); box-shadow: inset 0 0 0 2px #0c0d0f, 0 0 0 2px #3f4047; }
.pl-prev svg, .pl-next svg { width: 13px; fill: #d9dce2; }
.pl-big { display: grid; place-items: center; width: 50px; height: 50px; padding: 0; border: 0; border-radius: 50%;
  background: radial-gradient(circle at 40% 32%, #3d3e45, #17181b 70%); box-shadow: inset 0 0 0 3px #0c0d0f, 0 0 0 2px #3f4047, 0 4px 10px rgba(0, 0, 0, .5); }
.pl-big svg { width: 20px; fill: #d9dce2; }
.pl-ctrl button:active { transform: scale(.95); }
/* playing shows the pause bars, paused shows the triangle */
.pl:not(.paused) .pl-big path:first-child, .pl.paused .pl-big path:last-child { display: none; }
.pl:not(.paused) .pl-big svg { transform: translateX(-26%); } .pl.paused .pl-big svg { transform: translateX(22%); }
/* the screen */
.pl-lcd { margin-top: 14px; padding: 12px 16px 8px; border-radius: 14px; background: linear-gradient(180deg, rgba(255, 255, 255, .05), transparent 45%), #0c0d0f;
  box-shadow: inset 0 0 0 2px #2f3036, inset 0 8px 18px rgba(0, 0, 0, .7); }
.pl-lcd-top { display: flex; justify-content: space-between; gap: 12px; font: 500 10px/1 "Geist Mono", ui-monospace, monospace; letter-spacing: .12em; text-transform: uppercase; color: #868a94; }
.pl-state::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 7px; border-radius: 50%; background: #ff3b5c; box-shadow: 0 0 8px #ff3b5c; vertical-align: 1px; animation: pl-blink 1.2s steps(2) infinite; }
.paused .pl-state::before { animation: none; background: #5a2a33; box-shadow: none; }
@keyframes pl-blink { 50% { opacity: .35; } }
.pl-title { display: flex; align-items: center; gap: 10px; margin: 12px 0 8px; }
.pl-logo { width: 28px; height: 28px; padding: 4px; box-sizing: border-box; object-fit: contain; border-radius: 9px; background: #fff; }
.pl-name { color: #fff; font: 700 clamp(20px, 1.8vw, 24px)/1 Geist, Manrope, sans-serif; letter-spacing: -.02em; }
/* what I use the tool for: all three always readable, the playing one lit with a little level meter */
.pl-list { list-style: none; margin: 0; padding: 0; }
.pl-list li { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-top: 1px solid #222328; color: #9a9ea8;
  font: 500 clamp(14px, 1.15vw, 16px)/1.2 Geist, Manrope, sans-serif; transition: color .25s; }
.pl-list li span { font: 500 11px/1 "Geist Mono", ui-monospace, monospace; color: #5d616b; }
.pl-list li.on { color: #fff; } .pl-list li.on span { color: #ff3b5c; }
.pl-list li i { display: none; align-items: flex-end; gap: 2px; height: 12px; margin-left: auto; }
.pl-list li.on i { display: flex; }
.pl-list li i b { width: 3px; height: 100%; background: #ff3b5c; border-radius: 1px; animation: pl-eq .9s ease-in-out infinite alternate; }
.pl-list li i b:nth-child(2) { animation-delay: -.3s; } .pl-list li i b:nth-child(3) { animation-delay: -.6s; }
.paused .pl-list li i b { animation-play-state: paused; }
@keyframes pl-eq { from { transform: scaleY(.25); } to { transform: scaleY(1); } }
.pl-deck button:focus-visible { outline: 2px solid #8fb0ff; outline-offset: 2px; }

/* ---- printed disc art (discArt() in inv.js): sizes in cqw so it scales with the disc ---- */
.dk { position: absolute; inset: 0; display: block; border-radius: 50%; overflow: hidden; container-type: inline-size;
  background: conic-gradient(from 20deg, #e4e8ef, #c6f0ff, #f6d3ff, #fff3c4, #d4ffe6, #e4e8ef, #c9d6ff, #ffd9ec, #e4e8ef);
  -webkit-mask: radial-gradient(circle, transparent 0 7.5%, #000 7.8%); mask: radial-gradient(circle, transparent 0 7.5%, #000 7.8%); }
/* the print leaves a slice of bare silver at the top-left, like a half-printed disc */
.dk-print { position: absolute; inset: 0; background: var(--bg); color: var(--fg);
  -webkit-mask: linear-gradient(118deg, transparent 0 24%, #000 24.4%); mask: linear-gradient(118deg, transparent 0 24%, #000 24.4%); }
.dk-big { position: absolute; left: 18%; top: 4%; font: 900 30cqw/.82 'Big Shoulders', Impact, sans-serif; letter-spacing: -.01em; text-transform: uppercase;
  white-space: nowrap; color: var(--fg); opacity: .2; transform: rotate(-7deg); transform-origin: 0 0; }
.dk-logo { position: absolute; left: 63%; top: 17%; width: 15cqw; height: 15cqw; object-fit: contain; padding: 1.6cqw; box-sizing: border-box;
  border-radius: 24%; background: #fff; box-shadow: 0 1.5cqw 3cqw rgba(0, 0, 0, .25); }
.dk-band { position: absolute; left: 0; right: 0; top: 68%; height: 15%; display: flex; align-items: center; gap: 2.4cqw; padding: 0 0 0 19%;
  background: #0b0b0d; color: #fff; white-space: nowrap; }
.dk-band i { font: 600 2.6cqw/1 "Geist Mono", ui-monospace, monospace; font-style: normal; letter-spacing: .06em; text-transform: uppercase; }
.dk-genre { opacity: .6; }
.dk-name { font: italic 900 8.4cqw/1 'Big Shoulders', Impact, sans-serif; letter-spacing: .01em; text-transform: uppercase;
  background: linear-gradient(90deg, #c6f0ff, #f6d3ff, #fff3c4, #d4ffe6); -webkit-background-clip: text; background-clip: text; color: transparent; }
/* holographic sheen over everything */
.dk-holo { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: soft-light; opacity: .85;
  background: conic-gradient(from 200deg, #fff 0deg, #7ef 40deg, #f8f 80deg, #ff8 120deg, #8fc 160deg, #fff 200deg, #9af 250deg, #fbf 300deg, #fff 360deg); }
.dk-holo::after { content: ""; position: absolute; inset: 0; mix-blend-mode: screen;
  background: linear-gradient(125deg, transparent 30%, rgba(255, 255, 255, .5) 45%, transparent 58%); }
.dk-rim { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.dk-rim text { font: 500 2.4px "Geist Mono", ui-monospace, monospace; letter-spacing: .35px; fill: var(--fg); opacity: .55; }
/* clear plastic hub with its moulded rings */
.dk-hub { position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, transparent 0 7.6%, rgba(255, 255, 255, .95) 7.8% 8.6%, rgba(205, 212, 224, .9) 8.8% 12.6%, rgba(255, 255, 255, .95) 12.8% 13.6%,
    rgba(232, 236, 243, .82) 13.8% 16.4%, rgba(160, 168, 182, .55) 16.6% 17%, transparent 17.3%); }

/* entrance: cases drop onto the pile one by one */
#lh-inv.in .cd-spine { animation: cd-drop .5s cubic-bezier(.3, 1.4, .5, 1) backwards; animation-delay: calc(var(--k) * 45ms); }
#lh-inv.wait .cd-spine { opacity: 0; }
@keyframes cd-drop { from { opacity: 0; transform: translateY(-60px) rotate(calc(var(--rot) * 4)); } }

@media (max-width: 809.98px) {
  html.lh-inv #tools { padding: 0 0 100px !important; }
  .cd-wrap { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .cd-stage { order: -1; }
  .pl-top { height: 64vw; } .pl-deck { padding: 26px 14px 18px; }
  .pl-side { bottom: 30%; } .pl-genre { font-size: 16px; max-width: 5.5em; }
  .cd-pile { padding-top: 44px; }
  .cd-spine { --w: 30px; height: 230px; gap: 10px; padding: 8px 0 10px; }
  .cd-spine img { width: 20px; height: 20px; border-radius: 5px; }
  .cd-sp-name { font-size: 11px; letter-spacing: .1em; } .cd-sp-no { font-size: 9px; }
  .cd-spine.out { transform: translateY(-30px) rotate(0deg); }
}
@media (prefers-reduced-motion: reduce) {
  .cd-spine, .cd-disc { transition: none; } .cd-disc .dk, #lh-inv.in .cd-spine, .cd-stage.play .cd-disc, .pl-state::before, .pl-list li i b { animation: none; }
}