:root{
  --bg:#f8f9fc;
  --card:#ffffff;
  --accent:#0078d7;
  --muted:#555;
}
*{box-sizing:border-box}
body{
  font-family:system-ui,"Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif;
  background:var(--bg);
  color:#111;
  margin:0;
}
.container{
  max-width:960px;
  margin:32px auto;
  padding:20px;
}
h1{font-size:1.6rem;margin:0 0 10px;}
h2{font-size:1.2rem;margin-bottom:4px;}
.card{
  background:var(--card);
  border-radius:12px;
  box-shadow:0 4px 12px rgba(0,0,0,0.08);
  padding:16px 20px;
  margin-bottom:18px;
}
.card.small{max-width:520px;}
label{display:block;margin-top:10px;}
input[type="file"]{display:block;margin-top:6px;}
input[type="range"]{width:200px;margin-right:10px;}
button{
  background:var(--accent);
  border:none;
  color:white;
  font-weight:600;
  padding:8px 16px;
  border-radius:8px;
  cursor:pointer;
}
button.secondary{background:#eee;color:#222;}
.row{display:flex;gap:8px;align-items:center;margin-top:12px;}
.log{
  background:#0d1117;
  color:#d1e4ff;
  font-family:monospace;
  font-size:0.9rem;
  padding:10px;
  border-radius:8px;
  min-height:160px;
  overflow:auto;
}
progress{width:100%;height:12px;margin-bottom:8px;}
footer{margin-top:12px;text-align:center;color:var(--muted);}
small{color:var(--muted);}
code{background:#f0f2f6;padding:2px 6px;border-radius:6px;}
canvas{background:#fafafa;border:1px solid #ddd;border-radius:8px;margin-top:8px;}