/* ...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; }
html, body { background:#fff; color:#000; font-family:var(--mono); }
.topbar { display:flex; align-items:center; gap:16px; padding:20px; }
.logo { width:96px; image-rendering: pixelated; transform: scale(1.25); }
.title { font-size:28px; letter-spacing:1px; }
.container { max-width:900px; margin:0 auto; padding:0 20px 40px; }
.controls .row { display:flex; gap:12px; flex-wrap:wrap; margin:12px 0; }
button { border:1px solid #000; background:#fff; padding:10px 14px; cursor:pointer; transition:transform .1s ease, box-shadow .1s ease; }
button:hover { transform: translateY(-1px); box-shadow: 0 2px 0 #000; }
.sliders label { display:flex; flex-direction:column; gap:6px; min-width:180px; }
input[type="range"] { accent-color:#000; }
.waveforms { display:grid; gap:8px; padding:10px 0 20px; }
canvas { width:100%; border:1px solid #000; image-rendering: pixelated; }
.gallery h2 { font-size:20px; margin-top:10px; }
.gallery-list { list-style:none; padding:0; display:grid; gap:8px; }
.gallery-list li { border:1px solid #000; padding:10px; display:flex; align-items:center; justify-content:space-between; }
.credits { border-top:1px solid #000; padding:16px 20px; font-size:12px; }
/* ...existing styles... */