/* ============================================
   TOKENS
   ============================================ */
:root {
  --bg: #f0ede6;
  --fg: #0e0d0b;
  --accent: oklch(45% 0.18 28);
  --accent-rgb: 150, 70, 35;
  --muted: #b0ada8;
  --font: 'Barlow', 'Helvetica Neue', Helvetica, sans-serif;
  --hat-stroke: #0e0d0b;
  --hat-w: 1.5px;
  --trans: 400ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* ============================================
   RESET + BASE
   ============================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 16px; scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font);
  font-weight: 300;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }

/* Touch: default cursor */
@media (pointer: coarse) {
  body { cursor: auto; }
}

/* ============================================
   PAGE TRANSITION OVERLAY
   ============================================ */
#transition-overlay {
  position: fixed;
  inset: 0;
  z-index: 9000;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  opacity: 0;
}

#transition-overlay.entering {
  pointer-events: all;
  opacity: 1;
  transition: opacity 0.15s ease;
}

#transition-overlay.exiting {
  pointer-events: all;
  opacity: 1;
  transition: none;
}

#transition-overlay.fading-out {
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s ease 0.2s;
}

#transition-hat {
  width: 220px;
  height: 220px;
  object-fit: contain;
  opacity: 0;
  transform: scale(0.6);
}

#transition-overlay.entering #transition-hat {
  animation: hat-scale-in 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

#transition-overlay.exiting #transition-hat {
  animation: hat-scale-out 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes hat-scale-in {
  from { opacity: 0; transform: scale(0.5) rotate(-8deg); }
  to   { opacity: 0.85; transform: scale(1) rotate(0deg); }
}

@keyframes hat-scale-out {
  from { opacity: 0.85; transform: scale(1) rotate(0deg); }
  to   { opacity: 0; transform: scale(1.3) rotate(6deg); }
}

/* ============================================
   NAV
   ============================================ */
nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 48px;
  background: var(--bg);
  border-bottom: 1px solid rgba(14, 13, 11, 0.08);
}

.nav-logo {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  opacity: 0.9;
}

.nav-links {
  display: flex;
  gap: 40px;
  list-style: none;
}

.nav-links a {
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.6;
  transition: opacity 0.25s ease;
  position: relative;
}

.nav-links a::after {
  content: '';
  position: absolute;
  bottom: -3px; left: 0;
  width: 0; height: 1px;
  background: var(--accent);
  transition: width 0.3s ease;
}

.nav-links a:hover { opacity: 1; }
.nav-links a:hover::after { width: 100%; }
.nav-links a.active { opacity: 1; }
.nav-links a.active::after { width: 100%; }

/* ============================================
   PAGES — shared
   ============================================ */
.page {
  min-height: 100vh;
  display: none;
  flex-direction: column;
  padding-top: 100px;
}

.page.active {
  display: flex;
}

/* ============================================
   PARALLAX HATS
   ============================================ */
.parallax-hats {
  display: none;
}

.parallax-hat {
  position: absolute;
  will-change: transform;
}

/* ============================================
   PAGE: HOME
   ============================================ */
#page-home {
  align-items: center;
  justify-content: center;
  text-align: center;
  position: relative;
  min-height: 100vh;
  padding: 0;
}

.home-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
}

.home-name {
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.home-name img {
  width: clamp(280px, 60vw, 860px);
  height: auto;
  display: block;
  object-fit: contain;
}

.home-tagline {
  font-size: clamp(0.85rem, 1.8vw, 1.1rem);
  font-weight: 300;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  opacity: 0.45;
}

.home-hat-wrap {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 0;
  opacity: 0.12;
  pointer-events: none;
}

#home-breathing-hat {
  animation: hat-breathe 1s cubic-bezier(0.45, 0, 0.55, 1) infinite alternate;
}

@keyframes hat-breathe {
  from { transform: scale(0.97); }
  to   { transform: scale(1.04); }
}

/* ============================================
   PAGE: EVENTS
   ============================================ */
#page-events {
  padding: 120px 0 80px;
  max-width: none;
}

.page-title {
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  opacity: 0.35;
  padding: 0 48px 60px;
}

.events-list {
  width: 100%;
  list-style: none;
  border-top: 1px solid rgba(14, 13, 11, 0.1);
}

.event-row {
  position: relative;
  border-bottom: 1px solid rgba(14, 13, 11, 0.08);
  overflow: hidden;
}

.event-row-inner {
  display: grid;
  grid-template-columns: 140px 1fr 1fr auto;
  align-items: center;
  gap: 24px;
  padding: 28px 48px;
  transition: background 0.3s ease;
}

.event-hat-slide {
  position: absolute;
  left: -50px;
  top: 50%;
  transform: translateY(-50%);
  transition: left 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  pointer-events: none;
  z-index: 0;
  opacity: 0.5;
}

.event-row:hover .event-hat-slide {
  left: 16px;
}

.event-row:hover .event-row-inner {
  background: rgba(14, 13, 11, 0.03);
}

.event-row:hover .event-date,
.event-row:hover .event-city,
.event-row:hover .event-venue {
  font-weight: 500;
}

.event-date {
  font-size: 13px;
  font-weight: 300;
  letter-spacing: 0.05em;
  opacity: 0.5;
  transition: font-weight 0.4s ease, opacity 0.3s ease;
  position: relative; z-index: 1;
}

.event-row:hover .event-date { opacity: 0.7; }

.event-city {
  font-size: 18px;
  font-weight: 300;
  transition: font-weight 0.4s ease;
  position: relative; z-index: 1;
}

.event-venue {
  font-size: 14px;
  font-weight: 300;
  opacity: 0.45;
  transition: font-weight 0.4s ease, opacity 0.3s ease;
  position: relative; z-index: 1;
}

.event-row:hover .event-venue { opacity: 0.65; }

.event-link {
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  border: 1px solid var(--accent);
  padding: 8px 18px;
  opacity: 0.8;
  transition: opacity 0.25s ease, background 0.25s ease, color 0.25s ease;
  position: relative; z-index: 1;
  white-space: nowrap;
}

.event-link:hover {
  opacity: 1;
  background: var(--accent);
  color: var(--bg);
}

/* Past events — year containers */
.past-events {
  padding: 0 48px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.year-container {
  border: 1px solid rgba(14, 13, 11, 0.12);
  background: rgba(14, 13, 11, 0.015);
  overflow: hidden;
  transition: border-color 0.3s ease, background 0.3s ease;
}

.year-container:hover {
  border-color: rgba(14, 13, 11, 0.25);
}

.year-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 24px 28px;
  user-select: none;
  transition: background 0.2s ease;
}

.year-header:hover {
  background: rgba(14, 13, 11, 0.03);
}

.year-label {
  font-size: 32px;
  font-weight: 500;
  letter-spacing: -0.01em;
}

.year-meta {
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity: 0.5;
  display: flex;
  gap: 16px;
  align-items: baseline;
}

.year-toggle {
  font-size: 18px;
  font-weight: 300;
  opacity: 0.5;
  transition: transform 0.3s ease;
}

.year-container.open .year-toggle {
  transform: rotate(45deg);
}

.year-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.year-container.open .year-body {
  max-height: 2000px;
}

.year-events {
  list-style: none;
  border-top: 1px solid rgba(14, 13, 11, 0.08);
}

.past-event-row {
  display: grid;
  grid-template-columns: 120px 1fr 1fr;
  gap: 24px;
  padding: 18px 28px;
  border-bottom: 1px solid rgba(14, 13, 11, 0.06);
  align-items: center;
}

.past-event-row:last-child {
  border-bottom: none;
}

.past-event-date {
  font-size: 12px;
  font-weight: 300;
  opacity: 0.5;
  letter-spacing: 0.05em;
}

.past-event-city {
  font-size: 15px;
  font-weight: 400;
}

.past-event-venue {
  font-size: 13px;
  font-weight: 300;
  opacity: 0.5;
}

@media (max-width: 768px) {
  .past-events { padding: 0 24px; }
  .year-header { padding: 18px 20px; }
  .year-label { font-size: 24px; }
  .past-event-row {
    grid-template-columns: 1fr;
    gap: 4px;
    padding: 14px 20px;
  }
}

/* ============================================
   PAGE: MUSIC
   ============================================ */
#page-music {
  padding: 120px 48px 80px;
}

.music-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 2px;
  margin-top: 24px;
}

.mix-card {
  position: relative;
  aspect-ratio: 1;
  background: rgba(14, 13, 11, 0.03);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  overflow: hidden;
  border: 1px solid rgba(14, 13, 11, 0.08);
  transition: background 0.3s ease, border-color 0.3s ease;
}

.mix-card:hover {
  background: rgba(14, 13, 11, 0.06);
  border-color: rgba(14, 13, 11, 0.15);
}

.mix-play-btn {
  position: relative;
  width: 80px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mix-play-btn img.hat-icon {
  transition: opacity 0.3s ease;
  position: absolute;
  width: 68px; height: 68px;
  object-fit: contain;
}

.mix-play-btn svg.play-triangle {
  opacity: 0;
  transition: opacity 0.3s ease;
  position: absolute;
}

.mix-card.playing .mix-play-btn img.hat-icon { opacity: 0; }
.mix-card.playing .mix-play-btn svg.play-triangle { opacity: 1; }

.mix-card.active .mix-play-btn img.hat-icon { opacity: 0; }
.mix-card.active .mix-play-btn svg.play-triangle { opacity: 1; }

/* Waveform visualizer */
.waveform-container {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 60px;
  display: flex;
  align-items: flex-end;
  gap: 2px;
  padding: 0 16px;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.mix-card.active .waveform-container { opacity: 1; }

.waveform-bar {
  flex: 1;
  background: var(--accent);
  border-radius: 1px 1px 0 0;
  min-height: 2px;
  transition: height 0.05s ease;
  opacity: 0.7;
}

/* Hat brim visualizer overlay */
.hat-brim-viz {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -60%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.mix-card.active .hat-brim-viz { opacity: 1; }

.mix-title {
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-align: center;
  z-index: 1;
}

.mix-meta {
  font-size: 11px;
  font-weight: 300;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  opacity: 0.35;
  z-index: 1;
}

/* ============================================
   PAGE: MERCH
   ============================================ */
#page-merch {
  padding: 120px 48px 80px;
}

.merch-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 32px;
  margin-top: 24px;
}

.merch-img-wrap {
  position: relative;
  aspect-ratio: 3/4;
  margin-bottom: 16px;
  overflow: hidden;
  background: rgba(14, 13, 11, 0.03);
}

.merch-line-drawing {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.4s ease;
}

.merch-photo-placeholder {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.4s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(14, 13, 11, 0.06);
}

.merch-photo-placeholder span {
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity: 0.3;
  font-family: monospace;
  text-align: center;
}

.merch-item:hover .merch-line-drawing { opacity: 0; }
.merch-item:hover .merch-photo-placeholder { opacity: 1; }

.merch-name {
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.06em;
  margin-bottom: 6px;
}

.merch-price {
  font-size: 13px;
  font-weight: 300;
  opacity: 0.45;
  letter-spacing: 0.05em;
}

/* ============================================
   PAGE: BOOKINGS
   ============================================ */
#page-bookings {
  padding: 120px 48px 80px;
  align-items: flex-start;
  justify-content: flex-start;
}

.bookings-inner {
  width: 100%;
  max-width: 560px;
}

.bookings-form {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 24px;
}

.form-field {
  position: relative;
  margin-bottom: 2px;
}

.form-field-hat {
  position: absolute;
  top: 50%;
  right: 16px;
  transform: translateY(-50%);
  pointer-events: none;
  opacity: 0.25;
  transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.form-field:focus-within .form-field-hat {
  opacity: 0.8;
}

.form-field input,
.form-field textarea,
.form-field select {
  width: 100%;
  background: rgba(14, 13, 11, 0.03);
  border: 1px solid rgba(14, 13, 11, 0.15);
  color: var(--fg);
  font-family: var(--font);
  font-size: 15px;
  font-weight: 300;
  padding: 20px 60px 20px 20px;
  outline: none;
  transition: border-color 0.3s ease, background 0.3s ease;
  -webkit-appearance: none;
  border-radius: 0;
  letter-spacing: 0.03em;
}

.form-field select { cursor: auto; }

.form-field input::placeholder,
.form-field textarea::placeholder {
  opacity: 0.3;
  font-weight: 300;
  letter-spacing: 0.05em;
}

.form-field input:focus,
.form-field textarea:focus,
.form-field select:focus {
  border-color: rgba(14, 13, 11, 0.4);
  background: rgba(14, 13, 11, 0.06);
}

.form-field textarea {
  resize: none;
  min-height: 120px;
}

.form-submit {
  margin-top: 2px;
  background: transparent;
  border: 1px solid var(--accent);
  color: var(--accent);
  font-family: var(--font);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  padding: 22px 40px;
  cursor: pointer;
  transition: background 0.3s ease, color 0.3s ease;
  position: relative;
  overflow: hidden;
  width: 100%;
}

.form-submit:hover {
  background: var(--accent);
  color: var(--bg);
}

.form-submit.submitted {
  background: var(--accent);
  color: var(--bg);
  pointer-events: none;
}

/* Submit hat animation */
@keyframes hat-tip {
  0%   { transform: translateY(-50%) rotate(0deg); }
  30%  { transform: translateY(-80%) rotate(-15deg); }
  60%  { transform: translateY(-50%) rotate(8deg); }
  100% { transform: translateY(-50%) rotate(0deg); }
}

.form-submitted .form-field-hat {
  opacity: 0.6;
  animation: hat-tip 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* ============================================
   TOUCH RIPPLE
   ============================================ */
.touch-ripple {
  position: fixed;
  pointer-events: none;
  z-index: 9998;
  transform: translate(-50%, -50%) scale(0);
  opacity: 0.6;
  animation: ripple-out 0.6s ease-out forwards;
}

@keyframes ripple-out {
  0%   { transform: translate(-50%, -50%) scale(0); opacity: 0.6; }
  100% { transform: translate(-50%, -50%) scale(3); opacity: 0; }
}

/* ============================================
   REDUCED MOTION
   ============================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .parallax-hats { display: none; }
  #home-breathing-hat { animation: none; }
}

/* ============================================
   MOBILE
   ============================================ */
@media (max-width: 768px) {
  nav { padding: 20px 24px; }
  .nav-links { gap: 20px; }

  .event-row-inner {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 20px 24px;
  }
  .event-hat-slide { display: none; }

  #page-events, #page-music, #page-merch, #page-bookings {
    padding-left: 24px;
    padding-right: 24px;
  }
  .page-title { padding: 0 24px 40px; }
}

/* ============================================
   LOADER
   ============================================ */
#loader {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.5s ease;
}

#loader.hidden {
  opacity: 0;
  pointer-events: none;
}

#loader-hat {
  width: 140px;
  height: 140px;
  object-fit: contain;
  animation: loader-hat-anim 1.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes loader-hat-anim {
  0%   { opacity: 0; transform: scale(0.7) translateY(12px); }
  35%  { opacity: 1; transform: scale(1) translateY(0); }
  70%  { opacity: 1; transform: scale(1) translateY(0); }
  100% { opacity: 0; transform: scale(0.85) translateY(-10px); }
}

/* Hat img utility */
.hat-img {
  display: block;
}

/* Nav logo */
.nav-logo img {
  display: block;
  height: 80px;
  width: auto;
  object-fit: contain;
  margin: -24px 0;
}

/* ============================================
   TWEAKS — Mood / Density / Energy
   ============================================ */

/* Mood: Day (default) is set via :root above. Dusk = warm cream + amber. Night = inky. */
html[data-mood="dusk"] {
  --bg: #ebe1cf;
  --fg: #2a1f12;
  --accent: oklch(58% 0.14 65);
  --accent-rgb: 188, 132, 60;
  --muted: #b8a888;
}
html[data-mood="night"] {
  --bg: #14110d;
  --fg: #ede6d6;
  --accent: oklch(72% 0.16 50);
  --accent-rgb: 224, 158, 88;
  --muted: #5a554c;
}
html[data-mood="night"] .nav-logo img,
html[data-mood="night"] #home-breathing-hat,
html[data-mood="night"] .loader-hat,
html[data-mood="night"] #transition-hat,
html[data-mood="night"] .form-field-hat,
html[data-mood="night"] .mix-play-btn img.hat-icon,
html[data-mood="night"] .parallax-hats img,
html[data-mood="night"] img[src*="logo"] {
  filter: invert(1) hue-rotate(180deg) brightness(1.05);
}
html[data-mood="night"] nav { border-bottom-color: rgba(237, 230, 214, 0.08); }
html[data-mood="night"] .event-row,
html[data-mood="night"] .past-event-row { border-bottom-color: rgba(237, 230, 214, 0.06); }
html[data-mood="dusk"] nav { border-bottom-color: rgba(42, 31, 18, 0.1); }

/* Density — global scale. Compressed = bold tour-poster cram, Editorial = newspaper-tight, Spacious = current. */
html { --d: 1; }
html[data-density="editorial"] { --d: 0.82; }
html[data-density="compressed"] { --d: 1.18; }
html[data-density="editorial"] nav,
html[data-density="compressed"] nav { padding: calc(18px * var(--d)) calc(48px * var(--d)); }
html[data-density="editorial"] .event-row,
html[data-density="compressed"] .event-row { padding: calc(28px * var(--d)) calc(48px * var(--d)); gap: calc(24px * var(--d)); }
html[data-density="editorial"] .past-event-row,
html[data-density="compressed"] .past-event-row { padding: calc(18px * var(--d)) calc(28px * var(--d)); }
html[data-density="editorial"] .home-name,
html[data-density="compressed"] .home-name { font-size: calc(clamp(5rem, 17vw, 16rem) * var(--d)); letter-spacing: calc(-0.04em * var(--d)); }
html[data-density="editorial"] .section-title,
html[data-density="compressed"] .section-title { font-size: calc(2rem * var(--d)); }
html[data-density="editorial"] .page-content,
html[data-density="compressed"] .page-content { padding: calc(120px * var(--d)) calc(48px * var(--d)) calc(80px * var(--d)); }
html[data-density="compressed"] {
  letter-spacing: -0.005em;
}
html[data-density="compressed"] body { font-weight: 400; }
html[data-density="editorial"] body { font-weight: 300; }

/* Energy — Still kills all motion. Charged amplifies. */
html[data-energy="still"] *,
html[data-energy="still"] *::before,
html[data-energy="still"] *::after {
  animation-duration: 0s !important;
  animation-delay: 0s !important;
  transition-duration: 0s !important;
}
html[data-energy="still"] #home-breathing-hat { animation: none !important; transform: none !important; }
html[data-energy="still"] .parallax-hats { display: none !important; }

html[data-energy="charged"] #home-breathing-hat {
  animation: hat-breathe 0.6s cubic-bezier(0.45, 0, 0.55, 1) infinite alternate,
             hat-rotate-charged 12s linear infinite;
}
@keyframes hat-rotate-charged {
  0%   { transform: scale(var(--bs, 1)) rotate(-3deg); }
  50%  { transform: scale(var(--bs, 1)) rotate(3deg); }
  100% { transform: scale(var(--bs, 1)) rotate(-3deg); }
}
html[data-energy="charged"] .home-name {
  animation: name-drift 7s ease-in-out infinite alternate;
}
@keyframes name-drift {
  from { letter-spacing: -0.04em; }
  to   { letter-spacing: -0.02em; }
}
html[data-energy="charged"] .event-row:hover { transform: translateX(8px); }
html[data-energy="charged"] .event-row { transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.3s ease, border-color 0.3s ease; }

/* ============================================
   FLOATING MOOD PICKER — always visible
   ============================================ */
#mood-picker {
  position: fixed;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 95;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px 8px 16px;
  background: rgba(240, 237, 230, 0.72);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  backdrop-filter: blur(20px) saturate(140%);
  border: 1px solid rgba(14, 13, 11, 0.08);
  border-radius: 999px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.06), 0 1px 0 rgba(255, 255, 255, 0.6) inset;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg);
  opacity: 0;
  animation: mood-picker-fade-in 0.6s ease 1.6s forwards;
}
@keyframes mood-picker-fade-in {
  to { opacity: 1; }
}
#mood-picker .mp-label {
  font-weight: 500;
  opacity: 0.55;
  font-size: 10px;
}
#mood-picker .mp-options {
  display: flex;
  gap: 2px;
  padding: 2px;
  background: rgba(14, 13, 11, 0.05);
  border-radius: 999px;
}
#mood-picker .mp-options button {
  appearance: none;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 7px 14px;
  border-radius: 999px;
  cursor: pointer;
  opacity: 0.55;
  transition: opacity 0.2s ease, background 0.2s ease, color 0.2s ease;
}
#mood-picker .mp-options button:hover {
  opacity: 0.9;
}
#mood-picker .mp-options button[aria-pressed="true"] {
  background: var(--fg);
  color: var(--bg);
  opacity: 1;
}

/* In Night mood, soften the pill */
html[data-mood="night"] #mood-picker {
  background: rgba(20, 17, 13, 0.7);
  border-color: rgba(237, 230, 214, 0.1);
}
html[data-mood="night"] #mood-picker .mp-options {
  background: rgba(237, 230, 214, 0.08);
}
html[data-mood="dusk"] #mood-picker {
  background: rgba(235, 225, 207, 0.72);
}

@media (max-width: 640px) {
  #mood-picker { bottom: 16px; padding: 6px 8px 6px 12px; gap: 6px; }
  #mood-picker .mp-options button { padding: 6px 9px; font-size: 9.5px; }
  #mood-picker .mp-label { display: none; }
}

/* Tweaks panel chrome */
#tweaks-panel {
  position: fixed; right: 16px; bottom: 16px; z-index: 2147483646;
  width: 260px; display: none;
  background: rgba(250, 249, 247, 0.85);
  color: #29261b;
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  backdrop-filter: blur(24px) saturate(160%);
  border: 0.5px solid rgba(255, 255, 255, 0.6);
  border-radius: 14px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset, 0 12px 40px rgba(0, 0, 0, 0.18);
  font-family: ui-sans-serif, system-ui, -apple-system, sans-serif;
  font-size: 11.5px; line-height: 1.4;
  overflow: hidden;
  cursor: auto;
}
#tweaks-panel.open { display: flex; flex-direction: column; }
#tweaks-panel .twk-hd { display: flex; align-items: center; justify-content: space-between; padding: 11px 8px 11px 14px; }
#tweaks-panel .twk-hd b { font-size: 12px; font-weight: 600; letter-spacing: 0.01em; }
#tweaks-panel .twk-x { appearance: none; border: 0; background: transparent; color: rgba(41, 38, 27, 0.55); width: 24px; height: 24px; border-radius: 6px; cursor: pointer; font-size: 13px; }
#tweaks-panel .twk-x:hover { background: rgba(0, 0, 0, 0.06); color: #29261b; }
#tweaks-panel .twk-body { padding: 4px 14px 14px; display: flex; flex-direction: column; gap: 14px; }
#tweaks-panel .twk-row { display: flex; flex-direction: column; gap: 8px; }
#tweaks-panel .twk-lbl { display: flex; justify-content: space-between; align-items: baseline; }
#tweaks-panel .twk-lbl-name { font-weight: 500; color: rgba(41, 38, 27, 0.78); font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; }
#tweaks-panel .twk-lbl-hint { font-size: 10px; color: rgba(41, 38, 27, 0.45); font-style: italic; }
#tweaks-panel .twk-seg { display: flex; padding: 2px; border-radius: 8px; background: rgba(0, 0, 0, 0.06); }
#tweaks-panel .twk-seg button { appearance: none; flex: 1; border: 0; background: transparent; color: inherit; font: inherit; font-weight: 500; font-size: 11px; padding: 6px 4px; border-radius: 6px; cursor: pointer; transition: background 0.15s, color 0.15s; }
#tweaks-panel .twk-seg-4 button { font-size: 10.5px; padding: 6px 2px; }
#tweaks-panel .twk-seg button[aria-pressed="true"] { background: rgba(255, 255, 255, 0.95); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); color: #29261b; }
#tweaks-panel .twk-seg button:hover:not([aria-pressed="true"]) { color: #29261b; }

/* ============================================
   404 PAGE
   ============================================ */
.notfound {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 28px;
  padding: 24px;
}
.notfound-hat {
  width: 160px;
  height: 160px;
  object-fit: contain;
  animation: hat-breathe 1s cubic-bezier(0.45, 0, 0.55, 1) infinite alternate;
}
.notfound-code {
  font-size: clamp(4rem, 14vw, 10rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 0.9;
}
.notfound-msg {
  font-size: clamp(0.85rem, 1.8vw, 1.1rem);
  font-weight: 300;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity: 0.5;
}
.notfound-link {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--accent);
  border: 1px solid var(--accent);
  padding: 16px 32px;
  transition: background 0.3s ease, color 0.3s ease;
}
.notfound-link:hover {
  background: var(--accent);
  color: var(--bg);
}