@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');
:root{--paper:#f8f6f0;--ink:#203b36;--green:#173d35;--mint:#b7d9b4;--muted:#6b756c;--line:#e3e4da;--white:#fffefb;--serif:Georgia,'Times New Roman',serif;--sans:'DM Sans',system-ui,sans-serif;--display:'Manrope',system-ui,sans-serif}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:90px}body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:14px;line-height:1.6}button,input,select,textarea{font:inherit}button,a,input,select,textarea{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:disabled{opacity:.45;cursor:default}a{color:inherit;text-decoration:none}button{color:inherit}button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid #839e51;outline-offset:4px}input:focus,select:focus,textarea:focus{outline:2px solid #819a71;outline-offset:1px}button{touch-action:manipulation}button:hover:not(:disabled){filter:brightness(.96)}[hidden]{display:none!important}.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}.skip{position:fixed;top:-100px;left:15px;padding:10px;background:var(--green);color:white;z-index:20}.skip:focus{top:10px}
.topbar{max-width:1440px;margin:auto;padding:24px 5%;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);gap:24px}.brand{display:flex;align-items:center;gap:10px;font-family:var(--display);font-size:25px;font-weight:800;line-height:1.1;letter-spacing:-1.3px}.brand svg{width:38px;height:38px;flex-shrink:0}.brand-light{font-weight:400}.brand small{font-family:var(--sans);display:block;font-size:7px;letter-spacing:2.5px;font-weight:500;margin-top:6px}.topbar nav{display:flex;gap:30px;font-size:12px}.nav-active{font-weight:700}.free-pill{padding:7px 13px;background:#edf1e7;border:1px solid #dae2ce;border-radius:99px;font-size:11px;white-space:nowrap}.free-pill i{display:inline-block;width:5px;height:5px;background:#71975a;border-radius:50%;margin-right:6px}
main{max-width:1240px;margin:auto;padding:0 38px}.hero{display:grid;grid-template-columns:1.12fr 1fr;gap:35px;padding:62px 0 60px;align-items:center}.eyebrow{font-size:9px;letter-spacing:2px;font-weight:700;margin:0 0 14px}.hero .eyebrow{display:flex;align-items:center;gap:9px;letter-spacing:1.8px}.tiny-line{width:20px;height:1px;background:#7b987c}h1{font-family:var(--display);font-size:clamp(38px,4.5vw,61px);font-weight:500;letter-spacing:-3px;line-height:1.13;margin:0 0 23px}h1 em,h2 em{font-family:var(--serif);font-weight:400;color:#6b8c60;letter-spacing:-2px}.hero-sub{font-size:14px;color:var(--muted);line-height:1.8;margin:0 0 24px}.hero-link{display:inline-flex;gap:20px;align-items:center;font-size:12px;font-weight:700;border-bottom:1px solid #a9bba0;padding-bottom:7px}.hero-link span{font-size:17px}.hero-art{height:285px;position:relative;background:#e9ecdf;overflow:hidden;border-radius:140px 140px 12px 12px;display:flex;flex-direction:column;justify-content:space-between;padding:43px 32px 18px}.art-label{text-align:center;font-size:8px;letter-spacing:2.5px;z-index:1}.orbit{position:absolute;border:1px solid #cad2bf;width:330px;height:330px;border-radius:50%;left:50%;transform:translateX(-50%);top:44px}.orbit-two{width:230px;height:230px;top:94px}.wave-art{position:absolute;top:93px;left:30px;right:30px;height:116px;display:flex;align-items:center;justify-content:center;gap:5px}.wave-art i{width:4px;min-width:2px;border-radius:99px;background:#45644b;opacity:.8}.wave-art i:nth-child(3n){background:#9eb68b}.art-bottom{display:flex;align-items:center;justify-content:space-between;z-index:1;font-size:7px;letter-spacing:1.5px;margin-top:auto}.art-bottom i{display:inline-block;width:3px;height:3px;background:#98aa84;border-radius:50%;margin:0 6px}.art-sign{font-family:var(--serif);font-size:35px;letter-spacing:0}
.studio{padding-top:12px}.workspace-heading{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:25px}.workspace-heading .eyebrow{margin-bottom:5px;color:#6d7c61}h2{font-family:var(--display);font-weight:500;letter-spacing:-1.2px;font-size:27px;line-height:1.3;margin:0}.save-state{font-size:10px;color:#71816d}.tool-tabs{display:flex;gap:9px;overflow-x:auto;border-bottom:1px solid var(--line);padding-bottom:14px}.tool-tabs button{border:1px solid transparent;border-radius:9px;background:transparent;padding:11px 20px;display:grid;grid-template-columns:24px 1fr;text-align:left;font-size:12px;min-width:0;flex:1;column-gap:7px}.tool-tabs button[aria-selected=true]{border-color:#d8dfce;background:#eef1e7}.tab-icon{grid-row:span 2;font-size:20px;font-weight:400;align-self:center}.tab-caption{display:block;font-size:9px;color:var(--muted)}.preset-strip{display:flex;align-items:center;gap:20px;padding:23px 0}.preset-strip>span{font-size:8px;letter-spacing:1.7px;white-space:nowrap}.preset-buttons{display:flex;gap:7px;flex-wrap:wrap}.preset-buttons button{border:1px solid #dadfcf;background:transparent;padding:6px 11px;border-radius:99px;font-size:10px}.preset-buttons button.selected{background:var(--green);color:white;border-color:var(--green)}.blueprint-layout{display:grid;grid-template-columns:350px minmax(0,1fr);gap:21px;align-items:start}.settings-card,.result-card,.calculator-card,.tempo-card{background:var(--white);border:1px solid var(--line);border-radius:12px;padding:25px}.card-heading{display:flex;gap:11px;align-items:center;margin-bottom:23px}.step-number{font-size:10px;background:#eff1e8;border:1px solid #e2e5d9;width:29px;height:29px;display:flex;align-items:center;justify-content:center;border-radius:50%;flex-shrink:0}.card-heading h3{font-family:var(--display);font-size:15px;font-weight:700;margin:0;letter-spacing:-.35px}.card-heading p{font-size:10px;color:var(--muted);margin:2px 0 0}label{display:block;font-size:10px;font-weight:600;margin-bottom:6px}.label-unit{font-size:8px;color:var(--muted);font-weight:400;margin-left:4px}input,select,textarea{width:100%;padding:10px 11px;border:1px solid #e0e3d8;border-radius:6px;background:#fffefb;color:var(--ink);font-size:12px;min-height:40px}textarea{resize:vertical;line-height:1.6}select{padding-right:23px}#song-title{margin-bottom:16px}.field-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:16px}.field-row>div{min-width:0}.instruments{border:0;padding:0;margin:6px 0 19px}.instruments legend{padding:0;font-size:10px;font-weight:600;margin-bottom:9px}.instruments legend span{font-size:9px;font-weight:400;color:var(--muted);margin-left:9px}#instrument-chips{display:flex;flex-wrap:wrap;gap:5px}.instrument-chip{background:transparent;border:1px solid #e0e4d7;border-radius:5px;font-size:10px;padding:5px 9px}.instrument-chip[aria-pressed=true]{background:#e7eede;border-color:#bfceac;color:#32563b}.primary{border:0;background:var(--green);color:white;font-weight:600;font-size:12px;padding:12px 17px;border-radius:6px;min-height:44px;display:flex;align-items:center;justify-content:space-between;gap:12px}.build-button{width:100%;margin-top:18px}.form-note{text-align:center;margin:11px 0 0;color:var(--muted);font-size:9px}.result-heading .text-button{margin-left:auto}.text-button{border:0;background:transparent;font-size:10px;color:#5d705d;padding:7px 0;text-decoration:underline;text-underline-offset:3px}.result-title-row{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:17px}.result-title-row h4{margin:0;font-family:var(--serif);font-size:24px;font-weight:400;overflow-wrap:anywhere}.result-title-row>span{font-size:9px;color:#826735}.stats-row{display:grid;grid-template-columns:repeat(4,1fr);background:#f4f5ee;border:1px solid #e7e9df;padding:14px 0;border-radius:7px}.stats-row>div{padding:0 14px;border-right:1px solid #e0e5d7}.stats-row>div:last-child{border:0}.stats-row span{font-family:var(--display);font-size:22px;line-height:1.3}.stats-row small{display:block;font-size:7px;letter-spacing:1.1px;color:var(--muted);margin-top:4px}.curve-header{display:flex;justify-content:space-between;align-items:center;margin:22px 0 6px;font-size:8px;letter-spacing:1px}.curve-header span:last-child{font-size:8px;letter-spacing:0;color:var(--muted);display:flex;align-items:center;gap:5px}.curve-header i{width:30px;height:4px;background:linear-gradient(90deg,#dce5cc,#345a39);border-radius:3px}.energy-chart{width:100%;height:135px}.energy-chart svg{width:100%;height:100%;overflow:visible}.timing-note{font-size:9px;color:var(--muted);margin:7px 0 22px}.section-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:9px;gap:10px}.section-heading h4{font-size:12px;font-weight:600;margin:0}.section-heading span{font-size:9px;color:var(--muted)}.section-row{border-bottom:1px solid #ebede4;padding:10px 0}.section-summary{display:grid;grid-template-columns:24px minmax(0,1fr) 55px 43px 21px;align-items:center;gap:7px;min-height:33px}.section-index{font-size:9px;color:#8a9581}.section-name-button{border:0;background:transparent;padding:4px 0;text-align:left;font-size:11px;font-weight:600;min-width:0;overflow-wrap:anywhere;display:flex;align-items:center;gap:5px}.section-name-button span{font-size:8px;color:#8c9d80}.section-time{font-size:9px;color:#6f7c68;white-space:nowrap}.section-bar-input{padding:5px!important;min-height:30px!important;font-size:11px;text-align:center}.energy-dot{width:8px;height:8px;justify-self:center;border-radius:50%;background:#6d8c50}.section-editor{padding:14px 0 8px 30px}.section-edit-fields{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:10px}.section-editor input[type=range]{padding:0;border:0;min-height:28px;accent-color:#4c6e3a}.editor-actions{display:flex;gap:8px;justify-content:space-between;margin-top:7px}.editor-actions button{border:1px solid #dce1d3;background:transparent;border-radius:4px;padding:5px 10px;min-height:32px;font-size:10px}.move-actions{display:flex;gap:5px}.remove-section{color:#8b4940!important}.add-section{display:flex;gap:8px;margin-top:17px}.add-section select{width:auto;flex:1}.secondary{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:transparent;border:1px solid #d5ddca;border-radius:6px;padding:9px 13px;font-size:10px;font-weight:600;min-height:40px;white-space:nowrap}.result-column{display:flex;flex-direction:column;gap:16px}.export-card{background:var(--green);color:#f4f7ed;padding:23px 25px;border-radius:12px}.export-heading{display:flex;align-items:center;justify-content:space-between;gap:10px}.export-heading .eyebrow{font-size:7px;color:#bdd1b2;letter-spacing:1.7px;margin-bottom:5px}.export-heading h3{font-family:var(--display);margin:0;font-size:17px;letter-spacing:-.4px;font-weight:500}.icon-button{border:1px solid #4c685d;background:transparent;color:#e7eedf;border-radius:50%;width:33px;height:33px;font-size:19px}.export-tabs{display:flex;gap:20px;margin:20px 0 12px;border-bottom:1px solid #456157}.export-tabs button{border:0;background:transparent;color:#bbcabc;padding:0 0 8px;font-size:10px}.export-tabs button[aria-selected=true]{color:#edf5e5;border-bottom:2px solid #b4caa4}.export-card textarea{background:#21483f;color:#e4eddf;border:1px solid #416052;font-family:var(--sans);font-size:10px;padding:13px;min-height:150px;line-height:1.8}.export-bottom{display:flex;align-items:center;justify-content:space-between;gap:13px;margin-top:14px}.export-bottom p{font-size:8px;color:#c0cec0;line-height:1.8;margin:0}.light-button{border:0;background:#dce8c9;padding:9px 12px;border-radius:5px;color:#254532;font-size:10px;white-space:nowrap;min-height:36px}.light-button span{margin-left:9px}.export-disclaimer{font-size:8px;color:#bdd0bd;border-top:1px solid #436053;padding-top:12px;margin:16px 0 0}.utility-panel{display:grid;grid-template-columns:1fr 1fr;gap:60px;padding:42px 50px;background:#edf0e4;border-radius:0 0 12px 12px;align-items:center}.utility-copy h3{font-family:var(--display);font-weight:500;letter-spacing:-1.5px;font-size:35px;line-height:1.25;margin:0 0 18px}.utility-copy p:not(.eyebrow){font-size:13px;color:#64715d;max-width:350px}.utility-copy .utility-note{font-size:10px!important;margin-top:25px}.tempo-card{text-align:center;max-width:430px;width:100%;justify-self:end}.bpm-reading{margin:8px 0 18px;line-height:1.15}.bpm-reading>span{font-size:70px;font-family:var(--display);font-weight:500;letter-spacing:-4px}.bpm-reading small{display:block;font-size:9px;letter-spacing:2px;margin-top:8px}.tap-button{width:100%;border:1px solid #b8cba8;border-radius:10px;background:#e5eddc;padding:22px 12px;min-height:92px}.tap-button span{display:block;font-family:var(--display);font-size:17px}.tap-button small{display:block;font-size:8px;color:#5c7356;margin-top:8px}.tap-button.tapped{background:#bace9e;transform:scale(.985)}.tap-controls{display:flex;justify-content:space-between;align-items:center;font-size:9px;color:var(--muted);margin:14px 0}.tempo-card .primary{width:100%;justify-content:center}.calculator-card{width:100%;max-width:430px;justify-self:end}.calc-mode{display:flex;background:#f0f2e9;padding:4px;border-radius:6px;margin-bottom:22px}.calc-mode button{flex:1;border:0;background:transparent;border-radius:4px;font-size:10px;padding:8px}.calc-mode .active{background:white;box-shadow:0 1px 3px #1d321216}.calc-result{margin-top:24px;border-top:1px solid var(--line);padding-top:24px;text-align:center}.calc-result strong{display:block;font-family:var(--display);font-size:44px;font-weight:500;letter-spacing:-2px;line-height:1.2}.calc-result .eyebrow{font-size:8px;margin-bottom:8px}.calc-result p{font-size:10px;color:var(--muted);margin:10px 0 0}.how-section{display:grid;grid-template-columns:1fr 1fr;gap:90px;padding:85px 15px}.how-intro h2{font-size:39px;letter-spacing:-2px}.how-intro>p:last-child{font-size:12px;color:var(--muted);max-width:350px;margin-top:20px;line-height:1.9}.how-steps{display:flex;flex-direction:column;gap:28px}.how-steps article{display:flex;gap:20px}.how-steps article>span{font-family:var(--serif);color:#8d9d7b;font-size:26px;line-height:1}.how-steps h3{font-size:14px;margin:0 0 7px;font-weight:600}.how-steps p{font-size:11px;color:var(--muted);margin:0;line-height:1.8}.hilm-banner{display:flex;align-items:center;gap:24px;padding:30px 35px;border:1px solid #dbe0d1;border-radius:10px;background:#eef0e6}.banner-mark{font-family:var(--serif);font-size:55px;line-height:1;border-right:1px solid #cdd6bf;padding-right:24px;color:#6f8a5d}.hilm-banner .eyebrow{font-size:7px;margin-bottom:7px}.hilm-banner h2{font-size:23px}.hilm-banner p:last-child{font-size:11px;color:var(--muted);margin:7px 0 0}.hilm-banner>a{margin-left:auto}.faq-section{display:grid;grid-template-columns:1fr 1.4fr;gap:70px;padding:65px 15px 80px}.faq-section h2{font-size:26px}.faqs details{border-bottom:1px solid #dce1d2;padding:13px 0}.faqs details:first-child{padding-top:0}.faqs summary{font-weight:600;font-size:12px;cursor:pointer;padding-right:15px}.faqs p{font-size:11px;color:var(--muted);line-height:1.8;margin:12px 0 0}footer{max-width:1164px;margin:0 auto;padding:23px 0 30px;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:20px;font-size:10px;color:var(--muted)}.footer-brand{font-size:20px;color:var(--green);font-family:var(--display);font-weight:800;letter-spacing:-1px}.footer-brand span{font-weight:400}footer div{display:flex;gap:23px;align-items:center}footer p{margin:0}dialog{max-width:490px;width:calc(100% - 32px);border:1px solid #d0d9c3;background:var(--white);border-radius:14px;padding:35px;color:var(--ink)}dialog::backdrop{background:#10291c80;backdrop-filter:blur(4px)}dialog p:not(.eyebrow){font-size:12px;color:var(--muted)}.dialog-close{position:absolute;right:14px;top:10px;background:transparent;border:0;font-size:24px;width:35px;height:35px}#toast{position:fixed;bottom:25px;left:50%;transform:translate(-50%,20px);padding:12px 20px;border-radius:8px;background:#173d35;color:white;box-shadow:0 4px 24px #11281525;font-size:12px;opacity:0;transition:.2s;pointer-events:none;z-index:50;text-align:center;max-width:calc(100% - 30px);width:max-content}#toast.visible{opacity:1;transform:translate(-50%,0)}
@media(min-width:1450px){main{max-width:1320px}.blueprint-layout{grid-template-columns:370px minmax(0,1fr)}h1{font-size:65px}.hero-art{height:310px}.wave-art{top:105px}.hero{padding-top:70px}}
@media(max-width:1000px){main{padding:0 28px}.blueprint-layout{grid-template-columns:310px minmax(0,1fr);gap:15px}.settings-card,.result-card{padding:20px}.hero-art{height:255px;padding:36px 20px 15px}.art-bottom{font-size:6px;letter-spacing:1px}.hero .eyebrow{font-size:8px}.stats-row>div{padding:0 9px}.stats-row span{font-size:19px}.stats-row small{font-size:6px}.section-heading span{font-size:8px}.export-bottom{align-items:flex-start}.utility-panel{padding:35px;gap:30px}.how-section{gap:50px;padding:65px 0}.faq-section{padding-left:0;padding-right:0;gap:40px}footer{margin:0 28px}}
@media(max-width:760px){.topbar{padding:20px 24px}.topbar nav{gap:18px;font-size:11px}.topbar nav a:nth-child(2){display:none}.free-pill{display:none}main{padding:0 22px}.hero{grid-template-columns:1.1fr .8fr;gap:15px;padding:40px 0}.hero-art{height:218px;padding:30px 17px 16px;border-radius:110px 110px 10px 10px}.art-label{font-size:6px;letter-spacing:1.5px}.art-bottom>span:first-child{display:none}.art-bottom{justify-content:center}.wave-art{left:15px;right:15px;gap:3px;top:74px;height:95px}.wave-art i{width:3px}.hero-sub{font-size:12px}.hero .eyebrow{font-size:7px;letter-spacing:1px}.tiny-line{display:none}h1{font-size:38px;letter-spacing:-2px}.workspace-heading h2{font-size:23px}.save-state{font-size:8px}.tool-tabs{gap:4px}.tool-tabs button{min-width:0;flex:1;padding:10px 9px;font-size:10px;grid-template-columns:19px 1fr;column-gap:4px}.tab-icon{font-size:17px}.tab-caption{font-size:8px}.preset-strip{gap:10px;align-items:flex-start;flex-direction:column;padding:17px 0}.blueprint-layout{grid-template-columns:1fr}.settings-card{padding:24px;display:grid;grid-template-columns:1fr 1fr;column-gap:20px}.settings-card>.card-heading,.settings-card>.instruments,.settings-card>label,.settings-card>#song-title,.settings-card>#brief,.settings-card>.build-button,.settings-card>.form-note{grid-column:1/-1}.settings-card>.field-row{display:block}.settings-card>.field-row>div+div{margin-top:14px}.settings-card>.instruments{margin-top:0}.result-card{padding:24px}.stats-row>div{padding:0 15px}.stats-row span{font-size:23px}.stats-row small{font-size:7px}.energy-chart{height:150px}.utility-panel{padding:27px;grid-template-columns:1fr;gap:20px}.utility-copy h3{font-size:29px}.utility-copy>p:not(.eyebrow){max-width:none}.utility-copy .utility-note{margin-top:14px}.tempo-card,.calculator-card{max-width:none}.how-section{grid-template-columns:1fr;gap:24px;padding:55px 0}.how-intro h2{font-size:33px}.how-intro h2 br{display:none}.how-intro>p:last-child{max-width:none}.how-steps{gap:22px}.hilm-banner{flex-wrap:wrap;padding:24px;gap:16px}.banner-mark{font-size:40px;padding-right:16px}.hilm-banner h2{font-size:21px}.hilm-banner>a{margin-left:0}.faq-section{grid-template-columns:1fr;gap:25px;padding:45px 0 50px}footer{flex-wrap:wrap}footer p{order:3;width:100%}.export-bottom p{font-size:9px}}
@media(max-width:430px){.topbar{padding:17px 18px;gap:12px}.brand{font-size:23px}.brand svg{width:33px;height:33px}.brand small{font-size:6px;letter-spacing:2px}.topbar nav a:first-child{display:none}.topbar nav{font-size:10px}main{padding:0 16px}.hero{grid-template-columns:1fr;position:relative;padding:37px 0}.hero-art{display:none}h1{font-size:45px;letter-spacing:-2.5px}.hero .eyebrow{font-size:8px}.hero-sub{font-size:13px}.hero-link{font-size:11px}.workspace-heading{align-items:flex-start;margin-bottom:18px}.workspace-heading h2{font-size:22px}.workspace-heading .eyebrow{font-size:8px}.save-state{max-width:90px;text-align:right;margin-top:6px;font-size:8px}.tool-tabs button{min-width:105px;padding:10px 6px;grid-template-columns:1fr;text-align:center;font-size:10px}.tab-icon{display:none}.tab-caption{font-size:7px}.preset-buttons{gap:5px}.preset-buttons button{font-size:9px;padding:6px 9px}.settings-card{padding:20px;column-gap:13px}.result-card{padding:20px}.card-heading h3{font-size:14px}.card-heading p{font-size:9px}.stats-row>div{padding:0 9px}.stats-row span{font-size:20px}.stats-row small{font-size:6px;letter-spacing:.6px}.section-heading span{max-width:110px;text-align:right}.section-summary{grid-template-columns:20px minmax(0,1fr) 46px 39px 12px;gap:5px}.section-time{font-size:8px}.section-name-button{font-size:10px}.section-editor{padding-left:20px}.export-card{padding:20px}.export-heading h3{font-size:16px}.export-bottom{flex-wrap:wrap}.export-bottom p{font-size:9px}.export-bottom button{margin-left:auto}.utility-panel{padding:20px}.utility-copy h3{font-size:27px}.bpm-reading>span{font-size:60px}.hilm-banner{padding:20px}.banner-mark{display:none}.hilm-banner>a{width:100%}footer{margin:0 16px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important;animation:none!important}}

.arrangement-export{margin-top:22px}.export-label{font-size:8px;letter-spacing:1.5px;color:#bfd0b9;margin-bottom:9px}.sound-panel{background:#edf0e4;padding:34px;border-radius:0 0 12px 12px}.sound-intro{display:flex;justify-content:space-between;gap:30px;align-items:flex-start;margin-bottom:28px}.sound-intro h3{font-family:var(--display);font-size:30px;letter-spacing:-1.2px;font-weight:500;line-height:1.2;margin:0 0 12px}.sound-intro p:last-child{font-size:12px;color:var(--muted);max-width:570px;margin:0}.sound-badge{font-size:9px;border:1px solid #cdd8bf;border-radius:99px;padding:7px 12px;white-space:nowrap}.chord-controls{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:20px}.chord-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.chord-card{background:var(--white);border:1px solid #d8decb;border-radius:10px;padding:23px 17px;display:flex;flex-direction:column;align-items:flex-start;text-align:left;min-height:145px}.chord-card small{font-size:10px;color:#748760}.chord-card strong{font-family:var(--display);font-size:29px;line-height:1.4;font-weight:500;letter-spacing:-1px;margin:5px 0 8px}.chord-card span{font-size:10px;color:var(--muted)}.chord-card.playing{background:#d8e5c6;border-color:#75935b}.sound-actions{display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin-top:22px}.sound-actions>span{font-size:10px;color:var(--muted);margin-left:auto}.sound-note{font-size:9px;color:var(--muted);margin:17px 0 0;max-width:700px}.beat-toolbar{display:flex;align-items:end;gap:25px;margin-bottom:24px}.beat-toolbar>div:first-child{width:190px}.beat-toolbar>div:nth-child(2){flex:1;max-width:350px}.beat-toolbar input[type=range]{padding:0;border:0;background:none;accent-color:#4b7040;min-height:40px}.beat-toolbar .text-button{margin-left:auto;padding:11px 0}.beat-toolbar label span{float:right;color:#768268;font-weight:400}.sequencer-wrap{overflow-x:auto;padding-bottom:7px}.sequencer{min-width:530px;display:grid;grid-template-columns:64px repeat(16,minmax(22px,1fr));gap:6px;align-items:center}.step-number-label{font-size:8px;text-align:center;color:#708260;height:20px}.drum-label{font-size:10px;font-weight:600;display:flex;align-items:center;height:40px}.beat-step{height:40px;background:#fffefb;border:1px solid #d8dfcb;border-radius:5px;padding:0;font-size:0}.beat-step[aria-pressed=true]{background:#75965d;border-color:#75965d}.beat-step.snare[aria-pressed=true]{background:#97ad77;border-color:#97ad77}.beat-step.hat[aria-pressed=true]{background:#bccd9c;border-color:#a6bb83}.beat-step.quarter{border-left:2px solid #adc297}.beat-step.current{box-shadow:inset 0 0 0 2px #254d33;border-color:#254d33}.beat-step.current:after{content:'';display:block;width:4px;height:4px;border-radius:50%;background:#254d33;margin:auto}.step-number-label.current{color:#244b30;font-weight:700}
@media(max-width:760px){.tool-tabs button{min-width:120px}.sound-panel{padding:25px}.sound-intro{gap:15px}.sound-intro h3{font-size:27px}.sound-badge{display:none}.chord-controls{grid-template-columns:1fr 1fr;gap:13px}.chord-cards{gap:8px}.chord-card{padding:17px 12px;min-height:128px}.chord-card strong{font-size:24px}.sound-actions>span{margin-left:0;width:100%}.beat-toolbar{gap:15px}.beat-toolbar>div:first-child{width:165px}.beat-toolbar .text-button{white-space:nowrap}.sound-note{font-size:10px}}
@media(max-width:430px){.sound-panel{padding:20px}.chord-cards{grid-template-columns:1fr 1fr}.chord-card{min-height:115px;padding:15px}.beat-toolbar{flex-wrap:wrap;gap:8px 16px}.beat-toolbar>div:first-child{width:calc(50% - 8px)}.beat-toolbar>div:nth-child(2){max-width:none;width:calc(50% - 8px)}.beat-toolbar .text-button{margin-left:0}.sound-actions .secondary{min-height:44px}}

/* Comfortable reading and deliberate controls for a music workspace. */
label{font-size:12px}input,select,textarea{font-size:14px;min-height:44px}.card-heading h3{font-size:17px}.card-heading p{font-size:12px}.instrument-chip{font-size:12px;padding:7px 10px;min-height:34px}.instruments legend{font-size:12px}.instruments legend span{font-size:11px}.form-note,.timing-note{font-size:11px;line-height:1.7}.section-heading h4{font-size:14px}.section-heading span{font-size:11px}.section-name-button{font-size:13px;min-height:42px}.section-time{font-size:11px}.section-summary{grid-template-columns:25px minmax(0,1fr) 54px 50px 15px}.section-bar-input{min-height:38px!important;font-size:13px}.section-index{font-size:11px}.section-row{padding:8px 0}.section-editor label{font-size:12px}.editor-actions button{font-size:12px;min-height:38px}.text-button{font-size:12px;min-height:36px}.secondary,.primary,.light-button{font-size:12px;min-height:44px}.export-card textarea{font-size:12px;min-height:185px}.export-bottom p,.export-disclaimer{font-size:11px}.section-edit-fields>div{min-width:0}.utility-copy p:not(.eyebrow){font-size:14px}.utility-copy .utility-note{font-size:12px!important}.tool-tabs button{font-size:12px}.tab-caption{font-size:10px}.tool-tabs{scrollbar-width:thin;scrollbar-color:#aebd9b transparent}.preset-buttons button{font-size:11px;min-height:36px}.save-state{font-size:11px}.result-title-row>span{font-size:11px}.curve-header{font-size:10px}.curve-header span:last-child{font-size:10px}.section-heading{align-items:flex-start}.arrangement-guide{font-size:11px;color:var(--muted);margin:0 0 12px}.workspace-utility{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;padding:15px 0 12px}.beginner-help{display:flex;flex-wrap:wrap;gap:7px;align-items:center;font-size:12px}.beginner-help>a{font-weight:600;text-decoration:underline;text-underline-offset:3px}.welcome-dot{width:6px;height:6px;background:#74955d;border-radius:50%}.project-actions{display:flex;gap:18px}.sound-level{display:flex;align-items:center;gap:14px;background:#eef1e7;border:1px solid #dce3d0;border-radius:8px;padding:8px 14px;margin-bottom:4px}.sound-level label{font-size:11px;white-space:nowrap;margin:0}.sound-level label span{margin-left:5px;font-weight:400;color:var(--muted)}.sound-level input{max-width:150px;min-height:32px;accent-color:#4c723c;border:0;padding:0;background:transparent}.sound-level .secondary{min-height:34px;padding:5px 10px;font-size:11px;white-space:nowrap}.sound-level>span{font-size:10px;color:var(--muted);margin-left:auto}.blueprint-actions{display:flex;gap:13px;margin-left:auto}.result-heading .text-button{margin-left:0}.practice-panel{grid-template-columns:1fr 1fr;align-items:start;gap:30px}.practice-panel .utility-copy{grid-column:1/-1}.practice-panel .utility-copy p:not(.eyebrow){max-width:650px}.practice-panel .utility-copy .utility-note{margin-top:8px}.metronome-card{padding:25px;border:1px solid var(--line);border-radius:12px;background:var(--white);width:100%}.metronome-card h3{font-size:21px;font-family:var(--display);font-weight:500;margin:0 0 10px;letter-spacing:-.8px}.metronome-card>div>p:not(.eyebrow){font-size:12px;color:var(--muted);margin:0 0 22px}.metronome-card .eyebrow{font-size:8px}.metro-lights{display:flex;gap:10px;justify-content:center;margin:25px 0}.metro-light{width:43px;height:43px;border:1px solid #d9e1cb;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#edf1e4;color:#6e7f5c;font-size:13px}.metro-light.accent{border-color:#9db689}.metro-light.current{background:#adc991;border-color:#53763d;color:#294823}.metro-light.accent.current{background:#668952;color:white}.metronome-card .primary{width:100%;justify-content:center}.metronome-card .utility-note{font-size:12px;color:var(--muted);text-align:center}.chord-editors{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:15px}.chord-editors>div{min-width:0}.chord-editors label{font-size:11px}.chord-lesson,.beat-lesson{font-size:12px;color:var(--muted);line-height:1.8;margin:18px 0}.beat-toolbar .text-button{margin-left:0}.beat-toolbar>div:nth-child(2){margin-right:auto}.sequencer{min-width:730px;grid-template-columns:72px repeat(16,minmax(32px,1fr));gap:7px}.beat-step{height:44px}.step-number-label{font-size:11px}.drum-label{font-size:12px;position:sticky;left:0;background:#edf0e4;z-index:1}.mobile-scroll-hint{font-size:11px;color:var(--muted);margin:5px 0 0;display:none}.sound-intro p:last-child{font-size:14px}.sound-note,.sound-actions>span{font-size:12px}.chord-card span{font-size:12px}.chord-card small{font-size:12px}.learn-section{padding:65px 0 0}.learn-heading{display:flex;justify-content:space-between;gap:50px;align-items:center;margin-bottom:25px}.learn-heading h2{font-size:29px}.learn-heading>p{font-size:13px;color:var(--muted);max-width:420px;margin:0}.learn-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.learn-cards article{padding:25px;background:#fffefb;border:1px solid #e0e5d6;border-radius:10px;display:flex;flex-direction:column;align-items:flex-start}.learn-number{font-size:9px;font-weight:600;letter-spacing:1.8px;color:#7b8a67}.learn-cards h3{font-family:var(--display);font-size:18px;font-weight:600;letter-spacing:-.7px;margin:12px 0 8px}.learn-cards p{font-size:13px;color:var(--muted);margin:0 0 18px;line-height:1.8}.learn-cards button{margin-top:auto}.music-basics{display:grid;grid-template-columns:1fr 1fr;gap:0 25px;margin-top:25px;align-items:start}.music-basics details{border-bottom:1px solid #dce1d2;padding:15px 0}.music-basics summary{cursor:pointer;font-size:13px;font-weight:600}.music-basics p{font-size:13px;color:var(--muted);line-height:1.8}.how-steps p,.how-intro>p:last-child,.hilm-banner p:last-child,.faqs p{font-size:13px}.faqs summary{font-size:13px}.beat-toolbar label span{font-size:11px}.tap-controls{font-size:11px}.calculator-card .calc-result p{font-size:12px}.sound-actions .primary,.sound-actions .secondary{min-width:130px}.stats-row small{font-size:8px;letter-spacing:.8px}dialog p:not(.eyebrow){font-size:14px}
@media(max-width:760px){input,select,textarea{font-size:16px}.settings-card{display:block}.settings-card>.field-row{display:grid;grid-template-columns:1fr 1fr}.settings-card>.field-row>div+div{margin-top:0}.tool-tabs button{min-width:142px;font-size:12px}.tab-caption{font-size:10px}.sound-level>span{display:none}.sound-level{padding:8px 10px;gap:10px}.sound-level input{min-width:55px;width:100%;max-width:140px}.sound-level label{font-size:10px}.save-state{font-size:10px}.stats-row small{font-size:8px}.stats-row>div{padding:0 10px}.section-heading span{font-size:10px}.section-summary{grid-template-columns:23px minmax(0,1fr) 47px 46px 12px;gap:5px}.section-bar-input{font-size:16px!important}.section-time{font-size:10px}.section-name-button{font-size:13px}.practice-panel{grid-template-columns:1fr;gap:20px}.practice-panel .utility-copy{grid-column:auto}.chord-cards,.chord-editors{gap:9px}.chord-editors select{font-size:14px}.beat-toolbar{flex-wrap:wrap}.beat-toolbar>div:first-child{width:180px}.beat-toolbar>div:nth-child(2){max-width:none;min-width:180px}.mobile-scroll-hint{display:block}.learn-heading{flex-direction:column;align-items:flex-start;gap:15px}.learn-heading>p{max-width:none}.learn-cards{grid-template-columns:1fr}.learn-cards article{padding:22px}.learn-cards h3{font-size:20px}.learn-cards p{max-width:500px}.music-basics{grid-template-columns:1fr}.chord-lesson,.beat-lesson{font-size:12px}.export-bottom p{font-size:11px}.export-disclaimer{font-size:10px}.card-heading p{font-size:11px}.chord-card strong{font-size:27px}}
@media(max-width:430px){.sound-level label span{display:none}.sound-level label{max-width:75px;white-space:normal;line-height:1.3}.sound-level .secondary{font-size:10px;min-height:36px}.sound-level input{flex:1}.project-actions{gap:18px}.workspace-utility{gap:4px;padding-bottom:10px}.beginner-help{font-size:11px}.chord-cards,.chord-editors{grid-template-columns:1fr 1fr}.chord-editors select{font-size:16px}.card-heading{gap:9px}.card-heading h3{font-size:15px}.result-heading .card-heading p{font-size:10px}.step-number{width:26px;height:26px}.blueprint-actions{gap:9px}.blueprint-actions .text-button{font-size:11px}.result-title-row{flex-wrap:wrap;gap:5px}.beat-toolbar>div:first-child,.beat-toolbar>div:nth-child(2){min-width:0;max-width:none;width:100%;flex:auto}.beat-toolbar .text-button{margin-left:0}.sound-actions .primary,.sound-actions .secondary{flex:1;white-space:nowrap}.save-state{max-width:115px;font-size:10px}.section-name-button{font-size:12px}.section-time{font-size:9px}.stats-row small{font-size:7px}.curve-header{font-size:9px}.curve-header span:last-child{font-size:9px}.export-card textarea{font-size:14px}.learn-section{padding-top:45px}}

.brand-art{margin:0;justify-self:end;max-width:365px;width:100%;padding:11px;background:#e9e7dc;border:1px solid #d3cdb8;border-radius:18px;box-shadow:0 18px 40px #2635220a;transform:rotate(1deg)}.brand-art img{display:block;width:100%;height:auto;aspect-ratio:1;border-radius:10px}.brand-art figcaption{font-size:8px;letter-spacing:1.6px;text-align:center;margin:12px 0 3px;color:#6f6a57}.hero h1 em{color:#8f6f36}.hero .eyebrow{color:#776747}.banner-art{width:112px;height:112px;border-radius:8px;object-fit:contain;flex-shrink:0}.sound-level{flex-wrap:wrap}.sound-level .text-button{font-size:11px;min-height:34px;margin-left:auto}.audio-status{font-size:12px;color:#5c6d53;margin:10px 2px;line-height:1.7}.audio-status.error{color:#894836}.audio-status.playing{color:#376437}.sound-help{border:1px solid #dce2d2;border-radius:7px;background:#fffefb;margin:10px 0 18px;padding:10px 13px}.sound-help summary,.fallback-player summary{cursor:pointer;font-size:12px;color:#5b7150}.sound-help-content{display:flex;align-items:center;gap:20px;padding:12px 0 2px}.sound-help-content audio{width:290px;max-width:100%;flex-shrink:0;height:40px}.sound-help-content p{font-size:12px;color:var(--muted);margin:0}.fallback-player{margin-top:20px;border-top:1px solid #d4ddc6;padding-top:14px}.fallback-player>p{font-size:12px;color:var(--muted)}.fallback-player>audio{display:block;width:100%;max-width:500px;height:45px;margin-top:14px}.fallback-player>span{display:block;font-size:12px;color:#5d7350;margin-top:8px}.fallback-player .secondary{min-width:175px}
@media(max-width:760px){.brand-art{max-width:270px;padding:8px}.brand-art figcaption{font-size:6px;letter-spacing:1.2px;margin:9px 0 2px}.hero{grid-template-columns:1.1fr .9fr;gap:20px}.sound-level .text-button{margin-left:0}.sound-help-content{flex-direction:column;align-items:flex-start;gap:12px}.banner-art{width:82px;height:82px}.hilm-banner{align-items:center}}
@media(max-width:430px){.hero{grid-template-columns:1fr;gap:25px;padding:32px 0}.brand-art{max-width:240px;justify-self:center;transform:none}.brand-art figcaption{font-size:7px}.hero-copy h1{font-size:43px}.sound-level{gap:8px}.sound-level input{min-width:100px}.sound-level .secondary{font-size:11px}.sound-level .text-button{font-size:11px;margin-left:auto}.banner-art{width:82px;height:82px}.hilm-banner>div{flex:1;min-width:140px}.hilm-banner>a{width:100%}.audio-status{font-size:12px}}
.brand-logo{width:52px;height:52px;object-fit:contain;border-radius:9px;flex-shrink:0;display:block}.tool-hero{display:flex;justify-content:space-between;gap:28px;padding:36px 0 30px;align-items:flex-end;border-bottom:1px solid var(--line);margin-bottom:26px}.tool-hero h1{font-size:42px;letter-spacing:-1.8px;margin:0 0 13px;line-height:1.15}.tool-hero .hero-sub{font-size:14px;margin:0 0 12px}.tool-hero .eyebrow{color:#64735d;font-size:9px;letter-spacing:1.5px}.hilm-attribution{font-size:12px;color:var(--muted);margin:0}.hilm-attribution a{color:var(--green);font-weight:600;text-decoration:underline;text-underline-offset:3px}.tool-hero .hero-link{white-space:nowrap;flex-shrink:0;margin-bottom:4px}.sound-help{background:transparent;margin:13px 0 16px;border:0;padding:0}.sound-help summary{font-size:11px}.sound-help-content{align-items:flex-start;gap:16px;flex-wrap:wrap}.sound-help-content p{width:100%;font-size:12px;max-width:780px}.sound-help-content .text-button{font-size:12px}.sound-level label{white-space:nowrap}.sound-level label span{display:inline!important}.sound-level input{flex:1;max-width:240px;min-width:80px}.hilm-banner{padding:24px 28px}.hilm-banner>div{max-width:700px}.hilm-banner p:last-child{line-height:1.8}footer p a{text-decoration:underline;text-underline-offset:3px}
@media(max-width:760px){.tool-hero{padding:26px 0 23px;display:block;margin-bottom:22px}.tool-hero h1{font-size:34px}.tool-hero .hero-link{margin-top:18px}.brand-logo{width:46px;height:46px}.sound-level{padding:12px}.sound-level label{max-width:none;flex-basis:130px}.sound-level input{max-width:none;flex:1}.sound-level .secondary{flex:1}.sound-help-content{gap:12px}.tool-tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));overflow:visible;gap:7px}.tool-tabs button{min-width:0;padding:10px 12px;grid-template-columns:22px 1fr}.tool-tabs button:last-child{grid-column:1/-1}.hilm-banner{padding:22px}.hilm-banner>a{margin-left:0}.hilm-banner>div{min-width:0}}
@media(max-width:430px){.tool-hero h1{font-size:30px;letter-spacing:-1.2px}.tool-hero .hero-sub{font-size:13px}.hilm-attribution{font-size:11px}.brand-logo{width:42px;height:42px}.sound-level{gap:10px}.sound-level label{flex-basis:125px;font-size:11px}.sound-level input{min-width:100px}.tool-tabs button{font-size:12px}.tab-caption{font-size:10px}.hero .eyebrow{font-size:8px}}
.sound-controls{padding:14px 16px;background:#edf1e7;border:1px solid #d8dfce;border-radius:9px;margin-top:6px}.sound-controls .sound-level{padding:0;border:0;background:none;border-radius:0;gap:12px}.sound-controls .sound-level label{font-size:12px;display:flex;align-items:center;gap:10px;max-width:none;margin:0;white-space:nowrap}.sound-controls #volume-label{font-size:12px;font-weight:700;background:#fffefb;border:1px solid #cfdac2;border-radius:6px;padding:4px 9px;min-width:52px;text-align:center;display:inline-block!important}.sound-controls input[type=range]{height:32px;min-height:32px;accent-color:var(--green);padding:0;background:transparent;border:0}.sound-controls .audio-status{margin:10px 0 0;font-size:12px}.muted-notice{display:flex;align-items:center;gap:16px;justify-content:space-between;border-top:1px solid #ddbd87;padding-top:12px;margin-top:12px;font-size:12px;color:#704b1e}.muted-notice strong{display:block;font-size:13px}.muted-notice .primary{font-size:12px;white-space:nowrap;min-height:40px;flex-shrink:0;background:#754d22}.sound-controls.is-muted{background:#fff4df;border-color:#d9b97e}.is-muted #volume-label{color:#754d22;border-color:#d9b97e;background:#fff9ef}.sound-help-content audio{width:290px;max-width:100%;height:40px}.sound-help-content p{flex:1;min-width:180px;width:auto}.sound-help-content .text-button{margin-left:auto}
@media(max-width:760px){.sound-controls{padding:13px}.sound-controls .sound-level{display:grid;grid-template-columns:1fr 1fr;gap:10px}.sound-controls .sound-level label{grid-column:1/-1;justify-content:space-between;font-size:13px}.sound-controls .sound-level input{grid-column:1/-1;width:100%;max-width:none}.sound-controls .secondary{font-size:12px;width:100%;min-height:42px}.sound-controls #volume-label{font-size:13px;min-width:70px}.muted-notice{align-items:flex-start;flex-direction:column;gap:10px}.muted-notice .primary{width:100%;justify-content:center}.sound-help-content p{width:100%;min-width:0}.sound-help-content audio{width:100%;max-width:420px}.sound-help-content .text-button{margin-left:0}}