.sound-studio { --sound-accent: #a3e3ce; padding-top: 15px; border-top: 2px solid #8ecab8; min-width: 0; }
.sound-studio [hidden] { display: none !important; }
.sound-masthead { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; font: 10px/1.7 Consolas, monospace; letter-spacing: .05em; color: #b2c8d3; }
.sound-badge { border: 1px solid #8d8068; border-radius: 20px; padding: 4px 10px; color: #efd2a6; }
.sound-intro { margin-top: 10px; color: #a9bfca; font-size: 12px; line-height: 1.7; }
.sound-figure { margin: 12px 0 0; }
.sound-drawing { display: block; width: 100%; height: auto; }
.sound-key { display: none; }
.sound-views { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 4px; padding-block: 5px; border-block: 1px solid #3b5260; }
.sound-views button { min-width: 0; min-height: 48px; padding: 10px 4px; border: 0; border-radius: 2px; background: transparent; color: #bbced7; font: inherit; font-size: 13px; cursor: pointer; }
.sound-views button[aria-pressed="true"] { background: #193b39; color: #b6efda; box-shadow: inset 0 -2px #a3e3ce; }
.sound-views button:hover { background: #22434a; color: #f2fff9; }
.sound-studio :focus-visible { outline: 2px solid #c7f4de; outline-offset: 3px; }
.sound-notes { padding-top: 22px; }
.sound-notes > div + div { margin-top: 24px; }
.sound-studio[data-ready] .sound-notes { min-height: 178px; }
.sound-notes h2 { font-size: clamp(23px,2.3vw,30px); line-height: 1.2; letter-spacing: -.035em; font-weight: 450; color: #e1eee9; margin: 0 0 13px; }
.sound-notes p { font-size: 14px; line-height: 1.85; color: #b1c6d2; }
.sound-cache-control { padding-top: 15px; }
.sound-action { min-height: 44px; padding: 10px 15px; border: 1px solid #82b5a9; border-radius: 4px; background: #163b34; color: #c4ebda; font: inherit; font-size: 13px; cursor: pointer; }
.sound-action:hover { background: #235345; }
.sound-cache-control p { margin-top: 10px; color: #ddcba9; font-size: 12px; line-height: 1.8; }
.sound-disclaimer { margin-top: 22px; padding-top: 15px; border-top: 1px solid #354b59; color: #a5b9c6; font-size: 11px; line-height: 1.8; }
.sound-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.sound-break { opacity: 0; }
.sound-studio[data-ready] :is(.sound-schedule,.sound-transfer,.sound-speaker,.sound-cache,.sound-local) { transition: opacity .25s ease; }
.sound-studio[data-ready][data-view="schedule"] :is(.sound-transfer,.sound-cache,.sound-local) { opacity: .35; }
.sound-studio[data-ready][data-view="distribution"] .sound-schedule { opacity: .45; }
.sound-studio[data-ready][data-view="cache"] .sound-schedule { opacity: .25; }
.sound-studio[data-offline="true"] .sound-transfer { stroke: #b69876; stroke-dasharray: 4 8; opacity: .35; }
.sound-studio[data-offline="true"] .sound-break { opacity: 1; }
@media (min-width: 801px) { body:has(.sound-studio) .detail-hero-grid { grid-template-columns: minmax(0,1fr) minmax(0,1.08fr); gap: clamp(30px,4vw,62px); } body:has(.sound-studio) .detail-title { font-size: clamp(39px,4.35vw,63px); } }
@media (max-width: 1100px) and (min-width: 801px) { .sound-views button { font-size: 11px; } .sound-studio[data-ready] .sound-notes { min-height: 220px; } }
@media (max-width: 640px) { .sound-svg-labels { display: none; } .sound-key { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: -12px 0 18px; color: #bccfcf; font: 11px/1.8 Consolas, monospace; } .sound-views button { font-size: 11px; } .sound-studio[data-ready] .sound-notes { min-height: 205px; } }
@media (prefers-reduced-motion: reduce) { .sound-studio *, .sound-studio *::before, .sound-studio *::after { transition: none !important; animation: none !important; } }
@media (forced-colors: active) { .sound-views button[aria-pressed="true"] { border: 2px solid ButtonText; } }