/* The shared frame, controls, and artwork presentation. */
:root{
  --ink:#17344a;--deep:#204b65;--sky:#68b6cc;--paper:#edf3ee;
  --lime:#c9e65a;--pink:#e579a5;--yellow:#f7c65e;
  --line:#abc1c6;--muted:#496576;--shadow:#0c3048;
}
body{background:#255b73}
.world{
  padding-top:27px;
  background-color:#2d6780;
  background-image:radial-gradient(#0a375416 .7px,transparent .9px),radial-gradient(ellipse at 50% 0,#b1e9ed55,transparent 70%),linear-gradient(#368eac,#81c7d5 430px,#4d8caa 900px,#254e69);
  background-size:4px 4px,100% 900px,100% 100%;
  background-repeat:repeat,no-repeat,no-repeat;
}
.sky-cloud{filter:drop-shadow(0 5px 0 #234f651c)}
.clouds-left,.clouds-rise,.clouds-right{filter:drop-shadow(0 5px 0 #234f651c);opacity:.87}
.clouds-side{opacity:.5}
.clouds-bottom{opacity:.48}
.cabinet{
  position:relative;padding:7px;border:3px solid #0a293d;border-radius:12px;
  background:linear-gradient(125deg,#a6c6ce,#5a8b9e 22%,#315e79 67%,#49798c);
  box-shadow:inset 0 1px 0 #efffff,inset 1px 0 0 #bddfe4,inset -1px -1px 0 #214a62,0 8px 0 #092a40,0 11px 0 #568293,0 22px 35px #143c5866;
}
.masthead{
  height:238px;overflow:hidden;border:2px solid #103248;border-bottom:0;
  border-radius:5px 5px 0 0;
  background:radial-gradient(ellipse at 55% 5%,#87d5e277,transparent 70%),linear-gradient(#277b9e,#67b9ce);
  box-shadow:inset 0 2px 6px #10394d55;
}
.header-sweep{position:absolute;max-width:none;width:850px;right:-5px;top:-120px;pointer-events:none;opacity:.7}
.header-cloud{position:absolute;pointer-events:none;bottom:-47px;left:-125px;width:640px;max-width:none;filter:drop-shadow(0 4px 0 #1c5a731f)}
.robot-window{inset:0;clip-path:none;overflow:hidden}
.robot-wrap{left:0;top:auto;bottom:-6px;width:26%;height:auto;filter:drop-shadow(5px 6px 0 #18465b55)}
.robot{width:100%;height:auto;clip-path:none}
.wordmark{
  left:50%;top:32px;width:43%;font-size:unset;line-height:1;
  mix-blend-mode:normal;filter:drop-shadow(2px 0 0 #eefbf0) drop-shadow(-2px 0 0 #eefbf0) drop-shadow(0 2px 0 #eefbf0) drop-shadow(0 -2px 0 #eefbf0) drop-shadow(3px 5px 0 #20556e);-webkit-text-stroke:0;transform:translateX(-50%) rotate(-1deg);
}
.wordmark img{width:100%;height:auto;filter:none}
.heartmark{
  display:block;right:24px;top:24px;width:148px;height:auto;
  overflow:visible;mix-blend-mode:normal;transform:rotate(-9deg);
  filter:drop-shadow(3px 5px 0 #173e5b80);
}
.heartmark img{position:static;width:100%;height:auto;max-width:100%}
.heartmark:hover{transform:translateY(-3px) rotate(-5deg)}
.heartmark:focus-visible{outline:3px solid #f4b0cb;outline-offset:5px;border-radius:5px}
.frame{border:2px solid #103248;border-radius:0 0 5px 5px;box-shadow:none;background:var(--paper)}
.frame::before,.frame::after{top:13px;width:7px;height:7px;background:#6d929c;border-color:#15374d;box-shadow:inset 0 1px 0 #c4e0df,0 1px 0 #adcbd055}
.frame-stripe{height:5px;background:linear-gradient(90deg,#eb4c89 0 17%,#f6b842 17% 34%,#c2df44 34% 51%,#43b9d1 51% 76%,#8765b6 76%);box-shadow:inset 0 1px 0 #ffffff70}
.ticker{
  height:30px;border-radius:0;border-bottom:2px solid #13344a;
  background:repeating-linear-gradient(0deg,#122f43,#122f43 2px,#16364b 2px,#16364b 4px);
  color:#d6ed82;box-shadow:inset 0 2px 4px #071c2c88;
}
.ticker-track{font-family:Consolas,'Courier New',monospace;font-size:.8125rem;letter-spacing:.025em}
.ticker-track span{padding-right:26px}
.ticker-toggle{color:#c5dfca;border-left:1px solid #4b6b78;padding-left:10px}
.frame-body{grid-template-columns:164px minmax(0,1fr)}
.sidebar{
  padding:18px 11px 16px;border-right:3px solid #183b51;
  background:repeating-linear-gradient(135deg,transparent 0 4px,#13364b13 4px 5px),linear-gradient(90deg,#426e83,#507c90 12px,#355c73);
  box-shadow:inset 1px 0 0 #9cbec8,inset -1px 0 0 #88aeba;
}
.nav{gap:7px}
.nav a{
  min-height:37px;padding:8px 8px;gap:8px;border:1px solid #19394f;border-radius:3px;
  background:linear-gradient(#658fa3,#527c91 48%,#426b83 49%,#385c75);
  color:#f2f7ed;text-shadow:0 1px #123048;
  box-shadow:inset 1px 1px 0 #a9c7cf77,inset -1px -1px 0 #2a5268,0 2px 0 #193b51;
  transition:background .12s,transform .12s;
}
.nav a:hover{background:linear-gradient(#8eb9c9,#598ba4);border-color:#15384e;transform:translateY(-1px)}
.nav a.active{
  color:#263715;text-shadow:0 1px #f9ffc4;background:linear-gradient(#ecf7a0,#d2e973 47%,#bfdd52 48%,#aed03d);
  border-color:#233c28;box-shadow:inset 1px 1px 0 #f9ffd4,inset -1px -1px 0 #99b633,0 2px 0 #1e3945;
}
.nav .glyph{width:18px;font-size:16px}
.nav-break{height:8px;margin-bottom:4px;border-bottom:1px solid #22495f;box-shadow:0 1px 0 #8aacbb66}
.lucky{
  margin-top:22px;border:1px solid #40293b;border-radius:3px;padding:9px 5px;
  background:linear-gradient(#f4bbd0,#da7ca1);color:#392238;text-shadow:0 1px #ffe4ee;
  box-shadow:inset 1px 1px 0 #ffe4eb,inset -1px -1px 0 #b5587d,0 3px 0 #273d51;
}
.lucky:hover{background:linear-gradient(#ffdeeb,#e594b4)}
.lucky b{background:#663c58;color:#ffecf3;text-shadow:none;border-radius:2px}
.side-mascot{width:65px;margin:22px auto 3px;filter:drop-shadow(3px 4px 0 #153b4c55)}
.side-mascot img{width:100%;height:auto}
.content{
  padding:20px 20px 25px;
  background-color:#e9f0ee;
  background-image:radial-gradient(#23506b10 .6px,transparent .85px),linear-gradient(90deg,#b0c7c54d,transparent 15px);
  background-size:3px 3px,100% 100%;
  box-shadow:inset 0 3px 8px #31586b22;
}
h2{font-size:1.5rem;letter-spacing:-.035rem}
.page-heading{margin-bottom:18px;padding-bottom:12px;border-bottom:1px solid #b1c3c7;box-shadow:0 1px 0 #fff9}
.page-heading .subtle-link,.text-link{font-size:.875rem}
.home-grid{grid-template-columns:minmax(0,1fr) 224px;gap:17px}
.home-main,.home-aside{gap:20px}
.panel{border:1px solid #214256;border-radius:4px;background:#f6f8ef;box-shadow:0 2px 0 #8da7ae,0 3px 6px #2c536325}
.panel-bar{
  min-height:32px;padding:7px 11px;border-bottom:1px solid #163b52;
  background:linear-gradient(#4d869c,#2b617d 49%,#245570 50%,#20465f);
  color:#f5f8ef;text-shadow:0 1px #143248;box-shadow:inset 0 1px 0 #a3c8d3;
}
.panel-bar h3{font-size:.875rem;letter-spacing:.01em}
.panel-bar.gold{color:#4d3615;text-shadow:0 1px #fff2b1;background:linear-gradient(#ffe49a,#f3c264 49%,#eeb64d 50%,#d99d35);box-shadow:inset 0 1px 0 #fff0bd;border-bottom-color:#b18b43}
.panel-bar.pink{color:#fff2f9;text-shadow:0 1px #7f2b50;background:linear-gradient(#d775a2,#b84e80 49%,#a83e70 50%,#93365f);box-shadow:inset 0 1px 0 #f0adcc;border-bottom-color:#742c52}
.panel-bar.lime{color:#28411b;text-shadow:0 1px #f2ffc2;background:linear-gradient(#e7f399,#c2db65);box-shadow:inset 0 1px 0 #f4ffd4;border-bottom-color:#8da549}
.feature-panel{border-color:#0b2f48;box-shadow:0 3px 0 #91a9b1,0 5px 8px #21445333}
.feature-panel .panel-bar{background:linear-gradient(#38677f,#23485f);box-shadow:inset 0 1px 0 #7aa3b7}
.featured-record{
  grid-template-columns:200px minmax(0,1fr);padding:15px;gap:18px;
  color:#edf7f2;background:radial-gradient(ellipse at 10% 0,#4b7c9366,transparent 72%),repeating-linear-gradient(0deg,#17374d 0 3px,#193c52 3px 4px);
  box-shadow:inset 0 2px 5px #071e3055;
}
.featured-record .album-art{border:2px solid #071f34;box-shadow:1px 1px 0 #99b8c8,4px 5px 0 #09253e88}
.record-side h3{font-size:1.125rem;letter-spacing:-.025em;margin-top:2px}
.featured-record .record-meta,.featured-record .song-row .duration{color:#b7d0d5}
.featured-record .song-row{border-bottom-color:#6d93a177;padding:8px 0}
.featured-record .text-link{color:#d8f09b}
.song-row.is-playing{background:#dbe9bd}
.featured-record .song-row.is-playing{background:#2a5867;color:#efffbc}
.play-small{width:23px;height:23px;padding:0;flex-shrink:0;background:#e0eccc;border:1px solid #698a79;border-radius:2px;color:#315043;box-shadow:inset 0 1px 0 #faffeb}
.featured-record .play-small{color:#d9ed9e;background:linear-gradient(#427588,#2a536a);border-color:#102e46;box-shadow:inset 0 1px 0 #6996a6}
.play-small[aria-pressed="true"]{background:#c8e568;color:#263d26}
.button,.filter{
  border:1px solid #3b5b39;border-radius:3px;min-height:33px;
  background:linear-gradient(#e8f4a8,#c9e570 47%,#bddd54 48%,#afd040);
  box-shadow:inset 1px 1px 0 #faffd8,inset -1px -1px 0 #8aa72d,0 3px 0 #607e3b,0 4px 0 #36513f;
  color:#263b24;text-shadow:0 1px #f1ffc2;padding:7px 11px;font-size:.875rem;
  transition:transform .1s,filter .1s;
}
.button:hover{background:linear-gradient(#f1ffc2,#c5e566);filter:brightness(1.03)}
.button.secondary,.filter{background:linear-gradient(#f7fbf2,#d4e0db);border-color:#6d8e94;box-shadow:inset 1px 1px 0 #fff,0 2px 0 #9ab1b2;color:#315062;text-shadow:0 1px #fff}
.button.pink{background:linear-gradient(#ffd1e6,#de8ab0);border-color:#98516f;box-shadow:inset 1px 1px 0 #ffeaf2,0 3px 0 #a1617f;color:#492440;text-shadow:0 1px #ffe4ee}
.filter{padding:6px 10px;min-height:31px}
.filter.active{background:linear-gradient(#46748e,#244b66);border-color:#193d54;color:#f4f9e6;text-shadow:0 1px #143249;box-shadow:inset 0 2px 4px #0f304655,0 1px 0 #fff}
.button:active,.lucky:active,.nav a:active{transform:translateY(2px);box-shadow:inset 0 1px 3px #1a391833,0 1px 0 #22412f}
.section-title{padding-bottom:8px;border-bottom:1px solid #9fb7bf;box-shadow:0 1px 0 #fff9;margin-bottom:12px}
.section-title h3{font-size:.9375rem}
.capsules{gap:11px}
.capsule{padding:6px;border:1px solid #7b99a6;border-radius:3px;background:#fafbf2;box-shadow:inset 0 1px 0 #fff,0 3px 0 #adbec0,0 5px 5px #193f5617}
.capsule:hover{border-color:#426986;box-shadow:0 3px 0 #91aab2,0 7px 10px #23475a30}
.capsule img{border:1px solid #668592}
.capsule strong{font-size:.875rem;margin:8px 2px 4px}
.capsule .meta{color:#537080}
.album-art,.album-tile img{border-color:#315367;box-shadow:1px 1px 0 #fff,3px 4px 0 #a6b8bd}
.album-tile strong{font-size:.875rem}
.mystery-body{padding:11px;background:radial-gradient(#92633012 .6px,transparent .85px) 0 0/3px 3px,#fff7df}
.mystery-body img{border:2px solid #826940;box-shadow:0 1px 0 #fff}
.mystery-body h3{margin-top:12px}
.mystery-body p{font-size:.875rem;line-height:1.45}
.discord-body{padding:23px 13px;background:radial-gradient(#b44b7912 .6px,transparent .85px) 0 0/3px 3px,#f7dce8;color:#583449}
.discord-body h3{font-size:1.125rem;margin-bottom:15px}
.soon{background:#fff0f5;border:1px solid #c78ba3;box-shadow:inset 0 1px 2px #ad728522,0 1px 0 #fff7;border-radius:3px;color:#75435e;padding:5px 10px}
.tape-image{border:2px solid #26485f;box-shadow:0 2px 0 #9bb4ba;background:#14364e}
.tape strong{font-size:.875rem}
.play-stamp{font-size:25px;background:#072c4510;text-shadow:1px 2px 0 #08283d,0 1px 5px #08283d}
.home-bottom{margin-top:23px}
.player{
  right:16px;top:auto;bottom:0;height:64px;width:290px;gap:9px;padding:5px 9px 14px;
  border:2px solid #123448;border-bottom:0;border-radius:6px 6px 0 0;
  color:#ecf7d1;background:linear-gradient(#437589,#285267);
  box-shadow:inset 1px 1px 0 #a1c4cb,inset -1px 0 0 #587f95;
}
.player-copy{padding:5px 6px;background:repeating-linear-gradient(0deg,#172f3b 0 2px,#193341 2px 3px);border:1px solid #092738;border-bottom-color:#789799;border-right-color:#63858d;box-shadow:inset 0 1px 3px #071c2b}
.player-title{font-size:.8125rem;color:#d9f08f}
.player-album{font-size:.75rem;color:#a8c6bb;margin-top:2px}
.player-cover{border-color:#0b293d;box-shadow:1px 1px 0 #99b7ba}
.player-play{color:#263d27;border-color:#14364a;background:linear-gradient(#edf9a6,#abc93f);box-shadow:inset 0 1px 0 #f7ffd4,0 2px 0 #153548}
.player-next{color:#e1efc3;text-shadow:0 1px #102e40;font-size:15px}
.player-progress{left:9px;right:9px;width:calc(100% - 18px);height:3px;bottom:6px;background:#759a9c}
.player-progress::-webkit-slider-thumb{width:9px;height:9px;border:1px solid #264529;background:#d1ec70;box-shadow:0 1px 0 #092e39}
.player-progress::-moz-range-thumb{width:8px;height:8px;border:1px solid #264529;background:#d1ec70}
.player-error{color:#ffc7cc}
.download-row{background:#f9fbf4;border-color:#9bb3b9;box-shadow:inset 0 1px 0 #fff,0 2px 0 #c1d0d0}
.search{border:1px solid #608392;background:#fbfef7;box-shadow:inset 1px 2px 3px #375a7025}
.announcement,.archive-note{background:#dde8da;border-color:#afc1ad}
.status-label{background:#fff0ba;border-color:#be9654;color:#694b25}
.site-footer{padding-top:28px;color:#edf6ed;text-shadow:0 1px 0 #1d4b65;font-size:.8125rem}
.footer-heart{color:#f4b0cb}
dialog{border:4px solid #173a52;border-radius:6px;box-shadow:0 5px 0 #092c42,0 20px 70px #071d3680}
.dialog-bar{background:linear-gradient(#456f87,#244d66);box-shadow:inset 0 1px 0 #91b1bf;border-bottom:1px solid #173b51}
.dialog-close{background:linear-gradient(#e69cb8,#b65a80);border-color:#69344e;color:#fff4f4;box-shadow:inset 0 1px 0 #f3c2d4}
.dialog-body{background:var(--paper)}
button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #e54b97;outline-offset:4px}

/* Original miniature sprites, drawn on a shared pixel grid. */
.ui-icon{display:inline-block;flex:none;vertical-align:middle;shape-rendering:crispEdges;pointer-events:none;text-shadow:none}
.nav .glyph{display:grid;place-items:center;flex:0 0 20px;width:20px;height:20px;line-height:0}
.player-play,.player-next,.ticker-toggle,.play-small,.dialog-close,.track-download{display:inline-grid;place-items:center;line-height:1;text-shadow:none}
.player-next{padding:0;min-width:20px;min-height:28px}
.play-small{flex:none;width:24px;height:24px;padding:4px}
.ticker-toggle{min-width:28px;min-height:26px}
.text-link:has(.ui-icon),.subtle-link:has(.ui-icon),.back-link{display:inline-flex;align-items:center;gap:5px}
.more-button{display:flex;width:max-content;max-width:100%}
.lucky{display:flex;align-items:center;justify-content:center;gap:7px}
.footer-heart{display:inline-block;vertical-align:middle;line-height:1}
.footer-heart .ui-icon{width:16px;height:16px;vertical-align:top}
.empty-cover .ui-icon{width:60px;height:60px}
.play-stamp{text-shadow:none}
.play-stamp .ui-icon{width:32px;height:32px;filter:drop-shadow(1px 2px 0 #08283d)}

@media(max-width:1150px){
  .world{padding-top:22px}.content{padding:18px 17px 23px}
  .home-grid{grid-template-columns:minmax(0,1fr) 202px;gap:15px}
  .featured-record{grid-template-columns:175px minmax(0,1fr);gap:14px;padding:14px}
  .heartmark{width:132px;right:20px;top:25px}
  .heartmark img{width:100%}.frame-body{grid-template-columns:151px minmax(0,1fr)}
}
@media(max-width:980px){
  .masthead{height:211px}.heartmark{width:114px;right:20px;top:20px}
  .wordmark{top:28px}
  .home-grid{grid-template-columns:minmax(0,1fr)}
  .home-aside{display:grid;grid-template-columns:1fr 1fr;gap:16px}
  .featured-record{grid-template-columns:190px minmax(0,1fr);padding:15px}
  .header-cloud{width:520px;left:-170px}.header-sweep{width:690px;top:-85px}
}
@media(max-width:720px){
  .world{padding:13px 13px 35px}.cabinet{padding:5px;border-width:2px;border-radius:9px;box-shadow:inset 0 1px 0 #e7fffb,0 6px 0 #10334a,0 16px 25px #123d5766}
  .masthead{height:180px}.robot-wrap{width:26%;height:auto;left:0;top:auto;bottom:-6px}
  .wordmark{top:24px}
  .heartmark{display:none}.header-cloud{width:410px;left:-125px;bottom:-47px}
  .frame-body{grid-template-columns:1fr}.sidebar{padding:10px 9px 12px;border-right:0;border-bottom:2px solid #183b51;box-shadow:inset 0 1px 0 #96bbc5}
  .nav{gap:6px}.nav a{padding:7px 8px;min-height:33px;font-size:.8125rem;gap:5px}.lucky{display:none}
  .side-mascot{display:none}.content{padding:18px 14px 23px}
  .player{right:10px;bottom:0;width:254px;height:60px;top:auto;gap:6px;padding:4px 7px 14px;grid-template-columns:29px minmax(0,1fr) 29px 21px}
  .player-copy{padding:4px 5px}.player-cover{width:29px;height:29px}.player-play{width:28px;height:28px}
  .featured-record{grid-template-columns:160px minmax(0,1fr);gap:14px;padding:13px}
  .capsules{gap:9px}.home-aside{gap:12px}.ticker-track{font-size:.75rem}
}
@media(max-width:460px){
  .world{padding:9px 8px 30px}.cabinet{padding:4px}.masthead{height:166px}
  .robot-wrap{width:24%;height:auto;left:0;top:auto;bottom:-14px}
  .robot{clip-path:none}.wordmark{top:16px;width:68%}
  .header-cloud{width:300px;left:-155px;bottom:-42px}.header-sweep{width:500px;right:-60px;top:-58px}
  .nav a{font-size:.8125rem;padding:7px 7px}.nav .glyph{display:none}
  .content{padding:16px 10px 21px}.home-aside{grid-template-columns:1fr;gap:16px}
  .featured-record{grid-template-columns:109px minmax(0,1fr);padding:11px;gap:11px}
  .record-side h3{font-size:.9375rem}.featured-record .song-row{padding:6px 0}
  .featured-record .song-row .song-name{font-size:.8125rem}.play-small{width:20px;height:20px;padding:2px}
  .record-actions{gap:8px}.record-actions .button{font-size:.8125rem;padding:7px 8px}
  .record-actions .text-link{font-size:.8125rem}.section-title .text-link{font-size:.8125rem}
  .capsule strong{font-size:.8125rem}.capsule:last-child{grid-template-columns:1fr 1fr}
  .mystery-body{display:grid;grid-template-columns:116px 1fr;gap:8px 12px;align-items:start;padding:12px}
  .mystery-body img{height:auto;aspect-ratio:1;object-fit:cover;grid-row:1/4}
  .mystery-body h3{margin:1px 0 0;font-size:.9375rem}.mystery-body p{margin:0;font-size:.8125rem}
  .mystery-body .text-link{font-size:.8125rem}.discord-body{padding:18px 13px}
  .discord-body h3{margin-bottom:12px}.player{right:8px;width:246px}
}