/* Keep the circle and the scale staff within one viewport. */
body{padding:10px 14px!important;box-sizing:border-box}
body>header{margin-bottom:10px!important;padding:0 60px;min-height:44px;box-sizing:border-box}
header h1{font-size:24px!important;margin:0 0 3px!important}
header p{font-size:12px!important;margin:0;line-height:1.4}
.main-grid{max-width:1500px;gap:12px!important;grid-template-columns:repeat(2,minmax(0,1fr))!important}
.main-grid>.card{min-width:0;padding:12px!important;box-sizing:border-box}
.card-header{padding-bottom:6px!important;margin-bottom:8px!important;gap:6px!important}
.card-title{font-size:14px!important}
.controls-row{gap:6px!important;margin-bottom:6px!important}
.btn{padding:6px 9px!important;font-size:12px!important;min-height:30px}
#circle-container{min-height:0!important;max-width:100%!important;flex:1;aspect-ratio:auto!important;height:clamp(250px,calc(100dvh - 230px),550px)}
#circle-container #circle-svg{max-height:100%!important;width:100%;height:100%;max-width:100%}
.info-panel{gap:9px!important;padding:0!important}
.key-banner{padding:8px 10px!important;margin-bottom:0!important}
.key-title{font-size:24px!important}.key-sub{font-size:12px!important}
.staff-wrapper{padding:8px!important;overflow:visible}
svg#staff-svg{min-width:0!important;width:100%;height:clamp(115px,24dvh,220px);aspect-ratio:auto}
.section-label{font-size:12px!important;margin:0!important}
.note-tile{padding:5px 2px!important}.note-degree{font-size:10px!important}.note-name{font-size:14px!important}
.details-list{margin-top:4px!important;gap:5px!important;padding-top:5px!important}
.details-item{font-size:12px!important;line-height:1.4!important;padding:3px 0!important}
.details-label{font-size:11px!important}.details-val{font-size:12px!important}
body>footer{padding:4px!important;margin:6px 0 0!important;font-size:10px!important;line-height:14px!important}
@media(max-width:649px){body{padding:8px!important}body>header{padding:44px 0 0!important;min-height:0}header h1{font-size:20px!important}header p{font-size:10px!important}.main-grid{grid-template-columns:1fr!important;gap:8px!important}.main-grid>.card{padding:8px!important}.card-header{margin-bottom:5px!important;padding-bottom:4px!important}.card-title{font-size:12px!important}.controls-row{gap:4px!important}.btn{padding:4px 6px!important;font-size:10px!important;min-height:26px}#circle-container{height:205px;max-height:205px}.main-grid .card:first-child .card-header>span:last-child{font-size:10px!important}.header-tools{gap:4px!important}.key-title{font-size:19px!important}.key-sub{font-size:10px!important}.info-panel{gap:5px!important}svg#staff-svg{height:110px}.note-tile{padding:3px 1px!important}.note-name{font-size:12px!important}.details-list{gap:2px!important}.details-item{padding:1px 0!important}.details-label,.details-val{font-size:10px!important}}
@media(orientation:landscape) and (max-height:600px){body{padding:6px 10px!important}body>header{margin-bottom:5px!important;min-height:30px}header h1{font-size:19px!important}header p{display:none}.main-grid{gap:8px!important}.main-grid>.card{padding:7px!important}.card-header{margin-bottom:5px!important;padding-bottom:4px!important}.card-title{font-size:11px!important}.card-header>span:last-child{font-size:9px!important}.header-tools{gap:3px!important}.btn{padding:3px 5px!important;min-height:25px;font-size:10px!important}.controls-row{gap:3px!important}#circle-container{height:calc(100dvh - 160px);min-height:0!important}.key-banner{padding:4px 6px!important}.key-title{font-size:18px!important}.key-sub{font-size:9px!important}.key-acc-badge{font-size:12px!important;padding:4px!important}.info-panel{gap:4px!important}svg#staff-svg{height:80px}.staff-wrapper{padding:4px!important}.note-tile{padding:2px 0!important}.note-name{font-size:11px!important}.note-degree{font-size:8px!important;margin-bottom:1px}.section-label{font-size:10px!important}.details-list{gap:2px!important;margin-top:2px!important;padding-top:2px!important}.details-item{padding:0!important}.details-label,.details-val{font-size:9px!important;line-height:1.2!important}}
#circle-container{position:relative;min-height:0!important}
#circle-container #circle-svg{position:absolute;inset:0;min-height:0!important;max-height:100%!important;aspect-ratio:auto!important}
#enharmonic-container.is-hidden{display:none!important}
@media(min-width:650px){.main-grid{align-items:stretch}.main-grid>.card:first-child #circle-container{height:auto;flex:1 1 0;min-height:230px!important}}
@media(max-width:649px){#circle-container{flex:0 0 205px;height:205px}}
.circle-mobile-tabs{display:none}
@media(max-width:959px){.circle-mobile-tabs{display:flex;width:100%;gap:6px;margin-bottom:7px}.circle-mobile-tabs button{flex:1;border:1px solid var(--card-border);border-radius:9px;background:var(--panel-bg);color:var(--text-main);padding:7px;font:700 13px system-ui;cursor:pointer}.circle-mobile-tabs button[aria-selected=true]{background:#7961ad;color:white;border-color:#bda5e7}.main-grid{grid-template-columns:1fr!important}.main-grid>.card[data-circle-selected=false]{display:none}.main-grid>.card:first-child #circle-container{height:min(430px,calc(100dvh - 310px));min-height:200px!important;flex:0 0 auto}.main-grid>.card:first-child{min-height:0}body>header{padding:42px 0 0!important}header p{font-size:10px!important}}
@media(orientation:landscape) and (max-height:600px) and (max-width:959px){body>header{padding:0 60px!important}.circle-mobile-tabs button{font-size:11px;padding:4px}.main-grid>.card:first-child #circle-container{height:calc(100dvh - 170px);min-height:160px!important}.main-grid>.card:nth-child(2) .card-header{flex-wrap:nowrap}.main-grid>.card:nth-child(2) .header-tools{flex-wrap:nowrap}svg#staff-svg{height:80px}.details-list{display:grid;grid-template-columns:1fr 1fr;gap:4px!important}.details-item:last-child{grid-column:1/-1}}
@media(max-width:959px){html body{padding-top:8px!important}body>#spec-btn{position:fixed!important;top:12px!important;left:70px!important;right:auto!important;width:46px!important;height:46px!important}body>footer:first-of-type{display:none}}
@media(orientation:landscape) and (max-height:600px) and (max-width:959px){html body{padding-top:6px!important}.main-grid>.card:first-child #circle-container{height:calc(100dvh - 200px)}svg#staff-svg{height:72px}}
@media(orientation:landscape) and (max-height:600px) and (max-width:959px){.main-grid>.card:nth-child(2) .card-header>.card-title{display:none}.main-grid>.card:nth-child(2) .card-header{margin-bottom:3px!important;padding-bottom:2px!important}body>footer{line-height:10px!important;padding:2px!important;margin-top:3px!important}}
/* Fit musical glyphs inside their buttons and keep fingering easy to spot. */
.clef-control .btn-clef{display:inline-flex;align-items:center;justify-content:center;width:40px;min-width:40px;height:36px;min-height:36px;padding:3px 7px!important;overflow:hidden}
.clef-control .btn-clef svg{display:block;width:24px;height:28px;fill:currentColor;overflow:visible}
#btn-finger{display:inline-flex;align-items:center;justify-content:center;gap:5px;min-height:36px}
#btn-finger .circle-finger-icon{font-family:'Segoe UI Emoji','Apple Color Emoji',sans-serif;font-size:23px;line-height:1;display:inline-block;flex:none}
@media(orientation:landscape) and (max-height:600px){.clef-control .btn-clef{width:34px;min-width:34px;height:31px;min-height:31px}.clef-control .btn-clef svg{width:20px;height:25px}#btn-finger{min-height:31px}#btn-finger .circle-finger-icon{font-size:21px}}
/* Keep page chrome compact without hiding application content. */
html body{box-sizing:border-box;min-height:100dvh}
body>footer:first-of-type{display:none}
body>footer{margin-top:4px!important;padding:2px!important;font-size:9px!important;line-height:12px!important}
.circle-fullscreen{position:fixed;top:12px;left:70px;z-index:10001;min-width:146px;min-height:54px;padding:10px 12px;border:2px solid #63c9ef;border-radius:13px;background:#17415e;color:#f1fbff;font:800 16px/1.25 system-ui;box-shadow:0 0 0 4px #38bdf821,0 4px 12px #0003;cursor:pointer;white-space:nowrap}
.circle-fullscreen:focus-visible{outline:3px solid #b3efff;outline-offset:4px}
html body>#spec-btn{position:fixed!important;top:12px!important;left:12px!important;right:auto!important;width:46px!important;height:46px!important}
html body>#mms-home-fab{left:auto!important;right:12px!important}
html.circle-fullscreen-mode{position:fixed;inset:0;overflow:auto;background:var(--bg-color);z-index:9999}
@media(min-width:960px){body>header{padding-left:220px!important;padding-right:65px!important}.main-grid>.card{padding:10px!important}.info-panel{gap:7px!important}svg#staff-svg{height:clamp(110px,22dvh,200px)}}
@media(max-width:959px) and (orientation:landscape) and (max-height:600px){body>header{padding-left:220px!important;padding-right:60px!important}.main-grid>.card:nth-child(2) .info-panel{gap:3px!important}.main-grid>.card:nth-child(2) .card-header{margin-bottom:2px!important}svg#staff-svg{height:60px}.details-list{font-size:9px!important}}
/* Fullscreen uses the available workspace height for larger music displays. */
@media(min-width:960px){
 html:is(:fullscreen,.circle-fullscreen-mode) .main-grid{max-width:none;min-height:calc(100dvh - 115px);align-items:stretch}
 html:is(:fullscreen,.circle-fullscreen-mode) .main-grid>.card{padding:14px!important}
 html:is(:fullscreen,.circle-fullscreen-mode) .main-grid>.card:first-child #circle-container{max-width:none!important;min-height:0!important;flex:1 1 0}
 html:is(:fullscreen,.circle-fullscreen-mode) .main-grid>.card:first-child #circle-svg{max-width:none!important;max-height:100%!important}
 html:is(:fullscreen,.circle-fullscreen-mode) .info-panel{flex:1;justify-content:space-between;gap:10px!important}
 html:is(:fullscreen,.circle-fullscreen-mode) .staff-wrapper{flex:1;display:flex;align-items:center;min-height:0}
 html:is(:fullscreen,.circle-fullscreen-mode) svg#staff-svg{height:clamp(150px,32dvh,360px);width:100%}
 html:is(:fullscreen,.circle-fullscreen-mode) .note-tile{padding:9px 2px!important}
 html:is(:fullscreen,.circle-fullscreen-mode) .note-name{font-size:18px!important}
}
@media(min-width:960px) and (max-height:650px){html:is(:fullscreen,.circle-fullscreen-mode) .main-grid{min-height:calc(100dvh - 100px)}html:is(:fullscreen,.circle-fullscreen-mode) svg#staff-svg{height:130px}html:is(:fullscreen,.circle-fullscreen-mode) .info-panel{gap:4px!important}html:is(:fullscreen,.circle-fullscreen-mode) .note-tile{padding:4px 2px!important}}
.circle-term-info{display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;flex:none;width:18px;min-width:18px;height:18px;min-height:18px;padding:0;border:1px solid #ad91cf;border-radius:4px;background:#49375f;color:#f0e2ff;font:700 12px/1 system-ui;cursor:pointer}
.circle-term-info:focus-visible{outline:2px solid #d4bcf5;outline-offset:2px}
.circle-term-dialog{width:min(520px,calc(100vw - 28px));max-height:85dvh;overflow:auto;padding:22px;border:1px solid #ad91cf;border-radius:15px;background:var(--card-bg);color:var(--text-main);font:15px/1.7 system-ui;box-shadow:0 12px 40px #0006}
.circle-term-dialog::backdrop{background:#030712b8}.circle-term-dialog h2{font-size:21px;color:var(--gold);margin:0 0 12px}.circle-term-dialog p{margin:0 0 18px}.circle-term-dialog>button{padding:6px 14px;border:1px solid #ad91cf;border-radius:8px;background:#49375f;color:#f0e2ff;cursor:pointer}
/* Reserve space for header, info buttons, and footer at shorter heights. */
@media(min-width:960px){html:is(:fullscreen,.circle-fullscreen-mode) .main-grid{min-height:calc(100dvh - 160px)}}
@media(min-width:960px) and (max-height:800px){.main-grid>.card{padding:8px!important}.info-panel{gap:5px!important}svg#staff-svg{height:clamp(100px,20dvh,160px)}.note-tile{padding:4px 2px!important}.details-list{gap:3px!important}.details-item{padding:2px 0!important}html:is(:fullscreen,.circle-fullscreen-mode) svg#staff-svg{height:clamp(130px,27dvh,210px)}html:is(:fullscreen,.circle-fullscreen-mode) .info-panel{gap:6px!important}html:is(:fullscreen,.circle-fullscreen-mode) .note-tile{padding:6px 2px!important}}
@media(min-width:960px) and (max-height:700px){html:is(:fullscreen,.circle-fullscreen-mode) svg#staff-svg{height:110px}html:is(:fullscreen,.circle-fullscreen-mode) .main-grid>.card{padding:8px!important}html:is(:fullscreen,.circle-fullscreen-mode) .info-panel{gap:4px!important}html:is(:fullscreen,.circle-fullscreen-mode) .note-tile{padding:4px 2px!important}}

/* Shared studio identity beside Home, with the P on the left. */
.circle-studio-brand{position:fixed;top:13px;right:65px;z-index:1000;display:flex;align-items:center;gap:8px;direction:ltr;white-space:nowrap;min-height:38px;font:800 17px/1.2 system-ui,sans-serif;color:var(--text,#eef4fc)}
.circle-studio-brand img{width:32px;height:32px;object-fit:contain;flex:none}
@media(min-width:1000px){body>header:has(.circle-studio-brand){padding-left:300px;padding-right:300px}}
@media(max-width:999px){.circle-studio-brand{font-size:14px;gap:6px}.circle-studio-brand img{width:28px;height:28px}}

/* Fingering details must not resize the adjacent circle. */
@media(min-width:960px){
 .main-grid>.card:first-child{align-self:stretch}
 .main-grid>.card:first-child #circle-container{flex:0 0 auto;height:clamp(230px,calc(100dvh - 305px),550px)}
 html:is(:fullscreen,.circle-fullscreen-mode) .main-grid>.card:first-child #circle-container{flex:0 0 auto;height:calc(100dvh - 260px);min-height:230px!important}
}

/* Fingering adds labels inside the reserved staff area, not a new text panel. */
#finger-note{display:none!important}
#btn-hand[hidden]{display:inline-flex!important;visibility:hidden;pointer-events:none}