/* Portrait based on Wagner's reference, with real musical recordings. */
.rhythm .rhythm-layout{grid-template-columns:.94fr 1.06fr;gap:57px}
.rhythm .instrument-stage{height:auto;min-height:560px;width:100%;max-width:none;margin:0;justify-content:center}
.rhythm .rhythm-rings{inset:0 -18px 80px;pointer-events:none;opacity:.7}
.roda-visual{position:relative;isolation:isolate;z-index:1;width:100%;height:500px;margin:-32px 0 0;flex:none}
.roda-visual:before{content:'';position:absolute;z-index:-1;inset:37% 7% 19%;background:var(--yellow);opacity:.14;transform:rotate(-13deg);-webkit-mask:url('assets/paint-edge.svg') center/100% 100% no-repeat;mask:url('assets/paint-edge.svg') center/100% 100% no-repeat;pointer-events:none}
.roda-visual picture,.roda-visual img{display:block;width:100%;height:100%;object-fit:contain}
.roda-visual picture{display:flex;align-items:flex-end;justify-content:center;height:calc(100% - 50px);padding:12px 8px 0}.roda-visual img{width:auto;height:auto;max-width:100%;max-height:100%;-webkit-mask-image:linear-gradient(#000 0 88%,transparent 100%);mask-image:linear-gradient(#000 0 88%,transparent 100%)}
.roda-visual figcaption{position:absolute;left:50%;bottom:0;display:flex;flex-direction:column;align-items:center;gap:2px;transform:translateX(-50%) rotate(-5deg);text-shadow:0 2px 8px #103b7099}
.roda-visual figcaption strong{font:400 32px/1.2 var(--display);color:var(--yellow)}
.roda-visual figcaption span{font-size:10px;letter-spacing:.03em;color:white}
.rhythm .instrument-description{position:relative;margin:9px auto 0;width:100%;z-index:1}
.instrument-heading{display:flex;align-items:center;justify-content:center;gap:10px;min-height:52px}
.rhythm .instrument-display{position:static;inset:auto;width:35px;height:53px;flex:none;display:grid;place-items:center}
.rhythm .instrument-display img,.rhythm .instrument-display[data-kind] img{width:35px;height:53px;max-height:53px;min-height:0;min-width:0;object-fit:contain;transform:none;filter:none;transition:none}
.rhythm .instrument-description h3{font-size:31px;margin:0;line-height:1.2}
.rhythm .instrument-description p{font-size:12px;line-height:1.8;min-height:44px;margin:7px auto 0;max-width:40ch}
.roda-audio-actions{display:flex;align-items:center;justify-content:center;gap:18px;flex-wrap:wrap;position:relative;z-index:2;margin-top:20px;width:100%}
.rhythm .sound-button{margin:0;border:0;min-height:45px;border-radius:5px;background:var(--yellow);color:var(--deep);font-size:12px;font-weight:700;padding:12px 17px;gap:10px;line-height:1.5}
.sound-button>.icon{width:17px;height:17px}
.sound-button[aria-expanded=true]{background:white}
.sound-button[aria-expanded=true]>.icon{display:none}
.sound-button[aria-expanded=true]:before{content:'×';font-size:20px;line-height:17px}
.berimbau-solo{min-height:44px;padding:9px 0;background:transparent;color:white;font-size:11px;font-weight:600;border-bottom:1px solid #ffffff55;line-height:1.5}
.berimbau-solo[aria-pressed=true]{color:var(--yellow);border-color:var(--yellow)}
.roda-player{position:relative;z-index:2;width:min(100%,440px);margin-top:19px;background:#f1f3f4;border:4px solid white;border-radius:9px;overflow:hidden;padding:3px}
.roda-player audio{display:block;width:100%;height:42px}
.rhythm .sound-caption{position:relative;z-index:1;font-size:9px;line-height:1.6;color:#bfd2e8;text-align:center;margin:11px auto 0;max-width:100%}
.sound-caption a{text-decoration:underline;text-decoration-color:#bfd2e85c;text-underline-offset:3px}
.audio-status{position:relative;z-index:2;color:var(--yellow);font-size:11px;line-height:1.5;text-align:center;margin-top:8px}
.audio-status:empty{display:none}
@media(max-width:380px){.rhythm .instrument-controls{gap:6px}.rhythm .instrument-controls button{font-size:10px;padding:10px 12px;min-height:44px}}
@media(max-width:1100px){.rhythm .rhythm-layout{gap:32px}.roda-visual{height:450px;margin:-20px 0 0}.rhythm .instrument-stage{min-height:540px}.roda-audio-actions{gap:15px}.rhythm .sound-button{font-size:11px;padding:12px 14px}.berimbau-solo{font-size:10px}.rhythm .instrument-description p{font-size:11px;max-width:37ch}}
@media(max-width:760px){.rhythm .rhythm-layout{grid-template-columns:1fr;gap:29px}.rhythm .instrument-stage{min-height:0;max-width:500px;margin:0;justify-self:center}.roda-visual{width:100%;margin:0;height:clamp(315px,92vw,490px)}.roda-visual figcaption{left:50%;bottom:0}.rhythm .rhythm-rings{inset:0 -7px 45px}.rhythm .instrument-description{margin-top:15px}.rhythm .instrument-description h3{font-size:30px}.rhythm .instrument-description p{font-size:12px;max-width:39ch}.roda-audio-actions{margin-top:18px;gap:16px}.rhythm .sound-button{font-size:11px;padding:12px 16px;min-height:45px}.berimbau-solo{font-size:10px}.rhythm .sound-caption{font-size:9px;margin-top:12px}.roda-player{margin-top:16px}}
@media(max-width:380px){.roda-visual figcaption{left:50%}.roda-visual figcaption strong{font-size:27px}.roda-visual figcaption span{font-size:9px}.rhythm .instrument-description h3{font-size:27px}.rhythm .instrument-description p{font-size:11px}.roda-audio-actions{gap:5px 12px}.rhythm .sound-button{font-size:11px}.berimbau-solo{font-size:10px;min-height:40px}.rhythm .sound-caption{font-size:8px}.rhythm .instrument-description{margin-top:12px}}