:root { color-scheme: dark; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: #071225; color: #eef1f7; }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { width: 100%; min-height: 100%; margin: 0; overflow: hidden; touch-action: manipulation; }
body { min-height: 100dvh; background: radial-gradient(circle at 55% 35%, #172950 0, #0b1830 35%, #050b16 100%); }
body::after { content: ""; position: fixed; inset: 0; pointer-events: none; opacity: .23; background-image: radial-gradient(#9fb5df 0.6px, transparent 0.8px); background-size: 37px 37px; }
#visual { position: fixed; inset: 0; width: 100%; height: 100%; }
main { position: relative; z-index: 1; display: flex; min-height: 100dvh; flex-direction: column; justify-content: space-between; align-items: center; padding: max(28px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) max(22px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left)); }
header { text-align: center; letter-spacing: .04em; }
h1 { margin: 0; color: #f4e8a9; font-size: 15px; font-weight: 500; letter-spacing: .25em; text-transform: lowercase; opacity: .88; }
#status { min-height: 18px; margin: 9px 0 0; font-size: 12px; color: #aab7cf; }
.controls { width: min(100%, 440px); padding-bottom: 2px; }
.mood-hint { margin: 0 0 4px; color: #8593aa; font-size: 9px; letter-spacing: .12em; text-align: center; text-transform: uppercase; }
.moods { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px 4px; width: 100%; max-height: min(42dvh, 310px); margin-bottom: 14px; padding: 3px 4px 12px 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-color: #7183a855 transparent; scrollbar-width: thin; mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - 18px), transparent 100%); }
.moods::-webkit-scrollbar { width: 3px; }
.moods::-webkit-scrollbar-thumb { border-radius: 3px; background: #7183a855; }
button { min-width: 44px; min-height: 44px; border: 0; color: #bdc7d8; background: transparent; font: inherit; cursor: pointer; }
.moods button { width: 100%; display: grid; place-items: center; gap: 3px; padding: 1px 4px; font-size: 10px; }
.moods i { width: 12px; height: 12px; border: 1px solid #8291aa; border-radius: 50%; background: #17233a; transition: .25s ease; }
.moods button.selected { color: #f4e8a9; }
.moods button.selected i { border-color: #f4e8a9; background: #f4e8a9; box-shadow: 0 0 18px #f4e8a988; transform: scale(1.2); }
.transport { display: grid; grid-template-columns: 1fr 88px 1fr; align-items: center; }
#play { width: 88px; height: 88px; border: 1px solid #d8e1ef66; border-radius: 50%; background: #dae6f112; color: #f4e8a9; box-shadow: 0 8px 38px #0008, inset 0 0 26px #9eb8e412; font-size: 24px; backdrop-filter: blur(8px); transition: transform .15s, background .3s, box-shadow .3s; }
#play:active { transform: scale(.95); }
#play.playing { background: #8098ca24; box-shadow: 0 0 42px #7796d848, inset 0 0 24px #b4c9ef18; }
#play.playing span { font-size: 16px; opacity: .78; }
#mutate { justify-self: start; display: flex; align-items: center; gap: 5px; color: #9ba9bf; font-size: 11px; }
#mutate span { font-size: 20px; }
#mutate.queued { color: #f4e8a9; text-shadow: 0 0 12px #f4e8a9; }
.spacer { width: 44px; }
#toast { position: fixed; z-index: 4; left: 50%; bottom: calc(130px + env(safe-area-inset-bottom)); width: max-content; max-width: calc(100% - 40px); padding: 10px 14px; border: 1px solid #aab7cf33; border-radius: 20px; background: #071225dc; color: #c8d0df; font-size: 11px; opacity: 0; transform: translate(-50%, 8px); pointer-events: none; transition: .35s; }
#toast.show { opacity: 1; transform: translate(-50%, 0); }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; } }
@media (max-height: 620px) {
  main { padding-top: max(16px, env(safe-area-inset-top)); padding-bottom: max(12px, env(safe-area-inset-bottom)); }
  .moods { max-height: 34dvh; gap: 1px 4px; margin-bottom: 8px; }
  .moods button { min-height: 38px; }
  #play { width: 72px; height: 72px; }
  .transport { grid-template-columns: 1fr 72px 1fr; }
}

.app-footer { position: fixed; z-index: 2; left: 0; right: 0; bottom: max(6px, env(safe-area-inset-bottom)); text-align: center; font-size: 10px; letter-spacing: .04em; color: #6f7d96; pointer-events: none; }
.app-footer a, .app-footer .footer-donate { pointer-events: auto; color: #8291aa; text-decoration: none; margin: 0 3px; }
.app-footer a:hover, .app-footer .footer-donate:hover { color: #aab7cf; }

body.legal-page { overflow: auto; height: auto; }
body.legal-page main { display: block; min-height: auto; max-width: 560px; margin: 0 auto; padding: max(28px, env(safe-area-inset-top)) 20px 70px; text-align: left; }
body.legal-page header { text-align: left; margin-bottom: 6px; }
body.legal-page header a { color: #f4e8a9; text-decoration: none; font-size: 12px; letter-spacing: .1em; }
body.legal-page h1 { font-size: 19px; margin: 18px 0 6px; color: #f4e8a9; letter-spacing: .04em; }
body.legal-page .lead { color: #aab7cf; font-size: 12px; margin: 0 0 22px; line-height: 1.6; }
body.legal-page h2 { font-size: 14px; color: #eef1f7; margin: 22px 0 6px; }
body.legal-page p { font-size: 12.5px; line-height: 1.7; color: #c8d0df; margin: 0 0 4px; }
body.legal-page a { color: #9fb5df; }
body.legal-page .app-footer { position: static; margin-top: 30px; text-align: left; font-size: 10px; }