:root{--bg:#8f9396;--bg-dark:#666b70;--bg-light:#a7adb1;--panel:#86b95b;--panel-dark:#537b32;--panel-light:#9fd36a;--ink:#0f1809;--muted:#1f2e13;--accent:#2f4a19;--accent-dark:#2b4517;--line:#426126;--paper:#d7d2c3;--track-unit-size:34px}*{box-sizing:border-box}html,body,#root{min-height:100%}body{min-height:100vh;color:var(--ink);background:linear-gradient(90deg, #ffffff0d 0 12.5%, transparent 12.5% 25%, #0000000a 25% 37.5%, transparent 37.5% 50%, #ffffff0d 50% 62.5%, transparent 62.5% 75%, #0000000d 75% 87.5%, transparent 87.5% 100%), linear-gradient(0deg, #ffffff0a 0 12.5%, transparent 12.5% 25%, #0000000d 25% 37.5%, transparent 37.5% 50%, #ffffff0a 50% 62.5%, transparent 62.5% 75%, #0000000d 75% 87.5%, transparent 87.5% 100%), linear-gradient(180deg, var(--bg-light), var(--bg-dark));background-repeat:repeat,repeat,no-repeat;background-size:32px 32px,32px 32px,100% 100%;background-attachment:scroll,scroll,fixed;margin:0;font-family:Trebuchet MS,Segoe UI,sans-serif}.hero{text-align:center;padding:1.5rem 1rem .75rem}.hero h1{margin:0;font-size:clamp(1.4rem,3.2vw,2.2rem)}.hero p{max-width:64ch;color:var(--muted);margin:.65rem auto 0}.update-notice{color:#302300;text-align:center;background:#fff4bf;border-block:1px solid #705600;flex-wrap:wrap;justify-content:center;align-items:center;gap:.75rem;padding:.75rem 1rem;display:flex}main{gap:.85rem;width:100%;min-width:0;max-width:none;margin:0;padding:.75rem 1rem 2rem;display:grid}.top-row{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start;gap:.85rem;display:grid}.top-row__left{gap:.85rem;min-width:0;display:grid}@media (width<=900px){.top-row{grid-template-columns:minmax(0,1fr)}}.example-panel__layout{flex-wrap:wrap;align-items:flex-start;gap:1.25rem;display:flex}.example-panel__description{color:var(--ink);flex:220px;margin:0;font-size:1.1rem;line-height:1.55}.example-panel__images{flex:3 400px;grid-template-columns:repeat(2,1fr);gap:.75rem;display:grid}.example-panel__figure{flex-direction:column;align-items:center;gap:.35rem;min-width:0;margin:0;display:flex}.example-panel__figure img{border:2px solid var(--line);object-fit:cover;border-radius:6px;width:100%;max-height:200px;box-shadow:0 2px 8px #00000059}.example-panel__figure figcaption{color:var(--ink);text-align:center;font-size:.95rem}.site-footer{text-align:center;color:#222;padding:0 1rem 1.5rem}.site-footer p{margin:0;font-size:1.05rem}.site-footer a{color:#111;font-weight:700}.panel{background:var(--panel);border:1px solid var(--line);border-radius:6px;min-width:0;padding:.85rem;box-shadow:inset 0 4px #ffffff2e,inset 0 -5px #2a461659,0 8px #363a3d59}.panel h2{margin:0 0 .7rem;font-size:1.2rem}.panel h2.panel-heading{font-size:inherit;margin:0}.panel-title{text-align:left;font-size:1.2rem;font-weight:700}.panel-header{justify-content:space-between;align-items:center;gap:.75rem;display:flex}.panel-header h2{margin-bottom:0}.panel-header-toggle{background:var(--panel-light);width:calc(100% + 1.7rem);color:var(--ink);box-shadow:none;border:0;cursor:pointer;border-bottom:1px solid #2a461659;border-radius:6px 6px 0 0;margin:-.85rem -.85rem 0;padding:.8rem .85rem .75rem}.panel-header-toggle:hover:not([aria-disabled=true]){background:#aedd78}.panel-header-toggle[aria-disabled=true]{cursor:default}.panel-header-meta{color:var(--muted);font-size:1rem}.panel-body{margin:.75rem -.1rem -.1rem;padding-top:.05rem}.control-row{flex-wrap:wrap;align-items:center;gap:.6rem;display:flex}.option-row{color:var(--ink);align-items:center;gap:.5rem;margin-top:.7rem;font-size:1.05rem;display:inline-flex}.option-row input{margin:0}.option-row-stacked{flex-wrap:wrap;display:flex}.option-row select{border:1px solid var(--line);background:var(--paper);color:var(--ink);border-radius:4px;padding:.38rem .5rem}.playback-controls{flex-wrap:wrap;align-items:end;gap:.85rem;margin-bottom:.35rem;display:flex}.playback-actions{flex-wrap:wrap;gap:.45rem;display:inline-flex}.playback-volume{min-height:2.75rem;color:var(--ink);align-items:center;gap:.5rem;display:inline-flex}.playback-volume input[type=range]{width:7rem;height:2.75rem;accent-color:var(--accent);margin:0}.playback-volume-value{min-width:2.5rem;color:var(--muted);text-align:right;font-variant-numeric:tabular-nums}.icon-btn{width:2.2rem;height:2.2rem;min-width:unset;border-radius:4px;justify-content:center;align-items:center;padding:0;display:inline-flex}.icon-btn svg{fill:currentColor;width:1rem;height:1rem;display:block}.playback-meta{color:var(--muted);padding-bottom:.15rem;font-size:1rem}input[type=file]{flex:1;min-width:220px}input[type=text]{border:1px solid var(--line);background:var(--paper);min-width:180px;color:var(--ink);border-radius:4px;padding:.52rem .6rem}button{background:var(--accent);color:#fff;cursor:pointer;box-shadow:inset 0 2px 0 #ffffff24, 0 3px 0 var(--accent-dark);border:0;border-radius:4px;justify-content:center;align-items:center;gap:.45rem;padding:.55rem .9rem;font-weight:700;display:inline-flex}.button-link{background:var(--accent);color:#fff;box-shadow:inset 0 2px 0 #ffffff24, 0 3px 0 var(--accent-dark);border-radius:4px;align-items:center;padding:.55rem .9rem;font-weight:700;text-decoration:none;display:inline-flex}button:disabled{opacity:.5;cursor:not-allowed}#status{color:var(--muted);margin:.65rem 0 0}.status-busy{align-items:center;gap:.55rem;display:inline-flex}.spinner{border:2px solid #7a9a2d40;border-top-color:var(--accent);border-radius:50%;flex:none;width:.95rem;height:.95rem;animation:.8s linear infinite spin}.spinner-inline{border-color:#fff #ffffff59 #ffffff59;width:.85rem;height:.85rem}.downloads{gap:.5rem;display:grid}.output-summary{margin-top:.55rem}.download-row{background:#deebc647;border:2px solid #2a461659;border-radius:4px;justify-content:space-between;align-items:center;gap:.75rem;padding:.5rem .6rem;display:flex}.download-row .meta,.meta{color:var(--muted);font-size:1.05rem}.viz-toggles{flex-wrap:wrap;gap:.5rem 1rem;margin-bottom:.5rem;display:flex}.viz-toggle-label{cursor:pointer;-webkit-user-select:none;user-select:none;align-items:center;gap:.35rem;font-size:1rem;display:flex}.hint{color:var(--muted);margin:0 0 .6rem;font-size:1.05rem}.drag-scroll-area{cursor:grab;touch-action:pan-y pinch-zoom}.drag-scroll-area.dragging{cursor:grabbing;-webkit-user-select:none;user-select:none}.track-area{align-items:flex-start;gap:.5rem;display:flex}.track-headers{gap:var(--lane-gap,6px);flex-direction:column;flex:none;width:clamp(8rem,18%,12rem);display:flex}.track-header{box-sizing:border-box;background:#9dc378;border:1px solid #426126a6;border-radius:4px;flex-direction:row;align-items:center;gap:.5rem;padding:0 .5rem;font-weight:700;transition:opacity .14s,filter .14s;display:flex;overflow:hidden}.track-header-text{flex-direction:column;min-width:0;line-height:1.2;display:flex}.track-header-text>span{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.track-canvas-wrap{flex:1 1 0;min-width:0;position:relative;overflow:hidden}.track-canvas{cursor:grab;touch-action:pan-y pinch-zoom;width:100%;height:100%;display:block}.track-canvas:active{cursor:grabbing}.canvas-tooltip{color:#f7f3dd;white-space:nowrap;pointer-events:none;z-index:20;background:#1a210ef5;border:1px solid #222c15e6;border-radius:4px;min-width:max-content;padding:.35rem .45rem;font-size:.72rem;line-height:1.35;position:absolute;transform:translate(-50%,calc(-100% - 8px))}.canvas-tooltip-below{transform:translate(-50%,8px)}.track-row-dimmed{opacity:.45;filter:saturate(.78)}.playhead{width:18px;box-shadow:none;z-index:15;cursor:ew-resize;touch-action:none;background:0 0;border:0;padding:0;position:absolute;top:0;bottom:0;transform:translate(-50%)}.playhead-line{background:#f4f2e9;width:2px;position:absolute;top:0;bottom:0;left:50%;transform:translate(-50%);box-shadow:0 0 0 1px #3d5f22cc}.playhead-head{background:#f4f2e9;border:2px solid #3d5f22e6;border-radius:50%;width:14px;height:14px;position:absolute;top:0;left:50%;transform:translate(-50%,-15%)}.playhead:focus-visible,.playhead-dragging{outline:none}.playhead:focus-visible .playhead-line,.playhead-dragging .playhead-line{background:#fffbe6}.track-index{font-size:.88rem}.track-count{color:var(--muted);font-size:.72rem}.track-mute-btn{width:1.4rem;height:1.4rem;min-width:unset;flex-shrink:0}@keyframes spin{to{transform:rotate(360deg)}}.schematic-controls{flex-wrap:wrap;align-items:center;gap:.85rem;margin-bottom:.35rem;display:flex}.schematic-tutorial{background:#00000014;border:1px solid #2a461640;border-radius:6px;margin:.75rem 0 .5rem}.schematic-tutorial-toggle{cursor:pointer;width:100%;color:var(--muted);text-align:left;background:0 0;border:none;justify-content:space-between;align-items:center;gap:.5rem;padding:.5rem .75rem;font-size:.82rem;font-weight:600;display:flex}.schematic-tutorial-toggle:hover{color:var(--fg)}.schematic-tutorial-toggle-arrow{flex-shrink:0;font-size:.65rem}.schematic-tutorial-body{padding:0 .75rem .75rem}.schematic-tutorial-note{color:var(--muted);margin:0 0 .75rem;font-size:.82rem;line-height:1.5}.schematic-tutorial-images{flex-wrap:wrap;gap:.75rem;display:flex}.schematic-tutorial-figure{flex-direction:column;flex:240px;align-items:center;gap:.3rem;margin:0;display:flex}.schematic-tutorial-figure img{border:1px solid #2a46164d;border-radius:4px;max-width:100%;display:block}.schematic-tutorial-figure figcaption{color:var(--muted);text-align:center;font-size:.73rem}.schematic-legend{flex-wrap:wrap;gap:.4rem .85rem;margin:.5rem 0 .65rem;display:flex}.schematic-legend-item{color:var(--muted);align-items:center;gap:.3rem;font-size:.78rem;display:inline-flex}.schematic-legend-swatch{border:1px solid #2a461673;border-radius:2px;flex-shrink:0;width:12px;height:12px;display:inline-block}.schematic-canvas-wrap{width:100%;position:relative;overflow:hidden}.schematic-canvas{cursor:grab;touch-action:pan-y pinch-zoom;display:block}.schematic-canvas:active{cursor:grabbing}.schematic-indicator{width:18px;box-shadow:none;z-index:15;cursor:ew-resize;touch-action:none;background:0 0;border:0;padding:0;position:absolute;top:0;bottom:0;transform:translate(-50%)}.schematic-indicator-line{background:#f0c040;width:2px;position:absolute;top:0;bottom:0;left:50%;transform:translate(-50%);box-shadow:0 0 0 1px #8c5a00cc}.schematic-indicator-head{background:#f0c040;border:2px solid #8c5a00e6;border-radius:50%;width:14px;height:14px;position:absolute;top:0;left:50%;transform:translate(-50%,-10%)}.schematic-indicator:focus-visible .schematic-indicator-line{background:#fffbe6}.schematic-h-indicator{height:18px;box-shadow:none;z-index:14;cursor:ns-resize;touch-action:none;background:0 0;border:0;padding:0;position:absolute;left:0;right:0;transform:translateY(-50%)}.schematic-h-indicator-line{background:#40a0f0;height:2px;position:absolute;top:50%;left:0;right:0;transform:translateY(-50%);box-shadow:0 0 0 1px #003c8c80}.schematic-h-indicator-head{background:#40a0f0;border:2px solid #003c8ccc;border-radius:50%;width:14px;height:14px;position:absolute;top:50%;left:0;transform:translate(-10%,-50%)}.schematic-h-indicator:focus-visible .schematic-h-indicator-line{background:#e6f3ff}.schematic-totals{border-left:3px solid var(--panel-dark);color:var(--ink);background:#00000014;border-radius:5px;flex-direction:column;gap:.6rem;margin:.5rem 0 .75rem;padding:.55rem .75rem;font-size:.8rem;display:flex}.schematic-totals-section{flex-direction:column;gap:.3rem;display:flex}.schematic-totals-heading{text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin:0;font-size:.72rem;font-weight:700}.schematic-totals-chips{flex-wrap:wrap;gap:.35rem;display:flex}.schematic-dimensions{flex-wrap:wrap;align-items:center;gap:.4rem;margin-top:.2rem;display:flex}.schematic-dim-chip{background:#ffffff47;border:1px solid #2a461633;border-radius:4px;align-items:baseline;gap:.25rem;padding:3px 8px;display:inline-flex}.schematic-dim-axis{color:var(--muted);text-transform:uppercase;font-family:monospace;font-size:.65rem;font-weight:700}.schematic-dim-value{color:var(--ink);font-family:monospace;font-size:1rem;font-weight:700}.schematic-dim-unit{color:var(--muted);font-size:.7rem}.schematic-dim-sep{color:var(--muted);font-size:.85rem;font-weight:300}.totals-chip{background:#ffffff47;border:1px solid #2a461633;border-radius:4px;align-items:center;gap:.3rem;padding:3px 7px 3px 4px;display:inline-flex}.totals-chip svg{image-rendering:pixelated;border-radius:2px;flex-shrink:0}.totals-chip-info{flex-direction:column;line-height:1.2;display:flex}.totals-chip-count{font-size:.82rem;font-weight:700}.totals-chip-label{color:var(--muted);font-size:.75rem}.totals-chip-stacks{color:var(--accent);font-size:.9rem;font-style:italic}@media (width<=700px){:root{--track-unit-size:30px}.playback-controls{align-items:stretch}.note-meta{max-width:calc(var(--track-unit-size) + 10px)}}.example-panel__zoom{width:100%;box-shadow:none;cursor:zoom-in;background:0 0;border:0;padding:0;display:block}.lightbox{z-index:1000;cursor:zoom-out;background:#000000e0;flex-direction:column;justify-content:center;align-items:center;gap:.75rem;padding:1.5rem;display:flex;position:fixed;inset:0}.lightbox img{object-fit:contain;border-radius:6px;max-width:100%;max-height:calc(100vh - 5rem)}.lightbox p{color:#fff;margin:0;font-size:1.05rem}.lightbox__close{border-radius:50%;width:2.5rem;height:2.5rem;padding:0;font-size:1.8rem;line-height:1;position:absolute;top:.75rem;right:1rem}body{line-height:1.55}p{margin-block:0 .85em}.skip-link{z-index:2000;color:#000;background:#fff;border:3px solid #000;border-radius:0 0 6px 6px;padding:.75rem 1rem;font-weight:700;position:absolute;top:0;left:.5rem;transform:translateY(-120%)}.skip-link:focus{transform:translateY(0)}main:focus{outline:none}:focus-visible{outline-offset:2px;outline:3px solid #fff;box-shadow:0 0 0 6px #000}input:focus-visible,select:focus-visible,textarea:focus-visible,canvas:focus-visible{outline-offset:1px;outline:3px solid #fff;box-shadow:0 0 0 5px #000}button,.button-link,select,input[type=text]{min-height:2.75rem;font-size:1rem}.icon-btn{min-width:2.75rem;min-height:2.75rem}.track-mute-btn{min-width:2rem;min-height:2rem}input[type=checkbox]{width:1.25rem;height:1.25rem}.viz-toggle-label,.option-row{min-height:2.75rem}button:disabled{opacity:1;color:#e9edde;background:#55603f;border:2px dashed #e9edde}.site-footer,.site-footer p{color:#111;font-size:1rem;line-height:1.6}.site-footer a,.hero a,.panel a:not(.button-link){color:#0b2a6b;text-underline-offset:3px;text-decoration:underline}.hero p{color:#111;font-size:1.1rem}.panel-header-meta{font-weight:600}.lightbox__close{border:3px solid #fff}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.001ms!important;animation-duration:.001ms!important;animation-iteration-count:1!important}}@media (forced-colors:active){.panel,.panel-header-toggle,button,.button-link{border:2px solid buttontext}}:root{--mc-stone:#636363;--mc-stone-hover:#4f5f8f;--mc-bevel-light:#c6c6c6;--mc-bevel-dark:#2b2b2b}body{background-color:#4a3624;background-image:linear-gradient(#1c1610b8,#1c1610b8),url(/midi-to-minecraft/assets/dirt.svg);background-position:0 0,0 0;background-repeat:repeat,repeat;background-size:auto,128px 128px;background-attachment:scroll;background-origin:padding-box,padding-box;background-clip:border-box,border-box;font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}button,input,select,textarea{font-family:inherit}.hero h1,.panel-title{font-family:Courier New,Lucida Console,ui-monospace,monospace}.hero{background:url(/midi-to-minecraft/assets/grass-strip.svg) 0 0/64px 24px repeat-x,#0000008c;border-bottom:4px solid #1b1b1b;margin:0 0 .5rem;padding:2.5rem 1rem 1.25rem}.hero h1{color:#fff;letter-spacing:.04em;text-transform:uppercase;text-shadow:3px 3px #3f3f3f;font-size:clamp(1.6rem,4vw,2.6rem)}.hero p{color:#f2f2f2}.panel{background:var(--panel);border:4px solid #1b1b1b;border-radius:0;box-shadow:inset 4px 4px #ffffff47,inset -4px -4px #00000047,6px 6px #00000073}.panel-header-toggle{background:var(--panel-light);text-transform:uppercase;letter-spacing:.03em;text-shadow:none;border-bottom:4px solid #1b1b1b;border-radius:0}.panel-title{text-shadow:1px 1px #ffffff59}button,.button-link{background:var(--mc-stone);color:#fff;text-shadow:2px 2px #3f3f3f;box-shadow:inset 2px 2px 0 var(--mc-bevel-light), inset -2px -2px 0 var(--mc-bevel-dark);border:2px solid #000;border-radius:0}button:hover:not(:disabled),.button-link:hover{background:var(--mc-stone-hover)}button:active:not(:disabled),.button-link:active{box-shadow:inset 2px 2px 0 var(--mc-bevel-dark), inset -2px -2px 0 var(--mc-bevel-light)}input[type=text],select,input[type=file]{color:#fff;background:#1b1b1b;border:2px solid #000;border-radius:0;font-family:inherit;box-shadow:inset 2px 2px #000,inset -2px -2px #5a5a5a}input[type=file]::file-selector-button{background:var(--mc-stone);color:#fff;font:inherit;cursor:pointer;box-shadow:inset 2px 2px 0 var(--mc-bevel-light), inset -2px -2px 0 var(--mc-bevel-dark);border:2px solid #000;border-radius:0;margin-right:.75rem;padding:.4rem .8rem;font-weight:700}input[type=checkbox]{accent-color:#3d7a1f}.example-panel__figure img,.lightbox img{image-rendering:auto;border:3px solid #1b1b1b;border-radius:0}.site-footer{background:#0009;border-top:4px solid #1b1b1b;margin-top:1rem;padding:1.25rem 1rem 1.5rem}.site-footer,.site-footer p{color:#f2f2f2}.site-footer a{color:#9fe0ff}.skip-link{border-radius:0}.panel-header-static{cursor:default;display:flex}.schematic-info-row{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start;gap:.85rem;margin:.5rem 0 .75rem;display:grid}.schematic-info-row>*{min-width:0;margin:0}.schematic-tutorial{padding:.55rem .75rem .75rem}.schematic-tutorial .schematic-tutorial-body{padding:0}.schematic-tutorial-note{color:var(--ink);font-size:1rem}.schematic-tutorial-figure figcaption{color:var(--ink);font-size:.95rem}@media (width<=900px){.schematic-info-row{grid-template-columns:minmax(0,1fr)}}.schematic-tutorial .schematic-tutorial-figure{flex:180px}.mono-value{font-variant-numeric:tabular-nums;font-family:Courier New,Lucida Console,ui-monospace,monospace}.output-exports{gap:.6rem;margin-top:.75rem;display:grid}.output-export-box{background:#deebc633;border:2px solid #2a461659;border-radius:4px;gap:.55rem;padding:.75rem;display:grid}.output-export-box h3{color:var(--ink);margin:0;font-size:1.05rem}.output-export-row,.output-export-buttons{flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:8px;display:flex}.output-export-buttons{flex:auto}.output-export-all{margin-top:.75rem}.function-preview-backdrop{z-index:1100;background:#000000b3;place-items:center;padding:1rem;display:grid;position:fixed;inset:0}.function-preview{border:3px solid var(--ink);background:var(--panel);border-radius:6px;grid-template-rows:auto minmax(0,1fr) auto;width:min(900px,100%);max-height:min(85vh,900px);padding:1rem;display:grid;box-shadow:0 12px 40px #00000073}.function-preview__header,.function-preview__footer{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.75rem;display:flex}.function-preview__header h2,.function-preview__footer p{margin:0}.function-preview__header h2{overflow-wrap:anywhere;font-size:1.1rem}.minecraft-function-options{flex-wrap:wrap;gap:.75rem;display:flex}.minecraft-function-options .option-row{flex:12rem}.function-preview__content{min-height:7rem;max-height:45vh;color:var(--ink);white-space:pre;background:#00000014;border:1px solid #2a461673;margin:1.25rem 0 .75rem;padding:.75rem;font:.9rem/1.45 ui-monospace,SFMono-Regular,Consolas,monospace;overflow:auto}.function-preview__footer p{color:var(--muted)}.spreadsheet-export-modal{gap:.75rem}.spreadsheet-format-options{border:1px solid #2a461673;flex-wrap:wrap;gap:.5rem 1rem;margin:0;padding:.6rem .75rem .75rem;display:flex}.spreadsheet-format-options legend{padding:0 .25rem;font-weight:600}.spreadsheet-format-options legend span{color:var(--muted);font-size:.9rem;font-weight:400}.spreadsheet-format-options label{cursor:pointer;align-items:center;gap:.4rem;display:inline-flex}