/* Main styles for Charcoal Sound Art */
:root{
  --bg:#1a1a1a;
  --paper:#f5f5dc;
  --muted:#bbb;
  --accent:#4CAF50;
  --danger:#f44336;
  --glass:rgba(255,255,255,0.06);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: 'JetBrains Mono', 'Roboto Mono', 'SFMono-Regular', Menlo, Monaco, Consolas, 'Liberation Mono', monospace;
  font-size:16px;
  background:linear-gradient(135deg,#2c2c2c 0%,var(--bg) 100%);
  color:#eaeaea;
  -webkit-font-smoothing:antialiased;
  letter-spacing:0.01em;
}
.container{max-width:1100px;margin:0 auto;padding:18px}
.site-header{padding:18px 0;text-align:center}
.site-header h1{font-size:clamp(1.4rem,4.8vw,2.6rem);margin-bottom:6px}
.subtitle{color:var(--muted);font-style:italic}
.canvas-wrapper{display:flex;justify-content:center;align-items:center;border-radius:10px;overflow:hidden;background:var(--paper);padding:12px;box-shadow:0 12px 36px rgba(0,0,0,0.45);border:3px solid rgba(0,0,0,0.35)}
canvas{display:block;width:100%;height:auto;max-width:90vw;cursor:crosshair}
.controls{margin-top:20px}
.status{margin:12px 0;font-size:1rem;min-height:28px;text-align:center}
.audio-viz{display:flex;justify-content:center;align-items:end;height:60px;margin:12px 0;gap:6px}
.bar{width:8px;border-radius:8px;background:linear-gradient(to top,var(--accent),#81C784);transition:height 0.06s linear, background 0.15s;box-shadow:0 4px 10px rgba(0,0,0,0.5)}
.buttons{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:10px 0}
.btn{padding:12px 18px;border-radius:12px;border:1px solid rgba(255,255,255,0.06);background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.14));color:#ffffff;box-shadow: 0 8px 20px rgba(2,6,23,0.55);transition: transform 0.14s ease, box-shadow 0.14s ease, background 0.14s ease, opacity 0.14s ease;min-width:140px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;gap:8px}
.btn.small{padding:8px 12px;min-width:94px;border-radius:10px;font-size:0.9rem}
.btn.start{background: linear-gradient(90deg,var(--accent), #66bb6a);color:#06110a;box-shadow: 0 12px 34px rgba(76,175,80,0.18), 0 4px 8px rgba(0,0,0,0.45);border:none;min-width:160px}
.btn.stop{ background: linear-gradient(90deg,var(--danger),#d32f2f); color:#0b0000; border:none }
.btn.clear{ background: linear-gradient(90deg,#FF9800,#F57C00); border:none }
.btn.download{ background: linear-gradient(90deg,#2196F3,#1976D2); border:none }
.btn:hover{ transform: translateY(-6px); }
.btn:active{ transform: translateY(-2px); }
.btn:focus-visible{ outline:3px solid rgba(76,175,80,0.14); outline-offset:4px }
.sliders{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin:10px 0}
input[type="range"]{
  -webkit-appearance:none;
  appearance:none;
  width:220px;
  height:28px;
  background:transparent;
}
input[type="range"]:focus{ outline:none }
input[type="range"]::-webkit-slider-runnable-track{
  height:8px;
  background:linear-gradient(90deg,#444,#666);
  border-radius:999px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
}
input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none;
  width:18px;height:18px;border-radius:50%;
  background:var(--accent);
  box-shadow: 0 6px 12px rgba(0,0,0,0.45);
  margin-top:-5px;
  border:2px solid rgba(255,255,255,0.08);
}
input[type="range"]::-moz-range-track{ height:8px; background:linear-gradient(90deg,#444,#666); border-radius:999px }
input[type="range"]::-moz-range-thumb{ width:18px;height:18px;border-radius:50%; background:var(--accent); border:2px solid rgba(255,255,255,0.08) }
.file-input{display:flex;flex-direction:column;align-items:center;gap:8px;margin-top:8px}
.file-label{display:inline-flex;align-items:center;gap:10px;padding:10px 14px;border-radius:12px;background: rgba(255,255,255,0.025);cursor:pointer;border:1px dashed rgba(255,255,255,0.06);color:var(--muted);font-weight:600}
.file-label input{position:absolute;left:-9999px;opacity:0;pointer-events:none}
.notes{max-width:780px;margin:14px auto;padding:12px;background:var(--glass);border-radius:8px;color:var(--muted)}
.site-footer{text-align:center;padding:20px;color:var(--muted)}
@media (max-width:720px){
  .sliders{flex-direction:column}
  .btn{width:92%;max-width:340px}
}