/* ...existing styles... */
@font-face {
    font-family: 'FlipnoteHatena';
    src: url('https://fontstruct.com/fontstructions/download/968784/flipnote_hatena_font') format('truetype');
    font-display: swap;
}
:root {
    --mono: 'FlipnoteHatena', 'Space Mono', 'Noto Sans', system-ui;
    --bg: #0b0b0d;
    --panel: #0f1113;
    --muted: #9aa0a6;
    --accent: #e6e6e6;
    --border: #222426;
}
html, body { 
    touch-action: pan-y; /* allow vertical scrolling, block pinch/zoom & horizontal gestures */
    overscroll-behavior-y: contain; /* prevent pull-to-refresh while allowing scrolling */
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none; /* disable text selection globally */
}
/* Restore core base styles */
body {
    margin: 0;
    font-family: "Noto Sans", "Cal Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
    background: var(--bg, #0b0b0d);
    color: var(--accent, #e6e6e6);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
/* allow selection and default context behavior for form fields only */
input, textarea, select, [contenteditable="true"] {
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
}
.topbar { display:flex; align-items:center; justify-content:center; gap:12px; padding:16px; border-bottom:1px solid var(--border); background:linear-gradient(180deg, rgba(255,255,255,0.02), transparent); }
.logo { width:156px; height:auto; image-rendering: pixelated; transform: scale(1); }
.title { font-size:20px; letter-spacing:1px; margin:0; color:var(--accent); }
.container { max-width:900px; margin:0 auto; padding:12px 14px 36px; }
/* controls */
.controls .row { display:flex; gap:10px; flex-wrap:wrap; margin:10px 0; }
button { border:1px solid var(--border); background:transparent; color:var(--accent); padding:10px 12px; cursor:pointer; transition:opacity .12s ease, transform .08s ease; border-radius:6px; }
button:active { transform: translateY(0); }
button:hover { opacity:0.95; }
button[disabled] { opacity:0.4; cursor:not-allowed; }
.sliders label { display:flex; flex-direction:column; gap:6px; min-width:140px; color:var(--muted); font-size:13px; }
input[type="range"] { accent-color:var(--accent); }
.install-btn {
  border:1px solid var(--border);
  background:transparent;
  color:var(--accent);
  padding:8px 10px;
  cursor:pointer;
  border-radius:6px;
  font-size:13px;
  margin-left:8px;
}
.controls .row:first-child {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px;
    /* allow buttons to expand evenly across available width */
}
.controls .row:first-child button {
    flex: 1 1 0;
    min-width: 0;
}
.controls .row.inline {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px;
}
/* ensure inline rows remain horizontal on small screens */
@media (max-width:640px){
  .controls .row.inline {
    flex-direction: row;
    flex-wrap: nowrap;
  }
  .controls .row.inline button {
    flex: 1 1 0;
    min-width: 0;
  }
}
/* keep first row horizontal on small screens too */
@media (max-width:640px){
  .controls .row:first-child {
    flex-direction: row;
    flex-wrap: nowrap;
  }
  .controls .row:first-child button,
  .controls .row:first-child input {
    flex: 1 1 0;
  }
}
/* panels */
.waveforms { display:grid; gap:10px; padding:10px 0 18px; }
.waveforms .downloads {
    display: flex;
    gap: 8px;
    align-items: center;
    width: 100%;
}
.waveforms .downloads button {
    flex: 1 1 0;
    min-width: 0;
}
canvas { width:100%; border:1px solid var(--border); background:var(--panel); image-rendering: pixelated; height:96px; border-radius:6px; }
/* mobile-first adjustments */
@media (max-width:640px){
  .topbar { padding:12px; gap:10px; }
  .logo { width:190px; }
  .title { font-size:18px; }
  .controls .row { flex-direction:column; align-items:stretch; }
  .sliders label { min-width:100%; }
  canvas { height:88px; }
  .container { padding:10px; }
  .credits { text-align:center; font-size:11px; }
}
/* larger screens slight polish */
@media (min-width:900px){
  canvas { height:120px; }
  .title { font-size:28px; }
}
.credits a {
    color: #ffffff;
    text-decoration: underline;
}
/* ...existing styles... */