@font-face{font-family:Hanken Grotesk;font-style:normal;font-weight:100 900;font-display:block;src:url(/fonts/hanken-grotesk-vietnamese-wght-normal.woff2)format("woff2");unicode-range:U+102-103,U+110-111,U+128-129,U+168-169,U+1A0-1A1,U+1AF-1B0,U+300-301,U+303-304,U+308-309,U+323,U+329,U+1EA0-1EF9,U+20AB}@font-face{font-family:Hanken Grotesk;font-style:normal;font-weight:100 900;font-display:block;src:url(/fonts/hanken-grotesk-latin-ext-wght-normal.woff2)format("woff2");unicode-range:U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Hanken Grotesk;font-style:normal;font-weight:100 900;font-display:block;src:url(/fonts/hanken-grotesk-latin-wght-normal.woff2)format("woff2");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:IBM Plex Mono;font-style:normal;font-weight:600;font-display:block;src:url(/fonts/ibm-plex-mono-latin-600-normal.woff2)format("woff2")}@font-face{font-family:IBM Plex Mono;font-style:normal;font-weight:700;font-display:block;src:url(/fonts/ibm-plex-mono-latin-700-normal.woff2)format("woff2")}:root{--field:#fff;--paper:#fff;--panel:#f0f0ee;--wash:#e6e6e3;--ink:#111316;--soft-ink:#3a3c40;--muted:#6b6d70;--line:#e7e7e4;--line-strong:#cfcfca;--red:#fe5000;--blue:#2563c9;--green:#2e9e5b;--related:var(--green);--screen:#14130f;--fam-rock:#a4483c;--fam-metal:#474850;--fam-punk:#b23458;--fam-pop:#c2517f;--fam-electronic:#2f6ec4;--fam-hip-hop:#7a4cc0;--fam-rnb:#9c4a9c;--fam-jazz:#1f7a74;--fam-blues:#54549e;--fam-country:#8a5c33;--fam-folk:#6d7838;--fam-classical:#8c7746;--fam-latin:#b5762a;--fam-caribbean:#35915a;--fam-ambient:#5e7d90;--fam-experimental:#7d6b8f;--display:"Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;--body:"Hanken Grotesk", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--utility:"IBM Plex Mono", "SFMono-Regular", Consolas, monospace;color:var(--ink);background:var(--field);font-family:var(--body);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{box-sizing:border-box}html,body,#root{min-width:320px;height:100%;overflow:hidden}body{margin:0}button,input{color:inherit;font:inherit}button{cursor:pointer;background:0 0;border:0;padding:0}.app{background:var(--field);grid-template-columns:minmax(320px,396px) minmax(0,1fr);height:100svh;display:grid;overflow:hidden}.app--centered{place-items:center;padding:24px;display:grid}.load-state{border:1px solid var(--line-strong);background:var(--paper);width:min(440px,100%);padding:30px;box-shadow:inset 0 1px #fff,0 18px 40px -28px #00000080}.load-state h1{font:800 46px/.92 var(--display);letter-spacing:-.03em;text-transform:lowercase;margin:0 0 10px}.load-state p{color:var(--muted);font:600 13px/1.5 var(--utility);margin:0}.rail{border-right:1px solid var(--line-strong);background:linear-gradient(180deg, #fbfbfb 0%, var(--paper) 42%, #f4f4f3 100%);flex-direction:column;height:100svh;min-height:0;display:flex;box-shadow:inset -1px 0 #fff}.brand{border-bottom:1px solid var(--line-strong);flex-wrap:wrap;align-items:baseline;gap:4px 10px;padding:14px 22px 13px;display:flex}.brand h1{color:var(--ink);font:800 38px/.84 var(--display);letter-spacing:-.04em;text-transform:lowercase;margin:0}.brand h1:before{content:"";vertical-align:6px;background:var(--red);width:9px;height:9px;box-shadow:0 0 0 2px color-mix(in srgb, var(--red) 22%, transparent);border-radius:50%;margin-right:6px;display:inline-block}.brand-credit{width:fit-content;color:color-mix(in srgb, var(--muted) 78%, transparent);font:650 9px/1 var(--utility);letter-spacing:.1em;text-transform:lowercase;text-decoration:none;transition:color .12s}.brand-credit:hover,.brand-credit:focus-visible{color:var(--ink);outline:none}.detail{flex:auto;min-height:0;padding:22px 24px 26px;overflow:auto}.detail-head{flex-wrap:wrap;align-items:center;gap:8px 12px;margin-bottom:22px;display:flex}.detail-dismiss{display:none}.detail h2{color:var(--ink);font:800 33px/.94 var(--display);letter-spacing:-.035em;text-transform:lowercase;margin:0}.detail a{color:inherit;text-decoration:none;transition:color .12s}.detail a:hover,.detail a:focus-visible{color:var(--red);outline:none}.detail-block{border-top:1px solid var(--line);padding-top:18px}.detail-block+.detail-block{margin-top:20px}.detail h3{color:var(--red);font:600 10.5px var(--utility);letter-spacing:.08em;text-transform:lowercase;align-items:baseline;gap:8px;margin:0 0 13px;display:flex}.detail h3:before{content:attr(data-index);color:var(--muted);font-variant-numeric:tabular-nums}.detail p{color:var(--soft-ink);margin:0;font-size:14.5px;line-height:1.6}.search-dock{border-top:1px solid var(--line-strong);background:color-mix(in srgb, var(--paper) 82%, var(--panel));flex:none;padding:12px 18px 13px;box-shadow:inset 0 1px #ffffffb8}.search-field{border:1px solid color-mix(in srgb, var(--line-strong) 70%, transparent);background:color-mix(in srgb, #fff 88%, var(--wash));border-radius:12px;grid-template-columns:15px minmax(0,1fr);align-items:center;gap:8px;min-height:36px;padding:0 12px;display:grid;box-shadow:inset 0 1px #ffffffdb,0 1px 2px #1113160d}.search-dock.is-menu-open .search-field{z-index:5;border-top-color:color-mix(in srgb, var(--line-strong) 58%, transparent);background:#fff;border-radius:0 0 12px 12px;position:relative;box-shadow:inset 0 1px #ffffffe6}.search-field svg{fill:none;width:13px;stroke:var(--muted);stroke-width:1.8px;stroke-linecap:round;opacity:.58;transition:opacity .12s;overflow:visible}.search-field:focus-within svg{opacity:.92}.search-field input{appearance:none;width:100%;min-width:0;font:560 14px/1 var(--body);background:0 0;border:0;outline:0}.search-field input::placeholder{color:color-mix(in srgb, var(--muted) 76%, transparent);font-weight:520}.search-field:focus-within{background:#fff}.search-box{position:relative}.search-results{z-index:4;border:1px solid color-mix(in srgb, var(--line-strong) 72%, transparent);background:#fff;border-bottom:0;border-radius:12px 12px 0 0;max-height:min(360px,100svh - 200px);padding:6px;scroll-padding-block:40px;animation:60ms ease-out search-results-in;position:absolute;inset:auto 0 calc(100% - 1px);overflow:auto;box-shadow:0 -18px 32px -24px #11131647}@keyframes search-results-in{0%{opacity:0;transform:translateY(2px)}}@media (prefers-reduced-motion:reduce){.search-results{animation:none}}.search-results button{text-align:left;border-radius:8px;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:10px;width:100%;min-height:34px;padding:5px 10px;display:grid}.search-results button+button{margin-top:1px}.search-results button:is(.is-active,:focus-visible){background:color-mix(in srgb, var(--red) 7%, #fff 93%);outline:none}.search-results .result-name{align-items:center;gap:8px;min-width:0;display:flex}.search-results .result-label{min-width:0;color:color-mix(in srgb, var(--ink) 64%, var(--paper));font:540 13.5px/1.1 var(--body);text-transform:lowercase}.search-results .result-match{color:var(--ink);font-weight:720}.search-results .result-count{color:color-mix(in srgb, var(--muted) 88%, transparent);font:560 11px/1 var(--body);font-variant-numeric:tabular-nums;white-space:nowrap}.current-dot{background:var(--red);width:8px;height:8px;box-shadow:0 0 0 2px color-mix(in srgb, var(--red) 22%, transparent);border-radius:50%;flex:none}.search-results p{color:var(--muted);font:600 12px/1 var(--utility);text-transform:lowercase;margin:0;padding:14px 12px}.visualizer{background:var(--screen);height:184px;box-shadow:0 1px 0 #fff, 0 0 0 1px var(--line-strong), inset 0 2px 7px #000000b3, inset 0 0 0 1px #00000080;margin-bottom:14px;position:relative;overflow:hidden}.visualizer-canvas{background:inherit;width:100%;height:100%;display:block}.visualizer-tag{font:600 8.5px/1 var(--utility);letter-spacing:.16em;text-transform:uppercase;color:color-mix(in srgb, var(--red) 70%, #fff 30%);pointer-events:none;position:absolute;bottom:9px;left:11px}.visualizer-led{pointer-events:none;background:#5a3a22;border-radius:50%;width:7px;height:7px;position:absolute;top:10px;right:11px;box-shadow:0 0 0 1px #00000080}.visualizer.is-live .visualizer-led{background:var(--red);box-shadow:0 0 8px 1px color-mix(in srgb, var(--red) 80%, transparent);animation:1.1s step-end infinite led-blink}@keyframes led-blink{50%{opacity:.35}}.preview-player{grid-template-columns:auto minmax(0,1fr);align-items:center;gap:12px;margin-bottom:20px;padding:12px 13px;display:grid}.preview-toggle{background:var(--ink);width:42px;height:42px;color:var(--paper);border-radius:50%;place-items:center;transition:background .14s,box-shadow .14s,transform .12s cubic-bezier(.23,1,.32,1);display:grid;position:relative;box-shadow:inset 0 1px #ffffff2e,0 8px 16px -10px #111316e6}.preview-toggle:hover{background:color-mix(in srgb, var(--ink) 88%, #fff 12%)}.preview-toggle:active{transform:scale(.96);box-shadow:inset 0 1px #ffffff24,0 5px 12px -10px #111316e6}.preview-toggle:focus-visible{box-shadow:0 1px 0 #ffffff2e inset, 0 0 0 3px color-mix(in srgb, var(--blue) 26%, transparent);outline:none}.preview-toggle:disabled{background:var(--wash);color:var(--muted);cursor:not-allowed;box-shadow:inset 0 1px #fff}.preview-symbol--play{border-block:8px solid #0000;border-left:12px solid;width:0;height:0;margin-left:3px}.preview-symbol--pause{border-inline:4px solid;width:13px;height:16px}.preview-main{gap:9px;min-width:0;display:grid}.preview-copy{gap:3px;min-width:0;display:grid}.result-label,.preview-copy>*,.legend-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.preview-copy span{color:var(--muted);font:500 11px/1.1 var(--body)}.preview-copy strong{color:var(--ink);font:700 14.5px/1.05 var(--display)}.preview-progress{grid-template-columns:32px minmax(0,1fr) 32px;align-items:center;gap:8px;display:grid}.preview-progress span{color:color-mix(in srgb, var(--muted) 84%, transparent);font:600 9.5px/1 var(--utility);font-variant-numeric:tabular-nums}.preview-progress span:last-child{text-align:right}.preview-scrubber{appearance:none;cursor:pointer;background:0 0;width:100%;height:18px;margin:0}.preview-scrubber:disabled{cursor:default}.preview-scrubber::-webkit-slider-runnable-track{background:linear-gradient(90deg, var(--ink) 0%, var(--ink) var(--progress), var(--line-strong) var(--progress), var(--line-strong) 100%);border-radius:999px;height:4px}.preview-scrubber::-webkit-slider-thumb{appearance:none;border:0;width:0;height:0}.preview-scrubber::-moz-range-track{background:var(--line-strong);border-radius:999px;height:4px}.preview-scrubber::-moz-range-progress{background:var(--ink);border-radius:999px;height:4px}.preview-scrubber::-moz-range-thumb{border:0;width:0;height:0}.preview-scrubber:focus-visible{outline:none}.preview-scrubber:focus-visible::-webkit-slider-runnable-track{box-shadow:0 0 0 4px color-mix(in srgb, var(--blue) 16%, transparent)}.preview-scrubber:focus-visible::-moz-range-track{box-shadow:0 0 0 4px color-mix(in srgb, var(--blue) 16%, transparent)}.spectrum{gap:12px;display:grid}.spectrum-bar{border:1px solid var(--line-strong);background:var(--panel);border-radius:4px;height:30px;display:flex;overflow:hidden}.spectrum-seg{width:var(--share);background:var(--seg);cursor:pointer;min-width:4px;height:100%;transition:opacity .12s,filter .12s}.spectrum-seg+.spectrum-seg{box-shadow:inset 1px 0 #ffffff80}.spectrum-seg:hover{filter:brightness(1.07)}.spectrum.has-hover .spectrum-seg:not(.is-active){opacity:.3}.spectrum.has-hover .spectrum-legend button:not(.is-active){opacity:.45}.spectrum-legend{grid-template-columns:1fr 1fr;gap:1px 16px;margin:0;padding:0;list-style:none;display:grid}.spectrum-legend button{text-align:left;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:7px;width:100%;padding:4px 2px;transition:opacity .12s,color .12s;display:grid}.spectrum-legend .swatch{background:var(--seg);border-radius:2px;width:9px;height:9px}.spectrum-legend .legend-name{font:600 13px/1.2 var(--display);letter-spacing:-.01em}.starters{margin-top:14px}.spectrum-legend small{color:var(--muted);font:600 11px/1 var(--utility);font-variant-numeric:tabular-nums}.spectrum-legend button:is(:hover,.is-active,:focus-visible),.spectrum-legend button:is(:hover,.is-active,:focus-visible) small{color:var(--related);outline:none}.map-shell{min-width:0;height:100svh}.map{cursor:grab;touch-action:none;width:100%;height:100%;display:block}.map:active{cursor:grabbing}.map-bg{fill:#0000}.map-viewport{--zoom:1;--label-size:calc(7px / var(--zoom) * var(--map-label-scale,1));--related-label-size:calc(8.8px / var(--zoom) * var(--map-label-scale,1));--selected-label-size:calc(12px / var(--zoom) * var(--map-label-scale,1));--label-stroke:calc(2.2px / var(--zoom) * var(--map-label-stroke-scale,1));--selected-label-stroke:calc(4.2px / var(--zoom) * var(--map-label-stroke-scale,1));transform-box:view-box;transform-origin:0 0}.selected-links line{stroke:color-mix(in srgb, var(--related) 55%, var(--ink));stroke-opacity:calc(.22 + var(--link-strength) * .9);stroke-width:calc(.8px + var(--link-strength) * 2px);stroke-linecap:round;vector-effect:non-scaling-stroke}.selection-halo{r:calc(44px / var(--zoom));fill:url(#selection-halo)}.selection-halo-stop{stop-color:var(--red)}.node-label{fill:color-mix(in srgb, var(--family-color,var(--ink)) 82%, transparent);paint-order:stroke;stroke:var(--field);stroke-width:var(--label-stroke);stroke-linejoin:round;font:600 calc(var(--label-size) * var(--label-scale,1))/1 var(--utility);text-anchor:middle;dominant-baseline:middle;cursor:pointer;-webkit-user-select:none;user-select:none;outline:none;transition:opacity .15s}.node-label[data-hidden]{display:none}.map-labels .node-label:not([data-instant]){animation:.22s ease-out label-in}@keyframes label-in{0%{opacity:0}}.map-dots path{stroke-opacity:.45;stroke-width:2.4px;stroke-linecap:round;vector-effect:non-scaling-stroke}.node-label:is(:hover,:focus,.is-focused){fill:var(--red);stroke-width:var(--selected-label-stroke)}.node-label.is-covered{opacity:0;transition:none}.map-labels{transition:opacity .15s}.map.is-searching .map-labels,.map.is-searching .is-neighbor:not(.is-search-match){opacity:.34}.node-label.is-neighbor{fill:var(--related);font-size:var(--related-label-size);font-weight:700}.node-label.is-search-match{fill:var(--blue);stroke-width:var(--selected-label-stroke);font-weight:750}.node-label.is-search-active{fill:var(--red);font-size:var(--selected-label-size);font-weight:800}.node-label.is-selected{fill:var(--red);stroke:var(--paper);stroke-width:var(--selected-label-stroke);font-size:var(--selected-label-size);font-weight:700}@media (width<=760px){.app{grid-template-rows:1fr;grid-template-columns:1fr;position:relative}.rail{display:contents}.brand{top:max(10px, env(safe-area-inset-top));z-index:10;border:1px solid color-mix(in srgb, var(--line-strong) 72%, transparent);background:color-mix(in srgb, var(--paper) 92%, transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);padding:10px 12px;position:fixed;left:10px;right:10px;box-shadow:inset 0 1px #fffc,0 14px 30px -24px #1113167a}.brand h1{font-size:30px;line-height:.86}.brand h1:before{vertical-align:5px;width:7px;height:7px;margin-right:5px}.brand-credit{font-size:8px}.detail{right:10px;bottom:calc(62px + max(10px, env(safe-area-inset-bottom)));z-index:12;border:1px solid color-mix(in srgb, var(--line-strong) 78%, transparent);background:color-mix(in srgb, var(--paper) 94%, transparent);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);max-height:min(48svh,430px);padding:16px 16px 18px;display:none;position:fixed;left:10px;box-shadow:inset 0 1px #ffffffd1,0 -18px 42px -30px #11131694}.app--has-selection .detail{display:block}.app:not(.app--has-selection):not(:has(.is-menu-open)) .detail{display:block}.app:not(.app--has-selection) .detail>:not(.detail-start){display:none}.detail-start{border-top:0;padding-top:0}.detail-start .starters{grid-template-columns:1fr 1fr;gap:1px 16px}.detail-head{justify-content:space-between;align-items:flex-start;margin-bottom:12px}.detail-dismiss{border:1px solid color-mix(in srgb, var(--line-strong) 72%, transparent);width:34px;height:34px;color:var(--muted);background:#ffffffdb;border-radius:50%;flex:none;place-items:center;display:grid;position:relative;box-shadow:inset 0 1px #ffffffd1}.detail-dismiss:before,.detail-dismiss:after{content:"";background:currentColor;border-radius:999px;width:13px;height:2px;position:absolute;rotate:45deg}.detail-dismiss:after{rotate:-45deg}.detail-dismiss:hover,.detail-dismiss:focus-visible{color:var(--ink);box-shadow:0 1px 0 #ffffffd1 inset, 0 0 0 3px color-mix(in srgb, var(--blue) 16%, transparent);outline:none}.detail h2{flex:min(280px,100% - 46px);min-width:0;font-size:28px}.detail-block{padding-top:14px}.detail-block+.detail-block{margin-top:16px}.detail p{font-size:13.5px;line-height:1.5}.visualizer{--visualizer-projection-width-ratio:1.9;--visualizer-projection-padding:4;height:clamp(132px,37.7358vw - 21.1321px,184px);margin-bottom:12px}.preview-player{gap:10px;margin-bottom:16px;padding:8px 0}.preview-toggle{width:40px;height:40px}.spectrum{gap:10px}.spectrum-bar{height:26px}.spectrum-legend{grid-template-columns:1fr;gap:1px}.search-dock{z-index:20;padding:10px 10px max(10px, env(safe-area-inset-bottom));background:color-mix(in srgb, var(--paper) 94%, transparent);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);position:fixed;bottom:0;left:0;right:0;box-shadow:inset 0 1px #ffffffd1,0 -16px 36px -30px #1113169e}.search-field{border-radius:14px;min-height:42px}.search-results{max-height:min(42svh,360px)}.app--has-selection .search-results{max-height:min(30svh,260px)}.map-shell{padding-bottom:calc(62px + env(safe-area-inset-bottom))}.map{--map-label-scale:2.6;--map-label-stroke-scale:2.1}}@media (width<=560px){.brand h1{font-size:28px}.detail{padding-inline:18px}}