*{box-sizing:border-box}:root{--app-font-family:Arial,Helvetica,sans-serif;--app-bg-default:#0f1115;--app-text-primary:#f3f4f6;--app-text-muted:#c0c7d1;--app-panel-bg:#171a21;--app-panel-border:#2a3040;--app-input-bg:#0f1115;--app-input-border:#394152;--app-primary:#6d7cff;--app-danger:#ff8b8b;--app-card-bg:#12161d;--app-card-border:#2d3444;--app-surface-muted:#0f1319}body,html{margin:0;padding:0;background:var(--app-bg-default);color:var(--app-text-primary);font-family:var(--app-font-family)}body{min-height:100vh}button,input,select{font:inherit}.page{max-width:1200px;margin:0 auto;padding:32px 20px 80px}.hero{margin-bottom:24px}.hero h1{margin-bottom:8px;font-size:2.2rem}.hero p{color:var(--app-text-muted);max-width:760px;line-height:1.5}.panel{background:var(--app-panel-bg);border:1px solid var(--app-panel-border);border-radius:4px;padding:20px;margin-bottom:20px}.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));grid-gap:16px;gap:16px;margin-bottom:16px}label{display:flex;flex-direction:column;gap:8px;font-size:.95rem}input,select{background:var(--app-input-bg);border:1px solid var(--app-input-border);border-radius:4px;padding:10px 12px}.primary-button,input,select{color:var(--app-text-primary)}.primary-button{background:var(--app-primary);border:0;border-radius:4px;padding:12px 18px;cursor:pointer}.primary-button:disabled{opacity:.7;cursor:default}.error-text{color:var(--app-danger);margin-top:12px}.cards{display:grid;grid-gap:16px;gap:16px}.card{border:1px solid var(--app-card-border);background:var(--app-card-bg);border-radius:4px;padding:16px}.diagram-row{display:flex;flex-wrap:wrap;gap:16px;margin-top:16px;align-items:center;justify-content:center;justify-items:center;justify-content:space-evenly}.diagram-card{min-width:220px;flex:1 1;border:1px solid var(--app-card-border);border-radius:4px;padding:12px;background:var(--app-surface-muted)}.fret-grid{display:grid;grid-template-columns:repeat(6,1fr);grid-gap:8px;gap:8px;margin:12px 0}.fret-cell{border:1px solid var(--app-input-border);border-radius:4px;padding:10px;text-align:center}.keyboard{display:grid;grid-template-columns:repeat(12,1fr);grid-gap:6px;gap:6px;margin:12px 0}.key{border:1px solid var(--app-input-border);border-radius:4px;padding:12px 4px;text-align:center;font-size:.8rem}.active-key{background:var(--app-primary);color:var(--app-text-primary);border-color:var(--app-primary)}.progression-line{font-size:1.05rem;font-weight:700}.muted{color:var(--app-text-muted)}