:root{color-scheme:light;font-family:Inter,Avenir,Helvetica Neue,Arial,sans-serif;color:#25241f;background:#d9d1c2;font-synthesis:none;--paper:#f2eee4;--paper-2:#e8e0d2;--ink:#25241f;--red:#a84831;--blue:#315d66;--gold:#b1894f;--line:rgba(37,36,31,.17);--serif:Iowan Old Style, Baskerville, Georgia, serif;--mono:ui-monospace, SFMono-Regular, Menlo, monospace}*{box-sizing:border-box}html{background:#d9d1c2}body{margin:0;min-width:320px;min-height:100vh;background:radial-gradient(circle at 18% 4%,rgba(255,255,255,.7),transparent 33%),repeating-linear-gradient(90deg,rgba(74,55,35,.022) 0 1px,transparent 1px 5px),#d9d1c2}button,input,select{font:inherit;color:inherit}button,select,input[type=range]{min-height:44px}button{cursor:pointer}button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid rgba(49,93,102,.35);outline-offset:2px}.shell{width:min(1440px,100%);margin:auto;min-height:100vh;background:var(--paper);border-inline:1px solid rgba(37,36,31,.14);box-shadow:0 10px 80px #31271c29}.masthead{min-height:86px;display:grid;grid-template-columns:auto 1fr auto;gap:28px;align-items:center;padding:14px clamp(18px,4vw,58px);border-bottom:1px solid var(--line);background:#f2eee4eb;position:sticky;top:0;z-index:20;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}.brand{color:inherit;text-decoration:none;display:flex;gap:12px;align-items:center}.brand-mark{width:44px;height:44px;border:1px solid var(--ink);border-radius:50%;display:flex;align-items:flex-end;justify-content:center;gap:3px;padding:11px 9px;transform:rotate(-4deg)}.brand-mark i{display:block;width:5px;border-radius:4px 4px 0 0;background:var(--ink)}.brand-mark i:nth-child(1){height:12px}.brand-mark i:nth-child(2){height:23px;background:var(--red)}.brand-mark i:nth-child(3){height:17px;background:var(--blue)}.brand b{font-family:var(--serif);font-size:28px;font-weight:400;display:block;line-height:.9}.brand small{display:block;text-transform:uppercase;letter-spacing:.13em;font:9px var(--mono);margin-top:7px}.folio-title{width:min(320px,100%);justify-self:center;border:0;border-bottom:1px solid transparent;background:transparent;text-align:center;min-height:44px;font-family:var(--serif);font-size:19px}.folio-title:hover,.folio-title:focus{border-color:var(--line)}.header-actions{display:flex;gap:6px}.icon-button{width:44px;border-radius:50%;border:1px solid var(--line);background:transparent;font:600 18px var(--mono)}.icon-button:disabled{opacity:.25}.transport{min-height:86px;padding:13px clamp(18px,4vw,58px);display:grid;grid-template-columns:auto auto auto 1fr;align-items:center;gap:18px;background:var(--ink);color:var(--paper)}.play{border:1px solid rgba(255,255,255,.2);border-radius:999px;padding:0 21px 0 8px;display:flex;align-items:center;gap:10px;background:var(--paper);color:var(--ink);font-weight:700}.play span{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;color:var(--red)}.tempo{display:grid;grid-template-columns:auto auto;column-gap:7px;align-items:center}.tempo small{grid-column:1/-1;text-transform:uppercase;letter-spacing:.15em;font:8px var(--mono);opacity:.6}.tempo input{width:64px;border:0;background:transparent;color:inherit;font:23px var(--serif);min-height:44px}.tempo b{font:9px var(--mono);opacity:.55}.quiet-toggle{display:grid;grid-template-columns:auto auto;place-items:center;gap:5px;padding:0 13px;border:1px solid rgba(255,255,255,.2);border-radius:999px;background:transparent;color:inherit}.quiet-toggle small{font:8px var(--mono);text-transform:uppercase}.quiet-toggle.on{background:var(--blue)}.transport-rule{height:1px;background:#ffffff29}.transport-rule span{display:block;height:3px;margin-top:-1px;background:var(--red)}.key-strip{padding:12px clamp(18px,4vw,58px);display:flex;align-items:center;gap:10px;border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none}.key-strip label{flex:none;display:flex;align-items:center;gap:7px;text-transform:uppercase;font:9px var(--mono);letter-spacing:.1em}.key-strip select{border:1px solid var(--line);border-radius:6px;background:var(--paper);padding:0 30px 0 12px;font-weight:600}.scale-notes{display:flex;gap:2px;margin-inline:auto}.scale-notes i{display:grid;place-items:center;width:30px;height:30px;font:10px var(--mono);font-style:normal;border-bottom:1px solid var(--line)}.vary{flex:none;border:1px solid var(--line);background:transparent;border-radius:999px;padding:0 15px;font-size:12px;font-weight:700}.vary span{font:9px var(--mono);color:var(--red)}.workspace{padding:clamp(18px,3vw,44px) clamp(14px,4vw,58px) 70px;display:grid;grid-template-columns:minmax(0,1.55fr) minmax(330px,.8fr);gap:18px;align-items:start}.panel{border:1px solid var(--line);background:#ffffff38;padding:clamp(16px,2.4vw,30px);position:relative;overflow:hidden}.panel:after{content:"";position:absolute;width:140px;height:140px;border:1px solid rgba(168,72,49,.08);border-radius:50%;right:-70px;bottom:-70px;pointer-events:none}.folio,.melody,.performance{grid-column:1/-1}.bass{grid-column:1}.sound{grid-column:2;grid-row:3/5}.section-heading{display:flex;justify-content:space-between;gap:18px;align-items:end;margin-bottom:20px}.section-heading small{text-transform:uppercase;letter-spacing:.16em;font:9px var(--mono);color:var(--red)}.section-heading h1,.section-heading h2{font-family:var(--serif);font-weight:400;font-size:clamp(27px,3.2vw,43px);line-height:.95;margin:6px 0 0}.section-heading h2{font-size:clamp(25px,2.5vw,35px)}.hint{text-transform:uppercase;letter-spacing:.11em;font:8px var(--mono);opacity:.55}.text-button{border:0;border-bottom:1px solid var(--ink);background:transparent;padding-inline:3px;font:10px var(--mono);text-transform:uppercase}.text-button:disabled{opacity:.3}.chord-strip{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(130px,1fr);gap:8px;overflow-x:auto;padding:2px 2px 9px;scrollbar-color:var(--line) transparent}.chord-card{min-height:122px;border:1px solid var(--line);background:var(--paper);border-radius:3px;text-align:left;padding:14px;display:grid;align-content:space-between;position:relative;overflow:hidden}.chord-card strong{font:400 30px var(--serif)}.chord-card span{font:9px var(--mono);text-transform:uppercase;letter-spacing:.09em}.chord-card .measure{color:var(--red)}.chord-card i{position:absolute;height:4px;width:45%;bottom:0;left:0;background:var(--ink)}.chord-card.selected{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink);transform:translateY(-1px)}.chord-editor{display:grid;grid-template-columns:auto repeat(3,minmax(100px,1fr)) auto auto;gap:9px;margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}.chord-editor label{text-transform:uppercase;font:8px var(--mono);letter-spacing:.1em}.chord-editor select{display:block;width:100%;margin-top:6px;border:1px solid var(--line);background:var(--paper);padding:0 10px}.audition-seal{width:70px;border:1px solid var(--ink);border-radius:50%;aspect-ratio:1;background:var(--ink);color:var(--paper);display:grid;place-items:center;align-content:center}.audition-seal span{font:26px var(--serif)}.audition-seal small{font:7px var(--mono);text-transform:uppercase}.borrow,.delete-chord{align-self:end;border:1px solid var(--line);background:transparent;padding:0 12px;font-size:11px}.borrow.on{background:var(--blue);color:#fff}.delete-chord{width:44px;padding:0;font-size:22px;color:var(--red)}.roll-wrap{width:100%;overflow-x:auto;padding-bottom:7px}.piano-roll{min-width:704px;height:352px;display:grid;grid-template-columns:repeat(var(--steps),1fr);grid-template-rows:repeat(var(--rows),1fr);position:relative;border-block:1px solid var(--line);background:repeating-linear-gradient(90deg,transparent 0 calc(25% - 1px),rgba(37,36,31,.09) calc(25% - 1px) 25%),repeating-linear-gradient(0deg,rgba(255,255,255,.18) 0 calc(12.5% - 1px),var(--line) calc(12.5% - 1px) 12.5%)}.note-cell{min-width:44px;min-height:44px;border:0;border-right:1px solid rgba(37,36,31,.06);background:transparent;position:relative}.note-cell.bar{border-left:1px solid rgba(37,36,31,.24)}.note-cell:after{content:"";position:absolute;inset:25% 18%;border:1px solid transparent;border-radius:999px}.note-cell:hover:after{border-color:var(--blue)}.note-cell.active:after{background:var(--red);border-color:var(--red);box-shadow:0 2px #25241f33}.play-rule{position:absolute;width:1px;height:100%;left:0;background:var(--red);opacity:.25}.choice-row{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}.choice-row button{min-height:108px;padding:15px;text-align:left;border:1px solid var(--line);background:transparent;display:grid;grid-template-columns:auto 1fr;align-items:center;column-gap:11px;text-transform:capitalize;font-weight:700}.choice-row i{width:17px;height:17px;border:1px solid var(--ink);border-radius:50%}.choice-row small{grid-column:1/-1;font:9px var(--mono);font-weight:400;opacity:.6}.choice-row button.active{background:var(--ink);color:var(--paper)}.choice-row button.active i{background:var(--red);border-color:var(--red)}.mixer{display:grid;gap:9px}.part-card{border-bottom:1px solid var(--line);padding:3px 0 13px;display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.part-card header{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between}.part-toggle{border:0;background:transparent;padding:0;display:flex;align-items:center;gap:8px;font-weight:700}.part-toggle span{width:10px;height:10px;border-radius:50%;background:var(--blue)}.part-card output{font:10px var(--mono)}.part-card label{font:8px var(--mono);text-transform:uppercase;opacity:.8}.part-card select,.part-card input{width:100%;display:block;margin-top:4px}.part-card select{border:0;border-bottom:1px solid var(--line);background:transparent}.part-card input{accent-color:var(--red)}.part-card.muted{opacity:.42}.part-card.muted .part-toggle span{background:transparent;border:1px solid currentColor}.pads{display:grid;grid-template-columns:repeat(7,1fr);gap:7px}.pads button{min-height:105px;border:1px solid var(--line);background:var(--paper);display:grid;align-content:space-between;padding:11px;text-align:left;transition:transform .14s,background .14s}.pads small{font:9px var(--mono);color:var(--red)}.pads strong{font:400 clamp(17px,2vw,25px) var(--serif)}.pads span{width:100%;height:2px;background:var(--line)}.pads button:nth-child(2n) span{background:var(--blue)}.pads button.playing{transform:translateY(3px);background:var(--gold)}.status{border-top:1px solid var(--line);min-height:68px;padding:12px clamp(18px,4vw,58px);display:flex;align-items:center;justify-content:space-between;gap:15px;font:9px var(--mono);text-transform:uppercase;letter-spacing:.08em}.status i{display:inline-block;width:7px;height:7px;background:#4b7554;border-radius:50%;margin-right:6px}.status button{border:0;border-bottom:1px solid currentColor;background:transparent;font:inherit;text-transform:inherit}dialog{width:min(620px,calc(100% - 24px));border:1px solid var(--ink);padding:0;background:var(--paper);color:var(--ink);box-shadow:0 30px 90px #0000004d}dialog::backdrop{background:#1b1a16b3;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}dialog form{padding:24px}dialog header{display:flex;justify-content:space-between}dialog header small{font:9px var(--mono);text-transform:uppercase;color:var(--red)}dialog h2{margin:4px 0 20px;font:36px var(--serif)}dialog header button{width:44px;border:1px solid var(--line);background:transparent;border-radius:50%;font-size:22px}.dialog-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.dialog-grid button{min-height:90px;border:1px solid var(--line);background:transparent;display:flex;text-align:left;align-items:center;gap:14px;padding:12px}.dialog-grid button b{display:grid;place-items:center;flex:none;width:40px;height:40px;border:1px solid var(--ink);border-radius:50%}.dialog-grid strong,.dialog-grid small{display:block}.dialog-grid small{font:9px var(--mono);margin-top:5px;opacity:.6}dialog p{margin:17px 0 0;font:9px var(--mono);opacity:.55}.factory-folio{display:grid;gap:6px;margin:0 0 12px}.factory-folio span{font:9px var(--mono);letter-spacing:.11em;color:var(--red)}.factory-folio select{width:100%;border:1px solid var(--line);background:var(--paper);padding:0 12px}.dialog-grid button:is(#download-suite,#import-suite){border-color:var(--blue)}.toast{position:fixed;z-index:100;bottom:calc(18px + env(safe-area-inset-bottom));left:50%;transform:translate(-50%,20px);opacity:0;pointer-events:none;background:var(--ink);color:var(--paper);border:1px solid var(--gold);padding:12px 19px;border-radius:999px;font-size:12px;transition:.2s}.toast.show{transform:translate(-50%);opacity:1}@media(max-width:800px){.masthead{grid-template-columns:1fr auto;gap:10px;min-height:74px;padding:10px 14px}.brand b{font-size:25px}.brand small{display:none}.folio-title{grid-row:2;grid-column:1/-1;justify-self:stretch;width:100%;text-align:left;font-size:17px;min-height:44px}.header-actions{grid-column:2;grid-row:1}.icon-button:nth-child(-n+2){display:none}.transport{grid-template-columns:1fr auto auto;gap:9px;padding:10px 14px;min-height:72px}.transport-rule{grid-column:1/-1}.key-strip{padding:8px 14px}.scale-notes{display:none}.vary{margin-left:auto}.workspace{display:block;padding:12px 8px 55px}.panel{margin-bottom:10px;padding:17px 13px}.section-heading{margin-bottom:15px}.section-heading h1,.section-heading h2{font-size:29px}.chord-strip{grid-auto-columns:112px}.chord-card{min-height:105px;padding:11px}.chord-card strong{font-size:25px}.chord-editor{grid-template-columns:62px repeat(3,minmax(76px,1fr));overflow-x:auto}.audition-seal{width:58px;grid-row:1/3}.borrow{grid-column:2/4}.delete-chord{grid-column:4}.piano-roll{min-width:704px;height:352px}.choice-row{gap:6px}.choice-row button{min-height:100px;padding:10px}.part-card{grid-template-columns:repeat(3,1fr)}.pads{grid-template-columns:repeat(4,1fr)}.pads button{min-height:88px}.status span:nth-child(2){display:none}}@media(max-width:380px){.brand-mark{width:40px;height:40px}.brand b{font-size:23px}.play{padding-right:14px}.tempo b{display:none}.tempo input{width:52px}.quiet-toggle small{display:none}.key-strip label{font-size:7px}.key-strip select{padding-inline:8px 24px}.vary{padding-inline:10px;font-size:10px}.chord-editor{grid-template-columns:56px 82px 82px 82px}.choice-row{grid-template-columns:1fr}.choice-row button{min-height:70px}.pads{grid-template-columns:repeat(3,1fr)}.dialog-grid{grid-template-columns:1fr}.dialog-grid button{min-height:68px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation:none!important;transition:none!important}}