@font-face{font-family:Atkinson Hyperlegible Next;src:url(./AtkinsonHyperlegibleNext-Regular-DOJsAlq1.otf) format("opentype");font-weight:400;font-style:normal}@font-face{font-family:Atkinson Hyperlegible Next;src:url(./AtkinsonHyperlegibleNext-Bold-CRDaWt1k.otf) format("opentype");font-weight:700;font-style:normal}:root{--color-background: #f5f5f5;--color-surface: #ffffff;--color-surface-dark-mode: #2e2e2e;--color-text-primary: #333333;--color-text-secondary: #000000;--color-key-white-text: #000000;--color-key-black-text: #ffffff;--unit: .0625rem;--border-width: var(--unit);--border-width-medium: calc(var(--unit) * 1.5);--border-width-thick: calc(var(--unit) * 2.5);--border-width-cursor: calc(var(--unit) * 3);--radius-small: .3125rem;--radius-medium: .5rem;--space-xs: .5rem;--space-s: .9375rem;--space-m: 1.25rem}body.dark-mode{--color-background: #121212;--color-surface: #1e1e1e;--color-text-primary: #e0e0e0;--color-text-secondary: #ffffff;--color-key-white-text: #e0e0e0}*{box-sizing:border-box;margin:0;padding:0}html{font-size:clamp(14px,1.2vw + .5rem,18px)}html,body{height:100%;width:100%;overflow:hidden}body{display:flex;justify-content:center;align-items:center;background:var(--color-background);font-family:Atkinson Hyperlegible Next,system-ui,sans-serif;transition:background-color .3s}.main-container{position:relative;width:100%;height:100%;max-width:50rem;display:grid;grid-template-rows:1fr auto auto;gap:.5rem;min-height:0;padding:.2rem}.wheel-container{position:relative;width:100%;height:100%;display:grid;place-items:center;min-height:0;min-width:0}canvas{aspect-ratio:1 / 1;max-width:100%;max-height:100%;border-radius:50%;background:var(--color-surface);border:var(--border-width) solid #ccc;touch-action:none;transition:background-color .3s}#result-container{display:flex;align-items:center;justify-content:center;gap:var(--space-s);width:100%;max-width:28.125rem;height:3.75rem;padding:.2rem;border-radius:var(--radius-small);background:var(--color-surface);color:var(--color-text-primary);box-shadow:0 0 .3125rem #0000001a;flex-shrink:0;transition:background-color .3s,color .3s,box-shadow .3s;justify-self:center}#result-container.playback-active{background-color:#a5d6a7}#result-text{flex-grow:1;text-align:center;font-size:1.8rem;line-height:1.2;cursor:pointer;-webkit-user-select:none;user-select:none}.accidental-toggle{background:#e0e0e0;border:1px solid #ccc;color:#333;font-size:1.625rem;font-weight:700;border-radius:var(--radius-small);padding:var(--space-xs) var(--space-s);cursor:pointer;opacity:.4;transition:opacity .2s,background-color .2s;-webkit-tap-highlight-color:transparent}.accidental-toggle.active{background-color:#ffeb3b;opacity:1}#settings-btn{position:absolute;top:1.25rem;right:1.25rem;z-index:1001;font-size:2rem;line-height:1;background:#fffc;border:1px solid #ccc;border-radius:50%;width:3.125rem;height:3.125rem;display:flex;justify-content:center;align-items:center;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .2s ease}#settings-btn:hover{transform:rotate(45deg)}#sidebar{position:fixed;top:0;left:0;height:100%;width:18.75rem;max-width:80%;background:var(--color-surface);box-shadow:.25rem 0 .9375rem #0003;z-index:1002;transform:translate(-100%);transition:transform .3s,background-color .3s;display:flex;padding-top:5rem;align-items:flex-start;justify-content:center}#sidebar.open{transform:translate(0)}.sidebar-content{font-size:1.5rem;color:var(--color-text-primary);text-align:center;line-height:1.5;font-weight:700;padding:1.25rem;width:100%;transition:color .3s}.sidebar-btn{background:#e0e0e0;border:1px solid #ccc;color:#333;font-size:1.125rem;border-radius:var(--radius-small);padding:var(--space-xs) var(--space-s);cursor:pointer;width:100%;margin-top:1.25rem;transition:background-color .2s}.sidebar-btn:hover{background-color:#d0d0d0}.sidebar-setting{display:flex;justify-content:space-between;align-items:center;width:100%;margin-top:1.25rem;padding:0 var(--space-xs)}.sidebar-setting span{font-size:1.125rem;font-weight:400}.sidebar-setting .sidebar-btn{margin-top:0;width:auto;flex-basis:50%}.sidebar-button-group{display:flex;gap:var(--space-xs);flex-basis:50%;justify-content:flex-end}.sidebar-button-group .accidental-toggle{padding:var(--space-xs);font-size:1.25rem;line-height:1;width:2.5rem;height:2.5rem}#sidebar-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#00000080;z-index:1000;opacity:0;pointer-events:none;transition:opacity .3s ease-in-out}#sidebar-overlay.visible{opacity:1;pointer-events:all}#tutorial-mask{position:fixed;top:0;left:0;width:100vw;height:100vh;background:#000000b3;z-index:2000;opacity:0;visibility:hidden;pointer-events:none;clip-path:polygon(0% 0%,100% 0%,100% 100%,0% 100%)}#tutorial-bubble{position:fixed;bottom:20px;left:50%;transform:translate(-50%);background:var(--color-surface);color:var(--color-text-primary);padding:20px;border-radius:10px;z-index:2001;opacity:0;visibility:hidden;max-width:90%;box-shadow:0 5px 15px #0000004d;border:1px solid #ccc}#tutorial-text{font-size:1.2rem;text-align:center}#tutorial-text strong{color:#33c6dc}.main-container.vertical-layout{display:grid;grid-template-columns:auto auto;grid-template-rows:1fr auto;grid-template-areas:"belts wheel" "result wheel";gap:var(--space-s);max-width:none;justify-content:center}.main-container.vertical-layout .belts-container{grid-area:belts}.main-container.vertical-layout .wheel-container{grid-area:wheel}.main-container.vertical-layout #result-container{grid-area:result;width:100%;max-width:none}.main-container.vertical-layout .wheel-and-result-wrapper{display:none}.pitch-belt{order:1}.degree-belt{order:4}.interval-brackets-wrapper{order:3}.chromatic-belt{order:2}.belts-container{width:100%;max-width:46.875rem;min-width:0;height:clamp(1rem,14rem,25rem);display:flex;flex-direction:column;gap:.3rem;position:relative;flex-shrink:0}#belt-flash-overlay{display:none;position:absolute;top:calc(-1 * var(--border-width-thick));bottom:calc(-1 * var(--border-width-thick));left:0;width:calc(100% / 12);pointer-events:none;background:#ffff0080;border-radius:var(--radius-medium);z-index:90;will-change:transform}#belt-cursor{position:absolute;top:calc(-1 * var(--border-width-thick));bottom:calc(-1 * var(--border-width-thick));left:0;width:calc(100% / 12);pointer-events:none;border:var(--border-width-cursor) solid red;border-radius:var(--radius-medium);z-index:100;will-change:transform}.belt{height:clamp(2rem,4rem,8rem);background:#e0e0e0;border-radius:var(--radius-small);overflow:hidden;position:relative;box-shadow:inset 0 0 .3125rem #0000001a;touch-action:none}.belt-track{display:flex;height:100%;will-change:transform;width:325%}.chromatic-belt .belt-track{position:absolute;top:0;left:0}#chromatic-numbers-track{pointer-events:all}#chromatic-colors-track{pointer-events:none}.belt-cell{flex:0 0 calc(100% / 39);display:flex;align-items:center;justify-content:center;font-size:clamp(.5rem,1.35rem,8rem);border-right:var(--border-width) solid #ccc;-webkit-user-select:none;user-select:none;line-height:1.1;text-align:center;overflow:hidden}#chromatic-numbers-track .belt-cell{border-right:none;background:transparent;font-weight:700}#chromatic-colors-track .belt-cell{border-right:none}.interval-brackets-container{height:1.875rem;overflow:hidden;position:relative;touch-action:none}.interval-brackets-track{display:flex;height:100%;will-change:transform;width:325%}.interval-bracket-cell{flex:0 0 calc(100% / 39);display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:clamp(1rem,1.3rem,2rem);padding:0;position:relative;-webkit-user-select:none;user-select:none}.interval-bracket-cell[data-steps]:after{content:"";position:absolute;bottom:.125rem;left:5%;height:40%;border:var(--border-width-medium) solid var(--color-text-secondary);border-top:none;border-radius:0 0 var(--radius-medium) var(--radius-medium);transition:border-color .3s}.interval-bracket-cell[data-steps="1"]:after{right:5%}.interval-bracket-cell[data-steps="2"]:after{right:-95%}.interval-bracket-cell[data-steps="2"] span{position:relative;left:50%}.interval-bracket-cell span{color:var(--color-text-secondary);transition:color .3s}.main-container.vertical-layout .belts-container{order:1;flex-direction:row;width:auto;height:100%;max-width:none;max-height:100%;min-height:0;flex-shrink:0;gap:1.5rem}.main-container.vertical-layout .belts-container>*{order:initial}.main-container.vertical-layout .belt{width:2.8125rem;height:100%}.main-container.vertical-layout .interval-brackets-container{width:1.875rem;height:100%}.main-container.vertical-layout .belt-track,.main-container.vertical-layout .interval-brackets-track{flex-direction:column-reverse;width:100%;height:325%}.main-container.vertical-layout .belt-cell{border-right:none;border-top:var(--border-width) solid #ccc}.main-container.vertical-layout .belt-cell:first-child,.main-container.vertical-layout #chromatic-numbers-track .belt-cell,.main-container.vertical-layout #chromatic-colors-track .belt-cell{border-top:none}.main-container.vertical-layout #belt-cursor,.main-container.vertical-layout #belt-flash-overlay{top:auto;bottom:0;left:calc(-1 * var(--border-width-thick));right:calc(-1 * var(--border-width-thick));width:auto;height:calc(100% / 12)}.main-container.vertical-layout .interval-bracket-cell span{position:absolute;left:50%;transform:translate(-50%,-50%)}.main-container.vertical-layout .interval-bracket-cell[data-steps="1"] span{top:-0%}.main-container.vertical-layout .interval-bracket-cell[data-steps="2"] span{top:-50%}.main-container.vertical-layout .interval-bracket-cell[data-steps]:after{left:.125rem;width:40%;border-right:none;border-radius:var(--radius-medium) 0 0 var(--radius-medium);height:100%;top:-50%;bottom:auto}.main-container.vertical-layout .interval-bracket-cell[data-steps="2"]:after{height:200%;top:-150%}.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}.skip-link{position:absolute;top:-40px;left:6px;background:var(--color-surface);color:var(--color-text-primary);padding:8px;z-index:10000;text-decoration:none;border-radius:4px;border:2px solid #33c6dc;transition:top .3s}.skip-link:focus{top:6px}*:focus{outline:2px solid #33c6dc;outline-offset:2px}canvas:focus,.belt:focus,button:focus,.accidental-toggle:focus{outline:3px solid #33c6dc;outline-offset:3px}.js-focus-visible *:focus:not(.focus-visible){outline:none}.js-focus-visible *:focus.focus-visible{outline:3px solid #33c6dc;outline-offset:2px}@media (prefers-contrast: high){:root{--color-background: #000000;--color-surface: #ffffff;--color-text-primary: #000000;--color-text-secondary: #000000}body.dark-mode{--color-background: #ffffff;--color-surface: #000000;--color-text-primary: #ffffff;--color-text-secondary: #ffffff}canvas,.belt,#result-container{border:2px solid currentColor}.accidental-toggle{border:2px solid currentColor;background:var(--color-surface);color:var(--color-text-primary)}.accidental-toggle.active{background:var(--color-text-primary);color:var(--color-surface)}}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}.belt-track,canvas{transition-duration:.1s!important}#tutorial-mask,#tutorial-bubble{transition:none!important;animation:none!important}}@media (max-width: 768px){button,.accidental-toggle,#settings-btn{min-width:44px;min-height:44px}.belt{min-height:44px}}@media print{#settings-btn,.accidental-toggle,canvas,.belt{display:none}#result-container{border:2px solid black;background:#fff;color:#000;page-break-inside:avoid}#result-container:after{content:" (Interactive musical interface - visit website for full experience)";font-size:.8em;font-style:italic}}.color-blind-mode .accidental-toggle.active:before{content:"✓ ";font-weight:700}.color-blind-mode .belt-cell{position:relative}.color-blind-mode .belt-cell[data-note-type=sharp]:after{content:"♯";position:absolute;top:2px;right:2px;font-size:.7em;opacity:.7}.color-blind-mode .belt-cell[data-note-type=flat]:after{content:"♭";position:absolute;top:2px;right:2px;font-size:.7em;opacity:.7}.keyboard-navigation-active *:focus{outline:3px solid #33c6dc;outline-offset:3px;box-shadow:0 0 0 5px #33c6dc4d}.loading{position:relative}.loading:after{content:"Loading...";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:var(--color-surface);color:var(--color-text-primary);padding:1rem;border-radius:4px;z-index:1000}.error-state{border:2px solid #dc3545;background:#f8d7da;color:#721c24;padding:1rem;border-radius:4px}.error-state:before{content:"⚠ ";font-weight:700}.status-indicator{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:8px}.status-indicator.active{background:#28a745}.status-indicator.inactive{background:#6c757d}.status-indicator.error{background:#dc3545}@media (min-resolution: 1.5dppx){body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}}@media (-ms-high-contrast: active){canvas,.belt,#result-container,button{border:1px solid}.accidental-toggle.active{background:Highlight;color:HighlightText}}body.dark-mode *:focus{outline-color:#66d9ef}body.dark-mode .error-state{background:#2d1b1f;color:#f5c6cb;border-color:#842029}.animation-disabled *{animation-play-state:paused!important;transition:none!important}@media (max-width: 480px){html{font-size:clamp(16px,4vw,20px)}}.gesture-navigation{touch-action:manipulation}[dir=rtl] .sidebar{left:auto;right:0;transform:translate(100%)}[dir=rtl] .sidebar.open{transform:translate(0)}.dyslexia-friendly{line-height:1.6;letter-spacing:.12em;word-spacing:.16em}.dyslexia-friendly p{margin-bottom:1.5em}.switch-navigation *:focus{outline:4px solid #ffff00;outline-offset:4px;background:#ffff001a}.simplified-mode .advanced-controls{display:none}.simplified-mode button{font-size:1.2em;padding:1em;min-height:48px}.simplified-mode #result-container{font-size:2em;padding:1em}