:root {
  color-scheme: dark;
  --bg: #101214;
  --panel: #171a1d;
  --panel-2: #1d2024;
  --border: rgba(255, 255, 255, 0.08);
  --text: #f4f1e8;
  --muted: #96999d;

  /* Brass material system: passive hardware -> labels -> active hardware -> highlights. */
  --brass-dark: #6f5729;
  --brass-border: #8f7138;
  --brass-label: #ad8c49;
  --brass-soft: #c4a25a;
  --brass-active: #e2bc60;
  --brass-bright: #f0d27c;
  --brass-highlight: #fff0b0;
  --brass-border-rgb: 143, 113, 56;
  --brass-label-rgb: 173, 140, 73;
  --brass-active-rgb: 226, 188, 96;
  --brass-highlight-rgb: 255, 240, 176;

  /* Compatibility aliases for existing active-state styling. */
  --gold: var(--brass-label);
  --gold-bright: var(--brass-active);

  --red: #9f3228;
  --red-bright: #c64a3c;
  --white-key: #efede6;
  --white-key-edge: #bebbb3;
  --black-key: #17191c;
  --black-key-edge: #070809;
  --shadow: 0 18px 50px rgba(0, 0, 0, 0.28);
}

* { box-sizing: border-box; }
#isokratis-app, #isokratis-app * { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }

html, body { min-height: 100%; }

body {
  margin: 0;
  background:
    radial-gradient(
      ellipse 72% 62% at 50% -18%,
      rgba(var(--brass-label-rgb), .085) 0%,
      rgba(var(--brass-label-rgb), .040) 30%,
      rgba(var(--brass-label-rgb), .014) 52%,
      transparent 72%
    ),
    radial-gradient(
      ellipse 82% 55% at 50% 115%,
      rgba(24, 50, 40, .065) 0%,
      rgba(17, 35, 29, .025) 38%,
      transparent 68%
    ),
    var(--bg);
  color: var(--text);
  font-family: Lato, sans-serif;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
  overflow-x:hidden;
  overflow-y:auto;
  width:100%;
  min-height:100%;
}

#isokratis-app{position:relative;}

.browser-install-cue { display:none; z-index:11; }
.browser-install-cue__instruction { display:none; }
.browser-install-cue__icon {
  flex:0 0 30px;
  width:30px;
  height:30px;
  display:grid;
  place-items:center;
  border:1px solid rgba(var(--brass-border-rgb),.30);
  border-radius:8px;
  color:var(--brass-soft);
  background:rgba(var(--brass-label-rgb),.055);
  box-shadow:inset 0 1px 0 rgba(var(--brass-highlight-rgb),.04);
}
.browser-install-cue__icon svg { width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.65; stroke-linecap:round; stroke-linejoin:round; }
.browser-install-cue__copy { min-width:0; display:flex; flex-direction:column; gap:2px; }
.browser-install-cue__title { color:var(--brass-bright); font-size:clamp(.66rem,.9vw,.76rem); font-weight:800; line-height:1.1; letter-spacing:.035em; }
.browser-install-cue__instruction { color:rgba(244,241,232,.72); font-size:clamp(.56rem,.76vw,.64rem); font-weight:600; line-height:1.22; letter-spacing:.005em; }

@media (display-mode: browser) {
  body { min-height:100lvh; }
  .browser-install-cue.is-android,
  .browser-install-cue.is-ios {
    display:flex;
    position:absolute;
    top:50%;
    left:10px;
    right:10px;
    align-items:center;
    gap:10px;
    padding:9px 11px;
    border:1px solid rgba(var(--brass-border-rgb),.34);
    border-radius:10px;
    color:var(--text);
    background:
      linear-gradient(180deg,rgba(var(--brass-label-rgb),.035),rgba(255,255,255,.008)),
      rgba(16,19,21,.97);
    box-shadow:
      inset 0 1px 0 rgba(var(--brass-highlight-rgb),.035),
      0 7px 18px rgba(0,0,0,.24);
    pointer-events:none;
    transform:translateY(-50%);
    animation:browser-install-cue 15s cubic-bezier(.22,.61,.36,1) 1 forwards;
  }
  .browser-install-cue.is-android .browser-install-cue__instruction--android,
  .browser-install-cue.is-ios .browser-install-cue__instruction--ios { display:block; }
}

@media (display-mode: browser) and (max-width:820px) and (orientation:landscape) {
  .browser-install-cue.is-android,
  .browser-install-cue.is-ios { left:4px; right:4px; gap:0; padding:7px 6px; }
  .browser-install-cue__icon { display:none; }
  .browser-install-cue__title { font-size:.60rem; }
  .browser-install-cue__instruction { font-size:.52rem; line-height:1.18; }
}

@keyframes browser-install-cue {
  0% { opacity:0; visibility:visible; }
  8% { opacity:1; }
  16% { border-color:rgba(var(--brass-active-rgb),.48); box-shadow:inset 0 1px 0 rgba(var(--brass-highlight-rgb),.055),0 7px 20px rgba(0,0,0,.26),0 0 8px rgba(var(--brass-active-rgb),.07); }
  24%, 92% { opacity:1; visibility:visible; border-color:rgba(var(--brass-border-rgb),.34); box-shadow:inset 0 1px 0 rgba(var(--brass-highlight-rgb),.035),0 7px 18px rgba(0,0,0,.24); }
  100% { opacity:0; visibility:hidden; }
}

@media (prefers-reduced-motion: reduce) {
  .browser-install-cue { display:none !important; }
}

button, select, input { font: inherit; }
button { touch-action: manipulation; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.audio-unlock {
  position: fixed;
  inset: 0;
  z-index: 9000;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 24px;
  border: 0;
  border-radius: 0;
  color: var(--text);
  background:
    radial-gradient(circle at 50% 35%, rgba(var(--brass-label-rgb), 0.085), transparent 34%),
    var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 120ms ease;
}

.audio-unlock.is-unlocked { opacity: 0; pointer-events: none; }
.audio-unlock__content { display: flex; flex-direction: column; align-items: center; gap: 12px; pointer-events: none; }
.audio-unlock__brand { width:auto; height: clamp(38px, 5vw, 52px); margin-bottom:1em; }
.audio-unlock__brand > IMG{ width:auto; height: 30px; }
.audio-unlock__prompt {
  padding: 11px 22px;
  border: 1px solid rgba(var(--brass-border-rgb), 0.58);
  border-radius: 10px;
  color: var(--gold-bright);
  background: rgba(255, 255, 255, 0.025);
  font-size: clamp(1rem, 2.5vw, 1.35rem);
  font-weight: 800;
  letter-spacing: 0.025em;
}
.audio-unlock:focus-visible .audio-unlock__prompt { outline: 2px solid var(--gold-bright); outline-offset: 4px; }

.isokratis { width: min(1500px, 100%); height:auto; min-height:100vh; margin: 0 auto; padding: 20px clamp(16px, 2vw, 32px) 24px; display: flex; flex-direction: column; gap: 16px; }

@media (display-mode: browser) {
  .isokratis { height:100dvh; min-height:100dvh; }
}

@media (display-mode: standalone) {
  body { overflow:hidden; height:100%; }
  #isokratis-app { position:fixed; inset:0; }
}
.topbar { min-height: 58px; display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.brand { display: flex; align-items: baseline; gap: 1px; min-width: 0; }
.brand > IMG{width:auto; height:25px; opacity:0.5; margin-left:33px; }

.topbar-controls { display:flex; align-items:center; gap:8px; min-width:0; }
.performance-mode-button {
  height:30px;
  padding:0 14px;
  border:1px solid rgba(var(--brass-border-rgb),.14);
  border-radius:10px;
  color:rgba(244,241,232,.54);
  background:linear-gradient(180deg,#202428,#181b1e);
  box-shadow:inset 0 1px 0 rgba(var(--brass-highlight-rgb),.035);
  font-size:.62rem;
  font-weight:800;
  letter-spacing:.13em;
  text-transform:uppercase;
  cursor:pointer;
  white-space:nowrap;
  transition:color 100ms ease,border-color 100ms ease,background 100ms ease,box-shadow 100ms ease;
}
.performance-mode-button:hover { color:var(--brass-soft); border-color:rgba(var(--brass-label-rgb),.46); }
.performance-mode-button.is-active {
  color:var(--brass-bright);
  border-color:rgba(var(--brass-active-rgb),.72);
  background:linear-gradient(180deg,#2b291d,#211f17);
  box-shadow:
    inset 0 1px 0 rgba(var(--brass-highlight-rgb),.09),
    inset 0 0 12px rgba(var(--brass-active-rgb),.055),
    0 0 7px rgba(var(--brass-active-rgb),.055);
}
.performance-mode-button::before {
  content:"";
  display:inline-block;
  width:5px;
  height:5px;
  margin-right:7px;
  border-radius:50%;
  vertical-align:1px;
  background:var(--brass-active);
  box-shadow:0 0 5px rgba(var(--brass-active-rgb),.28);
  opacity:0.2;
}
.performance-mode-button.is-active::before { opacity:1; }

.voice-select select {
  min-width: min(330px, 42vw);
  height: 30px;
  padding: 0 22px 0 5px;
  border: 1px solid rgba(var(--brass-border-rgb),.14);
  border-radius: 10px;
  box-shadow: inset 0 1px 0 rgba(var(--brass-highlight-rgb), .025);
  font-size:0.8em;
  outline: none;
  color:rgba(244,241,232,.68);
  background:#181b1e;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.015);
}

#isokratis-app.is-performance-mode .voice-select select:disabled {
  opacity:.42;
  color:rgba(244,241,232,.46);
  cursor:not-allowed;
}
#isokratis-app.is-performance-mode .tuning-gauge { cursor:default; }
#isokratis-app.is-performance-mode .tuning-gauge.is-dragging { cursor:default; }
#isokratis-app.is-performance-mode .gauge-reset-button:disabled {
  opacity:.28;
  cursor:not-allowed;
  color:rgba(var(--brass-soft),.48);
  border-color:rgba(var(--brass-border-rgb),.20);
  box-shadow:none;
}

.performance-mode-button:focus-visible,
.control-button:focus-visible,
.utility-button:focus-visible,
.piano-key:focus-visible,
#master-volume:focus-visible,
.tuning-gauge:focus-visible,
.gauge-reset-button:focus-visible {
  outline: 2px solid var(--gold-bright);
  outline-offset: 2px;
}

.dashboard {
  display: grid;
  grid-template-columns: minmax(145px, 0.82fr) minmax(460px, 4fr) 56px 76px;
  grid-template-areas: "ison tuning utilities volume";
  gap: 10px;
  align-items: stretch;
}

.readout,
.utility-control,
.volume-control {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.025), rgba(255,255,255,0.010)),
    #131619;
  border: 1px solid rgba(var(--brass-border-rgb), .16);
  border-radius: 14px;
  box-shadow: inset 0 1px 0 rgba(var(--brass-highlight-rgb), .018);
}

.utility-control { grid-area:utilities; min-width:0; min-height:100%; padding:8px 6px; display:flex; flex-direction:column; align-items:center; gap:15px; }
.utility-button { position:relative; width:42px; height:42px; flex:0 0 auto; padding:0; border:1px solid rgba(var(--brass-border-rgb),.46); border-radius:9px; color:#a7a39a; background:linear-gradient(180deg,#22262a,#1c2023); box-shadow:inset 0 1px 0 rgba(var(--brass-highlight-rgb),.035); cursor:pointer; touch-action:manipulation; transition:background 100ms ease, border-color 100ms ease, color 100ms ease, filter 100ms ease, box-shadow 100ms ease; }
.utility-button:active { transform:translateY(1px); }
.utility-icon { width:23px; height:23px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; pointer-events:none; }
.utility-icon--gliss { fill:currentColor; stroke:none; }
.utility-button.is-active { color:var(--brass-bright); border-color:rgba(var(--brass-active-rgb),.82); background:linear-gradient(180deg,#2b291d,#242319); box-shadow:inset 0 1px 0 rgba(var(--brass-highlight-rgb),.10), inset 0 0 12px rgba(var(--brass-active-rgb),.07), 0 0 8px rgba(var(--brass-active-rgb),.08); }
.utility-button.is-listening { animation:match-listening 1.15s ease-in-out infinite; }
.utility-button.is-unavailable:not(.is-active) { opacity:.42; cursor:default; }
.utility-button.is-locked { opacity:.48; cursor:pointer; }
.utility-lock { display:none; position:absolute; right:2px; bottom:2px; width:12px; height:12px; fill:#111; stroke:var(--brass-soft); stroke-width:1.5; pointer-events:none; }
.utility-button.is-locked .utility-lock { display:block; }
@keyframes match-listening { 0%,100% { filter:brightness(.86); } 50% { filter:brightness(1.35); box-shadow:0 0 12px rgba(241,196,78,.24); } }

.readout { min-height: 168px; padding: 18px 20px; position: relative; }
.readout--ison { grid-area: ison; }

.eyebrow,
.control-label,
.volume-control label {
  display: block;
  margin-bottom: 5px;
  color: var(--brass-label);
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.readout-status {
  margin-top: 9px;
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 650;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-height: 1em;
  position: absolute;
  bottom:1.2em;
}

.readout-status[data-state="ready"] { color: #6f8c72; letter-spacing: .12em; text-transform: uppercase; }
.readout-status[data-state="ready"]::before{content:""; display:inline-block; width:6px; height:6px; margin-right:6px; border-radius:50%; vertical-align:1px; background:#59745e; box-shadow: 0 0 0 1px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.18), 0 0 5px rgba(74,124,89,.28); }
.readout-status[data-state="error"] { color: #ec8378; }
.readout-status[data-state="loading"] { color:rgba(210,173,107,.72); }

/* Current Ison: static brass register. No glow/blur transition; it should read like hardware, not an animated HUD. */
#current-ison { position:absolute; top:50%; left:50%; width:100%; transform:translate(-50%, -50%); color:rgba(196,162,90,.86); font-family:Baskervville, serif; font-size:clamp(1.9rem,3.1vw,2.6rem); font-weight:650; line-height:1; letter-spacing:.015em; text-align:center; text-shadow:0 1px 0 rgba(0,0,0,.72); pointer-events:none; }
#current-ison::first-letter { font-family:Baskervville, serif; font-weight:760; font-size:clamp(3.15rem, 5.4vw, 4.65rem); color:var(--brass-bright); background:none; background-clip:border-box; -webkit-background-clip:border-box; -webkit-text-fill-color:currentColor; text-shadow:0 -1px 0 rgba(var(--brass-highlight-rgb),.24),0 1px 0 rgba(70,48,14,.92),0 2px 5px rgba(0,0,0,.34); }
#current-ison:empty::before { content:""; display:block; width:55px; height:40px; margin:auto; background:url(img/mbp-drone-logo.svg?v=2) no-repeat center; background-size:contain; opacity:.35; }

.tuning-console { position:relative; grid-area: tuning; min-width: 0; min-height: 168px; padding: 0 0 2px; display:grid; grid-template-rows:minmax(0,1fr) auto; grid-template-areas:"gauge" "controls"; }

.tuning-gauge {
  grid-area:gauge;
  z-index:2; 
  position: relative;
  min-width: 0;
  min-height: 0;
  padding: 4px 0 2px;
  border-radius: 18px;
  cursor: ew-resize;
  touch-action: none;
  overscroll-behavior: contain;
  -webkit-tap-highlight-color: transparent;
  outline: none;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.018), rgba(255,255,255,0.004) 18%, rgba(0,0,0,0) 36%),
    linear-gradient(180deg, rgba(11,13,15,0.96), rgba(17,20,23,0.98));
  border: 1px solid rgba(var(--brass-border-rgb),0.16);
  box-shadow:
    inset 0 2px 3px rgba(0,0,0,0.82),
    inset 0 -2px 2px rgba(255,255,255,0.02),
    inset 0 29px 38px rgba(255,255,255,0.15),
    0 1px 0 rgba(255,255,255,0.018);
  filter: sepia(0.2) contrast(0.95);
}
.tuning-gauge::before {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: 17px;
  pointer-events: none;
  background:url(img/bg.png) no-repeat center -207px; background-size:1800px 564px;
  opacity:0.35;
  box-shadow:
    inset 0 2px 0 rgba(0,0,0,0.36),
    inset 0 -2px 0 rgba(255,255,255,0.055);
}
.tuning-gauge::after {
  content: "";
  position: absolute;
  inset: 4px 7% 18px;
  border-radius: 50%;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,0.038), rgba(255,255,255,0.008) 22%, transparent 55%);
  opacity: 0.95;
}
.tuning-gauge.is-dragging { cursor: grabbing; }
.tuning-gauge__title { position:absolute; bottom:10px; left:35px; z-index:2; pointer-events:none; color:var(--brass-label); font-size:.58rem; font-weight:800; letter-spacing:.18em; line-height:1; text-transform:uppercase; text-shadow:0 1px 0 rgba(0,0,0,.55); }
.tuning-gauge__svg { position:relative; z-index:1; display:block; width:100%; max-height:104px; margin:0 auto; overflow:visible; }
.tuning-gauge__track { fill: none; stroke: url(#tuning-track); stroke-width: 13; stroke-linecap: round; filter: drop-shadow(0 2px 2px rgba(0,0,0,0.75)); }
.tuning-gauge__focus { fill:none; stroke:rgba(var(--brass-label-rgb),.70); stroke-width:2.2; stroke-linecap:round; filter:drop-shadow(0 0 3px rgba(var(--brass-active-rgb),.10)); }
.tuning-gauge__tick { stroke:rgba(198,193,178,.20); stroke-width:1.25; vector-effect:non-scaling-stroke; }
.tuning-gauge__tick.is-whole-tone { stroke:rgba(var(--brass-border-rgb),.62); stroke-width:4; }
.tuning-gauge__tick.is-semitone { stroke:rgba(var(--brass-label-rgb),.60); stroke-width:1.55; }
.tuning-gauge__tick.is-focus { stroke:rgba(var(--brass-active-rgb),.74); }
.tuning-gauge__tick.is-zero { stroke:var(--brass-bright); stroke-width:2.1; }
.tuning-gauge__label { fill:rgba(202,198,186,.42); font-family:'IBM Plex Mono', monospace; font-size:16px; font-weight:500; }
.tuning-gauge__label.is-focus { fill:var(--brass-soft); }
.tuning-gauge__label.is-zero { fill:var(--brass-highlight); font-weight:600; }
.tuning-needle, .tuning-needle-hub { pointer-events:none; }
.tuning-needle__blade { fill:url(#tuning-needle-brass); stroke:rgba(var(--brass-highlight-rgb),.62); stroke-width:.9; stroke-linejoin:miter; vector-effect:non-scaling-stroke; }
.tuning-needle__facet { fill:#a9a537; stroke:none; }
.tuning-needle__highlight { fill:none; stroke:rgba(var(--brass-highlight-rgb),.72); stroke-width:.72; stroke-linecap:butt; vector-effect:non-scaling-stroke; }
.tuning-needle__hub-shadow { fill:rgba(0,0,0,.48); }
.tuning-needle__hub { fill:url(#tuning-brass); stroke:rgba(var(--brass-highlight-rgb),.56); stroke-width:1.05; }
.tuning-needle__hub-bezel { fill:#1c1a16; stroke:rgba(var(--brass-dark),.92); stroke-width:1.2; }
.tuning-needle__hub-ring { fill:none; stroke:rgba(var(--brass-soft),.48); stroke-width:.9; }
.tuning-needle__bearing { fill:#2a261d; stroke:rgba(var(--brass-highlight-rgb),.30); stroke-width:.7; }
.tuning-needle__bearing-pin { fill:#090a0b; stroke:rgba(var(--brass-soft),.38); stroke-width:.55; }
.tuning-needle__shine { fill:rgba(var(--brass-highlight-rgb),.80); }

.tuning-readout { display:inline; }

.tuning-controls {
  grid-area:controls;
  min-width:0;
  padding:7px 0 0;
  display:grid;
  grid-template-columns:70px 70px 65px;
  gap:20px;
  align-items:end;
  max-width:245px;
  place-self:center;
}

.control-group { min-width:0; display:flex; flex-direction:column; }
.control-label { color:var(--muted); padding-left:5px; }
.tuning-controls .control-label { order:2; margin:5px 0 0; }
.tuning-controls .button-row { order:1; }
.control-group--match .control-label { padding-left:0; text-align:center; }

.button-row { display:grid; grid-template-columns:1fr 1fr; gap:1px; padding:2px; border:1px solid rgba(var(--brass-border-rgb),.48); border-radius:10px; background:linear-gradient(180deg,#0c0e10,#15181b); box-shadow:inset 0 2px 3px rgba(0,0,0,.72), inset 0 -1px 0 rgba(var(--brass-highlight-rgb),.035); overflow:hidden; }

.button-row{height:28px}
.button-row .control-button{line-height:22px}

.control-button {
  padding: 0 12px;
  border: 1px solid rgba(var(--brass-border-rgb),.54);
  border-radius: 9px;
  color: var(--text);
  background: linear-gradient(180deg,#25292d,#202428);
  box-shadow: inset 0 1px 0 rgba(var(--brass-highlight-rgb),.025);
  font-size: 0.86rem;
  font-weight: 800;
  user-select: none;
  white-space: nowrap;
  cursor: pointer;
  transition: transform 70ms ease, background 70ms ease, border-color 70ms ease, box-shadow 70ms ease, color 70ms ease;
}

.tuning-controls .button-row .control-button { padding:0; border:0; border-radius:7px; color:var(--brass-soft); background:linear-gradient(180deg,#292d30 0%,#212529 52%,#1b1f22 100%); box-shadow:inset 0 1px 0 rgba(var(--brass-highlight-rgb),.065), inset 0 -1px 0 rgba(0,0,0,.55); text-shadow:0 1px 0 rgba(0,0,0,.65); }
.tuning-controls .button-row .control-button:first-child { border-radius:7px 2px 2px 7px; }
.tuning-controls .button-row .control-button:last-child { border-radius:2px 7px 7px 2px; }
.tuning-controls .button-row .control-button:hover { color:var(--brass-bright); background:linear-gradient(180deg,#303438,#262a2d 55%,#202326); box-shadow:inset 0 1px 0 rgba(var(--brass-highlight-rgb),.10), inset 0 -1px 0 rgba(0,0,0,.55); }
.tuning-controls .button-row .control-button:active { transform:none; color:var(--brass-highlight); background:linear-gradient(180deg,#191c1f,#23272a); box-shadow:inset 0 2px 4px rgba(0,0,0,.62), inset 0 -1px 0 rgba(var(--brass-highlight-rgb),.025); }

.control-button:hover { background:linear-gradient(180deg,#2c3034,#262a2e); border-color:rgba(var(--brass-label-rgb),.78); }
.control-button:active { transform:translateY(1px); background:linear-gradient(180deg,#303338,#292d31); box-shadow:inset 0 1px 2px rgba(0,0,0,.36); }
.control-button:disabled { opacity: 0.38; cursor: default; }

.tuning-controls .tuning-match-button { width:65px; height:28px; border-radius:9px; }
.tuning-controls .tuning-match-button .utility-icon { width:17px; height:17px; }

.gauge-reset-button {
  position:absolute; top:-20px; left: calc( 50% - 100px );
  z-index:0;
  width:200px; height:22px;
  margin:0; padding:0;
  border:1px solid rgba(var(--brass-border-rgb),.30); border-bottom:none; border-radius:5px 5px 0 0;
  color:rgba(var(--brass-soft),.72);
  background: #303231;
  clip-path: ellipse(45% 105% at 50% 110%);
  box-shadow:inset 0 1px 0 rgba(var(--brass-highlight-rgb),.035), inset 0 -1px 1px rgba(0,0,0,.55);
  font-size:.6rem; font-weight:800; letter-spacing:1.5px;
  line-height:20px;
  text-transform:uppercase;
  text-shadow:0 1px 0 rgba(0,0,0,.65);
  cursor:pointer;
  touch-action:manipulation;
  opacity:.8;
}
.gauge-reset-button:hover { color:var(--brass-bright); border-color:rgba(var(--brass-label-rgb),.58); opacity:1; }
.gauge-reset-button:active { transform:translateY(1px); background:linear-gradient(180deg,#171a1c,#222629); box-shadow:inset 0 2px 3px rgba(0,0,0,.62); }

.volume-control {
  grid-area: volume;
  min-width: 0;
  min-height: 100%;
  padding: 10px 6px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  user-select: none;
  gap: 6px;
  touch-action: none;
  overscroll-behavior: contain;
}

.volume-control label {
  margin: 0;
  color: var(--muted);
  font-size: 0.58rem;
  letter-spacing: 0.09em;
  text-align: center;
  user-select: none;
}

.volume-control output {
  color: var(--brass-bright);
  text-shadow:0 0 7px rgba(var(--brass-active-rgb),.06);
  font-size: 0.74rem;
  font-weight: 800;
  line-height: 1;
  text-align: center;
  user-select: none;
}

#master-volume{
  appearance:none;
  -webkit-appearance:none;
  width:44px;
  height:80px;
  margin:0;
  writing-mode:vertical-lr;
  direction:rtl;
  background:transparent;
  cursor:pointer;
  touch-action:none;
}

#master-volume::-webkit-slider-runnable-track{
  width:6px;
  height:100%;
  border-radius:4px;
  background:#090b0c;
  border:1px solid rgba(var(--brass-border-rgb),.18);
  box-shadow:
    inset 1px 0 2px rgba(0,0,0,.9),
    inset -1px 0 1px rgba(255,255,255,.035);
}

#master-volume::-webkit-slider-thumb{
  -webkit-appearance:none;
  appearance:none;
  width:24px;
  height:15px;
  margin-left:-10px;
  border-radius:4px;
  border:1px solid rgba(var(--brass-highlight-rgb),.5);
  background:
    linear-gradient(
      180deg,
      var(--brass-highlight) 0%,
      var(--brass-active) 18%,
      var(--brass-soft) 55%,
      var(--brass-dark) 100%
    );
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    0 2px 3px rgba(0,0,0,.65);
}

.usage-hint { color: var(--muted); text-align: center; font-size: 0.82rem; }

.piano-shell { flex: 1; min-height: 250px; max-height: 260px; padding: 10px 10px 12px; padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)); border: 1px solid var(--border); border-radius: 15px; background: #090a0b; box-shadow: var(--shadow); }
.piano { --white-chamfer:8px; --white-inner-chamfer:7px; --black-chamfer:5px; --black-inner-chamfer:4px; position:relative; width:100%; height:100%; min-height:230px; overflow:hidden; background:#08090a; user-select:none; touch-action:none; }

/* MATCH becomes a focused instrument state, not a gold flood over the whole keyboard. */
.piano.is-match-targeting::after { content:""; position:absolute; inset:1px; z-index:20; pointer-events:none; clip-path:polygon(7px 0,calc(100% - 7px) 0,100% 7px,100% calc(100% - 7px),calc(100% - 7px) 100%,7px 100%,0 calc(100% - 7px),0 7px); background:linear-gradient(180deg,rgba(var(--brass-highlight-rgb),.025),transparent 34%,transparent 68%,rgba(var(--brass-active-rgb),.045)); box-shadow:inset 0 0 0 1px rgba(var(--brass-active-rgb),.50),inset 0 0 20px rgba(var(--brass-active-rgb),.07); animation:match-targeting 1.1s ease-in-out infinite; }
@keyframes match-targeting { 0%,100% { opacity:.48; } 50% { opacity:.92; } }

.piano-key { appearance:none; -webkit-appearance:none; position:absolute; margin:0; padding:0; border:0; border-radius:0; cursor:pointer; user-select:none; touch-action:none; text-align:center; }

/* White keys: outer polygon is the frame, ::after is the inset ivory face. This gives the chamfers a real border. */
.piano-key--white {
  --key-frame:rgba(121,94,52,.48);
  --key-top:#f8f3e8;
  --key-mid:#efe7d6;
  --key-bottom:#dfd4c1;
  top:0; bottom:0; z-index:1; color:#252629; background:var(--key-frame); isolation:isolate;
  clip-path:polygon(0 0,100% 0,100% calc(100% - var(--white-chamfer)),calc(100% - var(--white-chamfer)) 100%,var(--white-chamfer) 100%,0 calc(100% - var(--white-chamfer)));
}
button.piano-key.piano-key--white::after { content:""; position:absolute; inset:0 1px 1px; z-index:0; pointer-events:none; clip-path:polygon(0 0,100% 0,100% calc(100% - var(--white-inner-chamfer)),calc(100% - var(--white-inner-chamfer)) 100%,var(--white-inner-chamfer) 100%,0 calc(100% - var(--white-inner-chamfer))); background-image:linear-gradient(90deg,rgba(255,255,255,.24),transparent 7%,transparent 92%,rgba(84,63,36,.11)),linear-gradient(180deg,var(--key-top) 0%,var(--key-mid) 58%,var(--key-bottom) 100%),url(img/grain.png); background-size:auto,auto,240px 240px; box-shadow:inset 0 1px 0 rgba(255,255,255,.42),inset 1px 0 0 rgba(255,255,255,.12),inset -1px 0 0 rgba(92,69,40,.11),inset 0 -3px 0 rgba(113,86,45,.10); }
button.piano-key.piano-key--white::before { content:""; position:absolute; inset:0 1px 1px; z-index:1; pointer-events:none; opacity:.66; background-color:transparent; background-repeat:no-repeat; background-position:center calc(100% - 2.8em); background-size:auto 2em; filter:sepia(.22) saturate(.72) contrast(.96); }

.piano-key--white:hover { --key-frame:rgba(143,113,56,.62); --key-top:#fffaf1; --key-mid:#f1eadb; --key-bottom:#ddd2bf; }

.piano-key--black {
  --black-frame:#030706;
  --black-top:#20302a;
  --black-mid:#111c18;
  --black-bottom:#060c09;
  top:0; height:50%; z-index:3; color:#d6d7cd; background:var(--black-frame); isolation:isolate;
  clip-path:polygon(0 0,100% 0,100% calc(100% - var(--black-chamfer)),calc(100% - var(--black-chamfer)) 100%,var(--black-chamfer) 100%,0 calc(100% - var(--black-chamfer)));
}
.piano-key--black::before { content:""; position:absolute; inset:0 1px 1px; z-index:0; pointer-events:none; clip-path:polygon(0 0,100% 0,100% calc(100% - var(--black-inner-chamfer)),calc(100% - var(--black-inner-chamfer)) 100%,var(--black-inner-chamfer) 100%,0 calc(100% - var(--black-inner-chamfer))); background:linear-gradient(90deg,rgba(220,240,218,.025),transparent 18%,transparent 76%,rgba(0,0,0,.36)),linear-gradient(180deg,var(--black-top),var(--black-mid) 48%,var(--black-bottom)); box-shadow:inset 0 1px 0 rgba(220,240,218,.055),inset 1px 0 0 rgba(220,240,218,.018),inset -1px 0 0 rgba(0,0,0,.74),inset 0 -7px 10px rgba(220,240,218,.014); }
.piano-key--black:hover { --black-frame:rgba(143,113,56,.40); --black-top:#2b4038; --black-mid:#172720; --black-bottom:#08110d; color:#eef0e7; }

.piano-key.is-active.piano-key--white { --key-frame:#f4cf72; --key-top:#f8e4a8; --key-mid:#e5bd58; --key-bottom:#b9811d; color:#1c1c19; }
.piano-key.is-active.piano-key--white::after { box-shadow:inset 0 1px 0 rgba(255,255,255,.52),inset 0 0 0 1px rgba(226,174,43,.28),inset 0 0 20px rgba(226,174,43,.13); }
.piano-key.is-active.piano-key--white .key-label { text-shadow:0 1px 3px rgba(255,255,255,.45); color:#74531a; }
.piano-key.is-active.piano-key--white::before { opacity:.78; filter:sepia(.35) saturate(.9) contrast(1.02); }

.piano-key.is-active.piano-key--black { --black-frame:#d2a94d; --black-top:#397553; --black-mid:#22563a; --black-bottom:#0d2b1d; color:#fff0b0; }
.piano-key.is-active.piano-key--black::before { box-shadow: inset 0 1px 0 rgba(255,255,255,.18), inset 0 0 0 1px rgba(226,188,96,.22), 0 0 7px rgba(226,188,96,.10); }

.key-label { position:absolute; left:50%; bottom:11px; z-index:3; transform:translateX(-50%); font-size:clamp(.68rem,1.3vw,.92rem); font-weight:800; white-space:nowrap; pointer-events:none; }

.piano.is-match-targeting .piano-key--white { --key-frame:rgba(var(--brass-active-rgb),.62); --key-top:#fbf3df; --key-mid:#eee0be; --key-bottom:#d8c18e; }
.piano.is-match-targeting .piano-key--white::after { box-shadow:inset 0 1px 0 rgba(255,255,255,.48),inset 0 -3px 0 rgba(var(--brass-label-rgb),.13),inset 0 0 16px rgba(var(--brass-active-rgb),.035); }
.piano.is-match-targeting button.piano-key.piano-key > .key-label { visibility:visible; }
.piano.is-match-targeting button.piano-key.piano-key--white::before { opacity:.96; background-size:auto 2.65em; background-position:center calc(100% - 3.0em); filter:sepia(.35) saturate(.85) contrast(1.04); }
.piano.is-match-targeting .piano-key--white .key-label { color:#654b1e; text-shadow:0 1px 0 rgba(255,255,255,.48); }
.piano.is-match-targeting .piano-key--black { --black-frame:rgba(var(--brass-active-rgb),.58); --black-top:#30483d; --black-mid:#1a2d24; --black-bottom:#09130e; color:#e7e2cf; }
.piano.is-match-targeting .piano-key--black::before { box-shadow:inset 0 1px 0 rgba(220,240,218,.09),inset 0 0 0 1px rgba(var(--brass-active-rgb),.08),inset 0 -7px 10px rgba(0,0,0,.34); }
.piano.is-match-targeting .piano-key--black .key-label { visibility:visible; opacity:.94; color:var(--brass-highlight); text-shadow:0 0 6px rgba(var(--brass-active-rgb),.15); }

button.piano-key[data-midi="36"]::before{background-image:url(img/c2.svg)}
button.piano-key[data-midi="38"]::before{background-image:url(img/d2.svg)}
button.piano-key[data-midi="40"]::before{background-image:url(img/e2.svg)}
button.piano-key[data-midi="41"]::before{background-image:url(img/f2.svg)}
button.piano-key[data-midi="43"]::before{background-image:url(img/g2.svg)}
button.piano-key[data-midi="45"]::before{background-image:url(img/a2.svg)}
button.piano-key[data-midi="47"]::before{background-image:url(img/b2.svg)}
button.piano-key[data-midi="48"]::before{background-image:url(img/c3.svg)}
button.piano-key[data-midi="50"]::before{background-image:url(img/d3.svg)}
button.piano-key[data-midi="52"]::before{background-image:url(img/e3.svg)}
button.piano-key[data-midi="53"]::before{background-image:url(img/f3.svg)}
button.piano-key[data-midi="55"]::before{background-image:url(img/g3.svg)}

button.piano-key[data-midi="38"] > .key-label,
button.piano-key[data-midi="40"] > .key-label,
button.piano-key[data-midi="41"] > .key-label,
button.piano-key[data-midi="45"] > .key-label,
button.piano-key[data-midi="47"] > .key-label,
button.piano-key[data-midi="50"] > .key-label,
button.piano-key[data-midi="52"] > .key-label,
button.piano-key[data-midi="53"] > .key-label { visibility:hidden; }

button.piano-key--black[data-midi="37"]{height:30%}
button.piano-key--black[data-midi="39"]{height:40%}
button.piano-key--black[data-midi="42"]{height:45%}
button.piano-key--black[data-midi="44"]{height:50%}
button.piano-key--black[data-midi="49"]{height:55%}
button.piano-key--black[data-midi="51"]{height:50%}
button.piano-key--black[data-midi="54"]{height:45%}

.is-performance-mode button.piano-key--black[data-midi="37"]{height:10%}
.is-performance-mode button.piano-key--black[data-midi="39"]{height:20%}
.is-performance-mode button.piano-key--black[data-midi="42"]{height:30%}
.is-performance-mode button.piano-key--black[data-midi="44"]{height:40%}
.is-performance-mode button.piano-key--black[data-midi="49"]{height:45%}
.is-performance-mode button.piano-key--black[data-midi="51"]{height:40%}
.is-performance-mode button.piano-key--black[data-midi="54"]{height:35%}

.piano-key--black .key-label { bottom:10px; opacity:.45; font-size:clamp(.5rem,.9vw,.68rem); font-weight:700; line-height:1.05; color:inherit; visibility:hidden; }

.piano[data-disabled="true"] .piano-key { cursor:wait; filter:contrast(.8) brightness(.5); }
.piano[data-disabled="true"] .piano-key--white::before, .piano[data-disabled="true"] .key-label { visibility:hidden; }
#isokratis-app:has(#piano[data-disabled="true"]) .tuning-gauge__title{opacity:.2}
#isokratis-app:has(#piano[data-disabled="true"]) .volume-control input,
#isokratis-app:has(#piano[data-disabled="true"]) .volume-control label,
#isokratis-app:has(#piano[data-disabled="true"]) .volume-control output,
#isokratis-app:has(#piano[data-disabled="true"]) .tuning-controls button,
#isokratis-app:has(#piano[data-disabled="true"]) .gauge-reset-button,
#isokratis-app:has(#piano[data-disabled="true"]) .tuning-controls .control-label,
#isokratis-app:has(#piano[data-disabled="true"]) #tuning-gauge svg{opacity:.1}
#isokratis-app:has(#piano[data-disabled="true"]) #tuning-gauge{box-shadow:none}
.portrait-lock { display:none; }
.retry-package { margin-left:.45rem; padding:.2rem .5rem; border:1px solid currentColor; border-radius:4px; color:inherit; background:transparent; font-size:.65rem; font-weight:800; text-transform:uppercase; cursor:pointer; touch-action:manipulation; }
.retry-package:active { transform:translateY(1px); }
.retry-package:disabled { opacity:.45; }
.piano-key.is-last-used { filter:brightness(1.12); }
.piano-key--black.is-last-used::after { content:""; position:absolute; left:50%; bottom:6px; z-index:4; width:10px; height:4px; transform:translateX(-50%); clip-path:polygon(2px 0,calc(100% - 2px) 0,100% 50%,calc(100% - 2px) 100%,2px 100%,0 50%); background:var(--brass-soft); box-shadow:0 1px 2px #333; opacity:.50; pointer-events:none; }

.readout--ison:has(.readout-status[data-state="loading"]) #current-ison {
  background: radial-gradient( ellipse at center, rgba(210,173,107,.12) 0%, rgba(210,173,107,.05) 32%, transparent 68%);
  background-size:90px 60px;
  background-position:center;
  background-repeat:no-repeat;
  animation:package-loading-halo 1.6s ease-in-out infinite;
}
.readout--ison:has(.readout-status[data-state="loading"]) #current-ison:empty::before { opacity:.65; animation:package-loading-logo 1.6s ease-in-out infinite; }
@keyframes package-loading-logo {
  0%, 100% { transform:scale(.92); opacity:.30; filter:blur(1.5px) drop-shadow(0 0 0 transparent); }
  50% { transform:scale(1); opacity:.80; filter:blur(0) drop-shadow(0 0 7px rgba(210,173,107,.35)); }
}
@keyframes package-loading-halo {
  0%, 100% { background-size:65px 42px; }
  50% { background-size:125px 78px; }
}

.readout, .utility-control, .volume-control, .tuning-gauge { position:relative; }
.readout::after, .utility-control::after, .volume-control::after, .tuning-gauge::after { content:""; position:absolute; inset:0; pointer-events:none; background:url(img/grain.png) repeat; background-size: 64px 64px; opacity:.06; border-radius:inherit; }

@media (max-width: 1050px) {
  .readout { padding-inline: 14px; }
  .control-button { padding-inline: 7px; font-size: 0.8rem; }
  .utility-control { padding-inline:4px; }
  .utility-button { width:38px; height:38px; }
  .volume-control { padding-inline: 4px; }
}

@media (max-height: 560px) and (orientation: landscape) {
  .isokratis { padding-top: 8px; padding-bottom: 8px; gap: 7px; }
  .topbar { min-height: 40px }
  .performance-mode-button { padding-inline:10px; font-size:.54rem; }
  .dashboard { gap: 7px; }
  .readout { min-height: 100px; padding: 9px 11px; }
  .readout-status { margin-top: 3px; font-size: 0.67rem; }
  .tuning-console { min-height: 110px }
  .tuning-gauge__title { font-size:.47rem; letter-spacing:.14em; }
  .tuning-gauge__svg { max-height: 62px; }
  .tuning-gauge__label { font-size: 14px; }
  .control-label { margin-bottom: 2px; padding-left: 2px; font-size: 0.51rem; line-height: 1; }
  .control-button { padding-inline: 5px; font-size: 0.71rem; }
  .gauge-reset-button { top:unset; left:unset; bottom:56px; right:10%; background:none; border:none; box-shadow:none; clip-path:unset; z-index:3; width:42px; height:20px; font-size:.43rem; line-height:20px; }
  .utility-control { padding:5px 3px; gap: 10px; }
  .utility-button { width:31px; height:31px; border-radius:7px; }
  .utility-icon { width:19px; height:19px; }
  .volume-control { padding: 7px 3px 6px; }
  #master-volume { height: 54px; }
  .volume-control label { font-size: 0.5rem; }
  .volume-control output { font-size: 0.66rem; }
  .usage-hint { display: none; }
  .piano-shell { min-height: 165px; padding: 6px; padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px)); }
  .piano { min-height: 155px; }
  .key-label { bottom: 6px; }
  button.piano-key.piano-key--white::before{background-size:auto 1.35rem; background-position:center calc(100% - 1.85rem)}
}

@media (max-width: 820px) and (orientation: landscape) {
  .isokratis { padding-inline: 8px; }
  .dashboard { grid-template-columns:125px minmax(0,1fr) 38px 54px; gap:5px; }
  .readout { padding-inline: 8px; }
  .control-button { min-width: 0; padding-inline: 3px; font-size: 0.68rem; }
  .utility-control { padding-inline:2px; }
  .utility-button { width:30px; height:30px; }
  .volume-control { padding-inline: 1px; }
}

@media (max-height: 400px) and (orientation: landscape) {
  .isokratis { padding: 5px 8px; gap: 5px; }
  .topbar { min-height: 30px; }
  .brand > IMG { height: 15px; }
  .performance-mode-button { padding-inline:8px; font-size:.49rem; letter-spacing:.10em; }
  .dashboard { gap: 5px; }
  .readout { min-height: 88px; padding-block: 7px; }
  .eyebrow { font-size: 0.52rem; }
  .readout-status { bottom: 0.75em; font-size: 0.61rem; }
  .tuning-gauge__title { font-size:.43rem; letter-spacing:.12em; }
  .tuning-gauge__svg { max-height: 57px; }
  .tuning-gauge__label { font-size: 13px; }
  .control-label { font-size: 0.47rem; }
  .control-button { font-size: 0.64rem; }
  .utility-control { padding:4px 2px; }
  .utility-button { width:27px; height:27px; border-radius:6px; }
  .utility-icon { width:17px; height:17px; }
  .piano-shell { min-height: 140px; padding: 5px; padding-bottom: calc(5px + env(safe-area-inset-bottom, 0px)); }
  .piano { min-height: 132px; }
}

@media (max-width: 500px) and (orientation: landscape) {
  .tuning-controls { gap:5px; }
  .topbar-controls { gap:5px; }
  .performance-mode-button { padding-inline:6px; font-size:.46rem; }
  .voice-select select { font-size:0.7em; }
  .tuning-gauge__title { left:15px; }
}

@media (max-width: 760px) and (orientation: portrait) {
  body { overflow: hidden; }
  .isokratis { display: none; }
  .portrait-lock {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    padding: 30px;
    color: var(--text);
    background: var(--bg);
    text-align: center;
  }
  .portrait-lock__icon { color: var(--gold-bright); font-size: 3rem; }
  .portrait-lock strong { font-size: 1.25rem; }
  .portrait-lock span { max-width: 270px; color: var(--muted); }
}

/* Inference: prediction motion stays on the key's filter layer. */
.piano .piano-key {
  transition: filter 160ms ease-out;
}

.piano:not(.is-match-targeting) .piano-key.is-prediction-primary.piano-key--white:not(.is-active){
  filter: sepia(0) saturate(0.93) hue-rotate(85deg) brightness(.85) contrast(0.85);
}
.piano:not(.is-match-targeting) .piano-key.is-prediction-secondary.piano-key--white:not(.is-active){ 
  filter: sepia(0) saturate(0.61) hue-rotate(85deg) brightness(.93) contrast(0.95);
}

.piano:not(.is-match-targeting) .piano-key.is-prediction-primary.piano-key--black:not(.is-active) {
  filter: saturate(1.25) hue-rotate(-4deg) brightness(1.58);
}

.piano:not(.is-match-targeting) .piano-key.is-prediction-secondary.piano-key--black:not(.is-active) {
  filter: saturate(1.10) hue-rotate(-4deg) brightness(1.48);
}

@media (prefers-reduced-motion: reduce) {
  .readout--ison:has(.readout-status[data-state="loading"]) #current-ison,
  .readout--ison:has(.readout-status[data-state="loading"]) #current-ison:empty::before,
  .utility-button.is-listening,
  .piano.is-match-targeting::after { animation:none; }
  .piano .piano-key { transition:none; }
}