:root { color-scheme: light; --ink:#202638; --muted:#687287; --line:#e5e8ef; --accent:#6557d8; --soft:#f0efff; --bg:#f5f7fb; }
* { box-sizing:border-box; } body { margin:0; background:var(--bg); color:var(--ink); font:15px system-ui,-apple-system,sans-serif; } button,textarea { font:inherit; } button { border:1px solid var(--line); border-radius:8px; padding:9px 12px; background:#fff; color:var(--ink); cursor:pointer; } button:disabled { opacity:.45; cursor:not-allowed; } button.primary { background:var(--accent); border-color:var(--accent); color:#fff; } .shell { max-width:1180px; margin:0 auto; padding:32px 24px 24px; } .hero { position:relative; padding:8px 0 28px; } .brand { color:var(--accent); text-decoration:none; font-size:17px; } .hero h1 { max-width:700px; margin:42px 0 10px; font-size:clamp(30px,5vw,54px); letter-spacing:-1.5px; line-height:1.03; } .hero p { max-width:650px; margin:0; color:var(--muted); line-height:1.6; } .engine-status { position:absolute; right:0; top:10px; color:#15866d; font-size:13px; } .workspace { display:grid; grid-template-columns:minmax(0,1fr) 330px; gap:20px; align-items:start; } .score-card,.controls { background:#fff; border:1px solid var(--line); border-radius:14px; box-shadow:0 8px 28px #20283b0b; } .score-card { padding:22px; } .card-heading { display:flex; justify-content:space-between; gap:16px; align-items:flex-start; border-bottom:1px solid var(--line); padding-bottom:16px; } .eyebrow { color:var(--accent); font-size:11px; font-weight:700; letter-spacing:1.2px; } h2 { margin:5px 0 0; font-size:19px; } .actions { display:flex; gap:7px; flex-wrap:wrap; justify-content:flex-end; } .score-view { min-height:370px; display:grid; place-items:center; overflow:auto; padding:28px 4px; } .score-view svg { max-width:100%; height:auto; } .score-view [data-acorde-kind="note"] { pointer-events:all; } .score-view .note-hit { cursor:pointer; pointer-events:all; } .score-view .selected-note { filter:drop-shadow(0 0 4px var(--accent)); } .status { min-height:22px; margin:0; color:var(--muted); font-size:13px; } .status.error { color:#b24343; } .controls { padding:20px; } .control-section { border-bottom:1px solid var(--line); padding:0 0 20px; margin-bottom:20px; } .control-section:last-child { border:0; padding:0; margin:0; } .control-section p,.control-section span { color:var(--muted); font-size:13px; line-height:1.5; } .control-section label { display:block; color:var(--muted); font-size:12px; margin:14px 0 6px; } textarea { width:100%; min-height:140px; resize:vertical; border:1px solid var(--line); border-radius:8px; padding:10px; color:var(--ink); line-height:1.45; } .wide { width:100%; margin-top:8px; text-align:left; } .note { background:#fbfaff; border:1px solid #dddafa; border-radius:9px; padding:12px; display:flex; flex-direction:column; gap:5px; } code { color:var(--accent); } footer { display:flex; gap:9px; margin-top:18px; color:var(--muted); font-size:13px; } footer a { color:inherit; } @media (max-width:800px) { .shell { padding:22px 14px; } .engine-status { position:static; display:block; margin-top:18px; } .hero h1 { margin-top:28px; } .workspace { grid-template-columns:1fr; } .card-heading { flex-direction:column; } .actions { justify-content:flex-start; } }

.playground-editor-toolbar { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 0; border-bottom:1px solid var(--line); }
.toolbar-group { display:flex; align-items:center; gap:5px; min-width:0; flex-wrap:wrap; }
.toolbar-history { margin-left:auto; flex-wrap:nowrap; }
.tool { display:inline-flex; align-items:center; gap:5px; min-height:34px; padding:7px 9px; border-radius:6px; color:#596276; white-space:nowrap; }
.tool.primary { background:var(--accent); border-color:var(--accent); color:#fff; }
.toolbar-divider { width:1px; height:22px; margin:0 5px; background:var(--line); }
.toolbar-field { display:inline-flex; align-items:center; gap:5px; color:var(--muted); font-size:11px; white-space:nowrap; }
.toolbar-field select,.toolbar-field input { min-height:34px; max-width:90px; border:1px solid var(--line); border-radius:6px; padding:6px 7px; color:var(--ink); background:#fff; font:inherit; }
.tempo-field input { max-width:62px; }
@media (max-width:980px) { .playground-editor-toolbar { align-items:flex-start; flex-direction:column; } .toolbar-history { margin-left:0; } }
@media (max-width:800px) { .toolbar-divider { display:none; } .toolbar-field { margin:2px 0; } }