:root, html[data-theme="light"]{
  --bg-deep:   #E9E0F8;
  --bg-mid:    #DCCEF5;
  --horizon:   #C4ABF0;
  --accent:    #6B3FC9;
  --accent-2:  #2E9E7E;
  --accent-3:  #D14FA6;
  --text:      #241C4A;
  --muted:     #5F5590;
  --paper:     #F5F0FF;
  --panel-alt: #EBE2FB;
  --edge:      #6B3FC9;
  --bevel:     #CDBBF0;
  --ink:       #9F8BD4;
  --bar-a:     #8A5CE8;
  --bar-b:     #5B34B8;
  --counter-bg:#1B1430;
  --hill-far:  #C7B6EF;
  --hill-mid:  #AB94E4;
  --hill-near: #8668CE;
  --moon-glow: rgba(255, 250, 235, .5);
  --star-alpha: 0;
}
html[data-theme="dark"]{
  --bg-deep:   #100A26;
  --bg-mid:    #1C1344;
  --horizon:   #382B70;
  --accent:    #C9A6FF;
  --accent-2:  #7BE0C3;
  --accent-3:  #F08AD0;
  --text:      #EFEBFA;
  --muted:     #A79FCF;
  --paper:     #1B1338;
  --panel-alt: #241A4A;
  --edge:      #C9A6FF;
  --bevel:     #4A3A80;
  --ink:       #060412;
  --bar-a:     #6B46C8;
  --bar-b:     #3C2486;
  --counter-bg:#000000;
  --hill-far:  #241A52;
  --hill-mid:  #191140;
  --hill-near: #0C081F;
  --moon-glow: rgba(255, 244, 214, .16);
  --star-alpha: 1;
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  background: var(--bg-deep);
  color: var(--text);
  font-family: "Comic Sans MS", "Comic Neue", cursive;
  font-size: 14px;
  text-transform: lowercase;
  line-height: 1.6;
  overflow-x: hidden;
  transition: background .5s ease, color .5s ease;
}
::selection{ background: var(--accent); color: var(--paper); }

a{ color: var(--accent); text-decoration: underline; }
a:hover{ color: var(--accent-3); }
:focus-visible{ outline: 2px dotted var(--accent); outline-offset: 2px; }

.blink{ animation: blink 1.1s steps(1) infinite; }
@keyframes blink{ 50%{ opacity: 0; } }

body.grab-scrolling, body.grab-scrolling *{
  cursor: grabbing !important;
  user-select: none !important;
}

.sky{
  position: fixed; inset: 0; z-index: -3;
  background:
    radial-gradient(1200px 600px at 70% -10%, var(--horizon) 0%, transparent 60%),
    linear-gradient(180deg, var(--bg-deep) 0%, var(--bg-mid) 55%, var(--bg-deep) 100%);
  transition: background .5s ease;
}
#stars, #motes{
  position: fixed; inset: 0; z-index: -2;
  width: 100%; height: 100%;
  pointer-events: none;
}
#stars{ opacity: var(--star-alpha); transition: opacity .6s ease; }
#motes{ z-index: 1; }

.moon{
  position: fixed;
  top: 9vh; right: 12vw;
  width: clamp(70px, 9vw, 120px); aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 34%, #FFFDF4 0%, #F6E8C4 45%, #E0CFA3 100%);
  box-shadow: 0 0 60px 18px var(--moon-glow), 0 0 140px 60px var(--moon-glow);
  z-index: -2;
  will-change: transform;
  transition: box-shadow .6s ease;
}

.hills{
  position: fixed; left:0; right:0; bottom:-2px;
  z-index:-1; pointer-events:none;
  will-change: transform;
}
.hills svg{ display:block; width:100%; height:auto; }
.hills path{ transition: fill .5s ease; }

.marquee{
  position: fixed; top:0; left:0; right:0; z-index: 7;
  background: var(--counter-bg);
  color: #7CFF9B;
  font-family: "Silkscreen", monospace; font-size: 11px;
  border-bottom: 2px solid var(--accent);
  overflow: hidden; white-space: nowrap;
  padding: 4px 0;
}
.marquee span{
  display:inline-block; padding-left: 100%;
  animation: crawl 22s linear infinite;
}
@keyframes crawl{ to{ transform: translateX(-100%); } }

.box{
  background: var(--paper);
  border: 2px solid var(--edge);
  box-shadow: 4px 4px 0 var(--ink);
  transition: background .5s ease, border-color .5s ease;
}
.box .bar{
  display:flex; align-items:center; justify-content: space-between;
  background: linear-gradient(90deg, var(--bar-a), var(--bar-b));
  color:#fff;
  font-family: "Silkscreen", monospace; font-size: 11px;
  padding: 4px 8px;
  border-bottom: 2px solid var(--edge);
  user-select:none;
}
.box .bar .dots{ letter-spacing: 2px; display:inline-flex; align-items:center; gap:4px; }
.winx{
  background:none; border:none; padding:0; margin:0;
  font: inherit; color: inherit; cursor: pointer;
  line-height: 1;
}
.winx:hover{ color: var(--panel-alt); }
.box .pad{ padding: 14px 16px; }

.btn3d{
  display:inline-block;
  background: var(--bevel);
  border: 3px outset var(--bevel);
  color: var(--text);
  font-family: inherit; font-size: 13px; font-weight: bold;
  padding: 4px 12px;
  text-decoration: none;
  cursor: pointer;
}
.btn3d:hover{ color: var(--accent); }
.btn3d:active{ border-style: inset; }

.menu .bar{
  background: var(--bevel);
  color: var(--text);
}
.menu .bar .winx:hover{ color: var(--accent-3); }

.menu{
  position: fixed; left: 14px; top: 36px;
  z-index: 5; width: 148px;
  display: flex; flex-direction: column;
  max-height: 80vh;
}
.menu .bar{ cursor: grab; flex: 0 0 auto; }
.menu.dragging .bar{ cursor: grabbing; }
.menu.dragging{ opacity: .85; }
.menu ul{ list-style:none; overflow-y:auto; flex: 1 1 auto; }
.menu-resize{
  position: absolute; right: 3px; bottom: 3px;
  width: 12px; height: 12px;
  cursor: nwse-resize;
  background: linear-gradient(135deg, transparent 50%, var(--edge) 50%);
}
.menu li a{
  display:block;
  padding: 5px 8px;
  font-size: 12px;
  text-decoration:none;
  color: var(--text);
  border-bottom: 1px dashed var(--bevel);
}
.menu li:last-child a{ border-bottom:none; }
.menu li a::before{ content:"> "; color: var(--accent-3); font-size: 11px; }
.menu li a:hover{ background: var(--panel-alt); }
.menu li a.active{ background: var(--accent); color:#fff; font-weight:bold; }
.menu li a.active::before{ content:">> "; color:#fff; }

.platform.full{ grid-column: 1 / -1; }

.player{
  position: fixed; left: 16px; bottom: 18px; z-index: 6;
  width: 196px;
}
.player .bar{ cursor: grab; }
.player.dragging{ opacity: .85; }
.player.dragging .bar{ cursor: grabbing; }
.player .pad{ padding: 10px 12px 12px; }
.player-row{ display:flex; gap:6px; margin-bottom:8px; }
.player-row .btn3d{ font-size: 10.5px; padding: 4px 6px; flex:1; text-align:center; }
.now-playing{
  font-family: "Silkscreen", monospace; font-size: 9.5px;
  color: var(--muted); white-space: nowrap; overflow:hidden; text-overflow: ellipsis;
}
.player-volume{ display:flex; align-items:center; gap:6px; margin-bottom:8px; min-width:0; }
.player-volume label{
  font-family: "Silkscreen", monospace; font-size: 9px;
  color: var(--muted); text-transform: uppercase;
  flex: 0 0 auto;
}
.player-volume input[type="range"]{
  -webkit-appearance: none;
  appearance: none;
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  height: 10px;
  background: var(--panel-alt);
  border: 2px solid var(--edge);
  cursor: pointer;
  box-sizing: border-box;
}
.player-volume input[type="range"]::-webkit-slider-runnable-track{
  height: 6px;
  background: var(--panel-alt);
}
.player-volume input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance: none;
  width: 12px; height: 12px;
  background: var(--bevel);
  border: 2px outset var(--bevel);
  margin-top: -4px;
  cursor: pointer;
}
.player-volume input[type="range"]:active::-webkit-slider-thumb{ border-style: inset; }
.player-volume input[type="range"]::-moz-range-track{
  height: 6px;
  background: var(--panel-alt);
  border: none;
}
.player-volume input[type="range"]::-moz-range-thumb{
  width: 10px; height: 10px;
  background: var(--bevel);
  border: 2px outset var(--bevel);
  border-radius: 0;
  cursor: pointer;
}
.player-volume input[type="range"]:active::-moz-range-thumb{ border-style: inset; }
.spotify-link{
  display:block; text-align:center; margin-top:8px;
  font-size: 10.5px; text-decoration: none;
}
@media (max-width: 760px){
  .player{ left: 10px; bottom: 10px; width: 172px; }
  .player-row{ flex-wrap: wrap; gap: 6px; }
  .player-row .btn3d{ flex: 1 1 auto; min-width: 60px; padding: 6px 4px; font-size: 10.5px; }
  .player-row #muteAll{ flex: 1 1 100%; }
  .now-playing{ font-size: 9px; }
  .spotify-link{ font-size: 10px; padding: 6px 8px; }
}

.theme-toggle{
  position: fixed; top: 36px; right: 16px; z-index: 6;
  font-size: 12px; line-height: 1;
  padding: 6px 10px;
}
.headpat{
  position: fixed; bottom: 18px; right: 16px; z-index: 6;
  display:flex; align-items:center; gap: 8px;
}
.headpat svg{ width: 18px; height: 18px; fill: var(--accent); }
.headpat.squish svg{ animation: squish .3s ease; }
@keyframes squish{ 40%{ transform: scaleY(.7) scaleX(1.15); } }
.headpat .toast{
  position:absolute; bottom: calc(100% + 8px); right: 0;
  font-family: "Comic Neue", "Comic Sans MS", cursive; font-size: 14px; font-weight:bold;
  white-space: nowrap; color: var(--accent-3);
  opacity: 0; transition: opacity .25s;
  pointer-events: none;
}
.headpat .toast.show{ opacity:1; }

.moon{ cursor: pointer; }
.moon-toast{
  position: fixed; z-index: 10;
  font-family: "Comic Neue", "Comic Sans MS", cursive; font-weight: bold; font-size: 13px;
  color: var(--accent-3);
  text-shadow: 1px 1px 0 var(--ink);
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, 0);
  transition: opacity .5s ease, transform 1.6s ease;
  white-space: nowrap;
}
.moon-toast.show{ opacity: 1; transform: translate(-50%, -30px); }

.word-egg-toast{
  position: fixed; left: 50%; top: 14%; z-index: 30;
  transform: translate(-50%, -8px);
  font-family: "Comic Neue", "Comic Sans MS", cursive; font-weight: bold; font-size: 16px;
  color: var(--accent-3);
  background: var(--paper);
  border: 2px solid var(--edge);
  box-shadow: 3px 3px 0 var(--ink);
  padding: 8px 16px;
  pointer-events: none;
  opacity: 0;
  transition: opacity .3s ease, transform .3s ease;
}
.word-egg-toast.show{ opacity: 1; transform: translate(-50%, 0); }

.skeleton-overlay{
  position: fixed; inset: 0; z-index: 60;
  pointer-events: none;
  overflow: hidden;
}
.skeleton-walker{
  position: absolute;
  top: 55%;
  left: -70vw;
  height: 46vh;
  min-height: 220px;
  max-height: 460px;
  transform: translateY(-50%);
  animation: skeletonWalk 8.5s linear forwards;
  filter: drop-shadow(2px 4px 3px rgba(0,0,0,.35));
}
@keyframes skeletonWalk{
  0%{ left: -70vw; }
  100%{ left: 105vw; }
}
.skeleton-walker img{
  height: 100%;
  width: auto;
  display: block;
}
@media (prefers-reduced-motion: reduce){
  .skeleton-walker{ animation: none; left: 50%; transform: translate(-50%, -50%); }
}

main{ position: relative; z-index: 2; }
section{
  max-width: 860px;
  margin: 0 auto;
  padding: clamp(70px, 10vh, 110px) 24px;
  position: relative;
}
.eyebrow{
  font-family: "Comic Neue", "Comic Sans MS", cursive;
  font-size: 15px; font-weight: bold;
  color: var(--accent-2);
}
h2{
  font-family: "Comic Sans MS", "Comic Neue", cursive;
  font-size: clamp(26px, 4vw, 38px);
  font-weight: 700; line-height: 1.15;
  margin: 4px 0 4px;
  color: var(--accent);
  text-shadow: 2px 2px 0 var(--ink);
}
.section-note{
  color: var(--muted); max-width: 60ch;
  font-family: "Comic Neue", "Comic Sans MS", cursive;
  font-size: 15px;
  margin-bottom: 26px;
}
.backlink{ margin-bottom: 18px; }
#s-main-tag{
  display:inline-block; margin: -2px 0 8px;
  background: var(--accent-3); color:#fff;
  padding: 3px 10px; font-family: "Silkscreen", monospace; font-size: 11px;
}

.hero{
  height: 200svh;
  padding-top: 0; padding-bottom: 0;
}
.hero-inner{
  position: sticky; top: 0;
  min-height: 100svh;
  display:flex; flex-direction:column; justify-content:center; align-items:flex-start;
  will-change: opacity, transform;
}
.hero .hi{
  font-family: "Comic Neue", "Comic Sans MS", cursive;
  font-size: 17px; font-weight:bold;
  color: var(--accent-2);
  display: inline-block;
  cursor: pointer;
  transform-origin: left center;
  transition: transform .18s ease, color .18s ease;
}
.hero .hi:hover, .hero .hi:focus-visible{
  transform: scale(1.14);
  color: var(--accent-3);
}
.hero .hi.pulse{ animation: hiPulse .32s ease; }
@keyframes hiPulse{ 40%{ transform: scale(1.22); } }
.hero h1{
  font-family: "Comic Sans MS", "Comic Neue", cursive;
  font-size: clamp(44px, 8.5vw, 96px);
  font-weight: 700; line-height: 1.02;
  margin: 10px 0 14px;
  color: var(--accent);
  text-shadow: 4px 4px 0 var(--ink);
}
.hero h1 .glow{
  color: var(--accent-3);
  display: inline-block;
  transition: opacity .22s ease, transform .22s ease;
}
.hero h1 .glow.swap-out{ opacity: 0; transform: translateY(6px); }
.hero h1 .glow.swap-in{ animation: nameIn .25s ease; }
@keyframes nameIn{ from{ opacity:0; transform: translateY(-6px); } to{ opacity:1; transform:none; } }
.hero p.tag{ max-width: 52ch; color: var(--muted); font-size: 14px; }
.hero .welcome{
  margin-top: 10px;
  font-family: "Silkscreen", monospace; font-size: 12px;
  color: var(--accent-3);
}
.hero .cue{
  margin-top: 42px;
  font-family: "Silkscreen", monospace; font-size: 11px;
  color: var(--muted);
}
.hero .cue span{ display:inline-block; animation: bob 2.2s ease-in-out infinite; }
@keyframes bob{ 50%{ transform: translateY(6px); } }

.platforms{
  display:grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 16px;
}
.platform{
  display:flex; align-items:center; gap: 12px;
  padding: 10px 12px;
  color: var(--text);
  text-decoration:none;
  background: var(--paper);
  border: 3px outset var(--bevel);
  transition: background .5s ease;
}
.platform:hover{ border-style: inset; background: var(--panel-alt); color: var(--text); }
.platform .badge{
  width: 36px; height: 36px; flex-shrink:0;
  display:grid; place-items:center; font-size: 16px; font-weight:bold;
  border: 2px solid var(--pc, var(--accent));
  background: var(--panel-alt);
  color: var(--pc, var(--accent));
  text-transform: uppercase;
}
.platform .badge img{ width: 22px; height: 22px; object-fit: contain; display: block; }
.platform b{ display:block; font-size:13px; color: var(--pc, var(--accent)); }
.platform small{ color: var(--muted); font-family: "Silkscreen", monospace; font-size: 9px; }

.sonas{ display:flex; flex-direction:column; gap: 20px; }
.sona{ display:block; cursor:pointer; text-decoration:none; color:inherit; }
.sona:hover{ box-shadow: 6px 6px 0 var(--accent-3); }
.sona .art{
  position:relative;
  width: 100%;
  aspect-ratio: 2.4 / 1;
  border-bottom: 2px solid var(--edge);
  background:
    repeating-linear-gradient(45deg, transparent 0 12px, color-mix(in srgb, var(--sc) 8%, transparent) 12px 24px),
    color-mix(in srgb, var(--sc) 14%, var(--paper));
  overflow: hidden;
}
.sona .ribbon{
  position:absolute; top: 10px; right: -34px;
  background: var(--accent-3); color:#fff;
  font-family: "Silkscreen", monospace; font-size: 9px;
  padding: 4px 40px;
  transform: rotate(35deg);
  box-shadow: 0 2px 4px rgba(0,0,0,.25);
}
.sona .art img{ width:100%; height:100%; object-fit:cover; display:block; }
.sona .art-overlay{
  position: absolute; inset: 0;
  width: 38%;
  display: flex; flex-direction: column; justify-content: center;
  padding: 10px 12px 10px 22px;
  pointer-events: none;
}
.sona .art-overlay h3{
  font-size: 26px;
  line-height: 1.05;
  color: var(--sc);
  text-shadow: 2px 2px 0 var(--ink), -1px -1px 0 var(--paper), 1px -1px 0 var(--paper), -1px 1px 0 var(--paper);
  margin-bottom: 6px;
}
.sona .art-tagline{
  font-family: "Comic Neue", "Comic Sans MS", cursive;
  font-weight: bold;
  font-size: 12.5px;
  color: var(--text);
  text-shadow: 1px 1px 0 var(--paper);
}
.sona .meta{
  padding: 10px 14px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}
.stat{
  width:auto; border-collapse: collapse;
  font-size: 12px;
}
.stat td{ border: 1px solid var(--bevel); padding: 3px 8px; }
.stat td:first-child{
  background: var(--panel-alt);
  font-weight: bold; width: 40%;
  font-family: "Silkscreen", monospace; font-size: 9.5px;
  color: var(--muted);
}
.sona .hint{
  font-family: "Comic Neue", "Comic Sans MS", cursive; font-size: 13px; font-weight: bold;
  color: var(--accent-3); display:block; flex: 0 0 auto;
}

.palette{ display:flex; gap:5px; margin-top:8px; }
.palette i{ width: 24px; height:24px; border:2px solid var(--edge); display:block; }

.projects{ display:grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; }
.project{ display:block; text-decoration:none; color:inherit; }
.project:hover{ box-shadow: 6px 6px 0 var(--accent-3); }
.project .pad{ display:flex; flex-direction:column; gap: 8px; min-height: 150px; }
.project .status{
  align-self:flex-start;
  font-family: "Silkscreen", monospace; font-size: 9px; text-transform: uppercase;
  padding: 2px 8px;
  border: 2px solid var(--muted); color: var(--muted);
}
.project .status.live{ color: var(--accent-2); border-color: var(--accent-2); }
.project .status.wip{ color: var(--accent-3); border-color: var(--accent-3); }
.project h3{ font-size: 20px; color: var(--accent); }
.project p{ color: var(--muted); font-size: 12.5px; flex:1; }
.project .go{ align-self: flex-start; }

.about-grid{ display:grid; grid-template-columns: 1.4fr 1fr; gap: 24px; align-items:start; }
.about-grid .pad p + p{ margin-top: 12px; }
.facts ul{ list-style:none; }
.facts li{
  display:flex; gap: 10px; font-size: 12.5px; color: var(--muted);
  padding: 6px 4px;
}
.facts li:nth-child(odd){ background: var(--panel-alt); }

.construction{
  height: 16px; margin: 0 auto; max-width: 860px;
  background: repeating-linear-gradient(-45deg, #F2C230 0 14px, #241C4A 14px 28px);
  border: 2px solid #241C4A;
}

.gallery{ display:grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; margin-top: 18px; }
.gallery a{ display:block; border: 3px outset var(--bevel); background: var(--panel-alt); }
.gallery a:hover{ border-style: inset; }
.gallery img{ width:100%; height:210px; object-fit:cover; display:block; }
.gallery .empty{ grid-column: 1 / -1; color: var(--muted); padding: 20px; text-align:center; }

.lightbox{
  position: fixed; inset:0; z-index:20;
  background: rgba(10, 6, 25, .85);
  display:none; place-items:center; padding: 24px; cursor: zoom-out;
}
.lightbox.open{ display:grid; }
.lightbox img{
  max-width: 92vw; max-height: 88vh;
  border: 3px solid var(--edge);
  box-shadow: 6px 6px 0 var(--ink);
  background: var(--paper);
}

footer{
  position:relative; z-index:2;
  text-align:center; padding: 36px 24px 110px;
  color: var(--muted); font-size: 11.5px;
}
.counter{
  display:inline-flex; align-items:center; gap:8px; margin-bottom: 14px;
  font-family: "Silkscreen", monospace; font-size: 10px; color: var(--muted);
}
.counter .digits{
  display:inline-flex; gap:2px;
  background: var(--counter-bg); padding: 3px 4px;
  border: 2px inset var(--bevel);
}
.counter .digits b{
  font-family: "Silkscreen", monospace; font-size: 13px;
  color: #7CFF9B; background:#000; padding: 1px 4px;
}
.bestviewed{ font-family: "Silkscreen", monospace; font-size: 9px; margin-top: 10px; }

.mobile-dock{
  display: block;
  position: fixed; left: 14px; top: 80px;
  width: 196px; z-index: 5;
}

.menu.collapsed{
  width: auto !important;
  height: auto !important;
  translate: 0 0 !important;
}
.menu.collapsed ul,
.menu.collapsed .menu-widgets,
.menu.collapsed .menu-resize{
  display: none !important;
}
.menu.collapsed .bar{ cursor: pointer; }

.menu.has-tucked{ min-width: 196px; }
.menu-widgets .player.tucked{
  position: static !important;
  left: auto !important; top: auto !important;
  right: auto !important; bottom: auto !important;
  width: 100% !important;
  box-sizing: border-box;
  border: none;
  box-shadow: none;
  margin-top: 8px;
}
.menu-widgets .player.tucked .bar{ cursor: grab; }
.menu-widgets .player.tucked .pad{ display: none; }
.menu-widgets .player.tucked.tab-open .pad{ display: block; }

.menu.drop-ready, .mobile-dock.drop-ready{
  box-shadow: 0 0 0 3px var(--accent-3), 4px 4px 0 var(--ink);
}

@keyframes tuckIn{
  from{ opacity: 0; transform: translateY(-12px) scale(.94); }
  to{ opacity: 1; transform: none; }
}
.player.tuck-anim{ animation: tuckIn .28s ease; }

@keyframes popOut{
  from{ transform: scale(.9); opacity: .55; }
  to{ transform: none; opacity: 1; }
}
.player.pop-anim{ animation: popOut .26s ease; }

@keyframes jukeboxWobble{
  0%, 100%{ transform: rotate(0deg) translateX(0); }
  20%{ transform: rotate(-4.5deg) translateX(-3px); }
  50%{ transform: rotate(4.5deg) translateX(3px); }
  80%{ transform: rotate(-2.5deg) translateX(-1.5px); }
}
.player.wobbling{
  animation: jukeboxWobble .22s ease-in-out infinite;
  will-change: transform;
}

@keyframes jukeboxFall{
  0%{ transform: translateY(0) rotate(0deg); }
  46%{ transform: translateY(calc(var(--fall-distance) * 1.04)) rotate(calc(var(--fall-rotate) * .8)); }
  60%{ transform: translateY(calc(var(--fall-distance) * 0.9)) rotate(var(--fall-rotate)); }
  75%{ transform: translateY(calc(var(--fall-distance) * 1.025)) rotate(var(--fall-rotate)); }
  88%{ transform: translateY(calc(var(--fall-distance) * 0.97)) rotate(var(--fall-rotate)); }
  100%{ transform: translateY(var(--fall-distance)) rotate(var(--fall-rotate)); }
}
.player.falling{
  animation: jukeboxFall 1.05s cubic-bezier(.4,0,.2,1) forwards;
  pointer-events: none;
  will-change: transform;
}

@keyframes jukeboxSettle{
  0%{ transform: rotate(var(--fall-rotate)) scaleY(.78) scaleX(1.14); }
  40%{ transform: rotate(var(--fall-rotate)) scaleY(1.1) scaleX(.92); }
  65%{ transform: rotate(var(--fall-rotate)) scaleY(.95) scaleX(1.04); }
  85%{ transform: rotate(var(--fall-rotate)) scaleY(1.02) scaleX(.99); }
  100%{ transform: rotate(var(--fall-rotate)) scaleY(1) scaleX(1); }
}
.player.just-broke{ animation: jukeboxSettle .36s ease; }
.player.broken{
  filter: grayscale(1) brightness(.78);
  opacity: .82;
  pointer-events: none !important;
  cursor: not-allowed;
}

.player.collapsed{
  width: auto !important;
}
.player.collapsed .pad{ display: none; }
.player.collapsed.tab-open .pad{ display: block; }

@media (max-width: 900px){
  .menu{
    left: 10px !important; top: 36px !important; right: auto !important; bottom: auto !important;
    translate: none !important;
    width: auto !important; height: auto !important; max-height: 70vh;
    overflow-y: auto;
  }
  .mobile-dock{ display: block; }
  .menu .bar{ cursor: pointer; }
  .menu .bar .dots, .player .bar .dots{ display: none !important; }
  .menu ul, .menu .menu-widgets{ display: none; width: 176px; }
  .menu.mobile-open ul, .menu.mobile-open .menu-widgets{ display: block; }
  .menu-resize{ display: none; }


  .menu-widgets{
    margin-top: 8px;
    padding-bottom: 10px;
    display: none;
  }
  .menu.mobile-open .menu-widgets{ display: flex; flex-direction: column; }

  .menu-widgets .player{
    position: static !important;
    left: auto !important; top: auto !important; right: auto !important; bottom: auto !important;
    width: 100% !important;
    box-sizing: border-box;
    order: 1;
    margin-top: 8px;
    box-shadow: 4px 4px 0 var(--ink);
  }
  .menu-widgets .player .bar .dots{ display: none; }
  .menu-widgets .player .pad{ display: none; }
  .menu-widgets .player.tab-open .pad{ display: block; }

  .menu-widgets .theme-toggle{
    position: static !important;
    align-self: stretch;
    display: block;
    box-sizing: border-box;
    text-align: center;
    margin: 8px 8px 0 8px !important;
    order: 2;
  }
}
@media (max-width: 760px){
  .about-grid{ grid-template-columns: 1fr; }
  .moon{ right: 6vw; }
  .theme-toggle{ top: 32px; }
}
@media (prefers-reduced-motion: reduce){
  .hero{ height:auto; min-height:100svh; padding-bottom: 12vh; }
  .hero-inner{ position: static; }
  .hero .cue span{ animation:none; }
  .marquee span{ animation:none; padding-left: 8px; }
  .blink{ animation:none; }
  html{ scroll-behavior:auto; }
}

@media (max-width: 620px){
  .sona .art-overlay{ width: 36%; padding-left: 14px; }
  .sona .art-overlay h3{ font-size: 19px; }
  .sona-main h3{ font-size: 24px; }
  .sona .art-tagline{ font-size: 11px; }
}
.sona-main{
  border-color: var(--accent-3);
  box-shadow: 5px 5px 0 var(--accent-3);
}
.sona-main:hover{ box-shadow: 8px 8px 0 var(--accent-3); }
.sona-main .bar{ background: linear-gradient(90deg, var(--accent-3), var(--accent)); }
.sona-main h3{ font-size: 34px; }
.sona-main .art-tagline{ font-size: 14px; }
.mainflag{
  display:inline-block; margin-left: 8px; vertical-align: middle;
  font-family: "Silkscreen", monospace; font-size: 9px;
  background: var(--accent-3); color: #fff;
  padding: 3px 7px;
}

@media (min-width: 901px) {
  #mobileDock {
    display: none !important;
  }
}
/* Mobile adjustments ONLY (screens 900px and smaller) */
@media (max-width: 900px) {
  /* Move menu and mobile dock to the bottom left */
  .menu,
  .mobile-dock {
    position: fixed !important;
    top: auto !important;
    bottom: 16px !important;
    left: 16px !important;
    right: auto !important;
  }

  /* Make the expanded extras widgets menu open upwards from the bottom */
  .mobile-dock .menu-widgets {
    top: auto !important;
    bottom: 100% !important;
    margin-top: 0 !important;
    margin-bottom: 8px !important;
  }
}