.mx-root{display:flex;flex-direction:column;min-height:100dvh;background:#f4f5f7;color:#1f2430}.mx-header{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px var(--mx-gap);padding:10px var(--mx-gutter);background:#fff;border-bottom:1px solid #d8dae0}.mx-header h1{margin:0;font-size:20px;font-weight:600;color:#0f6e56}.mx-header .mx-sub{font-size:14px;font-weight:400;color:#5f6470}.mx-wrap{flex:1;display:flex;flex-direction:column;gap:var(--mx-gap);width:100%;max-width:1100px;margin:0 auto;padding:var(--mx-gutter);padding-bottom:calc(var(--mx-gutter) + var(--mx-safe-b))}@media (min-width:768px){.mx-header{padding:12px var(--mx-gutter)}.mx-header h1{font-size:24px}}.mx-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:8px}.mx-toolbar--scroll{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:thin;padding-bottom:2px}.mx-toolbar--scroll>*{flex:none}.mx-toolbar .mx-label{font-size:15px;color:#5f6470}.mx-btn{display:inline-flex;align-items:center;justify-content:center;min-height:var(--mx-tap);min-width:var(--mx-tap);padding:8px 14px;font:inherit;font-size:16px;color:#1f2430;background:#fff;border:1.5px solid #d8dae0;border-radius:10px;cursor:pointer;transition:transform .05s,background .12s}.mx-btn:hover{background:#eef0f3}.mx-btn:active{transform:scale(.97)}.mx-btn:focus-visible{outline:2px solid #185fa5;outline-offset:2px}.mx-btn.mx-on{color:#185fa5;background:#dceaf9;border-color:#185fa5;font-weight:600}.mx-btn.mx-go{color:#fff;background:#1d9e75;border-color:#1d9e75;font-weight:600}.mx-btn.mx-go:hover{background:#0f6e56}.mx-input{min-height:var(--mx-tap);width:100%;min-width:0;max-width:7ch;padding:6px 10px;font:inherit;color:inherit;text-align:center;background:#fff;border:1.5px solid #d8dae0;border-radius:10px}.mx-input,.mx-select{font-size:16px}.mx-select{min-height:var(--mx-tap);padding:6px 10px;font:inherit;background:#fff;border:1.5px solid #d8dae0;border-radius:10px}.mx-fields{display:grid;grid-template-columns:1fr;gap:var(--mx-gap)}.mx-field{display:grid;grid-template-columns:1fr auto;grid-template-areas:"name  value" "range range";align-items:center;gap:6px 10px}.mx-field>.mx-name{grid-area:name;font-size:15px;color:#5f6470}.mx-field>.mx-value{grid-area:value}.mx-field>.mx-range{grid-area:range;width:100%;min-width:0;padding:0;background:none;border:none;accent-color:#185fa5}@media (min-width:768px){.mx-fields{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--mx-gap) 18px}.mx-field{grid-template-columns:minmax(72px,auto) 1fr auto;grid-template-areas:"name range value"}}.mx-panel{display:flex;flex-direction:column;gap:var(--mx-gap);padding:12px var(--mx-gutter);background:#fff;border:1.5px solid #d8dae0;border-radius:var(--mx-radius)}.mx-scroll-x{overflow-x:auto;overscroll-behavior-x:contain}.mx-stage{position:relative;width:100%;aspect-ratio:var(--mx-stage-ratio-narrow,var(--mx-stage-ratio,4/3));background:#fff;border:1.5px solid #d8dae0;border-radius:var(--mx-radius);overflow:hidden}.mx-stage>canvas,.mx-stage>svg{display:block;width:100%;height:100%;touch-action:none}@media (min-width:768px){.mx-stage{aspect-ratio:var(--mx-stage-ratio,4/3)}}.mx-hint{font-size:14px;color:#5f6470}@media (prefers-reduced-motion:reduce){.mx-btn{transition:none}.mx-btn:active{transform:none}}