* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: system-ui, -apple-system, sans-serif; background: #f5f0e8; color: #333; padding: 12px; }
h1 { font-size: 20px; margin-bottom: 2px; }
p.sub { font-size: 13px; color: #666; margin-bottom: 10px; max-width: 760px; }
.wrap { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-start; }
.panel { background: #fff; border-radius: 8px; padding: 12px; box-shadow: 0 1px 4px rgba(0,0,0,.12); }
.panel h2 { font-size: 14px; margin: 12px 0 6px; color: #8B5E3C; }
.panel h2:first-child { margin-top: 0; }
canvas#stage { display: block; width: min(600px, calc(100vw - 60px)); height: auto; background: #2b2b30; border-radius: 6px; }
.row { display: flex; align-items: center; gap: 8px; font-size: 13px; flex-wrap: wrap; }
.transport { margin-top: 10px; }
button { padding: 9px 14px; border: 1px solid #ccc; border-radius: 6px; background: #fff; cursor: pointer; font-size: 13px; }
button:active { background: #e8e8e8; }
button.primary { background: #8B5E3C; color: #fff; border-color: #8B5E3C; }
button:disabled { opacity: .5; cursor: default; }
.controls { min-width: 250px; max-width: 320px; flex: 1; }
.ctl { margin-bottom: 8px; }
.ctl label { display: flex; justify-content: space-between; font-size: 13px; margin-bottom: 2px; }
.ctl input[type=range] { width: 100%; }
.ctl input[type=color] { width: 100%; height: 34px; border: 1px solid #ccc; border-radius: 6px; padding: 2px; background: #fff; }
label.chk { display: flex; align-items: center; gap: 7px; cursor: pointer; padding: 4px 0; font-size: 13px; }
label.chk input { width: 17px; height: 17px; }
.hint { font-size: 12px; color: #888; }
.hint code { font-size: 11px; }
#export-link a { color: #8B5E3C; font-weight: 600; }