/* Optional Carlingue skin. The default Flat skin uses the original stylesheet. */
.cockpit-digits{display:contents}
#cockpit-value{display:none}
.numeral-ink{fill:currentColor}
html[data-skin=carlingue] .cockpit-digits{width:100%;height:91px;position:relative;display:flex;align-items:center;justify-content:center}
html[data-skin=carlingue] #cockpit-value{display:block;width:100%;height:100%;position:absolute;inset:0;overflow:visible;pointer-events:none;color:var(--text)}
html[data-skin=carlingue] .dial input{color:transparent;caret-color:var(--text);position:relative;z-index:1;cursor:text}
html[data-skin=carlingue] .cockpit-digits:focus-within #cockpit-value{visibility:hidden}
html[data-skin=carlingue] .dial input:focus{color:var(--text);background:var(--surface)}
html[data-skin=carlingue] .dial .eyebrow{letter-spacing:.17em;font-size:9px}
html[data-skin=carlingue] .dial .eyebrow:before{content:'';display:inline-block;background:var(--coral);width:5px;height:9px;transform:skew(-17deg);margin-right:6px;vertical-align:-1px}
html[data-skin=carlingue] .tempo-caption{gap:8px}
@media(max-width:619px){html[data-skin=carlingue] .cockpit-digits{height:86px}}
@media(max-width:359px){html[data-skin=carlingue] .cockpit-digits{height:74px}}
/* Cargo lettering system: self-hosted stencil lettering for the instrument hierarchy. */
@font-face{font-family:'Saira Stencil One';src:url('./assets/fonts/SairaStencilOne-Regular.ttf') format('truetype');font-style:normal;font-weight:400;font-display:swap}
html[data-skin=carlingue]{--instrument-face:'Saira Stencil One','Arial Black',Arial,sans-serif}
html[data-skin=carlingue] :is(h1,h2,h3,.eyebrow,.mode-switch button,.transport button,.language-switch button,.settings-details summary,.about-bonus summary,.subdivision-name,.beat-number,.beat-caption,.bpm-unit,.signatures button,.sounds button,.check-label,.swing-top label,.poly-heading output,.poly-mute,.poly-speed-top,.poly-speed-actions button,.small-buttons button,.preset-form button,#install-app,#backbeat,.school-link){font-family:var(--instrument-face);font-weight:400;font-synthesis:none}
html[data-skin=carlingue] :is(.mode-switch button,.transport button,.language-switch button,.settings-details summary,.about-bonus summary,.subdivision-name,.sounds button,.check-label,.swing-top label,.poly-speed-actions button,.small-buttons button,.preset-form button,#install-app,.school-link){text-transform:uppercase;letter-spacing:.035em}
html[data-skin=carlingue] h1{font-size:35px;line-height:1.1;letter-spacing:.012em}
html[data-skin=carlingue] h1:before{font-family:Arial,sans-serif;font-weight:800;margin-right:.15em}
html[data-skin=carlingue] h2{letter-spacing:.04em;line-height:1.35}
html[data-skin=carlingue] .eyebrow{letter-spacing:.09em}
html[data-skin=carlingue] .panel-top .eyebrow,html[data-skin=carlingue] .subdivision-panel h2{font-size:.75rem;letter-spacing:.07em;text-transform:uppercase}
html[data-skin=carlingue] .mode-switch button{font-size:.9375rem}
html[data-skin=carlingue] .transport button{font-size:.9375rem;letter-spacing:.055em}
html[data-skin=carlingue] .language-switch button{font-size:.9375rem}
html[data-skin=carlingue] .settings-details summary{font-size:.9375rem;letter-spacing:.06em}
html[data-skin=carlingue] .beat-number{font-size:1.1875rem;letter-spacing:.015em}
html[data-skin=carlingue] .beat-caption{font-size:.6875rem;letter-spacing:.025em;text-transform:uppercase}
html[data-skin=carlingue] .subdivision-name{font-size:.8125rem;line-height:1.35;letter-spacing:.025em}
html[data-skin=carlingue] .school-link{font-size:.75rem;letter-spacing:.025em;line-height:1.45}
html[data-skin=carlingue] .check-label{line-height:1.45;letter-spacing:.02em}
html[data-skin=carlingue] .bpm-unit{font-size:.75rem;letter-spacing:.12em}
html[data-skin=carlingue] #backbeat{font-size:1rem;letter-spacing:.025em}
html[data-skin=carlingue] .dial input:focus{font-family:var(--instrument-face);font-weight:400;letter-spacing:0}
html[data-skin=carlingue] .about-metronome h2{font-size:1rem;letter-spacing:.025em}
@media(max-width:619px){
 html[data-skin=carlingue] h1{font-size:29px}
 html[data-skin=carlingue] .mode-switch button,html[data-skin=carlingue] .transport button{font-size:.875rem}
 html[data-skin=carlingue] .panel-top .eyebrow,html[data-skin=carlingue] .subdivision-panel h2{font-size:.6875rem;letter-spacing:.035em}
 html[data-skin=carlingue] .school-link{font-size:.6875rem;letter-spacing:.01em}
 html[data-skin=carlingue] .beat-number{font-size:1.0625rem}
 html[data-skin=carlingue] .beat-caption{font-size:.625rem;letter-spacing:0}
 html[data-skin=carlingue] .subdivision-name{font-size:.75rem}
}
@media(max-width:359px){html[data-skin=carlingue] h1{font-size:25px}html[data-skin=carlingue] .school-link{font-size:.625rem}}

html[data-skin=carlingue] h1{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22126%22%20height%3D%2238%22%20viewBox%3D%220%200%20126%2038%22%3E%3Cdefs%3E%3Cmask%20id%3D%22ink%22%3E%3Crect%20width%3D%22126%22%20height%3D%2238%22%20fill%3D%22white%22%2F%3E%3Cg%20fill%3D%22black%22%3E%3Cpath%20d%3D%22M13%2015l4-.7.2.6-4.1.8Z%20M69%2028l5-.9.2.7-5%20.8Z%20M104%2010l3.2-.5.1.5-3.1.6Z%22%2F%3E%3Crect%20x%3D%2228%22%20y%3D%2227%22%20width%3D%221.1%22%20height%3D%22.6%22%2F%3E%3Crect%20x%3D%2246%22%20y%3D%228%22%20width%3D%22.7%22%20height%3D%22.7%22%2F%3E%3Crect%20x%3D%2283%22%20y%3D%2219%22%20width%3D%22.9%22%20height%3D%22.7%22%2F%3E%3Crect%20x%3D%22117%22%20y%3D%2230%22%20width%3D%22.8%22%20height%3D%22.8%22%2F%3E%3C%2Fg%3E%3C%2Fmask%3E%3C%2Fdefs%3E%3Crect%20width%3D%22126%22%20height%3D%2238%22%20fill%3D%22white%22%20mask%3D%22url%28%23ink%29%22%2F%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22126%22%20height%3D%2238%22%20viewBox%3D%220%200%20126%2038%22%3E%3Cdefs%3E%3Cmask%20id%3D%22ink%22%3E%3Crect%20width%3D%22126%22%20height%3D%2238%22%20fill%3D%22white%22%2F%3E%3Cg%20fill%3D%22black%22%3E%3Cpath%20d%3D%22M13%2015l4-.7.2.6-4.1.8Z%20M69%2028l5-.9.2.7-5%20.8Z%20M104%2010l3.2-.5.1.5-3.1.6Z%22%2F%3E%3Crect%20x%3D%2228%22%20y%3D%2227%22%20width%3D%221.1%22%20height%3D%22.6%22%2F%3E%3Crect%20x%3D%2246%22%20y%3D%228%22%20width%3D%22.7%22%20height%3D%22.7%22%2F%3E%3Crect%20x%3D%2283%22%20y%3D%2219%22%20width%3D%22.9%22%20height%3D%22.7%22%2F%3E%3Crect%20x%3D%22117%22%20y%3D%2230%22%20width%3D%22.8%22%20height%3D%22.8%22%2F%3E%3C%2Fg%3E%3C%2Fmask%3E%3C%2Fdefs%3E%3Crect%20width%3D%22126%22%20height%3D%2238%22%20fill%3D%22white%22%20mask%3D%22url%28%23ink%29%22%2F%3E%3C%2Fsvg%3E");-webkit-mask-size:126px 38px;mask-size:126px 38px}
html[data-skin=carlingue] #poly-family,html[data-skin=carlingue] .poly-explainer a{font-family:var(--instrument-face);font-weight:400;text-transform:uppercase;letter-spacing:.02em}
html[data-skin=carlingue] :is(.subdivision-options button,#poly-third,#swing-reset){font-family:var(--instrument-face);font-weight:400;text-transform:uppercase;letter-spacing:.025em}