:root{--c-bg-root:#0a0a12;--c-bg-panel:#0f0f1a;--c-bg-surface:#1a1a30;--c-bg-surface-alt:#1a1a3a;--c-bg-input:#0a0a18;--c-accent:#6080ff;--c-accent-bright:#80a0ff;--c-text-primary:#c8c8d8;--c-text-secondary:#8a8aaa;--c-text-muted:#9090b8;--c-text-dim:#9090b0;--c-text-dimmer:#8a8aaa;--c-text-faint:#8888b8;--c-border:#2a2a40;--c-border-hover:#3a3a5a;--c-warning:gold;--c-active-glow:#6080ff0f;--font-mono:"SF Mono", "Cascadia Mono", Consolas, Menlo, "BIZ UDGothic", "Noto Sans Mono CJK JP", monospace;--font-sans:"Segoe UI", -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Yu Gothic", "Meiryo", "Noto Sans JP", "Noto Sans CJK JP", system-ui, sans-serif;--sp-root-top:6px;--sp-header-mb:7px;--sp-tablist-mb:6px;--sp-title-mb:2px;--sp-status-mt:2px;--fs-tab:11px;--sp-tab-v:4px;--sp-tab-h:4px}html,body{background:var(--c-bg-root,#0a0a12);margin:0;padding:0}body{font-family:var(--font-sans);overflow-x:hidden}button,input,select,textarea{font:inherit}.header-action-link:hover{color:var(--c-accent-bright,#80a0ff);-webkit-text-decoration-color:var(--c-accent-bright,#80a0ff);text-decoration-color:var(--c-accent-bright,#80a0ff)}.header-action-link:focus-visible{color:var(--c-accent-bright,#80a0ff);-webkit-text-decoration-color:var(--c-accent-bright,#80a0ff);text-decoration-color:var(--c-accent-bright,#80a0ff)}[role=tablist]>button[role=tab]{flex:1;min-width:0}@media (min-width:1024px){[role=tablist]>button[role=tab]{flex:none}}button:focus-visible{outline:2px solid var(--c-accent,#6080ff);outline-offset:2px}button:hover:not(:disabled){background:var(--c-bg-surface-alt,#1a1a3a);border-color:var(--c-border-hover,#3a3a5a)}svg g[tabindex]:focus{outline:none}svg g[tabindex]:focus-visible{outline:none}.hex-dice-button,.hex-dice-button:focus,.hex-dice-button *{-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;outline:none}.hex-dice-button:focus-visible{-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;outline:none}input[type=checkbox]{-webkit-appearance:none;appearance:none;border:1px solid var(--c-border,#2a2a40);background:var(--c-bg-input,#0a0a18);cursor:pointer;vertical-align:middle;border-radius:3px;width:14px;height:14px;position:relative}input[type=checkbox]:checked{background:var(--c-accent,#6080ff);border-color:var(--c-accent,#6080ff)}input[type=checkbox]:checked:after{content:"";border:2px solid #fff;border-width:0 2px 2px 0;width:4px;height:8px;position:absolute;top:1px;left:4px;transform:rotate(45deg)}input[type=checkbox]:focus-visible{outline:2px solid var(--c-accent,#6080ff);outline-offset:2px}.map-mode-break{flex-basis:100%;height:0}.gallery-grid{grid-template-columns:repeat(auto-fill, minmax(var(--gallery-thumb-track,194px), 1fr));justify-content:center;gap:6px;width:100%;padding:2px 0;display:grid}.gallery-card{border:2px solid var(--c-bg-surface,#1a1a30);cursor:pointer;background:0 0;border-radius:4px;flex-direction:column;align-items:center;gap:2px;padding:3px;display:flex}.gallery-card--current{border-color:var(--c-accent,#6080ff);background:var(--c-active-glow,#6080ff0f)}.gallery-preview-button{border-radius:2px;outline:none}.gallery-preview-button--expanded{outline:2px solid var(--c-accent,#6080ff)}.gallery-thumb-canvas{border-radius:2px;display:block}.gallery-swatches{gap:2px;display:flex}.gallery-swatch{border-radius:2px;width:10px;height:10px}.gallery-bookmark-button{cursor:pointer;color:var(--c-text-faint,#8888b8);background:0 0;border:none;padding:2px 4px 0;font-size:11px;line-height:1}.gallery-bookmark-button--starred{color:var(--c-warning,gold)}.gallery-bookmark-button:hover:not(:disabled){background:0 0;border-color:#0000}.panel-layout{flex-direction:column;align-items:center;gap:2px;width:100%;display:flex}.panel-canvas{width:100%;max-width:var(--display-max,420px);flex-direction:column;align-items:center;display:flex}.canvas-cursor-overlay{opacity:0}.canvas-workspace:hover>.canvas-cursor-overlay{opacity:1}.panel-sidebar{width:100%;max-width:var(--display-max,420px);flex-direction:column;align-items:center;display:flex}.glaze-hue-section{margin-top:6px;padding-bottom:8px}.hex-diag-wrap{max-width:462px}.hex-title-standalone{display:none}.hex-title-overlay{display:block}.theory-container{box-sizing:border-box;flex-direction:column;align-items:center;gap:16px;width:100%;max-width:560px;margin:0 auto;padding:0 6px 20px;display:flex}.theory-title{font-size:20px;font-weight:700;font-family:var(--font-mono);color:var(--c-text-primary,#c8c8d8);margin:0 0 12px}html:lang(en) .theory-title{white-space:nowrap}.theory-heading{font-size:16px;font-weight:700;font-family:var(--font-mono);color:var(--c-accent-bright,#80a0ff);text-align:center;margin:0}.theory-desc{font-size:13px;font-family:var(--font-sans);color:#a8a8c8;text-align:left;width:100%;max-width:480px;margin:0;line-height:1.6}.theory-intro{color:var(--c-text-muted,#9090b8)}.theory-hint{font-size:8px;font-family:var(--font-mono);color:var(--c-text-dimmer,#8a8aaa);text-align:center;margin:0}.theory-annotation:not(button){opacity:1!important}button.theory-diagram-button{box-sizing:border-box;height:22px;min-height:22px}.theory-binary-svg{width:100%;max-width:480px}.theory-zigzag-svg{width:100%;max-width:470px}.theory-conn-footer{text-align:center;font-size:9px}.theory-conn-footer p{font-size:inherit;font-family:var(--font-mono);color:var(--c-accent-bright,#80a0ff);margin:0}[role=tablist]{max-width:380px;margin:0 auto}@media (min-width:768px) and (max-width:1023px){.music-layout{flex-direction:row;justify-content:center;align-items:flex-start;gap:16px}.music-layout>.panel-canvas,.music-layout>.panel-sidebar{max-width:360px}.music-algebra-wrapper{align-self:center;max-width:736px}[role=tablist]{max-width:480px;margin:0 auto}}.linked-viz-controls{--linked-viz-toggle-padding:3px 10px;--linked-viz-toggle-fs:11px;--linked-viz-toggle-line:14px;--linked-viz-control-gap:3px;--linked-viz-delta-width:62px}@media (max-width:559px){html:lang(en) .theory-title{font-size:16px}.linked-viz-controls{--linked-viz-toggle-padding:3px 7px;--linked-viz-toggle-fs:10px;--linked-viz-toggle-line:14px;--linked-viz-delta-width:52px}}@media (max-width:360px){html:lang(en) .theory-title{font-size:14px}.linked-viz-controls{--linked-viz-toggle-padding:3px 4px;--linked-viz-toggle-fs:9px;--linked-viz-toggle-line:14px;--linked-viz-control-gap:2px;--linked-viz-delta-width:44px}}.music-algebra-scroll{--music-card-padding:5px;--music-card-gap:3px;--music-card-control-gap:2px;--music-card-label-fs:10px;--music-card-body-fs:8px;--music-card-select-fs:10px;--music-card-select-padding:1px 3px;--music-card-header-size:34px;--music-card-toggle-width:64px;--music-card-toggle-height:18px;--btn-sm-font-size:9px;--btn-sm-padding:1px 3px;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:1fr;align-items:start;gap:8px;width:100%;display:grid}.music-algebra-scroll>div{min-width:0;height:100%}.music-algebra-scroll>div>svg,.music-algebra-scroll>div>canvas,.music-algebra-scroll>div>div>svg{align-self:stretch;margin-top:auto;margin-bottom:auto}@media (max-width:360px){.music-algebra-scroll{--music-card-padding:4px;--music-card-gap:2px;--music-card-control-gap:2px;--music-card-label-fs:9px;--music-card-body-fs:7px;--music-card-select-fs:9px;--music-card-select-padding:1px 2px;--music-card-header-size:30px;--music-card-toggle-width:58px;--music-card-toggle-height:17px;--btn-sm-font-size:8px;--btn-sm-padding:1px 2px}}@media (max-width:320px){html:lang(en) .theory-title{font-size:12px}}@media (min-width:560px){.music-algebra-scroll{--music-card-padding:6px;--music-card-gap:4px;--music-card-control-gap:3px;--music-card-label-fs:11px;--music-card-body-fs:9px;--music-card-select-fs:11px;--music-card-select-padding:2px 4px;--music-card-header-size:38px;--music-card-toggle-width:70px;--music-card-toggle-height:20px;--btn-sm-font-size:10px;--btn-sm-padding:2px 4px;grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}}@media (min-width:1024px) and (orientation:landscape){.music-algebra-scroll{grid-template-columns:repeat(4,minmax(0,1fr))}}@media (min-width:1024px){:root{--sp-root-top:16px;--sp-header-mb:10px;--sp-tablist-mb:8px;--sp-title-mb:6px;--sp-status-mt:-2px;--fs-tab:11px;--sp-tab-v:4px;--sp-tab-h:8px}.hex-title-standalone{display:block}.hex-title-overlay{display:none}[role=tabpanel]{width:100%}.panel-layout{flex-direction:row;justify-content:center;align-items:flex-start;gap:32px}.panel-canvas{width:var(--display-max,auto);touch-action:none;flex-direction:column;flex-shrink:0;align-items:center;display:flex}.panel-layout>.panel-sidebar{flex-direction:column;flex-shrink:0;align-self:center;align-items:center;gap:8px;width:420px;display:flex}.music-layout>.panel-sidebar{align-self:flex-start;gap:3px}.music-algebra-wrapper{align-self:center;max-width:872px}[role=tablist]{max-width:480px;margin:0 auto}[role=tablist]>button[role=tab]{flex:1}.glaze-hue-section{margin-top:0;padding-bottom:0}.hex-diag-wrap{max-width:462px}.theory-container{max-width:700px}.theory-binary-svg{max-width:540px}.theory-zigzag-svg{max-width:500px}.theory-desc{max-width:620px;font-size:15px;line-height:1.8}.theory-intro{max-width:540px}.theory-title{font-size:24px}.theory-heading{font-size:18px}.theory-hint{font-size:9px}.theory-conn-card{max-width:620px}.theory-conn-card-header{padding:6px 10px;font-size:13px}.theory-conn-card-body{padding:0 10px 10px;font-size:12px;line-height:1.7}.theory-conn-card-detail{font-size:10px}.theory-conn-summary{max-width:620px;padding:10px;font-size:12px;line-height:2}.theory-conn-summary-title{font-size:13px}.theory-conn-footer{font-size:11px}.theory-conn-footer p{font-size:inherit}.theory-annotation{font-size:11px!important}.map-mode-break{display:none}}@keyframes toast-in{0%{opacity:0;transform:translate(-50%)translateY(10px)}to{opacity:1;transform:translate(-50%)translateY(0)}}#root{padding-left:max(16px, env(safe-area-inset-left));padding-right:max(16px, env(safe-area-inset-right));padding-top:max(var(--sp-root-top), env(safe-area-inset-top));padding-bottom:max(80px, env(safe-area-inset-bottom))}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}.linked-viz-root{width:90%}@media (min-width:1024px){.linked-viz-root{width:85%}}