:root{--ink:#17211e;--paper:#f4f0e7;--cream:#e9e1d1;--green:#173e32;--mint:#9dd7b3;--orange:#e66a35;--line:#cfc6b5;--white:#fffdf8}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:Inter,Segoe UI,sans-serif}.hero{background:var(--green);color:white;padding:54px max(5vw,24px) 38px;border-bottom:7px solid var(--orange)}.eyebrow{font-size:12px;letter-spacing:.22em;color:var(--mint);font-weight:800}.hero h1{font-family:Georgia,serif;font-size:clamp(48px,8vw,92px);line-height:.9;margin:18px 0}.hero h1 em{color:var(--mint);font-weight:400}.hero p{max-width:700px;font-size:18px;color:#dbe7df}.facts{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}.facts span{border:1px solid #547269;border-radius:99px;padding:8px 14px;font-size:13px}main{width:min(1180px,92vw);margin:34px auto 80px}.notice{display:flex;gap:18px;background:#e1eadf;border-left:5px solid var(--green);padding:18px 22px;margin-bottom:28px}.notice span{font-size:28px}.notice p{margin:2px 0;line-height:1.5}.score-card,.workshop,.legend{background:var(--white);border:1px solid var(--line);box-shadow:0 8px 0 #d8cfbf;margin-bottom:30px;padding:28px}.section-head{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:22px}.section-head h2{font-family:Georgia,serif;font-size:30px;margin:2px 0}.section-head p{margin:6px 0;color:#5f6662}.step{color:var(--orange);font-size:12px;letter-spacing:.18em;font-weight:900}button{border:0;border-radius:3px;background:var(--orange);color:#fff;padding:13px 18px;font-weight:800;cursor:pointer;transition:.15s}button:hover{transform:translateY(-1px);filter:brightness(1.05)}button:disabled{opacity:.55}.secondary,.play{background:var(--green)}.score-wrap{overflow-x:auto;background:white;border:1px solid #e3ded4;padding:12px;min-height:210px}.score{min-width:950px}.styles{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:24px 0}.style{background:#ede8dd;color:var(--ink);text-align:left;display:grid;grid-template-columns:30px 1fr}.style span{grid-row:1/3;color:#978d7d}.style small{font-weight:500;color:#696e6b}.style.active{background:var(--green);color:white;outline:3px solid var(--mint)}.style.active small{color:#bed3ca}.improv-head{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:22px 0}.improv-head p{margin:5px 0;color:#646b67}.style-dot{display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--orange);margin-right:9px}.actions{display:flex;gap:8px}.tempo{min-width:220px}.tempo label{display:block;font-size:12px;font-weight:800}.tempo input{width:150px;accent-color:var(--orange);vertical-align:middle}.tempo output{font-weight:800;font-size:13px}.generated{font-size:12px;color:#737873;text-align:right}.legend h2{font-family:Georgia,serif}.legend p{font-size:13px;color:#676e69}.legend #chordGrid{display:grid;grid-template-columns:repeat(8,1fr);border-top:1px solid var(--line);border-left:1px solid var(--line)}.legend #chordGrid span{padding:11px 6px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);font-family:Georgia,serif;text-align:center}footer{background:#10231d;color:#afcfc0;padding:28px 5vw;display:flex;justify-content:space-between}footer span{letter-spacing:.18em;font-weight:900}footer p{margin:0}@media(max-width:760px){.section-head,.improv-head{align-items:stretch;flex-direction:column}.styles{grid-template-columns:1fr}.actions{flex-direction:column}.play{width:100%}.score-card,.workshop,.legend{padding:18px}.legend #chordGrid{grid-template-columns:repeat(4,1fr)}footer{gap:12px;flex-direction:column}}