:root {
  --paper: #f1f5f4;
  --panel: #ffffff;
  --ink: #0e1b18;
  --ink-soft: #4a5b56;
  --line: #d8e2df;
  --screen: #0b1512;
  --signal: #00c08b;
  --signal-dim: #0a6f55;
  --warn: #b5482a;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --shadow-panel: 0 1px 2px rgb(14 27 24 / 6%), 0 12px 32px -12px rgb(14 27 24 / 14%);
  --font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", "Noto Sans Arabic",
    "Noto Sans Devanagari", "Noto Sans JP", "Noto Sans KR", "PingFang SC", sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", monospace;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1.6;
  text-rendering: optimizeLegibility;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  inset-inline-start: 1rem;
  top: -4rem;
  z-index: 20;
  padding: 0.5rem 1rem;
  background: var(--ink);
  color: var(--paper);
  border-radius: var(--radius-sm);
  text-decoration: none;
}

.skip-link:focus {
  top: 1rem;
}

:focus-visible {
  outline: 2px solid var(--signal-dim);
  outline-offset: 3px;
}

/* ---------- header ---------- */

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  max-width: 1080px;
  margin: 0 auto;
  padding: 1.25rem 1.5rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: inherit;
  text-decoration: none;
  font-weight: 650;
  letter-spacing: -0.02em;
}

.brand-mark {
  width: 18px;
  height: 18px;
  border-radius: 5px;
  background: var(--ink);
  position: relative;
}

.brand-mark::after {
  content: "";
  position: absolute;
  inset: 5px;
  border-radius: 50%;
  background: var(--signal);
}

.locale-nav {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8rem;
}

.locale-select {
  font: inherit;
  font-size: 0.8rem;
  padding: 0.4rem 2rem 0.4rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--panel);
  color: var(--ink);
  cursor: pointer;
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-soft) 50%),
    linear-gradient(135deg, var(--ink-soft) 50%, transparent 50%);
  background-position: calc(100% - 1rem) 55%, calc(100% - 0.65rem) 55%;
  background-size: 6px 6px;
  background-repeat: no-repeat;
}

.locale-select:disabled {
  opacity: 0.65;
  cursor: progress;
}

[dir="rtl"] .locale-select {
  padding: 0.4rem 0.7rem 0.4rem 2rem;
  background-position: 0.65rem 55%, 1rem 55%;
}

.locale-nav noscript {
  font-size: 0.72rem;
}

.locale-nav noscript a {
  margin-inline-start: 0.4rem;
  color: var(--ink-soft);
}

/* ---------- layout ---------- */

.shell {
  max-width: 1080px;
  margin: 0 auto;
  padding: 1rem 1.5rem 4rem;
}

/* The tool is the whole page, so the headline sits centred over a container
   that both the header, the maker and the footer share. */
.hero {
  max-width: 52rem;
  margin-inline: auto;
  padding: 0 0 2rem;
  text-align: center;
}

.h1-accent {
  color: var(--signal-dim);
}

h1 {
  margin: 0 0 0.75rem;
  font-size: clamp(2.1rem, 6vw, 3.4rem);
  line-height: 1.05;
  letter-spacing: -0.035em;
  font-weight: 650;
  text-wrap: balance;
}

.lede {
  margin: 0 auto;
  font-size: clamp(1rem, 2.2vw, 1.175rem);
  color: var(--ink-soft);
  max-width: 48rem;
  text-wrap: balance;
}

.hero-note {
  margin: 0.9rem auto 0;
  max-width: 52ch;
  font-size: 0.82rem;
  color: var(--ink-soft);
  opacity: 0.85;
}

h2 {
  margin: 0 0 1rem;
  font-size: 1.35rem;
  letter-spacing: -0.02em;
  font-weight: 650;
}

/* One full-width workbench: every step happens in place, so nothing needs a
   side column. */
.maker {
  display: block;
}

.panel {
  background: var(--panel);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-panel);
  padding: clamp(1.1rem, 3vw, 2rem);
}

/* ---------- upload ---------- */

.dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.65rem;
  padding: 2.75rem 1.5rem;
  border: 1.5px dashed var(--line);
  border-radius: var(--radius-md);
  text-align: center;
  cursor: pointer;
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
}

.dropzone:hover,
.dropzone:focus-visible,
.dropzone.is-dragging {
  border-color: var(--signal);
  background: #f7fbfa;
}

.drop-icon {
  width: 34px;
  height: 34px;
  color: var(--signal-dim);
}

.dropzone-main {
  margin: 0;
  font-weight: 550;
}

.hint {
  margin: 0;
  font-size: 0.8rem;
  color: var(--ink-soft);
  max-width: 44ch;
}

/* Light card, so it reads as part of the panel instead of a dark slab. The
   mint tint is the same hue as the signal colour, kept very pale. */
.file-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.75rem 1rem;
  margin-top: 0.25rem;
  padding: 0.85rem 1rem;
  border: 1px solid #cfe8e0;
  border-radius: var(--radius-md);
  background: #f2fbf8;
  color: var(--ink);
}

.file-card-icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #e0f5ee;
  color: var(--signal-dim);
}

.file-card-icon svg {
  width: 19px;
  height: 19px;
}

.file-card-body {
  min-width: 0;
}

.file-card-name {
  margin: 0;
  font-size: 0.92rem;
  font-weight: 550;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.file-card-stats {
  margin: 0.15rem 0 0;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.01em;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}

.file-card-actions {
  display: flex;
  gap: 0.4rem;
}

.file-card .btn-quiet {
  background: var(--panel);
  border-color: #cfe8e0;
  color: var(--ink-soft);
  font-size: 0.78rem;
  padding: 0.35rem 0.7rem;
}

.file-card .btn-quiet:hover {
  border-color: var(--signal);
  color: var(--ink);
}

.file-card-remove:hover {
  border-color: #d99a86;
  color: var(--warn);
}

/* The restored-session banner sits above the editor it belongs to. Mint, like
   the file card, because it reports a normal state rather than a problem. */
.resume-note {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.35rem 1rem;
  margin: 0 0 0.9rem;
  padding: 0.6rem 0.85rem;
  border-radius: var(--radius-sm);
  background: #eef8f4;
  border-inline-start: 3px solid var(--signal);
  color: var(--ink-soft);
  font-size: 0.78rem;
}

.resume-note-text {
  flex: 1 1 18rem;
  min-width: 0;
}

.resume-note .link-button {
  flex: 0 0 auto;
  color: var(--signal-dim);
  text-decoration-color: currentcolor;
}

.alert {
  margin: 1rem 0 0;
  padding: 0.75rem 0.9rem;
  border-radius: var(--radius-sm);
  background: #fdf1ee;
  color: var(--warn);
  font-size: 0.9rem;
  border-inline-start: 3px solid var(--warn);
}

.alert-warn {
  margin: 0;
  background: #fff8e6;
  color: #7a5300;
  border-inline-start-color: #c98a00;
}

/* ---------- trimmer ---------- */

/* `hidden` must win over the layout display value or the empty editor shows
   before a file is loaded. */
[hidden] {
  display: none !important;
}

.trimmer {
  margin-top: 1.5rem;
  display: grid;
  gap: 1.1rem;
}

.screen {
  position: relative;
  background: var(--screen);
  border-radius: var(--radius-md);
  padding: 0.9rem 0.9rem 0.55rem;
  overflow: hidden;
}

/* The track and its playhead share a positioning context, so the cursor is
   measured from the canvas rather than from the padded panel. */
.screen-track {
  position: relative;
}

.waveform {
  display: block;
  width: 100%;
  height: 150px;
  touch-action: none;
  cursor: ew-resize;
}

/* The level, drawn across the track the way an automation line is drawn in an
   editor. It is a readout only: pointer-events stay off, so it can never take
   a click, a wheel or a double-click away from the handles underneath. */
.volume-line {
  position: absolute;
  inset-inline: 0;
  height: 0;
  border-top: 2px dashed rgb(255 255 255 / 92%);
  filter: drop-shadow(0 0 2px rgb(0 0 0 / 90%));
  pointer-events: none;
  transition: top 0.12s var(--ease);
}

.volume-line.is-dragging {
  transition: none;
}

/* The two readings sit in one grid, so their labels and numbers line up as
   columns instead of drifting apart word by word. */
.meter-strip {
  display: flex;
  align-items: flex-end;
  gap: 1.1rem;
}

.meter {
  display: grid;
  gap: 0.3rem;
  min-width: 0;
}

.meter-label {
  color: #6f8f87;
  font-size: 0.68rem;
  letter-spacing: 0.02em;
  line-height: 1;
}

.meter-body {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  height: 1.75rem;
}

.meter-value {
  color: var(--signal);
  font-family: var(--font-mono);
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  /* A reading, not prose: "+0.0 dB" must not be reordered to "dB 0.0" by the
     bidi algorithm when the page is Arabic. */
  direction: ltr;
  unicode-bidi: isolate;
}

/* The length runs to a fixed width so the volume module beside it never
   shifts as the clock rolls from 00:09.9 to 00:10.0. */
.meter-length {
  min-width: 4.6rem;
}

.meter-level {
  min-width: 3.9rem;
  text-align: end;
}

/* The fader drives the line across the track, so it runs the same way: left
   is quiet, right is loud, matching a horizontal level line's height. */
.volume-fader {
  position: relative;
  display: flex;
  align-items: center;
  /* Long enough that 24 dB is a little under 4 px per step, so the level can
     be set without a pixel hunt, short enough to leave the transport its row. */
  width: 7rem;
  height: 1.75rem;
}

/* The slot, from -12 dB at the inline start to +12 dB at the end. */
.volume-fader::before {
  position: absolute;
  inset-inline: 0;
  top: 50%;
  height: 4px;
  margin-top: -2px;
  border-radius: 999px;
  background: #2d5147;
  box-shadow: inset 0 1px 2px rgb(0 0 0 / 55%);
  content: "";
}

/* Unity is the middle of the slot, marked so the fader reads at a glance. */
.volume-fader::after {
  position: absolute;
  inset-block: 0.15rem;
  inset-inline-start: 50%;
  width: 1px;
  background: rgb(111 143 135 / 60%);
  pointer-events: none;
  content: "";
}

.volume-grip {
  position: absolute;
  inset-inline-start: 50%;
  top: 50%;
  display: grid;
  place-items: center;
  width: 1.3rem;
  height: 1.3rem;
  margin-inline-start: -0.65rem;
  /* Centred on `top`, so 0% and 100% put the grip's middle on each end of the
     slot rather than half of it past the edge. */
  translate: 0 -50%;
  padding: 0;
  border: 1px solid rgb(0 192 139 / 70%);
  border-radius: 999px;
  background: #0b1512;
  box-shadow: 0 0 0 3px rgb(0 192 139 / 12%);
  color: var(--signal);
  cursor: ew-resize;
  touch-action: none;
  transition: inset-inline-start 0.12s var(--ease);
}

.volume-grip.is-dragging {
  transition: none;
}

/* Left/right arrows on the grip say which way it travels, so it cannot be
   mistaken for the play button, which is shaped and coloured alike. */
.volume-grip svg {
  display: block;
  width: 0.75rem;
  height: 0.75rem;
}

.volume-grip:hover,
.volume-grip:focus-visible {
  background: #14211d;
  box-shadow: 0 0 0 5px rgb(0 192 139 / 18%);
}

/* Visual weight only: the size comes from `.tool-btn`, which it shares with
   the zoom buttons, so every icon control on the rail lines up. It is a
   secondary action, so it stays quiet until hovered or focused. */
.volume-reset {
  opacity: 0.7;
}

.volume-reset svg {
  width: 0.85rem;
  height: 0.85rem;
  rotate: none;
}

.volume-reset:hover,
.volume-reset:focus-visible {
  opacity: 1;
}

/* Full height of the track, whatever the waveform's height is at this width. */
.screen-cursor {
  position: absolute;
  top: 0;
  width: 1px;
  height: 100%;
  background: #eafff7;
  opacity: 0.75;
  pointer-events: none;
}

/* Track toolbar: the meters anchor the inline start, the transport the inline
   end. When they wrap, the meters keep the first row and the transport takes
   the second, which is the order people read them in. */
.screen-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.55rem 1rem;
  padding-top: 0.55rem;
}

.transport {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin-inline-start: auto;
}

.tool-group {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  padding: 0.15rem;
  border: 1px solid #1e3a33;
  border-radius: 999px;
}

.tool-btn {
  display: inline-grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #8fb3aa;
  cursor: pointer;
  transition: background 0.15s var(--ease), color 0.15s var(--ease);
}

.tool-btn svg {
  width: 1rem;
  height: 1rem;
}

.tool-btn:hover {
  background: #14302a;
  color: var(--signal);
}

.selection-controls {
  display: grid;
  gap: 0.55rem;
}

.slider-row {
  display: grid;
  /* Wide enough for the longest label any locale uses ("Fade out" in Malay is
     "Pudar keluar"); a narrower column folds it onto two lines. */
  grid-template-columns: 6rem minmax(0, 1fr) 4.5rem;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.8rem;
  color: var(--ink-soft);
}

/* "Fade in" in Malay is two words, so the label column wraps instead of
   pushing the slider out of line. */
.slider-label {
  line-height: 1.25;
}

.slider-row output {
  text-align: end;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

input[type="range"] {
  width: 100%;
  accent-color: var(--signal-dim);
  cursor: pointer;
}

.mono {
  font-family: var(--font-mono);
}

.preset-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.4rem 0.85rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 0.8rem;
  cursor: pointer;
  transition: background 0.18s var(--ease), border-color 0.18s var(--ease);
}

.chip:hover {
  border-color: var(--signal);
  background: #f2fbf8;
}

.chip.is-active {
  border-color: var(--signal-dim);
  background: #e6f7f1;
}

.play-glyph {
  width: 0;
  height: 0;
  border-block: 5px solid transparent;
  border-inline-start: 8px solid currentColor;
}

/* A fixed basis keeps the button the same size whichever label is showing.
   `hidden` removes the other label from the layout, so the two must be
   measured against the same minimum rather than padding alone. */
.btn-play {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-width: 13.5rem;
  padding: 0.5rem 1.1rem;
  background: var(--signal-dim);
  border-color: var(--signal-dim);
  color: #f2fffb;
  font-size: 0.85rem;
  font-weight: 550;
}

.btn-play:hover {
  background: #0b8a6a;
  border-color: #0b8a6a;
  box-shadow: 0 6px 16px -8px rgb(11 138 106 / 70%);
}

.btn-play[aria-pressed="true"] .play-glyph {
  border: 0;
  width: 8px;
  height: 9px;
  background: linear-gradient(
    to right,
    currentColor 0 3px,
    transparent 3px 5px,
    currentColor 5px 8px
  );
}

.fade-row {
  margin-top: 0.15rem;
}

.fade-row output {
  color: var(--signal-dim);
  font-weight: 550;
}

.length-lock {
  margin: 0;
  padding: 0.55rem 0.8rem;
  border-radius: var(--radius-sm);
  background: #eef8f4;
  border-inline-start: 3px solid var(--signal);
  color: var(--ink-soft);
  font-size: 0.78rem;
}

.trim-hint {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 1rem;
  margin: 0;
  font-size: 0.75rem;
  color: var(--ink-soft);
}

.trim-hint-fade {
  flex: 1 1 18rem;
  min-width: 0;
}

.trim-hint-zoom {
  flex: 0 1 auto;
}

.format-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.85rem;
  color: var(--ink-soft);
}

.select {
  font: inherit;
  font-size: 0.9rem;
  padding: 0.45rem 2rem 0.45rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--panel);
  color: var(--ink);
  cursor: pointer;
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-soft) 50%),
    linear-gradient(135deg, var(--ink-soft) 50%, transparent 50%);
  background-position: calc(100% - 1rem) 55%, calc(100% - 0.65rem) 55%;
  background-size: 6px 6px;
  background-repeat: no-repeat;
}

[dir="rtl"] .select {
  padding: 0.45rem 0.7rem 0.45rem 2rem;
  background-position: 0.65rem 55%, 1rem 55%;
}

/* ---------- buttons ---------- */

.btn {
  font: inherit;
  border-radius: var(--radius-sm);
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform 0.12s var(--ease), background 0.18s var(--ease), box-shadow 0.18s var(--ease);
}

.btn:active {
  transform: translateY(1px);
}

.btn-quiet {
  padding: 0.4rem 0.85rem;
  background: var(--panel);
  border-color: var(--line);
  font-size: 0.85rem;
  color: var(--ink);
}

.btn-quiet:hover {
  border-color: var(--signal);
}

.btn-primary {
  justify-self: start;
  padding: 0.65rem 1.4rem;
  background: var(--ink);
  color: #f4fbf9;
  font-weight: 550;
}

.btn-primary:hover {
  background: #142b25;
  box-shadow: 0 6px 18px -8px rgb(14 27 24 / 55%);
}

.btn-primary:disabled {
  opacity: 0.55;
  cursor: progress;
}

.btn-lg {
  font-size: 1rem;
  padding: 0.8rem 1.75rem;
}

/* ---------- progress ---------- */

.progress {
  height: 6px;
  border-radius: 999px;
  background: #e4ecea;
  overflow: hidden;
}

.progress-bar {
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--signal-dim), var(--signal));
  transition: width 0.25s var(--ease);
}

.status {
  margin: 0;
  font-size: 0.9rem;
  color: var(--signal-dim);
}

.status.is-error {
  color: var(--warn);
}

/* ---------- content sections ---------- */

.how,
.formats,
.faq,
.install,
.prose {
  margin-top: 4rem;
}

/* Guides use the container's width rather than pooling in a narrow left
   column: on a wide screen they pair up, on a phone they stack. */
.prose {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2rem;
}

.prose article {
  padding-inline-start: 1.15rem;
  border-inline-start: 2px solid var(--line);
}

.prose h2 {
  font-size: 1.075rem;
  margin-bottom: 0.45rem;
}

.prose p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.95rem;
}

.formats-note {
  padding: 0.9rem 1.1rem;
  border-radius: var(--radius-md);
  background: #e9f3f0;
  color: var(--ink);
  font-size: 0.9rem;
  margin: 0;
}

@media (min-width: 900px) {
  .prose {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2.25rem 2.75rem;
  }

  .formats-note {
    grid-column: 1 / -1;
  }
}

.steps {
  counter-reset: step;
  display: grid;
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.steps li {
  counter-increment: step;
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  gap: 0.75rem;
  align-items: baseline;
}

.steps li::before {
  content: counter(step);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--signal-dim);
  padding-top: 0.15rem;
  border-top: 1px solid var(--line);
}

.formats-lede {
  margin: -0.25rem 0 1.25rem;
  max-width: 62ch;
  color: var(--ink-soft);
  font-size: 0.95rem;
}

.table-wrap {
  overflow-x: auto;
}

.format-table {
  width: 100%;
  max-width: 38rem;
  border-collapse: collapse;
  font-size: 0.92rem;
  background: var(--panel);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.format-table th,
.format-table td {
  padding: 0.7rem 1rem;
  text-align: start;
  border-bottom: 1px solid var(--line);
}

.format-table thead th {
  font-size: 0.78rem;
  color: var(--ink-soft);
  font-weight: 500;
}

.format-table tbody th {
  font-family: var(--font-mono);
  font-weight: 500;
}

.format-table tbody tr:last-child th,
.format-table tbody tr:last-child td {
  border-bottom: 0;
}

.format-table .yes {
  color: var(--signal-dim);
  font-weight: 600;
}

.format-table .no {
  color: #9aaba6;
}

/* ---------- install guide ---------- */

.install {
  margin-top: 4rem;
}

.install-lede {
  margin: 0 0 1.5rem;
  max-width: 62ch;
  color: var(--ink-soft);
  font-size: 0.95rem;
}

.install-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  padding: 0.3rem;
  border-radius: 999px;
  background: #e4ecea;
  width: fit-content;
  max-width: 100%;
}

.install-tab {
  font: inherit;
  font-size: 0.82rem;
  padding: 0.5rem 1rem;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: var(--ink-soft);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.18s var(--ease), color 0.18s var(--ease);
}

.install-tab:hover {
  color: var(--ink);
  background: #f2f8f6;
}

.install-tab[aria-selected="true"] {
  background: var(--screen);
  border-color: var(--screen);
  color: #eafff7;
  box-shadow: 0 4px 12px -6px rgb(14 27 24 / 55%);
}

.install-panel {
  margin-top: 1rem;
  padding: clamp(1rem, 2.5vw, 1.75rem);
  border-radius: var(--radius-lg);
  background: var(--panel);
  box-shadow: var(--shadow-panel);
}

.install-panel h3 {
  margin: 0 0 1rem;
  font-size: 1.02rem;
  font-weight: 650;
  letter-spacing: -0.01em;
}

.install-panel ol {
  counter-reset: install-step;
  display: grid;
  gap: 0.85rem;
  margin: 0;
  padding: 0;
  list-style: none;
  max-width: 66ch;
}

.install-panel li {
  counter-increment: install-step;
  display: grid;
  grid-template-columns: 1.6rem minmax(0, 1fr);
  gap: 0.7rem;
  font-size: 0.92rem;
  color: var(--ink-soft);
  line-height: 1.55;
}

.install-panel li::before {
  content: counter(install-step) ".";
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: var(--signal-dim);
  font-variant-numeric: tabular-nums;
  padding-top: 0.1rem;
}

.install-note {
  margin: 1.1rem 0 0;
  padding-top: 0.9rem;
  border-top: 1px solid var(--line);
  max-width: 66ch;
  font-size: 0.82rem;
  color: var(--ink-soft);
}

/* Two columns once there is room: nine stacked questions left the right half
   of a wide screen blank. */
.faq-cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0 3rem;
}

@media (min-width: 900px) {
  .faq-cols {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.faq details {
  border-top: 1px solid var(--line);
  padding: 0.9rem 0;
}

.faq details:last-of-type {
  border-bottom: 1px solid var(--line);
}

.faq summary {
  cursor: pointer;
  font-weight: 550;
  list-style: none;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  content: "+";
  float: inline-end;
  font-family: var(--font-mono);
  color: var(--signal-dim);
}

.faq details[open] summary::after {
  content: "−";
}

.faq p {
  margin: 0.6rem 0 0;
  color: var(--ink-soft);
  max-width: 62ch;
}

/* Only the two legal links and the copyright line remain, so they share one
   row with the notice pushed to the far end. */
.site-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.35rem 2rem;
  max-width: 1080px;
  margin: 0 auto;
  padding: 2rem 1.5rem 3rem;
  border-top: 1px solid var(--line);
  font-size: 0.8rem;
  color: var(--ink-soft);
}

.site-footer p {
  margin: 0;
}

.footer-meta {
  font-family: var(--font-mono);
  color: #7d8f8a;
}

.footer-legal {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.1rem;
}

.link-button {
  font: inherit;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink-soft);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--line);
  cursor: pointer;
}

.link-button:hover {
  color: var(--ink);
  text-decoration-color: var(--signal);
}

/* ---------- legal dialogs ---------- */

.legal-dialog {
  max-width: min(34rem, calc(100vw - 2rem));
  padding: clamp(1.25rem, 3vw, 2rem);
  border: 0;
  border-radius: var(--radius-lg);
  background: var(--panel);
  color: var(--ink);
  box-shadow: 0 24px 64px -24px rgb(14 27 24 / 45%);
}

.legal-dialog::backdrop {
  background: rgb(11 21 18 / 45%);
}

.legal-dialog h2 {
  font-size: 1.1rem;
  margin-bottom: 0.85rem;
}

.legal-dialog p {
  margin: 0 0 0.75rem;
  color: var(--ink-soft);
  font-size: 0.92rem;
  line-height: 1.6;
}

.legal-dialog form {
  margin-top: 1.1rem;
  display: flex;
  justify-content: flex-end;
}

/* ---------- motion ---------- */

@media (prefers-reduced-motion: no-preference) {
  .panel,
  .trimmer {
    animation: settle 0.35s var(--ease) both;
  }
}

@media (prefers-reduced-motion: reduce) {
  .volume-grip {
    transition: none;
  }
}

@keyframes settle {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
}

/* ---------- responsive ---------- */

@media (max-width: 640px) {
  .site-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.6rem;
    padding-block: 0.9rem;
  }

  /* Same rule as desktop: the header already separates the headline from the
     page edge, so nothing is added above it. */
  .hero {
    padding: 0 0 1.6rem;
  }

  /* Stack the card so the buttons get a full row instead of squeezing the
     filename and stats into a two-character column. */
  .file-card {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .file-card-actions {
    grid-column: 1 / -1;
  }

  .file-card-actions .btn-quiet {
    flex: 1;
  }

  .shell {
    padding-inline: 1rem;
  }

  .panel {
    border-radius: var(--radius-md);
  }

  .dropzone {
    padding: 2rem 1rem;
  }

  /* A finger is wider than a cursor, so the track gets more vertical room to
     aim in. The cursor follows whatever height the canvas takes. */
  .waveform {
    height: 180px;
  }

  /* A thumb has to be able to land on the grip and stay on it, so both grow
     and the fader keeps a long enough run to reach any level in one drag. */
  .volume-fader {
    width: 6.5rem;
    height: 2.25rem;
  }

  .volume-grip {
    width: 2rem;
    height: 2rem;
    margin-inline-start: -1rem;
  }

  .volume-grip svg {
    width: 0.95rem;
    height: 0.95rem;
  }

  .volume-reset {
    width: 2.25rem;
    height: 2.25rem;
  }

  .meter-body {
    height: 2.25rem;
  }

  .meter-strip {
    width: 100%;
    justify-content: space-between;
    gap: 0.75rem;
  }

  /* The transport takes the row under the meters: zoom at the start, the
     full-width preview button at the end. */
  .transport {
    width: 100%;
    flex-wrap: wrap;
    margin-inline-start: 0;
    gap: 0.5rem;
  }

  .btn-play {
    flex: 1 1 100%;
    min-width: 0;
  }

  .slider-row {
    grid-template-columns: 4.6rem minmax(0, 1fr) 4.2rem;
    gap: 0.5rem;
    font-size: 0.75rem;
  }

  .btn-lg {
    width: 100%;
    justify-self: stretch;
  }

  /* A wrapping pill row makes raggedy rows, so go to an even two-column grid. */
  .install-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-radius: var(--radius-md);
    width: 100%;
  }

  .install-tab {
    width: 100%;
    min-width: 0;
    white-space: normal;
    text-align: center;
    min-height: 2.75rem;
    padding: 0.5rem 0.6rem;
    border-radius: var(--radius-sm);
  }

  .install-panel {
    border-radius: var(--radius-md);
  }
}