html{height:100%;overflow-y:auto}body{height:100dvh;min-height:0;padding:64px 12px 10px;display:flex;flex-direction:column;gap:8px}
.engine-header{position:absolute;inset:0 0 auto;height:60px;display:flex;align-items:center;justify-content:center}
.engine-header h1{font-size:23px;color:#43cdbf;margin:0;white-space:nowrap}.engine-brand{position:absolute;right:64px;top:16px;display:flex;align-items:center;gap:7px;direction:ltr;color:var(--text-main);text-decoration:none;font-weight:800;font-size:17px}.engine-brand img{width:30px;height:30px}.engine-fullscreen{position:absolute;left:64px;top:14px;height:38px;font-size:13px}
#mms-home-fab{right:14px!important;left:auto!important;top:14px!important}#mms-home-spacer{display:none!important}.spec-btn{top:14px!important;left:14px!important}
.rhythm-action-row{position:static;margin:0;padding:6px;flex:none;box-shadow:none}.rhythm-action-row .btn{padding:7px 12px}.engine-quick-controls{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:7px 16px;flex:none;padding:8px;border:1px solid var(--border-color);border-radius:12px;background:var(--card-bg)}.engine-quick-controls .control-group{font-size:12px}.engine-quick-controls select,.engine-quick-controls input{font-size:12px;padding:4px 6px}.engine-quick-controls #presetSelect{max-width:180px}
.visualizers-wrapper{flex:1;min-height:0;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:minmax(0,1fr);gap:8px;margin:0}.visualizers-wrapper .staff-container{height:auto;min-height:0;min-width:0;overflow:visible}.staff-container .staff-scroll-wrapper{position:absolute!important;left:0;top:50%;min-width:0!important;transform-origin:left center}
.engine-dialog{width:min(1200px,calc(100vw - 24px));max-height:calc(100dvh - 24px);padding:16px;border:1px solid var(--border-color);border-radius:18px;background:var(--bg-color);color:var(--text-main)}.engine-dialog::backdrop{background:#080e1dbb}.engine-dialog-close{margin-bottom:12px}.engine-dialog .top-bar,.engine-dialog .bars-container{margin:0}.engine-dialog .bars-container{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:900px){.engine-header h1{font-size:19px;position:absolute;top:60px}.engine-brand{font-size:14px}.engine-brand img{width:25px;height:25px}body{padding-top:94px}.engine-quick-controls{gap:5px 10px;padding:5px}.engine-quick-controls .control-group{font-size:11px}.engine-quick-controls .btn-sm{padding:3px 5px;font-size:11px}.engine-dialog .bars-container{grid-template-columns:1fr}}

body>#barsContainer{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;flex:none}body>#barsContainer .bar-card{padding:6px;min-width:0}body>#barsContainer .bar-header{gap:5px;flex-wrap:wrap;margin-bottom:4px;padding-bottom:4px}body>#barsContainer .bar-title{font-size:12px}body>#barsContainer .bar-controls{gap:2px}body>#barsContainer .btn-sm{font-size:10px;padding:2px 3px}body>#barsContainer .beat-row{padding:3px;margin-bottom:3px}body>#barsContainer .beat-header{gap:4px;margin-bottom:2px;font-size:10px}body>#barsContainer .beat-header select{font-size:10px;padding:1px;min-width:0}body>#barsContainer .sub-step{height:19px}body>#barsContainer .subdivisions-grid{gap:2px}
@media(max-width:700px){body>#barsContainer{grid-template-columns:repeat(2,minmax(0,1fr));zoom:.72}}

body{zoom:1!important}body>footer{flex:none;margin:0!important;padding:4px!important;font-size:10px!important}body>#barsContainer .beat-header{flex-wrap:nowrap}body>#barsContainer .bar-header{gap:3px}body>#barsContainer .bar-header .bar-controls{flex-wrap:wrap}
@media(max-height:680px) and (min-width:701px){body>#barsContainer{zoom:.78}.engine-quick-controls{padding:4px;gap:4px 8px}.rhythm-action-row{padding:4px}.visualizers-wrapper{min-height:140px}}

@font-face{font-family:EngineBravura;src:url('assets/Bravura.woff2') format('woff2');font-display:swap}
.staff-clef{font-family:EngineBravura!important;font-size:66px!important}
.visualizers-wrapper .note-head[data-glyph]{background:transparent!important;border:0!important;border-radius:0;transform:none!important;overflow:visible}
.note-head[data-glyph]::before{content:attr(data-glyph);position:absolute;left:0;top:50%;font:40px/0 EngineBravura;color:inherit}
.visualizers-wrapper .flag[data-glyph]{border:0!important;background:none;width:16px;height:32px;transform:none;left:0;top:0}
.flag[data-glyph]::before{content:attr(data-glyph);position:absolute;top:0;left:0;width:auto;height:auto;border:0!important;font:40px/0 EngineBravura;transform:none}
.flag[data-glyph]::after{display:none!important}
.visualizers-wrapper .bravura-rest{font:32px/1 EngineBravura!important;width:32px;height:52px;left:14px;top:50%;display:flex;align-items:center;justify-content:center;transform:translate(-50%,-50%);background:none!important;border:0!important}

.staff-clef{font-size:40px!important}.visualizers-wrapper .stem.active,.visualizers-wrapper .note-head,.visualizers-wrapper .flag{ text-shadow:none!important;filter:none!important;box-shadow:none!important}

#visibleBarsGroup[hidden],.control-group[hidden]{display:none!important}
.engine-basic-modes{display:flex;gap:5px;align-items:center}.engine-basic-modes .btn{padding:7px 12px;background:var(--bg-color);color:var(--text-main);border:1px solid var(--border-color);font-size:13px}.engine-basic-modes .selected{background:#245780;border-color:#73b9e8;color:#fff}
body[data-rhythm-structure=loop12] .visualizers-wrapper{grid-template-rows:minmax(0,1fr)}
body[data-rhythm-structure=loop12]>#barsContainer{grid-template-columns:repeat(2,minmax(0,1fr))}
body[data-rhythm-structure=phrase2bar] #staffContainer0{grid-area:1/1}body[data-rhythm-structure=phrase2bar] #staffContainer2{grid-area:1/2}body[data-rhythm-structure=phrase2bar] #staffContainer1{grid-area:2/1}body[data-rhythm-structure=phrase2bar] #staffContainer3{grid-area:2/2}
body[data-rhythm-structure=phrase2bar] .visualizers-wrapper{column-gap:0;row-gap:8px}
body[data-rhythm-structure=phrase2bar] #staffContainer0,body[data-rhythm-structure=phrase2bar] #staffContainer1{border-radius:12px 0 0 12px;border-right:0}
body[data-rhythm-structure=phrase2bar] #staffContainer2,body[data-rhythm-structure=phrase2bar] #staffContainer3{border-radius:0 12px 12px 0;border-left:0}

@media(max-height:680px) and (min-width:701px){body>#barsContainer{zoom:.68}.engine-basic-modes .btn{padding:5px 8px;font-size:12px}}

body[data-rhythm-structure=phrase2bar] :is(#staffContainer2,#staffContainer3) :is(.staff-clef,.time-signature,.staff-title){display:none}
body[data-rhythm-structure=phrase2bar] :is(#staffContainer2,#staffContainer3) .notes-track{left:15px}
body[data-rhythm-structure=phrase2bar] :is(#staffContainer0,#staffContainer1) .staff-lines{right:0}
body[data-rhythm-structure=phrase2bar] :is(#staffContainer2,#staffContainer3) .staff-lines{left:0}
body[data-rhythm-structure=phrase2bar] :is(#staffContainer2,#staffContainer3) .staff-lines::before{content:"";position:absolute;left:0;top:0;width:1px;height:100%;background:currentColor}

.bar-controls button[onclick^="setSingleLoop"]{display:none!important}.engine-loop{background:var(--bg-color);color:var(--text-main);border:1px solid var(--border-color)}.engine-loop.on{background:#245780;color:#fff;border-color:#73b9e8}

body[data-rhythm-structure=phrase2bar]>#barsContainer{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.engine-double-editor{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));min-width:0;background:var(--card-bg);border:1px solid var(--border-color);border-radius:12px;overflow:hidden;direction:ltr}
.engine-double-editor>h2{grid-column:1/-1;order:-1;text-align:center;direction:rtl;font-size:13px;color:#fbbf24;margin:0;padding:5px;border-bottom:1px solid var(--border-color)}
body>#barsContainer .engine-double-editor>.bar-card{border:0;border-radius:0;box-shadow:none}
.engine-double-editor>.bar-card:last-child{border-left:1px solid var(--border-color)!important}
.engine-double-editor .bar-title{display:none!important}

.engine-pair-controls{grid-column:1/-1;order:-1;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px;padding:7px;border-bottom:1px solid var(--border-color)}.engine-double-editor>.bar-card>.bar-header,.engine-double-editor>.bar-card>.sound-select-wrapper{display:none!important}.engine-pair-controls .sound-select-wrapper{gap:6px!important}.engine-pair-controls select{max-width:155px;font-size:12px;padding:4px}


.drum-metronome:focus-visible{outline:2px solid #10b981;outline-offset:2px;border-radius:8px}
.drum-metronome .measure-circle{box-sizing:border-box;position:relative;display:block;width:52px;height:52px;border-radius:50%;border:2px solid #64748b;background:radial-gradient(circle,#101827,#1e293b);box-shadow:inset 0 3px 8px #0008}
.drum-metronome .circle-hand{position:absolute;bottom:50%;left:50%;width:2px;height:21px;background:linear-gradient(to top,#e5c15833,#e5c158);transform-origin:bottom center;transform:translateX(-50%) rotate(0deg);border-radius:2px;z-index:2}
.drum-metronome .circle-marker{position:absolute;top:50%;left:50%;width:13px;height:13px;margin:-6.5px;background:#cbd5e1;border-radius:50%;z-index:4;color:#0f172a}
.drum-metronome .circle-marker.downbeat{background:#e74c3c;color:white}
.drum-metronome .circle-marker.flash{background:#fff;box-shadow:0 0 7px #fff8}
.drum-metronome .circle-marker.downbeat.flash{background:#ff9999;box-shadow:0 0 7px #ff9999}
.drum-metronome .beat-number{position:absolute;top:50%;left:50%;font:700 8px/1 system-ui;white-space:nowrap}
.engine-circle{padding:7px;flex:none}.engine-tempo{display:flex;flex-direction:column;align-items:center;gap:2px;margin-inline:5px;font-size:11px;font-weight:700}.engine-tempo-knob{position:relative;width:48px;height:48px;border:1px solid #8395af;border-radius:50%;background:radial-gradient(circle at 35% 25%,#52677e,#26394c 55%,#111e2c);color:#fff;cursor:ns-resize;touch-action:none;font-size:14px;font-weight:800}.engine-tempo-knob::after{content:"";position:absolute;inset:4px;border-radius:50%;background:linear-gradient(#65e0ce,#65e0ce) center top/3px 8px no-repeat;transform:rotate(var(--angle,-80deg));pointer-events:none}.engine-tempo-knob:focus-visible{outline:2px solid #65e0ce;outline-offset:2px}

.engine-listening-guide:not([hidden]){display:flex;align-items:center;gap:12px;padding:7px 10px;border:1px solid var(--border-color);border-radius:10px;background:var(--card-bg);flex:none}.engine-listening-guide p{flex:1;font-size:12px;line-height:1.5}.engine-listening-buttons{display:flex;gap:4px;flex:none}.engine-listening-buttons .btn{font-size:11px;padding:6px 8px;background:var(--bg-color);color:var(--text-main);border:1px solid var(--border-color)}.engine-listening-buttons [aria-pressed=true]{background:#245780;color:white;border-color:#73b9e8}@media(max-width:800px){.engine-listening-guide:not([hidden]){flex-wrap:wrap;gap:5px}.engine-listening-guide p{flex-basis:100%}}

.engine-meter-control{gap:5px;flex:none}.engine-meter-control>label{font-size:12px;font-weight:700}.engine-meter-control #tsNum{width:44px!important;padding:5px}.engine-meter-control #tsDen{width:48px!important;padding:5px}

.visualizers-wrapper{width:100%;grid-template-columns:repeat(2,minmax(0,1fr));min-width:0}.visualizers-wrapper .staff-container{width:100%;min-width:0;max-width:100%}.notes-track,.beat-group,.note-cell{min-width:0}body>#barsContainer{height:clamp(210px,33vh,310px);min-height:0;overflow:auto;align-items:start;scrollbar-gutter:stable}

body>.engine-inline-settings{display:flex!important;flex:none;gap:6px 12px;padding:7px;margin:0;font-size:12px}body>.engine-inline-settings .control-group{font-size:12px;gap:5px}body>.engine-inline-settings select,body>.engine-inline-settings input:not([type=checkbox]){font-size:12px;padding:4px 6px}body>.engine-inline-settings .btn{font-size:12px;padding:5px 9px}body>.engine-inline-settings #globalSubSelect{max-width:210px}

.engine-metronome-controls{gap:6px;max-width:300px}.engine-metronome-controls>label{font-size:12px!important}.engine-metronome-controls #metronomeSoundType{font-size:12px;padding:5px;margin:0!important;max-width:150px}

.engine-quick-controls{gap:6px 12px}.engine-quick-controls #globalSubSelect{max-width:190px}.engine-quick-controls .btn{font-size:12px;padding:5px 9px}.visualizers-wrapper{flex-grow:1}

.engine-file-actions{display:flex;align-items:center;gap:6px;margin-inline-start:auto;flex:none}.engine-file-actions button{white-space:nowrap}

.engine-euclidean-button{background:#503b67;color:#fff;border-color:#a890bf;font-weight:700;white-space:nowrap}.engine-euclidean-dialog{width:min(620px,calc(100vw - 24px))}.engine-euclidean-dialog h2{font-size:20px;color:#43cdbf;margin-bottom:10px}.engine-euclidean-dialog p{font-size:14px;line-height:1.7;margin:8px 0}.engine-euclidean-fields{display:flex;gap:12px;flex-wrap:wrap;margin:16px 0}.engine-euclidean-fields label{display:flex;flex:1;flex-direction:column;gap:5px;font-size:13px;font-weight:700}.engine-euclidean-fields input,.engine-euclidean-fields select{width:100%;min-width:70px;direction:ltr}.engine-euclidean-preview{display:flex;flex-wrap:wrap;gap:6px;direction:ltr}.engine-euclidean-preview span{display:grid;place-items:center;width:27px;height:27px;background:var(--step-off);border:1px solid var(--border-color);border-radius:50%;font-size:10px}.engine-euclidean-preview .hit{background:#35c7b2;color:#071d24;border-color:#70eddb;font-weight:800}.engine-euclidean-actions{display:flex;justify-content:center;gap:10px;margin-top:16px}

.engine-notation-with-circles{display:flex;direction:ltr;gap:8px;flex:1;min-height:140px;min-width:0}.engine-notation-with-circles>.visualizers-wrapper{flex:1;width:auto;min-width:0}.engine-live-circles{width:146px;flex:none;display:grid;grid-template-rows:repeat(2,minmax(0,1fr));gap:8px}.engine-live-circle{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:0;padding:4px;border:1px solid var(--border-color);border-radius:12px;background:var(--card-bg);color:var(--text-main);cursor:pointer;font-size:12px;font-weight:700}.engine-live-circle svg{width:100%;height:calc(100% - 35px);max-height:150px;min-height:0}.engine-circle-count{font-size:11px;direction:ltr;color:var(--text-muted)}.engine-live-circle circle.current{fill:#fff;stroke:#facc15;stroke-width:3;filter:drop-shadow(0 0 3px #facc15)}
@media(max-width:800px){.engine-live-circles{width:100px}.engine-live-circle{font-size:10px}}

.engine-euclidean-fields label[hidden]{display:none}.engine-euclidean-preview{justify-content:center}.engine-euclidean-preview>svg{width:220px;height:220px;max-height:32vh}

@media(min-width:1000px){
.engine-quick-controls{flex-wrap:nowrap;gap:5px;padding:5px 7px;justify-content:space-between}
.engine-quick-controls .control-group{flex-wrap:nowrap;gap:4px;min-width:0;font-size:11px}
.engine-quick-controls .control-group>label{white-space:nowrap}
.engine-quick-controls select{font-size:11px;padding:4px;min-width:0}
.engine-quick-controls #presetSelect{width:150px;max-width:150px}
.engine-quick-controls #globalSubSelect{width:135px;max-width:135px}
.engine-quick-controls .btn-sm{font-size:10px;padding:3px 4px;white-space:nowrap}
.engine-basic-modes{gap:3px;flex:none}.engine-basic-modes .btn{font-size:11px;padding:5px 7px;white-space:nowrap}
.engine-file-actions{gap:4px;margin-inline-start:0}.engine-file-actions .btn{font-size:11px;padding:5px 7px}
}

/* Let the editor show all rows rather than scrolling inside a fixed-height box. */
body>#barsContainer{height:auto;overflow:visible;scrollbar-gutter:auto;flex:none}
body>#barsContainer .bar-card{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:3px 5px;align-content:start}
body>#barsContainer .bar-card>.bar-header,body>#barsContainer .bar-card>.sound-select-wrapper{grid-column:1/-1}
body>#barsContainer .beat-row{margin:0;min-width:0}
body>#barsContainer .beat-header{flex-wrap:wrap;gap:2px;font-size:10px}
body>#barsContainer .beat-header select{width:100%;min-width:0}
@media(max-height:680px) and (min-width:701px){body>#barsContainer{zoom:.85}.engine-notation-with-circles{min-height:130px}}

.engine-euclidean-help{width:min(780px,calc(100vw - 24px))}.engine-euclidean-help h2{font-size:21px;color:#43cdbf;margin-bottom:14px}.engine-euclidean-help h3{font-size:16px;margin:14px 0 5px;color:#bda2ed}.engine-euclidean-help p{font-size:14px;line-height:1.8;margin:0 0 8px}

body>#barsContainer .bar-card{direction:ltr}body>#barsContainer .bar-card>.beat-row,body>#barsContainer .bar-card>.bar-header,body>#barsContainer .bar-card>.sound-select-wrapper{direction:rtl}

body>#barsContainer .beat-row.engine-beat-current{background:#256d7255;box-shadow:inset 0 0 0 1px #66e2d0}.sub-step.engine-grid-current{background:#e9fff9!important;box-shadow:0 0 8px #57e2c9,inset 0 0 0 2px #20bfa1;transform:scaleY(1.08)}.engine-beat-current>.beat-header>span{color:#73f0d8;font-weight:800}

.engine-circle-kind{font-size:11px;font-weight:700;color:#bda2ed;line-height:1.4}.engine-live-circle svg{height:calc(100% - 50px)}

.engine-live-circles{width:225px}
.engine-live-circle{display:grid;grid-template-columns:minmax(0,1fr) 65px;grid-template-rows:1fr auto auto 1fr;column-gap:4px;padding:5px 7px;direction:ltr}
.engine-live-circle>svg{grid-column:1;grid-row:1/5;width:100%;height:100%;max-height:none;min-height:0}
.engine-live-circle>span:first-child{grid-column:2;grid-row:2;font-size:12px;direction:rtl}
.engine-live-circle>.engine-circle-kind{grid-column:2;grid-row:3;direction:rtl}
.engine-live-circle>.engine-circle-count{grid-column:2;grid-row:4;align-self:start;padding-top:4px}
@media(max-width:1100px){.engine-live-circles{width:190px}.engine-live-circle{grid-template-columns:minmax(0,1fr) 57px}}
@media(max-width:800px){.engine-live-circles{width:150px}.engine-live-circle{grid-template-columns:minmax(0,1fr) 48px;padding:3px;gap:2px}.engine-live-circle>span:first-child{font-size:10px}.engine-circle-kind,.engine-circle-count{font-size:10px}}

body>#barsContainer .beat-row{border:1px solid color-mix(in srgb,var(--beat-color,#82b7ff) 45%,transparent);background:color-mix(in srgb,var(--beat-color,#82b7ff) 9%,var(--card-bg));border-radius:7px}
body>#barsContainer .beat-header>span{color:var(--beat-color,#82b7ff);font-weight:700}
body>#barsContainer .beat-row[data-beat="1"]{border:2px solid #58dbbe;background:color-mix(in srgb,#58dbbe 17%,var(--card-bg))}
body>#barsContainer .beat-row[data-beat="1"] .beat-header>span{font-weight:900;color:#9cffe6;font-size:12px}
body>#barsContainer .beat-row.engine-beat-current{box-shadow:inset 0 0 0 2px var(--beat-color);background:color-mix(in srgb,var(--beat-color) 30%,var(--card-bg))}

.engine-live-circle{grid-template-rows:1fr auto auto auto 1fr}.engine-live-circle>svg{grid-row:1/6}.engine-live-circle>.engine-circle-count{grid-row:4}.engine-circle-edit{grid-column:2;grid-row:5;align-self:start;margin-top:6px;color:#c7acfa;font-size:10px;font-weight:700;direction:rtl}.engine-live-circle:hover{border-color:#b898ec;box-shadow:inset 0 0 0 1px #b898ec}.engine-live-circle:focus-visible{outline:2px solid #c7acfa;outline-offset:2px}

.engine-live-circle{grid-template-columns:minmax(0,1fr) 78px;row-gap:4px;column-gap:7px}
.engine-live-circle>span:first-child{padding-bottom:4px;font-size:13px}
.engine-live-circle>.engine-circle-kind{padding-bottom:3px}
.engine-live-circle>.engine-circle-count{padding-top:2px}
.engine-circle-edit{display:block;background:#146c68;color:#effffb;border:1px solid #64dccc;border-radius:7px;padding:5px 4px;margin-top:10px;font-size:11px;line-height:1.45;box-shadow:0 2px 5px #0003}
@media(max-width:800px){.engine-live-circle{grid-template-columns:minmax(0,1fr) 62px}.engine-circle-edit{font-size:10px;margin-top:6px;padding:4px 2px}}

/* Bound the SVG independently so its intrinsic size cannot expand the text rows. */
.engine-live-circle{position:relative;display:flex;flex-direction:column;justify-content:center;align-items:stretch;padding:6px 7px 6px 139px;gap:3px;overflow:visible}
.engine-live-circle>svg{position:absolute;left:5px;top:50%;transform:translateY(-50%);width:128px;height:calc(100% - 12px);max-height:100%;min-height:0}
.engine-live-circle>span{width:100%;text-align:center;flex:none}
.engine-live-circle>span:first-child{padding:0;font-size:12px;line-height:1.3}
.engine-live-circle>.engine-circle-kind,.engine-live-circle>.engine-circle-count{padding:0;line-height:1.3}
.engine-live-circle>.engine-circle-edit{margin-top:5px;padding:4px 2px;font-size:10px;line-height:1.3;align-self:auto;box-sizing:border-box}
@media(max-width:1100px){.engine-live-circle{padding-left:115px}.engine-live-circle>svg{width:104px}}
@media(max-width:800px){.engine-live-circle{padding-left:83px;padding-right:4px;gap:2px}.engine-live-circle>svg{width:74px;left:3px}.engine-live-circle>span:first-child{font-size:10px}.engine-live-circle>.engine-circle-edit{margin-top:3px;font-size:9px;padding:3px 1px}}

@media(max-height:680px){.engine-live-circle{gap:1px;padding-top:3px;padding-bottom:3px}.engine-live-circle>span:first-child{font-size:10px;line-height:11px}.engine-live-circle>.engine-circle-kind,.engine-live-circle>.engine-circle-count{font-size:10px;line-height:11px}.engine-live-circle>.engine-circle-edit{margin-top:2px;padding:2px 1px;white-space:nowrap;line-height:12px}}

.engine-inline-shape{width:100%;min-width:0;padding:3px 2px;font-size:10px;line-height:1.2;border:1px solid #64dccc;background:#173d46;color:#fff;border-radius:5px;cursor:pointer}.engine-live-circle:has(.engine-inline-shape){gap:2px}.engine-live-circle:has(.engine-inline-shape)>.engine-circle-edit{margin-top:2px;padding:3px 2px}

.engine-note-accent{font-family:EngineBravura!important;font-size:28px!important;font-weight:400!important;line-height:1;text-shadow:none!important}

select.engine-note-values,select.engine-note-values option{font-family:EngineBravura,"Segoe UI",sans-serif!important}select.engine-note-values{line-height:1.4}

.engine-inline-grid,select.engine-note-values{text-align:center;text-align-last:center}.engine-inline-grid option,select.engine-note-values option{text-align:center}

.engine-inline-grid{height:32px;min-height:32px;padding-top:0!important;padding-bottom:0!important;line-height:30px!important;vertical-align:middle}select.engine-note-values{padding-top:0!important;padding-bottom:0!important;min-height:30px;line-height:28px;vertical-align:middle}

.engine-info-button{display:inline-flex;align-items:center;justify-content:center;width:22px;min-width:22px;height:22px;padding:0;border:1px solid #ac91c8;border-radius:7px;background:#503b67;color:#fff;font:700 15px/1 system-ui;cursor:pointer;flex:none}.engine-info-button:hover{background:#70518c}.engine-info-button:focus-visible{outline:2px solid #c9a7ed;outline-offset:2px}.engine-control-help{width:min(570px,calc(100vw - 24px))}.engine-control-help h2{font-size:20px;color:#43cdbf;margin-bottom:12px}.engine-control-help p{font-size:15px;line-height:1.85;margin:0 0 18px}.engine-live-circle>.engine-info-button{position:absolute;left:5px;top:5px;z-index:2}.engine-tempo>.engine-info-button{position:absolute;right:-8px;top:0}.engine-tempo{position:relative}

.engine-tempo-knob{width:40px;height:40px;font-size:12px}.engine-tempo-knob::after{inset:3px;background-size:2px 7px}.engine-tempo{font-size:10px;gap:2px}

.engine-inline-vertices{direction:ltr;text-align:center;height:26px;min-height:26px;line-height:24px;padding:0 2px!important}.engine-live-circle:has(.engine-inline-vertices)>.engine-circle-count{display:none}

body>#barsContainer .bar-card{grid-template-columns:repeat(4,minmax(0,1fr))}body>#barsContainer .beat-header>span{font-size:10px}body>#barsContainer .beat-header select{font-size:10px;padding-inline:1px}body>#barsContainer .sub-step{min-width:0}

.engine-inline-named-shape{height:25px;min-height:25px;font-size:10px;text-align:center;text-align-last:center;padding:1px!important}.engine-live-circle:has(.engine-inline-vertices){gap:2px}.engine-live-circle:has(.engine-inline-vertices)>.engine-inline-vertices{height:23px;min-height:23px;line-height:21px}.engine-live-circle:has(.engine-inline-vertices)>.engine-circle-kind{font-size:10px;line-height:11px}

.engine-live-circle[data-mode=shape]{border-color:#4acdb7;background:linear-gradient(120deg,#133a3b,var(--card-bg) 75%)}
.engine-live-circle[data-mode=shape]>.engine-circle-kind{color:#7ce8d1}
.engine-live-circle[data-mode=shape]>.engine-inline-shape{background:#174e49;border-color:#58cdb8;color:#effffb}
.engine-live-circle[data-mode=grid]{border-color:#6b9fdf;background:linear-gradient(120deg,#1a3154,var(--card-bg) 75%)}
.engine-live-circle[data-mode=grid]>.engine-circle-kind{color:#a2caff}
.engine-live-circle[data-mode=grid]>.engine-inline-grid{background:#244a75;border-color:#7cafe9;color:#f3f8ff}
.engine-live-circle[data-mode=euclidean]{border-color:#ae8bdb}.engine-live-circle[data-mode=euclidean]>.engine-circle-kind{color:#d1b3f4}

.engine-inline-mode{width:100%;min-width:0;height:25px;padding:2px;font-size:11px;text-align:center;text-align-last:center;background:#243249;border:1px solid #8096b3;border-radius:6px;color:#fff}.engine-live-circle[data-mode=shape]>.engine-inline-mode{background:#174e49;border-color:#58cdb8}.engine-live-circle[data-mode=grid]>.engine-inline-mode{background:#244a75;border-color:#7cafe9}.engine-live-circle[data-mode=euclidean]>.engine-inline-mode{background:#503b67;border-color:#ae8bdb}.engine-inline-euclidean{display:flex;gap:3px;width:100%;direction:rtl}.engine-inline-euclidean label{flex:1;min-width:0;font-size:9px}.engine-inline-euclidean input,.engine-inline-euclidean select{width:100%;min-width:0;font-size:10px;padding:2px;height:25px;direction:ltr}.engine-live-circle{cursor:default}.engine-live-circle>.engine-circle-count{font-size:10px}

.engine-euclidean-edit{width:100%;padding:5px 3px;margin:3px 0;border:1px solid #b49bd1;border-radius:7px;background:#503b67;color:#fff;font-size:11px;font-weight:700;cursor:pointer}.engine-euclidean-edit:hover{background:#70518c}.engine-euclidean-edit:focus-visible{outline:2px solid #d1b3f4;outline-offset:2px}

.engine-euclidean-preview{touch-action:none}.engine-euclidean-preview circle[data-step]{cursor:grab;touch-action:none}.engine-euclidean-preview circle[data-step]:active{cursor:grabbing}.engine-euclidean-preview circle[data-step]:focus{outline:none;stroke:#ffe18a;stroke-width:3}.engine-euclidean-drag-hint{color:#94eddd;font-weight:600}

.engine-live-circle [data-live-step]{cursor:grab;touch-action:none;pointer-events:all}.engine-live-circle [data-live-step]:active{cursor:grabbing}.engine-live-circle:has([data-live-step])>svg{touch-action:none}

.engine-fifths-choice{height:23px;min-height:23px;font-size:10px;padding:1px!important;text-align:center;text-align-last:center}.engine-live-circle:has(.engine-fifths-choice){gap:1px;padding-top:3px;padding-bottom:3px}

.engine-live-circle[data-mode=shape]>.engine-fifths-choice[data-sound-mode=fifths]{background:#705121;border-color:#e9bd61;color:#fff1bd;font-weight:700}.engine-live-circle[data-mode=shape]>.engine-fifths-choice[data-sound-mode=rhythm]{background:#244a75;border-color:#83b4eb;color:#edf6ff;font-weight:700}

.engine-live-circles{width:255px}.engine-live-circle{padding-left:164px}.engine-live-circle>svg{width:153px}.engine-inline-named-shape{font-family:"Segoe UI Symbol","Segoe UI",sans-serif!important;font-weight:700}@media(max-width:1100px){.engine-live-circles{width:215px}.engine-live-circle{padding-left:134px}.engine-live-circle>svg{width:123px}}@media(max-width:800px){.engine-live-circles{width:166px}.engine-live-circle{padding-left:94px}.engine-live-circle>svg{width:85px}}

.engine-live-circle>.engine-fifths-choice[data-sound-mode=fifths]{background:#705121;border-color:#e9bd61;color:#fff1bd;font-weight:700}.engine-live-circle>.engine-fifths-choice[data-sound-mode=rhythm]{background:#244a75;border-color:#83b4eb;color:#edf6ff;font-weight:700}

.engine-live-circle>.engine-fifths-choice[data-sound-mode=bass]{background:#5d387c;border-color:#ca9be9;color:#f9ebff;font-weight:700}

.engine-master-volume{margin-inline-start:auto;padding-inline:12px;border-inline-start:1px solid var(--border-color)}.engine-master-volume .engine-tempo-knob{border-color:#63d5bd;background:radial-gradient(circle at 35% 25%,#397b72,#224e49 55%,#142d2b)}

.engine-master-volume{margin-inline-start:0;margin-inline-end:auto;border-inline-start:0;border-inline-end:1px solid var(--border-color)}

.engine-click-volume{flex-direction:row;gap:7px;align-items:center}.engine-click-options{display:flex;flex-direction:column;gap:4px;align-items:center}.engine-click-options label{display:flex;align-items:center;gap:5px;font-size:12px;font-weight:700;cursor:pointer}.engine-click-options #metronomeSoundType{width:88px;max-width:88px;padding:3px 5px;font-size:11px;margin:0!important}.engine-click-options input{accent-color:#49c9b2;width:16px;height:16px}

.engine-meter-control{flex-direction:column;gap:2px}.engine-meter-fraction{flex-direction:column!important;gap:1px!important}.engine-meter-control .engine-meter-fraction #tsNum,.engine-meter-control .engine-meter-fraction #tsDen{width:46px!important;height:25px;padding:1px 4px;line-height:22px;text-align:center;text-align-last:center}.engine-meter-fraction #tsNum{border-radius:6px 6px 2px 2px}.engine-meter-fraction #tsDen{border-radius:2px 2px 6px 6px}

.engine-meter-control{position:relative;align-self:center;align-items:center;justify-content:center;padding-inline:25px;margin:0}.engine-meter-control>label{margin:0;line-height:14px;text-align:center}.engine-meter-control>.engine-info-button{position:absolute;right:0;top:50%;transform:translateY(-50%)}.engine-meter-fraction{align-items:center!important;justify-content:center}.engine-meter-control .engine-meter-fraction #tsNum,.engine-meter-control .engine-meter-fraction #tsDen{margin:0!important;box-sizing:border-box;text-align:center;text-align-last:center;appearance:none;font-family:system-ui;font-size:14px;line-height:23px}

.engine-meter-fraction{width:44px;border:1px solid var(--border-color);border-radius:8px;background:var(--bg-color);overflow:hidden;gap:0!important}
.engine-meter-control .engine-meter-fraction #tsNum,.engine-meter-control .engine-meter-fraction #tsDen{width:42px!important;height:26px;border:0!important;border-radius:0!important;background:transparent!important;padding:0!important;font:700 17px/26px system-ui!important;letter-spacing:0;text-indent:0;direction:ltr}
.engine-meter-control .engine-meter-fraction #tsNum{border-bottom:1px solid var(--border-color)!important;appearance:textfield!important;-moz-appearance:textfield}
.engine-meter-fraction #tsNum::-webkit-inner-spin-button,.engine-meter-fraction #tsNum::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.engine-meter-control>label{font-size:12px;line-height:16px}.engine-meter-control>.engine-info-button{top:calc(50% + 8px)}

.engine-meter-control>.engine-info-button{right:auto;left:0;top:auto;bottom:0;transform:none}

body>#barsContainer .engine-double-editor>.bar-card{position:relative;background:#163a3d55}
body>#barsContainer .engine-double-editor>.bar-card:last-child{background:#37305b66;border-left:4px solid #b59bdf!important;padding-left:10px}
body>#barsContainer .engine-double-editor>.bar-card::before{content:"חלק ראשון";grid-column:1/-1;display:block;text-align:center;font-size:11px;font-weight:800;line-height:18px;color:#91e8d7;border-bottom:1px solid #53c8b566;margin-bottom:3px}
body>#barsContainer .engine-double-editor>.bar-card:last-child::before{content:"חלק שני";color:#dbc3ff;border-bottom-color:#ad88dc88}
html[lang=en] body>#barsContainer .engine-double-editor>.bar-card::before{content:"First half"}html[lang=en] body>#barsContainer .engine-double-editor>.bar-card:last-child::before{content:"Second half"}

/* A lighter, balanced transport row. */
.engine-meter-control .engine-meter-fraction #tsNum,.engine-meter-control .engine-meter-fraction #tsDen{font:500 16px/26px "Segoe UI",system-ui,sans-serif!important;color:var(--text-main)}
.engine-meter-fraction{border-color:#60738b80;background:#14203280}
.engine-meter-control>label{font-weight:600;font-size:12px;letter-spacing:0}
.rhythm-action-row{gap:14px;padding:8px 12px;align-items:center}
.rhythm-action-row #playBtn{min-width:120px;max-width:150px;font-size:15px;padding:8px 20px;box-shadow:none;border-radius:9px}
.rhythm-action-row #engine-global-loop{padding:7px 12px;font-size:13px;border-radius:9px;font-weight:600}
.engine-click-options label{font-size:12px;font-weight:600}.engine-tempo>span{font-weight:600}.engine-tempo-knob{font-weight:600}
@media(max-width:1100px){.rhythm-action-row{gap:9px;padding:7px 9px}}

.engine-meter-stepper{position:absolute;right:5px;top:19px;display:flex;flex-direction:column;gap:1px}
.engine-meter-stepper button{width:18px;height:13px;display:flex;align-items:center;justify-content:center;padding:0;border:1px solid #61758e;border-radius:3px;background:#25384f;color:#f5f9ff;font:12px/1 system-ui;cursor:pointer}
.engine-meter-stepper button:hover{background:#386086}.engine-meter-stepper button:focus-visible{outline:2px solid #87c5f7;outline-offset:1px}
.engine-meter-control .engine-meter-fraction #tsDen{color-scheme:dark;font-size:17px!important;cursor:pointer}
.engine-meter-fraction #tsDen option{font:500 18px/1.8 "Segoe UI",system-ui,sans-serif!important;background:#18283c;color:#fff;padding:8px 12px;text-align:center}

/* Give the existing single-row editor more room by trimming only its gutters. */
body>#barsContainer{width:calc(100% + 16px);margin-inline:-8px;gap:4px}
body[data-rhythm-structure=phrase2bar]>#barsContainer{gap:4px}
body>#barsContainer .engine-double-editor>.bar-card,body>#barsContainer>.bar-card{padding:3px;column-gap:2px}
body>#barsContainer .engine-double-editor>.bar-card:last-child{padding-left:4px}
body>#barsContainer .beat-row{padding:2px}

/* Taller editing cells without changing notation metrics or the row arrangement. */
body>#barsContainer .beat-row{padding-top:5px;padding-bottom:5px}
body>#barsContainer .sub-step{height:30px}
body>#barsContainer .beat-header{margin-bottom:5px}

.rhythm-action-row{justify-content:space-between;gap:16px;padding:7px 12px}
.engine-playback-group,.engine-metronome-group{display:flex;direction:rtl;align-items:center;gap:12px;flex:none}
.engine-playback-group .engine-master-volume{margin:0;padding:0 10px 0 0;border:0}
.engine-playback-group #playBtn{width:112px;min-width:112px;height:37px;padding:6px 12px;font-size:14px}
.engine-playback-group #engine-global-loop{height:34px;padding:5px 10px;font-size:12px}
.engine-metronome-group{gap:13px;padding:2px 8px;border-inline-start:1px solid #61738b55}
.engine-metronome-group .engine-circle{padding:6px}
.engine-metronome-group .engine-meter-control{padding-inline:24px;margin:0;gap:1px}
.engine-metronome-group .engine-meter-fraction{width:38px}
.engine-metronome-group .engine-meter-fraction #tsNum,.engine-metronome-group .engine-meter-fraction #tsDen{width:36px!important;height:23px;font-size:14px!important;line-height:23px!important}
.engine-metronome-group .engine-meter-stepper{top:17px;right:4px}
.engine-metronome-group .engine-meter-control>label{font-size:11px;font-weight:500;line-height:14px}
.engine-metronome-group .engine-click-options #metronomeSoundType{width:82px;max-width:82px;height:27px;padding:2px 4px}
.engine-metronome-group .engine-click-options label{font-size:11px;gap:4px}
.engine-metronome-group .engine-tempo{margin:0}
@media(max-width:900px){.rhythm-action-row{gap:8px;justify-content:center}.engine-playback-group,.engine-metronome-group{gap:8px}.engine-metronome-group{border:0;padding:2px 0}}

.engine-meter-fraction{position:relative}.engine-metronome-group .engine-meter-stepper{right:1px;top:1px;gap:0}.engine-meter-stepper button{width:12px;height:10px;font-size:9px;border:0;background:transparent;color:#9fb4ca;border-radius:2px}.engine-meter-stepper button:hover{background:#385573;color:#fff}.engine-metronome-group .engine-meter-fraction #tsNum{padding-right:10px!important;padding-left:0!important}

.engine-metronome-group .engine-meter-fraction #tsNum,.engine-metronome-group .engine-meter-fraction #tsDen{padding:0!important;text-align:center!important;text-align-last:center!important;text-indent:0}.engine-metronome-group .engine-meter-stepper{right:0;top:1px;pointer-events:none}.engine-meter-stepper button{pointer-events:auto;width:10px}

.engine-meter-stepper button{color:#ffd56a;background:#ffd56a18;font-weight:800}.engine-meter-stepper button:hover{color:#fff4c2;background:#a87b29}

.engine-meter-fraction .engine-meter-stepper button{color:#ffe08a!important;background:#795a23!important;border:1px solid #c69a45!important;opacity:1!important}.engine-meter-fraction .engine-meter-stepper button:hover{color:#fff6d3!important;background:#a47a2c!important}

select.engine-note-values,select.engine-note-values option{font-family:"Segoe UI","Segoe UI Symbol",sans-serif!important}select.engine-note-values option{font-size:12px!important;line-height:1.25!important;padding:3px 5px!important;min-height:0}select.engine-note-values optgroup{font:600 11px/1.25 "Segoe UI",sans-serif!important}

.engine-live-circle[data-mode=shape]>.engine-inline-vertices{width:54px;max-width:54px;align-self:center;height:22px!important;min-height:22px!important;padding:0 2px!important;font-size:12px!important;line-height:20px!important;border-radius:5px;text-align:center}

.engine-note-menu-wrapper{display:block;width:100%;min-width:0}.engine-note-native{display:none!important}.engine-note-select-button{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;height:30px;padding:2px 4px;border:1px solid var(--border-color);border-radius:5px;background:var(--bg-color);color:var(--text-main);cursor:pointer;font:12px/1 "Segoe UI",sans-serif}.engine-menu-note{display:inline-flex;align-items:center;justify-content:center;width:17px;height:23px;overflow:visible;font:25px/0 EngineBravura;flex:none}.engine-menu-value{direction:ltr;white-space:nowrap;font:12px/1 "Segoe UI",sans-serif}.engine-note-popup{position:fixed;z-index:2147483001;width:235px;padding:6px;border:1px solid #8aa6c4;border-radius:10px;background:#17273c;color:#fff;box-shadow:0 8px 28px #0008}.engine-note-popup[hidden]{display:none}.engine-note-popup-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:3px}.engine-note-popup-heading{grid-column:1/-1;font:600 11px/1.4 "Segoe UI",sans-serif;color:#bad0e9;padding:4px 3px 1px}.engine-note-option{display:flex;align-items:center;justify-content:center;gap:10px;height:32px;padding:3px;border:1px solid transparent;border-radius:5px;background:#20364f;color:#fff;cursor:pointer}.engine-note-option:hover,.engine-note-option:focus-visible{background:#345d82;outline:1px solid #8dc8fa}.engine-note-option.selected{border-color:#72cebb;background:#235b59}.engine-note-option:disabled{opacity:.35;cursor:default}.engine-live-circle .engine-note-select-button{background:#244a75;border-color:#83b4eb}.beat-header>.engine-note-menu-wrapper{flex:1 1 100%}

#tsNum{cursor:ns-resize}.engine-note-popup-grid{grid-auto-rows:auto;align-items:start}.engine-note-popup .engine-note-option{min-height:32px;height:32px;margin:0;box-sizing:border-box}

.bar-controls button[onclick^="toggleSolo"],.engine-solo-button{background:#813b48!important;border-color:#d47b8b!important;color:#fff!important;font-weight:700}.bar-controls button[onclick^="toggleSolo"].active,.engine-solo-button.active{background:#d3374c!important;border-color:#ffbdc6!important;box-shadow:0 0 0 1px #ffbdc6}.bar-controls button[onclick^="toggleSolo"]:hover,.engine-solo-button:hover{background:#ae4255!important}

.bar-controls button[onclick^="toggleSolo"],.engine-solo-button{background:#35202a!important;border-color:#7f4654!important;color:#e8a7b4!important;box-shadow:none}.bar-controls button[onclick^="toggleSolo"].active,.engine-solo-button.active{background:#ed2446!important;border-color:#ffd0d8!important;color:#fff!important;box-shadow:0 0 0 1px #ffd0d8,0 0 9px #ef244655}.bar-controls button[onclick^="toggleSolo"]:hover,.engine-solo-button:hover{background:#62313f!important}.bar-controls button[onclick^="toggleSolo"].active:hover,.engine-solo-button.active:hover{background:#ff395a!important}

.engine-menu-note{width:20px;height:26px;overflow:hidden;font-size:0;line-height:0}.engine-menu-note>svg{display:block;width:100%;height:100%;overflow:hidden}.engine-note-option{overflow:hidden}.engine-note-select-button{overflow:hidden}

.engine-menu-note svg text{font-family:EngineBravura!important;font-size:40px!important;font-weight:400!important}

.engine-note-popup .engine-menu-note{width:24px;height:30px}.engine-note-popup .engine-note-option{height:38px;min-height:38px;gap:12px}.engine-note-popup .engine-menu-value{font-size:13px}.engine-menu-note svg text{direction:ltr!important;unicode-bidi:isolate;text-anchor:start}