/* Logo-matched black, red and ivory finish. Layout and visualizer behavior stay in the
   original styles.css, app.js and visualizer.js. */
:root {
  --page: #080808;
  --panel: #171615;
  --border: #3e3832;
  --muted: #b4a99a;
  --text: #f4e8cf;
  --accent: #f35849;
  scrollbar-color: #60564c #111010;
  --metal-grain: repeating-linear-gradient(0deg, #ffffff03 0 1px, #00000008 1px 2px, transparent 2px 4px);
  --wood-grain: repeating-linear-gradient(91deg, transparent 0 2px, #1d0d0966 3px 4px, #c28c4b22 5px 6px, transparent 7px 11px),
    repeating-linear-gradient(87deg, transparent 0 9px, #d4a7751c 10px 12px, #28150b40 13px 14px, transparent 15px 23px),
    linear-gradient(90deg, #362318, #875a37 25%, #684325 48%, #815634 72%, #3d281a);
}

body {
  background: radial-gradient(ellipse 900px 500px at 30% 12%, #22201d1f, transparent 80%),
    repeating-linear-gradient(105deg, #ffffff01 0 1px, transparent 1px 5px), var(--page);
}

.site-header {
  background: var(--metal-grain), linear-gradient(#191716, #0e0e0d);
  border-bottom-color: #39332d;
  box-shadow: 0 1px 0 #000, 0 -1px 0 #e8d9bf0c inset;
}

::selection { color: #fff3db; background: #6c2b26; }

.brand { color: var(--text); text-shadow: 0 1px 0 #000; }
.brand-logo { display: block; width: 248px; height: auto; }
.brand-mark {
  color: #fff3d8;
  background: var(--metal-grain), linear-gradient(145deg, #d84034, #a32323);
  box-shadow: 0 1px 1px #ffc9b533 inset, 0 2px 3px #0006;
}
.site-label { color: var(--muted); }
.local { color: #c5bba9; }
.local svg { color: #a99d8c; }
.eyebrow { color: #c7b9a3; }
.eyebrow > span { background: var(--accent); }
h1 { color: var(--text); text-shadow: 0 2px 0 #0008; }
.intro p { color: var(--muted); }

.panel {
  border-color: #3e3832;
  background: var(--metal-grain), linear-gradient(150deg, #211e1c, #141313 60%, #191716);
  box-shadow: 0 1px 0 #f4e8cf14 inset, 0 -1px 0 #000a inset,
    0 8px 20px #0005;
}

.display {
  position: relative;
  background: var(--metal-grain), linear-gradient(145deg, #23201d, #121212 57%, #1a1816);
}

/* Walnut side cheeks sit inside existing padding, preserving the canvas size. */
.display::before, .display::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 11px;
  pointer-events: none;
  background: var(--wood-grain);
  box-shadow: 1px 0 1px #d1a16a3d inset, -1px 0 1px #160d08b3 inset;
}
.display::before { left: 0; border-radius: 16px 0 0 16px; }
.display::after { right: 0; border-radius: 0 16px 16px 0; }

.display-header h2, .controls-header h2, .control-section h3 {
  color: #eadfc9;
  text-shadow: 0 1px 1px #000b;
}
.technical, .display-footer { color: #b3a795; }
.screen {
  border-color: #080808;
  box-shadow: 0 1px 0 #b7a58b2b, 0 -1px 1px #000b, 0 0 0 3px #0b0b0b;
}
.status {
  background: #1e1b19;
  color: #c6bba7;
  box-shadow: 0 1px 2px #0006 inset, 0 1px 0 #e8d9bf0c;
}
.status > span:first-child { background: #988b79; }
.status[data-state="live"] { color: #ffb2a3; background: #321b19; }
.status[data-state="live"] > span:first-child { background: #ff6654; box-shadow: none; }
.status[data-state="background"] { color: #eadfc9; background: #29211c; }
.status[data-state="background"] > span:first-child { background: #e9dcc4; box-shadow: none; }

.icon-button {
  border-color: #645c52 #39342e #141211;
  background: var(--metal-grain), linear-gradient(#34302b, #211e1b);
  color: #e9ddc4;
  box-shadow: 0 1px 0 #fff2 inset, 0 2px 2px #0005;
}

.transport {
  border-color: #403a32;
  background: var(--metal-grain), linear-gradient(#24201d, #161514);
}
.play-button {
  color: #fff3d8;
  background: var(--metal-grain), linear-gradient(145deg, #d84034, #a32323);
  box-shadow: 0 1px 0 #ffd5bd55 inset, 0 -2px 0 #4c131780 inset, 0 3px 4px #0008;
}
.track-title { color: #eadfc9; }
.timeline, .volume { color: #c1b5a2; }

input[type="range"]::-webkit-slider-runnable-track {
  background: linear-gradient(90deg, #df493e var(--fill, 0%), #090909 var(--fill, 0%));
  box-shadow: 0 1px 1px #0008 inset, 0 1px 0 #e5d9c51c;
}
input[type="range"]::-moz-range-track {
  background: linear-gradient(90deg, #df493e var(--fill, 0%), #090909 var(--fill, 0%));
  box-shadow: 0 1px 1px #0008 inset, 0 1px 0 #e5d9c51c;
}
input[type="range"]::-webkit-slider-thumb {
  border-radius: 3px;
  background: linear-gradient(90deg, #a69b89, #f1e4c8 38%, #c6bba5 75%, #827868);
  box-shadow: 0 1px 0 #fff5 inset, 0 1px 3px #000b;
}
input[type="range"]::-moz-range-thumb {
  border-radius: 3px;
  background: linear-gradient(90deg, #a69b89, #f1e4c8 38%, #c6bba5 75%, #827868);
  box-shadow: 0 1px 0 #fff5 inset, 0 1px 3px #000b;
}

.controls { position: relative; }
.controls::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 6px;
  border-radius: 16px 16px 0 0;
  pointer-events: none;
  background: repeating-linear-gradient(0deg, #1e100b33 0 1px, transparent 1px 3px),
    linear-gradient(90deg, #422b1c, #8d603a 30%, #69442b 64%, #402b1c);
  box-shadow: 0 1px 0 #bd8e5e40 inset, 0 -1px 1px #0007 inset;
}
.controls-header > span { color: #b3a795; }
.control-section { border-top-color: #3c3630; }
.sensitivity-section:has(+ #background-speed-section[hidden]) { padding-bottom: 0; }
.option {
  color: #d6cbb7;
  border-color: #645c52 #39342e #141211;
  background: var(--metal-grain), linear-gradient(#302b27, #201d1a);
  box-shadow: 0 1px 0 #f4e8cf12 inset, 0 2px 2px #0005;
}
.option[aria-pressed="true"] {
  border-color: #ce5548 #9a3c33 #682822;
  background: var(--metal-grain), linear-gradient(#452520, #2c1917);
  color: #fff0d7;
  box-shadow: 0 1px 3px #0007 inset, 0 1px 0 #f3886924;
}
.option[aria-pressed="true"] svg, .sensitivity-heading output { color: #ff7a68; }
.swatch[aria-pressed="true"] { border-color: #e9dcc4; background: #302623; }
.swatch::before { box-shadow: 0 1px 2px #0006 inset, 0 1px 0 #ffffff24; }
#custom-color {
  border-color: #645c52 #39342e #141211;
  background: var(--metal-grain), linear-gradient(#302b27, #201d1a);
  box-shadow: 0 1px 0 #f4e8cf12 inset;
}
.notice { color: #f6c5b9; background: #331c19; }

@media (hover: hover) and (pointer: fine) {
  .option:hover, .icon-button:hover, .swatch:hover { border-color: #d06c5b; }
  .play-button:hover { background: var(--metal-grain), linear-gradient(145deg, #e84a3b, #b42a25); }
}
@media (max-width: 720px) {
  .brand-logo { width: clamp(156px, 44vw, 220px); }
  .display::before, .display::after { width: 7px; }
  .display::before { border-radius: 12px 0 0 12px; }
  .display::after { border-radius: 0 12px 12px 0; }
}

/* Both native and fallback fullscreen retain the original pure-black stage. */
.display .screen:is(:fullscreen, .expanded) { box-shadow: none; background: #000; }

/* Studio attribution stays outside the fullscreen canvas. */
.page-footer {
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  margin: 24px 0;
  padding-top: 20px;
  border-top-color: #39332d;
  color: #b4a58e;
}
.studio-credit { display: flex; align-items: center; gap: 16px; }
.studio-credit img { display: block; width: 89px; height: 28px; object-fit: contain; flex-shrink: 0; }
.studio-credit small { border-left: 1px solid var(--border); padding-left: 16px; font-size: 11px; line-height: 1.5; }
@media (max-width: 520px) {
  .page-footer { flex-direction: column; align-items: flex-start; gap: 12px; }
}