:root { --bg:#070b12; --panel:#111927; --panel2:#151f30; --line:#26354b; --text:#edf5ff; --muted:#93a3b9; --amber:#ffad42; --cyan:#30d4d0; --cyan-soft:rgba(48,212,208,.14); }
* { box-sizing:border-box; } body { margin:0; min-width:320px; color:var(--text); background:radial-gradient(ellipse 80% 55% at 50% -10%, #173047 0%, transparent 70%),var(--bg); font:15px/1.4 Inter, ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif; }
body::before { content:""; position:fixed; inset:0; pointer-events:none; opacity:.18; background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px); background-size:32px 32px; }
.app-shell { position:relative; max-width:1280px; margin:auto; padding:48px 24px 32px; }.hero { display:flex; justify-content:space-between; gap:24px; align-items:start; margin-bottom:28px; }.eyebrow,.section-label { color:var(--cyan); margin:0 0 5px; font-size:11px; letter-spacing:.16em; font-weight:750; }.hero h1 { margin:0; font-size:clamp(29px,5vw,46px); line-height:1.05; letter-spacing:-.045em; }.hero h1 span { color:var(--amber); }.subtitle { margin:10px 0 0; color:var(--muted); font-size:16px; }.status-pill { display:flex; align-items:center; gap:8px; padding:8px 11px; border:1px solid var(--line); border-radius:999px; background:#0b121d; color:var(--muted); white-space:nowrap; }.status-pill i { width:8px; height:8px; border-radius:50%; background:#61718a; }.status-pill.playing { color:var(--text); border-color:rgba(255,173,66,.55); }.status-pill.playing i { background:var(--amber); box-shadow:0 0 12px var(--amber); }
.panel { border:1px solid var(--line); border-radius:18px; background:linear-gradient(140deg,rgba(21,31,48,.97),rgba(11,17,28,.97)); box-shadow:0 18px 50px rgba(0,0,0,.18),inset 0 1px rgba(255,255,255,.025); }.control-panel { display:grid; grid-template-columns:1fr 1.45fr 1.25fr auto; gap:16px; align-items:end; padding:18px; }.control-field { display:grid; gap:7px; color:var(--muted); font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; } select { width:100%; min-height:44px; appearance:none; border:1px solid #35445b; border-radius:10px; padding:0 35px 0 12px; color:var(--text); background:#0b1320 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='m1 1 5 5 5-5' fill='none' stroke='%2393a3b9' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 13px center; font:600 15px inherit; }.tempo-control { min-height:44px; display:flex; align-items:center; gap:12px; }.tempo-control input { flex:1; }.tempo-control output { min-width:69px; color:var(--amber); font-size:20px; font-weight:800; letter-spacing:0; }.tempo-control small { color:var(--muted); font-size:10px; }.play-button { min-height:52px; min-width:148px; border:0; border-radius:12px; padding:0 21px; cursor:pointer; color:#1c1305; background:linear-gradient(135deg,#ffc463,var(--amber)); font:800 15px inherit; box-shadow:0 6px 20px rgba(255,173,66,.22); }.play-button:hover { filter:brightness(1.07); }.play-icon { margin-right:8px; }.play-button.is-playing { background:#25364a; color:var(--text); box-shadow:none; }
input[type=range] { accent-color:var(--cyan); cursor:pointer; }.now-playing { margin-top:20px; padding:28px; }.section-head { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; }.section-head h2 { margin:0; font-size:clamp(42px,7vw,72px); color:var(--amber); letter-spacing:-.07em; line-height:.9; }.section-head h3 { margin:0; font-size:18px; }.bar-counter { text-align:right; color:var(--muted); font-size:13px; }.beat-lights { display:flex; justify-content:flex-end; gap:7px; margin-top:11px; }.beat-lights i { width:11px; height:11px; border-radius:50%; border:1px solid #4a5a70; background:#172338; }.beat-lights i.active { background:var(--cyan); border-color:var(--cyan); box-shadow:0 0 14px var(--cyan); }.scale-strip { display:flex; align-items:baseline; gap:10px; margin:28px 0 22px; padding:12px 14px; background:var(--cyan-soft); border-left:2px solid var(--cyan); border-radius:0 9px 9px 0; color:var(--muted); }.scale-strip strong { color:var(--text); }.progression { display:flex; gap:10px; overflow:auto; padding:2px 1px 7px; }.chord-card { flex:1; min-width:88px; display:grid; place-items:center; min-height:64px; border:1px solid #2c3c53; border-radius:10px; color:#b7c5d8; background:#0c1421; font-size:20px; font-weight:800; transition:.18s ease; }.chord-card.active { color:#101927; border-color:var(--cyan); background:var(--cyan); box-shadow:0 0 22px rgba(48,212,208,.3); }.bottom-grid { display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:20px; margin-top:20px; }.fretboard-panel,.mixer { padding:22px; }.compact { margin-bottom:20px; }.legend { color:var(--muted); font-size:12px; }.legend i { display:inline-block; width:9px; height:9px; margin-right:4px; background:var(--amber); border-radius:50%; }.fretboard-scroll { overflow-x:auto; padding-bottom:8px; }.fretboard { min-width:720px; padding:27px 8px 11px 48px; display:grid; grid-template-columns:repeat(12,1fr); grid-template-rows:repeat(6,31px); gap:0; background:linear-gradient(90deg,#a76b3e 0,#d29a61 4%,#bd7b45 100%); border:7px solid #523524; border-radius:7px; box-shadow:inset 0 0 25px rgba(33,13,3,.42); position:relative; }.fretboard::before { content:""; position:absolute; top:0; bottom:0; left:48px; width:5px; background:#e1d7c5; box-shadow:2px 0 5px #3d2518; }.fret { position:relative; display:flex; align-items:center; justify-content:center; border-right:2px solid rgba(221,217,206,.75); border-bottom:2px solid rgba(31,23,19,.65); }.fret::before { content:attr(data-fret); position:absolute; top:-22px; left:5px; font-size:9px; color:#d9b99c; }.fret:nth-child(-n+12)::after { content:""; }.note { z-index:1; width:21px; height:21px; display:grid; place-items:center; border-radius:50%; font-size:9px; font-weight:800; color:#061317; background:var(--cyan); box-shadow:0 1px 2px #271409; }.note.root { color:#251300; background:var(--amber); box-shadow:0 0 0 2px rgba(255,255,255,.38),0 1px 2px #271409; }.string-label { position:absolute; left:8px; color:#f0d5bb; font-size:10px; font-weight:800; }
.status-pill.ready { color:var(--text); border-color:rgba(48,212,208,.45); }.status-pill.ready i { background:var(--cyan); box-shadow:0 0 12px var(--cyan); }.status-pill.error { max-width:340px; color:#ffc4c8; border-color:#924c5b; white-space:normal; }.status-pill.error i { background:#ff7180; box-shadow:0 0 12px #ff7180; }.play-button:disabled { cursor:wait; opacity:.55; filter:saturate(.4); }
.legend { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:9px; }.legend span { white-space:nowrap; }.legend i { background:var(--cyan); }.legend-tonic i { background:#ff4655; box-shadow:0 0 6px rgba(255,70,85,.6); }.legend-chord i { background:#65e673; box-shadow:0 0 6px rgba(101,230,115,.5); }.note.tonic { color:#fff; background:#e63748; box-shadow:0 0 0 2px rgba(255,234,235,.75),0 1px 2px #271409; }.note.chord-root { color:#062110; background:#65e673; box-shadow:0 0 0 2px rgba(226,255,230,.55),0 1px 2px #271409; }.note.tonic.chord-root { color:#062110; background:#65e673; box-shadow:0 0 0 3px #ff4655,0 0 10px rgba(255,70,85,.65); }
.fretboard-tools { display:flex; flex-direction:column; align-items:flex-end; gap:10px; }.instrument-switch { display:flex; padding:3px; border:1px solid #33465e; border-radius:9px; background:#0a121e; }.instrument-switch button { border:0; border-radius:6px; padding:5px 10px; background:transparent; color:var(--muted); cursor:pointer; font:750 12px inherit; }.instrument-switch button.active { color:#061317; background:var(--cyan); }.fretboard.ukulele { min-width:610px; grid-template-rows:repeat(4,39px); padding-top:27px; padding-bottom:11px; }
.channel { display:grid; grid-template-columns:1fr auto; gap:10px 12px; align-items:center; margin-top:18px; }.channel > div { display:flex; align-items:center; gap:8px; font-weight:700; }.channel input { grid-column:1 / -1; width:100%; }.channel-dot { width:9px; height:9px; border-radius:50%; }.drums { background:var(--amber); }.bass { background:var(--cyan); }.harmony { background:#a984ff; }.mute { border:1px solid #3b4b61; border-radius:7px; padding:5px 8px; background:#111b2a; color:var(--muted); cursor:pointer; font:700 11px inherit; }.mute.muted { border-color:#8d5561; color:#ff9da6; background:#2a1820; }
@media (max-width:760px) { .app-shell { padding:27px 14px 20px; }.hero { margin-bottom:20px; }.status-pill { font-size:12px; }.control-panel { grid-template-columns:1fr 1fr; gap:13px; }.style-field,.tempo-field { grid-column:1 / -1; }.play-button { grid-column:1 / -1; width:100%; }.now-playing { padding:21px 16px; }.bottom-grid { grid-template-columns:1fr; }.mixer { padding:20px; }.fretboard-panel { padding:20px 12px; }.fretboard { min-width:670px; }.fretboard.ukulele { min-width:610px; }.fretboard-tools { align-items:flex-start; }.section-head h2 { font-size:52px; }.bar-counter { font-size:11px; }.scale-strip { margin-top:22px; }.subtitle { font-size:14px; } }