/* A compact creative desk; existing tool controls and audio remain unchanged. */
.tool-hero{position:relative;isolation:isolate;overflow:hidden;background:radial-gradient(ellipse at 95% 5%,#725a3e60,transparent 52%),linear-gradient(120deg,#173d35,#112b28);border:1px solid #284d42;border-radius:22px;padding:32px 34px;margin:22px 0 26px;color:#fff8eb;gap:24px;box-shadow:0 16px 40px #173d3512}
.tool-hero::after{content:"";position:absolute;right:38px;top:25px;width:220px;height:145px;background:repeating-linear-gradient(90deg,transparent 0 12px,#e6c98b26 12px 14px,transparent 14px 27px);border-radius:60%;transform:rotate(-12deg);z-index:-1;pointer-events:none}
.tool-hero .eyebrow{color:#d3c6a0;font-size:10px;letter-spacing:1.5px;margin-bottom:13px}
.tool-hero h1{font-size:clamp(34px,4vw,51px);letter-spacing:-1.7px;margin-bottom:13px;line-height:1.12}
.tool-hero h1 em{color:#e6c98b;font-family:var(--serif);font-weight:400}
.tool-hero .hero-sub{color:#d4e0d5;font-size:14px;margin-bottom:10px}
.tool-hero .hilm-attribution{color:#b7c8bc;font-size:11px}
.tool-hero .hilm-attribution a{color:#e6c98b}
.hero-pills{display:flex;flex-wrap:wrap;gap:7px;margin-top:19px}
.hero-pills span{border:1px solid #c8d5bb35;border-radius:100px;background:#ffffff07;padding:5px 10px;font-size:10px;color:#e3e7d6}
.tool-hero .hero-link{padding:12px 19px;border:1px solid #d3ba87;border-radius:100px;background:#e6c98b;color:#16382f;min-height:44px;box-sizing:border-box;font-size:12px;gap:17px;transition:background .2s,transform .2s}
.tool-hero .hero-link:hover{background:#f3dba8;transform:translateY(-2px)}
.studio{padding-top:0;min-width:0}
.workspace-bar{position:sticky;top:8px;z-index:25;background:#f8f6f0f5;backdrop-filter:blur(15px);border:1px solid #dde2d3;border-radius:15px;padding:15px 15px 9px;box-shadow:0 8px 25px #173d350b}
.workspace-heading{gap:14px;margin:0 0 13px;align-items:center}
.workspace-heading h2{font-size:23px;letter-spacing:-.7px}
.workspace-heading .eyebrow{font-size:8px;letter-spacing:1.5px;margin-bottom:3px}
.workspace-heading .save-state{margin:0 0 0 auto;font-size:10px;max-width:none;text-align:right}
.studio-controls-button{font-size:11px;min-height:40px;padding:8px 13px;border-color:#cfd9c5;background:#fffefb;flex-shrink:0}
.studio-controls-button span{color:#8f6f36;font-size:15px}
.tool-tabs{display:flex;gap:7px;overflow-x:auto;overflow-y:hidden;padding:0 0 5px;border:0;scrollbar-width:thin;scroll-snap-type:x proximity;overscroll-behavior-x:contain}
.tool-tabs button,.tool-tabs button:last-child{display:grid;grid-template-columns:22px 1fr;grid-column:auto;flex:1;min-width:143px;min-height:55px;text-align:left;padding:9px 12px;border-radius:9px;border:1px solid #dce3d3;background:#fffefb;font-size:12px;scroll-snap-align:center;transition:background .2s,border-color .2s,box-shadow .2s}
.tool-tabs button[aria-selected=true]{background:#173d35;border-color:#173d35;color:#fff8eb;box-shadow:inset 0 -2px #d3ba87}
.tool-tabs button[aria-selected=true] .tab-caption{color:#c4d7bd}
.tool-tabs button:hover:not([aria-selected=true]){background:#eef2e6;border-color:#bacbb0}
.tool-tabs .tab-icon{display:block;font-size:19px;color:#7e9b69}
.tool-tabs button[aria-selected=true] .tab-icon{color:#e6c98b}
.tool-tabs .tab-caption{font-size:9px}
.studio>.audio-status{font-size:11px;line-height:1.5;margin:12px 3px 15px;color:#6b756c}
.tool-panel{scroll-margin-top:155px;min-width:0}
.tool-panel:focus-visible{outline:2px solid #b39155;outline-offset:4px;border-radius:14px}
.preset-strip{padding:10px 0 17px;gap:13px;flex-wrap:wrap}
.settings-card,.result-card,.calculator-card,.tempo-card,.metronome-card{border-color:#dce3d3;border-radius:14px;box-shadow:0 5px 18px #173d3505;padding:22px}
.blueprint-layout{gap:17px;grid-template-columns:340px minmax(0,1fr)}
.settings-card .card-heading,.result-card .card-heading{margin-bottom:16px}
.settings-card .field-row{margin-bottom:12px}
.settings-card #song-title{margin-bottom:12px}
.sound-panel,.utility-panel{padding:25px;background:linear-gradient(135deg,#edf2e6,#f3f3ea);border:1px solid #dce3d3;border-radius:15px;gap:24px}
.sound-intro{margin-bottom:21px;gap:20px}
.sound-intro h3,.utility-copy h3{letter-spacing:-.8px}
.sound-intro p:not(.eyebrow),.utility-copy p:not(.eyebrow){line-height:1.65}
.chord-controls{gap:14px;margin-bottom:20px}
.chord-card{border-radius:12px;border-color:#cddbc0;box-shadow:0 4px 10px #173d3505}
.sound-actions{gap:10px}
.game-break{margin-top:24px;padding:15px 19px;border:1px solid #d8dfce;border-radius:12px;background:#f0f1e6}
.learn-cards article{border-radius:15px;box-shadow:0 5px 18px #173d3505}
.studio-controls-dialog{width:min(92vw,620px);max-height:88svh;overflow-y:auto;box-sizing:border-box;padding:25px;background:var(--paper);border:1px solid #d1d9c5;border-radius:18px;color:var(--ink)}
.studio-controls-dialog::backdrop{background:#0d2928bd;backdrop-filter:blur(5px)}
.studio-controls-heading{display:flex;justify-content:space-between;align-items:center;gap:18px;margin-bottom:16px}
.studio-controls-heading .eyebrow{font-size:9px;margin-bottom:4px;color:#7b6a45}
.studio-controls-heading h2{font-size:26px}
.studio-controls-heading .dialog-close{position:static;flex-shrink:0}
.studio-controls-dialog .workspace-utility{padding:0 0 18px;gap:8px;align-items:flex-start}
.studio-controls-dialog .project-actions{display:flex;gap:15px}
.studio-controls-dialog .sound-controls{margin:0}
.studio-controls-dialog .sound-help{margin:17px 0 0}
@media(max-width:960px){.blueprint-layout{grid-template-columns:300px minmax(0,1fr)}.workspace-heading .save-state{display:none}}
@media(max-width:760px){
 main{padding:0 16px}
 .tool-hero{display:block;padding:25px;margin:16px 0 20px}
 .tool-hero h1{font-size:36px}
 .tool-hero .hero-sub{font-size:13px;max-width:410px}
 .tool-hero .hero-link{margin:19px 0 0;display:inline-flex}
 .tool-hero::after{right:-85px;top:10px;width:200px;opacity:.8}
 .workspace-bar{top:0;padding:11px 10px 6px;border-radius:12px}
 .workspace-heading{margin-bottom:10px;gap:9px}
 .workspace-heading h2{font-size:19px;letter-spacing:-.6px}
 .workspace-heading .eyebrow{display:none}
 .studio-controls-button{font-size:10px;padding:7px 10px;min-height:39px}
 .tool-tabs{display:flex;gap:6px;overflow-x:auto;overflow-y:hidden;padding-bottom:5px}
 .tool-tabs button,.tool-tabs button:last-child{min-width:132px;flex:0 0 132px;grid-template-columns:20px 1fr;grid-column:auto;padding:10px 10px;min-height:49px;font-size:12px;align-items:center}
 .tool-tabs .tab-caption{display:none}
 .tool-tabs .tab-icon{grid-row:auto;font-size:17px}
 .studio>.audio-status{font-size:10px;margin:10px 2px 12px}
 .blueprint-layout{grid-template-columns:1fr;gap:14px}
 .settings-card,.result-card,.calculator-card,.tempo-card,.metronome-card{padding:19px}
 .sound-panel,.utility-panel{padding:19px;gap:18px}
 .sound-intro{margin-bottom:18px}
 .sound-intro h3,.utility-copy h3{font-size:26px}
 .sound-intro p:not(.eyebrow),.utility-copy p:not(.eyebrow){font-size:13px;margin-bottom:12px}
 .sound-intro .eyebrow,.utility-copy .eyebrow{font-size:8px}
 .chord-controls{gap:12px;margin-bottom:16px}
 .beat-toolbar{gap:12px}
 .studio-controls-dialog{padding:19px}
 .studio-controls-dialog .workspace-utility{display:block}
 .studio-controls-dialog .project-actions{margin-top:9px}
 .hero-pills{margin-top:15px}
 .hero-pills span{font-size:9px;padding:4px 8px}
}
@media(max-width:380px){.workspace-heading h2{font-size:17px}.studio-controls-button{font-size:9px}.tool-hero{padding:22px}.tool-hero h1{font-size:32px}}
@media(prefers-reduced-motion:reduce){.tool-hero .hero-link,.tool-tabs button{transition:none}}