/* Album experience follows the selected wooden-tray composition. */
body.keyplay-home .framer-17b4oml { width: min(calc(100% - 64px), 1352px) !important; padding: 0 !important; }
body.keyplay-home .framer-3ysw4s-container { display: none !important; }
body.keyplay-home #hero { position: relative !important; height: auto !important; min-height: 0 !important; width: 100% !important; overflow: hidden; }
body.keyplay-home #hero [data-framer-name="Tv Illustration"], body.keyplay-home #hero .framer-10exf0u, body.keyplay-home #hero .framer-kc6qle { display: none !important; }
body.keyplay-home #hero::before { top: 0; bottom: 0; width: 49%; border: 0; }
body.keyplay-home #hero::after { top: 78px; right: 5.5%; width: 39%; font-size: clamp(40px, 5.3vw, 76px); z-index: 2; }
body.keyplay-home #hero .framer-gejp2b-container { z-index: 2 !important; top: 58px !important; left: 5.5% !important; width: 45% !important; height: 156px !important; }
body.keyplay-home #hero .framer-gejp2b-container::before { top: 22px; }
body.keyplay-home .keyplay-wordmark { padding-top: 44px; font-size: clamp(50px, 6.7vw, 99px) !important; }
.kp-music-experience { position: relative; z-index: 4; padding-top: 202px; color: var(--retro-paper); font-family: "Pixel Operator Regular", "Courier New", monospace; }
.kp-music-nav { position: absolute; top: 0; inset-inline: 0; height: 56px; display: flex; align-items: center; gap: 5.5%; padding: 0 2.8%; border-bottom: 1px solid #9b7a4936; font-size: 15px; letter-spacing: .12em; }
.kp-music-nav a { color: var(--retro-paper); text-decoration: none; white-space: nowrap; }
.kp-music-nav a:first-child { font-weight: bold; font-size: 18px; }
.kp-music-nav a:hover { color: var(--retro-orange); }
.kp-music-nav span { margin-left: auto; color: var(--retro-ink); font-size: 12px; white-space: nowrap; }
.kp-cassette-stage { position: relative; width: 100%; aspect-ratio: 3.05; isolation: isolate; }
.kp-shelf { position: absolute; z-index: 3; inset-inline: 0; bottom: 0; height: 10%; overflow: hidden; filter: drop-shadow(0 10px 10px #21140b50); }
.kp-shelf img { position: absolute; width: 100%; height: 580%; max-width: none; left: 0; top: -242%; }
.kp-deck, .kp-tv { position: absolute; z-index: 2; bottom: 8%; filter: drop-shadow(8px 12px 8px #160e0b65); }
.kp-deck { left: 14%; width: 38.5%; aspect-ratio: 1.5; }
.kp-deck-image, .kp-deck-open-image { display: block; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transition: opacity .2s; }
.kp-deck-open-image { opacity: 0; }
.kp-cassette-stage[data-hatch="open"] .kp-deck-open-image { opacity: 1; }
.kp-cassette-stage[data-hatch="open"] .kp-deck-image { opacity: 0; }
.kp-deck-drop { position: absolute; top: 16%; left: 12.5%; width: 40%; height: 42%; border: 2px dashed transparent; border-radius: 4px; transition: border-color .15s, background .15s; }
.kp-drop-hint { position: absolute; top: -18%; left: 0; width: 100%; color: #483628; text-align: center; font-size: clamp(6px,.6vw,9px); letter-spacing: .025em; }
.kp-cassette-stage[data-dragging="true"] .kp-deck-drop, .kp-cassette-stage[data-hatch="open"] .kp-deck-drop { border-color: #ff9f36; background: #f2a83a15; }
.kp-loaded-label { position: absolute; top: 46%; left: 18%; width: 29%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #eee0bc; text-align: center; font-size: clamp(7px,.8vw,11px); }
.kp-cassette-stage[data-hatch="open"] .kp-loaded-label { opacity: 0; }
.kp-tape-stack { position: absolute; left: .2%; bottom: 5.3%; width: 16%; z-index: 1; }
.kp-plant-tapes { position: absolute; right: -.7%; bottom: 5%; width: 16%; z-index: 3; }
.kp-tv { right: 14%; width: 35.8%; aspect-ratio: 498 / 436; }
.kp-deck-keys { position: absolute; inset: 0; pointer-events: none; }
.kp-key { position: absolute; top: 66.7%; height: 20.4%; width: 9.7%; padding: 0; border: 0; border-radius: 10%; background: transparent; color: #443226; cursor: pointer; pointer-events: auto; touch-action: manipulation; transition: transform .12s, box-shadow .12s; }
.kp-key span { position: absolute; inset-inline: 0; bottom: 5%; font: 800 clamp(7px,.72vw,10px)/1 ui-monospace, monospace; text-shadow: 0 1px 1px #fff9; }
.kp-key-play { left: 13.1%; color: #ffefdc; }
.kp-key-rewind { left: 23.6%; }
.kp-key-stop { left: 33.2%; }
.kp-key-forward { left: 42.8%; }
.kp-key:hover { box-shadow: inset 0 0 0 2px #ffe7aa99; }
.kp-key:active { transform: translateY(3px); background: #21180d27; }
.kp-key:focus-visible { outline: 3px solid #f2a83a; outline-offset: 4px; }
.kp-tv-photo { position: absolute; inset: 0; overflow: hidden; }
.kp-tv-photo img {
  position: absolute;
  top: -12.6%;
  left: -62.65%;
  display: block;
  width: 224.9%;
  max-width: none;
  height: auto;
}
.kp-tv-screen {
  position: absolute;
  z-index: 1;
  top: 15.1%;
  left: 13.2%;
  width: 73.8%;
  height: 59.7%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 5% 6% 4%;
  border-radius: 11% / 8%;
  background: radial-gradient(ellipse at 50% 45%, #0b231b 0%, #07150f 58%, #020806 100%);
  box-shadow: inset 0 0 17px 5px #000b, inset 0 0 22px #154b2b7d, 0 0 8px #050b07;
  color: #63f6a4;
  font-family: "Pixel Operator Regular", "Courier New", monospace;
  font-size: clamp(10px, 1.28vw, 17px);
  letter-spacing: .025em;
  text-shadow: 0 0 5px #3dff9bc0, 0 0 14px #36f98b63;
}
.kp-tv-screen::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: repeating-linear-gradient(to bottom, transparent 0 2px, #0008 3px 4px);
  opacity: .45;
  pointer-events: none;
}
.kp-screen-head, .kp-screen-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.kp-screen-head {
  padding-bottom: .35em;
  border-bottom: 1px solid #3ff49593;
  white-space: nowrap;
  font-size: .88em;
}
.kp-track-list {
  flex: 1;
  min-height: 0;
  margin: .45em 0;
  padding: 0;
  list-style: none;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #2c9a60 transparent;
}
.kp-track-list li { margin: 0 0 .09em; }
.kp-track {
  position: relative;
  display: flex;
  width: 100%;
  align-items: center;
  gap: .6em;
  padding: .08em .3em .08em 1.1em;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  text-shadow: inherit;
}
.kp-track::before { content: ">"; position: absolute; left: .15em; opacity: 0; }
.kp-track:hover, .kp-track[aria-current="true"] { background: #52ed9473; color: #08271a; text-shadow: none; }
.kp-track[aria-current="true"]::before { opacity: 1; }
.kp-track:focus-visible { outline: 2px solid #81ffb0; outline-offset: -1px; }
.kp-track-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kp-empty-track { padding: .08em .3em .08em 1.1em; color: #4e9a6c; white-space: nowrap; }
.kp-screen-footer { flex-shrink: 0; padding-top: .28em; border-top: 1px solid #3ff49593; }
.kp-screen-status { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: .87em; }
.kp-progress { width: 100%; height: 3px; margin: .24em 0; background: #246b4359; }
.kp-progress span { display: block; width: 0; height: 100%; background: #67ffad; box-shadow: 0 0 5px #67ffad; }
.kp-screen-meta { font-size: .79em; }
.kp-screen-meta label { display: flex; align-items: center; gap: .4em; white-space: nowrap; }
.kp-volume { width: clamp(45px, 5vw, 75px); height: 12px; accent-color: #65f5a4; cursor: pointer; }


.kp-tv-screen { font-size: clamp(10px,1.18vw,17px); }
.kp-screen-head { font-size: 1.1em; letter-spacing: .07em; padding-bottom: .45em; }
.kp-album-title { overflow: hidden; text-overflow: ellipsis; }
.kp-album-library { position: relative; margin-top: 18px; padding: 0 2.5% 16px; background: #34271eed; border-top: 1px solid #816247; scroll-margin-top: 12px; }
.kp-library-heading { display: flex; align-items: baseline; gap: 24px; padding: 13px 0 11px; }
.kp-library-heading h2 { margin: 0; font: 700 clamp(18px,1.8vw,25px)/1.1 Impact,"Arial Narrow",sans-serif; letter-spacing: .015em; }
.kp-library-heading p { margin: 0; font-size: 11px; letter-spacing: .1em; }
.kp-library-controls { display: grid; grid-template-columns: minmax(0,1.5fr) minmax(170px,1fr) auto; align-items: center; gap: 22px; border-top: 1px solid #b68f5d38; padding-top: 10px; }
.kp-region-tabs { display: flex; gap: 7px; }
.kp-region-tabs button, .kp-library-pager button { border: 1px solid #cbbca4; border-radius: 5px; background: #e8d6b5; color: #30251b; box-shadow: inset 0 2px #ffefcc, 0 3px 0 #70543a, 0 5px 8px #160d0733; font: bold 13px/1 "Pixel Operator Regular","Courier New",monospace; cursor: pointer; }
.kp-region-tabs button { flex: 1; min-height: 34px; padding: 7px 6px; white-space: nowrap; }
.kp-region-tabs button[aria-pressed="true"] { background: #f2a83a; border-color: #d98025; box-shadow: inset 0 2px #ffe1a1,0 3px 0 #82491f; }
.kp-region-tabs button:hover, .kp-library-pager button:hover { background: #ffc76e; }
.kp-album-search { display: flex; align-items: center; gap: 10px; height: 34px; padding: 0 10px; border: 1px solid #967a5a; border-radius: 5px; background: #261e18; box-shadow: inset 0 1px 4px #140c09; }
.kp-album-search img { width: 16px; height: 16px; filter: invert(91%) sepia(16%); }
.kp-album-search input { min-width: 0; width: 100%; border: 0; background: transparent; color: #fff0d4; font: 12px "Pixel Operator Regular","Courier New",monospace; outline: 0; }
.kp-album-search:focus-within { outline: 2px solid #f2a83a; outline-offset: 2px; }
.kp-album-search input::placeholder { color: #b6a58c; }
.kp-library-pager { display: flex; align-items: center; gap: 15px; font-size: 13px; white-space: nowrap; }
.kp-library-pager button { display: grid; place-items: center; width: 35px; height: 36px; padding: 8px; }
.kp-library-pager button img { width: 15px; height: 15px; }
.kp-library-pager button:disabled { opacity: .45; cursor: default; }
.kp-library-instruction { margin: 11px 0 3px; color: #d4be9c; font-size: 11px; letter-spacing: .04em; }
.kp-trays { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
.kp-tray { position: relative; aspect-ratio: 2.7; background: url('/cassette-player/assets/wooden-tray.png') center 51.5% / 103% 134% no-repeat; }
.kp-tray-tapes { position: absolute; top: 4%; left: 7%; right: 7%; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 2%; align-items: start; }
.kp-album-tape { appearance: none; display: flex; flex-direction: column; min-width: 0; padding: 0; border: 0; background: transparent; color: #2d2117; cursor: grab; touch-action: manipulation; }
.kp-tape-body { position: relative; display: block; width: 100%; aspect-ratio: 1586 / 992; transition: transform .18s,filter .18s; filter: drop-shadow(0 5px 3px #160c0899); }
.kp-tape-body img { display: block; width: 100%; height: 100%; }
.kp-tape-label { position: absolute; top: 17%; left: 9%; width: 82%; height: 14%; display: flex; align-items: center; justify-content: center; font: italic 700 clamp(9px,1.15vw,17px)/1.05 "Apple Garamond Regular",Georgia,serif; white-space: nowrap; letter-spacing: -.035em; }
.kp-tape-caption { display: flex; justify-content: center; align-items: center; gap: 8px; width: 94%; height: 22px; margin: 2px auto 0; padding: 2px 5px; border: 1px solid #44301d; border-radius: 3px; background: #ceb99a; box-shadow: inset 0 1px #f2dfbd,0 2px 2px #201309a8; font-size: clamp(8px,.8vw,12px); letter-spacing: .025em; }
.kp-tape-caption span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kp-album-tape:hover .kp-tape-body { transform: translateY(-7px) rotate(-2deg); filter: drop-shadow(0 9px 5px #160c0899); }
.kp-album-tape[aria-pressed="true"] .kp-tape-body { border-radius: 7px; outline: 2px solid #ffa337; outline-offset: -2px; }
.kp-album-tape:focus-visible { outline: 2px solid #ffc573; outline-offset: 4px; border-radius: 5px; }
.kp-album-tape.kp-dragging { opacity: .4; }
.kp-tray-region { position: absolute; top: 82%; left: 37.5%; width: 25%; text-align: center; color: #241b13; font: bold clamp(11px,1.6vw,23px)/1 Impact,"Arial Narrow",sans-serif; letter-spacing: .06em; }
.kp-library-empty { padding: 40px 15px; border: 1px solid #94724b; text-align: center; }
.kp-library-footer { display: flex; justify-content: space-between; gap: 10px; margin-top: 10px; padding-top: 13px; border-top: 1px solid #aa875536; color: #d2bd9c; font-size: 10px; letter-spacing: .18em; }
.kp-flying-tape { position: absolute; z-index: 10000; pointer-events: none; }
.kp-flying-tape .kp-tape-label { font-size: 15px; }
.kp-music-experience :is(button,a):focus-visible { outline: 2px solid #ffc76e; outline-offset: 3px; }

@media (max-width: 1000px) and (min-width: 810px) {
  .kp-music-nav { gap: 4%; font-size: 12px; }
  .kp-music-nav span { display: none; }
  .kp-library-controls { grid-template-columns: 1fr auto; gap: 12px; }
  .kp-region-tabs { grid-column: 1 / -1; }
  .kp-library-heading { gap: 12px; }
  .kp-library-heading p { font-size: 9px; }
}
@media (max-width: 809.98px) {
  body.keyplay-home .framer-17b4oml { width: calc(100% - 24px) !important; }
  body.keyplay-home #hero::before { width: 49%; top: 0; bottom: 0; }
  body.keyplay-home #hero::after { top: 174px; right: 7%; width: 45%; font-size: clamp(27px,6vw,44px); }
  body.keyplay-home #hero .framer-gejp2b-container { top: 53px !important; left: 5% !important; width: 90% !important; height: 120px !important; }
  body.keyplay-home #hero .framer-gejp2b-container::before { top: 14px; font-size: 8px; }
  body.keyplay-home .keyplay-wordmark { padding-top: 38px; font-size: clamp(42px,10vw,76px) !important; }
  .kp-music-nav { height: 45px; gap: 5%; padding: 0 5%; font-size: 10px; letter-spacing: .06em; }
  .kp-music-nav a:first-child { font-size: 12px; }
  .kp-music-nav a:last-of-type, .kp-music-nav span { display: none; }
  .kp-music-experience { padding-top: 260px; }
  .kp-cassette-stage { width: min(100%,560px); margin: auto; height: min(151vw,825px); aspect-ratio: auto; }
  .kp-tv { top: 0; bottom: auto; right: 8%; width: 84%; }
  .kp-deck { top: min(80vw,435px); bottom: auto; left: 2%; width: 92%; }
  .kp-shelf { height: 6%; }
  .kp-plant-tapes { display: none; }
  .kp-tape-stack { width: 21%; left: 2%; bottom: 5%; }
  .kp-tv-screen { font-size: clamp(10px,2.8vw,16px); }
  .kp-key span { font-size: clamp(7px,2vw,10px); }
  .kp-drop-hint { font-size: 7px; }
  .kp-loaded-label { font-size: 10px; }
  .kp-album-library { margin-top: 12px; padding: 0 4% 18px; }
  .kp-library-heading { display: block; padding: 16px 0 12px; }
  .kp-library-heading h2 { font-size: clamp(18px,4.4vw,25px); }
  .kp-library-heading p { margin-top: 6px; font-size: 9px; }
  .kp-library-controls { grid-template-columns: minmax(0,1fr) auto; gap: 13px 10px; }
  .kp-region-tabs { grid-column: 1 / -1; gap: 5px; }
  .kp-region-tabs button { min-height: 35px; padding: 7px 3px; font-size: 11px; }
  .kp-library-pager { gap: 7px; font-size: 11px; }
  .kp-library-pager button { width: 31px; height: 34px; }
  .kp-album-search { padding: 0 8px; gap: 7px; }
  .kp-album-search input { font-size: 10px; }
  .kp-library-instruction { font-size: 10px; line-height: 1.4; margin: 13px 0 8px; }
  .kp-trays { grid-template-columns: 1fr; gap: 10px; }
  .kp-tape-label { font-size: clamp(10px,2.7vw,17px); }
  .kp-tape-caption { height: 20px; gap: 5px; font-size: clamp(8px,2.1vw,12px); }
  .kp-tray-region { font-size: clamp(13px,3.6vw,22px); }
  .kp-library-footer { font-size: 8px; letter-spacing: .09em; line-height: 1.5; }
}
@media (prefers-reduced-motion: reduce) {
  .kp-music-experience * { transition: none !important; animation: none !important; }
}
@font-face { font-family: 'KP Space Mono'; src: url('/cassette-player/assets/SpaceMono-Regular.ttf') format('truetype'); font-display: swap; }
.kp-tv-screen { font-family: 'KP Space Mono',monospace; font-size: clamp(9px,.95vw,14px); }
.kp-track { padding-block: .22em; }
@media(max-width:809.98px) { .kp-tv-screen { font-size: clamp(9px,2.35vw,13px); } }
@media (max-width: 809.98px) {
  body.keyplay-home #hero::after { right: 5%; width: 39%; }
}
/* Keep the wordmark visible while the captured page hydrates. */
body.keyplay-home #hero .framer-gejp2b-container { opacity: 1 !important; }
@media (min-width: 810px) {
  body.keyplay-home .framer-17b4oml { width: calc(100% - 96px) !important; max-width: 1800px !important; }
  body.keyplay-home #hero::after { top: 72px; font-size: clamp(40px,5.1vw,72px); line-height: .83; }
  body.keyplay-home .keyplay-wordmark { font-size: clamp(50px,6.7vw,126px) !important; }
}
@font-face { font-family: 'KP Tape Hand'; src: url('/cassette-player/assets/Caveat.ttf') format('truetype'); font-display: swap; }
.kp-tape-label { font-family: 'KP Tape Hand',cursive; font-style: normal; font-weight: 600; letter-spacing: -.025em; font-size: clamp(11px,1.55vw,23px); }
@media(min-width:810px) {
  body.keyplay-home .keyplay-wordmark { font-size: clamp(50px,7.2vw,132px) !important; transform: scaleX(1.15); transform-origin: left center; }
  body.keyplay-home #hero::after { top: 64px; font-size: clamp(40px,4.7vw,68px); line-height: .8; }
}
@media(max-width:809.98px) { .kp-tape-label { font-size: clamp(12px,3.2vw,21px); } }