main:has(.playground-root) .content-panel:first-child,main:has(.playground-root) footer{display:none}main:has(.playground-root) .content-panel:last-child,main:has(.playground-root){padding:0}main:has(.playground-root) .sl-container{max-width:none}.playground-root:where(.astro-gj4jbprh){height:calc(100dvh - var(--sl-nav-height));flex-direction:column;min-height:26rem;display:flex;container:playground/inline-size}.page-bar:where(.astro-gj4jbprh){border-bottom:1px solid var(--sl-color-hairline);flex-wrap:wrap;flex:none;align-items:baseline;gap:.75rem;padding:.4rem 1rem;display:flex}.page-bar:where(.astro-gj4jbprh) h1:where(.astro-gj4jbprh){margin:0;font-size:1rem;font-weight:600}.page-bar:where(.astro-gj4jbprh) .caption:where(.astro-gj4jbprh){color:var(--sl-color-gray-3);margin:0;font-size:.8rem}.toolbar:where(.astro-gj4jbprh){border-bottom:1px solid var(--sl-color-hairline);flex-wrap:wrap;flex:none;justify-content:space-between;align-items:center;gap:.5rem;padding:.5rem 1rem;display:flex}.toolbar-left:where(.astro-gj4jbprh),.toolbar-right:where(.astro-gj4jbprh){flex-wrap:wrap;align-items:center;gap:.5rem;display:flex}.toolbar:where(.astro-gj4jbprh) select:where(.astro-gj4jbprh){font:inherit;padding:.25rem .5rem}.toolbar-button:where(.astro-gj4jbprh){font:inherit;border:1px solid var(--sl-color-hairline);color:var(--sl-color-text);cursor:pointer;background:0 0;border-radius:.25rem;padding:.25rem .75rem}.toolbar-button:where(.astro-gj4jbprh):hover,.toolbar-button:where(.astro-gj4jbprh)[aria-expanded=true]{border-color:var(--sl-color-text-accent);color:var(--sl-color-text-accent)}.file-status:where(.astro-gj4jbprh){color:var(--sl-color-gray-3,#888);font-size:.85rem}.segmented-switch:where(.astro-gj4jbprh){border:1px solid var(--sl-color-hairline);border-radius:.25rem;display:flex;overflow:hidden}.segmented-switch-button:where(.astro-gj4jbprh){font:inherit;color:var(--sl-color-text);cursor:pointer;background:0 0;border:none;padding:.25rem .75rem}.segmented-switch-button:where(.astro-gj4jbprh)+.segmented-switch-button:where(.astro-gj4jbprh){border-left:1px solid var(--sl-color-hairline)}.segmented-switch-button:where(.astro-gj4jbprh):hover{color:var(--sl-color-text-accent)}.segmented-switch-button:where(.astro-gj4jbprh)[aria-pressed=true]{background:var(--sl-color-gray-6,#80808026);color:var(--sl-color-text-accent);font-weight:600}.toolbar-export:where(.astro-gj4jbprh){position:relative}.toolbar-export:where(.astro-gj4jbprh) summary:where(.astro-gj4jbprh){cursor:pointer;font:inherit;border:1px solid var(--sl-color-hairline);border-radius:.25rem;padding:.25rem .75rem;list-style:none}.toolbar-export:where(.astro-gj4jbprh) summary:where(.astro-gj4jbprh)::-webkit-details-marker{display:none}.toolbar-export:where(.astro-gj4jbprh) summary:where(.astro-gj4jbprh):hover{border-color:var(--sl-color-text-accent)}.export-panel:where(.astro-gj4jbprh){z-index:20;background:var(--sl-color-bg);border:1px solid var(--sl-color-hairline);border-radius:.25rem;flex-direction:column;gap:.25rem;min-width:10rem;padding:.5rem;display:flex;position:absolute;top:calc(100% + .25rem);right:0;box-shadow:0 4px 12px #00000026}.export-panel:where(.astro-gj4jbprh) button:where(.astro-gj4jbprh){font:inherit;text-align:left;color:var(--sl-color-text);cursor:pointer;background:0 0;border:none;border-radius:.25rem;padding:.35rem .5rem}.export-panel:where(.astro-gj4jbprh) button:where(.astro-gj4jbprh):hover:not(:disabled){background:var(--sl-color-gray-6,#80808026);color:var(--sl-color-text-accent)}.export-panel:where(.astro-gj4jbprh) button:where(.astro-gj4jbprh):disabled{opacity:.5;cursor:not-allowed}.export-panel:where(.astro-gj4jbprh) :where(.astro-gj4jbprh)[data-view]{display:none}.export-panel:where(.astro-gj4jbprh)[data-active-view=thaimusicxml] :where(.astro-gj4jbprh)[data-view=thaimusicxml],.export-panel:where(.astro-gj4jbprh)[data-active-view=musicxml] :where(.astro-gj4jbprh)[data-view=musicxml]{display:block}.split:where(.astro-gj4jbprh){flex-direction:row;flex:auto;min-height:0;display:flex}.pane:where(.astro-gj4jbprh){flex-grow:1;flex-basis:0;min-width:0;min-height:0;overflow:auto}.editor-pane:where(.astro-gj4jbprh){position:relative;overflow:hidden}.preview-pane:where(.astro-gj4jbprh){background:#fff;padding:.75rem}#thaimusicxml-view:where(.astro-gj4jbprh) svg{width:100%;height:auto;margin-bottom:.75rem;display:block}#musicxml-view:where(.astro-gj4jbprh){min-height:100%}#musicxml-frame:where(.astro-gj4jbprh){border:0;width:100%;display:block}.divider:where(.astro-gj4jbprh){background:var(--sl-color-hairline);cursor:col-resize;touch-action:none;flex:none;width:6px}.divider:where(.astro-gj4jbprh):hover,.divider:where(.astro-gj4jbprh):active{background:var(--sl-color-text-accent)}@container playground (width<=880px){.split:where(.astro-gj4jbprh){flex-direction:column}.divider:where(.astro-gj4jbprh){cursor:row-resize;width:auto;height:6px}}.status-bar:where(.astro-gj4jbprh){flex-direction:column;flex:none;padding:0 1rem;display:none}.status-bar:where(.astro-gj4jbprh):has(.status:not(:empty)),.status-bar:where(.astro-gj4jbprh):has(.warnings-toggle:not([hidden])){display:flex}.status-row:where(.astro-gj4jbprh){justify-content:space-between;align-items:baseline;gap:.75rem;display:flex}.status:where(.astro-gj4jbprh){color:var(--sl-color-red,#c53030);white-space:pre-wrap;font-family:var(--__sl-font-mono,monospace);flex:auto;margin:0;padding:.25rem 0;font-size:.85rem}.settings-overlay:where(.astro-gj4jbprh){z-index:10;background:var(--sl-color-bg);display:none;position:absolute;inset:0}.settings-overlay:where(.astro-gj4jbprh):not([hidden]){flex-direction:column;display:flex}.settings-header:where(.astro-gj4jbprh){flex-wrap:wrap;flex:none;justify-content:space-between;align-items:center;gap:.5rem;padding:.5rem .5rem 0;display:flex}.settings-header-spacer:where(.astro-gj4jbprh){width:2rem}.settings-close:where(.astro-gj4jbprh){border:1px solid var(--sl-color-hairline);background:var(--sl-color-bg);width:2rem;height:2rem;color:var(--sl-color-text);cursor:pointer;border-radius:50%;font-size:.9rem;line-height:1}.settings-close:where(.astro-gj4jbprh):hover{border-color:var(--sl-color-text-accent);color:var(--sl-color-text-accent)}.settings-scroll:where(.astro-gj4jbprh){flex:auto;min-height:0;overflow-y:auto;container:settingspane/inline-size}.settings-body:where(.astro-gj4jbprh){flex-direction:column;gap:.75rem;padding:.5rem 1rem 1rem;display:flex}.settings-nav:where(.astro-gj4jbprh){flex-direction:column;gap:.125rem;display:flex}.settings-nav-tier{text-transform:uppercase;letter-spacing:.03em;color:var(--sl-color-gray-3);margin:.5rem 0 .125rem;font-size:.75rem}.settings-nav-tier:first-child{margin-top:0}.settings-nav:where(.astro-gj4jbprh) button{font:inherit;text-align:left;color:var(--sl-color-text);cursor:pointer;background:0 0;border:none;border-radius:.25rem;padding:.3rem .5rem}.settings-nav:where(.astro-gj4jbprh) button:hover{background:var(--sl-color-gray-6,#80808026)}.settings-nav:where(.astro-gj4jbprh) button[aria-current=true]{background:var(--sl-color-gray-6,#80808026);color:var(--sl-color-text-accent);font-weight:600}.settings-reset:where(.astro-gj4jbprh){font:inherit;border:1px solid var(--sl-color-hairline);color:var(--sl-color-text);cursor:pointer;background:0 0;border-radius:.25rem;align-self:flex-start;padding:.25rem .75rem}.settings-reset:where(.astro-gj4jbprh):hover{border-color:var(--sl-color-text-accent);color:var(--sl-color-text-accent)}.settings-panel:where(.astro-gj4jbprh){flex-direction:column;gap:.75rem;min-width:0;display:flex}.settings-grid:where(.astro-gj4jbprh){grid-template-columns:minmax(8rem,13rem) minmax(6rem,1fr);align-items:center;gap:.5rem .75rem;display:grid}@container settingspane (width>=640px){.settings-body:where(.astro-gj4jbprh){flex-direction:row}.settings-nav:where(.astro-gj4jbprh){flex:none;width:12rem}.settings-panel:where(.astro-gj4jbprh){flex:auto}}@container settingspane (width>=900px){.settings-grid:where(.astro-gj4jbprh){grid-template-columns:repeat(2,minmax(8rem,13rem) minmax(6rem,1fr));column-gap:1.5rem}}@container settingspane (width>=1300px){.settings-grid:where(.astro-gj4jbprh){grid-template-columns:repeat(3,minmax(8rem,13rem) minmax(6rem,1fr))}}.settings-grid:where(.astro-gj4jbprh) select,.settings-grid:where(.astro-gj4jbprh) input[type=number],.settings-grid:where(.astro-gj4jbprh) input[type=text]{font:inherit;width:100%;max-width:12rem;padding:.25rem .5rem}.settings-grid:where(.astro-gj4jbprh) input[type=checkbox]{justify-self:start}.settings-grid:where(.astro-gj4jbprh) input[type=color]{width:3rem;height:1.75rem;padding:0}.settings-grid:where(.astro-gj4jbprh) .settings-note{color:var(--sl-color-gray-3);grid-column:1/-1;margin:.25rem 0 0;font-size:.8rem}.warnings-toggle:where(.astro-gj4jbprh){font:inherit;color:var(--sl-color-orange,#b7791f);cursor:pointer;background:0 0;border:none;flex:none;padding:.25rem 0;font-size:.85rem;text-decoration:underline}.warnings-list:where(.astro-gj4jbprh){color:var(--sl-color-orange,#b7791f);margin:0 0 .5rem;padding-left:1.25rem;font-size:.8rem}.warnings-group-label:where(.astro-gj4jbprh){margin-left:-1.25rem;font-weight:600;list-style:none}.warnings-group-label:where(.astro-gj4jbprh):not(:first-child){margin-top:.4rem}.status-bar:where(.astro-gj4jbprh):not(.open) .warnings-list:where(.astro-gj4jbprh){display:none}