/* Revision 30: the existing glass/hardware identity, with readable controls. */
:root{--r30-text:#e6eddc;--r30-muted:#bccbb0;--r30-accent:#e0d57a}
.key-name{color:#c3d0ad}.key-description{color:#d2ddbf}
.last-used-badge{position:absolute;top:17px;right:17px;z-index:5;padding:5px 9px;border:1px solid #71835e;border-radius:20px;background:#071109e8;color:#d1dfbf;font:12px/1.2 Roboto,Arial,sans-serif;pointer-events:none}
.last-used-badge[hidden]{display:none}
.module-key:hover .key-glass{outline:1px solid #9eae80;outline-offset:-2px}
.module-key:focus-visible{outline:3px solid var(--r30-accent);outline-offset:5px}
.footer nav button,.footer .footer-language button{font-size:13px;min-height:38px;color:#b9c8ac}
.footer .footer-language button{min-width:36px}
.back-link,.text-button{font:14px/1.5 Roboto,Arial,sans-serif;min-height:40px;display:inline-flex;align-items:center}
#module-content .studio-shell button:not(.piano-key):not(.studio-photo-key):not(.studio-planned){font:600 13px/1.35 Roboto,Arial,sans-serif;min-height:42px}
#module-content .studio-shell .studio-breadcrumb>button{font-size:13px}
#module-content .studio-shell #studio-path,#module-content .studio-shell .hub-guide{font-size:13px;color:#c6d3b8}
#module-content .studio-shell .studio-photo-key small{font-size:14px;color:#d5dfc9}
#module-content .studio-shell :is(label,.subtle,.studio-hint){font-size:13px;line-height:1.5;color:#bccbb0}
#module-content .studio-shell :is(input,select,textarea){font-size:15px}
#module-content :is(button.primary,a.primary){color:#f6f1c9;background:radial-gradient(ellipse at 50% 135%,#c2b34b77,transparent 70%),linear-gradient(#26351b,#172514);border-color:#8f9151;box-shadow:inset 0 1px #f6ecc244,0 3px 0 #020603}
#module-content button.secondary{color:#d3dec4}
#module-content button:disabled{opacity:.45;cursor:not-allowed}
#module-content button:focus-visible,dialog button:focus-visible{outline:2px solid #e7dc87;outline-offset:3px}
#module-content .studio-shell button.studio-photo-key:hover:after{background:linear-gradient(180deg,#ffffff06 20%,#020b0730 45%,#17311cbb 100%);box-shadow:inset 0 0 0 1px #bbc9a1}
#module-content .studio-shell button.studio-photo-key:hover:not(:active):not(.is-lit):not([aria-pressed=true]) i{background:#687343;box-shadow:none}
.typing,#module-content .studio-shell .matrix-inline{font-family:'Courier New',monospace;font-weight:700;letter-spacing:.035em;color:#c5d98c}
.typing{font-size:14px}
.caret{width:.65em;height:1em;vertical-align:-.15em;background:#d5df84}
#module-content .studio-shell .matrix-inline{font-size:13px;min-height:21px;height:21px;max-height:21px;line-height:21px}
#module-content .studio-shell .matrix-text:after{content:'';display:inline-block;width:.65em;height:1em;margin-left:3px;vertical-align:-.15em;background:#d5df84}
@media(max-width:600px){#module-content .studio-shell .studio-breadcrumb{grid-template-columns:auto minmax(0,1fr) auto}.studio-breadcrumb .hub-guide{grid-column:1/-1;justify-self:end}#module-content .studio-shell .hub-guide{font-size:13px;width:auto;min-height:32px}#module-content .studio-shell .hub-guide:before{content:none}.last-used-badge{top:10px;right:10px;font-size:10px;padding:4px 6px}.footer nav{gap:2px}.key-description{line-height:1.3}}
@media(prefers-reduced-motion:reduce){.caret,#module-content .studio-shell .matrix-text:after{animation:none}}
#module-content .studio-shell .studio-breadcrumb{grid-template-columns:auto minmax(40px,1fr) auto auto auto;gap:8px}
.studio-output-dialog :is(#output-midi,#output-audio)>button{margin:8px 6px 4px 0;min-height:42px;font-size:14px}
@media(max-width:720px){#module-content .studio-shell .studio-breadcrumb{grid-template-columns:auto 1fr auto}#module-content .studio-shell .studio-breadcrumb>a{grid-row:2}#module-content .studio-shell .studio-breadcrumb>button:last-child{grid-row:2;grid-column:2/4;justify-self:end}}
/* Section 4: keep each production task together. */
#module-content .studio-shell .console-project-actions{border-top:1px solid #34422e;margin-top:20px;padding-top:12px}
#module-content .studio-shell .console-project-actions button{background:linear-gradient(#101e13,#08110b);font-weight:500}
#module-content .studio-shell .ready-area{padding:16px;border-radius:14px;background:linear-gradient(140deg,#112117,#08130c)}
.source-methods{display:flex;gap:10px;flex-wrap:wrap}.source-methods button{flex:1;min-width:150px}
#module-content .studio-shell .source-method-help{font:14px/1.6 Roboto,Arial,sans-serif;color:#c3cfb8;margin:12px 0 16px}
.workflow-phase{font:600 15px/1.5 Roboto,Arial,sans-serif;color:#e1e6c5;margin:16px 0 8px}
#module-content .studio-shell .studio-fineprint{margin:8px 0 12px;padding:6px 0}.studio-fineprint summary{cursor:pointer}
#module-content .studio-shell .studio-roadmap{grid-column:1/-1;border:1px dashed #5e6240;border-radius:10px;padding:12px;background:#0a140d}
.studio-roadmap summary{cursor:pointer;color:#c4c798;font-size:14px}.studio-roadmap>div{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px}
.rhythm-search-first{grid-column:1/-1}
#module-content .studio-shell .eq-bank{display:flex;justify-content:flex-start;max-width:690px;margin:0 auto 10px;gap:2px;padding:10px 5px;overflow-x:auto}
#module-content .studio-shell .eq-band{flex:0 0 32px;min-width:32px;border-top:3px solid #778e64;padding-top:8px}
#module-content .studio-shell .eq-band[data-region=bass]{border-color:#b0bf83}#module-content .studio-shell .eq-band[data-region=low-mid]{border-color:#77a586}#module-content .studio-shell .eq-band[data-region=mid]{border-color:#b9ad72}#module-content .studio-shell .eq-band[data-region=high]{border-color:#a8b8a0}
#module-content .studio-shell .eq-band input{width:30px;max-width:30px;height:122px}
#module-content .studio-shell .eq-band :is(span,output){font:11px/1.4 Roboto,Arial,sans-serif;color:#d9e3ca}
.eq-region-labels{display:grid;grid-template-columns:7fr 3fr 3fr 7fr;max-width:690px;margin:12px auto 0;font:12px/1.5 Roboto,Arial,sans-serif;color:#c9d6b7;text-align:center}
#module-content .studio-shell #clean-amount-value{display:inline-block;font-size:15px;min-width:50px;color:#e5e8bc;margin-top:6px}
#module-content .studio-shell .audio-console>.button-row{margin-top:16px}
@media(max-width:600px){.studio-roadmap>div{grid-template-columns:1fr}.eq-region-labels{display:none}.source-methods button{min-width:120px}#module-content .studio-shell .audio-clean-grid{gap:14px}#module-content .studio-shell .ready-area{padding:12px}}

/* Section 6: entry points and a calm long-form reading surface. */
.knowledge-paths{margin:20px 0 26px;padding:18px;border:1px solid #526543;border-radius:14px;background:linear-gradient(135deg,#1b2c20,#101810)}
.knowledge-paths>div{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}.knowledge-paths button,.knowledge-focus{padding:12px 16px;min-height:44px;border:1px solid #708356;border-radius:8px;background:#1d2e20;color:#e2edcd;font:500 14px Roboto,Arial,sans-serif;cursor:pointer;text-align:left}.knowledge-focus{margin-bottom:16px;color:#efdb94}.knowledge-reader{width:min(92vw,800px);max-width:800px;max-height:88svh;padding:26px;background:#101b14;color:#e2e8da;border:1px solid #7b8d64;border-radius:16px;overflow:auto}.knowledge-reader::backdrop{background:#020805df;backdrop-filter:blur(5px)}.knowledge-reader .dialog-top{align-items:flex-start;gap:20px}.knowledge-reader h2{font:600 26px/1.4 Roboto,Arial,sans-serif}.knowledge-reader .knowledge-entry{padding:0;border:0;background:transparent;margin-top:20px}.knowledge-reader .knowledge-copy{font-size:18px;line-height:1.85;max-width:66ch}.knowledge-reader p{overflow-wrap:anywhere}.knowledge-reader .knowledge-related{display:flex;flex-wrap:wrap;gap:8px}.knowledge-reader .source{font-size:13px;line-height:1.7}.knowledge-topic>summary,.knowledge-subtopic>summary,.knowledge-item>summary{min-height:46px;font-size:15px;line-height:1.6}.knowledge-topic small,.knowledge-subtopic small{padding:3px 8px;border-radius:20px;background:#283824;color:#dfe8d1}.knowledge-item[open]>summary{color:#e7d789}.knowledge-reader a{color:#d7dea1}@media(max-width:600px){.knowledge-reader{padding:18px}.knowledge-reader h2{font-size:22px}.knowledge-paths>div{display:grid}.knowledge-reader .knowledge-copy{font-size:17px}}