@font-face {
  font-family: 'Ogg';
  src: url('fonts/Ogg-Regular.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'GTflexa';
  src: url('fonts/GT-Flexa-Standard-Regular.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'TINY5x3-80';
  src: url('fonts/TINY5x3-80.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Badger';
  src: url('fonts/Badger.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

.tiny5x3 {
  font-family: 'TINY5x3-80';
}



:root {
    --cf-light: #fcf9f6;
    --cf-dark: #232322;
    --cf-accent: #ff7d00;
    --cf-font-heading: 'Ogg';
    --cf-font-body: 'GTflexa';
    --cf-page-bg-selection: #424242;
    --cf-page-bg-update: #232322;
}


.app_body {
    overflow: hidden;
    position: relative;
    background-color: transparent;
}

.app_body::before {
    z-index: -1;
    content: ' ';
    position: fixed;
    opacity: 0.1;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background-position: center center;
    background-size: 120%;
}

a {
    color: var(--cf-accent);
}

.dark-section {
  background-color: var(--cf-dark);
  color: var(--cf-light);
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  padding: 60px 0;
  z-index: 0;
}

.section-inner {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 20px;
}

html {
  background: var(--cf-page-bg-update);
  margin: 0;
}

body {
  background: var(--cf-page-bg-update);
  margin: 0;
  color: #232322;
  font-family: 'GTflexa';
  line-height: 1.6;
}
legend, h1, h2, h3 {
  font-family: 'Ogg';
  margin-top: 0;
  margin-bottom: 1.5rem;
}



p, ul, ol {
  margin-top: 0;
  margin-bottom: 1rem;
}


.info {
    text-align: left;
}

table {
    border-collapse: collapse;
}

table,
th,
td {
    border: 1px solid var(--cf-light);
}

.collapse-container {
    padding: 12px;
}

.collapse-container .btn-block {
    width: 100%;
}

.btn {
    padding: 0.5rem 1rem;
}

.btn-primary,
.btn-primary:hover,
.btn-primary:active,
.btn-primary:focus {
    background-color: var(--cf-accent) !important;
    color: var(--cf-light);
    border: 1px transparent solid;
}

.btn:hover {
    filter: brightness(110%);
}

.btn:active {
    border-color: transparent !important;
    filter: brightness(90%);
}

.btn.disabled {
    background-color: transparent !important;
    border-color: var(--cf-dark);
    color: var(--cf-dark);
}

.app_body {
    background-color: transparent;
}




.section-content {
  max-width: none;
  margin: 0 auto;
  text-align: left;
  width: 100%;
  padding: 20px;
  box-sizing: border-box;
}

.section-content,
.clear-section,
.cream-section {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.accordion_panel {
    margin-top: 20px;
}

.accordion_panel h2,
h3 {
    margin-bottom: 1rem;
}

.collapsed>.when-open,
.not-collapsed>.when-closed {
    display: none;
}

.pgm_row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin: 1rem 0;
  width: 100%;
  max-width: none;
}

.pgm_row .label {
  width: 90%;
  padding-bottom: 4px; /* Adjust underline padding */
}

.footer {
    margin: 2rem 0 0 0;
}

.status_container {
    margin: 1.5rem 0;
}

progress {
    margin-bottom: 10px;
}

progress[value] {
    appearance: none;
    -webkit-appearance: none;
    height: 10px;
    width: 100%;
}

progress[value]::-webkit-progress-bar {
    background-color: var(--cf-light);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5) inset;
}

progress[value]::-webkit-progress-value {
    background-color: var(--cf-accent);
    border-radius: 2px;
    background-size: 100% 100%;
}

.log {
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
    padding: 1.5rem;
    color: var(--cf-dark);
    background-color: var(--cf-light);

}

.log p {
    font-family: 'Courier New', Courier, monospace;
    font-size: 18px;
}

.log .error {
    color: red;
}

ul, ol {
  margin-bottom: 1.5rem;
  padding-left: 1.4rem;
}

/* Instructions and troubleshooting items are full sentences; the gap between
   them is what keeps the list from reading as one block of text. Within an
   item the leading is tighter than the body default so a sentence that wraps
   still reads as one unit. */
ul li, ol li {
  margin-bottom: 0.85rem;
  line-height: 1.4;
}

ul li p, ol li p {
  margin-bottom: 0;
}

/* The windows driver note is one troubleshooting bullet that runs to several
   paragraphs and two numbered step lists. The rule above zeroes the margin of
   every p inside a list item, so a uniform sibling gap is applied instead; the
   nested lists also drop the page-level list bottom margin. */
.windows-note > * + *,
.windows-note-steps > * + * {
  margin-top: 0.75rem;
}

.windows-note ul,
.windows-note ol {
  margin-bottom: 0;
}

/* Each "follow these steps" / "note:" intro and its step list is indented one
   level in from the rest of the note. */
.windows-note-steps {
  padding-left: 1.2rem;
}

#changelog ul {
  padding-left: 2rem;
}

#changelog ul li {
  margin-bottom: 0.1rem;
  line-height: 1.3;
}

.cf-dark-section {
  background: var(--cf-dark, #181a1b);
  color: var(--cf-light, #f8f9fa);
  padding: 2rem 1rem 1rem 1rem;
  border-radius: 0.5rem;
  margin-top: 2rem;
  margin-bottom: 2rem;
}

.cf-dark-section a {
  color: var(--cf-light, #f8f9fa);
}

.cf-dark-section h1 {
  text-align: center;
  margin-top: 1rem;
  margin-bottom: 1rem;
}

#connect.btn-primary,
#connect.btn-danger,
#download.btn-primary {
  min-width: 140px;
  display: inline-block;
  text-align: center;
}
#download.btn-primary:disabled {
  background-color: #ffbb66 !important;
  border-color: #ffbb66 !important;
  color: var(--cf-light) !important;
}

.cf-dark-section .log {
  background-color: var(--cf-dark, #181a1b);
  color: var(--cf-light, #f8f9fa);
}

/* Programming section styling */
.programming-section-styling {
  background: var(--cf-light);
  color: #232322;
  padding: 1rem;
  border-radius: 0.5rem;
  margin-top: 1rem;
  margin-bottom: 1rem;
  box-shadow: 0 4px 24px rgba(0,0,0,0.08), 0 1.5px 6px rgba(0,0,0,0.10);
}

.programming-section-styling h1,
.programming-section-styling h2,
.programming-section-styling h3,
.programming-section-styling p,
.programming-section-styling ul,
.programming-section-styling li,
.programming-section-styling span,
.programming-section-styling label {
  color: #232322;
}

.programming-section-styling .btn,
.programming-section-styling .btn-primary,
.programming-section-styling .btn-danger {
  background: var(--cf-accent, #ff7d00) !important;
  color: var(--cf-light) !important;
  border-color: var(--cf-accent, #ff7d00) !important;
}

.programming-section-styling .btn:disabled,
.programming-section-styling .btn-primary:disabled,
.programming-section-styling .btn-danger:disabled {
  background: #ffbb66 !important;
  color: var(--cf-light) !important;
  border-color: #ffbb66 !important;
}

.cream-section .pgm_row .label {
  border-bottom: none;
}

.pgm_target {
  margin-bottom: 0.25rem;
}

.pgm_target strong {
  color: var(--cf-dark);
}

.pgm_warning {
  margin-bottom: 0;
  font-style: italic;
  opacity: 0.75;
}

.clear-section {
  background: transparent;
  color: #232322;
  padding: 1rem;
  border-radius: 0.5rem;
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.app_body,
b-container,
.b-container {
  max-width: none;
  width: 100%;
  margin-left: 0;
  margin-right: 0;
}

details > summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  user-select: none;
}

details > summary::-webkit-details-marker {
  display: none;
}

details > summary h3 {
  margin-bottom: 0;
  display: inline;
}

details > summary::before {
  content: '▶';
  font-size: 1em;
  transition: transform 0.2s;
  flex-shrink: 0;
}

details[open] > summary::before {
  transform: rotate(90deg);
}

details > summary + * {
  margin-top: 1rem;
}

/* Device selection screen */
.device-selection-page {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: var(--cf-page-bg-selection);
  display: flex;
  flex-direction: column;
  padding: 3rem 2rem 2rem;
  box-sizing: border-box;
  z-index: 10;
}

.device-selection-title {
  color: var(--cf-light);
  font-family: 'Ogg';
  font-size: 3.25rem;
  line-height: 1.2;
  text-align: center;
  text-shadow: 0 2px 10px rgba(0,0,0,0.5);
  margin-bottom: 2rem;
  flex-shrink: 0;
}

.device-grid {
  display: flex;
  gap: 1.5rem;
  flex: 1;
  min-height: 0;
}

.device-card {
  flex: 1;
  position: relative;
  cursor: pointer;
  border-radius: 0.75rem;
  overflow: hidden;
  background-color: #111;
  display: flex;
  align-items: flex-end;
  min-height: 0;
}

/* The photo lives on its own layer so hover can blur it without touching the
   name on top. Scaled slightly past the frame so the blur cannot pull
   transparent edges into view. */
.device-card-photo {
  position: absolute;
  inset: -2%;
  z-index: 0;
  background-size: cover;
  background-position: center;
  transition: filter 0.35s ease, transform 0.35s ease;
  will-change: filter;
}

.device-card:hover .device-card-photo,
.device-card:focus-visible .device-card-photo {
  filter: blur(6px);
  transform: scale(1.04);
}

/* Permanent scrim: the device photos vary from near-black to pale grey, and the
   white marks disappear against the light one on their own. */
.device-card::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.25) 30%, rgba(0, 0, 0, 0) 55%);
  pointer-events: none;
}

.device-card:focus-visible {
  outline: 2px solid var(--cf-accent);
  outline-offset: 3px;
}

.device-unsupported-notice {
  flex-shrink: 0;
  margin-bottom: 1.5rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--cf-accent);
  border-radius: 0.5rem;
  color: var(--cf-light);
  text-align: center;
}

.device-card-name {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 0.3em;
  min-width: 0;
  color: var(--cf-light);
  font-family: 'Ogg';
  font-size: 2.2rem;
  line-height: 1.2;
  padding: 1.5rem;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.7);
  /* Grows from the bottom-left so the name stays anchored to the card corner
     instead of drifting as it scales. */
  transform-origin: left bottom;
  transition: transform 0.35s ease;
}

.device-card:hover .device-card-name,
.device-card:focus-visible .device-card-name {
  transform: scale(1.18);
}

/* Square device mark sits at full cap height; the wordmark is a logotype, so it
   is set slightly shorter to optically match typeset names like "ALT". */
.device-card-logo {
  height: 1em;
  width: auto;
  flex-shrink: 0;
  filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.7));
}

.device-card-wordmark {
  height: 1em;
  width: auto;
  min-width: 0;
  filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.7));
}

/* Release note link (draft, 20/10): a pill button in the device colour --
   cyma forma orange for ALT, RND orange for RND synth -- under the title of the
   update page. */
.release-note-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.6rem 1.2rem;
  border-radius: 999px;
  background: var(--cf-accent);
  color: var(--cf-light);
  font-family: 'GTflexa';
  font-size: 1.05rem;
  line-height: 1.2;
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.release-note-link--rnd-synth {
  background: #f75726;
}

.release-note-link:hover,
.release-note-link:focus-visible {
  color: var(--cf-light);
  text-decoration: none;
  opacity: 0.8;
}

.release-note-link--hero {
  margin: -24px 0 2.5rem;
}

.update-page .pgm_target a {
  color: var(--cf-accent);
}

@media (max-width: 640px) {
  .device-selection-page {
    padding: 2rem 1rem 1rem;
  }

  .device-selection-title {
    font-size: 2.2rem;
    margin-bottom: 1.25rem;
  }

  .device-grid {
    flex-direction: column;
  }

  .device-card {
    flex: none;
    height: 40vh;
  }

  .release-note-link--hero {
    margin: -1rem 0 2rem;
  }
}

/* Update (flashing) page */
.update-page .log:empty {
  display: none;
}

.update-page {
  background: var(--cf-page-bg-update);
  color: var(--cf-light);
  min-height: 100vh;
  padding: 2rem 1.5rem 3rem;
  box-sizing: border-box;
}

.update-page .clear-section {
  color: var(--cf-light);
  background: transparent;
}

.update-page .clear-section a {
  color: var(--cf-accent);
}

.update-page details > summary h3 {
  color: var(--cf-light);
}

.update-page .accordion_panel .clear-section {
  color: var(--cf-light);
}

.update-back-link {
  display: inline-block;
  margin-bottom: 1.5rem;
  color: var(--cf-accent);
  font-family: 'GTflexa';
  font-size: 0.95rem;
  text-decoration: none;
  letter-spacing: 0.02em;
}

.update-back-link:hover {
  text-decoration: underline;
  color: var(--cf-accent);
}

.update-header {
  margin-bottom: 0;
}

/* Hero banner */

.hero-title-overlay {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.25em;
  font-size: 3.25rem;
  padding-top: 0.5rem;
  padding-bottom: 54px;
}

.hero-logo {
  height: 1em;
  width: auto;
  flex-shrink: 0;
  filter: drop-shadow(0 2px 10px rgba(0,0,0,0.5));
}

.hero-wordmark {
  height: 1em;
  width: auto;
  min-width: 0;
  filter: drop-shadow(0 2px 10px rgba(0,0,0,0.5));
}

.hero-title-name,
.hero-title-fw {
  font-family: 'Ogg';
  color: var(--cf-light);
  line-height: 1.2;
  margin: 0;
  text-shadow: 0 2px 10px rgba(0,0,0,0.5);
}

/* Pushed to the far edge, opposite the device mark. */
.hero-title-fw {
  margin-left: auto;
  padding-left: 1rem;
  white-space: nowrap;
}

/* RND synth carries its own display face. Everything the shared rules set in Ogg
   -- section headings and the hero -- switches to Badger on this device's page
   only; body copy stays in GTflexa. Must sit after the rules it overrides. */
.device-rnd-synth h1,
.device-rnd-synth h2,
.device-rnd-synth h3,
.device-rnd-synth legend,
.device-rnd-synth .hero-title-name,
.device-rnd-synth .hero-title-fw {
  font-family: 'Badger';
  /* Badger's advances are far narrower than its ink, so adjacent strokes
     overlap -- at default tracking the dot of "i" merges into the preceding
     "t" and "Instructions" reads as "Instructons". This buys back the gap. */
  letter-spacing: 0.07em;
}

/* Must stay after the base hero rules above, or source order beats it. Narrow
   screens cannot fit mark + logotype + "Firmware updater" on one line, and
   .app_body is overflow:hidden, so anything too wide is silently clipped rather
   than scrollable. Drop to one stacked, left-aligned column instead. */
@media (max-width: 640px) {
  .update-page {
    padding: 1.5rem 0.75rem 2rem;
  }

  .hero-title-overlay {
    font-size: 2rem;
    padding-top: 0;
    padding-bottom: 2rem;
  }

  .hero-title-fw {
    margin-left: 0;
    padding-left: 0;
    white-space: normal;
    width: 100%;
  }
}

/* Link to the cyma forma home page (draft, 20/10): the same pill as the
   cymaforma.com header -- white logotype on translucent black, blurred backdrop,
   top left, same sizes and spacing at each screen width. */
.cf-home-pill {
  position: fixed;
  top: 14px;
  left: 4vw;
  z-index: 20;
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 30px;
  background-color: rgba(0, 0, 0, 0.3);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  transition: opacity 0.2s ease;
}

.cf-home-pill:hover {
  opacity: 0.8;
}

.cf-home-pill img {
  display: block;
  height: auto;
  width: auto;
  max-height: 30px;
}

/* room for the pill above the page content */
.device-selection-page {
  padding-top: 76px;
}

.update-page {
  padding-top: 76px;
}

@media (min-width: 1500px) {
  .cf-home-pill {
    padding: 0 10px;
    border-radius: 100px;
  }

  .cf-home-pill img {
    max-height: 50px;
  }

  .device-selection-page,
  .update-page {
    padding-top: 88px;
  }
}

@media (max-width: 768px) {
  .cf-home-pill {
    padding: 1px 10px;
  }

  .cf-home-pill img {
    max-height: 28px;
  }

  .device-selection-page,
  .update-page {
    padding-top: 68px;
  }
}