.studio{padding-top:3rem;padding-bottom:4rem}
.studio h1{font-size:clamp(2.6rem,6vw,4.4rem);margin-bottom:2rem}
.bench{display:grid;grid-template-columns:minmax(280px,.75fr) minmax(0,1fr);gap:0;border:2px solid var(--gold);background:var(--deep)}
.controls{padding:1.6rem;background:var(--cream);color:var(--ink)}
.controls label{display:block;font-size:.78rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;margin:1.1rem 0 .45rem}
.controls label:first-child{margin-top:0}
select,textarea{width:100%;padding:.75rem;border:2px solid var(--ink);border-radius:0;background:#fffdf6;color:var(--ink);font:inherit;line-height:1.4}
textarea{resize:vertical;min-height:4.2rem}
select,button{cursor:pointer}
.hint{display:block;text-align:right;font-size:.8rem;color:#5b6660}
.hint.left{text-align:left;margin:0}
.actions{display:flex;align-items:center;gap:1.2rem;margin-top:1.4rem}
.actions .btn{font-family:inherit;border-color:var(--green);background:var(--green);color:var(--cream)}
.actions .btn:hover{background:var(--deep)}
.actions .btn:disabled{opacity:.5;cursor:wait}
.link{border:0;background:none;text-decoration:underline;font:inherit;font-size:.9rem;color:var(--ink);padding:.4rem 0}
#feedback{font-size:.9rem;min-height:1.5rem;margin:1rem 0 .4rem}
.preview{padding:1.4rem;display:flex;align-items:center}
canvas{display:block;width:100%;height:auto;background:var(--green);box-shadow:0 18px 40px #0008}
@media(max-width:820px){.bench{grid-template-columns:1fr}.preview{padding:1rem}.controls{padding:1.2rem}}