:root{font-family:Inter,ui-sans-serif,system-ui,sans-serif;color:#e4e9e6;background:#101e26;font-synthesis:none}*{box-sizing:border-box}body{margin:0}button,input,select,textarea{font:inherit}button{cursor:pointer;border:1px solid #4f646b;background:#20333c;color:#e6e8db;border-radius:4px;padding:.7rem .9rem;transition:background .16s,transform .16s}button:hover{background:#344d54;transform:translateY(-1px)}button:disabled{opacity:.4;cursor:not-allowed;transform:none}button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:3px solid #e79565;outline-offset:3px}input,select,textarea{width:100%;border:1px solid #50626a;border-radius:4px;background:#142630;color:#f0e7da;padding:.7rem}label{display:block;font-size:.75rem;letter-spacing:.03em;color:#b7c7c8}label input,label select{margin-top:.45rem}small{display:block;color:#aabbbd;font-size:.67rem;letter-spacing:.07em;line-height:1.7}header{padding:1.4rem 3vw;display:flex;align-items:center;gap:1.2rem;border-bottom:1px solid #34434a}header h1{font-family:Georgia,serif;font-size:1.3rem;font-weight:400;margin:.25rem 0}.brand{font-size:1.5rem;font-weight:800;letter-spacing:-.12em;text-decoration:none;color:#e7dcc5}.brand span{color:#e79565;font-size:2.5rem}.status{margin-left:auto;color:#91aaa7;letter-spacing:.12em;font-size:.62rem}.workspace{display:grid;grid-template-columns:minmax(0,1fr) 350px;min-height:calc(100svh - 100px)}.stage{padding:2.4rem 3vw 1rem;min-width:0;display:flex;flex-direction:column;background:radial-gradient(ellipse at 50% 42%,#203640,#10212b 65%)}.stage-head{display:flex;justify-content:space-between;align-items:start;gap:1rem}.eyebrow{font-size:.62rem;letter-spacing:.18em;color:#d69774}h2{font-family:Georgia,serif;font-size:clamp(1.6rem,3vw,3rem);font-weight:400;margin:.7rem 0;overflow-wrap:anywhere}.toggle{display:flex;gap:.3rem}.toggle button[aria-pressed=true]{background:#dec4a2;color:#18282f}.art{position:relative;flex:1;min-height:330px;display:grid;place-items:center}.art canvas{max-width:100%;max-height:68svh;width:auto;height:auto;aspect-ratio:1.1;display:block}.art-label{position:absolute;left:1rem;bottom:1.5rem;font-size:.62rem;line-height:1.8;letter-spacing:.18em;color:#819ca4}.metrics{display:flex;gap:3vw;border-top:1px solid #3e535c;padding-top:1rem}.metrics div{display:flex;align-items:center;gap:.7rem}.metrics b{font-family:Georgia,serif;font-size:2rem;font-weight:400;color:#dfc5a5}.metrics span{font-size:.64rem;color:#b0c0c0;max-width:90px;line-height:1.5}.caption{font-size:.7rem;line-height:1.6;color:#96afb2}.workspace aside{border-left:1px solid #34464d;background:#152730;padding:0 1.7rem}.workspace aside section{padding:1.8rem 0;border-bottom:1px solid #34464d}h3{font-family:Georgia,serif;font-weight:400;font-size:1.45rem;margin:.7rem 0}p{font-size:.77rem;line-height:1.7;color:#acbec2}.coordinates{display:grid;grid-template-columns:1fr 1fr;gap:.65rem;margin:1rem 0}.primary{background:#db9a73;color:#15262e;border-color:#db9a73;width:100%;margin-bottom:.5rem}.primary:hover{background:#edb089}.inline{display:flex;gap:.6rem;align-items:end;margin-top:.9rem}.inline label{flex:1}.inline button{font-size:.72rem;flex:1}.chords{list-style:none;padding:0;margin-top:1rem;max-height:200px;overflow:auto}.chords li{display:flex;align-items:center;justify-content:space-between;gap:.4rem;font-size:.65rem;color:#afc2c4;margin:.4rem 0}.chords button{padding:.25rem .4rem;font-size:.65rem}.examples{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.8rem}.examples button{font-size:.68rem}.project{padding:3rem 3vw;display:grid;grid-template-columns:1fr 1fr;gap:4vw;border-top:1px solid #34464d}.export{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:1rem}.export button{font-size:.7rem}textarea{height:360px;margin-top:.7rem;resize:vertical;font-family:ui-monospace,monospace;font-size:.72rem;line-height:1.6}.notice{padding:1rem;border-left:2px solid #d69774;color:#e3c7ad;background:#23383f}details{font-size:.75rem;line-height:1.8}table{border-collapse:collapse;width:100%}td,th{padding:.3rem;text-align:left;border-bottom:1px solid #34464d}footer{padding:2rem 3vw;border-top:1px solid #34464d;display:grid;grid-template-columns:2fr 1fr;gap:3rem;font-size:.7rem;line-height:1.8;color:#a2b6b9}footer button{font-size:.7rem;margin:0 .4rem .5rem 0}@media(max-width:850px){.workspace{grid-template-columns:1fr}.workspace aside{border-left:0;display:grid;grid-template-columns:1fr 1fr;gap:1.5rem}.workspace aside section:last-child{grid-column:1/-1}.status{display:none}.project,footer{grid-template-columns:1fr}.stage{min-height:75svh}.art canvas{max-height:60svh}.art-label{display:none}}@media(max-width:500px){.workspace aside{display:block}.stage-head{display:block}.toggle{margin-top:.7rem}.metrics{gap:.8rem}.metrics b{font-size:1.6rem}.metrics span{font-size:.58rem}.project{padding:2rem 5vw}.art{min-height:250px}header{padding:1rem 5vw}.stage{padding:1.7rem 5vw}.metrics div{gap:.4rem}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important;animation:none!important;scroll-behavior:auto!important}}.focus>header,.focus .workspace>aside,.focus>.project,.focus>footer{display:none}.focus .workspace{display:block;min-height:100svh}.focus .stage{min-height:100svh}.focus .art canvas{max-height:75svh}.focus .stage-head{position:relative;z-index:1}