:root{--ts-ink:#1d2d3e;--ts-muted:#6c7c8d;--ts-line:#dce5eb;--ts-blue:#1769aa;--ts-teal:#168578;--ts-gold:#c48a24;--ts-soft:#f5f8fb}
html:has(body.pagina-escalas-trompete){margin:0!important;padding:0!important}body.pagina-escalas-trompete{margin:0!important;padding-top:0!important;background:#f5f8fb}.trumpet-scales-page{min-height:100vh;color:var(--ts-ink);background:radial-gradient(circle at 90% 4%,rgba(22,133,120,.09),transparent 28rem),#f5f8fb}.trumpet-focusbar{position:sticky;top:0;z-index:30;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;min-height:58px;padding:.45rem clamp(1rem,3vw,2rem);border-bottom:1px solid var(--ts-line);background:rgba(255,255,255,.96);box-shadow:0 3px 15px rgba(28,52,77,.05);backdrop-filter:blur(10px)}.trumpet-focus-back,.trumpet-focus-brand,.trumpet-focus-status{display:flex;align-items:center;gap:.55rem;color:#52647a;text-decoration:none;font-size:.76rem;font-weight:750}.trumpet-focus-back:hover{color:var(--ts-blue)}.trumpet-focus-brand{color:var(--ts-ink);font-family:Montserrat,sans-serif}.trumpet-focus-brand img{width:32px;height:32px;object-fit:contain}.trumpet-focus-status{justify-self:end}.trumpet-focus-status i{color:var(--ts-teal)}
.trumpet-scales-shell{width:min(100%,1380px);margin:auto;padding:.8rem clamp(12px,3vw,36px) 4rem}.trumpet-hero{display:flex;align-items:center;justify-content:space-between;gap:2rem;margin-bottom:1rem}.trumpet-hero>div:first-child>span,.trumpet-score-card>header>div>span,.trumpet-note-card>header>span,.trumpet-visual-card>header span{color:var(--ts-teal);font-size:.66rem;font-weight:850;letter-spacing:.09em;text-transform:uppercase}.trumpet-hero h1{margin:.2rem 0 .3rem;font:800 clamp(1.7rem,3.5vw,2.7rem)/1.08 Montserrat,sans-serif;letter-spacing:-.04em}.trumpet-hero p{max-width:760px;margin:0;color:var(--ts-muted)}.trumpet-hero-badge{display:flex;align-items:center;gap:.7rem;min-width:220px;padding:.8rem .95rem;border:1px solid #cfe3df;border-radius:13px;background:#fff;box-shadow:0 7px 20px rgba(31,84,78,.06)}.trumpet-hero-badge>i{display:grid;width:40px;height:40px;place-items:center;border-radius:10px;background:#e5f4f1;color:var(--ts-teal);font-size:1.2rem}.trumpet-hero-badge strong,.trumpet-hero-badge small{display:block}.trumpet-hero-badge strong{font-size:.73rem}.trumpet-hero-badge small{margin-top:.12rem;color:#7c8997;font-size:.62rem}
.trumpet-config{display:grid;grid-template-columns:1.15fr 1.2fr repeat(4,minmax(105px,.7fr));gap:.65rem;padding:.9rem;border:1px solid var(--ts-line);border-radius:15px;background:#fff;box-shadow:0 10px 30px rgba(28,52,77,.05)}.trumpet-config label{min-width:0;margin:0}.trumpet-config label>span{display:block;margin:0 0 .3rem;color:#65768a;font-size:.61rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase}.trumpet-config select{width:100%;height:40px;padding:0 2rem 0 .65rem;border:1px solid #d5e0e7;border-radius:9px;background-color:#fafcfd;color:#304459;font-size:.73rem;font-weight:700;outline:none}.trumpet-config select:focus{border-color:#6caea5;box-shadow:0 0 0 3px rgba(22,133,120,.1)}
.trumpet-score-card{margin-top:.85rem;border:1px solid var(--ts-line);border-radius:16px;background:#fff;box-shadow:0 12px 34px rgba(28,52,77,.06);overflow:hidden}.trumpet-score-card>header{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;padding:1rem 1.15rem;border-bottom:1px solid var(--ts-line)}.trumpet-score-card h2{margin:.13rem 0;font:800 1.15rem Montserrat,sans-serif}.trumpet-score-card header p{margin:0;color:var(--ts-muted);font-size:.68rem}.trumpet-playback{display:flex;align-items:center;gap:.45rem}.trumpet-playback>button{display:flex;height:39px;align-items:center;justify-content:center;gap:.35rem;padding:0 .8rem;border:1px solid #c9dce9;border-radius:9px;background:#edf6fc;color:var(--ts-blue);font-size:.68rem;font-weight:800}.trumpet-playback>button:first-child{width:39px;padding:0;border-color:#d8e0e6;background:#fff;color:#66778a}.trumpet-playback>button:disabled{opacity:.4}.trumpet-playback label{display:grid;grid-template-columns:auto 115px auto;align-items:center;gap:.45rem;margin-left:.35rem;color:#758497;font-size:.61rem;font-weight:750}.trumpet-playback input{accent-color:var(--ts-teal)}.trumpet-playback output{min-width:48px;color:#3f5368;font-size:.62rem;font-variant-numeric:tabular-nums}.trumpet-score-scroll{overflow-x:auto;padding:.35rem .55rem .15rem;background:linear-gradient(180deg,#fff,#fbfcfd);scroll-behavior:smooth}.trumpet-score{min-height:220px}.trumpet-score svg{display:block}.trumpet-score .vf-stavenote{cursor:pointer}.trumpet-score .vf-stavenote *{transition:fill .14s ease,stroke .14s ease}.trumpet-score .vf-stavenote:hover *,.trumpet-score .vf-stavenote.is-selected *{fill:var(--ts-blue)!important;stroke:var(--ts-blue)!important}.trumpet-score .vf-stavenote.is-playing *{fill:var(--ts-teal)!important;stroke:var(--ts-teal)!important}.trumpet-score-card>footer{display:flex;justify-content:space-between;gap:1rem;padding:.7rem 1.1rem;border-top:1px solid var(--ts-line);background:#fafcfd;color:#738295;font-size:.61rem}.trumpet-score-card>footer i{margin-right:.3rem;color:var(--ts-teal)}#trumpet-range-message{color:#976819;font-weight:750}
.trumpet-study-grid{display:grid;grid-template-columns:minmax(290px,.72fr) minmax(0,1.28fr);gap:.85rem;margin-top:.85rem}.trumpet-note-card,.trumpet-visual-card{border:1px solid var(--ts-line);border-radius:15px;background:#fff;box-shadow:0 10px 28px rgba(28,52,77,.05)}.trumpet-note-card{padding:1rem}.trumpet-note-card>header,.trumpet-visual-card>header{display:flex;align-items:center;justify-content:space-between;gap:1rem}.trumpet-note-card>header small{color:#8a96a3;font-size:.62rem}.trumpet-note-main{margin:.8rem 0;padding:.8rem;border-radius:12px;background:linear-gradient(135deg,#eaf5fb,#e9f7f4);text-align:center}.trumpet-note-main strong,.trumpet-note-main span{display:block}.trumpet-note-main strong{font:850 1.65rem Montserrat,sans-serif}.trumpet-note-main span{margin-top:.1rem;color:#708094;font-size:.61rem}.trumpet-note-card dl{display:grid;gap:.5rem;margin:0}.trumpet-note-card dl>div{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-bottom:.5rem;border-bottom:1px solid #edf1f4}.trumpet-note-card dt{color:#798797;font-size:.62rem;font-weight:650}.trumpet-note-card dd{margin:0;color:#344a60;font-size:.7rem;font-weight:800;text-align:right}.trumpet-note-card>button{display:flex;width:100%;height:40px;align-items:center;justify-content:center;gap:.4rem;margin-top:.8rem;border:0;border-radius:9px;background:#1769aa;color:#fff;font-size:.7rem;font-weight:800}.trumpet-visual-card{padding:1rem 1.15rem}.trumpet-visual-card h2{margin:.15rem 0 0;font:800 1rem Montserrat,sans-serif}.trumpet-valve-code{display:flex;gap:.35rem}.trumpet-valve-code b{display:grid;width:29px;height:29px;place-items:center;border-radius:50%;background:#edf2f5;color:#718195;font-size:.95rem}.trumpet-valve-code b.is-pressed{background:#dff2ee;color:#117a6d}.trumpet-svg-wrap{display:grid;min-height:190px;place-items:center;margin-top:.3rem;overflow:hidden}.trumpet-svg{width:min(100%,760px);height:auto}.trumpet-body,.trumpet-bell,.trumpet-mouthpiece{fill:url(#trumpet-gold);stroke:#8b5c12;stroke-width:3}.trumpet-pipe{fill:none;stroke:#c78e27;stroke-width:13;stroke-linecap:round;stroke-linejoin:round}.trumpet-valve{transition:transform .18s ease;transform-box:fill-box;transform-origin:center}.trumpet-valve rect{fill:#e3b443;stroke:#8b5c12;stroke-width:3}.trumpet-valve line{stroke:#8b5c12;stroke-width:7.26}.trumpet-valve.is-pressed{transform:translateY(13px)}.trumpet-valve.is-fourth{display:none}.trumpet-scales-page.has-four-valves .trumpet-valve.is-fourth{display:block}.trumpet-visual-card>p{margin:0;color:#7a8998;font-size:.62rem;text-align:center}
@media(max-width:1050px){.trumpet-config{grid-template-columns:repeat(3,1fr)}.trumpet-study-grid{grid-template-columns:1fr}.trumpet-svg-wrap{min-height:170px}}
@media(max-width:700px){.trumpet-focusbar{grid-template-columns:1fr auto;min-height:52px;padding:.35rem 10px}.trumpet-focus-brand{display:none}.trumpet-focus-status{font-size:.62rem}.trumpet-scales-shell{padding:.65rem 10px 3rem}.trumpet-hero{display:block}.trumpet-hero-badge{width:100%;margin-top:.7rem}.trumpet-config{grid-template-columns:1fr 1fr;padding:.75rem}.trumpet-config label:nth-child(-n+2){grid-column:1/-1}.trumpet-score-card>header{align-items:flex-start;flex-direction:column}.trumpet-playback{width:100%;flex-wrap:wrap}.trumpet-playback>button:nth-child(2){flex:1}.trumpet-playback label{width:100%;grid-template-columns:auto 1fr auto;margin:.25rem 0 0}.trumpet-score-card>footer{align-items:flex-start;flex-direction:column}.trumpet-study-grid{grid-template-columns:1fr}.trumpet-svg{min-width:590px;transform:scale(.82)}.trumpet-svg-wrap{justify-content:center}.trumpet-hero h1{font-size:1.8rem}}
@media(max-width:700px){.trumpet-focus-status{font-size:0}.trumpet-focus-status i{font-size:.75rem}}
.trumpet-valve.is-pressed{transform:none}.trumpet-valve-top{transition:transform .18s ease}.trumpet-valve line{transform-box:fill-box;transform-origin:center bottom;transition:transform .18s ease}.trumpet-valve.is-pressed .trumpet-valve-top{transform:translateY(29px)}.trumpet-valve.is-pressed line{transform:scaleY(.05)}
.trumpet-valve-code b.is-pressed{background:#183b57;color:#fff;box-shadow:inset 0 0 0 2px #102d45,0 2px 6px rgba(16,45,69,.22)}
.trumpet-score .trumpet-score-note:focus,.trumpet-score .trumpet-score-note:focus-visible{outline:none}.trumpet-score .trumpet-score-note.is-selected{filter:drop-shadow(0 1px 1px rgba(132,82,12,.2))}.trumpet-score .trumpet-score-note.is-selected *,.trumpet-score .trumpet-score-note:focus-visible *{fill:#b06f13!important;stroke:#b06f13!important}.trumpet-score .trumpet-score-note.is-playing *{fill:var(--ts-teal)!important;stroke:var(--ts-teal)!important}
.trumpet-svg{width:min(100%,620px)}
@media(max-width:700px){.trumpet-svg{width:100%;min-width:0;transform:none}}

/* Fluxo de estudo compacto para celulares: partitura, digitação e dados. */
@media(max-width:700px){
  .trumpet-scales-shell{padding:.45rem 8px 2rem}
  .trumpet-hero{margin-bottom:.5rem}
  .trumpet-hero>div:first-child>span,.trumpet-hero p,.trumpet-hero-badge{display:none}
  .trumpet-hero h1{margin:.15rem 0;font-size:1.25rem;letter-spacing:-.025em}
  .trumpet-config{grid-template-columns:repeat(6,minmax(0,1fr));gap:.4rem;padding:.55rem;border-radius:12px}
  .trumpet-config label:nth-child(-n+3){grid-column:span 2}
  .trumpet-config label:nth-child(n+4){grid-column:span 2}
  .trumpet-config label>span{margin-bottom:.2rem;font-size:.54rem;white-space:nowrap}
  .trumpet-config select{height:36px;padding-left:.5rem;font-size:.66rem}
  .trumpet-score-card{margin-top:.5rem;border-radius:12px}
  .trumpet-score-card>header{gap:.5rem;padding:.6rem .65rem}
  .trumpet-score-card h2{font-size:.94rem}
  .trumpet-score-card header p{font-size:.59rem}
  .trumpet-playback{gap:.35rem}
  .trumpet-playback>button{height:36px}
  .trumpet-playback>button:first-child{width:36px}
  .trumpet-playback label{margin-top:.1rem;font-size:.56rem}
  .trumpet-score-scroll{padding:0 .25rem}
  .trumpet-score{min-height:210px}
  .trumpet-score-card>footer{min-height:0;padding:.4rem .65rem;font-size:.56rem}
  .trumpet-score-card>footer>span:first-child{display:none}
  .trumpet-study-grid{gap:.4rem;margin-top:.4rem}
  .trumpet-visual-card{order:1;padding:.55rem .65rem;border-radius:12px}
  .trumpet-note-card{order:2;display:grid;grid-template-columns:88px minmax(0,1fr);gap:.5rem;padding:.65rem;border-radius:12px}
  .trumpet-visual-card h2{font-size:.86rem}
  .trumpet-valve-code{gap:.25rem}
  .trumpet-valve-code b{width:25px;height:25px;font-size:.8rem}
  .trumpet-svg-wrap{min-height:0;margin-top:0}
  .trumpet-svg{width:min(100%,390px)}
  .trumpet-visual-card>p{display:none}
  .trumpet-note-card>header{grid-column:1/-1}
  .trumpet-note-main{display:grid;align-content:center;margin:0;padding:.45rem;border-radius:9px}
  .trumpet-note-main strong{font-size:1.18rem}
  .trumpet-note-main span{font-size:.52rem}
  .trumpet-note-card dl{gap:0}
  .trumpet-note-card dl>div{gap:.5rem;padding:.24rem 0}
  .trumpet-note-card dt{font-size:.55rem}
  .trumpet-note-card dd{font-size:.61rem}
  .trumpet-note-card>button{grid-column:1/-1;height:35px;margin-top:0}
}
.trumpet-score-scroll.is-score-centered{display:flex;justify-content:center}
.trumpet-score{flex:0 0 auto;margin-inline:auto}
.trumpet-score-scroll.is-score-multiline{overflow-x:hidden}
.trumpet-score-scroll.is-score-multiline .trumpet-score{max-width:100%}

/* Visual de folha de estudo: um painel, menos caixas e foco no conteúdo. */
body.pagina-escalas-trompete{background:#fff}
.trumpet-scales-page{background:#fff}
.trumpet-scales-shell{width:min(100%,1240px);margin:0 auto;padding:0 clamp(1rem,3vw,2rem) 2rem;border:0;border-radius:0;background:transparent;box-shadow:none;overflow:visible}
.trumpet-hero{margin:0;padding:1.15rem 0 .9rem}
.trumpet-hero h1{font-size:clamp(1.55rem,3vw,2.25rem)}
.trumpet-hero-badge{padding:.45rem 0;border:0;background:transparent;box-shadow:none}
.trumpet-hero-badge>i{width:36px;height:36px}
.trumpet-config{padding:.85rem 0 1.05rem;border:0;border-top:1px solid #edf1f4;border-bottom:1px solid var(--ts-line);border-radius:0;background:transparent;box-shadow:none}
.trumpet-score-card{margin:0;border:0;border-radius:0;background:transparent;box-shadow:none}
.trumpet-score-card>header{padding:.9rem 0 .55rem;border:0}
.trumpet-score-scroll{padding:.15rem 0;background:transparent}
.trumpet-score-card>footer{padding:.35rem 0 .8rem;border:0;background:transparent}
.trumpet-study-grid{gap:0;margin:0;padding-top:.9rem;border-top:1px solid var(--ts-line)}
.trumpet-note-card,.trumpet-visual-card{border:0;border-radius:0;background:transparent;box-shadow:none}
.trumpet-note-card{padding:.2rem 1.35rem .2rem 0;border-right:1px solid #e6ecef}
.trumpet-visual-card{padding:.2rem 0 .2rem 1.5rem}
.trumpet-note-main{background:linear-gradient(135deg,rgba(234,245,251,.72),rgba(233,247,244,.72))}

@media(max-width:1050px){
  .trumpet-note-card{border-right:0}
  .trumpet-visual-card{border-top:1px solid #edf1f4}
}

@media(max-width:700px){
  body.pagina-escalas-trompete,.trumpet-scales-page{background:#fff}
  .trumpet-scales-shell{width:100%;margin:0;padding:.4rem 10px 1.5rem;border:0;border-radius:0;box-shadow:none}
  .trumpet-hero{padding:.25rem 0 .5rem}
  .trumpet-config{padding:.5rem 0 .75rem;border-radius:0}
  .trumpet-score-card{margin:0;border-radius:0}
  .trumpet-score-card>header{padding:.6rem 0 .4rem}
  .trumpet-score-scroll{padding:0}
  .trumpet-score-card>footer{padding:.25rem 0 .6rem}
  .trumpet-study-grid{gap:0;margin:0;padding-top:.55rem}
  .trumpet-visual-card{padding:.2rem 0 .55rem;border-top:0;border-bottom:1px solid #edf1f4;border-radius:0}
  .trumpet-note-card{padding:.6rem 0 0;border-radius:0}
}
@media(max-width:700px){.trumpet-hero h1{text-align:center}}
@media(max-width:700px){.trumpet-score-card>footer{align-items:center;justify-content:center;text-align:center}.trumpet-score-card>footer>span:first-child{display:block;width:100%;color:#7b8996;font-size:.56rem}.trumpet-score-card>footer>span:first-child i{margin-right:.22rem}}

/* Consulta rápida: partitura e digitação têm prioridade; áudio fica auxiliar. */
.trumpet-score-instruction{display:flex;align-items:center;gap:.4rem;padding:.42rem .65rem;border-radius:999px;background:#eef7f5;color:#24776e;font-size:.65rem;font-weight:800;white-space:nowrap}
.trumpet-score-instruction i{font-size:.78rem}
.trumpet-score-scroll{position:relative}
.trumpet-score-quick-play{position:absolute;top:.5rem;right:.5rem;z-index:4;display:grid;box-sizing:border-box;width:38px;min-width:38px;height:38px;min-height:38px;aspect-ratio:1/1;margin:0;padding:0;flex:0 0 38px;place-items:center;border:1px solid #bcd9e9;border-radius:50%;background:#e8f5fc;color:var(--ts-blue);box-shadow:0 4px 13px rgba(23,105,170,.16);font-size:1rem;line-height:1;cursor:pointer}
.trumpet-score-quick-play:hover{background:#dceff9}
.trumpet-score-quick-play.is-playing{border-color:#e2c9c9;background:#fff1f1;color:#a74343}
.trumpet-config select{font-weight:800}
.trumpet-config select option,.trumpet-config select optgroup{font-weight:700}

/* Selects com a identidade azul e verde-petróleo do portal. */
.trumpet-config label>span{display:flex;align-items:center;gap:.35rem;margin-left:.15rem;color:#506579}
.trumpet-config label>span::before{width:5px;height:5px;flex:0 0 5px;border-radius:50%;background:var(--ts-blue);box-shadow:0 0 0 3px rgba(23,105,170,.09);content:""}
.trumpet-config label:nth-child(n+4)>span::before{background:var(--ts-teal);box-shadow:0 0 0 3px rgba(22,133,120,.09)}
.trumpet-config select{-webkit-appearance:none;appearance:none;height:43px;padding:0 2.2rem 0 .9rem;border:1px solid #cbdbe7;border-radius:999px;background-color:#f9fcfe;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23556f84' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.7' d='m4 6 4 4 4-4'/%3E%3C/svg%3E"),linear-gradient(180deg,#fff 0%,#f5f9fc 100%);background-position:right .7rem center,0 0;background-repeat:no-repeat;background-size:14px 14px,100% 100%;box-shadow:0 2px 7px rgba(30,69,101,.055),inset 3px 0 0 rgba(23,105,170,.7);color:#263f55;cursor:pointer;transition:border-color .16s ease,box-shadow .16s ease,background-color .16s ease,transform .16s ease}
.trumpet-config label:nth-child(n+4) select{border-color:#c9dedb;box-shadow:0 2px 7px rgba(27,91,82,.05),inset 3px 0 0 rgba(22,133,120,.68)}
.trumpet-config select:hover{border-color:#91b6d1;background-color:#fff;box-shadow:0 4px 11px rgba(30,69,101,.09),inset 3px 0 0 var(--ts-blue)}
.trumpet-config label:nth-child(n+4) select:hover{border-color:#89bdb6;box-shadow:0 4px 11px rgba(27,91,82,.08),inset 3px 0 0 var(--ts-teal)}
.trumpet-config select:focus,.trumpet-config select:focus-visible{border-color:#68a4cd;background-color:#fff;box-shadow:0 0 0 3px rgba(23,105,170,.11),inset 3px 0 0 var(--ts-blue);outline:0}
.trumpet-config label:nth-child(n+4) select:focus,.trumpet-config label:nth-child(n+4) select:focus-visible{border-color:#66a99f;box-shadow:0 0 0 3px rgba(22,133,120,.11),inset 3px 0 0 var(--ts-teal)}

@media(max-width:700px){
  .trumpet-config select{height:38px;padding-right:1.7rem;padding-left:.7rem;border-radius:999px;background-position:right .45rem center;background-size:12px 12px;font-size:.64rem}
  .trumpet-config label>span{gap:.25rem;margin-left:.08rem}
  .trumpet-config label>span::before{width:4px;height:4px;flex-basis:4px;box-shadow:none}
}

/* Faixa de acesso ao Método de Trompete. */
.trumpet-method-banner{position:relative;display:grid;width:100%;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:1rem;overflow:hidden;margin-top:1.5rem;padding:1.15rem max(clamp(1rem,5vw,4rem),calc((100vw - 1240px)/2 + 2rem));background:linear-gradient(105deg,#123c5d 0%,#1769aa 48%,#168578 100%);color:#fff;text-decoration:none}
.trumpet-method-banner::after{position:absolute;right:10%;width:220px;height:220px;border:1px solid rgba(255,255,255,.12);border-radius:50%;box-shadow:0 0 0 34px rgba(255,255,255,.035);content:"";pointer-events:none}
.trumpet-method-banner-icon{position:relative;z-index:1;display:grid;width:48px;height:48px;place-items:center;border:1px solid rgba(255,255,255,.22);border-radius:14px;background:rgba(255,255,255,.12);font-size:1.35rem}
.trumpet-method-banner-copy{position:relative;z-index:1;display:block;min-width:0}
.trumpet-method-banner-copy small,.trumpet-method-banner-copy strong,.trumpet-method-banner-copy>span{display:block}
.trumpet-method-banner-copy small{margin-bottom:.12rem;color:#bfe7df;font-size:.58rem;font-weight:850;letter-spacing:.09em;text-transform:uppercase}
.trumpet-method-banner-copy strong{font:800 clamp(.95rem,1.6vw,1.2rem)/1.2 Montserrat,sans-serif}
.trumpet-method-banner-copy>span{margin-top:.18rem;color:rgba(255,255,255,.78);font-size:.67rem}
.trumpet-method-banner-action{position:relative;z-index:1;display:flex;min-height:40px;align-items:center;gap:.5rem;padding:0 .9rem;border-radius:999px;background:#fff;color:#185d85;font-size:.66rem;font-weight:850;white-space:nowrap;transition:transform .18s ease,box-shadow .18s ease}
.trumpet-method-banner:hover{color:#fff}
.trumpet-method-banner:hover .trumpet-method-banner-action{transform:translateX(3px);box-shadow:0 6px 18px rgba(8,42,62,.2)}

@media(max-width:700px){
  .trumpet-method-banner{grid-template-columns:38px minmax(0,1fr) auto;gap:.65rem;margin-top:.85rem;padding:.85rem 12px}
  .trumpet-method-banner-icon{width:38px;height:38px;border-radius:11px;font-size:1rem}
  .trumpet-method-banner-copy>span{display:none}
  .trumpet-method-banner-copy strong{font-size:.78rem}
  .trumpet-method-banner-action{min-width:36px;min-height:36px;padding:0;justify-content:center;font-size:0}
  .trumpet-method-banner-action i{font-size:.78rem}
}
.trumpet-score .trumpet-note-hit-area,.trumpet-score .trumpet-score-note:hover .trumpet-note-hit-area,.trumpet-score .trumpet-score-note.is-selected .trumpet-note-hit-area,.trumpet-score .trumpet-score-note.is-playing .trumpet-note-hit-area{fill:transparent!important;stroke:transparent!important;pointer-events:all}
.trumpet-study-grid{grid-template-columns:minmax(0,1.25fr) minmax(290px,.75fr)}
.trumpet-visual-card{padding:.2rem 1.5rem .2rem 0;border-right:1px solid #e6ecef}
.trumpet-note-card{padding:.2rem 0 .2rem 1.35rem;border-right:0}
.trumpet-note-main{margin:.55rem 0;padding:.65rem}
.trumpet-note-card dl{gap:.25rem}
.trumpet-note-card dl>div{padding-bottom:.35rem}
.trumpet-note-card>button{height:38px;margin-top:.55rem;background:#f0f6fa;color:var(--ts-blue);border:1px solid #d4e3ec}
.trumpet-audio-tools{margin-top:.8rem;border-top:1px solid var(--ts-line);border-bottom:1px solid var(--ts-line)}
.trumpet-audio-tools summary{display:flex;min-height:46px;align-items:center;justify-content:space-between;gap:1rem;padding:.35rem .15rem;color:#52677a;cursor:pointer;list-style:none}
.trumpet-audio-tools summary::-webkit-details-marker{display:none}
.trumpet-audio-tools summary>span{display:flex;align-items:center;gap:.5rem;font-size:.7rem}
.trumpet-audio-tools summary>span i{color:var(--ts-blue);font-size:.9rem}
.trumpet-audio-tools summary>small{display:flex;align-items:center;gap:.35rem;color:#8a97a3;font-size:.58rem}
.trumpet-audio-tools summary>small::after{content:'\F282';font-family:'bootstrap-icons';transition:transform .18s ease}
.trumpet-audio-tools[open] summary>small::after{transform:rotate(180deg)}
.trumpet-audio-tools .trumpet-playback{padding:0 0 .8rem}

@media(max-width:1050px){
  .trumpet-study-grid{grid-template-columns:minmax(0,1.15fr) minmax(280px,.85fr)}
  .trumpet-visual-card{border-top:0;border-right:1px solid #edf1f4}
}

@media(max-width:700px){
  .trumpet-score-card>header{align-items:center;flex-direction:row}
  .trumpet-score-instruction{padding:.35rem .5rem;font-size:.58rem}
  .trumpet-score-card>footer{display:none}
  .trumpet-study-grid{grid-template-columns:1fr;padding-top:.4rem}
  .trumpet-visual-card{order:1;padding:.2rem 0 .45rem;border-right:0;border-bottom:1px solid #edf1f4}
  .trumpet-note-card{order:2;padding:.55rem 0 0;border-right:0}
  .trumpet-svg-wrap{max-height:150px}
  .trumpet-svg{width:min(100%,330px)}
  .trumpet-note-card>button{height:34px}
  .trumpet-audio-tools{margin-top:.55rem}
  .trumpet-audio-tools summary{min-height:42px}
  .trumpet-audio-tools .trumpet-playback{padding-bottom:.65rem}
}