* { margin: 0; padding: 0; box-sizing: border-box; }
  body { font-family: 'Segoe UI','Hiragino Kaku Gothic Pro','Yu Gothic',sans-serif; background:#f5f0eb; color:#333; min-height:100vh; }
  header { background:#2c2c2c; color:#fff; padding:16px 24px; font-size:20px; font-weight:bold; letter-spacing:1px; display:flex; align-items:center; justify-content:space-between; }
  .header-right { display:flex; align-items:center; gap:10px; }
  #song-key-label { font-size:12px; font-weight:normal; opacity:0.8; }
  #song-key-select { padding:3px 8px; border:1px solid rgba(255,255,255,0.5); background:#444; color:#fff; font-size:13px; font-weight:bold; border-radius:3px; cursor:pointer; }
  #lang-btn { padding:4px 12px; border:1px solid rgba(255,255,255,0.5); background:transparent; color:#fff; font-size:13px; cursor:pointer; border-radius:3px; font-weight:500; transition:background .15s; }
  #lang-btn:hover { background:rgba(255,255,255,0.15); }
  .toolbar { position:fixed; bottom:0; left:0; right:0; z-index:100; padding:14px 24px; display:flex; gap:12px; flex-wrap:wrap; align-items:center; border-top:1px solid #ddd; background:#fff; box-shadow:0 -2px 12px rgba(0,0,0,0.08); }
  .toolbar button { padding:8px 18px; border:2px solid #2c2c2c; background:#fff; color:#2c2c2c; font-size:14px; font-weight:bold; cursor:pointer; border-radius:4px; transition:all .15s; }
  .toolbar button:hover { background:#2c2c2c; color:#fff; }
  .help-text { padding:10px 24px; background:#faf8f5; border-bottom:1px solid #e8e4df; font-size:13px; color:#888; line-height:1.6; }
  #diagrams { display:flex; flex-wrap:wrap; gap:24px; padding:24px; align-items:flex-start; }
  .diagram-card { position:relative; background:#fff; border:1px solid #ccc; border-radius:8px; padding:16px; display:flex; flex-direction:column; align-items:center; gap:10px; box-shadow:0 2px 8px rgba(0,0,0,0.07); transition:box-shadow .15s; }
  .card-handle { position:absolute; top:-12px; left:-10px; width:26px; height:24px; border-radius:12px; border:1px solid #888; background:#fff; color:#666; font-size:14px; font-weight:bold; cursor:grab; display:flex; align-items:center; justify-content:center; box-shadow:0 1px 4px rgba(0,0,0,0.15); user-select:none; transition:all .12s; letter-spacing:-2px; }
  .card-handle:hover { background:#444; color:#fff; border-color:#444; }
  .card-handle:active { cursor:grabbing; }
  .diagram-card.dragging { opacity:0.4; }
  .diagram-card.drop-before { box-shadow:-4px 0 0 #4a8af4, 0 2px 8px rgba(0,0,0,0.07); }
  .diagram-card.drop-after { box-shadow:4px 0 0 #4a8af4, 0 2px 8px rgba(0,0,0,0.07); }
  .card-actions { position:absolute; top:-12px; right:-10px; display:flex; gap:5px; align-items:center; }
  .card-action-btn { height:24px; padding:0 10px; border-radius:12px; border:1px solid #888; background:#fff; color:#444; font-size:11px; font-weight:bold; cursor:pointer; display:flex; align-items:center; justify-content:center; box-shadow:0 1px 4px rgba(0,0,0,0.15); transition:all .12s; white-space:nowrap; }
  .card-action-btn:hover { background:#444; color:#fff; border-color:#444; }
  .card-action-btn:focus { outline:none; }
  .card-action-btn:focus-visible { outline:2px solid #4a8af4; outline-offset:2px; }
  .card-delete { width:24px; height:24px; border-radius:50%; border:1px solid #c33; background:#fff; color:#c33; font-size:14px; font-weight:bold; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; padding:0; box-shadow:0 1px 4px rgba(0,0,0,0.15); transition:all .12s; }
  .card-delete:hover { background:#c33; color:#fff; transform:scale(1.1); }
  .card-delete:focus { outline:none; }
  .card-delete:focus-visible { outline:2px solid #4a8af4; outline-offset:2px; }
  .diagram-card:hover { box-shadow:0 4px 16px rgba(0,0,0,0.12); }
  .diagram-controls { display:flex; gap:6px; align-items:center; flex-wrap:wrap; justify-content:center; }
  .diagram-controls select { padding:5px 6px; border:1px solid #aaa; border-radius:4px; font-size:13px; font-weight:bold; background:#fff; cursor:pointer; }
  .diagram-controls input[type="number"] { width:52px; padding:5px 4px; border:1px solid #aaa; border-radius:4px; font-size:13px; text-align:center; }
  .diagram-controls input.name-input { width:130px; padding:5px 8px; border:1px solid #aaa; border-radius:4px; font-size:12px; font-weight:bold; text-align:center; }
  .diagram-controls label { font-size:12px; color:#666; display:flex; align-items:center; gap:4px; }
  .ctrl-btn { padding:5px 10px; border:1px solid #aaa; background:#f9f9f9; font-size:12px; cursor:pointer; border-radius:3px; transition:all .12s; font-weight:500; }
  .ctrl-btn:hover { background:#eee; }
  .ctrl-btn.active { background:#2c2c2c; color:#fff; border-color:#2c2c2c; }
  .ctrl-btn.delete { color:#c33; border-color:#c33; }
  .ctrl-btn.delete:hover { background:#c33; color:#fff; }
  .ctrl-btn:disabled { opacity:.4; cursor:default; }
  .ctrl-btn:focus { outline:none; }
  .ctrl-btn:focus-visible { outline:2px solid #4a8af4; outline-offset:1px; }
  .toolbar button:focus { outline:none; }
  .toolbar button:focus-visible { outline:2px solid #4a8af4; outline-offset:1px; }
  .ctrl-btn.auto-btn { background:#e8f0fe; border-color:#4a8af4; color:#1a5cc8; font-weight:bold; }
  .ctrl-btn.auto-btn:hover { background:#4a8af4; color:#fff; }
  .pos-label { font-size:12px; font-weight:bold; color:#555; min-width:28px; text-align:center; }
  .nav-btn { padding:5px 7px; font-size:11px; min-width:24px; }
  svg.chord-svg { display:block; }
  svg.chord-svg text { user-select:none; -webkit-user-select:none; }
  footer { padding:16px 24px 90px; text-align:center; font-size:12px; color:#888; }
  footer a { color:#666; text-decoration:none; }
  footer a:hover { color:#2c2c2c; text-decoration:underline; }