:root{--swiper-theme-color: #007aff}:host{position:relative;display:block;margin-left:auto;margin-right:auto;z-index:1}.swiper{margin-left:auto;margin-right:auto;position:relative;overflow:hidden;list-style:none;padding:0;z-index:1;display:block}.swiper-vertical>.swiper-wrapper{flex-direction:column}.swiper-wrapper{position:relative;width:100%;height:100%;z-index:1;display:flex;transition-property:transform;transition-timing-function:var(--swiper-wrapper-transition-timing-function, initial);box-sizing:content-box}.swiper-android .swiper-slide,.swiper-ios .swiper-slide,.swiper-wrapper{transform:translateZ(0)}.swiper-horizontal{touch-action:pan-y}.swiper-vertical{touch-action:pan-x}.swiper-slide{flex-shrink:0;width:100%;height:100%;position:relative;transition-property:transform;display:block}.swiper-slide-invisible-blank{visibility:hidden}.swiper-autoheight,.swiper-autoheight .swiper-slide{height:auto}.swiper-autoheight .swiper-wrapper{align-items:flex-start;transition-property:transform,height}.swiper-backface-hidden .swiper-slide{transform:translateZ(0);backface-visibility:hidden}.swiper-3d.swiper-css-mode .swiper-wrapper{perspective:1200px}.swiper-3d .swiper-wrapper{transform-style:preserve-3d}.swiper-3d{perspective:1200px}.swiper-3d .swiper-slide,.swiper-3d .swiper-cube-shadow{transform-style:preserve-3d}.swiper-css-mode>.swiper-wrapper{overflow:auto;scrollbar-width:none;-ms-overflow-style:none}.swiper-css-mode>.swiper-wrapper::-webkit-scrollbar{display:none}.swiper-css-mode>.swiper-wrapper>.swiper-slide{scroll-snap-align:start start}.swiper-css-mode.swiper-horizontal>.swiper-wrapper{scroll-snap-type:x mandatory}.swiper-css-mode.swiper-vertical>.swiper-wrapper{scroll-snap-type:y mandatory}.swiper-css-mode.swiper-free-mode>.swiper-wrapper{scroll-snap-type:none}.swiper-css-mode.swiper-free-mode>.swiper-wrapper>.swiper-slide{scroll-snap-align:none}.swiper-css-mode.swiper-centered>.swiper-wrapper:before{content:"";flex-shrink:0;order:9999}.swiper-css-mode.swiper-centered>.swiper-wrapper>.swiper-slide{scroll-snap-align:center center;scroll-snap-stop:always}.swiper-css-mode.swiper-centered.swiper-horizontal>.swiper-wrapper>.swiper-slide:first-child{margin-inline-start:var(--swiper-centered-offset-before)}.swiper-css-mode.swiper-centered.swiper-horizontal>.swiper-wrapper:before{height:100%;min-height:1px;width:var(--swiper-centered-offset-after)}.swiper-css-mode.swiper-centered.swiper-vertical>.swiper-wrapper>.swiper-slide:first-child{margin-block-start:var(--swiper-centered-offset-before)}.swiper-css-mode.swiper-centered.swiper-vertical>.swiper-wrapper:before{width:100%;min-width:1px;height:var(--swiper-centered-offset-after)}.swiper-3d .swiper-slide-shadow,.swiper-3d .swiper-slide-shadow-left,.swiper-3d .swiper-slide-shadow-right,.swiper-3d .swiper-slide-shadow-top,.swiper-3d .swiper-slide-shadow-bottom{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:10}.swiper-3d .swiper-slide-shadow{background:#00000026}.swiper-3d .swiper-slide-shadow-left{background-image:linear-gradient(to left,#00000080,#0000)}.swiper-3d .swiper-slide-shadow-right{background-image:linear-gradient(to right,#00000080,#0000)}.swiper-3d .swiper-slide-shadow-top{background-image:linear-gradient(to top,#00000080,#0000)}.swiper-3d .swiper-slide-shadow-bottom{background-image:linear-gradient(to bottom,#00000080,#0000)}.swiper-lazy-preloader{width:42px;height:42px;position:absolute;left:50%;top:50%;margin-left:-21px;margin-top:-21px;z-index:10;transform-origin:50%;box-sizing:border-box;border:4px solid var(--swiper-preloader-color, var(--swiper-theme-color));border-radius:50%;border-top-color:transparent}:is(.swiper:not(.swiper-watch-progress),.swiper-watch-progress .swiper-slide-visible) .swiper-lazy-preloader{animation:swiper-preloader-spin 1s infinite linear}.swiper-lazy-preloader-white{--swiper-preloader-color: #fff}.swiper-lazy-preloader-black{--swiper-preloader-color: #000}@keyframes swiper-preloader-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:root{color:#f4f5f7;background-color:#111;font-synthesis:none;text-rendering:optimizeLegibility;--tile-size: 30px}*,*:before,*:after{box-sizing:border-box}html,body,#root{min-height:100vh;height:100dvh;width:100%}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:#111;color:#f6f7fb;overflow:hidden;-moz-user-select:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;-webkit-user-drag:none}.app-shell{width:100%;height:100%;margin:0;padding:0;display:flex;justify-content:stretch}.visualizer-page{width:100%;height:100%;display:flex;flex-direction:column;gap:0;background:#fff;color:#050505}.diagram-section{flex:0 0 auto;display:flex;justify-content:center;align-items:center;background:#fff;padding:1.5rem 3rem}.diagram-inner{width:min(1200px,100%)}.section-divider{flex:0 0 auto;height:6px;background:#aaa}.panel-section{flex:1 1 auto;min-height:0;display:flex;justify-content:center;overflow:hidden;background-color:#333;background-image:url(/images/tile-diagonal.png);background-size:var(--tile-size);background-repeat:repeat;color:#ccc}.panel-content{width:min(1200px,100%);height:100%;display:flex;flex-direction:column;align-items:center;padding:.5rem 3rem 1.5rem;gap:.5rem}.panel-header{width:100%;display:flex;justify-content:center}.panel-header__row{position:relative;width:100%;max-width:460px;padding:.5rem 0;display:flex;align-items:center;justify-content:center}.panel-logo{display:flex;align-items:center;justify-content:center}.panel-logo a svg{width:140px;color:#777}.logo-legend{position:absolute;left:1rem;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:.5rem;align-items:flex-start;color:#777;font-size:.75rem;text-transform:uppercase;letter-spacing:.08em;-webkit-user-select:none;user-select:none;pointer-events:none}.logo-legend__row{display:flex;align-items:center;justify-content:flex-start;gap:.25rem}.logo-legend__icon{width:16px;height:16px;flex:0 0 auto;color:#777}.logo-legend__label{line-height:1}.logo-legend__label:before{content:"= ";opacity:.8}.logo-reset{position:absolute;right:1rem;top:50%;transform:translateY(-50%);border:1px solid rgba(255,255,255,.12);background:#ffffff0d;color:#ffffffd9;border-radius:999px;padding:.35rem .7rem;font-size:.75rem;text-transform:uppercase;letter-spacing:.08em;cursor:pointer;transition:background .2s ease,border .2s ease}.logo-reset:hover{background:#ffffff14}.logo-reset:active{background:#ffffff1f}.logo-reset:focus-visible{outline:none;box-shadow:0 0 0 3px #ffd14959}.panel-scroll{width:100%;flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;display:flex;justify-content:center}.panel-scroll__inner{width:100%;max-width:460px;padding:0;box-sizing:border-box;min-height:100%;display:flex;flex-direction:column}.panel-copyright{margin-top:auto;padding:.75rem 0;text-align:center;font-size:.75rem;color:#555}.control-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:.75rem}.card{border-radius:16px;padding:1rem;box-shadow:none}.control-card,.option-card{background:#444}.control-card--stacked{display:flex;flex-direction:column;gap:1.5rem}.picker-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.25rem;align-items:start}.picker-column{min-width:0}.picker-column h3{text-align:center}.picker-hit{outline:none;border-radius:16px}.picker-hit:focus-visible{box-shadow:0 0 0 3px #ffd14959}.picker-hit.is-active .picker-swiper{box-shadow:0 0 0 2px #ffd14959}.picker-swiper{--picker-slide-height: 84px;--picker-slide-peek: 40px;position:relative;height:calc(var(--picker-slide-height) + (var(--picker-slide-peek) * 2));border-radius:16px;background:#ffffff0d;overflow:hidden}.picker-swiper:before,.picker-swiper:after{content:"";position:absolute;left:0;right:0;height:calc(var(--picker-slide-peek) + 11px);pointer-events:none;z-index:2}.picker-swiper:before{top:0;background:linear-gradient(to bottom,#00000024,#0000)}.picker-swiper:after{bottom:0;background:linear-gradient(to top,#00000024,#0000)}.picker-slide{display:flex;align-items:center;justify-content:center;height:var(--picker-slide-height);font-family:JetBrains Mono,Fira Mono,SFMono-Regular,Consolas,monospace;font-size:4.75rem;line-height:1;color:#ffffff59;-webkit-user-select:none;user-select:none}.picker-swiper .swiper-slide{opacity:.35;transition:opacity .15s ease}.picker-swiper .swiper-slide-active{opacity:1;color:#ffd149}.picker-swiper .swiper-slide{cursor:grab}.picker-swiper .swiper-slide:active{cursor:grabbing}.control-card h3,.option-card h3{margin-top:0;margin-bottom:1rem;font-size:1rem;text-transform:uppercase;letter-spacing:.08em;color:#ffffffa6}.slider{display:block}.slider input[type=range]{width:100%;accent-color:#ffd149}.slider-scale{display:flex;justify-content:space-between;font-family:JetBrains Mono,Fira Mono,SFMono-Regular,Consolas,monospace;font-size:.75rem;color:#fff6;margin-top:.5rem}.option-stack{display:flex;flex-direction:row;flex-wrap:nowrap;gap:.75rem}.option-button{display:flex;align-items:center;justify-content:center;border:none;border-radius:8px;height:44px;padding:0 14px;font-size:.95rem;font-weight:700;background:#555;color:#ccc;transition:background .2s ease,color .2s ease;flex:1 1 0}.option-dropdown{flex:2 1 0;display:flex}.option-select{width:100%;border:none;border-radius:8px;height:44px;padding:0 14px;font-size:.95rem;font-weight:700;background:#555;color:#ccc;text-transform:none;letter-spacing:.04em;text-align:center;text-align-last:center;appearance:none;cursor:pointer}.option-select:disabled{opacity:.7;cursor:not-allowed}.option-button:hover:not(:disabled){background:#666}.option-button:disabled{opacity:.4;cursor:not-allowed}.option-button--active{background:#777;color:#ccc}.option-label{display:flex;align-items:center;gap:.5rem;justify-content:center;letter-spacing:.04em;text-transform:uppercase;font-size:.75rem}.visualizer-card{position:relative;width:100%;height:360px;margin-top:0;border-radius:0;background:#fff;overflow:hidden}.visualizer-ruler{position:relative;width:100%;height:100%;background:linear-gradient(180deg,#fff,#fdfdfd);overflow:hidden;--ruler-stem-height: 175px}.visualizer-ruler__inner{position:absolute;top:10px;bottom:50px;left:clamp(32px,6vw,64px);right:clamp(32px,6vw,64px)}.line{position:absolute;top:0;--line-width: var(--line-base-width, 1px);display:flex;flex-direction:column;align-items:center;transform:translate(-50%);pointer-events:none}.stem-wrap{position:relative;display:flex;align-items:stretch;justify-content:center}.accent-toggle{margin-bottom:10px;pointer-events:auto;border:none;background:transparent;cursor:pointer;padding:.35rem;border-radius:999px;transition:background .2s ease;touch-action:manipulation}.accent-toggle:hover{background:#00000014}.accent-toggle--spacer{pointer-events:none;cursor:default}.accent-toggle--spacer .accent-icon{visibility:hidden}.accent-icon{display:flex;align-items:center;justify-content:center;width:34px;height:34px;color:#050505;opacity:0;transition:opacity .2s ease}.accent-icon__glyph{width:32px;height:32px}.accent-icon.is-visible{opacity:1}.line-stem{height:225px;transition:opacity .2s ease}.x-toggle{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);pointer-events:auto;border:none;background:transparent;cursor:pointer;padding:0;border-radius:0;touch-action:manipulation}.x-toggle:hover .x-icon{background:#00000014}.x-icon{width:40px;height:40px;display:flex;align-items:center;justify-content:center;overflow:visible;border-radius:999px;color:#050505;opacity:0;transition:opacity .2s ease}.x-icon.is-visible{opacity:1}.x-icon__glyph{width:88px;height:88px}.open-text{font-family:JetBrains Mono,Fira Mono,SFMono-Regular,Consolas,monospace;font-size:1.05rem;font-weight:600;line-height:1;white-space:nowrap;-webkit-user-select:none;user-select:none}.line-label{margin-top:12px;font-family:JetBrains Mono,Fira Mono,SFMono-Regular,Consolas,monospace;font-size:1.05rem;font-weight:400;color:#050505}.line[data-strum-hidden="1"] .line-label{opacity:.1}.strum-toggle{margin-top:4px;pointer-events:auto;border:none;background:transparent;cursor:pointer;padding:.4rem;border-radius:999px;transition:background .2s ease;touch-action:manipulation}.strum-toggle:hover{background:#00000014}.strum-icon{opacity:0;transition:opacity .2s ease;color:#050505}.strum-icon.is-visible{opacity:1}.strum-icon__glyph{width:28px;height:28px}.range-toggle{margin-top:2px;display:flex;align-items:center;justify-content:center;pointer-events:auto;border:none;background:transparent;cursor:pointer;padding:.25rem .45rem;border-radius:999px;transition:background .2s ease;touch-action:manipulation}.range-toggle.is-double{transform:translateY(-.5em)}.range-toggle:hover{background:#00000014}.range-toggle--spacer{pointer-events:none;cursor:default}.range-toggle--spacer .range-text{visibility:hidden}.range-text{display:flex;flex-direction:column;align-items:center;justify-content:center;font-family:JetBrains Mono,Fira Mono,SFMono-Regular,Consolas,monospace;font-size:.85rem;font-weight:500;line-height:1.05;color:#050505;opacity:0;-webkit-user-select:none;user-select:none;text-align:center}.range-text.is-visible{opacity:1}@media(max-width:640px){.diagram-section{padding:12px}.panel-content{padding:8px 12px 12px}.panel-logo a svg{width:120px}.logo-legend{left:.5rem}.logo-reset{right:.5rem}.logo-legend{font-size:.7rem;gap:.35rem}.logo-reset{padding:.3rem .55rem;font-size:.7rem}.panel-copyright{font-size:.7rem}.card{border-radius:12px}.option-button{height:42px;padding:0 10px}.option-label{flex-direction:column;gap:.35rem;text-align:center}.visualizer-card{height:260px;border-radius:0}.visualizer-ruler__inner{inset:6px 24px 52px}.visualizer-ruler{--ruler-stem-height: 100px}.line:not([data-line-end="1"]){--line-width: max(.5px, calc(var(--line-base-width, 1px) - 1px))}.picker-grid{gap:1rem}.picker-swiper{--picker-slide-height: 72px;--picker-slide-peek: 30px}.picker-slide{font-size:3.6rem}.strum-icon__glyph{width:16px;height:16px}.x-icon{width:32px;height:32px}.x-icon__glyph{width:72px;height:72px}.open-text{font-size:.9rem}.range-toggle{margin-top:0}.visualizer-card .accent-toggle:hover,.visualizer-card .strum-toggle:hover,.visualizer-card .range-toggle:hover,.visualizer-card .low-toggle:hover,.visualizer-card .x-toggle:hover .x-icon{background:transparent}}