/* Savilion studio system: an MPC expansion layer over the existing console. */
:root {
  --savi-hardware-highlight: rgba(255,255,255,.26);
  --savi-hardware-shadow: rgba(36,37,31,.20);
}
html[data-savi-skin="2500"] {
  --savi-hardware-highlight: rgba(255,255,255,.08);
  --savi-hardware-shadow: rgba(0,0,0,.34);
}

.savi-header-inner { gap: 14px; }
.savi-function-nav { width: min(100%, 520px); grid-template-columns: repeat(5, minmax(70px, 1fr)); }
.savi-function-key { min-height: 44px; justify-content: center; box-shadow: inset 0 1px 0 var(--savi-hardware-highlight), inset 0 -3px 0 var(--savi-hardware-shadow); }
.savi-function-key:active { transform: translateY(1px); box-shadow: inset 0 1px 0 var(--savi-hardware-shadow); }
.savi-function-key:focus-visible, .savi-home-mode:focus-visible, .savi-expansion-key:focus-visible { outline: 2px solid var(--savi-focus); outline-offset: 3px; }
.savi-cart { border-radius: 3px !important; box-shadow: inset 0 1px 0 var(--savi-hardware-highlight), inset 0 -2px 0 var(--savi-hardware-shadow); }

.savi-home-deck {
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(360px, .94fr);
  gap: 28px;
  align-items: stretch;
  padding: 24px 28px;
  border-bottom: 1px solid var(--savi-border);
  background: var(--savi-case-light);
  box-shadow: inset 0 1px 0 var(--savi-hardware-highlight);
}
.savi-home-deck-copy { min-width: 0; align-self: center; }
.savi-home-deck-code { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; color: var(--savi-ink-soft); font: 600 10px/1.3 var(--savi-mono); letter-spacing: .1em; }
.savi-home-power { width: 8px; height: 8px; display: inline-block; flex: none; border: 1px solid var(--savi-signal-deep); border-radius: 50%; background: var(--savi-signal); box-shadow: 0 0 7px rgba(189,70,47,.38); }
body .savi-home-deck h1 { max-width: 16ch; margin: 0 !important; color: var(--savi-ink) !important; font: 700 clamp(29px, 3.2vw, 48px)/.99 var(--savi-sans) !important; letter-spacing: -.065em; text-transform: uppercase; }
.savi-home-deck h1 span { color: var(--savi-ink-soft); }
.savi-home-deck-copy > p:last-child { max-width: 52ch; margin: 12px 0 0; color: var(--savi-ink-soft); font: 500 13px/1.45 var(--savi-sans); }
.savi-home-modes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; min-width: 0; }
.savi-home-mode { min-width: 0; min-height: 140px; display: flex; flex-direction: column; justify-content: space-between; padding: 13px 14px 12px; border: 1px solid var(--savi-border); border-radius: 4px; background: var(--savi-case-dark); box-shadow: inset 0 1px 0 var(--savi-hardware-highlight), inset 0 -4px 0 var(--savi-hardware-shadow); text-decoration: none !important; }
.savi-home-mode.is-loaded { border-color: var(--savi-panel-dark); background: var(--savi-panel); color: var(--savi-panel-text) !important; }
.savi-home-mode-index, .savi-home-mode-detail { display: flex; align-items: center; justify-content: space-between; gap: 5px; font: 600 9px/1.2 var(--savi-mono); letter-spacing: .045em; }
.savi-home-mode-index { color: var(--savi-ink-soft); }
.savi-home-mode.is-loaded .savi-home-mode-index { color: #c3bbaa; }
.savi-home-mode.is-loaded .savi-home-mode-index::before { content: ""; width: 6px; height: 6px; flex: none; border-radius: 50%; background: var(--savi-signal); box-shadow: 0 0 6px var(--savi-signal); }
.savi-home-mode strong { display: block; overflow-wrap: anywhere; color: inherit; font: 700 clamp(20px, 2.35vw, 35px)/1 var(--savi-sans); letter-spacing: -.055em; }
.savi-home-mode-detail { padding-top: 9px; border-top: 1px solid currentColor; color: inherit; }
body .savi-home-mode:not(.is-loaded) { color: var(--savi-ink) !important; }
html[data-savi-skin="2500"] .savi-home-mode:not(.is-loaded) { background: var(--savi-case-light); }
@media (hover: hover) {
  .savi-home-mode { transition: transform 100ms ease-out, box-shadow 100ms ease-out, border-color 100ms ease-out; }
  .savi-home-mode:hover { transform: translateY(-2px); border-color: var(--savi-signal); box-shadow: inset 0 1px 0 var(--savi-hardware-highlight), inset 0 -5px 0 var(--savi-hardware-shadow), 0 5px 10px var(--savi-hardware-shadow); }
}
.savi-home-mode:active { transform: translateY(1px); box-shadow: inset 0 1px 0 var(--savi-hardware-shadow); }
@media (prefers-reduced-motion: no-preference) {
  .savi-mpc-page.savi-is-playing .savi-home-power,
  .savi-mpc-page.savi-is-playing .savi-home-mode.is-loaded .savi-home-mode-index::before { animation: savi-playback-led 1.2s ease-in-out infinite; }
  @keyframes savi-playback-led { 50% { opacity: .48; box-shadow: 0 0 2px var(--savi-signal); } }
}

.savi-mpc-page .savi-catalog-heading h2 { margin: 0 !important; color: var(--savi-ink) !important; font-size: clamp(24px,3vw,38px) !important; font-weight: 700 !important; letter-spacing: -.07em; line-height: .9; text-transform: uppercase; }
.savi-list-state { padding: 40px 16px; color: var(--savi-ink-soft); font: 500 13px/1.5 var(--savi-mono); text-align: center; }
.savi-list-state button { min-height: 40px; margin-left: 8px; padding: 0 12px; border: 1px solid var(--savi-border); border-radius: 2px; background: var(--savi-case-dark); color: var(--savi-ink); font: 600 11px var(--savi-mono); cursor: pointer; }
.savi-list-state button:focus-visible { outline: 2px solid var(--savi-focus); outline-offset: 2px; }
.savi-mpc-page .savi-machine-panel { box-shadow: inset 0 1px 0 var(--savi-hardware-highlight); }
.savi-mpc-page .savi-catalog-panel { box-shadow: inset 0 1px 0 var(--savi-hardware-highlight); }
.savi-list-scroll-cue { display: flex; align-items: center; gap: 7px; margin: 0 0 7px; color: var(--savi-ink-soft); font: 700 10px/1.3 var(--savi-mono); letter-spacing: .045em; }
.savi-list-scroll-cue > span:last-child { margin-left: auto; color: var(--savi-signal); font-size: 15px; line-height: 10px; }
.savi-scroll-cue-led { width: 6px; height: 6px; flex: none; border-radius: 50%; background: var(--savi-signal); box-shadow: 0 0 5px var(--savi-signal); }
.savi-mpc-page .savi-beat-list { scrollbar-color: var(--savi-signal) var(--savi-case-light); }
.savi-mpc-page .savi-beat-list::-webkit-scrollbar-thumb { background: var(--savi-signal); }
@media (max-width: 900px) { .savi-mpc-page .savi-beat-list { max-height: 390px; overflow-y: auto; overscroll-behavior-y: auto; scrollbar-gutter: stable; -webkit-overflow-scrolling: touch; } }
.savi-catalog-access { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 0 2px; }
.savi-catalog-access > span { color: var(--savi-ink-soft); font: 600 10px/1.3 var(--savi-mono); letter-spacing: .05em; }
.savi-catalog-access a { min-height: 44px; display: inline-flex; align-items: center; justify-content: space-between; gap: 20px; padding: 0 12px; border: 1px solid var(--savi-border); border-radius: 3px; background: var(--savi-case-dark); box-shadow: inset 0 1px 0 var(--savi-hardware-highlight), inset 0 -3px 0 var(--savi-hardware-shadow); color: var(--savi-ink) !important; font: 700 10px/1.2 var(--savi-mono); letter-spacing: .05em; text-decoration: none !important; white-space: nowrap; }
.savi-catalog-access a:hover { border-color: var(--savi-signal); }
.savi-catalog-access a:active { transform: translateY(1px); }
.savi-catalog-access a:focus-visible { outline: 2px solid var(--savi-focus); outline-offset: 3px; }

.savi-expansion-bay { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, .78fr); gap: 28px; align-items: center; padding: 28px; border-top: 1px solid var(--savi-border); background: var(--savi-case-dark); }
.savi-expansion-copy { max-width: 690px; }
.savi-expansion-copy .savi-section-code { display: flex; align-items: center; gap: 10px; color: var(--savi-ink-soft); }
.savi-expansion-led { width: 7px; height: 7px; border-radius: 50%; background: var(--savi-signal); box-shadow: 0 0 7px var(--savi-signal); }
body .savi-expansion-copy h2 { max-width: 20ch; margin: 9px 0 10px !important; color: var(--savi-ink) !important; font: 700 clamp(25px, 3.4vw, 42px)/1.02 var(--savi-sans) !important; letter-spacing: -.055em; text-transform: uppercase; }
.savi-expansion-copy > p:not(.savi-section-code) { max-width: 61ch; margin: 0 0 17px; color: var(--savi-ink-soft); font: 400 14px/1.55 var(--savi-sans); }
.savi-expansion-key { min-height: 44px; width: max-content; display: inline-flex; align-items: center; justify-content: space-between; gap: 24px; padding: 0 14px; border: 1px solid var(--savi-border); border-radius: 3px; background: var(--savi-case-light); box-shadow: inset 0 1px 0 var(--savi-hardware-highlight), inset 0 -3px 0 var(--savi-hardware-shadow); color: var(--savi-ink) !important; font: 600 10px/1.2 var(--savi-mono); letter-spacing: .05em; text-decoration: none !important; }
.savi-expansion-key:active { transform: translateY(1px); }
.savi-expansion-module { min-width: 0; padding: 15px; border: 1px solid var(--savi-border); border-radius: 5px; background: var(--savi-panel); box-shadow: inset 0 2px 0 rgba(255,255,255,.11), inset 0 -5px 0 rgba(0,0,0,.27), 0 7px 16px var(--savi-hardware-shadow); }
.savi-expansion-module-top { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 11px; color: var(--savi-panel-text); font: 600 9px/1.2 var(--savi-mono); letter-spacing: .05em; }
.savi-expansion-module-top span:last-child { display: flex; align-items: center; gap: 7px; }
.savi-expansion-module-top i { width: 6px; height: 6px; border-radius: 50%; background: var(--savi-signal); box-shadow: 0 0 5px var(--savi-signal); }
.savi-expansion-lcd { min-height: 125px; display: flex; flex-direction: column; padding: 12px; border: 2px solid #6c7066; border-radius: 3px; background: repeating-linear-gradient(0deg, rgba(16,31,21,.08) 0 1px, transparent 1px 3px), var(--savi-lcd); box-shadow: inset 0 0 0 2px rgba(33,48,35,.16); color: var(--savi-lcd-deep); font-family: var(--savi-mono); }
.savi-expansion-lcd span, .savi-expansion-lcd small { font-size: 9px; font-weight: 600; letter-spacing: .04em; }
.savi-expansion-lcd strong { margin: 5px 0 2px; font: 700 clamp(18px, 2.7vw, 30px)/1 var(--savi-sans); letter-spacing: -.055em; }
.savi-expansion-meter { height: 16px; display: flex; align-items: end; gap: 3px; margin-top: auto; padding-top: 9px; }
.savi-expansion-meter i { width: 6px; height: 4px; display: block; background: var(--savi-lcd-deep); opacity: .72; }
.savi-expansion-meter i:nth-child(3n+1) { height: 9px; }.savi-expansion-meter i:nth-child(4n+2) { height: 13px; }.savi-expansion-meter i:nth-child(7n+5) { height: 6px; }
.savi-expansion-pads { display: grid; grid-template-columns: repeat(8, 1fr); gap: 5px; margin-top: 11px; }
.savi-expansion-pads i { aspect-ratio: 1.5; min-height: 13px; border: 1px solid #67695f; border-radius: 2px; background: #51534a; box-shadow: inset 0 1px 0 rgba(255,255,255,.12), inset 0 -2px 0 rgba(0,0,0,.25); }
.savi-expansion-pads i:first-child { background: var(--savi-signal); }

.savi-contact-page { width: min(1280px, calc(100% - 32px)); margin: 16px auto 40px; overflow: hidden; border: 1px solid var(--savi-border); border-radius: 8px; background: var(--savi-case); box-shadow: 0 18px 42px var(--savi-hardware-shadow); color: var(--savi-ink); }
.savi-contact-topline, .savi-contact-machine-top, .savi-contact-footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; font: 600 10px/1.3 var(--savi-mono); letter-spacing: .06em; }
.savi-contact-topline { padding: 14px 28px; border-bottom: 1px solid var(--savi-border); background: var(--savi-case-light); }
.savi-contact-console { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, .8fr); gap: 40px; align-items: center; padding: 44px 40px; }
.savi-contact-copy .savi-section-code { display: flex; align-items: center; gap: 8px; color: var(--savi-ink-soft); }
body .savi-contact-copy h1 { max-width: 15ch; margin: 13px 0 15px !important; color: var(--savi-ink) !important; font: 700 clamp(36px, 4.7vw, 66px)/.98 var(--savi-sans) !important; letter-spacing: -.065em; text-transform: uppercase; }
.savi-contact-copy > p:not(.savi-section-code) { max-width: 48ch; margin: 0 0 22px; color: var(--savi-ink-soft); font: 400 16px/1.55 var(--savi-sans); }
.savi-contact-primary { min-height: 48px; min-width: 198px; display: inline-flex; align-items: center; justify-content: space-between; gap: 28px; padding: 0 14px; border: 1px solid var(--savi-panel-dark); border-radius: 3px; background: var(--savi-panel); box-shadow: inset 0 1px 0 rgba(255,255,255,.12), inset 0 -3px 0 rgba(0,0,0,.22); font: 600 11px/1.2 var(--savi-mono); letter-spacing: .05em; text-decoration: none !important; }
body .savi-contact-primary { color: var(--savi-panel-text) !important; }
.savi-contact-primary:focus-visible, .savi-contact-channels a:focus-visible, .savi-contact-footer a:focus-visible { outline: 2px solid var(--savi-focus); outline-offset: 3px; }
.savi-contact-primary:active, .savi-contact-channels a:active { transform: translateY(1px); }
.savi-contact-machine { padding: 17px; border: 1px solid var(--savi-border); border-radius: 5px; background: var(--savi-case-dark); box-shadow: inset 0 1px 0 var(--savi-hardware-highlight), inset 0 -4px 0 var(--savi-hardware-shadow), 0 7px 18px var(--savi-hardware-shadow); }
.savi-contact-machine-top { margin-bottom: 12px; color: var(--savi-ink-soft); }
.savi-contact-machine-top span:last-child { display: flex; align-items: center; gap: 7px; }
.savi-contact-machine-top i { width: 7px; height: 7px; display: block; border-radius: 50%; background: var(--savi-signal); box-shadow: 0 0 7px var(--savi-signal); }
.savi-contact-screen { min-height: 200px; display: flex; flex-direction: column; padding: 18px; border: 2px solid #6c7066; border-radius: 3px; background: repeating-linear-gradient(0deg, rgba(16,31,21,.08) 0 1px, transparent 1px 3px), var(--savi-lcd); box-shadow: inset 0 0 0 2px rgba(33,48,35,.18); color: var(--savi-lcd-deep); font-family: var(--savi-mono); }
.savi-contact-screen small, .savi-contact-screen span { font-size: 10px; font-weight: 600; letter-spacing: .04em; }
.savi-contact-screen strong { margin: 20px 0 4px; font: 700 clamp(22px, 2.8vw, 37px)/1 var(--savi-sans); letter-spacing: -.06em; }
.savi-contact-screen-lines { display: flex; align-items: end; gap: 4px; height: 30px; margin-top: auto; border-top: 1px solid rgba(38,52,41,.38); }
.savi-contact-screen-lines i { width: 7px; height: 10px; display: block; background: var(--savi-lcd-deep); opacity: .7; }.savi-contact-screen-lines i:nth-child(3n) { height: 20px; }.savi-contact-screen-lines i:nth-child(4n) { height: 14px; }
.savi-contact-faux-keys { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 14px; }
.savi-contact-faux-keys i { height: 27px; border: 1px solid var(--savi-border); border-radius: 2px; background: var(--savi-case-light); box-shadow: inset 0 1px 0 var(--savi-hardware-highlight), inset 0 -3px 0 var(--savi-hardware-shadow); }
.savi-contact-faux-keys i:first-child { background: var(--savi-signal); }
.savi-contact-channels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--savi-border); border-bottom: 1px solid var(--savi-border); }
.savi-contact-channels a { min-width: 0; min-height: 165px; display: flex; flex-direction: column; padding: 19px 22px; background: var(--savi-case-light); color: var(--savi-ink) !important; text-decoration: none !important; }
.savi-contact-channels a + a { border-left: 1px solid var(--savi-border); }
.savi-contact-channels a span { color: var(--savi-ink-soft); font: 600 10px/1.2 var(--savi-mono); letter-spacing: .05em; }
.savi-contact-channels a strong { margin: 15px 0; font: 700 clamp(18px, 2vw, 24px)/1.1 var(--savi-sans); letter-spacing: -.04em; }
.savi-contact-channels a small { display: flex; justify-content: space-between; gap: 8px; margin-top: auto; color: var(--savi-ink-soft); font: 600 10px/1.4 var(--savi-mono); }
.savi-contact-channels a b { color: var(--savi-signal); }
@media (hover: hover) { .savi-contact-channels a:hover { background: var(--savi-case-dark); }.savi-contact-primary:hover { border-color: var(--savi-signal); } }
.savi-contact-footer { padding: 17px 22px; color: var(--savi-ink-soft); }
.savi-contact-footer a { color: var(--savi-ink) !important; text-underline-offset: 3px; }

/* The older theme has !important modal rules; keep the picker in this skin. */
html body .savi-modal-overlay .savi-modal { max-width: 480px; border: 1px solid var(--savi-border) !important; border-radius: 5px !important; background: var(--savi-case) !important; color: var(--savi-ink) !important; box-shadow: 0 18px 48px rgba(0,0,0,.44), inset 0 1px 0 var(--savi-hardware-highlight) !important; }
html body .savi-modal-overlay .savi-modal-header { padding: 17px 20px 14px; border-bottom: 1px solid var(--savi-border) !important; background: var(--savi-case-dark) !important; }
html body .savi-modal-overlay .savi-modal-header h3 { align-self: center; margin: 0 !important; color: var(--savi-ink) !important; font: 700 23px/1.05 var(--savi-sans) !important; letter-spacing: -.055em; text-transform: uppercase; }
html body .savi-modal-overlay .savi-modal-close { width: 40px !important; height: 40px !important; flex: none; padding: 0 !important; border: 1px solid var(--savi-border) !important; border-radius: 2px !important; background: var(--savi-case-light) !important; box-shadow: inset 0 1px 0 var(--savi-hardware-highlight), inset 0 -2px 0 var(--savi-hardware-shadow) !important; color: var(--savi-ink) !important; font: 500 23px/1 var(--savi-sans) !important; }
html body .savi-modal-overlay .savi-modal-subtitle { margin: 16px 20px 0; padding: 11px 12px; border: 2px solid #6c7066; border-radius: 2px; background: repeating-linear-gradient(0deg, rgba(16,31,21,.08) 0 1px, transparent 1px 3px), var(--savi-lcd) !important; box-shadow: inset 0 0 0 2px rgba(33,48,35,.15); color: var(--savi-lcd-deep) !important; font: 600 12px/1.25 var(--savi-mono) !important; text-transform: uppercase; }
html body .savi-modal-overlay .savi-modal-body { padding: 14px 20px 17px; }
html body .savi-modal-overlay .savi-license-option { min-height: 70px; gap: 12px; padding: 11px 12px !important; border: 1px solid var(--savi-border) !important; border-radius: 2px !important; background: var(--savi-case-light) !important; box-shadow: inset 0 1px 0 var(--savi-hardware-highlight), inset 0 -3px 0 var(--savi-hardware-shadow) !important; color: var(--savi-ink) !important; }
html body .savi-modal-overlay .savi-license-name { color: var(--savi-ink) !important; font: 700 14px/1.25 var(--savi-sans) !important; }
html body .savi-modal-overlay .savi-license-desc { color: var(--savi-ink-soft) !important; font: 500 11px/1.4 var(--savi-sans) !important; }
html body .savi-modal-overlay .savi-license-price { min-width: 55px; margin-left: 0; padding: 7px 6px; border: 1px solid #6c7066; border-radius: 2px; background: var(--savi-lcd) !important; color: var(--savi-lcd-deep) !important; font: 700 14px/1.2 var(--savi-mono) !important; text-align: center; }
html body .savi-modal-overlay .savi-modal-footer { padding: 0 20px 20px; }
html body .savi-modal-overlay .savi-modal-footer p { color: var(--savi-ink-soft) !important; font: 500 11px/1.5 var(--savi-sans); }
html body .savi-modal-overlay .savi-modal-footer a { color: var(--savi-ink) !important; }
@media (hover: hover) { html body .savi-modal-overlay .savi-license-option:hover { border-color: var(--savi-signal) !important; background: var(--savi-case-dark) !important; transform: translateY(-1px); } }
html body .savi-modal-overlay .savi-license-option:focus-visible, html body .savi-modal-overlay .savi-modal-close:focus-visible, html body .savi-modal-overlay .savi-modal-footer a:focus-visible { outline: 2px solid var(--savi-focus) !important; outline-offset: 2px; }

@media (max-width: 1000px) { .savi-home-deck { grid-template-columns: 1fr; gap: 19px; }.savi-home-deck h1 { max-width: none !important; }.savi-expansion-bay { grid-template-columns: 1fr 1fr; } }
@media (max-width: 900px) { .savi-function-nav { width: min(100%, 520px); }.savi-home-deck { padding: 19px 20px 20px; }.savi-expansion-bay { grid-template-columns: 1fr; }.savi-expansion-module { max-width: 600px; width: 100%; } }
@media (max-width: 900px) { .savi-contact-console { grid-template-columns: 1fr; gap: 24px; }.savi-contact-machine { max-width: 590px; width: 100%; } }
@media (max-width: 680px) {
  .savi-function-nav { width: 100%; grid-template-columns: repeat(2, minmax(0,1fr)); }
  .savi-home-deck { gap: 17px; padding: 18px 13px; }
  body .savi-home-deck h1 { max-width: 15ch !important; font-size: clamp(28px, 8vw, 39px) !important; }
  .savi-home-deck-copy > p:last-child { margin-top: 9px; font-size: 12px; }
  .savi-home-mode { min-height: 112px; padding: 10px; }
  .savi-home-mode strong { font-size: clamp(19px, 5.3vw, 27px); }
  .savi-home-mode-index, .savi-home-mode-detail { font-size: 7px; }
  .savi-catalog-access { align-items: stretch; flex-direction: column; }
  .savi-catalog-access a { width: 100%; }
  .savi-expansion-bay { gap: 20px; padding: 22px 14px; }
  .savi-expansion-copy > p:not(.savi-section-code) { font-size: 13px; }
  .savi-contact-page { width: calc(100% - 18px); }.savi-contact-topline { padding: 12px 14px; font-size: 8px; }.savi-contact-console { padding: 27px 14px; }
  body .savi-contact-copy h1 { font-size: clamp(35px, 10vw, 50px) !important; }.savi-contact-copy > p:not(.savi-section-code) { font-size: 14px; }
  .savi-contact-screen { min-height: 160px; }.savi-contact-channels { grid-template-columns: 1fr; }.savi-contact-channels a { min-height: 130px; }.savi-contact-channels a + a { border-left: 0; border-top: 1px solid var(--savi-border); }
  .savi-contact-footer { flex-direction: column; align-items: flex-start; padding: 16px 14px; font-size: 9px; }
}
@media (prefers-reduced-motion: reduce) { .savi-home-mode, .savi-function-key, .savi-expansion-key, .savi-catalog-access a { transition: none !important; } }